Add copy buttons for runtime commands

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

FIELD_NOTES.md

@@ -26,7 +26,7 @@ Tiny Narrator is a small-model accessibility article reader. It is not a generic
 
 The app exposes the same budget through `/api/model-budget`, including numeric `params_billion` values, per-model `within_limit` values, and a boolean `all_models_within_limit` check. The session panel renders each model's parameter count and Tiny Titan pass state so the claim is visible during the demo.
 
-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 the runtime labels, setup commands, and fallbacks so the demo can distinguish real model wiring from deterministic safety nets.
+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 the runtime labels, setup commands, copy controls, and fallbacks 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 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. Each API check includes copyable curl and PowerShell-friendly `curl.exe` commands for quick reproduction. Deployed demos can set `PUBLIC_BASE_URL` so those commands point at the public Space instead of localhost.
 

README.md

@@ -135,6 +135,6 @@ A submission-readiness panel reads `/api/submission-readiness`, giving judges on
 
 The Copy Evidence button reads `/api/evidence-bundle` and copies the core judge receipts as formatted JSON for quick review or submission notes.
 
-A runtime-plan panel reads `/api/runtime-setup` and summarizes each model path's runtime, setup command, and fallback, keeping the live demo honest about what is online and what is deterministic.
+A runtime-plan panel reads `/api/runtime-setup` and summarizes each model path's runtime, setup command, and fallback, keeping the live demo honest about what is online and what is deterministic. Runtime setup commands have copy controls with the same clipboard fallback messaging as judge API commands.
 
 `/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

@@ -38,7 +38,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` and per-model pass values.
-- `/api/runtime-setup`: app command, model runtime commands rendered in the UI, environment values, and fallback paths.
+- `/api/runtime-setup`: app command, copyable model runtime commands rendered in the UI, environment values, and fallback 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.

scripts/verify.py

@@ -57,6 +57,8 @@ def verify_static_assets() -> None:
     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("runtime-command" in app_js, "Frontend should render runtime setup commands")
+    assert_true("runtime-command-copy" in app_js, "Frontend should expose copy buttons for runtime setup commands")
+    assert_true("runtimeSetupList.addEventListener" in app_js, "Runtime setup command copy actions should be delegated")
     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")

static/app.js

@@ -396,6 +396,7 @@ async function loadRuntimeSetup() {
             <span class="runtime-pill">${escapeHtml(step.runtime)}</span>
           </div>
           <code class="runtime-command">${escapeHtml(step.command)}</code>
+          <button class="runtime-command-copy" type="button" data-command="${escapeHtml(step.command)}">Copy command</button>
           <p>${escapeHtml(step.fallback)}</p>
         </li>
       `)
@@ -823,6 +824,17 @@ demoApiCheckList.addEventListener("click", async (event) => {
     "Command is visible, but clipboard access is unavailable.",
   );
 });
+runtimeSetupList.addEventListener("click", async (event) => {
+  const button = event.target.closest(".runtime-command-copy");
+  if (!button) return;
+  const command = button.dataset.command || "";
+  await copyTextToClipboard(
+    command,
+    "Runtime setup command copied.",
+    "Runtime setup command is empty.",
+    "Runtime setup command is visible, but clipboard access is unavailable.",
+  );
+});
 controls.play.addEventListener("click", () => {
   if (!enabled) return;
   if (currentIndex < 0) {