samagotchi 0.34.0 → 0.36.0

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

@@ -0,0 +1,44 @@
+// The open session's running turn as the page follows it, in one place:
+// whether a turn runs, its timing line (live_timing.js), the prompt-bubble
+// flags of its merges, and the turn-end reads it waits on. forget() is the
+// one reset (a session left, or its rendering started over).
+import { createLiveTiming } from "./live_timing.js";
+
+// +timingDeps+: createLiveTiming's.
+export function createLiveTurn(timingDeps) {
+  return {
+    running: false,
+    timing: createLiveTiming(timingDeps),
+    // The last input_merged had an origin with no bubble: its merged text
+    // (pending_input_merged) gets one ("report": a delegate report's).
+    unmatchedMerge: false,
+    // The running turn is one chi ran for delegate reports and its report
+    // bubble isn't drawn yet: that bubble starts the turn.
+    wakeStart: false,
+    // The turn-end re-read (turn_completed): the final answer's rendered
+    // markdown, the status and the timing. An answer_display re-read waits
+    // for it.
+    endRead: Promise.resolve(),
+    // The wait of a turn_completed with display_pending for its
+    // answer_display (turn_events.js displayWait). The worker may die in
+    // between and never send one, so forget() releases it as well as its
+    // own timeout: it must never hold the turn's answer forever.
+    displayPending: null,
+    // The last turn_failed's line, shown again after prompt_restored's resync.
+    failedText: null,
+
+    releaseDisplay() {
+      this.displayPending?.finish();
+      this.displayPending = null;
+    },
+
+    // Everything that belongs to one turn's following, but `running` (the
+    // page's setTurnRunning redraws the composer with it).
+    forget() {
+      this.timing.drop();
+      this.unmatchedMerge = false;
+      this.wakeStart = false;
+      this.releaseDisplay();
+    },
+  };
+}

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

@@ -1,6 +1,7 @@
 // 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.
 import { waitingOn } from "./notify.js";
+import { delegatesSummary } from "./format.js";
 
 // @param list the current list (never mutated)
 // @param type "snapshot" | "session" | "session_gone"
@@ -46,25 +47,87 @@ 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) {
+// The list as families: a delegate (delegate: true, the delegate tool's
+// child) whose parent is listed joins its parent's family, at any depth;
+// the rest head one. A fork (a parent_id, delegate false) is not folded: it
+// heads a family of its own, its ↳ chip naming the parent. A family is
+// {head, members: [{session, depth}]}, the members depth first (each child
+// followed by its own delegates, siblings in the list's order, depth 1 for
+// the head's children). Orphans (a parent not listed) and loners are
+// families with no members. Every session shows once: the members of a
+// parent cycle (A→B→A) no head reaches form a family headed by the cycle's
+// smallest id (an order held by head id never changes with updated_at).
+// @param order "family_ms": by the family's newest member, newest first
+//   (the all view, re-sorted on every render); "list": a family takes the
+//   place of its first-listed member and nothing re-sorts (the strip, which
+//   keeps applySessionEvent's no-jump order)
+export function families(list, { order = "family_ms" } = {}) {
   const ids = new Set(list.map((s) => s.id));
+  const grouped = (s) => !!s.delegate && s.parent_id && ids.has(s.parent_id) && s.parent_id !== 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 (!grouped(s)) continue;
+    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 kids = (s) => children.get(s.id) || [];
+  const reached = new Set();
+  const reach = (s) => {
+    if (reached.has(s.id)) return;
+    reached.add(s.id);
+    kids(s).forEach(reach);
+  };
   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) || [])]);
+  heads.forEach(reach);
+  // A session no head reaches hangs off a parent cycle: its smallest id leads.
+  const byId = new Map(list.map((s) => [s.id, s]));
+  for (const s of list) {
+    if (reached.has(s.id)) continue;
+    const path = [];
+    let at = s;
+    while (at && !path.includes(at.id) && !reached.has(at.id)) {
+      path.push(at.id);
+      at = byId.get(at.parent_id);
+    }
+    if (at && path.includes(at.id)) {
+      const head = byId.get(path.slice(path.indexOf(at.id)).sort()[0]);
+      heads.push(head);
+      reach(head);
+    }
+  }
+  const index = new Map(list.map((s, i) => [s.id, i]));
+  const out = heads.map((head) => {
+    const members = [];
+    const shown = new Set([head.id]);
+    const emit = (s, depth) => kids(s).forEach((c) => {
+      if (shown.has(c.id)) return;
+      shown.add(c.id);
+      members.push({ session: c, depth });
+      emit(c, depth + 1);
+    });
+    emit(head, 1);
+    return { head, members };
+  });
+  const all = (f) => [f.head, ...f.members.map((m) => m.session)];
+  if (order === "list") {
+    const first = new Map(out.map((f) => [f.head.id, Math.min(...all(f).map((s) => index.get(s.id)))]));
+    return out.sort((a, b) => first.get(a.head.id) - first.get(b.head.id));
+  }
+  const ms = new Map(out.map((f) => [f.head.id, Math.max(...all(f).map(updatedMs))]));
+  return out.sort((a, b) => ms.get(b.head.id) - ms.get(a.head.id) || index.get(a.head.id) - index.get(b.head.id));
+}
+
+// A family's id: its head's (what an order held by id keeps).
+export const familyId = (f) => f.head.id;
+
+// The families' sessions, a head then its members: the all view's order.
+export function flattenFamilies(fams) {
+  return fams.flatMap((f) => [f.head, ...f.members.map((m) => m.session)]);
+}
+
+// Whether any of a family (its head or a member) waits on the user.
+export function familyWaits(f) {
+  return !!waitingOn(f.head) || f.members.some((m) => waitingOn(m.session));
 }
 
 const WAITING_BADGES = {
@@ -76,13 +139,15 @@ const WAITING_BADGES = {
 
 // A card's "needs you" badge: what the session waits on the user for
 // (notify.js waitingOn), or null.
+// @param inFamily shown as a row of its parent's family: a relayed approval
+//   says its plain kind there ("in parent" would name the card it is in)
 // @return null | {kind, text, title}
-export function waitingBadge(summary) {
+export function waitingBadge(summary, { inFamily = false } = {}) {
   const waiting = waitingOn(summary);
   if (!waiting) return null;
   // A delegate's approval waiting in its parent's card (the approval relay).
   const parent = summary.pending_question?.relayed_to;
-  if (parent && waiting.reason !== "card") {
+  if (parent && !inFamily && waiting.reason !== "card") {
     return { kind: waiting.reason, text: `in parent ${parent}`,
       title: `Waiting for your ${waiting.reason} in parent session ${parent} (answering here works too)` };
   }
@@ -114,24 +179,155 @@ export function waitingSearchText(summary) {
   return parts.join(" ");
 }
 
-// The sessions that wait on the user (waitingOn) first, the rest after,
-// each part in the list's order: an answered one goes back to its place.
-// A delegated session moves with its parent when both are listed (a
-// family waits when any of it does), so withChildrenAfterParents' groups
-// stay together.
-export function waitingFirst(list) {
-  const ids = new Set(list.map((s) => s.id));
-  const family = (s) => (s.parent_id && ids.has(s.parent_id) ? s.parent_id : s.id);
-  const waiting = new Set(list.filter((s) => waitingOn(s)).map(family));
-  if (!waiting.size) return list;
-  return [...list.filter((s) => waiting.has(family(s))), ...list.filter((s) => !waiting.has(family(s)))];
+// A family's chip numbers: its members at any depth, by state, and how
+// many are live (format.js delegatesSummary, which the info bar's ⑂ chip
+// counts with too). null for a family with no members.
+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.
+export function familyOpen(f, toggles, { matched = false } = {}) {
+  if (toggles?.has(f.head.id)) return !!toggles.get(f.head.id);
+  return matched || f.members.some((m) => waitingOn(m.session));
+}
+
+// The all view's search over families: a family shows when its head or any
+// member matches (+matches+: session → bool), with all its members (the
+// rows that don't match give the context). matchIds: the members that do.
+export function filterFamilies(fams, matches) {
+  const out = [];
+  for (const f of fams) {
+    const matchIds = new Set(f.members.filter((m) => matches(m.session)).map((m) => m.session.id));
+    if (matchIds.size || matches(f.head)) out.push({ ...f, matchIds });
+  }
+  return out;
+}
+
+// The families that wait on the user (familyWaits: any member) first, the
+// rest after, each part in the order given: an answered one goes back to
+// its place. The same array when none waits.
+export function waitingFirst(fams) {
+  const waiting = fams.filter(familyWaits);
+  if (!waiting.length) return fams;
+  return [...waiting, ...fams.filter((f) => !familyWaits(f))];
 }
 
 // The list in an order shown before (+ids+): what the pointer is over
-// doesn't move. Sessions new since then go after, in the list's order;
-// gone ones drop out.
-export function heldOrder(ids, list) {
+// doesn't move. Items new since then go after, in the list's order; gone
+// ones drop out. +idOf+ names an item: a session's id, or familyId.
+export function heldOrder(ids, list, idOf = (s) => s.id) {
   const at = new Map(ids.map((id, i) => [id, i]));
-  const known = list.filter((s) => at.has(s.id)).sort((a, b) => at.get(a.id) - at.get(b.id));
-  return [...known, ...list.filter((s) => !at.has(s.id))];
+  const known = list.filter((s) => at.has(idOf(s))).sort((a, b) => at.get(idOf(a)) - at.get(idOf(b)));
+  return [...known, ...list.filter((s) => !at.has(idOf(s)))];
+}
+
+// Whether +other+ is +id+ or one of its delegates, at any depth, by the
+// list's parent_ids: an archive of +id+ stops +other+'s worker too.
+export function inTree(list, id, other) {
+  const byId = new Map(list.map((s) => [s.id, s]));
+  const seen = new Set();
+  for (let at = other; at && !seen.has(at); at = byId.get(at)?.parent_id) {
+    if (at === id) return true;
+    seen.add(at);
+  }
+  return false;
+}
+
+// ── Select mode (the all view's bulk archive) ─────────────────────────────
+
+// The ids from +fromId+ to +toId+ in a drawn order, both included, in
+// either direction: a Shift-click range. Just [toId] when +fromId+ isn't
+// drawn (no earlier pick, or it went away).
+export function rangeIds(order, fromId, toId) {
+  const to = order.indexOf(toId);
+  if (to < 0) return [];
+  const from = fromId == null ? -1 : order.indexOf(fromId);
+  if (from < 0) return [toId];
+  return from <= to ? order.slice(from, to + 1) : order.slice(to, from + 1);
+}
+
+// What a batch acts on: the picked ids that are shown, in the drawn order,
+// the not-archived ones for an archive, the archived ones for an unarchive.
+// A pick that isn't shown (the search hides it) stays picked, untouched.
+// @param picked Set of ids
+// @param shownIds the drawn order
+// @param sessionsById Map id → session summary
+export function batchTargets(picked, shownIds, archive, sessionsById) {
+  return shownIds.filter((id) => {
+    const s = sessionsById.get(id);
+    return picked.has(id) && s && !!s.archived === !archive;
+  });
+}
+
+// A refusal's reason as the card shows it: the server's words, without
+// the api() status suffix.
+function refusalText(error) {
+  return String(error?.message || "refused").replace(/\s*\(\d{3}\)$/, "");
+}
+
+// Runs +act+ over +ids+ one at a time (a live session's stop waits on the
+// server, and a parent's and its delegate's stops would race). An id an
+// earlier answer already covered (a delegate of a parent before it, in its
+// archived / unarchived / discarded list) is not sent again.
+// @param act async (id) → {ok: true, result} | {ok: false, error}
+// @param onProgress (doneCount, total) after each id
+// @return {done, covered, skipped: [{id, code, reason}], gone, affected, flipped}
+//   done: the ids a request succeeded on (what an Undo targets);
+//   covered: picked ids an earlier answer covered; gone: 404s;
+//   affected: every id the answers listed (discarded ones too);
+//   flipped: the ids archived / unarchived (not the discarded)
+export async function runBatch(ids, act, onProgress = () => {}) {
+  const out = { done: [], covered: [], skipped: [], gone: [], affected: new Set(), flipped: new Set() };
+  const targets = ids.slice();
+  for (let i = 0; i < targets.length; i++) {
+    const id = targets[i];
+    if (out.affected.has(id)) {
+      out.covered.push(id);
+    } else {
+      const answer = await act(id);
+      if (answer.ok) {
+        out.done.push(id);
+        const r = answer.result || {};
+        for (const list of [r.archived, r.unarchived]) (list || []).forEach((x) => { out.affected.add(x); out.flipped.add(x); });
+        (r.discarded || []).forEach((x) => out.affected.add(x));
+        out.affected.add(id);
+      } else if (answer.error?.status === 404) {
+        out.gone.push(id);
+      } else {
+        out.skipped.push({ id, code: answer.error?.code || null, reason: refusalText(answer.error) });
+      }
+    }
+    onProgress(i + 1, targets.length);
+  }
+  return out;
+}
+
+// The end toast of a batch: "Archived 3 (+2 delegates) · 1 skipped", or
+// "None archived: 2 skipped" when nothing went.
+// @param done the picked ids it archived (requested or covered)
+// @param delegates the others the cascade took along
+export function batchToastText({ done, delegates = 0, skipped = 0, archive }) {
+  const verb = archive ? "Archived" : "Unarchived";
+  const skippedText = `${skipped} skipped`;
+  if (!done) return `None ${verb.toLowerCase()}${skipped ? `: ${skippedText}` : ""}`;
+  const more = delegates ? ` (+${delegates} ${delegates === 1 ? "delegate" : "delegates"})` : "";
+  return `${verb} ${done}${more}${skipped ? ` · ${skippedText}` : ""}`;
+}
+
+// The numbers batchToastText takes, from runBatch's outcome.
+export function batchCounts(outcome, archive) {
+  const picked = new Set([...outcome.done, ...outcome.covered]);
+  const delegates = [...outcome.flipped].filter((id) => !picked.has(id)).length;
+  return { done: picked.size, delegates, skipped: outcome.skipped.length, archive };
 }

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

@@ -19,9 +19,12 @@ export function stripColumns(width) {
 // approval, a card), so a hidden strip still says one needs an answer.
 // Plain text parts; live and waiting are "" when none. Zero sessions keep
 // the bare label.
-export function stripShowParts(sessions) {
+// @param cards how many cards the list makes (a parent's delegates fold
+//   into its card: one), the count's number; live and waiting count every
+//   session, a waiting delegate is still one thing waiting on the user
+export function stripShowParts(sessions, { cards = null } = {}) {
   const list = sessions || [];
-  const n = list.length;
+  const n = cards ?? list.length;
   const liveN = list.filter((s) => s && s.owner === "worker").length;
   const waitingN = list.filter((s) => waitingOn(s)).length;
   return {

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

@@ -0,0 +1,107 @@
+// The turn's pieces as HTML, one builder for the live page and a reload:
+// a tool row, a prompt bubble and the notice of a turn with no answer. The
+// live page makes its elements from the same markup a reload writes
+// (htmlElement), so the two can't drift apart. Pure but htmlElement: `node --test` covers it.
+import { toolName } from "./activity.js";
+import { commandBlockHtml, rowHover } from "./command_view.js";
+import { copySourceAttr } from "./copy.js";
+import { activityDiffHtml } from "./diff_view.js";
+import { escapeHtml, userBodyHtml } from "./format.js";
+import { formatDuration } from "./timing.js";
+import { emptyAnswerLine } from "./turn_events.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), blocked (a guardrail
+// denied it), else ok ("done").
+const NAMED_STATUSES = ["running", "error", "stopped", "blocked"];
+
+// A row's status as its parts: the mark's class (CSS draws the glyph), its
+// label (aria-label and title) and the word an exception shows after the
+// title (empty for done and running).
+export function statusParts(status) {
+  const named = NAMED_STATUSES.includes(status);
+  const cls = named ? status : "ok";
+  const label = named ? status : "done";
+  return { cls, label, word: cls === "ok" || cls === "running" ? "" : label };
+}
+
+function statusMarkHtml({ cls, label }) {
+  return `<span class="activity-status ${cls}" role="img" aria-label="${label}" title="${label}"></span>`;
+}
+
+function statusWordHtml({ cls, word }) {
+  return word ? `<span class="activity-state ${cls}">${word}</span>` : "";
+}
+
+// A tool row: its status mark, tool, title (else params; the full command,
+// else the full params line, on hover), the word an exception shows, the
+// call's duration, the full command (an execute/task_create's view, also
+// while it runs), the output once done (its "[tool]" tag dropped, 300 chars,
+// the rest on hover), its images (+thumbs+(images) draws them) and an
+// edit's collapsed diff. A part with nothing to say is left out.
+export function toolRowHtml(row, { thumbs = () => "" } = {}) {
+  return `<div class="activity-row" data-key="${escapeHtml(row.key)}">${toolRowInnerHtml(row, { thumbs })}</div>`;
+}
+
+export function toolRowInnerHtml(row, { thumbs = () => "" } = {}) {
+  const shown = row.title || row.params;
+  const hover = rowHover(row) ? ` title="${escapeHtml(rowHover(row))}"` : "";
+  const params = shown ? `<span class="activity-params"${hover}>${escapeHtml(shown)}</span>` : "";
+  const duration = formatDuration(row.duration_ms);
+  const full = row.status === "running" ? "" : String(row.output || "").replace(/^\[[^\]]*\]\s*/, "");
+  const output = full
+    ? `<div class="activity-output" title="${escapeHtml(full)}">${escapeHtml(full.length > 300 ? `${full.slice(0, 300)}…` : full)}</div>`
+    : "";
+  const status = statusParts(row.status);
+  return `${statusMarkHtml(status)}<span class="activity-tool">${escapeHtml(toolName(row))}</span>${params}${statusWordHtml(status)}` +
+    `${duration ? `<span class="activity-duration">${escapeHtml(duration)}</span>` : ""}` +
+    `${commandBlockHtml(row.view, row.title)}${output}` +
+    `${row.images?.length ? thumbs(row.images) : ""}${row.diff ? activityDiffHtml(row.diff) : ""}`;
+}
+
+// A prompt bubble's states and their badges: queued (waiting for its
+// turn), steered (merged into a running turn), failed (its turn raised and
+// gave it back). Any other state ("started", none) is a plain bubble.
+export const BADGES = { queued: "queued", steered: "steered", failed: "failed" };
+
+export function stateBadgeHtml(state) {
+  return BADGES[state] ? `<span class="state-badge">${escapeHtml(BADGES[state])}</span>` : "";
+}
+
+// A user's line: who sent it (+label+, a delegate report's or another
+// client's), its body (`>` lines as quotes) and +thumbs+ (its images'
+// markup), its state's badge. +message+: { content, display } (the copy
+// source keeps the text as written). +step+: the step that read a line
+// merged mid-turn (a reload's; a resolved question goes before it).
+// The live page's own: +own+ (this tab sent it), +enqueuedId+ and +key+
+// (its normalized text: an echo waiting for its id is matched by it).
+export function userBubbleHtml(message, { label = null, state = null, step = null, thumbs = "", own = false, enqueuedId = null, key = null } = {}) {
+  const named = BADGES[state] ? state : null;
+  const attrs = [
+    `class="bubble user${named ? ` ${named}` : ""}"`,
+    named ? `data-user-state="${named}"` : "",
+    step ? `data-step="${Number(step)}"` : "",
+  ].filter(Boolean).join(" ");
+  const live = [
+    key !== null ? ` data-user-content="${escapeHtml(key)}"` : "",
+    own ? ' data-own="1"' : "",
+    enqueuedId ? ` data-enqueued-id="${escapeHtml(enqueuedId)}"` : "",
+  ].join("");
+  const from = label ? `<span class="origin-label">${escapeHtml(label)}</span>` : "";
+  return `<div ${attrs}${copySourceAttr({ ...message, role: "user" }, false)}${live}>${from}` +
+    `<div class="user-message">${userBodyHtml(message?.content)}${thumbs}</div>${stateBadgeHtml(named)}</div>`;
+}
+
+// The notice of a turn that ended with no answer (the server's
+// empty_answer item, turn_summary.empty_answer live): a muted row like the
+// loop's retry row, where the answer would be.
+export function emptyAnswerHtml(item) {
+  return `<div class="bubble hook-notice empty-answer">${escapeHtml(emptyAnswerLine(item))}</div>`;
+}
+
+// The element +html+ (one top-level element) describes.
+export function htmlElement(html) {
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  return template.content.firstElementChild;
+}

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

@@ -117,12 +117,13 @@ function toolEvent(turn, event, add) {
   return { ...r, row };
 }
 
-export function toolStarted(turn, event) {
-  return toolEvent(turn, event, (model, e) => addStarted(model, e).row);
+// +now+: when the page got the event, for the call's duration (activity.js).
+export function toolStarted(turn, event, now = null) {
+  return toolEvent(turn, event, (model, e) => addStarted(model, e, now).row);
 }
 
-export function toolCompleted(turn, event) {
-  return toolEvent(turn, event, addCompleted);
+export function toolCompleted(turn, event, now = null) {
+  return toolEvent(turn, event, (model, e) => addCompleted(model, e, now));
 }
 
 // A hook's line to the user, in the current step; null with no running