samagotchi 0.2.0 → 0.4.0

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

@@ -66,9 +66,11 @@ export function splitSnapshotCards(cards) {
 // goes in its reloaded turn's block: the step of its iteration (the
 // iteration-th .gen, 0-based index here) and the key of the tool row it
 // came before (it came after +calls+ of that step's calls started), or null
-// without an iteration (the notice then goes before the turn's answer).
+// for a notice not of a turn. One from before the first generation (a
+// before_turn hook's) has no iteration: the first step, as live.
 export function turnNoticePlace(notice) {
-  const iteration = Number(notice?.iteration);
-  if (!notice?.in_turn || !Number.isInteger(iteration) || iteration < 1) return null;
+  if (!notice?.in_turn) return null;
+  const iteration = notice.iteration == null ? 1 : Number(notice.iteration);
+  if (!Number.isInteger(iteration) || iteration < 1) return null;
   return { step: iteration - 1, rowKey: `${iteration}:${(Number(notice.calls) || 0) + 1}` };
 }

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

@@ -10,21 +10,26 @@
 // sessionId() (image thumbs of a tool row).
 import { newActivity, addStarted, addCompleted, finalizeActivity, activityCount, toolName } from "./activity.js";
 import { copySourceAttr } from "./copy.js";
-import { escapeHtml, leadTrimmed, messageBodyHtml, noteHtml, normalize } from "./format.js";
+import { escapeHtml, leadTrimmed, messageBodyHtml, noteHtml, normalize, steerRowHtml } from "./format.js";
+import { activityDiffHtml } from "./diff_view.js";
 import { thumbsHtml } from "./images.js";
 import { shouldFollowScroll } from "./scroll.js";
 import { tallyText } from "./tally.js";
 import { cancelLineHtml, formatDuration, timedTurnIndexes, turnRecordAt, turnTimingText } from "./timing.js";
 
+// A row's status (live, or a saved tool record's on reload): running,
+// error, stopped (a task_wait the user's Stop ended), else ok ("done").
 export function activityStatusClass(status) {
   if (status === "running") return "running";
   if (status === "error") return "error";
+  if (status === "stopped") return "stopped";
   return "ok";
 }
 
 export function activityStatusLabel(status) {
   if (status === "running") return "running";
   if (status === "error") return "error";
+  if (status === "stopped") return "stopped";
   return "done";
 }
 
@@ -281,6 +286,10 @@ export function createChatView({ historyEl, appendToHistory, isNearBottom, sawTe
     notice() {
       return false;
     },
+    // So is a plugin's steer.
+    steer() {
+      return false;
+    },
     // So is a card.
     card() {
       return false;
@@ -312,6 +321,7 @@ export function chatHistoryHtml(items, timing, { thumbs }) {
   return items
     .map((m, i) => {
       if (m.role === "note") return `<div class="bubble note">${noteHtml(m)}</div>`;
+      if (m.role === "steer") return steerRowHtml({ source: m.source, text: m.content }, { bubble: true });
       const turnIndex = timedTurns[i];
       const cls = m.role === "user" ? "user" : "output";
       const { body, renderedMarkdown } = messageBodyHtml(m);
@@ -357,4 +367,6 @@ export function fillActivityRow(el, row, sessionId) {
   // The images a tool returned (the chat view's reloaded history has no tool
   // rows; the turn view's has, turn_view.js reloadRowHtml).
   if (row.images?.length && !el.querySelector(".thumbs")) el.insertAdjacentHTML("beforeend", thumbsHtml(sessionId, row.images));
+  // An edit/write's change, collapsed: "diff +3 −1".
+  if (row.diff && !el.querySelector(".activity-diff")) el.insertAdjacentHTML("beforeend", activityDiffHtml(row.diff));
 }

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

@@ -1,8 +1,8 @@
 // Copy buttons: one on every prompt and answer bubble, one on every code
 // block of a rendered answer. An answer copies its markdown source (the
-// saved message's `content`, kept on the bubble as data-copy-source when the
-// page shows rendered html), a prompt the text as typed, a code block just
-// its code.
+// saved message's `display` when a hook presented one, else its `content`,
+// kept on the bubble as data-copy-source when the page shows rendered
+// html), a prompt the text as typed, a code block just its code.
 //
 // The buttons carry no text (an icon; "copied ✓" is CSS content), so a
 // bubble's textContent, the turn output dedupe and an annotation's selected
@@ -57,12 +57,28 @@ export function codeText(pre) {
   return visibleText(code, ".copy-btn").replace(/\n$/, "");
 }
 
+// What an answer copies: what a hook presented in its place (`display`,
+// AnswerDisplay), else its markdown source.
+export function copySource(message) {
+  return String(message?.display ?? message?.content ?? "");
+}
+
+// Whether +bubble+ shows the answer +message+ (the page's re-read at the
+// end of a turn): its streamed text is the answer's, or it was rendered
+// from it already (its kept source is the answer or its display: an
+// answer_display re-read after the turn_completed one).
+export function showsAnswer(bubble, message, normalize) {
+  const source = bubble.getAttribute?.(COPY_SOURCE_ATTR);
+  if (source !== null && source !== undefined && (source === message.content || source === message.display)) return true;
+  return normalize(bubble.textContent) === normalize(message.content);
+}
+
 // The attribute that keeps a message's source on its reloaded bubble:
 // rendered html and a prompt (its `>` lines render as quotes) need it; a
 // plain answer's text is its source.
 export function copySourceAttr(message, renderedMarkdown) {
   if (!renderedMarkdown && message?.role !== "user") return "";
-  const text = String(message?.content ?? "")
+  const text = copySource(message)
     .replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   return ` ${COPY_SOURCE_ATTR}="${text}"`;
 }

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

@@ -33,3 +33,18 @@ export function extractCtxPct(data, windowTokens = null) {
   if (!window || window <= 0 || used === null) return null;
   return (used / window) * 100;
 }
+
+// The saved context (the session's timing.context: used_tokens after the
+// last counted turn, the window now): the meter's value on load, before a
+// turn streams. null when either count is missing.
+export function savedCtxPct(context) {
+  const used = num(context?.used_tokens);
+  const window = num(context?.window_tokens);
+  if (used === null || !window || window <= 0) return null;
+  return (used / window) * 100;
+}
+
+// A session card's quiet ctx: "12%", or "" when the list row has none.
+export function cardCtxText(pct) {
+  return num(pct) === null ? "" : `${Math.round(pct)}%`;
+}

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

@@ -4,6 +4,7 @@ const DEFAULT_EVENT_TYPES = Object.freeze([
   "generation_completed",
   "turn_started",
   "turn_completed",
+  "answer_display",
   "turn_canceled",
   "turn_failed",
   "turn_enqueued",
@@ -27,6 +28,9 @@ const DEFAULT_EVENT_TYPES = Object.freeze([
   "context_added",
   "guardrail_warning",
   "hook_notice",
+  "empty_answer_retry",
+  "generation_retrying",
+  "plugin_init_wait",
   "card",
   "plugin_init_started",
   "plugin_init_finished",
@@ -65,10 +69,11 @@ export function createSession(prompt, { dir, model, ...opts } = {}) {
   return api("/api/sessions", { method: "POST", body: JSON.stringify(body), ...opts });
 }
 
-// A session with no first turn: a first message with images is sent into
-// it once they are uploaded.
-export function createIdleSession({ dir, model, ...opts } = {}) {
-  const body = { idle: true, ...(dir ? { dir } : {}), ...(model ? { model } : {}) };
+// 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.
+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 });
 }
 
@@ -111,10 +116,11 @@ export function sendTurn(id, prompt, { clientId, images, ...opts } = {}) {
 
 // A session command (/model, /models, !rollback, !cmd, /continue …) for the
 // worker to run; its command_ran reaches every client.
-export function sendCommand(id, line, { clientId, ...opts } = {}) {
+// card: the line is a card's action (its echo stays out of the history).
+export function sendCommand(id, line, { clientId, card = false, ...opts } = {}) {
   return api(`/api/sessions/${id}/command`, {
     method: "POST",
-    body: JSON.stringify(clientId ? { line, client_id: clientId } : { line }),
+    body: JSON.stringify({ line, ...(clientId ? { client_id: clientId } : {}), ...(card ? { card: true } : {}) }),
     ...opts,
   });
 }
@@ -148,6 +154,17 @@ export function stopSession(id, opts = {}) {
   return api(`/api/sessions/${id}/stop`, { 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 = {}) {
+  return api(`/api/sessions/${encodeURIComponent(id)}/archive`, { method: "POST", body: JSON.stringify({}), ...opts });
+}
+
+// Back to the lists, delegates too.
+export function unarchiveSession(id, opts = {}) {
+  return api(`/api/sessions/${encodeURIComponent(id)}/unarchive`, { method: "POST", body: JSON.stringify({}), ...opts });
+}
+
 // Deletes the session for good; the server stops a live worker first.
 export function deleteSession(id, opts = {}) {
   return api(`/api/sessions/${encodeURIComponent(id)}`, { method: "DELETE", ...opts });

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

@@ -0,0 +1,58 @@
+// What chi's edit/write tools change, as HTML, apart from the DOM. One
+// renderer for both places: the approval card (the dry run, which can also
+// say the edit would fail, or that the file isn't shown) and a tool row's
+// collapsed "diff +3 −1" (what the call really changed). A diff is the
+// server's {text, added, removed, truncated, new_file} (EditPreview).
+
+import { escapeHtml } from "./format.js";
+
+// More lines than this fold behind a "show all N lines" toggle.
+export const DIFF_FOLD_LINES = 20;
+
+const MINUS = "−";
+
+// "+3 −1"
+export function diffCounts(diff) {
+  return `+${Number(diff?.added) || 0} ${MINUS}${Number(diff?.removed) || 0}`;
+}
+
+// A row's summary line: "diff +3 −1", "new file +12".
+export function diffSummary(diff) {
+  return diff?.new_file ? `new file +${Number(diff.added) || 0}` : `diff ${diffCounts(diff)}`;
+}
+
+export function diffLineClass(line) {
+  if (line.startsWith("@@")) return "hunk";
+  if (line.startsWith("+")) return "add";
+  if (line.startsWith("-")) return "del";
+  if (line.startsWith("\\") || line.startsWith("… ")) return "meta";
+  return "ctx";
+}
+
+function linesHtml(lines) {
+  return lines.map((line) => `<span class="diff-line diff-${diffLineClass(line)}">${escapeHtml(line) || " "}</span>`).join("");
+}
+
+// @param diff an EditPreview: a diff, or {error} / {skipped}
+// @return {string} HTML; "" for none
+export function diffHtml(diff, { fold = DIFF_FOLD_LINES } = {}) {
+  if (!diff || typeof diff !== "object") return "";
+  if (diff.error) return `<div class="diff-note warn">this edit would fail: ${escapeHtml(diff.error)}</div>`;
+  if (diff.skipped) return `<div class="diff-note">diff not shown: ${escapeHtml(diff.skipped)}</div>`;
+  const text = String(diff.text ?? "");
+  if (!text) return `<div class="diff-note">no change</div>`;
+  const lines = text.split("\n");
+  const head = diff.new_file ? `<div class="diff-note">new file</div>` : "";
+  const shown = `<pre class="diff"><code>${linesHtml(lines.slice(0, fold))}</code></pre>`;
+  if (lines.length <= fold) return head + shown;
+  // The rest opens under the first lines; the toggle hides once open (CSS).
+  const rest = `<details class="diff-more"><summary>show all ${lines.length} lines</summary>` +
+    `<pre class="diff"><code>${linesHtml(lines.slice(fold))}</code></pre></details>`;
+  return head + shown + rest;
+}
+
+// A tool row's collapsed diff (closed by default).
+export function activityDiffHtml(diff) {
+  if (!diff || typeof diff !== "object" || diff.error || diff.skipped) return "";
+  return `<details class="activity-diff"><summary>${escapeHtml(diffSummary(diff))}</summary>${diffHtml(diff)}</details>`;
+}

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

@@ -23,6 +23,15 @@ export function noteHtml(note) {
   return `<div class="note-line">${escapeHtml(from)}</div><div class="note-text">${escapeHtml(note?.content ?? "")}</div>`;
 }
 
+// A plugin's steer (a nudge put into the running turn): one line that
+// names who nudged the model, its text collapsed under it. +bubble+: on its
+// own between bubbles (the chat view), not a row of a step.
+export function steerRowHtml({ source, text } = {}, { bubble = false } = {}) {
+  const who = source ? `${source} nudged the model` : "nudged the model";
+  return `<details class="${bubble ? "bubble " : ""}steer-row"><summary>${escapeHtml(who)}</summary>` +
+    `<div class="steer-text">${escapeHtml(text ?? "")}</div></details>`;
+}
+
 // A user message's body: runs of `>` lines become <blockquote>s, the rest
 // stays escaped text. The bubble is pre-wrap, so the blank lines around a
 // quote are dropped (the blockquote's margin spaces it instead).

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

@@ -6,7 +6,8 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <style>
 :root{--bg:#0b0d11;--bg-panel:#151821;--bg-inset:#0f1115;--bg-raised:#22262f;--bg-hover:#1b1f27;--border:#1f232b;--border-strong:#2d333f;--text:#e6e8eb;--text-bright:#f0f3f6;--text-2:#c9d1d9;--text-3:#9aa4b2;--text-muted:#8b949e;--text-faint:#6e7681;--accent:#7aa5ff;--accent-strong:#1f6feb;--accent-bg:#1b2336;--accent-ring:rgba(122,165,255,.18);--primary:#2a68d1;--ok:#3fb950;--ok-text:#7ee787;--ok-bg:#1a2e1a;--warn:#d29922;--warn-text:#e3b341;--warn-bright:#f2cc60;--warn-bg:#2b2108;--warn-border:#6b5416;--danger:#f85149;--danger-bg:#da3633;--danger-text:#ff7b72;--danger-bg-dim:#3d1f1f;--think:#8957e5;--think-text:#d2a8ff;--accent-border:#223150;--accent-tint:color-mix(in srgb,var(--accent) 7%,transparent);
-  --glass-bg:color-mix(in srgb,var(--bg-panel) 70%,transparent);--glass-border:rgba(255,255,255,.08);--glass-highlight:rgba(255,255,255,.05);--glass-shadow:0 8px 30px rgba(0,0,0,.35)}
+  --glass-bg:color-mix(in srgb,var(--bg-panel) 70%,transparent);--glass-border:rgba(255,255,255,.08);--glass-highlight:rgba(255,255,255,.05);--glass-shadow:0 8px 30px rgba(0,0,0,.35);
+  --diff-add-bg:rgba(63,185,80,.14);--diff-add-text:#aff5b4;--diff-del-bg:rgba(248,81,73,.14);--diff-del-text:#ffc1bc}
 *{box-sizing:border-box;margin:0;padding:0}
 body{font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1100px 700px at 8% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%),radial-gradient(900px 700px at 100% 100%,color-mix(in srgb,var(--think) 9%,transparent),transparent 70%),var(--bg);background-attachment:fixed;color:var(--text);height:100vh;display:flex;flex-direction:column}
 /* Glass: the composer card, the strip cards, the all-sessions cards and the question cards (by selector, so app.js is untouched). */
@@ -115,6 +116,7 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .activity-status.running{color:var(--warn)}
 .activity-status.ok{color:var(--ok)}
 .activity-status.error{color:var(--danger)}
+.activity-status.stopped{color:var(--warn-text);opacity:.8}
 .activity-tool{color:var(--accent);font-weight:600}
 .activity-params{color:var(--text-muted);word-break:break-all}
 .activity-duration{color:var(--text-faint);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
@@ -129,9 +131,15 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .activity-status,.activity-tool{flex-shrink:0;white-space:nowrap}
 .activity-params{min-width:0}
 .activity-output{flex:1 1 100%;min-width:0}
+/* An edit/write's change: a closed "diff +3 −1" under the output, lined up with it. */
+.activity-diff{flex:1 1 100%;min-width:0;margin:2px 0 2px 60px}
+.activity-diff>summary{cursor:pointer;font-size:12px;color:var(--text-muted);width:max-content;font-variant-numeric:tabular-nums}
+.activity-diff>summary:hover{color:var(--text-2)}
+.activity-diff[open]>summary{margin-bottom:4px}
 @media(max-width:600px){
   .activity-params{flex:1 1 0}
   .activity-output{margin-left:0}
+  .activity-diff{margin-left:0}
 }
 .bubble.thinking{border-left:3px solid var(--think);background:color-mix(in srgb,var(--think) 6%,var(--bg-panel));padding:8px 12px}
 .bubble.thinking:not([open]),.bubble.activity:not([open]){padding:3px 10px;background:transparent;border-color:transparent;align-self:flex-start;border-radius:6px;transition:background .12s ease}
@@ -252,12 +260,34 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .approval-where,.approval-why{font-size:12px;color:var(--text-muted);word-break:break-all}
 .approval-why{color:var(--warn-text)}
 .approval-label{color:var(--text-faint)}
+/* A diff (diff_view.js): the approval card's dry run and a tool row's change. */
+.approval-diff{margin:0 0 6px}
+.diff{margin:0;padding:4px 0;background:var(--bg-inset);border:1px solid var(--border);border-radius:6px;font-size:12px;line-height:1.45;overflow:auto;max-height:420px}
+.diff code{display:block;min-width:max-content}
+.diff-line{display:block;padding:0 10px;white-space:pre;color:var(--text-2)}
+.diff-add{background:var(--diff-add-bg);color:var(--diff-add-text)}
+.diff-del{background:var(--diff-del-bg);color:var(--diff-del-text)}
+.diff-hunk{color:var(--text-faint)}
+.diff-meta{color:var(--text-faint);font-style:italic}
+.diff-note{font-size:12px;color:var(--text-muted);margin:0 0 4px}
+.diff-note.warn{color:var(--warn-text)}
+.diff-more{margin-top:4px}
+.diff-more>summary{cursor:pointer;font-size:12px;color:var(--accent);width:max-content}
+.diff-more[open]>summary{display:none}
 .bubble.guardrail-warning{border-left:3px solid var(--danger);background:color-mix(in srgb,var(--danger) 8%,var(--bg-panel));color:var(--danger-text);font-size:13px;padding:8px 12px;white-space:pre-wrap}
 .bubble.hook-notice{border-left:3px solid var(--text-faint);background:var(--bg-panel);color:var(--text-3);font-size:13px;padding:8px 12px;white-space:pre-wrap}
 .bubble.hook-notice.warn{border-left-color:var(--warn);color:var(--warn-text)}
 .gen .hook-notice{font-size:13px;color:var(--text-3);padding:5px 2px 5px 8px;border-top:1px solid var(--border);border-left:2px solid var(--text-faint);white-space:pre-wrap;word-break:break-word}
 .gen .activity-body>.hook-notice:first-child{border-top:none}
 .gen .hook-notice.warn{border-left-color:var(--warn);color:var(--warn-text)}
+/* A plugin's steer (a nudge into the running turn): a row of its step, or a bubble; its text collapsed. */
+.steer-row{font-size:13px;color:var(--text-3);border-left:2px solid var(--accent-border)}
+.steer-row>summary{cursor:pointer;list-style:none;font-style:italic}
+.steer-row>summary::-webkit-details-marker{display:none}
+.steer-row>summary::before{content:"↪ ";font-style:normal;color:var(--accent)}
+.steer-text{white-space:pre-wrap;word-break:break-word;color:var(--text-muted);margin-top:4px}
+.gen>.steer-row{padding:4px 2px 4px 8px;margin:2px 0 6px}
+.bubble.steer-row{background:transparent;padding:6px 12px;border-left-width:3px}
 /* A plugin's card (card.js): the question card's glass with a cool tint; its actions are commands the session runs. */
 .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))}
@@ -278,8 +308,11 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 /* In a step: a row, lighter (no float), like the step's notices. */
 .gen .bubble.plugin-card{margin:6px 0 4px;box-shadow:inset 0 1px 0 var(--glass-highlight);padding:8px 10px}
 .hint{color:var(--text-muted);font-size:13px;padding:12px}
-#annotateBtn{position:fixed;z-index:20;font-size:12px;padding:4px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
-#annotateBtn[hidden]{display:none}
+/* The selection bubble (app.js Annotate): Annotate + the presets (web.annotate_presets), small pills with a gap (they wrap on a narrow page). */
+#annotateBar{position:fixed;z-index:20;display:flex;flex-wrap:wrap;gap:4px;max-width:calc(100vw - 16px)}
+#annotateBar[hidden]{display:none}
+#annotateBar button{font-size:12px;padding:4px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
+#annotateBar .annotate-preset{background:var(--bg-raised);color:var(--text-2);border:1px solid var(--border-strong);padding:3px 10px;max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 /* Copy buttons (copy.js): top-right in an answer and a code block, left of a prompt (its right edge is the page's); shown on hover or focus, always (dim) on touch. They hold no text: "copied ✓" is CSS content. */
 .bubble.output,.bubble.user{position:relative}
 .copy-btn{position:absolute;top:6px;right:6px;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:24px;min-width:24px;padding:0 5px;border-radius:6px;background:var(--bg-raised);border:1px solid var(--border-strong);color:var(--text-muted);font-size:11px;line-height:1;white-space:nowrap;user-select:none;-webkit-user-select:none;opacity:0;transition:opacity .12s ease,color .12s ease}
@@ -376,6 +409,8 @@ body.has-session #history{padding-bottom:calc(var(--dock-h,160px) + 32px)}
 #infoBar button{padding:4px 12px;border-radius:8px;font-size:12px;font-weight:600}
 #infoBar #infoStopBtn{background:var(--bg-raised);color:var(--warn-text);border:1px solid var(--border-strong)}
 #infoBar #infoStopBtn:hover{background:var(--warn-bg);border-color:var(--warn-border)}
+#infoBar #infoArchiveBtn{background:transparent;color:var(--text-muted);border:1px solid var(--border-strong)}
+#infoBar #infoArchiveBtn:hover{color:var(--text);background:var(--bg-hover)}
 #infoBar #infoDeleteBtn{background:transparent;color:var(--text-muted);border:1px solid transparent}
 #infoBar #infoDeleteBtn:hover{color:#fff;background:var(--danger-bg);border-color:var(--danger-bg)}
 /* Phones: the footer is one line; its meta scrolls sideways (all of it stays reachable) and the first-message line, the strip card's title, goes. */
@@ -437,6 +472,16 @@ body.has-session #scope .scope-where{display:none}
 }
 /* The ▾ glyph draws tiny at the pill's 11 px: at 20 px it is about as tall
    as the pill text's capitals (phone and desktop alike). */
+/* The bell (notifications): quiet at the top bar's right end; filled in the accent when on, struck through when the browser blocks it. */
+#notifyBtn{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;min-height:0;background:transparent;border:1px solid transparent;border-radius:999px;color:var(--text-muted)}
+#notifyBtn[hidden]{display:none}
+#notifyBtn:hover{color:var(--text-2);border-color:var(--border)}
+#notifyBtn svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
+#notifyBtn .slash{display:none}
+#notifyBtn[data-state="on"]{color:var(--accent)}
+#notifyBtn[data-state="on"] .bell{fill:currentColor;fill-opacity:.22}
+#notifyBtn[data-state="denied"]{color:var(--text-faint)}
+#notifyBtn[data-state="denied"] .slash{display:inline}
 #stripShow .pill-arrow{font-size:20px;line-height:0;vertical-align:-3px}
 .card .folder{font-family:ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--text-3)}
 .card .parent{font-family:ui-monospace,monospace;white-space:nowrap;color:var(--text-3)}
@@ -465,6 +510,13 @@ body.all-view #center, body.all-view #topStrip{display:none}
 #allPath[hidden]{display:none}
 #allPath code{font-family:ui-monospace,monospace;background:var(--bg-hover);padding:1px 4px;border-radius:4px}
 #allHead .count{font-size:11px;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
+#allHead .include-archived{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-muted);white-space:nowrap;cursor:pointer;user-select: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[hidden]{display:none}
+#toast .toast-action{background:transparent;border:0;color:var(--accent);font-weight:600;cursor:pointer;padding:2px 4px}
 #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}
@@ -484,6 +536,7 @@ body.all-view #center, body.all-view #topStrip{display:none}
 .card.active{background:var(--accent-bg);border-color:var(--accent-border)}
 .card .preview{font-size:14px;line-height:1.4;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .card .time{font-variant-numeric:tabular-nums;white-space:nowrap}
+.card .ctx{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-3)}
 #topStrip .card .preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #allList .card .preview{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;word-break:break-word;line-height:1.4}
 .card .recap{font-size:12px;line-height:1.4;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:-2px 0 2px}
@@ -517,6 +570,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" 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>
   <section id="center">
@@ -548,6 +602,7 @@ a{color:var(--accent)}
       </div>
       <div id="infoBar">
         <div class="info" id="infoText"></div>
+        <button class="ghost" id="infoArchiveBtn" title="Archive: hide from the lists, keep for good" style="display:none">archive</button>
         <button class="ghost" id="infoStopBtn" title="Stop session (terminate worker)" style="display:none">stop</button>
         <button class="ghost" id="infoDeleteBtn" title="Delete session (for good)" style="display:none">delete</button>
       </div>
@@ -557,12 +612,14 @@ a{color:var(--accent)}
     <div id="allHead">
       <button class="ghost" id="allBack" title="Back to the chat (Esc)">← Back</button>
       <input id="filter" type="search" placeholder="Search… (preview / id / status)" autocomplete="off">
+      <label class="include-archived" title="Show archived sessions too"><input id="includeArchived" type="checkbox"> include archived</label>
       <span class="count" id="count"></span>
     </div>
     <div id="allPath" hidden>Stored in <code></code></div>
     <div id="allList"></div>
   </section>
 </main>
+<div id="toast" role="status" aria-live="polite" hidden></div>
 <script type="module" src="/assets/app.js"></script>
 </body>
 </html>

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

@@ -0,0 +1,175 @@
+// When a session needs the user: a pure reducer over the hub's session
+// summaries (GET /api/events). The page shows an OS notification and a
+// title badge for what it returns, while the tab is not in front.
+
+// A finished turn shorter than this was watched: no "done".
+export const DONE_MIN_SECONDS = 10;
+
+// 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)
+// @param next the new summary
+// @return null | {reason: "question"|"approval"|"card"|"failed"|"done", sessionId, key}
+//   key names this one event, the same in every tab (the Notification tag)
+export function attentionFor(prev, next) {
+  if (!next || !next.id) return null;
+  const q = next.pending_question;
+  if (q && q.id && q.id !== prev?.pending_question?.id) {
+    return { reason: q.kind === "approval" ? "approval" : "question", sessionId: next.id, key: `${next.id}:${q.id}` };
+  }
+  // A running turn's card with actions (check-in's Nudge / Keep going /
+  // Stop) asks the user as a question does.
+  const card = next.pending_card;
+  if (card && card.id && card.id !== prev?.pending_card?.id) {
+    return { reason: "card", sessionId: next.id, key: cardKey(next.id, card.id) };
+  }
+  const turn = next.last_turn;
+  if (!turn || !turn.ended_at || turn.ended_at === prev?.last_turn?.ended_at) return null;
+  // A delegated child's turn is reported by its parent's.
+  if (next.parent_id) return null;
+  const key = `${next.id}:${turn.ended_at}`;
+  if (turn.outcome === "failed") return { reason: "failed", sessionId: next.id, key };
+  if (turn.outcome === "completed" && Number(turn.seconds) >= DONE_MIN_SECONDS) {
+    return { reason: "done", sessionId: next.id, key };
+  }
+  return null;
+}
+
+// The tracker's state: the last summary of each session, and whether the
+// first snapshot has been seen (it seeds, so old state never notifies).
+export function initialAttentionState() {
+  return { seeded: false, byId: {} };
+}
+
+const cardKey = (sessionId, cardId) => `${sessionId}:card:${cardId}`;
+
+// The keys of what the session no longer has open: its question (answered
+// here or in another client), its card with actions (resolved, or the turn
+// ended), or both when the session is gone.
+// @param prev the summary held before (null for a session not seen yet)
+// @param next the new summary (null when the session is gone)
+// @return [String] keys, maybe none
+export function closedKeys(prev, next) {
+  const keys = [];
+  const q = prev?.pending_question;
+  if (q && q.id && next?.pending_question?.id !== q.id) keys.push(`${prev.id}:${q.id}`);
+  const card = prev?.pending_card;
+  if (card && card.id && next?.pending_card?.id !== card.id) keys.push(cardKey(prev.id, card.id));
+  return keys;
+}
+
+// @param state initialAttentionState() or a previous result's state
+// @param type "snapshot" | "session" | "session_gone"
+// @param data the frame's data
+// @return {state, attentions, closed}; state is a new object, attentions a
+//   list, closed the keys of questions and cards no longer open (the badge
+//   drops them)
+export function trackAttention(state, type, data = {}) {
+  const byId = { ...state.byId };
+  const attentions = [];
+  const closed = [];
+  const close = (prev, next) => closed.push(...closedKeys(prev, next));
+  const see = (s) => {
+    if (!s || !s.id) return;
+    const prev = byId[s.id] || null;
+    if (state.seeded) {
+      const a = attentionFor(prev, s);
+      if (a) attentions.push(a);
+    }
+    close(prev, s);
+    byId[s.id] = s;
+  };
+  if (type === "snapshot") {
+    (Array.isArray(data.sessions) ? data.sessions : []).forEach(see);
+    return { state: { seeded: true, byId }, attentions, closed };
+  }
+  if (type === "session") see(data.session);
+  else if (type === "session_gone") {
+    close(byId[data.id] || null, null);
+    delete byId[data.id];
+  }
+  return { state: { seeded: state.seeded, byId }, attentions, closed };
+}
+
+// The notification's words: a short title (the session) and the reason.
+// No question or answer text (it would show on a lock screen).
+export function attentionText(session, attention) {
+  const name = String(session?.title || session?.first_preview || session?.last_prompt || "chi session").trim();
+  const title = name.length > 60 ? `${name.slice(0, 60)}…` : name;
+  const seconds = Math.round(Number(session?.last_turn?.seconds) || 0);
+  const body = {
+    question: "needs an answer",
+    approval: "needs approval",
+    card: "needs you",
+    failed: "turn failed",
+    done: `done in ${seconds} s`
+  }[attention.reason] || "";
+  return { title, body };
+}
+
+// ── Several tabs ──────────────────────────────────────────────────────────
+// Every chi tab gets the same hub frames. A tab in front tells the others
+// (BroadcastChannel "chi-notify") which attention keys it has in front, and
+// a tab behind neither notifies nor badges those: it holds a new attention
+// for +holdMs+ in case the front tab's word is on its way, and drops a key
+// from its badge when the word comes later. Without BroadcastChannel every
+// tab goes on alone, at once.
+export const NOTIFY_CHANNEL = "chi-notify";
+export const NOTIFY_HOLD_MS = 300;
+// How long a key seen in front is remembered (its frame may come late).
+const SEEN_TTL_MS = 10 * 60 * 1000;
+
+// @param channel a BroadcastChannel (postMessage, onmessage), or null
+// @param onSeen(keys) another tab has these keys in front (drop them from
+//   the badge)
+// @return {seenInFront(keys), offer(attention, deliver), drop(keys)}
+export function createNotifyGate({ channel = null, holdMs = NOTIFY_HOLD_MS, onSeen = () => {},
+  schedule = setTimeout, cancel = clearTimeout, now = Date.now } = {}) {
+  const seen = new Map(); // key → when
+  const pending = new Map(); // key → timer
+  const mark = (keys) => {
+    const at = now();
+    for (const [key, when] of seen) if (at - when > SEEN_TTL_MS) seen.delete(key);
+    for (const key of keys) seen.set(key, at);
+  };
+  const drop = (keys) => {
+    for (const key of keys) {
+      if (!pending.has(key)) continue;
+      cancel(pending.get(key));
+      pending.delete(key);
+    }
+  };
+  if (channel) {
+    channel.onmessage = (e) => {
+      const keys = e?.data?.type === "seen" && Array.isArray(e.data.keys) ? e.data.keys.map(String) : [];
+      if (keys.length === 0) return;
+      mark(keys);
+      drop(keys);
+      onSeen(keys);
+    };
+  }
+  return {
+    // This tab is in front with +keys+.
+    seenInFront(keys) {
+      if (!channel || keys.length === 0) return;
+      try { channel.postMessage({ type: "seen", keys }); } catch (_) {}
+    },
+    // A new attention in a tab behind: +deliver+ (notify, badge) unless
+    // another tab has it in front. @return whether it may still be delivered
+    offer(attention, deliver) {
+      const key = attention.key;
+      if (seen.has(key)) return false;
+      if (!channel) {
+        deliver();
+        return true;
+      }
+      drop([key]);
+      pending.set(key, schedule(() => {
+        pending.delete(key);
+        if (!seen.has(key)) deliver();
+      }, holdMs));
+      return true;
+    },
+    // Closed before its hold was up (a question answered at once).
+    drop,
+  };
+}

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

@@ -8,7 +8,8 @@ export function isApproval(pq) {
   return !!pq && pq.kind === "approval";
 }
 
-// @return {null | {tool, what, isCommand, where, why}}
+// @return {null | {tool, what, isCommand, where, why, preview?}}; preview is
+// an edit/write's dry-run diff (diff_view.js draws it)
 export function approvalView(pq) {
   if (!isApproval(pq)) return null;
   const a = pq.approval || {};
@@ -26,10 +27,12 @@ export function approvalView(pq) {
   return {
     // A plugin tool's label ("chrome: screenshot"), as its row shows it.
     tool: a.label || a.tool || "",
-    what: command || paths.join("\n"),
+    // A tool without a command or path (an MCP tool): its compact args.
+    what: command || paths.join("\n") || a.args || "",
     isCommand: !!command,
     where,
     why: `${reason} (${who})`,
+    ...(a.preview && typeof a.preview === "object" ? { preview: a.preview } : {}),
   };
 }