samagotchi 0.16.0 → 0.18.0

data/lib/samagotchi/web/public/app.js

@@ -1,6 +1,5 @@
 import {
   listSessions,
-  createSession,
   getSession,
   sendTurn,
   cancelTurn,
@@ -37,14 +36,15 @@ import { createPromptHistory } from "./prompt_history.js";
 import { ALL_SESSIONS_HASH, sessionHash, sessionIdFromHash } from "./route.js";
 import { allScopeHref, cardFolder, projectScopeHref, scopeDir } from "./scope.js";
 import { shouldFollowScroll, keepFollowing } from "./scroll.js";
-import { stripColumns, stripShowParts } from "./strip.js";
+import { SHORT_WINDOW_QUERY, stripAutoHidden, stripColumns, stripShowParts } from "./strip.js";
 import { applySessionEvent, heldOrder, listedSessions, sortedByUpdated, waitingBadge, waitingFirst, waitingSearchText, withChildrenAfterParents } from "./sessions_list.js";
 import { createNotifications } from "./notifications.js";
+import { updateNotice } from "./update_notice.js";
 import {
-  appendAboveLiveTiming, cancelLineText, elapsedSince, formatDuration, normalizeTiming, turnTimingText,
+  appendAboveLiveTiming, cancelLineText, elapsedSince, formatDuration, mergeTiming, normalizeTiming, turnTimingText,
 } from "./timing.js";
 import { DONE_MS, applyInitEvent, dropDone, initRowHtml, newInitTasks, seedInitTasks } from "./init_row.js";
-import { clientLabel, commandView, emptyAnswerLine, emptyRetryLine, hookNoticeLabel, initWaitLine, isCommandLine, isOwn, keepEarlyRestore, newClientId, noticeLine, promptOps, reminderText, restoreAction, restoreOnAck, retryStatusLine, snapshotEvents, turnOutput, webLocalReply, workerGoneText } from "./turn_events.js";
+import { clientLabel, commandView, emptyAnswerLine, emptyRetryLine, hookNoticeLabel, initWaitLine, isOwn, sessionCommandLine, keepEarlyRestore, newClientId, noticeLine, promptOps, reminderText, restoreAction, restoreOnAck, retryStatusLine, snapshotEvents, startPageReply, turnOutput, unknownCommandHint, webLocalReply, workerGoneText } from "./turn_events.js";
 
 const $ = (s) => document.querySelector(s);
 const topStripEl = $("#topStrip");
@@ -102,6 +102,15 @@ function findInTurnRoots(selector) {
 let current = emptySessionState();
 let turnRunning = false;
 let liveTurnTimingEl = null;
+// The running turn's id (turn_started's turn_id, the id of its timing
+// record), so a turn-end re-read finishes that turn's line with that
+// turn's record, whatever started since.
+let liveTurnId = null;
+// The turns this page saw end: the records of its last full render, +1 at
+// each turn's end, never fewer than a merge brought. The live line numbers
+// the next one, so a turn queued behind another reads its own number while
+// the other's re-read is still out.
+let turnsEnded = 0;
 // What the running turn waits on, after its live timing line: a provider
 // retry (generation_retrying) or plugins' setup (plugin_init_wait); "" when
 // it streams again.
@@ -170,6 +179,7 @@ async function refresh() {
 function openSessionEvents() {
   eventsControl = openEvents({
     snapshot: (data) => {
+      noticeUpdate(data.version);
       notifications.noticeSessions("snapshot", data);
       allSessions = applySessionEvent(allSessions, "snapshot", data);
       render();
@@ -200,6 +210,17 @@ function openSessionEvents() {
   });
 }
 
+// chi web was upgraded while this tab stayed open (a snapshot on the
+// reconnect names another version than the one that served the page):
+// a toast offers the reload, never forces it.
+let updateShownFor = null;
+function noticeUpdate(served) {
+  const text = updateNotice(document.body.dataset.version, served, updateShownFor);
+  if (!text) return;
+  updateShownFor = served;
+  showToast(text, { label: "Reload", run: () => location.reload() }, { sticky: true });
+}
+
 // The selected session's card changed: its owner and, without a live
 // stream, its status show in the info bar; a worker whose bridge is up
 // (a turn another client sent woke one, or a replacement after a kill)
@@ -285,7 +306,7 @@ function cardHtml(s, { deletable = false } = {}) {
   const ctx = cardCtxText(s.ctx_pct);
   const ctxHtml = ctx ? `<span class="ctx" title="Context used after the last turn">${escapeHtml(ctx)}</span>` : "";
   const waiting = waitingBadge(s);
-  const waitingHtml = waiting ? `<span class="attn ${waiting.kind}" title="${escapeHtml(waiting.title)}">${escapeHtml(waiting.text)}</span>` : "";
+  const waitingHtml = waiting ? `<span class="attn attn-${waiting.kind}" title="${escapeHtml(waiting.title)}">${escapeHtml(waiting.text)}</span>` : "";
   const dotWord = waiting ? waiting.title : s.status;
   return `<div class="card${s.archived ? " archived" : ""}${waiting ? " waiting" : ""}" data-id="${s.id}" title="${escapeHtml(tip)}${memTitle ? ` · ${escapeHtml(memTitle)}` : ""}"><div class="preview">${preview}</div>${s.recap ? `<div class="recap" title="${escapeHtml(s.recap)}">${escapeHtml(s.recap)}</div>` : ""}<div class="meta"><span class="status dot ${escapeHtml(s.status)}${waiting ? " waiting" : ""}" title="${escapeHtml(dotWord)}" aria-label="${escapeHtml(dotWord)}"></span>${waitingHtml}${timeHtml}${ctxHtml}${folderHtml}${parentChipHtml(s)}${ownerBadgeHtml(s)}${archivedHtml}${s.used_memory_names && s.used_memory_names.length ? `<span title="${escapeHtml(s.used_memory_names.join(", "))}">mem ${s.used_memory_names.length}</span>` : ""}</div>${deletable ? `<button type="button" class="card-del" data-del="${escapeHtml(s.id)}" title="Delete session" aria-label="Delete session ${escapeHtml(s.short_id)}">\u2715</button>` : ""}</div>`;
 }
@@ -606,6 +627,7 @@ function clearSelection() {
   resetSessionState();
   clearTimingInterval();
   liveTurnTimingEl = null;
+  liveTurnId = null;
   setTurnRunning(false);
   closeStream();
   setMarkdownWarning(null);
@@ -659,6 +681,7 @@ function resetTurnView() {
   closeStream();
   clearTimingInterval();
   liveTurnTimingEl = null;
+  liveTurnId = null;
   questionCards.removeQuestion();
   questionCards.forgetContinue();
   unmatchedMerge = false;
@@ -716,6 +739,8 @@ function renderSessionView(data) {
   current.dir = s.working_directory;
   current.owner = s.owner || null;
   current.timing = normalizeTiming(data.timing);
+  turnsEnded = current.timing.turnRecords.length;
+  const activeTurnId = current.timing.activeTurn?.id || null;
   // The saved fill, so a reloaded or stopped session shows it before its
   // next turn (a running turn's replay below streams over it).
   const savedPct = savedCtxPct(data.timing?.context);
@@ -768,7 +793,10 @@ function renderSessionView(data) {
   replay.forEach((event) => streamHandlers[event.type]?.(event));
   if (!data.current_turn) {
     setTurnRunning(current.status === "running");
-    if (turnRunning && current.timing.activeTurn?.started_at) startLiveTurnTiming(current.timing.activeTurn.started_at);
+    if (turnRunning && current.timing.activeTurn?.started_at) startLiveTurnTiming(current.timing.activeTurn.started_at, activeTurnId);
+  } else if (turnRunning) {
+    // The replayed turn_started carries no id: the running turn's record's.
+    liveTurnId = activeTurnId;
   }
   turnDom.flush();
   snapshotCards.current.forEach((card) => upsertCard(card));
@@ -819,13 +847,18 @@ let turnEndRead = Promise.resolve();
 let displayLanded = null;
 async function readTurnEnd() {
   if (!selected) return;
+  const id = selected;
+  // The line and the turn this read is for, before the await: a turn
+  // queued behind this one may start (a new live line) before it lands.
+  const line = { el: liveTurnTimingEl, turnId: liveTurnId };
   try {
-    const d = await getSession(selected, { tail: true });
+    const d = await getSession(id, { tail: true, recent: true, turnId: line.turnId });
+    if (id !== selected) return;
     if (d.session) {
       if (Array.isArray(d.session.used_memory_names)) current.usedMemories = d.session.used_memory_names;
       if (d.session.status) current.status = d.session.status;
-      applyTiming(d.timing);
-      finishLiveTurnTiming(current.timing.turnRecords[current.timing.turnRecords.length - 1]);
+      if (!(await mergeTurnTiming(id, d.timing))) return;
+      finishTurnLine(line);
       setMarkdownWarning(d.markdown_warning);
       if (Array.isArray(d.messages)) applyFinalMarkdown(d.messages);
       updateInfoBar();
@@ -914,6 +947,9 @@ function emptyAnswerEl(emptyAnswer) {
 // left the collapsed block (card.js leavesBlock), where a reload puts them.
 function endTurnView(kind, endText = null, { emptyAnswer = null } = {}) {
   setTurnRunning(false);
+  // Every ended turn has a record (completed, canceled, failed); a worker
+  // gone mid-turn is re-rendered (resync), which counts again.
+  if (kind !== "gone") turnsEnded += 1;
   // A completed turn with no answer: its notice where the answer goes
   // (the turn view places it), else after the turn; before the timing.
   const endNote = emptyAnswer ? emptyAnswerEl(emptyAnswer) : null;
@@ -1357,11 +1393,12 @@ function clearTimingInterval() {
 
 let liveTurnNumber = null;
 
-function startLiveTurnTiming(startedAt = new Date().toISOString()) {
+function startLiveTurnTiming(startedAt = new Date().toISOString(), turnId = null) {
   clearTimingInterval();
-  current.timing.activeTurn = { started_at: startedAt };
-  // The turn records hold the finished turns, so this one comes next.
-  liveTurnNumber = current.timing.turnRecords.length + 1;
+  current.timing.activeTurn = turnId ? { id: turnId, started_at: startedAt } : { started_at: startedAt };
+  liveTurnId = turnId || null;
+  // The turns ended so far, so this one comes next.
+  liveTurnNumber = turnsEnded + 1;
   liveTurnNote = "";
   liveTurnTimingEl = document.createElement("div");
   liveTurnTimingEl.className = "turn-timing live";
@@ -1411,11 +1448,46 @@ function finishLiveTurnTiming(record = null, { canceled = false } = {}) {
   updateInfoBar();
 }
 
-function applyTiming(data) {
-  current.timing = normalizeTiming(data);
-  if (turnRunning && current.timing.activeTurn?.started_at) {
-    startLiveTurnTiming(current.timing.activeTurn.started_at);
+// A turn-end re-read's timing (?tail=1&recent=1: the newest turn's records
+// and turn_count) merged into the page's (mergeTiming); when the merge comes
+// up short, the whole timing (?timing=1). Never (re)starts live timing: a
+// turn that started meanwhile keeps its line and its own active turn.
+// @return false when the session changed meanwhile
+async function mergeTurnTiming(id, data) {
+  const keepActive = () => (turnRunning ? current.timing.activeTurn : null);
+  const merged = mergeTiming(current.timing, data);
+  current.timing = { ...merged.timing, activeTurn: keepActive() };
+  if (merged.short) {
+    try {
+      const full = await getSession(id, { timing: true });
+      if (id !== selected) return false;
+      current.timing = { ...normalizeTiming(full.timing), activeTurn: keepActive() };
+    } catch (_) {
+      if (id !== selected) return false;
+    }
   }
+  turnsEnded = Math.max(turnsEnded, current.timing.turnRecords.length);
+  return true;
+}
+
+// Finish the timing line a turn-end read captured (+line+: {el, turnId})
+// with that turn's record: its place in the records and its duration (a
+// canceled one says so). No id (an older worker's events): the last
+// record. No record: the line stays as the turn's end left it. The ticker
+// stops only if that line is still the live one.
+function finishTurnLine(line) {
+  const records = current.timing.turnRecords;
+  const record = line.turnId ? records.find((r) => r.id === line.turnId) : records[records.length - 1];
+  if (line.el === liveTurnTimingEl) {
+    current.timing.activeTurn = null;
+    clearTimingInterval();
+  }
+  const duration = Number(record?.duration_ms);
+  if (line.el && record && Number.isFinite(duration)) {
+    line.el.classList.remove("live");
+    line.el.textContent = turnTimingText(records.indexOf(record) + 1, duration, { canceled: record.status === "canceled" });
+  }
+  updateInfoBar();
 }
 
 function updateFirstPeek() {
@@ -1539,7 +1611,7 @@ const streamHandlers = {
     clearTimingInterval();
     liveTurnTimingEl = null;
     turnDom.turnStarted({ ...data, promptBubble });
-    startLiveTurnTiming(data.started_at);
+    startLiveTurnTiming(data.started_at, data.turn_id || null);
   }),
   turn_completed: async (data) => {
     endTurnView("completed", null, { emptyAnswer: data.turn_summary?.empty_answer || null });
@@ -1564,7 +1636,7 @@ const streamHandlers = {
     try {
       await turnEndRead;
       if (!selected || !data.display) return;
-      const d = await getSession(selected, { tail: true });
+      const d = await getSession(selected, { tail: true, recent: true });
       if (Array.isArray(d.messages)) applyFinalMarkdown(d.messages);
     } catch (_) {
     } finally {
@@ -1621,7 +1693,9 @@ const streamHandlers = {
       updateInfoBar();
     }
     if (view.resync) await resync();
-    const queued = view.anytime && commandBubble(view.commandId);
+    // A card's action that isn't anytime (the step-limit question's
+    // /continue) has no bubble: nothing to remove.
+    const queued = view.anytime ? commandBubble(view.commandId) : null;
     if (view.hidden) queued?.remove();
     else if (queued) drawCommandBubble(queued, view);
     else addCommandBubble(view);
@@ -1701,11 +1775,13 @@ const streamHandlers = {
 
 async function refreshTimingFromSession() {
   if (!selected) return;
+  const id = selected;
+  const line = { el: liveTurnTimingEl, turnId: liveTurnId };
   try {
-    const data = await getSession(selected, { tail: true });
+    const data = await getSession(id, { tail: true, recent: true, turnId: line.turnId });
+    if (id !== selected) return;
     if (data.session?.status) current.status = data.session.status;
-    applyTiming(data.timing);
-    finishLiveTurnTiming(current.timing.turnRecords[current.timing.turnRecords.length - 1]);
+    if (await mergeTurnTiming(id, data.timing)) finishTurnLine(line);
   } catch (_) {}
 }
 
@@ -1732,38 +1808,27 @@ function addCreatedSession(created) {
   render();
 }
 
-// A first message: an idle session, then the turn into it as for any
-// later one (handleSendTurn), so a failed first turn's prompt comes back
-// into the composer too (sentIds). A first command line starts the session
-// with it.
-async function handleCreate() {
-  const prompt = promptEl.value.trim();
-  if (chips.length || (prompt && !isCommandLine(prompt))) return handleSendTurn();
-  if (!prompt) return;
-  actionBtn.disabled = true;
-  try {
-    const s = await createSession(prompt, { dir: scope.dir, model: chosenModel() });
-    addCreatedSession(s);
-    select(s.id);
-    promptEl.value = "";
-    fitPrompt();
-    refreshHistory();
-  } catch (e) {
-    alert(e.message);
-  } finally {
-    actionBtn.disabled = false;
-  }
+// A first message: an idle session, then the turn (or the command) into it
+// as for any later one (handleSendTurn), so a failed first turn's prompt
+// comes back into the composer too (sentIds).
+function handleCreate() {
+  return handleSendTurn();
 }
 
 async function handleSendTurn() {
-  if (!selected && !chips.length && isCommandLine(promptEl.value.trim())) return handleCreate();
   if (current.owner === "tui") return;
   const prompt = turnText(promptEl.value, chips);
   if (!prompt) return;
   // An image-only send's text is its placeholders: not for ↑.
   const typed = promptEl.value.trim() !== "";
-  if (!chips.length && isCommandLine(prompt)) return handleSendCommand(prompt);
   if (!selected) {
+    const local = startPageReply(prompt, { images: chips.length });
+    if (local) {
+      promptEl.value = "";
+      fitPrompt();
+      showNotice(local);
+      return;
+    }
     actionBtn.disabled = true;
     try {
       const s = await createIdleSession({ dir: scope.dir, model: chosenModel(), preview: prompt });
@@ -1776,6 +1841,19 @@ async function handleSendTurn() {
       actionBtn.disabled = false;
     }
   }
+  // A session command by the session's list (the new one's too: select
+  // read it); an unknown /word is a prompt, as in a terminal — but a typo
+  // of a command (/modle) gets the hint, not a turn.
+  if (!chips.length && sessionCommandLine(prompt, current.commands)) return handleSendCommand(prompt);
+  if (!chips.length) {
+    const typo = unknownCommandHint(prompt, current.commands);
+    if (typo) {
+      addCommandBubble({ label: null, line: prompt, text: typo });
+      promptEl.value = "";
+      fitPrompt();
+      return;
+    }
+  }
   const hint = historyEl.querySelector(".hint");
   if (hint) hint.remove();
   // Sending moves a finished turn out of the stage at once (else the echo
@@ -1795,6 +1873,15 @@ async function handleSendTurn() {
       if (!chip.ref) chip.ref = await uploadImage(selected, chip.file, chip.name);
     }
     const ack = await sendTurn(selected, prompt, { clientId, images: turnRefs(sending), history: typed });
+    if (ack?.command_id) {
+      // The worker knew it as a command (its list was newer than ours):
+      // its command_ran shows it, not a prompt bubble.
+      echo.remove();
+      promptEl.value = "";
+      fitPrompt();
+      if (!streamControl?.live) startStream(selected, selectSeq ?? 0);
+      return;
+    }
     if (ack?.enqueued_id) sentIds.add(ack.enqueued_id);
     refreshHistory();
     // A turn that failed fast was restored before this ack: its prompt
@@ -2197,17 +2284,20 @@ async function setArchived(id, archive, { undo = true } = {}) {
   showToast(`${what} ${short}`, undo ? { label: "Undo", run: () => setArchived(id, !archive, { undo: false }) } : null);
 }
 
+// sticky: stays until its action or its ✕ (else gone after 6 s).
 let toastTimer = null;
-function showToast(text, action = null) {
+function showToast(text, action = null, { sticky = false } = {}) {
   const el = $("#toast");
-  el.innerHTML = `<span>${escapeHtml(text)}</span>${action ? `<button type="button" class="toast-action">${escapeHtml(action.label)}</button>` : ""}`;
+  el.innerHTML = `<span>${escapeHtml(text)}</span>${action ? `<button type="button" class="toast-action">${escapeHtml(action.label)}</button>` : ""}` +
+    (sticky ? `<button type="button" class="toast-close" title="Dismiss" aria-label="Dismiss">✕</button>` : "");
   el.hidden = false;
   el.querySelector(".toast-action")?.addEventListener("click", () => {
     el.hidden = true;
     action.run();
   });
+  el.querySelector(".toast-close")?.addEventListener("click", () => { el.hidden = true; });
   clearTimeout(toastTimer);
-  toastTimer = setTimeout(() => { el.hidden = true; }, 6000);
+  if (!sticky) toastTimer = setTimeout(() => { el.hidden = true; }, 6000);
 }
 
 $("#includeArchived").addEventListener("change", () => {
@@ -2247,11 +2337,27 @@ function stripHiddenSaved() {
     return false;
   }
 }
+// A short window hides the strip by itself, so the stage keeps room for a
+// card that waits (its question and choices); the sessions pill brings it
+// back until the window is tall again. Not saved: the saved choice is the
+// user's own hide ▴ / show.
+const shortWindow = window.matchMedia(SHORT_WINDOW_QUERY);
+let stripShownWhileShort = false;
+function applyStripHidden() {
+  document.body.classList.toggle("strip-hidden", stripAutoHidden({
+    saved: stripHiddenSaved(), short: shortWindow.matches, shownWhileShort: stripShownWhileShort,
+  }));
+}
 function setStripHidden(hidden) {
   try { localStorage.setItem("chi_strip_hidden", hidden ? "1" : "0"); } catch (_) {}
-  document.body.classList.toggle("strip-hidden", hidden);
+  stripShownWhileShort = !hidden && shortWindow.matches;
+  applyStripHidden();
 }
-setStripHidden(stripHiddenSaved());
+applyStripHidden();
+shortWindow.addEventListener("change", () => {
+  if (!shortWindow.matches) stripShownWhileShort = false;
+  applyStripHidden();
+});
 $("#stripShow").addEventListener("click", () => setStripHidden(false));
 
 $("#filter").addEventListener("input", renderAll);

data/lib/samagotchi/web/public/data.js

@@ -23,17 +23,11 @@ export function listSessions(sort, order, { dir, ...opts } = {}) {
   );
 }
 
-// opts.dir: the folder the chat starts in (else the server's cwd).
-// dir: the folder the chat starts in; model: the model it starts on (as
-// GET /api/models spells it); either left out means the server's default.
-export function createSession(prompt, { dir, model, ...opts } = {}) {
-  const body = { prompt, ...(dir ? { dir } : {}), ...(model ? { model } : {}) };
-  return api("/api/sessions", { method: "POST", body: JSON.stringify(body), ...opts });
-}
-
 // A session with no first turn: the page's first message is sent into it
-// as a turn (with its images, once they are uploaded). preview: that
-// message, which names the session until its turn is saved.
+// as a turn (with its images, once they are uploaded). dir: the folder the
+// chat starts in; model: the model it starts on (as GET /api/models spells
+// it); either left out means the server's default. preview: that message,
+// which names the session until its turn is saved.
 export function createIdleSession({ dir, model, preview, ...opts } = {}) {
   const body = { idle: true, ...(dir ? { dir } : {}), ...(model ? { model } : {}), ...(preview ? { preview } : {}) };
   return api("/api/sessions", { method: "POST", body: JSON.stringify(body), ...opts });
@@ -61,11 +55,16 @@ export function uploadImage(id, file, name, opts = {}) {
 }
 
 // opts.tail: the lighter answer for the end of a turn (the session, its
-// timing and the last answer only), not the whole history.
+// timing and the last answer only), not the whole history; with
+// opts.recent its timing holds the newest turn's records and turn_count
+// (mergeTiming), and opts.turnId asks for that turn's answer.
+// opts.timing: the whole timing alone (when the merge came up short).
 // opts.parts: each saved message with what it did (thinking, tool calls
 // and their output), for the turn view's reload.
-export function getSession(id, { tail, parts, cards, ...opts } = {}) {
-  const query = cards ? "?cards=1" : tail ? "?tail=1" : parts ? "?parts=1" : "";
+export function getSession(id, { tail, recent, turnId, timing, parts, cards, ...opts } = {}) {
+  let query = cards ? "?cards=1" : tail ? "?tail=1" : timing ? "?timing=1" : parts ? "?parts=1" : "";
+  if (tail && recent) query += "&recent=1";
+  if (tail && turnId) query += `&turn_id=${encodeURIComponent(turnId)}`;
   return api(`/api/sessions/${id}${query}`, opts);
 }
 

data/lib/samagotchi/web/public/index.html

@@ -224,6 +224,9 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .continue-context{font-size:12px;color:var(--text-3);margin-bottom:8px;white-space:pre-wrap}
 .continue-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
 .continue-reason{flex:1;min-width:140px;background:var(--bg-inset);border:1px solid var(--border-strong);border-radius:8px;color:var(--text);padding:6px 8px}
+/* The step-limit question (kind continue): the continue card's buttons inside a question card; the picked one stays marked once answered. */
+.bubble.question.step-limit .continue-actions{margin-top:2px}
+.bubble.question.step-limit .question-choice.selected{outline:2px solid var(--ok);outline-offset:1px;opacity:1}
 .bubble.question.submitting{opacity:.7}
 .bubble.question.answered{border-left-color:var(--ok)}
 .bubble.question.cancelled{border-left-color:var(--text-muted);opacity:.75}
@@ -666,9 +669,11 @@ body.all-view #center, body.all-view #topStrip{display:none}
 .card.archived{opacity:.6}
 .card.archived:hover{opacity:.85}
 .card .archived-badge{font-size:10px;padding:1px 6px;border-radius:6px;border:1px solid var(--border-strong);color:var(--text-muted)}
-#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;display:flex;gap:12px;align-items:center;padding:8px 14px;border-radius:10px;background:var(--bg-raised);color:var(--text);border:1px solid var(--border-strong);box-shadow:0 6px 24px rgba(0,0,0,.25);font-size:13px}
+#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;z-index:50;display:flex;gap:12px;align-items:center;padding:8px 14px;border-radius:10px;background:var(--bg-raised);color:var(--text);border:1px solid var(--border-strong);box-shadow:0 6px 24px rgba(0,0,0,.25);font-size:13px}
 #toast[hidden]{display:none}
 #toast .toast-action{background:transparent;border:0;color:var(--accent);font-weight:600;cursor:pointer;padding:2px 4px}
+#toast .toast-close{background:transparent;border:0;color:var(--text-muted);cursor:pointer;padding:2px 4px;margin-left:-6px}
+#toast .toast-close:hover{color:var(--text)}
 #allList{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;align-content:start;padding:2px}
 .card.skeleton{pointer-events:none;border-style:dashed;opacity:.9;animation:skeleton-pulse 1.2s ease-in-out infinite}
 .card.skeleton .line{height:10px;background:var(--bg-raised);border-radius:6px}

data/lib/samagotchi/web/public/notify.js

@@ -15,13 +15,15 @@ export function notifyState({ hasNotification, secureContext, permission, wanted
 // A finished turn shorter than this was watched: no "done".
 export const DONE_MIN_SECONDS = 10;
 
-const questionReason = (q) => (q.kind === "approval" ? "approval" : "question");
+// The step-limit question (kind "continue": a turn ran out of iterations
+// and asks whether to go on) has its own reason: "out of steps".
+const questionReason = (q) => (q.kind === "approval" ? "approval" : q.kind === "continue" ? "continue" : "question");
 
 // What a session waits on the user for right now, from one summary: an open
 // question or approval, or a running turn's card with actions (check-in's
 // Nudge / Keep going / Stop asks as a question does). The session cards
 // mark and lift these; attentionFor notifies when one opens.
-// @return null | {reason: "question"|"approval"|"card", id}
+// @return null | {reason: "question"|"approval"|"continue"|"card", id}
 export function waitingOn(summary) {
   const q = summary?.pending_question;
   if (q && q.id) return { reason: questionReason(q), id: q.id };
@@ -31,9 +33,13 @@ export function waitingOn(summary) {
 }
 
 // How long a delegated child's new approval waits before it notifies: its
-// parent relays it within a poll or two when it waits on the child, and
-// then the parent's card notifies instead (one bell, not two).
-export const RELAY_HOLD_MS = 1500;
+// parent relays it when it waits on its children, and then the parent's
+// card notifies instead (one bell, not two). A child the parent isn't
+// waiting on directly is seen by its look at the others (DelegateRelay
+// OTHERS_EVERY, 2 s), and the relay reaches the page with the hub's next
+// scan (SessionHub SCAN_INTERVAL, 1 s): up to ~3 s. Only these approvals
+// wait; a child's approval nobody relays rings this late.
+export const RELAY_HOLD_MS = 3500;
 
 // What changed between two summaries of one session that needs the user.
 // @param prev the summary held before (null for a session not seen yet)
@@ -133,6 +139,7 @@ export function attentionText(session, attention) {
   const body = {
     question: "needs an answer",
     approval: "needs approval",
+    continue: "hit its step limit",
     card: "needs you",
     failed: "turn failed",
     done: `done in ${seconds} s`

data/lib/samagotchi/web/public/question_card.js

@@ -8,6 +8,23 @@ export function isApproval(pq) {
   return !!pq && pq.kind === "approval";
 }
 
+// The step-limit question (kind "continue"): a turn ran out of iterations.
+// Its card has a button per option (Continue, Stop) and a reason that goes
+// with Stop; it can't be dismissed.
+export function isContinue(pq) {
+  return !!pq && pq.kind === "continue";
+}
+
+export const CONTINUE_REASON_PLACEHOLDER = "Stop, because… (the model reads it)";
+
+// Why a step-limit question closed unanswered (its question_cancelled reason).
+const CONTINUE_CLOSED = {
+  dropped: "Dropped: a new prompt came",
+  answered: "Answered with /continue",
+  superseded: "Set aside for another question",
+  replaced: "Asked again",
+};
+
 // A delegate's approval relayed to this session's user (the approval
 // relay): who asks (the chain, "ab12 → cd34" for a grandchild's) and its
 // task, or null.
@@ -79,6 +96,7 @@ export function resultText(pq, { answer = null, cancelled = false, reason = "" }
   const approval = isApproval(pq);
   const relay = relayView(pq);
   if (cancelled && relay && reason !== "dismissed") return relayClosedText(relay, reason);
+  if (isContinue(pq)) return continueResultText({ answer, cancelled, reason });
   if (cancelled) {
     const label = approval ? "Denied" : "Cancelled";
     return reason ? `${label} (${reason})` : label;
@@ -97,6 +115,14 @@ export function resultText(pq, { answer = null, cancelled = false, reason = "" }
   return parts.length ? `Answered: ${parts.join(" · ")}` : "Answered";
 }
 
+function continueResultText({ answer, cancelled, reason }) {
+  if (cancelled) return CONTINUE_CLOSED[reason] || (reason ? `Closed (${reason})` : "Closed");
+  const sel = answer && Array.isArray(answer.selected) ? answer.selected : [];
+  const freeform = answer && answer.freeform ? String(answer.freeform) : "";
+  if (sel[0] === "Continue") return "Continued";
+  return freeform ? `Stopped: ${freeform}` : "Stopped";
+}
+
 // Shorten a line of text for the card's summary (the collapsed one-liner).
 export function truncate(text, n = 80) {
   const s = String(text ?? "");
@@ -115,7 +141,8 @@ export function summaryText(pq, { answer = null, cancelled = false, reason = ""
     const text = asked ? `${truncate(asked, 60)} → ${result}` : result;
     return truncate(relay ? `${relay.who}: ${text}` : text, 120);
   }
-  const label = isApproval(pq) ? `Approve ${pq.approval?.label || pq.approval?.tool || "call"}?` : "Question";
+  const label = isApproval(pq) ? `Approve ${pq.approval?.label || pq.approval?.tool || "call"}?`
+    : isContinue(pq) ? "Step limit" : "Question";
   return truncate(pq.header || label);
 }