samagotchi 0.18.1 → 0.20.0

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

@@ -48,3 +48,62 @@ export function savedCtxPct(context) {
 export function cardCtxText(pct) {
   return num(pct) === null ? "" : `${Math.round(pct)}%`;
 }
+
+// A decode speed: "87 tok/s", "1.9k tok/s"; "~64 tok/s" for an estimate (no
+// server timings); "" without one. The TUI's /stats says the same
+// (Formatting#speed_text; spec/shared/labels_matrix.json).
+export function speedText(tps, source) {
+  const value = num(tps);
+  if (value === null || value <= 0) return "";
+  const number = value >= 1000 ? `${(Math.round(value / 100) / 10).toFixed(1)}k` : String(Math.round(value));
+  return `${source === "estimate" ? "~" : ""}${number} tok/s`;
+}
+
+// A cost in USD: "$0.42"; under a cent, four decimals ("$0.0012"); "" for
+// none or zero. As Formatting#cost_text.
+export function costText(cost) {
+  const value = num(cost);
+  if (value === null || value <= 0) return "";
+  return value >= 0.01 ? `$${value.toFixed(2)}` : `$${value.toFixed(4)}`;
+}
+
+function count(n) {
+  return Math.round(n).toLocaleString("en-US");
+}
+
+// The ctx tooltip (info bar and card): +title+, then the session's tokens
+// (in summed over every request, cached with its share, out with the
+// reasoning part) and its cost, when it has any. A delegated session keeps
+// its own metrics, so these are this session's only.
+export function tokensTipText(tokens, title = "Context used after the last turn") {
+  const prompt = num(tokens?.prompt_sum) || 0;
+  const completion = num(tokens?.completion_sum) || 0;
+  if (!prompt && !completion) return title;
+  const cached = num(tokens.cached_sum) || 0;
+  const reasoning = num(tokens.reasoning_sum) || 0;
+  const parts = [`in ${count(prompt)}`];
+  if (cached > 0 && prompt > 0) parts.push(`cached ${count(cached)} (${Math.round((cached * 100) / prompt)}%)`);
+  parts.push(`out ${count(completion)}${reasoning > 0 ? ` (reasoning ${count(reasoning)})` : ""}`);
+  const lines = [title, `tokens: ${parts.join(" · ")}`];
+  const cost = costText(tokens.cost_sum);
+  if (cost) lines.push(`cost: ${cost}`);
+  lines.push("this session only, all requests");
+  return lines.join("\n");
+}
+
+// The info bar's speed: the newest generation's decode speed, "" before one.
+export function lastSpeedText(tokens) {
+  return speedText(tokens?.last_decode_tps, tokens?.tps_source);
+}
+
+// The session's tokens block after a :generation_completed: the event's
+// running totals (the server closed the generation and put them on it),
+// with its speed; an event without them (a replay, an older worker) keeps
+// +previous+.
+export function generationTokens(previous, data) {
+  const tokens = data?.tokens;
+  if (!tokens || typeof tokens !== "object") return previous ?? null;
+  const speed = data.speed;
+  if (!speed || num(speed.decode_tps) === null) return tokens;
+  return { ...tokens, last_decode_tps: speed.decode_tps, tps_source: speed.source };
+}

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

@@ -123,6 +123,12 @@ export function stopSession(id, opts = {}) {
   return api(`/api/sessions/${id}/stop`, { method: "POST", body: JSON.stringify({}), ...opts });
 }
 
+// Hands the session to a new worker on the newest chi installed: 200
+// {status, from_version, version}, or 409 with the reason in words (detail).
+export function restartSession(id, opts = {}) {
+  return api(`/api/sessions/${encodeURIComponent(id)}/restart`, { method: "POST", body: JSON.stringify({}), ...opts });
+}
+
 // Hides the session (and its delegates) from the lists, kept for good; the
 // server stops a live idle worker first and answers 409 while a turn runs.
 export function archiveSession(id, opts = {}) {

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

@@ -86,7 +86,9 @@ export function previewForCard(session) {
 
 const DELETE_PREVIEW_CHARS = 40;
 
-// The confirm before deleting a session (the info bar's and a card's).
+// The confirm before deleting a session (the info bar's and a card's). The
+// list's owner can be stale (a worker idle-exits), so a worker is only
+// "stopped if it's still running", never promised.
 export function deleteConfirmText(session) {
   const n = normalize(session.first_preview || session.last_prompt || "");
   const preview = n.length > DELETE_PREVIEW_CHARS ? `${n.slice(0, DELETE_PREVIEW_CHARS)}\u2026` : n;
@@ -95,7 +97,7 @@ export function deleteConfirmText(session) {
     `Delete session ${shortId}${preview ? ` \u2014 "${preview}"` : ""}?`,
     "Its history, notes and images are removed; this can't be undone.",
   ];
-  if (session.owner === "worker") lines.push("Its worker is running and will be stopped first.");
+  if (session.owner === "worker") lines.push("If its worker is still running, it is stopped first.");
   return lines.join("\n");
 }
 
@@ -216,3 +218,14 @@ export function recapLabel(turnsSince, stale = false) {
   if (n > 1) return `recap · before the last ${n} turns`;
   return stale ? "recap · earlier" : "recap";
 }
+
+// The info bar's memory chip on a phone (where the "mem: …" line goes),
+// for a session that used memories: "mem 2", the names its tooltip.
+export function memChipText(names) {
+  return `mem ${(names || []).length}`;
+}
+
+export function memChipTitle(names) {
+  const list = names || [];
+  return list.length ? `memories: ${list.join(", ")}` : "no memories in this session";
+}

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

@@ -242,6 +242,11 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .question-error{color:var(--danger);font-size:12px;margin-bottom:8px}
 .question-error.hidden{display:none}
 .question-result{margin-top:6px;font-size:12px;color:var(--ok);font-weight:600}
+/* 4.02: a resolved card whose summary already carries the result hides the
+   body line; a hand-toggled one keeps it (its expanded body shows it). */
+.question-result.hidden{display:none}
+/* N1: an approval's verdict sits above its command block, not after it. */
+.question-result.verdict{margin-top:0;margin-bottom:8px}
 .bubble.question.cancelled .question-result{color:var(--text-muted)}
 .question-submit{align-self:flex-end;font-size:13px}
 .question-dismiss{font-size:13px;margin-left:8px}
@@ -298,6 +303,17 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .bubble.plugin-card{border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--glass-bg));padding:10px 12px;transition:box-shadow .3s ease}
 .bubble.plugin-card.warn{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 7%,var(--glass-bg))}
 .bubble.plugin-card.card-updated{box-shadow:inset 0 1px 0 var(--glass-highlight),0 0 0 1px var(--accent-ring),var(--glass-shadow)}
+/* A notice card (card.js isNoticeCard): a one-line row like a resolved question, "▸ check-in: Nudged …"; opened, the line wraps and the card's glass comes back. */
+.bubble.plugin-card.notice:not([open]){padding:3px 10px;background:transparent;border-color:transparent;border-left-color:var(--accent);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;align-self:flex-start;max-width:100%;border-radius:6px;transition:background .12s ease}
+.bubble.plugin-card.notice:not([open]):hover{background:var(--bg-panel)}
+.bubble.plugin-card.notice>summary{cursor:pointer;color:var(--text-muted);font-size:12px;font-weight:500;user-select:none;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.bubble.plugin-card.notice>summary::-webkit-details-marker{display:none}
+.bubble.plugin-card.notice>summary::before{content:"▸ ";color:var(--accent)}
+.bubble.plugin-card.notice[open]{padding:6px 10px}
+.bubble.plugin-card.notice[open]>summary{white-space:pre-wrap;font-size:13px;color:var(--text-2)}
+.bubble.plugin-card.notice[open]>summary::before{content:"▾ "}
+.notice-from{margin-top:4px;font-size:11px;color:var(--text-faint)}
+.gen .bubble.plugin-card.notice:not([open]){margin:2px 0;padding:2px 8px}
 .card-head{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
 .card-title{font-size:14px;font-weight:600;color:var(--text-bright)}
 .card-source{font-size:11px;color:var(--text-faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@@ -552,8 +568,17 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 #infoBar .meta .copy-attach:hover{color:#fff;border-color:var(--border-strong)}
 #infoBar .meta .status{font-size:11px;padding:2px 6px;border-radius:999px}
 #infoBar .meta .dir{font-family:ui-monospace,monospace;font-size:11px;color:var(--text-muted);word-break:break-all}
-#infoBar .meta .model{font-size:11px;padding:2px 6px;border-radius:6px;background:var(--bg-hover);color:var(--text-3)}
+/* The footer sits on the card's glass: its chips are tinted, not solid, so the glass reads through them. */
+#infoBar .meta .model{font-size:11px;padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--bg-hover) 55%,transparent);color:var(--text-3)}
+/* The memory chip ("mem 2", when the session used some): phones only, where the "mem: …" line is hidden. */
+#infoBar .meta .mem-chip{display:none}
 #infoBar .meta .model.served-mismatch{background:var(--warn-bg);color:var(--warn-bright);border:1px solid var(--warn-border)}
+/* The open session's worker runs an older chi: its version, and Restart when it can. */
+#infoBar .meta .worker-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:2px 2px 2px 6px;border-radius:6px;background:var(--warn-bg);color:var(--warn-bright);border:1px solid var(--warn-border);white-space:nowrap}
+#infoBar .meta .worker-badge:not(:has(button)){padding-right:6px}
+#infoBar .meta .worker-restart{padding:1px 8px;border-radius:5px;font-size:11px;font-weight:600;background:var(--bg-raised);color:var(--warn-bright);border:1px solid var(--warn-border)}
+#infoBar .meta .worker-restart:hover:not(:disabled){background:var(--warn-border);color:#fff}
+#infoBar .meta .worker-restart:disabled{opacity:.7;cursor:default}
 #infoBar .preview-line{font-size:13px;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.4;max-height:2.8em}
 #infoBar .preview-line .preview, #infoBar .preview-line .mem{word-break:break-word}
 #infoBar .mem{font-size:12px;color:var(--text-muted)}
@@ -577,10 +602,12 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
   #infoBar .meta>*{flex-shrink:0}
   #infoBar .meta .id{order:-2}
   #infoBar .meta .status{order:-1}
+  /* After the status (same order, later in the DOM): the meta scrolls, and only its start is in sight. */
+  #infoBar .meta .mem-chip{display:inline;order:-1}
   #infoBar .meta .dir{word-break:normal}
   #infoBar button{padding:4px 8px}
 }
-#empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-muted);padding:24px;text-align:center;background:var(--bg);z-index:1}
+#empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-muted);padding:24px;text-align:center;background:color-mix(in srgb,var(--bg) 35%,transparent);z-index:1}
 #empty.hidden{display:none !important}
 /* Start page (no session): the composer alone, centered; no info bar. */
 body:not(.has-session) #center{justify-content:safe center;background:transparent}
@@ -650,6 +677,13 @@ body.has-session #scope .scope-where{display:none}
 #stripShow .waiting-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warn);margin-right:4px;vertical-align:1px}
 #stripHide{align-self:flex-end;border:0;padding:0 2px;border-radius:4px}
 #stripHide:hover{text-decoration:underline;color:var(--text-2)}
+/* A narrow window's strip scrolls sideways, which puts its own "hide ▴" out of sight: the top bar has it instead, where the pill comes back, with a finger-sized target. */
+#stripHideTop{display:none;white-space:nowrap;flex-shrink:0}
+@media(max-width:900px){
+  body:not(.strip-hidden):not(.all-view) #stripHideTop{display:block}
+  #stripHide{display:none}
+  #stripHideTop,#stripShow{min-height:30px;padding:4px 12px;font-size:12px}
+}
 body.strip-hidden #stripShow{display:block}
 body.strip-hidden #topStrip, body.all-view #stripShow{display:none}
 #allTile{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;color:var(--text-2);font-size:13px;font-weight:600;width:100%}
@@ -729,6 +763,7 @@ a{color:var(--accent)}
     <button type="button" id="newBtn" class="brand" title="New chat"><span class="brand-name">chi</span><span class="brand-new">+<span class="brand-new-word"> new chat</span></span></button>
     <div id="scope" hidden></div>
     <button type="button" class="strip-toggle" id="stripShow" title="Show the latest sessions"><span class="pill-arrow" aria-hidden="true">▾</span> sessions</button>
+    <button type="button" class="strip-toggle" id="stripHideTop" title="Hide the latest sessions"><span class="pill-arrow" aria-hidden="true">▴</span> hide</button>
     <button type="button" id="notifyBtn" aria-label="Notifications" aria-pressed="false" hidden><svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path class="bell" d="M8 1.75a4 4 0 0 0-4 4v2.6L2.75 10.6v.9h10.5v-.9L12 8.35v-2.6a4 4 0 0 0-4-4Z"/><path class="clapper" d="M6.5 13a1.5 1.5 0 0 0 3 0"/><path class="slash" d="M2.5 2.5l11 11"/></svg></button>
   </div>
   <section id="topStrip" aria-label="Latest sessions" class="loading"><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div></section>

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

@@ -17,7 +17,9 @@ export function pickModel(names, defaultName, stored) {
 
 export const RECENT_KEY = "chi_model_recent";
 
-// The payload's models as rows: {name, host, id, isDefaultHost}. The
+// The payload's models as rows: {name, host, id, isDefaultHost}, and
+// sampling (the configured request parameters as /model words them) when
+// the model has some. The
 // default host's names are bare (name == id); the server's own default,
 // unshifted when no host lists it, has no host and goes with them, shown
 // by its name.
@@ -29,7 +31,9 @@ export function modelRows(payload) {
       const name = String(m.name);
       const host = m.host ? String(m.host) : "";
       const id = host ? String(m.id || name) : name;
-      return { name, host, id, isDefaultHost: !host || name === id };
+      const row = { name, host, id, isDefaultHost: !host || name === id };
+      if (m.sampling) row.sampling = String(m.sampling);
+      return row;
     });
 }
 

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

@@ -59,7 +59,8 @@ export function createModelPicker({ button, panel, input, list, composer, center
     const host = showHost ? `<span class="model-host">${markedHtml(row.host, hostMarks)}</span><span class="model-dot"> · </span>` : "";
     const note = row.name === defaultName ? `<span class="model-note">default</span>` : "";
     const cls = `model-option${i === active ? " active" : ""}${row.name === chosen ? " chosen" : ""}`;
-    return `<div class="${cls}" role="option" id="model-option-${i}" aria-selected="${i === active}" data-index="${i}">` +
+    const title = row.sampling ? ` title="${escapeHtml(`sampling: ${row.sampling}`)}"` : "";
+    return `<div class="${cls}" role="option" id="model-option-${i}" aria-selected="${i === active}" data-index="${i}"${title}>` +
       `<span class="model-id">${host}${markedHtml(row.id, idMarks)}</span>${note}</div>`;
   }
 

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

@@ -52,7 +52,8 @@ export function approvalView(pq) {
   const command = a.command || null;
   let where = a.cwd || "";
   if (a.repo_root) {
-    const repo = String(a.repo_root).split("/").filter(Boolean).pop() || a.repo_root;
+    // The repository's name (a worktree's main checkout), else the root's folder.
+    const repo = a.repo_name || String(a.repo_root).split("/").filter(Boolean).pop() || a.repo_root;
     where += ` (repo ${repo}${a.branch ? `, branch ${a.branch}` : ""})`;
   } else if (where) {
     where += " (not in a repo)";
@@ -161,6 +162,18 @@ export function approvalAllowed(pq, answer) {
   return resultText(pq, { answer }).startsWith("Allowed");
 }
 
+// What the card says when an answer or a dismissal didn't go through. 503
+// (the server found no live bridge) reads as the session not running; any
+// other failure — the worker's own (the server maps it to a 502
+// bridge_error) or the connection's — shows what it said, so a worker that
+// failed the request is not mistaken for one that is gone.
+export function answerErrorText(error) {
+  const status = error?.status;
+  const message = String(error?.message ?? error ?? "");
+  if (status === 503 || /not_live/.test(message)) return "Session is not running — restart it to answer.";
+  return message;
+}
+
 // What a new question does to the card on the page: "same" (the card
 // already shows it: a replay), "keep" (the card is resolved, so it stays in
 // the history and the new one goes under it), "replace" (the card is still

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

@@ -15,8 +15,8 @@
 import { dismissQuestion, sendAnswer, sendCommand } from "./data.js";
 import { diffHtml } from "./diff_view.js";
 import {
-  approvalAllowed, approvalView, CONTINUE_REASON_PLACEHOLDER, isContinue, nextCardAction, relayedToView, resultText,
-  summaryText,
+  answerErrorText, approvalAllowed, approvalView, CONTINUE_REASON_PLACEHOLDER, isContinue, nextCardAction,
+  relayedToView, resultText, summaryText,
 } from "./question_card.js";
 import { sessionHash } from "./route.js";
 import { clientLabel, continueLine, isOwn } from "./turn_events.js";
@@ -148,9 +148,7 @@ export function createQuestionCards({
       }).catch((e) => {
         submit.disabled = false;
         card.classList.remove("submitting");
-        err.textContent = /503|not_live/.test(e.message)
-          ? "Session is not running — restart it to answer."
-          : e.message;
+        err.textContent = answerErrorText(e);
         err.classList.remove("hidden");
       });
     });
@@ -169,9 +167,7 @@ export function createQuestionCards({
       api.dismissQuestion(sessionId(), pq.id).catch((e) => {
         submit.disabled = false;
         dismiss.disabled = false;
-        err.textContent = /503|not_live/.test(e.message)
-          ? "Session is not running — restart it to answer."
-          : e.message;
+        err.textContent = answerErrorText(e);
         err.classList.remove("hidden");
       });
     });
@@ -210,7 +206,7 @@ export function createQuestionCards({
       api.sendAnswer(sessionId(), { id: pq.id, selected: [label], ...(freeform ? { freeform } : {}) }).catch((e) => {
         card.querySelectorAll("button, input").forEach((el) => { el.disabled = false; });
         card.classList.remove("submitting");
-        err.textContent = /503|not_live/.test(e.message) ? "Session is not running — restart it to answer." : e.message;
+        err.textContent = answerErrorText(e);
         err.classList.remove("hidden");
       });
     };
@@ -320,14 +316,20 @@ export function createQuestionCards({
     const note = doc.createElement("div");
     note.className = "question-result";
     note.textContent = result;
+    // N1: an approval's verdict goes before its command block, not after it:
+    // with the details expanded the command reads like another tool call.
+    const allowed = approvalAllowed(pending, answer);
+    if (allowed !== null) note.classList.add("verdict");
     if (cancelled) {
       questionEl.classList.add("cancelled");
     } else {
       questionEl.classList.add("answered");
-      if (approvalAllowed(pending, answer) === false) questionEl.classList.add("denied");
+      if (allowed === false) questionEl.classList.add("denied");
       markQuestionSelection(answer && Array.isArray(answer.selected) ? answer.selected : []);
     }
-    questionEl.appendChild(note);
+    const before = allowed !== null ? questionEl.querySelector(".approval-details") : null;
+    if (before) questionEl.insertBefore(note, before);
+    else questionEl.appendChild(note);
     questionEl.classList.remove("submitting");
     disableQuestionInputs();
     questionEl.querySelector(".question-relayed")?.classList.add("hidden");
@@ -335,6 +337,10 @@ export function createQuestionCards({
     // unless the user opened or closed it by hand.
     const summary = questionEl.querySelector("summary");
     if (summary) summary.textContent = summaryText(pending, { answer, cancelled, reason });
+    // 4.02: a reopened card's summary already carries the result (the
+    // snapshot re-renders it resolved), and the body line repeats it. It
+    // stays for a hand-toggled card, whose expanded body the user looks at.
+    if (summary && !questionEl.dataset.toggled) note.classList.add("hidden");
     if (!questionEl.dataset.toggled) questionEl.open = false;
     pending = null;
   }

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

@@ -10,14 +10,23 @@ export function scopeDir(search) {
 
 // The same place in the all view: the page without ?dir, keeping the hash.
 // +fromDir+ (the project view's folder) rides along as ?from=, so the all
-// view can link back to it.
-export function allScopeHref(hash, fromDir = null) {
-  return `/${fromDir ? `?from=${dirParam(fromDir)}` : ""}${hash || ""}`;
+// view can link back to it. +search+ (the page's location.search) keeps
+// its ?view= (VIEW_PARAM) on the new page.
+export function allScopeHref(hash, fromDir = null, search = "") {
+  const params = [fromDir ? `from=${dirParam(fromDir)}` : "", viewParam(search)].filter(Boolean);
+  return `/${params.length ? `?${params.join("&")}` : ""}${hash || ""}`;
 }
 
-// A folder's project view, keeping the hash.
-export function projectScopeHref(dir, hash) {
-  return `/?dir=${dirParam(dir)}${hash || ""}`;
+// A folder's project view, keeping the hash and +search+'s ?view=.
+export function projectScopeHref(dir, hash, search = "") {
+  const view = viewParam(search);
+  return `/?dir=${dirParam(dir)}${view ? `&${view}` : ""}${hash || ""}`;
+}
+
+// "view=<v>" from a location.search string, or "" without one.
+function viewParam(search) {
+  const view = new URLSearchParams(search || "").get("view");
+  return view ? `view=${encodeURIComponent(view)}` : "";
 }
 
 // A folder for the query string, its slashes left readable (as chi web

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

@@ -29,6 +29,10 @@ export function emptySessionState() {
     owner: null,
     // The session's commands (its worker's, plugins' too) for the / list.
     commands: [],
+    // The chi its live worker runs and what it can do (the session card's
+    // worker_version / worker_features): the info bar's stale-worker badge.
+    workerVersion: null,
+    workerFeatures: [],
     timing: normalizeTiming(),
   };
 }

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

@@ -52,6 +52,8 @@ export function normalizeTiming(data = {}) {
     turnRecords: Array.isArray(data.turn_records) ? data.turn_records.filter(validRecord) : [],
     toolRecords: Array.isArray(data.tool_records) ? data.tool_records.filter(validRecord) : [],
     activeTurn: validRecord(data.active_turn) ? data.active_turn : null,
+    // The session's token sums and speeds (SessionMetrics' tokens block).
+    tokens: validRecord(data.tokens) ? data.tokens : null,
   };
 }
 
@@ -61,7 +63,8 @@ export function normalizeTiming(data = {}) {
 // place; an unknown turn goes in started_at order (ties and unparsable
 // dates keep arrival order), an unknown tool record at the end (they come
 // grouped by turn, in call order). startedAt, sessionDurationMs and
-// activeTurn are the reply's. `short`: the reply's turn_count says the page
+// activeTurn are the reply's, and so are its tokens (a reply without them
+// keeps the page's). `short`: the reply's turn_count says the page
 // misses a turn (it then reads the whole timing). A reply without
 // turn_count (an older server: the whole timing) replaces, as before; more
 // records than the count (a worker died before saving a turn the page saw)
@@ -85,7 +88,8 @@ export function mergeTiming(timing, data = {}) {
   fresh.toolRecords.forEach((record) => {
     if (!replaceById(toolRecords, record)) toolRecords.push(record);
   });
-  return { timing: { ...fresh, turnRecords, toolRecords }, short: turnRecords.length < count };
+  const tokens = fresh.tokens || timing?.tokens || null;
+  return { timing: { ...fresh, turnRecords, toolRecords, tokens }, short: turnRecords.length < count };
 }
 
 function replaceById(records, record) {

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

@@ -20,10 +20,69 @@ export function workerGoneText({ turnRunning, stopped = false }) {
   return `\u2715 canceled (${stopped ? "session stopped" : "worker exited"})`;
 }
 
+// How long a turn's answer waits for the after_turn hooks' answer_display
+// before the page stops waiting and pops what it has (4.14).
+export const DISPLAY_WAIT_MS = 20000;
+
+// The wait between a turn_completed with display_pending and its
+// answer_display. The worker can die in between (a crash, a stop, an idle
+// exit) and never send one, so the wait also ends on the caller's finish()
+// (workerGone, a re-render) and by the timeout: it must never hold the
+// turn's answer bubble forever.
+// @return {{promise, finish, settled: () => Boolean}}
+export function displayWait({
+  timeoutMs = DISPLAY_WAIT_MS, setTimeoutImpl = setTimeout, clearTimeoutImpl = clearTimeout,
+} = {}) {
+  let settle = null;
+  let done = false;
+  const promise = new Promise((resolve) => { settle = resolve; });
+  const finish = () => {
+    if (done) return;
+    done = true;
+    clearTimeoutImpl(timer);
+    settle();
+  };
+  const timer = setTimeoutImpl(finish, timeoutMs);
+  return { promise, finish, settled: () => done };
+}
+
 // This tab's id in the events (`origin.client_id`, turn_enqueued's
-// client_id): new per page load, like the TUI's `tui:<pid>`.
-export function newClientId() {
-  return `web:${Math.random().toString(36).slice(2, 10).padEnd(8, "0")}`;
+// client_id): kept in sessionStorage per tab, so a reload mid-turn still
+// recognizes this tab's own prompt (4.03), which a fresh random id every
+// load labelled "web". Falls back to a fresh id when sessionStorage is
+// unavailable (a private window that refuses it) or holds nonsense.
+export const CLIENT_ID_KEY = "chi_client_id";
+export function newClientId(storage = safeSessionStorage()) {
+  const kept = readClientId(storage);
+  if (kept) return kept;
+  const id = `web:${Math.random().toString(36).slice(2, 10).padEnd(8, "0")}`;
+  writeClientId(storage, id);
+  return id;
+}
+
+function safeSessionStorage() {
+  try {
+    return globalThis.sessionStorage || null;
+  } catch (_) {
+    return null;
+  }
+}
+
+function readClientId(storage) {
+  try {
+    const value = storage?.getItem(CLIENT_ID_KEY);
+    return typeof value === "string" && /^web:/.test(value) ? value : null;
+  } catch (_) {
+    return null;
+  }
+}
+
+function writeClientId(storage, id) {
+  try {
+    storage?.setItem(CLIENT_ID_KEY, id);
+  } catch (_) {
+    // Full or refused storage: the id stays for this page only.
+  }
 }
 
 export function isOwn(clientId, myId) {
@@ -175,7 +234,7 @@ const WEB_LOCAL_REPLIES = {
   "/exit": "/exit: close the tab to leave; stop in the session bar stops the worker",
   "/quit": "/quit: close the tab to leave; stop in the session bar stops the worker",
   "/recap": "/recap: not in the web yet; a recap shows here by itself when you come back to an idle session, and /recap in a terminal (chi --attach) makes one now",
-  "/stats": "/stats: not in the web yet; each turn shows its time and the context use, and /stats in a terminal (chi --attach) has the totals",
+  "/stats": "/stats: not in the web yet; each turn shows its time, the session bar the context use and speed (hover ctx for tokens and cost), and /stats in a terminal (chi --attach) has the rest",
 };
 
 export function webLocalReply(text) {
@@ -190,6 +249,17 @@ export function startPageReply(text, { images = 0 } = {}) {
   return images ? null : webLocalReply(text);
 }
 
+// The start page's reply to a first message that needs no session at all
+// (2.29): its own command's reply (startPageReply), or the hint for a
+// command word no command answers (a typo like /modle) — the hint the page
+// shows in a session too, as a command bubble. Decided before the session
+// is created, so a first /stats or /modle leaves none behind. A null here
+// means the message goes to a session (a prompt, or anything with images).
+export function startPageReplyOrHint(text, { commands = [], images = 0 } = {}) {
+  if (images) return null;
+  return startPageReply(text) || unknownCommandHint(text, commands);
+}
+
 // The continue card's answers, as the terminal's continue prompt reads them.
 export function continueLine(choice, reason = "") {
   const why = String(reason || "").trim();
@@ -257,6 +327,40 @@ export function restoreOnAck(enqueuedId, early, { myId, sentIds }) {
   return restoreAction(event, { myId, sentIds, composerEmpty: true });
 }
 
+// The /turn this kept entry was for failed: no ack comes, so nothing would
+// take it back. The whole map goes: this tab sends one turn at a time, so
+// every entry waits for an ack that is now never coming (an older one is
+// left over from a send that failed the same way).
+export function dropEarlyRestores(early) {
+  const count = early.size;
+  early.clear();
+  return count;
+}
+
+// The composer's text with a restored prompt put back into it: the restored
+// text alone when nothing is typed, else the typed text with the restored
+// prompt under it (the user typed between the restore and the ack; their
+// text must not be replaced).
+export function restoreInto(refill, current) {
+  const restored = String(refill ?? "");
+  const typed = String(current ?? "");
+  if (!restored) return typed;
+  if (!typed.trim()) return restored;
+  return `${typed.replace(/\n+$/, "")}\n${restored}`;
+}
+
+// What the composer holds once a /turn ack lands (4.13): the composer still
+// carries the text that was just sent, so that text goes (it is the history's
+// now) — but text typed since the send stays, and a prompt restored before
+// this ack (restoreOnAck's refill) is put back without replacing it.
+// @param sent the composer's text when the turn was sent
+// @param current the composer's text as the ack lands
+// @param refill the prompt an early restore handed back, if any
+export function composerAfterAck({ sent = "", current = "", refill = "" } = {}) {
+  const kept = String(current ?? "") === String(sent ?? "") ? "" : current;
+  return restoreInto(refill, kept);
+}
+
 // What an event does to the prompt bubbles, as a list of ops for app.js:
 //   add   — a bubble for a prompt this tab hasn't shown (state queued /
 //           started / steered, labelled by its sender)