feat: add turn watchdog

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

README.md

@@ -75,6 +75,11 @@ Every scored fate page now carries a deterministic `wood_map` artifact: backgrou
 the closest cited echoes, and a green/red "you" dot for the current idea. The live UI and PNG export render the same
 map, so the share artifact visually proves whether the page sits in an empty margin or near existing work.
 
+## Latency Watchdog
+
+The custom frontend shows optimistic ink immediately after submit. If the first streamed token is slow, a lightweight
+watchdog updates the page text so the demo never sits in a silent blank state during Space startup or model routing.
+
 ## Tool-Call Contract
 
 `/api/tool-contracts` exposes the JSON schemas intended for MiniCPM-style tool calling. `tool_contract_check` accepts a

static/app.js

@@ -26,6 +26,8 @@ let clientPromise = Client.connect(window.location.origin);
 let currentArtifact = null;
 let targetOptions = [];
 let profileFields = [];
+let turnWatchdog = null;
+let sawTurnToken = false;
 
 bootstrap();
 
@@ -83,10 +85,10 @@ async function runTurn(message) {
   input.value = "";
   submit.disabled = true;
   setCommandDisabled(true);
-  ink.textContent = "";
   ink.classList.remove("bleed", "gold");
   corrections.textContent = "";
   planEl.innerHTML = "";
+  startTurnWatchdog();
 
   try {
     const client = await clientPromise;
@@ -103,9 +105,12 @@ async function runTurn(message) {
       }
     }
   } catch (error) {
+    clearTurnWatchdog();
     ink.textContent = `The page tore before it could answer: ${error.message}`;
+    ink.classList.remove("thinking");
     ink.classList.add("bleed");
   } finally {
+    clearTurnWatchdog();
     submit.disabled = false;
     setCommandDisabled(false);
     input.focus();
@@ -190,11 +195,17 @@ function handleEvent(event) {
   }
 
   if (event.type === "token") {
+    markFirstTokenSeen();
     ink.textContent += event.text;
     return;
   }
 
   if (event.type === "done") {
+    if (!sawTurnToken) {
+      clearTurnWatchdog();
+      ink.textContent = event.response || ink.textContent;
+      ink.classList.remove("thinking");
+    }
     session = event.state || {};
     session.profile = session.profile || {};
     session.targets = Array.isArray(session.targets) ? session.targets : [];
@@ -404,6 +415,32 @@ function setCommandDisabled(disabled) {
   });
 }
 
+function startTurnWatchdog() {
+  clearTurnWatchdog();
+  sawTurnToken = false;
+  ink.textContent = "The page is choosing its words.";
+  ink.classList.add("thinking");
+  turnWatchdog = window.setTimeout(() => {
+    if (sawTurnToken) return;
+    ink.textContent = "Still riffling the inked pages.";
+  }, 2200);
+}
+
+function markFirstTokenSeen() {
+  if (sawTurnToken) return;
+  sawTurnToken = true;
+  clearTurnWatchdog();
+  ink.textContent = "";
+  ink.classList.remove("thinking");
+}
+
+function clearTurnWatchdog() {
+  if (turnWatchdog) {
+    window.clearTimeout(turnWatchdog);
+    turnWatchdog = null;
+  }
+}
+
 function syncCurrentIdeaTargets() {
   const currentId = session.current_idea_id;
   if (!currentId || !Array.isArray(session.ideas)) return;

static/styles.css

@@ -127,6 +127,23 @@ h2 {
   text-shadow: 0 0 18px rgba(230, 189, 63, 0.42);
 }
 
+.ink.thinking {
+  color: var(--muted-ink);
+  font-style: italic;
+  animation: ink-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes ink-pulse {
+  0%,
+  100% {
+    opacity: 0.62;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
 .prompt-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 84px;