Render judge runbook in session panel

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`. 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. 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.
+`/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/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 also renders a manifest-backed demo checklist for Tiny Titan, Llama Champion, Off-Brand, and Field Notes evidence. 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 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

@@ -31,7 +31,7 @@ The prototype is designed for a live hackathon demo: every model-facing path has
 1. Open the article and show that the app is a custom article interface, not a stock chatbot page.
 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, demo checklist, model budget, and runtime plan.
+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.
 
 ## Evidence endpoints

scripts/verify.py

@@ -38,8 +38,10 @@ def verify_static_assets() -> None:
     assert_true('data-reader-type="image"' in index_html, "Article should mark image reader nodes")
     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("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("function haltPlayback" in app_js, "Reader controls should expose a shared playback halt helper")
     assert_true(
         "haltPlayback({ clearAutoAdvance: false });" in app_js,
@@ -200,6 +202,8 @@ def verify_routes() -> None:
     assert_true("speedValue" in home.text, "Home route should include speed value output")
     assert_true("autoAdvanceControl" in home.text, "Home route should include auto-advance control")
     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("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

@@ -286,10 +286,18 @@ dd {
   margin-top: 22px;
 }
 
-.award-header {
+.award-header,
+.demo-script-header {
   margin-top: 22px;
 }
 
+.demo-script-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
 .submission-header {
   display: flex;
   align-items: center;
@@ -318,7 +326,8 @@ dd {
 .budget-header span,
 .runtime-header span,
 .image-receipt-header span,
-.submission-header span {
+.submission-header span,
+.demo-script-header span {
   color: var(--accent-strong);
   font-size: 0.76rem;
   font-weight: 850;
@@ -374,6 +383,13 @@ dd {
   list-style: none;
 }
 
+.demo-script-list {
+  display: grid;
+  gap: 10px;
+  margin: 12px 0 0;
+  padding-left: 20px;
+}
+
 .award-list li {
   border: 1px solid var(--line);
   border-radius: 8px;
@@ -381,6 +397,37 @@ dd {
   background: var(--surface);
 }
 
+.demo-script-list li {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 10px 12px;
+  background: var(--surface);
+}
+
+.demo-script-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 0.82rem;
+  font-weight: 850;
+  text-transform: uppercase;
+}
+
+.demo-script-title span:last-child {
+  border-radius: 999px;
+  background: rgba(31, 111, 104, 0.12);
+  color: var(--accent-strong);
+  padding: 2px 8px;
+  font-size: 0.7rem;
+}
+
+.demo-script-list p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
 .budget-list {
   display: grid;
   gap: 8px;

static/app.js

@@ -17,6 +17,8 @@ const autoAdvanceControl = document.querySelector("#autoAdvanceControl");
 const transcriptLog = document.querySelector("#transcriptLog");
 const copyTranscriptButton = document.querySelector("#copyTranscriptButton");
 const clearTranscriptButton = document.querySelector("#clearTranscriptButton");
+const demoScriptStatus = document.querySelector("#demoScriptStatus");
+const demoScriptList = document.querySelector("#demoScriptList");
 const awardEvidenceList = document.querySelector("#awardEvidenceList");
 const submissionReadinessStatus = document.querySelector("#submissionReadinessStatus");
 const submissionReadinessList = document.querySelector("#submissionReadinessList");
@@ -226,6 +228,36 @@ async function loadAwardEvidence() {
   }
 }
 
+async function loadDemoScript() {
+  try {
+    const payload = await postJson("/api/demo-script");
+    demoScriptStatus.textContent = `${payload.estimated_minutes} min`;
+    demoScriptList.innerHTML = payload.actions
+      .map((item) => `
+        <li>
+          <div class="demo-script-title">
+            <span>${escapeHtml(item.label)}</span>
+            <span>${escapeHtml(`Step ${item.step}`)}</span>
+          </div>
+          <p>${escapeHtml(item.action)}</p>
+          <p>${escapeHtml(item.evidence)}</p>
+        </li>
+      `)
+      .join("");
+  } catch {
+    demoScriptStatus.textContent = "Unavailable";
+    demoScriptList.innerHTML = `
+      <li>
+        <div class="demo-script-title">
+          <span>Judge runbook</span>
+          <span>offline</span>
+        </div>
+        <p>The structured demo script is unavailable.</p>
+      </li>
+    `;
+  }
+}
+
 async function loadSubmissionReadiness() {
   try {
     const payload = await postJson("/api/submission-readiness");
@@ -683,6 +715,7 @@ controls.play.addEventListener("click", () => {
 });
 
 loadManifest();
+loadDemoScript();
 loadAwardEvidence();
 loadSubmissionReadiness();
 loadModelBudget();

static/index.html

@@ -122,8 +122,13 @@
           <button id="clearTranscriptButton" type="button">Clear</button>
         </div>
         <ol id="transcriptLog" class="transcript-log" aria-label="Narration transcript"></ol>
+        <div class="demo-script-header">
+          <h3>Judge Runbook</h3>
+          <span id="demoScriptStatus">Loading</span>
+        </div>
+        <ol id="demoScriptList" class="demo-script-list" aria-label="Judge demo runbook"></ol>
         <div class="award-header">
-          <h3>Demo Checklist</h3>
+          <h3>Award Evidence</h3>
         </div>
         <ul id="awardEvidenceList" class="award-list" aria-label="Hackathon bonus evidence"></ul>
         <div class="submission-header">