samagotchi 0.34.0 → 0.36.0

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

@@ -81,14 +81,23 @@ export function cardPlace(userBubbles, card) {
   return recapPlace(userBubbles, card?.turns_since);
 }
 
+// Whether a notice stands in for something this page already shows: its
+// fallback_for names a capability the server says the page has (the
+// session JSON's capabilities, e.g. { display: true } when answers render
+// as markdown, so a hook's links are links). Such a notice isn't drawn.
+export function shownElsewhere(notice, capabilities) {
+  return !!notice?.fallback_for && capabilities?.[notice.fallback_for] === true;
+}
+
 // A snapshot's cards: the ones placed in the history, the running turn's
 // (a row of its current step once the turn is drawn), and the ones that
 // came during the running turn but aren't its own (an anytime command's,
 // such as /btw: after the running turn once it is drawn, as they came).
 // The running turn's own rows (a hook's notice, a retry) are left out:
-// they come with the turn's parts (snapshotEvents).
-export function splitSnapshotCards(cards) {
-  const list = Array.isArray(cards) ? cards : [];
+// they come with the turn's parts (snapshotEvents). So is a notice the
+// page shows elsewhere (shownElsewhere).
+export function splitSnapshotCards(cards, capabilities = null) {
+  const list = (Array.isArray(cards) ? cards : []).filter((c) => !shownElsewhere(c, capabilities));
   return {
     placed: list.filter((c) => !c.current && !c.during),
     current: list.filter((c) => c.current && isCard(c)),

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

@@ -1,8 +1,7 @@
 // A tool call's full command in a richer UI than the TUI's params line:
 // the server's view (ToolView: an execute/task_create's command uncut up to
-// 8,000 chars, the call's cwd: argument). Pure HTML builders, shared by the
-// live row (turn_view.js fillActivityRow) and the reloaded one
-// (reloadRowHtml), so the two can't differ.
+// 8,000 chars, the call's cwd: argument). Pure HTML builders for the tool
+// row (turn_html.js toolRowHtml, live and reloaded alike).
 import { copyButtonHtml } from "./copy.js";
 import { escapeHtml } from "./format.js";
 

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

@@ -0,0 +1,171 @@
+// A parent's card with its delegates folded in (docs/sessions.md, the web):
+// the chip that opens the family's list, and the list's rows. Pure string
+// builders; app.js places them (inline in all sessions, a popover over the
+// strip) and binds the clicks.
+import { escapeHtml, ownerBadge, previewForCard, relativeTime } from "./format.js";
+import { familySummary, stoppedBadge, waitingBadge } from "./sessions_list.js";
+
+// The chip in a parent's meta row: "▸ 3 delegates · ● 1 live · 1 waiting"
+// (a waiting one in the attention colour), its tooltip the delegates by
+// state. "" for a family with no members.
+// @param open whether the list is open (aria-expanded; the arrow turns)
+export function familyChipHtml(f, { open = false } = {}) {
+  const sum = familySummary(f);
+  if (!sum) return "";
+  const waiting = sum.counts.waiting;
+  const liveHtml = sum.live ? `<span class="fc-live"> · <span class="live-dot" aria-hidden="true"></span>${sum.live} live</span>` : "";
+  const waitingHtml = waiting ? ` · <span class="fc-waiting">${waiting} waiting</span>` : "";
+  return `<button type="button" class="family-chip${waiting ? " waiting" : ""}" aria-expanded="${open ? "true" : "false"}" title="${escapeHtml(sum.title)}"><span class="fc-arrow" aria-hidden="true">▸</span>${sum.total} ${sum.total === 1 ? "delegate" : "delegates"}${liveHtml}${waitingHtml}</button>`;
+}
+
+// The family's list: one row per member, depth first, indented one step
+// per depth (--depth): status dot, preview, time, the waiting / stopped
+// badge, the owner badge, archived. A row's click opens that session.
+// @param activeId the open session's id (its row is .active)
+// @param matchIds a search's matching members (.match; the rest .dim), or
+//   null without a search
+// @param archivable an archive button per row (all sessions, not in select mode)
+export function familyRowsHtml(f, { activeId = null, matchIds = null, archivable = false, now = Date.now() } = {}) {
+  const rows = f.members.map(({ session: s, depth }) => {
+    const cls = ["family-row"];
+    if (activeId && s.id === activeId) cls.push("active");
+    if (matchIds) cls.push(matchIds.has(s.id) ? "match" : "dim");
+    if (s.archived) cls.push("archived");
+    const ts = s.updated_at || s.created_at || "";
+    const waiting = waitingBadge(s, { inFamily: true });
+    const stopped = waiting ? null : stoppedBadge(s);
+    const owner = ownerBadge(s.owner, s.id);
+    const ago = relativeTime(ts, now);
+    const dotWord = waiting ? waiting.title : s.status;
+    const parts = [
+      `<span class="status dot ${escapeHtml(s.status || "")}${waiting ? " waiting" : ""}" title="${escapeHtml(dotWord || "")}" aria-label="${escapeHtml(dotWord || "")}"></span>`,
+      `<span class="fr-preview">${escapeHtml(previewForCard(s))}</span>`,
+      waiting ? `<span class="attn attn-${waiting.kind}" title="${escapeHtml(waiting.title)}">${escapeHtml(waiting.text)}</span>` : "",
+      stopped ? `<span class="stopped-badge" title="${escapeHtml(stopped.title)}">${escapeHtml(stopped.text)}</span>` : "",
+      ago ? `<span class="time">${escapeHtml(ago)}</span>` : "",
+      owner ? `<span class="owner ${owner.kind}" title="${escapeHtml(owner.title)}">${escapeHtml(owner.text)}</span>` : "",
+      s.archived ? `<span class="archived-badge" title="Archived: hidden from the lists, kept for good">archived</span>` : "",
+    ].join("");
+    const short = escapeHtml(s.short_id || String(s.id).slice(0, 8));
+    const arch = !archivable ? "" : s.archived
+      ? `<button type="button" class="card-arch" data-arch="${escapeHtml(s.id)}" title="Unarchive: back to the lists" aria-label="Unarchive session ${short}"></button>`
+      : `<button type="button" class="card-arch" data-arch="${escapeHtml(s.id)}" title="Archive: hide from the lists, keep for good" aria-label="Archive session ${short}"></button>`;
+    return `<div class="${cls.join(" ")}" data-id="${escapeHtml(s.id)}" style="--depth:${depth}" role="listitem"><button type="button" class="fr-open" title="${escapeHtml(`${s.id} · ${s.status || ""}`)}">${parts}</button>${arch}</div>`;
+  });
+  return `<div class="family-rows" role="list">${rows.join("")}</div>`;
+}
+
+// The widest window index.html lays out as a phone (@media (max-width:600px)).
+export const PHONE_MAX_PX = 600;
+
+// The strip's family popover: one #familyPop in body (position: fixed, so
+// the strip's sideways scroll on a phone doesn't clip it), under the chip
+// it was opened from and as wide as that card (300 px at least, inside the
+// window; on a phone, the window less 16 px gutters). The strip draws again on every hub event: refresh() then finds
+// the new chip for the same head, rewrites the rows only when they changed,
+// and closes when the family is gone.
+// @param rowsFor (headId) → the rows' html, or null when the family has no
+//   members (any more)
+// @param anchorFor (headId) → its chip in the strip, or null
+// @param onPick (id) a row's click
+// @param onClose () after it closed (the strip's held order catches up)
+export function createFamilyPop({ doc, win, rowsFor, anchorFor, onPick, onClose = () => {} }) {
+  let el = null;
+  let headId = null;
+  let html = "";
+
+  const element = () => {
+    if (el) return el;
+    el = doc.createElement("div");
+    el.id = "familyPop";
+    el.className = "family-pop";
+    el.hidden = true;
+    el.addEventListener("click", (e) => {
+      const row = e.target?.closest?.(".family-row[data-id]");
+      if (row) onPick(row.dataset.id);
+    });
+    doc.body.appendChild(el);
+    return el;
+  };
+
+  const place = (anchor) => {
+    const chip = anchor.getBoundingClientRect();
+    const card = (anchor.closest(".card") || anchor).getBoundingClientRect();
+    const vw = win.innerWidth;
+    // A phone (index.html's 600 px layout): the width minus 16 px gutters.
+    const phone = vw <= PHONE_MAX_PX;
+    const width = phone ? vw - 32 : Math.max(300, Math.round(card.width));
+    const left = phone ? 16 : Math.max(8, Math.min(Math.round(card.left), vw - width - 8));
+    el.style.top = `${Math.round(chip.bottom + 6)}px`;
+    el.style.left = `${left}px`;
+    el.style.width = `${width}px`;
+  };
+
+  // Draws the open family again: false (and closed) when it is gone.
+  const draw = () => {
+    const rows = rowsFor(headId);
+    const anchor = rows == null ? null : anchorFor(headId);
+    if (!anchor) {
+      close();
+      return false;
+    }
+    if (rows !== html) {
+      el.innerHTML = rows;
+      html = rows;
+    }
+    anchor.setAttribute("aria-expanded", "true");
+    place(anchor);
+    return true;
+  };
+
+  function open(id) {
+    if (headId && headId !== id) close();
+    headId = id;
+    element().hidden = false;
+    html = "";
+    draw();
+  }
+
+  function close() {
+    if (!headId) return;
+    anchorFor(headId)?.setAttribute("aria-expanded", "false");
+    headId = null;
+    html = "";
+    el.hidden = true;
+    el.innerHTML = "";
+    onClose();
+  }
+
+  return {
+    open,
+    close,
+    toggle: (id) => (headId === id ? close() : open(id)),
+    isOpen: () => headId != null,
+    openHead: () => headId,
+    // After the strip drew again.
+    refresh: () => { if (headId) draw(); },
+    // The page scrolled or resized under it.
+    reposition: () => {
+      const anchor = headId && anchorFor(headId);
+      if (anchor) place(anchor);
+    },
+    // Esc closes it, before any other Esc handler (app.js listens in the
+    // capture phase): true when it did.
+    onKeydown(e) {
+      if (!headId || e.key !== "Escape") return false;
+      const id = headId;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      e.stopPropagation();
+      close();
+      anchorFor(id)?.focus(); // the chip as drawn after close() (a held strip catches up)
+      return true;
+    },
+    // A pointer down outside it and its chip closes it.
+    onPointerDown(e) {
+      if (!headId || el.contains(e.target)) return;
+      if (anchorFor(headId)?.contains(e.target)) return;
+      close();
+    },
+  };
+}

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

@@ -1,3 +1,5 @@
+import { waitingOn } from "./notify.js";
+
 export const PREVIEW_CHARS = 40;
 export const FIRST_PREVIEW_CHARS = 80;
 
@@ -141,6 +143,56 @@ export function delegatedBy(parentId, parent = null) {
   return { text: `\u21B3 ${short}`, title: `delegated by session ${short}${what ? `: ${what}` : ""}` };
 }
 
+// A child's state for the parent's children chip, decided in
+// ChildrenStatus's order: waiting on the user (a question, an approval, a
+// card), running, stopped, failed, done (the last turn completed), idle.
+// The hub has no reply files, so "done" doesn't say whether the parent was
+// given the reply ("not reported" is the TUI's and /children's).
+const CHILD_STATES = ["running", "waiting", "done", "failed", "stopped", "idle"];
+function childState(s) {
+  if (waitingOn(s)) return "waiting";
+  if (s.status === "running") return "running";
+  if (s.status === "stopped") return "stopped";
+  const outcome = s.last_turn?.outcome;
+  if (s.status === "error" || outcome === "failed") return "failed";
+  if (outcome === "completed") return "done";
+  return "idle";
+}
+
+// Delegates by state: the one counter behind the parent's `⑂ N` chip (the
+// info bar) and its card's family chip. live: how many a worker runs now
+// (owner "worker", the cards' green badge), whatever their state.
+// @param kids the delegates' summaries
+// @return null for none, else {total, counts, live, text, waitingText,
+//   title}; waitingText ("2 waiting") is for the attention colour, null when
+//   none waits
+export function delegatesSummary(kids) {
+  const list = (kids || []).filter(Boolean);
+  if (!list.length) return null;
+  const counts = Object.fromEntries(CHILD_STATES.map((k) => [k, 0]));
+  list.forEach((s) => { counts[childState(s)] += 1; });
+  const parts = CHILD_STATES.filter((k) => counts[k]).map((k) => `${counts[k]} ${k}`);
+  const total = list.length;
+  return {
+    total,
+    counts,
+    live: list.filter((s) => s.owner === "worker").length,
+    text: `\u2442 ${total}`,
+    waitingText: counts.waiting ? `${counts.waiting} waiting` : null,
+    title: `${total} ${total === 1 ? "delegate" : "delegates"}: ${parts.join(" \u00b7 ")}`,
+  };
+}
+
+// The parent's `⑂ N` chip (the info bar): its delegates in the list, by
+// state (delegatesSummary). Forks (delegate false) and archived children are
+// left out, as in the TUI's segment (ChildrenStatus.counts).
+// @param parent the parent's summary
+// @param sessions the page's list (allSessions: archived ones too)
+export function childrenSummary(parent, sessions) {
+  if (!parent?.id) return null;
+  return delegatesSummary((sessions || []).filter((s) => s && s.parent_id === parent.id && s.delegate && !s.archived && s.id !== parent.id));
+}
+
 // Whether the info bar offers "stop": only while a worker runs the session
 // (the list says so, or this page streams from one a send just woke). A
 // stopped or idle-exited session has nothing to stop, and a chi REPL's is

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

@@ -5,23 +5,27 @@
 <title>Chi</title>
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <style>
-:root{color-scheme:dark;--bg:#0b0d11;--bg-panel:#151821;--bg-inset:#0f1115;--bg-raised:#22262f;--bg-hover:#1b1f27;--border:#1f232b;--border-strong:#2d333f;--text:#e6e8eb;--text-bright:#f0f3f6;--text-2:#c9d1d9;--text-3:#9aa4b2;--text-muted:#8b949e;--text-faint:#6e7681;--accent:#7aa5ff;--accent-strong:#1f6feb;--accent-bg:#1b2336;--accent-ring:rgba(122,165,255,.18);--primary:#2a68d1;--ok:#3fb950;--ok-text:#7ee787;--ok-bg:#1a2e1a;--warn:#d29922;--warn-text:#e3b341;--warn-bright:#f2cc60;--warn-bg:#2b2108;--warn-border:#6b5416;--danger:#f85149;--danger-bg:#da3633;--danger-text:#ff7b72;--danger-bg-dim:#3d1f1f;--think:#8957e5;--think-text:#d2a8ff;--accent-border:#223150;--accent-tint:color-mix(in srgb,var(--accent) 7%,transparent);--narr:color-mix(in srgb,var(--accent) 38%,var(--text-muted));
+:root{color-scheme:dark;--bg:#0b0d11;--bg-panel:#151821;--bg-inset:#0f1115;--bg-raised:#22262f;--bg-hover:#1b1f27;--border:#1f232b;--border-strong:#2d333f;--text:#e6e8eb;--text-bright:#f0f3f6;--text-2:#c9d1d9;--text-3:#9aa4b2;--text-muted:#8b949e;--text-faint:#6e7681;--accent:#7aa5ff;--accent-strong:#1f6feb;--accent-bg:#1b2336;--accent-ring:rgba(122,165,255,.18);--primary:#2a68d1;--ok:#3fb950;--ok-text:#7ee787;--ok-bg:#1a2e1a;--warn:#d29922;--warn-text:#e3b341;--warn-bright:#f2cc60;--warn-bg:#2b2108;--warn-border:#6b5416;--danger:#f85149;--danger-bg:#da3633;--danger-text:#ff7b72;--danger-bg-dim:#3d1f1f;--think:#8957e5;--think-text:#d2a8ff;--accent-border:#223150;--pick-border:#79c0ff;--accent-tint:color-mix(in srgb,var(--accent) 7%,transparent);--narr:color-mix(in srgb,var(--accent) 38%,var(--text-muted));
   --glass-bg:color-mix(in srgb,var(--bg-panel) 70%,transparent);--glass-border:rgba(255,255,255,.08);--glass-highlight:rgba(255,255,255,.05);--glass-shadow:0 8px 30px rgba(0,0,0,.35);
   --diff-add-bg:rgba(63,185,80,.14);--diff-add-text:#aff5b4;--diff-del-bg:rgba(248,81,73,.14);--diff-del-text:#ffc1bc;
   --code-text:#c9d1d9;--code-keyword:#ff7b72;--code-string:#a5d6ff;--code-comment:#8b949e;--code-constant:#79c0ff;--code-func:#d2a8ff;--code-type:#ffa657;
   --card-hover-border:rgba(255,255,255,.14);--on-solid:#fff;--on-warn:#fff;--text-hover:#fff;--badge-bg:rgba(255,255,255,.08);--badge-ring:rgba(255,255,255,.18);--shadow-strong:rgba(0,0,0,.5);--backdrop:rgba(0,0,0,.85);--toast-shadow:0 6px 24px rgba(0,0,0,.25)}
 /* Light palette: follows the system setting. :not([data-theme="dark"]) leaves room for a later in-page toggle (data-theme on <html>); there is none yet. Each palette sets color-scheme, so native radios, inputs and scrollbars follow it. */
-@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){color-scheme:light;--bg:#f5f6f8;--bg-panel:#ffffff;--bg-inset:#f1f3f6;--bg-raised:#e8ebf0;--bg-hover:#eceff4;--border:#dde1e7;--border-strong:#c3c9d2;--text:#1f2328;--text-bright:#0d1117;--text-2:#2f363d;--text-3:#475160;--text-muted:#57606a;--text-faint:#636c76;--accent:#0b5cd5;--accent-strong:#0550ae;--accent-bg:#e2ecfd;--accent-ring:rgba(11,92,213,.2);--primary:#1f6feb;--ok:#1a7f37;--ok-text:#116329;--ok-bg:#dafbe1;--warn:#9a6700;--warn-text:#7d4e00;--warn-bright:#875c00;--warn-bg:#fff6cc;--warn-border:#d4a72c;--danger:#cf222e;--danger-bg:#cf222e;--danger-text:#a40e26;--danger-bg-dim:#ffebe9;--think:#8250df;--think-text:#6639ba;--accent-border:#b8cef5;
+@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){color-scheme:light;--bg:#f5f6f8;--bg-panel:#ffffff;--bg-inset:#f1f3f6;--bg-raised:#e8ebf0;--bg-hover:#eceff4;--border:#dde1e7;--border-strong:#c3c9d2;--text:#1f2328;--text-bright:#0d1117;--text-2:#2f363d;--text-3:#475160;--text-muted:#57606a;--text-faint:#636c76;--accent:#0b5cd5;--accent-strong:#0550ae;--accent-bg:#e2ecfd;--accent-ring:rgba(11,92,213,.2);--primary:#1f6feb;--ok:#1a7f37;--ok-text:#116329;--ok-bg:#dafbe1;--warn:#9a6700;--warn-text:#7d4e00;--warn-bright:#875c00;--warn-bg:#fff6cc;--warn-border:#d4a72c;--danger:#cf222e;--danger-bg:#cf222e;--danger-text:#a40e26;--danger-bg-dim:#ffebe9;--think:#8250df;--think-text:#6639ba;--accent-border:#b8cef5;--pick-border:#0969da;
   --glass-border:rgba(31,35,40,.10);--glass-highlight:rgba(255,255,255,.7);--glass-shadow:0 8px 30px rgba(31,35,40,.10);
   --diff-add-bg:rgba(26,127,55,.12);--diff-add-text:#116329;--diff-del-bg:rgba(207,34,46,.10);--diff-del-text:#82071e;
   --code-text:#1f2328;--code-keyword:#cf222e;--code-string:#0a3069;--code-comment:#57606a;--code-constant:#0550ae;--code-func:#8250df;--code-type:#953800;
   --card-hover-border:rgba(31,35,40,.18);--on-solid:#fff;--on-warn:#1f2328;--text-hover:#0d1117;--badge-bg:rgba(31,35,40,.06);--badge-ring:rgba(31,35,40,.15);--shadow-strong:rgba(31,35,40,.18);--backdrop:rgba(13,17,23,.85);--toast-shadow:0 6px 24px rgba(31,35,40,.14)}}
+/* Icon masks shared by the phone info bar and the all view's cards (the stroke only shapes the mask; the icon takes currentColor). */
+:root{--icon-archive:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.75' width='12' height='3.5' rx='1'/%3E%3Cpath d='M3.25 6.25v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1v-6M6.5 9h3'/%3E%3C/svg%3E");--icon-unarchive:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.75' width='12' height='3.5' rx='1'/%3E%3Cpath d='M3.25 6.25v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1v-6M8 11.5V8.25M6.5 9.75 8 8.25l1.5 1.5'/%3E%3C/svg%3E")}
 *{box-sizing:border-box;margin:0;padding:0}
 body{font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1100px 700px at 8% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%),radial-gradient(900px 700px at 100% 100%,color-mix(in srgb,var(--think) 9%,transparent),transparent 70%),var(--bg);background-attachment:fixed;color:var(--text);height:100vh;display:flex;flex-direction:column}
 /* Glass: the composer card, the strip cards, the all-sessions cards and the question cards (by selector, so app.js is untouched). */
 #dock,.turn-stage,.dock-card,#topStrip .card,#allList .card,.bubble.question,.bubble.plugin-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow)}
 #topStrip .card:hover,#allList .card:hover{background:color-mix(in srgb,var(--bg-hover) 75%,transparent);border-color:var(--card-hover-border)}
 #topStrip .card.active,#allList .card.active{background:color-mix(in srgb,var(--accent-bg) 75%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
+/* A parent whose folded family holds the open session: a quieter mark than .active. */
+#topStrip .card.contains-active,#allList .card.contains-active{border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
 /* A session that waits on the user (a question, an approval, a card with actions): the warning colour of its question card, also when active or hovered. */
 #topStrip .card.waiting,#allList .card.waiting{border-color:color-mix(in srgb,var(--warn) 75%,transparent)}
 #topStrip .card.waiting:hover,#allList .card.waiting:hover{border-color:var(--warn)}
@@ -727,6 +731,8 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
   #infoBar .meta .status{order:-1}
   /* After the status (same order, later in the DOM): the meta scrolls, and only its start is in sight. */
   #infoBar .meta .mem-chip{display:inline;order:-1}
+  /* A parent's children chip too: its waiting part is what to see. */
+  #infoBar .meta .children-chip{order:-1}
   /* The chips get a second line of their own (only when there are some), scrolling sideways. */
   #infoBar:has(#contextChips:not([hidden])){flex-wrap:wrap;row-gap:4px}
   #contextChips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
@@ -738,8 +744,8 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
   /* Icon-only buttons (the words stay as the accessible name, the title says more): the meta gets the width. */
   #infoBar>button{font-size:0;line-height:0;padding:5px 7px}
   #infoBar>button::before{content:"";display:block;width:14px;height:14px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
-  #infoBar #infoArchiveBtn{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.75' width='12' height='3.5' rx='1'/%3E%3Cpath d='M3.25 6.25v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1v-6M6.5 9h3'/%3E%3C/svg%3E")}
-  #infoBar #infoArchiveBtn.archived{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.75' width='12' height='3.5' rx='1'/%3E%3Cpath d='M3.25 6.25v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1v-6M8 11.5V8.25M6.5 9.75 8 8.25l1.5 1.5'/%3E%3C/svg%3E")}
+  #infoBar #infoArchiveBtn{--icon:var(--icon-archive)}
+  #infoBar #infoArchiveBtn.archived{--icon:var(--icon-unarchive)}
   #infoBar #infoStopBtn{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v5.5M4.6 4.4a5 5 0 1 0 6.8 0'/%3E%3C/svg%3E")}
   #infoBar #infoDeleteBtn{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5h11M6 4.5V2.75h4V4.5M4 4.5l.7 8.6a1 1 0 0 0 1 .9h4.6a1 1 0 0 0 1-.9l.7-8.6M6.75 7.25v4.5M9.25 7.25v4.5'/%3E%3C/svg%3E")}
 }
@@ -803,6 +809,46 @@ body.has-session #scope .scope-where{display:none}
 .card .parent{font-family:ui-monospace,monospace;white-space:nowrap;color:var(--text-3)}
 #infoBar .meta a.parent{text-decoration:none}
 #infoBar .meta a.parent:hover{color:var(--accent)}
+/* The strip's family popover (in body, position: fixed: the strip's sideways scroll on a phone would clip it), glass as the cards. */
+#familyPop{position:fixed;z-index:40;max-height:50vh;overflow:auto;padding:6px;border-radius:10px;background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow)}
+#familyPop[hidden]{display:none}
+#familyPop .family-rows{border-top:0;margin:0;padding-top:0}
+@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#familyPop{background:var(--bg-panel)}}
+@media (prefers-reduced-transparency:reduce){#familyPop{background:var(--bg-panel);-webkit-backdrop-filter:none;backdrop-filter:none}}
+body.no-glass #familyPop{background:var(--bg-panel);-webkit-backdrop-filter:none;backdrop-filter:none}
+/* A parent's family chip: its delegates folded into its card; a click opens or closes their list. */
+/* A card with a family chip lets its meta row wrap: the chip goes to a line of its own when the card is narrow. */
+.card .meta:has(.family-chip){flex-wrap:wrap;row-gap:4px}
+.card .family-chip{font-family:ui-monospace,monospace;font-size:11px;line-height:1.4;white-space:nowrap;flex-shrink:0;padding:1px 7px;border-radius:999px;border:1px solid var(--border-strong);background:transparent;color:var(--text-3);cursor:pointer}
+.card .family-chip:hover:not(:disabled){filter:none;color:var(--accent);border-color:var(--accent-border);background:var(--accent-bg)}
+.card .family-chip.waiting{color:var(--warn-text);background:var(--warn-bg);border-color:var(--warn-border)}
+.card .family-chip.waiting:hover:not(:disabled){color:var(--warn-bright);border-color:var(--warn);background:var(--warn-bg)}
+.family-chip .fc-arrow{display:inline-block;margin-right:4px;transition:transform .15s ease}
+.family-chip[aria-expanded="true"] .fc-arrow{transform:rotate(90deg)}
+.family-chip .live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:3px;vertical-align:1px}
+.family-chip .fc-waiting{font-family:system-ui,sans-serif;font-weight:600}
+/* The family's list: one compact row per delegate, indented per depth. */
+.family-rows{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--border);margin:2px -6px 0;padding-top:4px;cursor:default}
+.family-row{display:flex;align-items:center;border-radius:6px;padding-left:calc((var(--depth,1) - 1) * 14px)}
+.family-row:hover{background:var(--bg-hover)}
+.family-row .fr-open{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:6px;background:transparent;color:var(--text-2);border-radius:6px;font-size:12px;line-height:1.3;text-align:left}
+.family-row .fr-open:hover:not(:disabled){filter:none}
+.family-row .fr-preview{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.family-row .time{font-size:11px;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
+.family-row.active{background:var(--accent-bg)}
+.family-row.active .fr-preview{color:var(--text-bright)}
+.family-row.dim{opacity:.5}
+.family-row.match .fr-preview{color:var(--text-bright);font-weight:600}
+.family-row.archived{opacity:.6}
+.family-row .card-arch{flex-shrink:0;padding:4px 7px;margin-right:2px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--text-muted);opacity:0;transition:opacity .15s}
+.family-row:hover .card-arch,.family-row .card-arch:focus-visible{opacity:1}
+.card .family-row .card-arch::before{-webkit-mask-image:var(--icon-archive);mask-image:var(--icon-archive)}
+.card .family-row.archived .card-arch::before{-webkit-mask-image:var(--icon-unarchive);mask-image:var(--icon-unarchive)}
+@media (hover:none){.family-row .card-arch{opacity:1}}
+.children-chip .kids-waiting{font-family:system-ui,sans-serif;font-weight:600;color:var(--warn-text)}
+#infoBar .meta a.children-chip{text-decoration:none;font-family:ui-monospace,monospace;white-space:nowrap}
+#infoBar .meta a.children-chip:hover{color:var(--accent)}
+#infoBar .meta a.children-chip.waiting{background:var(--warn-bg);border:1px solid var(--warn-border);padding:1px 6px}
 .scope-error{grid-column:1/-1;font-size:13px;color:var(--warn-text)}
 .strip-toggle{font-size:11px;padding:3px 10px;background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:999px}
 .strip-toggle:hover{color:var(--text-2);border-color:var(--border-strong)}
@@ -835,10 +881,22 @@ 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 #selectBtn{padding:6px 10px;font-size:12px}
+#selectBar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
+#selectBar[hidden],#selectBtn[hidden],#selectBar [hidden]{display:none}
+#selectBar button{padding:6px 10px;font-size:12px;white-space:nowrap}
+#selectBar button:disabled{opacity:.5;cursor:default}
+#selectCount{font-size:12px;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums;margin-right:2px}
+/* Select mode: a checkbox at the card's top left; a pick wears its own outline (.active is the open session's). */
+#allView.selecting #allList .card{padding-left:38px;user-select:none}
+#allList .card-pick{position:absolute;top:13px;left:13px;width:16px;height:16px;margin:0;accent-color:var(--pick-border);cursor:pointer}
+#allList .card.picked,#allList .card.picked:hover{border-color:var(--pick-border);box-shadow:inset 0 0 0 1px var(--pick-border),var(--glass-shadow);background:color-mix(in srgb,var(--pick-border) 9%,var(--glass-bg))}
+.card .skip-reason{font-size:11px;line-height:1.35;color:var(--warn-text);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;word-break:break-word}
+@media(max-width:600px){#allHead{flex-wrap:wrap}#allHead input#filter{flex-basis:140px}#allView.selecting #allHead .count{display:none}#selectBar{flex-basis:100%;order:5}#selectCount{flex-basis:100%}#allList .card-pick{width:20px;height:20px;top:12px;left:11px}}
 #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)}
+.card .archived-badge,.family-row .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%);width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;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:var(--toast-shadow);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}
@@ -855,10 +913,17 @@ body.all-view #center, body.all-view #topStrip{display:none}
 .card{padding:12px;border-radius:10px;background:var(--bg-panel);border:1px solid var(--border);cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:72px}
 .card:hover{border-color:var(--border-strong);background:var(--bg-hover)}
 #allList .card{position:relative}
-.card-del{position:absolute;top:6px;right:6px;padding:2px 7px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--text-muted);font-size:12px;line-height:1.2;cursor:pointer;opacity:0;transition:opacity .15s}
-#allList .card:hover .card-del, .card-del:focus-visible{opacity:1}
+/* A card's tools in the all view: archive (or unarchive) and delete, shown on hover, always under hover:none. */
+#allList .card-tools{position:absolute;top:6px;right:6px;display:flex;gap:2px}
+.card-tools button{padding:2px 7px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--text-muted);font-size:12px;line-height:1.2;cursor:pointer;opacity:0;transition:opacity .15s}
+#allList .card:hover .card-tools button, .card-tools button:focus-visible{opacity:1}
 .card-del:hover{color:var(--on-solid);background:var(--danger-bg);border-color:var(--danger-bg)}
-@media (hover:none){.card-del{opacity:1}}
+.card-arch{display:flex;align-items:center}
+.card-arch::before{content:"";display:block;width:14px;height:14px;background:currentColor;-webkit-mask:var(--icon-archive) center/contain no-repeat;mask:var(--icon-archive) center/contain no-repeat}
+.card.archived .card-arch::before{-webkit-mask-image:var(--icon-unarchive);mask-image:var(--icon-unarchive)}
+.card-arch:hover{color:var(--accent);background:var(--accent-bg);border-color:var(--accent-border)}
+#allList .card:has(.card-tools) .preview{padding-right:56px}
+@media (hover:none){.card-tools button{opacity:1}}
 .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}
@@ -868,25 +933,25 @@ body.all-view #center, body.all-view #topStrip{display:none}
 .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}
 .card .meta{font-size:11px;color:var(--text-muted);display:flex;gap:6px;align-items:center}
 /* A card's status is a dot (its word is the tooltip); the .status.* pills below are the info bar's. */
-.card .dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--text-muted)}
-.card .dot.running{background:var(--ok);animation:dot-pulse 1.6s ease-in-out infinite}
-.card .dot.idle{background:var(--text-muted)}
-.card .dot.stopped{background:transparent;border:1px solid var(--text-faint)}
-.card .dot.completed{background:var(--accent)}
-.card .dot.error{background:var(--danger)}
+.card .dot,.family-row .dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--text-muted)}
+.card .dot.running,.family-row .dot.running{background:var(--ok);animation:dot-pulse 1.6s ease-in-out infinite}
+.card .dot.idle,.family-row .dot.idle{background:var(--text-muted)}
+.card .dot.stopped,.family-row .dot.stopped{background:transparent;border:1px solid var(--text-faint)}
+.card .dot.completed,.family-row .dot.completed{background:var(--accent)}
+.card .dot.error,.family-row .dot.error{background:var(--danger)}
 @keyframes dot-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 0%,transparent)}}
-.card .dot.waiting{background:var(--warn);animation:attn-pulse 1.6s ease-in-out infinite}
+.card .dot.waiting,.family-row .dot.waiting{background:var(--warn);animation:attn-pulse 1.6s ease-in-out infinite}
 @keyframes attn-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 60%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 0%,transparent)}}
-@media (prefers-reduced-motion:reduce){.card .dot.running,.card .dot.waiting{animation:none}}
-.card .attn{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;white-space:nowrap;flex-shrink:0;background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-border)}
-.card .stopped-badge{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;white-space:nowrap;flex-shrink:0;background:var(--warn);color:var(--bg)}
+@media (prefers-reduced-motion:reduce){.card .dot.running,.card .dot.waiting,.family-row .dot.running,.family-row .dot.waiting{animation:none}}
+.card .attn,.family-row .attn{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;white-space:nowrap;flex-shrink:0;background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-border)}
+.card .stopped-badge,.family-row .stopped-badge{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;white-space:nowrap;flex-shrink:0;background:var(--warn);color:var(--bg)}
 .status.running{background:var(--ok-bg);color:var(--ok-text)}
 .status.idle{background:var(--bg-raised)}
 .status.completed{background:var(--accent-bg);color:var(--accent)}
 .status.error{background:var(--danger-bg-dim);color:var(--danger-text)}
-.card .owner{font-size:11px;padding:2px 6px;border-radius:999px}
-.card .owner.worker{background:var(--ok-bg);color:var(--ok-text)}
-.card .owner.tui{background:var(--warn-bg);color:var(--warn-text)}
+.card .owner,.family-row .owner{font-size:11px;padding:2px 6px;border-radius:999px}
+.card .owner.worker,.family-row .owner.worker{background:var(--ok-bg);color:var(--ok-text)}
+.card .owner.tui,.family-row .owner.tui{background:var(--warn-bg);color:var(--warn-text)}
 @media(max-width:900px){
   #topStrip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;min-height:0}
   #topStrip #allTile{width:auto}
@@ -950,6 +1015,14 @@ a{color:var(--accent)}
       <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>
+      <button class="ghost" id="selectBtn" title="Pick sessions to archive several at once">Select</button>
+      <div id="selectBar" role="toolbar" aria-label="Selected sessions" hidden>
+        <span id="selectCount" aria-live="polite"></span>
+        <button class="ghost" id="selectAllBtn" title="Pick every session the search shows">Select all shown</button>
+        <button id="batchArchiveBtn" title="Archive the picked sessions that are shown (their delegates too)">Archive 0</button>
+        <button class="ghost" id="batchUnarchiveBtn" title="Unarchive the picked archived sessions that are shown" hidden>Unarchive 0</button>
+        <button class="ghost" id="selectDoneBtn" title="Leave select mode (Esc)">Done</button>
+      </div>
     </div>
     <div id="allPath" hidden>Stored in <code></code></div>
     <div id="allList"></div>

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

@@ -0,0 +1,154 @@
+// The running turn's timing line ("turn 3 running · 4.1s", then "turn 3 ·
+// 4.1s" at its end) and its one-second ticker, apart from app.js: the line's
+// element, the turn id it is for, the number it shows, what the turn waits
+// on (a provider retry, plugins' setup) and how many turns this page saw
+// end. The DOM, the clock and the interval come in, so `node --test` drives
+// it with a fake element.
+import { elapsedSince, turnTimingText } from "./timing.js";
+
+// The live line's text, or null when the turn's start is unknown. +inStage+:
+// the stage's status row already says the turn runs, so the line drops its
+// own "running" there.
+export function liveLineText({ number, startedAt, note = "", inStage = false }, now = Date.now()) {
+  const duration = elapsedSince(startedAt, now);
+  if (duration === null) return null;
+  return turnTimingText(number, duration, { running: !inStage }) + (note ? ` · ${note}` : "");
+}
+
+// The record a turn-end read finishes its line with: the one with the
+// turn's id; no id (an older worker's events): the last one.
+export function lineRecord(records, turnId) {
+  return turnId ? records.find((r) => r.id === turnId) : records[records.length - 1];
+}
+
+// +timing+()      the open session's timing (normalizeTiming's shape): its
+//                 activeTurn is set at the start and cleared at the end;
+// +place+(el)     puts a new line in the page, true when that is the stage's
+//                 status row (the line never moves mid-turn);
+// +makeLine+()    a new element for the line;
+// +onTick+()      after every tick and end (the info bar's session clock).
+export function createLiveTiming({
+  timing,
+  place,
+  makeLine = () => document.createElement("div"),
+  onTick = () => {},
+  now = () => Date.now(),
+  every = (fn, ms) => setInterval(fn, ms),
+  cancel = (handle) => clearInterval(handle),
+}) {
+  let el = null;
+  // The running turn's id (turn_started's turn_id, the id of its timing
+  // record), so a turn-end re-read finishes that turn's line with that
+  // turn's record, whatever started since.
+  let turnId = null;
+  let number = null;
+  // What the running turn waits on, after its live text; "" when it
+  // streams again.
+  let note = "";
+  let inStage = false;
+  let ticker = null;
+  // The turns this page saw end: the records of its last full render, +1 at
+  // each turn's end, never fewer than a merge brought. The live line numbers
+  // the next one, so a turn queued behind another reads its own number while
+  // the other's re-read is still out.
+  let ended = 0;
+
+  function stopTicker() {
+    if (ticker !== null) {
+      cancel(ticker);
+      ticker = null;
+    }
+  }
+
+  function tick() {
+    const text = liveLineText({ number, startedAt: timing().activeTurn?.started_at, note, inStage }, now());
+    if (el && text !== null) el.textContent = text;
+    onTick();
+  }
+
+  return {
+    get el() { return el; },
+    get turnId() { return turnId; },
+    // The replayed turn_started of a re-render carries no id: the running
+    // turn's record's.
+    set turnId(id) { turnId = id; },
+    get ended() { return ended; },
+    set ended(n) { ended = n; },
+    get ticking() { return ticker !== null; },
+
+    start(startedAt = new Date(now()).toISOString(), id = null) {
+      stopTicker();
+      timing().activeTurn = id ? { id, started_at: startedAt } : { started_at: startedAt };
+      turnId = id || null;
+      // The turns ended so far, so this one comes next.
+      number = ended + 1;
+      note = "";
+      el = makeLine();
+      el.className = "turn-timing live";
+      inStage = !!place(el);
+      tick();
+      ticker = every(tick, 1000);
+    },
+
+    tick,
+
+    // Set (or clear, "") what the running turn waits on.
+    setNote(text) {
+      if (note === text) return;
+      note = text;
+      if (timing().activeTurn) tick();
+    },
+
+    // The turn ended: the line stops with its elapsed time (a canceled turn's
+    // says so, as a reload's does), numbered as it ran until a re-read
+    // (finishLine) has the record.
+    finish({ canceled = false } = {}) {
+      const duration = elapsedSince(timing().activeTurn?.started_at, now());
+      if (el && duration !== null) {
+        note = "";
+        el.classList.remove("live");
+        el.textContent = turnTimingText(number, duration, { canceled });
+      }
+      timing().activeTurn = null;
+      stopTicker();
+      onTick();
+    },
+
+    // The line and the turn a turn-end read is for, taken before its await:
+    // a turn queued behind this one may start (a new live line) meanwhile.
+    capture() { return { el, turnId }; },
+
+    // Finish the line a turn-end read captured (+line+: {el, turnId}) with
+    // that turn's record: its place in the records and its duration (a
+    // canceled one says so). No record: the line stays as the turn's end
+    // left it. The ticker stops only if that line is still the live one.
+    finishLine(line) {
+      const records = timing().turnRecords;
+      const record = lineRecord(records, line.turnId);
+      if (line.el === el) {
+        timing().activeTurn = null;
+        stopTicker();
+      }
+      const duration = Number(record?.duration_ms);
+      if (line.el && record && Number.isFinite(duration)) {
+        line.el.classList.remove("live");
+        line.el.textContent = turnTimingText(records.indexOf(record) + 1, duration, { canceled: record.status === "canceled" });
+      }
+      onTick();
+    },
+
+    // A new turn starts: the old line (finished or not) is no longer the
+    // live one.
+    detach() {
+      stopTicker();
+      el = null;
+    },
+
+    // The session (or its rendering) starts over.
+    drop() {
+      stopTicker();
+      el = null;
+      turnId = null;
+    },
+  };
+}