samagotchi 0.2.0 → 0.3.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,25 @@
 // 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 { 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 +285,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 +320,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);

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,7 @@ const DEFAULT_EVENT_TYPES = Object.freeze([
   "context_added",
   "guardrail_warning",
   "hook_notice",
+  "empty_answer_retry",
   "card",
   "plugin_init_started",
   "plugin_init_finished",
@@ -65,10 +67,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 +114,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 +152,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/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

@@ -115,6 +115,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}
@@ -258,6 +259,14 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .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 +287,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 +388,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 +451,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 +489,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 +515,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 +549,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 +581,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 +591,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

@@ -26,7 +26,8 @@ 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})`,

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

@@ -28,6 +28,13 @@ export function applySessionEvent(list, type, data = {}) {
   return list;
 }
 
+// The sessions a list shows: archived ones only when asked (the all view's
+// "include archived"). The page keeps them in its list either way: a parent
+// chip and the open session still need them.
+export function listedSessions(list, includeArchived = false) {
+  return includeArchived ? list : list.filter((s) => !s.archived);
+}
+
 const updatedMs = (s) => {
   const ms = Date.parse(s.updated_at || "");
   return Number.isNaN(ms) ? 0 : ms;

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

@@ -92,9 +92,12 @@ export function turnGroups(items, timing) {
   items.forEach((item, i) => {
     if (item?.role === "note") {
       groups.push({ kind: "note", i });
+    } else if (item?.role === "steer") {
+      if (turn) turn.steers.push(i);
+      else groups.push({ kind: "steer", i });
     } else if (item?.role === "user") {
       turnIndex += 1;
-      turn = { kind: "turn", turnIndex, user: i, texts: [] };
+      turn = { kind: "turn", turnIndex, user: i, texts: [], steers: [] };
       groups.push(turn);
     } else if (item?.role === "assistant") {
       if (turn) turn.texts.push(i);
@@ -103,22 +106,44 @@ export function turnGroups(items, timing) {
   });
   return groups.map((g) => {
     if (g.kind !== "turn") return g;
-    const record = turnRecordAt(timing, g.turnIndex);
-    const tools = record ? (timing?.toolRecords || []).filter((r) => r.turn_id === record.id) : [];
-    const stepsOnly = canceledSteps(g, record, tools);
-    if (g.texts.some((i) => items[i].parts)) return partsTurn(g, items, record, tools, stepsOnly);
-    const maxIteration = tools.reduce((m, r) => Math.max(m, Number(r.iteration) || 0), 0);
-    const stepTexts = stepsOnly ? g.texts : g.texts.slice(0, -1);
-    const steps = [];
-    for (let k = 0; k < Math.max(stepTexts.length, maxIteration); k += 1) {
-      const iteration = k + 1;
-      steps.push({ i: stepTexts[k] ?? null, iteration, tools: recordRows(tools, iteration) });
-    }
-    const answer = g.texts.length && !stepsOnly ? g.texts[g.texts.length - 1] : null;
-    return { kind: "turn", turnIndex: g.turnIndex, user: g.user, answer, record, steps };
+    return withSteers(turnGroup(g, items, timing), g.steers, items);
   });
 }
 
+// A turn's steers (a plugin's nudges) into its steps: each goes to the step
+// that answered it (`step`: the server counts the model messages since the
+// prompt, plus one). One whose step isn't there (the answer, which leaves
+// the block) stays on the group (`steers`): a bubble before the answer, as
+// live. A turn without steers keeps its shape.
+function withSteers(group, steerIndexes, items) {
+  if (!steerIndexes.length) return group;
+  const steps = group.steps.map((step) => ({ ...step, steers: [] }));
+  const left = [];
+  for (const i of steerIndexes) {
+    const n = Number(items[i].step) || 1;
+    const step = steps.find((s) => s.iteration === n);
+    if (step) step.steers.push(i);
+    else left.push(i);
+  }
+  return { ...group, steps, steers: left };
+}
+
+function turnGroup(g, items, timing) {
+  const record = turnRecordAt(timing, g.turnIndex);
+  const tools = record ? (timing?.toolRecords || []).filter((r) => r.turn_id === record.id) : [];
+  const stepsOnly = canceledSteps(g, record, tools);
+  if (g.texts.some((i) => items[i].parts)) return partsTurn(g, items, record, tools, stepsOnly);
+  const maxIteration = tools.reduce((m, r) => Math.max(m, Number(r.iteration) || 0), 0);
+  const stepTexts = stepsOnly ? g.texts : g.texts.slice(0, -1);
+  const steps = [];
+  for (let k = 0; k < Math.max(stepTexts.length, maxIteration); k += 1) {
+    const iteration = k + 1;
+    steps.push({ i: stepTexts[k] ?? null, iteration, tools: recordRows(tools, iteration) });
+  }
+  const answer = g.texts.length && !stepsOnly ? g.texts[g.texts.length - 1] : null;
+  return { kind: "turn", turnIndex: g.turnIndex, user: g.user, answer, record, steps };
+}
+
 // A canceled turn that ran more than one step or any call has no answer:
 // its partial text stays in the block, as it does live (turn_view.js
 // turnEnded promotes only a completed turn or a lone step with no tools).