samagotchi 0.66.0 → 0.68.0

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

@@ -83,6 +83,40 @@ export function stripCountText(shown, total) {
     : `${total - shown} archived`;
 }
 
+// How long a new card fades in and a status dot's pulse period: index.html's
+// `.card.entering` fadeIn (.28s) and `.card .dot` dot-pulse / attn-pulse (1.6s).
+export const CARD_FADE_MS = 280;
+export const DOT_PULSE_MS = 1600;
+
+// Which of a list's cards fade in. Every draw makes new nodes (draw), and a
+// new node starts its CSS animation again: so only a card the list did not
+// draw last time (+prev+: id → when it was first drawn, from performance.now();
+// none for a list not drawn yet, or emptied: every card is new) gets
+// `entering`, and one drawn again during its own fade keeps it, carried on
+// from where it was (+entering+: id → ms since its first draw, the negative
+// animation-delay) instead of starting over or snapping to full.
+// +ids+: the cards drawn now. +drawn+ is the next draw's +prev+ (only +ids+).
+export function enteringCards(prev, ids, now, fadeMs = CARD_FADE_MS) {
+  const drawn = new Map();
+  const entering = new Map();
+  for (const id of ids) {
+    const at = prev?.get(id) ?? now;
+    drawn.set(id, at);
+    if (now - at < fadeMs) entering.set(id, Math.max(0, now - at));
+  }
+  return { drawn, entering };
+}
+
+// A card's inline animation phases: its fade's delay (+enterMs+ into it) and
+// the status dots' pulse, phase-locked to the clock (+now+, performance.now())
+// so a redrawn dot carries on pulsing where the last one was. "" for neither.
+export function cardAnimStyle({ enterMs = null, now = null } = {}, period = DOT_PULSE_MS) {
+  const parts = [];
+  if (enterMs) parts.push(`--enter-delay:-${Math.round(enterMs)}ms`);
+  if (now !== null) parts.push(`--pulse-delay:-${Math.round(now % period)}ms`);
+  return parts.join(";");
+}
+
 // A card: the first message as its title, then status, how long ago, owner
 // and memories. The id is in the tooltip (and the search) only. A session
 // that waits on the user (a question, an approval, a card with actions)
@@ -95,11 +129,13 @@ export function stripCountText(shown, total) {
 // member does; with rows (all sessions) an open family lists its members
 // inline, the strip's opens in a popover; matchIds: a search's matching
 // members. A family in a session chain (chains.js foldChains) carries its
-// `day N` chip, which opens the other links in a popover.
+// `day N` chip, which opens the other links in a popover. entering: a card
+// new to its list (enteringCards: it fades in); anim: its inline animation
+// phases (cardAnimStyle).
 // +ctx+: title (cardTitle), projectName (the page's scope), activeId (the
 // open session), chainOpen (its chain's popover is open), parent (the
 // delegating session, or null).
-export function cardTemplate(s, { deletable = false, archivable = false, selectable = false, picked = false, skipReason = null, family = null, open = false, rows = false, matchIds = null } = {}, { title = "", projectName = null, activeId = null, chainOpen = false, parent = null } = {}) {
+export function cardTemplate(s, { deletable = false, archivable = false, selectable = false, picked = false, skipReason = null, family = null, open = false, rows = false, matchIds = null, entering = false, anim = "" } = {}, { title = "", projectName = null, activeId = null, chainOpen = false, parent = null } = {}) {
   const fam = family && family.members.length ? family : null;
   const ts = s.updated_at || s.created_at || "";
   const tip = `${s.id} · updated ${ts} · ${s.status}`;
@@ -128,9 +164,9 @@ export function cardTemplate(s, { deletable = false, archivable = false, selecta
   // Its delegates and its chain's other links: the card is .contains-active while one is open.
   const memberIds = [...(fam ? fam.members.map((m) => m.session.id) : []),
     ...(family?.chain ? family.chain.links.map((x) => x.id).filter((id) => id !== s.id) : [])];
-  const cls = `card${s.archived ? " archived" : ""}${waiting || familyWaiting ? " waiting" : ""}${selectable && picked ? " picked" : ""}${fam && rows && open ? " family-open" : ""}`;
+  const cls = `card${s.archived ? " archived" : ""}${waiting || familyWaiting ? " waiting" : ""}${selectable && picked ? " picked" : ""}${fam && rows && open ? " family-open" : ""}${entering ? " entering" : ""}`;
   const recap = s.recap ? html`<div class="recap" title=${s.recap}>${s.recap}</div>` : nothing;
-  return html`<div class=${cls} data-id=${s.id} data-members=${memberIds.length ? memberIds.join(" ") : nothing} title=${`${tip}${memTitle ? ` · ${memTitle}` : ""}`}><div class="preview">${title}</div>${recap}<div class="meta"><span class=${`status dot ${s.status}${waiting ? " waiting" : ""}`} title=${dotWord} aria-label=${dotWord}></span>${waitingT}${stoppedT}${time}${ctxT}${folderT}${parentChipTemplate(s, parent)}${chain}${kids}${ownerBadgeTemplate(s)}${archived}</div>${famRows}${skip}${pick}${selectable ? nothing : cardToolsTemplate(s, { deletable, archivable })}</div>`;
+  return html`<div class=${cls} data-id=${s.id} data-members=${memberIds.length ? memberIds.join(" ") : nothing} style=${anim || nothing} title=${`${tip}${memTitle ? ` · ${memTitle}` : ""}`}><div class="preview">${title}</div>${recap}<div class="meta"><span class=${`status dot ${s.status}${waiting ? " waiting" : ""}`} title=${dotWord} aria-label=${dotWord}></span>${waitingT}${stoppedT}${time}${ctxT}${folderT}${parentChipTemplate(s, parent)}${chain}${kids}${ownerBadgeTemplate(s)}${archived}</div>${famRows}${skip}${pick}${selectable ? nothing : cardToolsTemplate(s, { deletable, archivable })}</div>`;
 }
 
 function cardToolsTemplate(s, { deletable, archivable }) {
@@ -157,8 +193,10 @@ function ownerBadgeTemplate(s) {
 }
 
 // The strip's end: the All sessions tile (with its count) and hide ▴.
-export function stripTileTemplate(count) {
-  return html`<div class="strip-side"><button type="button" class="card" id="allTile" title="All sessions, with search">All sessions →<span class="count">${count}</span></button><button type="button" class="strip-toggle" id="stripHide" title="Hide the latest sessions">hide ▴</button></div>`;
+// entering / anim: as a card's (cardTemplate). id and title are bound, as
+// class is, so the attributes keep their order.
+export function stripTileTemplate(count, { entering = false, anim = "" } = {}) {
+  return html`<div class="strip-side"><button type="button" class=${entering ? "card entering" : "card"} id=${"allTile"} style=${anim || nothing} title=${"All sessions, with search"}>All sessions →<span class="count">${count}</span></button><button type="button" class="strip-toggle" id="stripHide" title="Hide the latest sessions">hide ▴</button></div>`;
 }
 
 // The hidden strip's pill: "▾ 5 sessions · ● 1 live · ● 1 waiting"
@@ -261,6 +299,18 @@ export function createListsView(deps) {
     return ordered;
   }
 
+  // The cards each list actually drew (the strip's after its cut to what
+  // fits; not drawnOrder, which select mode reads), id → when first drawn:
+  // a card not in it fades in (enteringCards). A list drawn empty forgets.
+  const lastDrawn = new Map(); // list element → Map(id → performance.now() at its first draw)
+  const STRIP_TILE = "#allTile"; // the All sessions tile's id there (no session id starts with #)
+  function enteringFor(el, ids) {
+    const now = win.performance?.now() ?? Date.now();
+    const { drawn, entering } = enteringCards(lastDrawn.get(el), ids, now);
+    lastDrawn.set(el, drawn);
+    return (id) => ({ entering: entering.has(id), anim: cardAnimStyle({ enterMs: entering.get(id), now }) });
+  }
+
   // The strip's cards: stripOrder, held under the pointer, as many as fit.
   function stripCards() {
     return listOrder(topStripEl, stripOrder(shownSessions(), sessions()), familyId).slice(0, stripCols);
@@ -425,6 +475,7 @@ export function createListsView(deps) {
     const refused = scopeError();
     if (refused) {
       draw(topStripEl, html`<div class="hint scope-error">${refused} · <a href=${allScopeHref("", null, win.location.search)}>show every session</a></div>`);
+      lastDrawn.delete(topStripEl);
       familyPop.close();
       chainPop.close();
       return;
@@ -433,12 +484,14 @@ export function createListsView(deps) {
     // Only archived sessions: no cards, but the tile stays, the way to them.
     if (!all.length) {
       topStripEl.replaceChildren();
+      lastDrawn.delete(topStripEl);
       familyPop.close();
       chainPop.close();
       return;
     }
-    const tile = stripTileTemplate(stripCountText(shownSessions().length, all.length));
-    draw(topStripEl, html`${cards.map((f) => cardFor(f.head, { family: f, open: familyPop.openHead() === f.head.id }))}${tile}`);
+    const anim = enteringFor(topStripEl, [...cards.map(familyId), STRIP_TILE]);
+    const tile = stripTileTemplate(stripCountText(shownSessions().length, all.length), anim(STRIP_TILE));
+    draw(topStripEl, html`${cards.map((f) => cardFor(f.head, { family: f, open: familyPop.openHead() === f.head.id, ...anim(familyId(f)) }))}${tile}`);
     bindCards(topStripEl, select, {
       onFamily: (id, _chip, e) => {
         familyPop.toggle(id);
@@ -490,6 +543,7 @@ export function createListsView(deps) {
     updateSelectBar();
     if (!fams.length) {
       drawnOpen.clear();
+      lastDrawn.delete(allListEl);
       draw(allListEl, html`<div class="hint">${listed.length ? "No session matches." : "No sessions yet."}</div>`);
       if (chainFrom === allListEl) chainPop.refresh();
       return;
@@ -501,11 +555,12 @@ export function createListsView(deps) {
       ? { selectable: true, picked: selecting.picked.has(s.id), skipReason: selecting.skipReasons.get(s.id) }
       : { deletable: true, archivable: true });
     drawnOpen.clear();
+    const anim = enteringFor(allListEl, fams.map(familyId));
     draw(allListEl, html`${fams.map((f) => {
       const matched = !!f.matchIds?.size;
       const open = familyOpen(f, matched ? searchToggles : familyToggles, { matched });
       drawnOpen.set(f.head.id, open);
-      return cardFor(f.head, { ...opts(f.head), family: f, open, rows: true, matchIds: q ? f.matchIds : null });
+      return cardFor(f.head, { ...opts(f.head), family: f, open, rows: true, matchIds: q ? f.matchIds : null, ...anim(familyId(f)) });
     })}`);
     bindCards(allListEl, (id, e) => {
       if (selecting.on) {

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

@@ -12,9 +12,10 @@
 // choice for the next create only (POST /api/sessions' llm_context), never
 // remembered: nothing is sent unless the user sets one.
 
+import { createChipPopover } from "./chip_popover.js";
 import { html, nothing, render } from "./vendor/lit-html.js";
 
-export const STRATEGIES = [
+const STRATEGIES = [
   { value: "none", label: "none" },
   { value: "stale", label: "stale" },
   { value: "stale,forget", label: "stale + forget (experimental)" },
@@ -144,7 +145,7 @@ export function choiceWords(choice) {
 
 // The strategy list, with the session's own value when it isn't one of them
 // (forget alone, a newer chi's layer).
-export function strategyOptions(chosen) {
+function strategyOptions(chosen) {
   if (chosen === DEFAULT || STRATEGIES.some((s) => s.value === chosen)) return STRATEGIES;
   return [...STRATEGIES, { value: chosen, label: chosen }];
 }
@@ -201,113 +202,40 @@ export function renderForm(target, summary, opts = {}) {
   render(formTemplate(summary, opts), target);
 }
 
-const EDGE = 16;
-const GAP = 8;
-
-// Where the popover goes for the chip's +rect+: above it, or below when
-// the room above is short of its height and below has more; capped to the
-// room on that side (it scrolls), never past the window's edges.
-// @return {{left, top?, bottom?, maxHeight?}}
-export function popoverPlace(rect, { width, height, innerWidth, innerHeight }) {
-  const left = Math.max(EDGE, Math.min(rect.left, innerWidth - width - EDGE));
-  const above = rect.top - GAP - EDGE;
-  const below = innerHeight - rect.bottom - GAP - EDGE;
-  const down = height > above && below > above;
-  const room = Math.max(0, down ? below : above);
-  const place = down ? { left, top: rect.bottom + GAP } : { left, bottom: Math.max(EDGE, innerHeight - rect.top + GAP) };
-  return height > room ? { ...place, maxHeight: room } : place;
-}
-
-// The chip's popover. el: where the chip is drawn (#infoText, info_bar.js:
-// clicks are delegated); summary(): the open session's llm_context;
-// session(): the open session's id; running(): a turn runs; run(line):
-// sends the command.
+// The chip's popover (chip_popover.js' shell). el: where the chip is drawn
+// (#infoText, info_bar.js: clicks are delegated); summary(): the open
+// session's llm_context; session(): the open session's id; running(): a
+// turn runs; run(line): sends the command.
 // The start page's (kind NEW_CHAT): summary() is the picked model's,
 // choice() the pending choice, and choose(next) takes a Set's (null for
 // "follow the model") instead of a command running. id and anchor (the
 // chip's selector) keep the two controls apart.
 export function createLlmContextControl({ el, summary, session = () => null, running = () => false, run,
                                           kind = SESSION, choice = () => null, choose = null,
-                                          id = "llmContextPopover", anchor: anchorSel = ".llmctx-chip",
+                                          id = "llmContextPopover", anchor = ".llmctx-chip",
                                           doc = document, win = window }) {
   const fresh = kind === NEW_CHAT;
-  const pop = doc.createElement("div");
-  pop.id = id;
-  pop.className = "ctx-popover llmctx-popover";
-  pop.setAttribute("role", "dialog");
-  pop.hidden = true;
-  doc.body.appendChild(pop);
-  // The values the form opened with, and the session it is for.
+  // The values the form opened with.
   let initial = null;
-  let openFor = null;
   // What the open form was drawn from: the summary, the form's options and
-  // the summary its "Now:" line reads. A closed popover is empty, so each
-  // open draws a fresh form (unsent edits are gone).
+  // the summary its "Now:" line reads.
   let shown = null;
   const draw = (changes = {}) => {
     shown = { ...shown, ...changes };
-    renderForm(pop, shown.data, { ...shown.opts, now: shown.now, error: shown.error });
+    renderForm(shell.pop, shown.data, { ...shown.opts, now: shown.now, error: shown.error });
   };
 
-  function place(anchor) {
-    const width = Math.min(360, win.innerWidth - 32);
-    pop.style.width = `${width}px`;
-    pop.style.maxHeight = "";
-    const at = popoverPlace(anchor.getBoundingClientRect(), { width, height: pop.offsetHeight,
-                                                              innerWidth: win.innerWidth, innerHeight: win.innerHeight });
-    pop.style.left = `${at.left}px`;
-    pop.style.top = at.top === undefined ? "" : `${at.top}px`;
-    pop.style.bottom = at.bottom === undefined ? "" : `${at.bottom}px`;
-    if (at.maxHeight !== undefined) pop.style.maxHeight = `${at.maxHeight}px`;
-  }
-
-  function open(anchor) {
-    const data = summary();
-    if (!data) return;
+  // A refresh (a newer summary): an open form keeps what the user typed;
+  // only its "Now:" line follows (the same template again: lit writes that
+  // line alone).
+  function show(data, opening) {
+    if (!opening) return draw({ now: data });
     initial = fresh ? ownValues({ own: choice() }) : ownValues(data);
-    openFor = session();
     shown = { data, opts: { running: running(), kind, choice: choice() } };
     draw({ now: data, error: null });
-    pop.hidden = false;
-    place(anchor);
-  }
-
-  function close() {
-    pop.hidden = true;
-    initial = null;
-    openFor = null;
-    shown = null;
-    render(nothing, pop);
   }
 
-  function isOpen() { return !pop.hidden; }
-
-  // A new summary (a command_ran, a re-read): an open form keeps what the
-  // user typed; only its "Now:" line follows (the same template again: lit
-  // writes that line alone). Another session closes it.
-  function refresh() {
-    if (!isOpen()) return;
-    const data = summary();
-    if (!data || session() !== openFor) return close();
-    draw({ now: data });
-  }
-
-  el.addEventListener("click", (e) => {
-    const anchor = e.target.closest(anchorSel);
-    if (!anchor) return;
-    e.stopPropagation();
-    if (isOpen()) close();
-    else open(anchor);
-  });
-  // An edit makes an error the last Set showed stale.
-  const clearError = () => {
-    if (shown?.error) draw({ error: null });
-  };
-  pop.addEventListener("input", clearError);
-  pop.addEventListener("change", clearError);
-  pop.addEventListener("submit", (e) => {
-    e.preventDefault();
-    const form = e.target;
+  function submit(form) {
     const values = { strategy: form.elements.strategy.value, apply: form.elements.apply.value,
                      budget: form.elements.budget.value };
     if (fresh) {
@@ -318,29 +246,32 @@ export function createLlmContextControl({ el, summary, session = () => null, run
         draw({ error: err.message });
         return;
       }
-      close();
+      shell.close();
       choose(next);
       return;
     }
     const line = commandLine(values, initial);
-    close();
+    shell.close();
     if (line) run(line);
+  }
+
+  function act(name) {
+    if (name !== "reset") return;
+    shell.close();
+    if (fresh) choose(null);
+    else run(commandLine());
+  }
+
+  const shell = createChipPopover({
+    id, className: "ctx-popover llmctx-popover", width: 360, el, anchor, summary, session, show,
+    onClose: () => { initial = null; shown = null; }, onSubmit: submit, onAct: act, doc, win,
   });
-  pop.addEventListener("click", (e) => {
-    const act = e.target.closest("[data-act]")?.dataset.act;
-    if (act === "close") close();
-    else if (act === "reset") {
-      close();
-      if (fresh) choose(null);
-      else run(commandLine());
-    }
-  });
-  doc.addEventListener("click", (e) => {
-    if (isOpen() && !pop.contains(e.target) && !e.target.closest?.(anchorSel)) close();
-  });
-  doc.addEventListener("keydown", (e) => {
-    if (e.key === "Escape" && isOpen()) close();
-  });
+  // An edit makes an error the last Set showed stale.
+  const clearError = () => {
+    if (shown?.error) draw({ error: null });
+  };
+  shell.pop.addEventListener("input", clearError);
+  shell.pop.addEventListener("change", clearError);
 
-  return { close, refresh, get open() { return isOpen(); } };
+  return { close: shell.close, refresh: shell.refresh, get open() { return shell.isOpen(); } };
 }

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

@@ -9,26 +9,32 @@
 // has it. The search input keeps the focus:
 // ↑/↓ PageUp/PageDown move, ⏎ picks, Esc and Tab close without a change.
 
-import { escapeHtml } from "./format.js";
 import { moveSelection } from "./command_complete.js";
 import {
   MODEL_KEY, RECENT_KEY, groupRows, matchModels, modelRows, pickModel, pushRecent, recentRows, rowNote, rowTitle,
 } from "./model_pick.js";
+import { html, nothing, render as draw } from "./vendor/lit-html.js";
 
 const PAGE = 8;
 const MAX_HEIGHT = 360;
 const MIN_ROOM = 200;
 const GAP = 8;
 
-// The text with the [start, end) ranges in <mark>, escaped slice by slice.
-function markedHtml(text, marks) {
-  let html = "";
+// The text with the [start, end) ranges in <mark> (lit-html parts).
+function markedTemplate(text, marks) {
+  const parts = [];
   let at = 0;
   for (const [a, b] of marks || []) {
-    html += `${escapeHtml(text.slice(at, a))}<mark>${escapeHtml(text.slice(a, b))}</mark>`;
+    parts.push(text.slice(at, a), html`<mark>${text.slice(a, b)}</mark>`);
     at = b;
   }
-  return html + escapeHtml(text.slice(at));
+  parts.push(text.slice(at));
+  return parts;
+}
+
+// A group's head ("Recent", a host with its notes).
+function headTemplate(label, note = "") {
+  return html`<div class="model-group" role="presentation">${label}${note ? html` <span>${note}</span>` : nothing}</div>`;
 }
 
 function readRecent() {
@@ -58,40 +64,38 @@ export function createModelPicker({ button, panel, input, list, composer, center
     button.classList.toggle("unavailable", rows.some((r) => r.name === name && r.unavailable === true));
   }
 
-  function rowHtml(row, i, { hostMarks = [], idMarks = [], showHost = !row.isDefaultHost } = {}) {
-    const host = showHost ? `<span class="model-host">${markedHtml(row.host, hostMarks)}</span><span class="model-dot"> · </span>` : "";
+  // One option row. The active one is drawn so here and kept so by
+  // showActive (the arrows and the pointer move it without a redraw).
+  function rowTemplate(row, i, { hostMarks = [], idMarks = [], showHost = !row.isDefaultHost } = {}) {
+    const host = showHost
+      ? html`<span class="model-host">${markedTemplate(row.host, hostMarks)}</span><span class="model-dot"> · </span>` : nothing;
     const noteText = rowNote(row, defaultName);
-    const note = noteText ? `<span class="model-note">${noteText}</span>` : "";
+    const note = noteText ? html`<span class="model-note">${noteText}</span>` : nothing;
     const cls = `model-option${i === active ? " active" : ""}${row.name === chosen ? " chosen" : ""}${row.unavailable ? " unavailable" : ""}`;
-    const titleText = rowTitle(row);
-    const title = titleText ? ` title="${escapeHtml(titleText)}"` : "";
-    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>`;
+    return html`<div class=${cls} role="option" id=${`model-option-${i}`} aria-selected=${String(i === active)} data-index=${i} title=${rowTitle(row) || nothing}><span class="model-id">${host}${markedTemplate(row.id, idMarks)}</span>${note}</div>`;
   }
 
   function render() {
     const query = input.value.trim();
-    let html = "";
+    const parts = [];
     shown = [];
-    const add = (row, opts) => { html += rowHtml(row, shown.length, opts); shown.push(row); };
+    const add = (row, opts) => { parts.push(rowTemplate(row, shown.length, opts)); shown.push(row); };
     if (query) {
       for (const m of matchModels(rows, query)) add(m.row, { hostMarks: m.hostMarks, idMarks: m.idMarks });
-      if (!shown.length) html = `<div class="model-empty" role="presentation">Nothing matches</div>`;
+      if (!shown.length) parts.push(html`<div class="model-empty" role="presentation">Nothing matches</div>`);
     } else {
       const recent = recentRows(rows, readRecent());
-      const head = (label, note = "") =>
-        `<div class="model-group" role="presentation">${escapeHtml(label)}${note ? ` <span>${escapeHtml(note)}</span>` : ""}</div>`;
       if (recent.length) {
-        html += head("Recent");
+        parts.push(headTemplate("Recent"));
         recent.forEach((row) => add(row));
       }
       for (const group of groupRows(rows)) {
-        html += head(group.host, [group.isDefault ? "default host" : "", group.unavailable ? "host down" : ""].filter(Boolean).join(" · "));
+        parts.push(headTemplate(group.host, [group.isDefault ? "default host" : "", group.unavailable ? "host down" : ""].filter(Boolean).join(" · ")));
         group.rows.forEach((row) => add(row, { showHost: false }));
       }
     }
     if (active >= shown.length) active = 0;
-    list.innerHTML = html;
+    draw(parts, list);
     showActive();
   }
 
@@ -144,7 +148,7 @@ export function createModelPicker({ button, panel, input, list, composer, center
   function close({ refocus = false } = {}) {
     if (!isOpen()) return;
     panel.hidden = true;
-    list.innerHTML = "";
+    draw(nothing, list);
     shown = [];
     button.setAttribute("aria-expanded", "false");
     input.setAttribute("aria-expanded", "false");

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

@@ -2,6 +2,8 @@
 // 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.
 
+import { clip } from "./format.js";
+
 // The bell's state. OS notifications need a secure context: on chi web
 // over http at a LAN address the API is missing or always denied, so the
 // bell is hidden there (the title badge still counts).
@@ -16,7 +18,7 @@ export function notifyState({ hasNotification, secureContext, permission, wanted
 // chi ran for a delegate child's report (last_turn origin delegate_report)
 // or an attached context change (context): nobody started it, so nobody
 // watched it.
-export const DONE_MIN_SECONDS = 10;
+const DONE_MIN_SECONDS = 10;
 const UNWATCHED_ORIGINS = ["delegate_report", "context"];
 
 // The step-limit question (kind "continue": a turn ran out of iterations
@@ -90,7 +92,7 @@ const cardKey = (sessionId, cardId) => `${sessionId}:card:${cardId}`;
 // @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) {
+function closedKeys(prev, next) {
   const keys = [];
   const q = prev?.pending_question;
   const nq = next?.pending_question;
@@ -147,7 +149,7 @@ export function trackAttention(state, type, data = {}) {
 // 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 title = clip(name, 61);
   const seconds = Math.round(Number(session?.last_turn?.seconds) || 0);
   const body = {
     question: "needs an answer",
@@ -171,7 +173,7 @@ export function attentionText(session, attention) {
 // lowest claim (a tab id) shows it (4.11). Without BroadcastChannel every
 // tab goes on alone, at once.
 export const NOTIFY_CHANNEL = "chi-notify";
-export const NOTIFY_HOLD_MS = 300;
+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;
 

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

@@ -70,7 +70,7 @@ export function approvalView(pq) {
   const reason = a.reason ? String(a.reason) : "(no reason given)";
   return {
     // A plugin tool's label ("chrome: screenshot"), as its row shows it;
-    // else the tool the call acts as (an MCP tool behind mcp_call).
+    // else the tool the call acts as (an MCP tool behind call_tool).
     tool: a.label || a.acts_as || a.tool || "",
     // A tool without a command or path (an MCP tool): its compact args.
     what: command || paths.join("\n") || a.args || "",

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

@@ -7,7 +7,7 @@
 // are left alone, inline code only when it is the ref alone, a bare URL's
 // text too.
 
-import { refAttrs } from "./refs.js";
+import { refSpan } from "./refs.js";
 
 // A path (no spaces), a line, an optional end line and an optional column
 // (kept in the text, not used). LineLinker::REF.
@@ -30,7 +30,7 @@ const SKIP = "pre, a, [data-ref-kind]";
 // The ref a match names: { path, line, endLine } or null. A path has a `/`
 // or an extension (`10:30` is a time, `host:8080` a port); line 0 is never
 // a ref; an end line not after the line is dropped.
-export function refOf(groups) {
+function refOf(groups) {
   const path = groups?.path || "";
   if (!path.includes("/") && !/\.[A-Za-z0-9]+$/.test(path)) return null;
   if (groups.from === undefined) return { path, line: null, endLine: null };
@@ -168,12 +168,6 @@ function wrapRefs(node, hits) {
   node.replaceWith(frag);
 }
 
-function refSpan(doc, ref) {
-  const holder = doc.createElement("div");
-  holder.innerHTML = `<span class="ref"${refAttrs(ref)}></span>`;
-  return holder.firstChild;
-}
-
 // [start, end] of each fenced block (an unclosed one runs to the end).
 function fencedBlocks(text) {
   const blocks = [];

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

@@ -32,6 +32,19 @@ export function refAttrs(ref) {
   return ` data-ref-kind="${escapeHtml(ref.kind)}"${attr("path", ref.path)}${attr("line", ref.line)}${attr("end-line", ref.end_line)}`;
 }
 
+// A span with refAttrs' ref class and data attributes, for a page that
+// builds DOM (ref_scan.js).
+export function refSpan(doc, ref) {
+  const span = doc.createElement("span");
+  span.className = "ref";
+  if (!ref?.kind) return span;
+  span.dataset.refKind = ref.kind;
+  for (const [name, value] of [["refPath", ref.path], ["refLine", ref.line], ["refEndLine", ref.end_line]]) {
+    if (value) span.dataset[name] = String(value);
+  }
+  return span;
+}
+
 // A kind, as the server's Ref allows it (Ref::KIND).
 const KIND = /^[a-z][a-z0-9_-]{0,31}$/;
 

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

@@ -50,6 +50,15 @@ export function emptySessionState() {
     reasoningHistory: null,
     toolkit: null,
     timing: normalizeTiming(),
+    // The event id (or, from an older worker, the event_seq) the session was
+    // rendered at (null: no live worker then), where a stream opened later
+    // has to start; set by the page's resync, not by the payload.
+    streamSeq: null,
+    // The stream was opened from 0 (a wake with no cursor to go on) and no
+    // new turn has started on it yet (app.js followWokenWorker).
+    streamFromGuess: false,
+    // When the info bar's "copy chi --attach" copied (its "copied ✓").
+    attachCopiedAt: 0,
   };
 }
 
@@ -65,6 +74,11 @@ export function sessionStateFrom(data) {
     served: s.served_model ? [s.served_model, s.served_model_for, s.served_expected_by || null] : null,
     dir: s.working_directory,
     owner: s.owner || null,
+    // Its live worker's chi and features (null and [] without one): a
+    // switch shows its stale-worker badge, task stop and queue at once,
+    // not at the session's next hub event (followSelectedSession).
+    workerVersion: s.worker_version || null,
+    workerFeatures: Array.isArray(s.worker_features) ? s.worker_features : [],
     timing: normalizeTiming(data.timing),
   };
   // The saved fill, so a reloaded or stopped session shows it before its

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

@@ -1,4 +1,4 @@
-import { normalize } from "./format.js";
+import { clip, normalize } from "./format.js";
 
 // Where the open session's title shows: once on screen. Its strip card says
 // it when the strip is shown and has an `.active` card for it; otherwise
@@ -21,6 +21,5 @@ export function topBarTitle({ title, cardShown, stripHidden, allView }) {
 export function tabTitle({ title, base }) {
   const text = normalize(title);
   if (!text) return base;
-  const cut = text.length > TAB_TITLE_CHARS ? `${text.slice(0, TAB_TITLE_CHARS)}…` : text;
-  return `${cut} · ${base}`;
+  return `${clip(text, TAB_TITLE_CHARS + 1)} · ${base}`;
 }

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

@@ -188,14 +188,6 @@ export function familySummary(f) {
   return delegatesSummary(f.members.map((m) => m.session));
 }
 
-// The chip's words: "▸ 3 delegates · 1 live · 1 waiting".
-export function familyChipText(sum) {
-  if (!sum) return "";
-  const waiting = sum.counts?.waiting || 0;
-  return [`\u25B8 ${sum.total} ${sum.total === 1 ? "delegate" : "delegates"}`,
-    sum.live ? `${sum.live} live` : "", waiting ? `${waiting} waiting` : ""].filter(Boolean).join(" \u00b7 ");
-}
-
 // Whether a family's list is open: the user's toggle (+toggles+, head id →
 // bool) wins; else open when a member waits on the user (the head's own
 // wait is on its card already) or a search matched a member.