samagotchi 0.2.0

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

@@ -0,0 +1,60 @@
+// Plugins' slow setup (chi.init: an MCP server's first start, a model
+// download) as a small row above the composer: a spinner line per running
+// task ("mcp · Starting MCP server chrome (first run, saving its tools)…"),
+// a "✓ chrome ready, 3 tools" line when one is done, which fades. A failed
+// one leaves the row: its warn card says why. No DOM here, so node --test
+// covers it; app.js draws the row.
+import { escapeHtml as esc } from "./format.js";
+
+// How long a done line stays before it fades out.
+export const DONE_MS = 2500;
+
+// @returns the row's state: task id → { bundle, label, status: running|done, summary }
+export function newInitTasks() {
+  return new Map();
+}
+
+// Replace the state with the tasks a snapshot says still run (a page that
+// joins late, a resync); done lines go.
+// @param list [{ bundle, id, label }]
+export function seedInitTasks(tasks, list) {
+  tasks.clear();
+  for (const t of list || []) {
+    if (t && t.id) tasks.set(t.id, { bundle: t.bundle, label: t.label, status: "running" });
+  }
+  return tasks;
+}
+
+// A plugin_init_started / plugin_init_finished event.
+// @returns the id of a task that is now done (for its fade), else null
+export function applyInitEvent(tasks, type, data) {
+  if (!data || !data.id) return null;
+  if (type === "plugin_init_started") {
+    tasks.set(data.id, { bundle: data.bundle, label: data.label, status: "running" });
+    return null;
+  }
+  if (type !== "plugin_init_finished") return null;
+  if (!data.ok) {
+    tasks.delete(data.id);
+    return null;
+  }
+  tasks.set(data.id, { bundle: data.bundle, label: data.label, status: "done", summary: data.summary || null });
+  return data.id;
+}
+
+// Drop a done line (its fade ended); a task started again under the id stays.
+export function dropDone(tasks, id) {
+  if (tasks.get(id)?.status === "done") tasks.delete(id);
+  return tasks;
+}
+
+// @returns the row's inner HTML ("" with nothing to show)
+export function initRowHtml(tasks) {
+  return [...tasks.entries()].map(([id, t]) => {
+    const bundle = `<span class="init-bundle">${esc(t.bundle)}</span>`;
+    if (t.status === "done") {
+      return `<div class="init-task done" data-id="${esc(id)}"><span class="init-mark" aria-hidden="true">✓</span>${bundle}<span class="init-text">${esc(t.summary || `${t.label}: done`)}</span></div>`;
+    }
+    return `<div class="init-task running" data-id="${esc(id)}"><span class="init-spin" aria-hidden="true"></span>${bundle}<span class="init-text">${esc(t.label)}…</span></div>`;
+  }).join("");
+}

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

@@ -0,0 +1,23 @@
+// The start page's model picker: pure helpers over GET /api/models' payload.
+
+export const MODEL_KEY = "chi_model";
+
+// The names to offer, in the server's order: the default host's models
+// bare, the other hosts' as host:model. [] for a payload with none.
+export function modelNames(payload) {
+  const list = Array.isArray(payload?.models) ? payload.models : [];
+  return list.map((m) => String(m?.name || "")).filter(Boolean);
+}
+
+// The name to preselect: the remembered one when it is still offered (any
+// case), else the server's default, else the first offered, else "".
+export function pickModel(names, defaultName, stored) {
+  const want = String(stored || "").trim().toLowerCase();
+  if (want) {
+    const kept = names.find((n) => n.toLowerCase() === want);
+    if (kept) return kept;
+  }
+  if (defaultName && names.includes(defaultName)) return defaultName;
+  return defaultName || names[0] || "";
+}
+

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

@@ -0,0 +1,100 @@
+// What a question card shows, apart from the DOM. An approval (kind
+// "approval", from the tool guardrails) gets its own view: the tool, the
+// command or paths, where and why. Its options end in "Deny"; the answer's
+// last option denies. A page that doesn't know approvals still shows the
+// plain question text, which says the same.
+
+export function isApproval(pq) {
+  return !!pq && pq.kind === "approval";
+}
+
+// @return {null | {tool, what, isCommand, where, why}}
+export function approvalView(pq) {
+  if (!isApproval(pq)) return null;
+  const a = pq.approval || {};
+  const paths = Array.isArray(a.paths) ? a.paths : [];
+  const command = a.command || null;
+  let where = a.cwd || "";
+  if (a.repo_root) {
+    const repo = String(a.repo_root).split("/").filter(Boolean).pop() || a.repo_root;
+    where += ` (repo ${repo}${a.branch ? `, branch ${a.branch}` : ""})`;
+  } else if (where) {
+    where += " (not in a repo)";
+  }
+  const who = a.rule ? [`rule ${a.rule}`, a.source].filter(Boolean).join(", ") : (a.source || "hook");
+  const reason = a.reason ? String(a.reason) : "(no reason given)";
+  return {
+    // A plugin tool's label ("chrome: screenshot"), as its row shows it.
+    tool: a.label || a.tool || "",
+    what: command || paths.join("\n"),
+    isCommand: !!command,
+    where,
+    why: `${reason} (${who})`,
+  };
+}
+
+// The line a resolved card shows.
+export function resultText(pq, { answer = null, cancelled = false, reason = "" } = {}) {
+  const approval = isApproval(pq);
+  if (cancelled) {
+    const label = approval ? "Denied" : "Cancelled";
+    return reason ? `${label} (${reason})` : label;
+  }
+  const sel = answer && Array.isArray(answer.selected) ? answer.selected : [];
+  const freeform = answer && answer.freeform ? String(answer.freeform) : "";
+  if (approval) {
+    const options = Array.isArray(pq.options) ? pq.options : [];
+    const denied = !sel.length || sel[0] === options[options.length - 1];
+    if (denied) return freeform ? `Denied: ${freeform}` : "Denied";
+    return `Allowed: ${sel[0]}`;
+  }
+  const parts = [];
+  if (sel.length) parts.push(sel.join(", "));
+  if (freeform) parts.push(freeform);
+  return parts.length ? `Answered: ${parts.join(" · ")}` : "Answered";
+}
+
+// Shorten a line of text for the card's summary (the collapsed one-liner).
+export function truncate(text, n = 80) {
+  const s = String(text ?? "");
+  return s.length > n ? `${s.slice(0, n - 1)}…` : s;
+}
+
+// The card's summary line: while pending its header, else a label (the
+// question itself is in the body, so it isn't repeated here); once resolved
+// what was asked and the result, "Which file? → README.md" (an approval
+// asks its tool and command: "execute: rm -rf tmp → Denied").
+export function summaryText(pq, { answer = null, cancelled = false, reason = "" } = {}) {
+  if (cancelled || answer) {
+    const result = resultText(pq, { answer, cancelled, reason }).replace(/^Answered: /, "");
+    const asked = summaryAsked(pq);
+    return truncate(asked ? `${truncate(asked, 60)} → ${result}` : result, 120);
+  }
+  const label = isApproval(pq) ? `Approve ${pq.approval?.label || pq.approval?.tool || "call"}?` : "Question";
+  return truncate(pq.header || label);
+}
+
+function summaryAsked(pq) {
+  const view = approvalView(pq);
+  if (view) {
+    const what = String(view.what || "").split("\n")[0];
+    return [view.tool, what].filter(Boolean).join(": ");
+  }
+  return String(pq.question || pq.header || "").split("\n")[0];
+}
+
+// Whether the answer allowed the call (the card turns green) or denied it.
+export function approvalAllowed(pq, answer) {
+  if (!isApproval(pq)) return null;
+  return resultText(pq, { answer }).startsWith("Allowed");
+}
+
+// What a new question does to the card on the page: "same" (the card
+// already shows it: a replay), "keep" (the card is resolved, so it stays in
+// the history and the new one goes under it), "replace" (the card is still
+// pending, or there is none).
+export function nextCardAction({ cardId = null, pendingId = null } = {}, incoming) {
+  if (cardId != null && String(cardId) === String(incoming?.id)) return "same";
+  if (cardId != null && pendingId == null) return "keep";
+  return "replace";
+}

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

@@ -0,0 +1,17 @@
+// The page's place in its URL hash: #/s/<session id> for an open session,
+// #/sessions for the all-sessions view, nothing for the empty start.
+export const ALL_SESSIONS_HASH = "#/sessions";
+
+export function sessionHash(id) {
+  return id ? `#/s/${encodeURIComponent(id)}` : "";
+}
+
+export function sessionIdFromHash(hash) {
+  const m = /^#\/s\/([^/?#]+)$/.exec(hash || "");
+  if (!m) return null;
+  try {
+    return decodeURIComponent(m[1]) || null;
+  } catch (_) {
+    return null;
+  }
+}

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

@@ -0,0 +1,36 @@
+// The page's scope: ?dir=<folder> shows that folder's project (`chi web` in
+// a repo opens it so); no dir shows every session. The hash routes
+// (#/s/<id>, #/sessions) work in either.
+
+// The ?dir= folder in a location.search string, or null.
+export function scopeDir(search) {
+  const dir = new URLSearchParams(search || "").get("dir");
+  return dir && dir.trim() ? dir : null;
+}
+
+// The same place in the all view: the page without ?dir, keeping the hash.
+// +fromDir+ (the project view's folder) rides along as ?from=, so the all
+// view can link back to it.
+export function allScopeHref(hash, fromDir = null) {
+  return `/${fromDir ? `?from=${dirParam(fromDir)}` : ""}${hash || ""}`;
+}
+
+// A folder's project view, keeping the hash.
+export function projectScopeHref(dir, hash) {
+  return `/?dir=${dirParam(dir)}${hash || ""}`;
+}
+
+// A folder for the query string, its slashes left readable (as chi web
+// prints ?dir=).
+function dirParam(dir) {
+  return encodeURIComponent(dir).replace(/%2F/g, "/");
+}
+
+// The folder a card shows when the scope doesn't make it obvious: every
+// card in the all view, and in a project view a card from another folder
+// than the project's own (a worktree). "" when it is obvious.
+export function cardFolder(workingDirectory, projectName) {
+  const folder = String(workingDirectory || "").replace(/\/+$/, "").split("/").pop() || "";
+  if (!folder) return "";
+  return folder === projectName ? "" : folder;
+}

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

@@ -0,0 +1,24 @@
+// Pure sticky-follow predicate for the conversation viewport.
+// A user "follows" the live stream only while the visible gap between the
+// bottom of the viewport and the bottom of the content is within the
+// threshold. Once they scroll up to read, the gap grows past the threshold
+// and the app must stop auto-scrolling (no yank-back on each stream frame).
+export const SCROLL_FOLLOW_PX = 64;
+
+export function shouldFollowScroll(
+  { scrollHeight, scrollTop, clientHeight },
+  thresholdPx = SCROLL_FOLLOW_PX,
+) {
+  return scrollHeight - scrollTop - clientHeight <= thresholdPx;
+}
+
+// Run a DOM change that grows the content and keep a pinned view pinned:
+// the follow decision is taken before the change, as the gap measured after
+// several rows land at once (a turn's start adds the answer bubble and the
+// live timing row) is already past the threshold.
+export function keepFollowing(el, mutate, thresholdPx = SCROLL_FOLLOW_PX) {
+  const follow = shouldFollowScroll(el, thresholdPx);
+  const result = mutate();
+  if (follow) el.scrollTop = el.scrollHeight;
+  return result;
+}

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

@@ -0,0 +1,88 @@
+// Sentence scanning for the live views (the thinking ticker, the narration
+// box). Pure — no DOM, no timers.
+//
+// Sentence boundary: [.!?…] optionally followed by closing quotes/brackets,
+// then whitespace; a newline is also a boundary. The end of the input counts
+// as a boundary only when the caller says so (`atEnd`): a ticker shows the
+// newest sentence and corrects itself next frame, an append-only box cannot
+// take "version 3." back once "version 3.5" streams in. Whitespace is
+// collapsed to single spaces. Abbreviations ("e.g. ") split wrongly —
+// accepted for a live view. A bare list number ("1.", "118.") at the start
+// of a line is a marker, not a sentence: the boundary after it is skipped,
+// so the line reads "118. …".
+export const DEFAULT_MAX_LEN = 160;
+
+// A boundary: the punctuation (group 1) then a whitespace char (or the end
+// of input), or a bare newline (a boundary on its own). Matched on the raw
+// text so a newline needs no preceding punctuation.
+const BOUNDARY = /([.!?…][)"'\]]*)(\s|$)|\n/g;
+const BOUNDARY_NOT_AT_END = /([.!?…][)"'\]]*)(\s)|\n/g;
+const LIST_MARKER = /^\d{1,4}\.$/;
+
+function collapse(s) {
+  return s.replace(/\s+/g, " ").trim();
+}
+
+// Every complete sentence in +raw+ (collapsed, blanks skipped), the trailing
+// raw fragment and the index where it starts.
+export function splitSentences(text, { atEnd = false } = {}) {
+  const raw = String(text ?? "");
+  const re = atEnd ? BOUNDARY : BOUNDARY_NOT_AT_END;
+  const sentences = [];
+  let start = 0;
+  let m;
+  re.lastIndex = 0;
+  while ((m = re.exec(raw)) !== null) {
+    const end = m.index + (m[1] ? m[1].length : 0);
+    const candidate = raw.slice(start, end);
+    // A list number is no sentence: keep reading from the same start.
+    if (LIST_MARKER.test(candidate.trim())) continue;
+    const collapsed = collapse(candidate);
+    // Skip an empty sentence (a blank line between two newlines).
+    if (collapsed) sentences.push(collapsed);
+    start = m.index + m[0].length;
+  }
+  return { sentences, rest: raw.slice(start), restStart: start };
+}
+
+// A feed over an accumulating text: `feed(text)` returns the sentences
+// completed since the last call (the end of the text is no boundary; a
+// trailing fragment longer than maxLen is cut as a sentence — code-like runs
+// without punctuation); `flush(text)` returns what is left, the remainder as
+// one collapsed sentence, and consumes it; `reset()` starts over. A text
+// shorter than what was consumed (a reset upstream) resyncs and yields [].
+export function createSentenceFeed({ maxLen = DEFAULT_MAX_LEN } = {}) {
+  let consumed = 0;
+
+  function scan(text, atEnd) {
+    const raw = String(text ?? "");
+    if (raw.length < consumed) { consumed = raw.length; return null; }
+    const r = splitSentences(raw.slice(consumed), { atEnd });
+    consumed += r.restStart;
+    return { ...r, total: raw.length };
+  }
+
+  return {
+    feed(text) {
+      const r = scan(text, false);
+      if (!r) return [];
+      const fragment = collapse(r.rest);
+      if (fragment.length > maxLen) {
+        r.sentences.push(fragment);
+        consumed = r.total;
+      }
+      return r.sentences;
+    },
+    flush(text) {
+      const r = scan(text, true);
+      if (!r) return [];
+      const fragment = collapse(r.rest);
+      if (fragment) r.sentences.push(fragment);
+      consumed = r.total;
+      return r.sentences;
+    },
+    reset() {
+      consumed = 0;
+    },
+  };
+}

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

@@ -0,0 +1,60 @@
+// The page's session list as a projection of the hub's events
+// (GET /api/events): a pure reducer over the list the page holds.
+
+// @param list the current list (never mutated)
+// @param type "snapshot" | "session" | "session_gone"
+// @param data the frame's data
+// @return the next list; the same array when nothing changed, so a caller
+//   can skip a redraw
+export function applySessionEvent(list, type, data = {}) {
+  if (type === "snapshot") return Array.isArray(data.sessions) ? data.sessions.slice() : [];
+  if (type === "session") {
+    const s = data.session;
+    if (!s || !s.id) return list;
+    const i = list.findIndex((x) => x.id === s.id);
+    // A known session is replaced in place: a worker saves several times
+    // per turn, and a card that jumped under the pointer each time would
+    // be worse than an order that lags until the next snapshot or the
+    // all view (sortedByUpdated). A new one goes on top.
+    if (i < 0) return [s, ...list];
+    const next = list.slice();
+    next[i] = s;
+    return next;
+  }
+  if (type === "session_gone") {
+    if (!list.some((x) => x.id === data.id)) return list;
+    return list.filter((x) => x.id !== data.id);
+  }
+  return list;
+}
+
+const updatedMs = (s) => {
+  const ms = Date.parse(s.updated_at || "");
+  return Number.isNaN(ms) ? 0 : ms;
+};
+
+// The list in the server's order: updated_at desc (a snapshot's order).
+export function sortedByUpdated(list) {
+  return list.slice().sort((a, b) => updatedMs(b) - updatedMs(a));
+}
+
+// A delegated session (parent_id) right after its parent when both are in
+// the list: families keep the place of their newest member, the parent
+// leads, its children follow in the list's order. A child whose parent
+// is not listed stays where it is.
+export function withChildrenAfterParents(list) {
+  const ids = new Set(list.map((s) => s.id));
+  const children = new Map();
+  for (const s of list) {
+    if (s.parent_id && ids.has(s.parent_id) && s.parent_id !== s.id) {
+      if (!children.has(s.parent_id)) children.set(s.parent_id, []);
+      children.get(s.parent_id).push(s);
+    }
+  }
+  if (!children.size) return list;
+  const grouped = (s) => s.parent_id && ids.has(s.parent_id) && s.parent_id !== s.id;
+  const familyMs = (s) => Math.max(updatedMs(s), ...(children.get(s.id) || []).map(updatedMs));
+  const heads = list.filter((s) => !grouped(s));
+  const ordered = heads.slice().sort((a, b) => familyMs(b) - familyMs(a));
+  return ordered.flatMap((s) => [s, ...(children.get(s.id) || [])]);
+}

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

@@ -0,0 +1,25 @@
+// How many session cards the top strip shows for its width in px: a card
+// needs about 360 px plus a 12 px gap next to the 150 px "All sessions" tile;
+// never fewer than 3 (narrow screens scroll them), never more than 6.
+export const STRIP_TILE_PX = 150;
+export const STRIP_GAP_PX = 12;
+export const STRIP_CARD_PX = 360;
+
+export function stripColumns(width) {
+  const fit = Math.floor(((width || 0) - STRIP_TILE_PX - STRIP_GAP_PX) / (STRIP_CARD_PX + STRIP_GAP_PX));
+  return Math.min(6, Math.max(3, fit));
+}
+
+// The hidden strip's "▾ sessions" pill carries the list's count, and how
+// many of those sessions a worker runs (the cards' green "live" badge), so a
+// user who hid the strip still sees there is a live session to go back to.
+// Plain text parts; live is "" when none. Zero sessions keep the bare label.
+export function stripShowParts(sessions) {
+  const list = sessions || [];
+  const n = list.length;
+  const liveN = list.filter((s) => s && s.owner === "worker").length;
+  return {
+    count: n ? `${n} ${n === 1 ? "session" : "sessions"}` : "sessions",
+    live: liveN ? `${liveN} live` : "",
+  };
+}

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

@@ -0,0 +1,37 @@
+// The one-line tool tally of a long, tool-heavy turn, from its activity rows
+// (activity.js): "12 tool calls (2 failed) · execute ×7 · read_file ×3 · …".
+// The TUI builds the same text in Ruby (TurnTally); both follow
+// spec/shared/tally_matrix.json. No DOM here, so node --test covers it.
+
+// Below this many calls the running row says enough.
+export const MIN_CALLS = 3;
+import { toolName } from "./activity.js";
+
+const TOP_TOOLS = 3;
+const SEPARATOR = " · ";
+
+// @param rows activity rows ({ tool, params, status: running|ok|error }) in call order
+// @param opts.last end with the last call and its params (the web drops it: the rows show it)
+// @returns the tally text, or null below MIN_CALLS
+export function tallyText(rows, { last = true } = {}) {
+  const calls = rows || [];
+  if (calls.length < MIN_CALLS) return null;
+
+  const failed = calls.filter((r) => r.status === "error").length;
+  let head = `${calls.length} tool calls`;
+  if (failed > 0) head += ` (${failed} failed)`;
+  // A Map keeps first-use order; the index breaks ties.
+  const counts = new Map();
+  for (const r of calls) counts.set(toolName(r), (counts.get(toolName(r)) || 0) + 1);
+  const top = [...counts.entries()]
+    .map(([tool, n], i) => ({ tool, n, i }))
+    .sort((a, b) => b.n - a.n || a.i - b.i)
+    .slice(0, TOP_TOOLS);
+  const fields = [head, ...top.map(({ tool, n }) => `${tool} ×${n}`)];
+  if (last) {
+    const call = calls[calls.length - 1];
+    const params = String(call.params || "").replace(/\s+/g, " ").trim();
+    fields.push(`last: ${[toolName(call), params].filter((s) => s).join(" ")}`);
+  }
+  return fields.join(SEPARATOR);
+}

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

@@ -0,0 +1,79 @@
+// Live thinking as a one-line ticker (web.thinking_ticker): the newest
+// complete sentence of the accumulated thinking, changing only at sentence
+// boundaries and no sooner than a dwell after the last change. Pure — no DOM,
+// no timers. `createTicker` is clock-free: `now` is a getter the caller
+// supplies (Date.now() live, a fixed value in the tests) and the caller owns
+// the timers (`dueIn` tells when a pending line may show).
+//
+// The sentence boundary rule lives in sentences.js (shared with the
+// narration box). Fallback for code-like runs without punctuation: a
+// trailing fragment longer than maxLen (160) counts as the current sentence
+// (the dwell bounds its churn).
+import { DEFAULT_MAX_LEN, splitSentences } from "./sentences.js";
+
+const DEFAULT_DWELL_MS = 1500;
+
+// The newest complete sentence of +text+ (the end of the text counts as a
+// boundary: the ticker corrects itself next frame), else the trailing
+// fragment when longer than maxLen, else "".
+export function currentSentence(text, { maxLen = DEFAULT_MAX_LEN } = {}) {
+  const { sentences, rest } = splitSentences(text, { atEnd: true });
+  if (sentences.length) return sentences[sentences.length - 1];
+  const fragment = rest.replace(/\s+/g, " ").trim();
+  return fragment.length > maxLen ? fragment : "";
+}
+
+// A sentence ticker. `feed(text)` computes the newest sentence and, honouring
+// the dwell, either shows it now or keeps it pending; `tick()` shows a pending
+// line when its dwell has passed; `close()` forgets everything (the caller
+// writes the plain label). Each returns { line, changed, dueIn } where dueIn
+// is the ms until a pending line may show (0 when nothing pends).
+export function createTicker({ now, dwellMs = DEFAULT_DWELL_MS }) {
+  let shown = "";
+  let pending = null;
+  let closed = false;
+  let lastChange = typeof now === "function" ? now() : now;
+
+  return {
+    feed(text) {
+      if (closed) return { line: "", changed: false, dueIn: 0 };
+      if (pending !== null && currentSentence(text) === pending) {
+        // Still waiting on the dwell; nothing to do.
+        return { line: shown, changed: false, dueIn: Math.max(0, dwellMs - (now() - lastChange)) };
+      }
+      const candidate = currentSentence(text);
+      if (!candidate || candidate === shown) {
+        return { line: shown, changed: false, dueIn: 0 };
+      }
+      const elapsed = now() - lastChange;
+      // Show now if nothing is shown yet, or the dwell has passed since the
+      // last shown change.
+      if (shown === "" || elapsed >= dwellMs) {
+        shown = candidate;
+        pending = null;
+        lastChange = now();
+        return { line: shown, changed: true, dueIn: 0 };
+      }
+      // Keep the newest candidate as pending; feed overwrites it.
+      pending = candidate;
+      return { line: shown, changed: false, dueIn: Math.max(0, dwellMs - elapsed) };
+    },
+    tick() {
+      if (closed) return { line: "", changed: false, dueIn: 0 };
+      if (pending !== null && now() - lastChange >= dwellMs) {
+        shown = pending;
+        pending = null;
+        lastChange = now();
+        return { line: shown, changed: true, dueIn: 0 };
+      }
+      return { line: shown, changed: false, dueIn: pending ? Math.max(0, dwellMs - (now() - lastChange)) : 0 };
+    },
+    close() {
+      shown = "";
+      pending = null;
+      closed = true;
+      lastChange = typeof now === "function" ? now() : now;
+      return "";
+    },
+  };
+}