Render demo API checks in runbook

Co-authored-by: Codex <codex@openai.com>

FIELD_NOTES.md

@@ -28,7 +28,7 @@ The app exposes the same budget through `/api/model-budget`, including numeric `
 
 Runtime setup is also data-backed. `/api/runtime-setup` lists the app command, llama.cpp launch command, model-specific runtime paths, environment values, and fallbacks. The session panel renders a compact version so the demo can distinguish real model wiring from deterministic safety nets.
 
-The judge runbook lives at `/api/demo-script` and is rendered in the session panel. It keeps the live presentation repeatable by pairing visible actions with API checks for health, model budget, runtime setup, runtime status, image descriptions, reader narration, and speech.
+The judge runbook lives at `/api/demo-script` and is rendered in the session panel with its API evidence checks. It keeps the live presentation repeatable by pairing visible actions with API checks for health, model budget, runtime setup, runtime status, image descriptions, reader narration, and speech.
 
 Submission readiness lives at `/api/submission-readiness`. It aggregates the demo-critical checks into one payload: model budget, award evidence, custom frontend assets, runtime setup, accessibility audit, image receipts, and executable demo API checks.
 

README.md

@@ -75,7 +75,7 @@ The verifier checks syntax, static assets, Space metadata consistency, determini
 
 `/api/runtime-setup` exposes the commands, environment values, and fallback paths used for the model stack so the demo can be reproduced from the same data the UI displays.
 
-`/api/demo-script` exposes a compact judge runbook with the visible actions and API checks that prove the submission claims. The session panel renders those actions as the Judge Runbook.
+`/api/demo-script` exposes a compact judge runbook with the visible actions and API checks that prove the submission claims. The session panel renders those actions and API evidence checks as the Judge Runbook.
 
 `/api/accessibility-audit` exposes structured evidence for semantic reading order, keyboard navigation, reader cursor state, shortcut safety, live narration, image alt text, transcript review, user-controlled playback, and fallback resilience.
 
@@ -120,7 +120,7 @@ Navigation commands interrupt current speech before starting the next request, m
 
 Reader-brain, image-description, speech, and image-generation responses include `elapsed_ms`. The session panel and transcript show recent latency so the Field Notes can discuss responsiveness with concrete numbers.
 
-The session panel renders the judge runbook from `/api/demo-script`, plus manifest-backed evidence for Tiny Titan, Llama Champion, Off-Brand, and Field Notes. A model-budget panel reads `/api/model-budget` so judges can see each role's parameter count in the live app.
+The session panel renders the judge runbook and API evidence checks from `/api/demo-script`, plus manifest-backed evidence for Tiny Titan, Llama Champion, Off-Brand, and Field Notes. A model-budget panel reads `/api/model-budget` so judges can see each role's parameter count in the live app.
 
 A submission-readiness panel reads `/api/submission-readiness`, giving judges one compact rollup of the claims the live app can prove.
 

SUBMISSION.md

@@ -32,7 +32,7 @@ The prototype is designed for a live hackathon demo: every model-facing path has
 2. Turn on screen-reader mode and press `Space` or `Next` to narrate the first semantic node.
 3. Use `Heading`, `Image`, and `Summary` to navigate by article meaning instead of by raw page order.
 4. Show the session panel: transcript, runtime readiness, latency, judge runbook, award evidence, model budget, and runtime plan.
-5. Mention that `/api/demo-script` exposes the same judge runbook as structured data.
+5. Mention that `/api/demo-script` exposes the same judge runbook and API evidence checks as structured data.
 
 ## Evidence endpoints
 

scripts/verify.py

@@ -39,9 +39,11 @@ def verify_static_assets() -> None:
     assert_true('aria-live="polite"' in index_html, "Article should expose an aria-live narration region")
     assert_true("transcriptLog" in index_html, "Article should expose a visible transcript log")
     assert_true("demoScriptList" in index_html, "Article should expose the judge demo runbook")
+    assert_true("demoApiCheckList" in index_html, "Article should expose judge API evidence checks")
     assert_true("imageReceiptList" in index_html, "Article should expose generated image receipts")
     assert_true("submissionReadinessList" in index_html, "Article should expose submission readiness checks")
     assert_true("loadDemoScript" in app_js, "Frontend should render the structured demo script")
+    assert_true("payload.api_checks" in app_js, "Frontend should render structured demo API checks")
     assert_true("function haltPlayback" in app_js, "Reader controls should expose a shared playback halt helper")
     assert_true(
         "haltPlayback({ clearAutoAdvance: false });" in app_js,
@@ -204,6 +206,7 @@ def verify_routes() -> None:
     assert_true("transcriptLog" in home.text, "Home route should include transcript log")
     assert_true("demoScriptStatus" in home.text, "Home route should include demo script status")
     assert_true("demoScriptList" in home.text, "Home route should include demo script list")
+    assert_true("demoApiCheckList" in home.text, "Home route should include demo API check list")
     assert_true("awardEvidenceList" in home.text, "Home route should include award evidence list")
     assert_true("submissionReadinessStatus" in home.text, "Home route should include submission readiness status")
     assert_true("submissionReadinessList" in home.text, "Home route should include submission readiness list")

static/app.css

@@ -390,6 +390,14 @@ dd {
   padding-left: 20px;
 }
 
+.demo-api-check-list {
+  display: grid;
+  gap: 8px;
+  margin: 12px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
 .award-list li {
   border: 1px solid var(--line);
   border-radius: 8px;
@@ -428,6 +436,34 @@ dd {
   font-size: 0.82rem;
 }
 
+.demo-api-check-list li {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 8px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 9px 10px;
+  background: var(--surface);
+}
+
+.demo-api-check-list span {
+  color: var(--accent-strong);
+  font-size: 0.74rem;
+  font-weight: 850;
+}
+
+.demo-api-check-list code {
+  overflow-wrap: anywhere;
+  font-size: 0.78rem;
+}
+
+.demo-api-check-list p {
+  grid-column: 1 / -1;
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
 .budget-list {
   display: grid;
   gap: 8px;

static/app.js

@@ -19,6 +19,7 @@ const copyTranscriptButton = document.querySelector("#copyTranscriptButton");
 const clearTranscriptButton = document.querySelector("#clearTranscriptButton");
 const demoScriptStatus = document.querySelector("#demoScriptStatus");
 const demoScriptList = document.querySelector("#demoScriptList");
+const demoApiCheckList = document.querySelector("#demoApiCheckList");
 const awardEvidenceList = document.querySelector("#awardEvidenceList");
 const submissionReadinessStatus = document.querySelector("#submissionReadinessStatus");
 const submissionReadinessList = document.querySelector("#submissionReadinessList");
@@ -244,6 +245,15 @@ async function loadDemoScript() {
         </li>
       `)
       .join("");
+    demoApiCheckList.innerHTML = payload.api_checks
+      .map((item) => `
+        <li>
+          <span>${escapeHtml(item.method)}</span>
+          <code>${escapeHtml(item.path)}</code>
+          <p>${escapeHtml(item.expect)}${item.sample_body ? " Sample body included." : ""}</p>
+        </li>
+      `)
+      .join("");
   } catch {
     demoScriptStatus.textContent = "Unavailable";
     demoScriptList.innerHTML = `
@@ -255,6 +265,7 @@ async function loadDemoScript() {
         <p>The structured demo script is unavailable.</p>
       </li>
     `;
+    demoApiCheckList.innerHTML = "";
   }
 }
 

static/index.html

@@ -127,6 +127,7 @@
           <span id="demoScriptStatus">Loading</span>
         </div>
         <ol id="demoScriptList" class="demo-script-list" aria-label="Judge demo runbook"></ol>
+        <ul id="demoApiCheckList" class="demo-api-check-list" aria-label="Judge API evidence checks"></ul>
         <div class="award-header">
           <h3>Award Evidence</h3>
         </div>