Render live runtime status details

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

FIELD_NOTES.md

@@ -85,4 +85,4 @@ The app exposes `/api/award-evidence` and renders that data in the session panel
 
 The app also renders `/api/submission-readiness`, so the Field Notes story has a single rollup of which submission claims are currently backed by app evidence.
 
-`/api/runtime-status` keeps the demo honest: if llama.cpp or Kokoro is unavailable, the UI labels the fallback state instead of silently pretending that every model path is online.
+`/api/runtime-status` keeps the demo honest: if llama.cpp or Kokoro is unavailable, the UI labels the fallback state instead of silently pretending that every model path is online. The session panel also lists the live or fallback state for reader brain, vision, speech, and image generation.

README.md

@@ -135,4 +135,4 @@ The Copy Evidence button reads `/api/evidence-bundle` and copies the core judge
 
 A runtime-plan panel reads `/api/runtime-setup` and summarizes each model path's runtime plus fallback, keeping the live demo honest about what is online and what is deterministic.
 
-`/api/runtime-status` performs a short readiness check for llama.cpp and local speech dependencies, then reports which fallback paths are ready for a live demo.
+`/api/runtime-status` performs a short readiness check for llama.cpp and local speech dependencies, then reports which fallback paths are ready for a live demo. The session panel renders live status details for reader brain, vision, speech, and image generation.

SUBMISSION.md

@@ -39,7 +39,7 @@ The prototype is designed for a live hackathon demo: every model-facing path has
 - `/api/health`: app identity, custom frontend marker, llama.cpp base URL, and model manifest.
 - `/api/model-budget`: Tiny Titan parameter proof with numeric `params_billion` values.
 - `/api/runtime-setup`: app command, model runtime commands, environment values, and fallback paths.
-- `/api/runtime-status`: online or fallback-ready status for model paths.
+- `/api/runtime-status`: online or fallback-ready status for each model path, rendered in the session panel.
 - `/api/accessibility-audit`: semantic queue, keyboard navigation, reader cursor state, shortcut safety, live narration, alt text, transcript, user control, and fallback evidence.
 - `/api/demo-script`: repeatable judge runbook and API checks.
 - `/api/image-descriptions`: generated article image descriptions plus prompt, seed, model, asset URL, and fallback status receipts.

scripts/verify.py

@@ -45,9 +45,11 @@ def verify_static_assets() -> None:
     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("runtimeStatusList" in index_html, "Article should expose live runtime status details")
     assert_true("submissionReadinessList" in index_html, "Article should expose submission readiness checks")
     assert_true("copyEvidenceButton" in index_html, "Article should expose a copyable evidence bundle button")
     assert_true("loadDemoScript" in app_js, "Frontend should render the structured demo script")
+    assert_true("runtimeStatusList.innerHTML" in app_js, "Frontend should render live runtime status details")
     assert_true("payload.api_checks" in app_js, "Frontend should render structured demo API checks")
     assert_true("demo-api-command" in app_js, "Frontend should render copyable demo commands")
     assert_true("demo-command-copy" in app_js, "Frontend should expose copy buttons for demo commands")
@@ -210,6 +212,7 @@ def verify_routes() -> None:
     assert_true("summaryButton" in home.text, "Home route should include summary control")
     assert_true("imageStatus" in home.text, "Home route should include image status")
     assert_true("readinessStatus" in home.text, "Home route should include readiness status")
+    assert_true("runtimeStatusList" in home.text, "Home route should include runtime status list")
     assert_true("voiceStatus" in home.text, "Home route should include voice status")
     assert_true("latencyStatus" in home.text, "Home route should include latency status")
     assert_true("voiceControl" in home.text, "Home route should include voice control")

static/app.js

@@ -3,6 +3,7 @@ const readerBar = document.querySelector(".reader-bar");
 const modeStatus = document.querySelector("#modeStatus");
 const currentStatus = document.querySelector("#currentStatus");
 const runtimeStatus = document.querySelector("#runtimeStatus");
+const runtimeStatusList = document.querySelector("#runtimeStatusList");
 const modelStatus = document.querySelector("#modelStatus");
 const readinessStatus = document.querySelector("#readinessStatus");
 const imageStatus = document.querySelector("#imageStatus");
@@ -382,8 +383,34 @@ async function loadRuntimeStatus() {
     const brainLabel = brain.available ? "llama.cpp online" : "llama.cpp fallback";
     const speechLabel = speech.available ? "Kokoro online" : "voice fallback";
     readinessStatus.textContent = `${brainLabel}, ${speechLabel}`;
+    const runtimeItems = [
+      ["Reader brain", payload.reader_brain],
+      ["Vision", payload.vision],
+      ["Speech", payload.speech],
+      ["Image generation", payload.image_generation],
+    ];
+    runtimeStatusList.innerHTML = runtimeItems
+      .map(([label, item]) => `
+        <li>
+          <div class="runtime-row">
+            <span>${escapeHtml(label)}</span>
+            <span class="runtime-pill">${escapeHtml(item.status)}</span>
+          </div>
+          <p>${escapeHtml(item.model)}${item.fallback ? ` | ${escapeHtml(item.fallback)}` : ""}</p>
+        </li>
+      `)
+      .join("");
   } catch {
     readinessStatus.textContent = "Fallback ready";
+    runtimeStatusList.innerHTML = `
+      <li>
+        <div class="runtime-row">
+          <span>Runtime status</span>
+          <span class="runtime-pill">offline</span>
+        </div>
+        <p>Live runtime status is unavailable; deterministic fallbacks remain documented.</p>
+      </li>
+    `;
   }
 }
 

static/index.html

@@ -116,6 +116,7 @@
         <p id="liveNarration" class="live-narration" aria-live="polite">
           Turn on screen reader mode to begin.
         </p>
+        <ul id="runtimeStatusList" class="runtime-list" aria-label="Live model runtime status"></ul>
         <div class="history-header">
           <h3>Transcript</h3>
           <button id="copyTranscriptButton" type="button">Copy</button>