samagotchi 0.34.0 → 0.36.0

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

@@ -27,9 +27,11 @@ import { MODEL_KEY } from "./model_pick.js";
 import { emptySessionState } from "./session_state.js";
 import { createModelPicker } from "./model_picker.js";
 import { chipName, chipsHtml, imageFiles, restoredChips, thumbsHtml, turnRefs, turnText } from "./images.js";
-import { escapeHtml, memChipText, memChipTitle, noteHtml, normalize, steerRowHtml, userBodyHtml, ownerBadge, previewForCard, relativeTime, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy } from "./format.js";
-import { EMPTY_ANSWER_CLASS, createTurnView, turnHistoryHtml } from "./turn_view.js";
+import { escapeHtml, memChipText, memChipTitle, noteHtml, normalize, steerRowHtml, ownerBadge, previewForCard, relativeTime, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy, childrenSummary } from "./format.js";
+import { createTurnView, turnHistoryHtml } from "./turn_view.js";
+import { BADGES, emptyAnswerHtml, htmlElement, stateBadgeHtml, userBubbleHtml } from "./turn_html.js";
 import { createStageView } from "./stage_view.js";
+import { createFamilyPop, familyChipHtml, familyRowsHtml } from "./families_view.js";
 import { createTaskStopper } from "./task_stop.js";
 import { appendQuote } from "./annotations.js";
 import { parsePresets } from "./annotate_presets.js";
@@ -38,7 +40,7 @@ import { COPY_SOURCE_ATTR, copySource, copyText, installCopy, showsAnswer } from
 import { routeChunk } from "./chunk_router.js";
 import { extractCtxPct, savedCtxPct, cardCtxText, generationTokens, lastSpeedText, speedText, tokensTipText } from "./ctx.js";
 import { createQuestionCards } from "./question_cards.js";
-import { cardClass, cardInnerHtml, cardPlace, isCard, isNoticeCard, noticeInnerHtml, splitSnapshotCards, turnNoticePlace } from "./card.js";
+import { cardClass, cardInnerHtml, cardPlace, isCard, isNoticeCard, noticeInnerHtml, shownElsewhere, splitSnapshotCards, turnNoticePlace } from "./card.js";
 import { PROMPT_LINE_PX, PROMPT_MIN_PX, gripFloor, promptHeight } from "./composer_size.js";
 import { createCommandList } from "./command_list.js";
 import { createPromptHistory } from "./prompt_history.js";
@@ -46,14 +48,15 @@ import { ALL_SESSIONS_HASH, sessionHash, sessionIdFromHash } from "./route.js";
 import { allScopeHref, cardFolder, projectScopeHref, scopeDir } from "./scope.js";
 import { shouldFollowScroll, keepFollowing } from "./scroll.js";
 import { SHORT_WINDOW_QUERY, stripAutoHidden, stripColumns, stripShowParts } from "./strip.js";
-import { applySessionEvent, heldOrder, listedSessions, sortedByUpdated, stoppedBadge, waitingBadge, waitingFirst, waitingSearchText, withChildrenAfterParents } from "./sessions_list.js";
+import { applySessionEvent, batchCounts, batchTargets, batchToastText, families, familyId, familyOpen, familyWaits, filterFamilies, flattenFamilies, heldOrder, inTree, rangeIds, runBatch, listedSessions, sortedByUpdated, stoppedBadge, waitingBadge, waitingFirst, waitingSearchText } from "./sessions_list.js";
 import { createNotifications } from "./notifications.js";
 import { restartConfirmText, versionNotice, workerBadge } from "./update_notice.js";
 import {
-  appendAboveLiveTiming, cancelLineText, elapsedSince, formatDuration, mergeTiming, normalizeTiming, STOPPED_LINE_CLASS, turnTimingText,
+  appendAboveLiveTiming, cancelLineText, elapsedSince, formatDuration, mergeTiming, normalizeTiming, STOPPED_LINE_CLASS,
 } from "./timing.js";
+import { createLiveTurn } from "./live_turn.js";
 import { DONE_MS, applyInitEvent, dropDone, initRowHtml, newInitTasks, seedInitTasks } from "./init_row.js";
-import { clientLabel, commandView, isReportClient, displayWait, dropEarlyRestores, emptyAnswerLine, emptyRetryLine, hookNoticeLabel, initWaitLine, isOwn, sessionCommandLine, keepEarlyRestore, newClientId, noticeLine, promptOps, reminderText, restoreAction, composerAfterAck, restoreOnAck, replaysDrawnTurn, retryStatusLine, snapshotEvents, steerCutLine, startPageReplyOrHint, turnOutput, unknownCommandHint, webLocalReply, workerGoneText } from "./turn_events.js";
+import { clientLabel, commandView, isReportClient, displayWait, dropEarlyRestores, emptyRetryLine, hookNoticeLabel, initWaitLine, isOwn, sessionCommandLine, keepEarlyRestore, newClientId, noticeLine, promptOps, reminderText, restoreAction, composerAfterAck, restoreOnAck, replaysDrawnTurn, retryStatusLine, snapshotEvents, steerCutLine, startPageReplyOrHint, turnOutput, unknownCommandHint, webLocalReply, workerGoneText } from "./turn_events.js";
 
 const $ = (s) => document.querySelector(s);
 const topStripEl = $("#topStrip");
@@ -73,6 +76,10 @@ const contextChips = createContextChips({
   toast: (text) => showToast(text),
 });
 const markdownWarningEl = $("#markdownWarning");
+// What the page renders that a notice may stand in for (the server's
+// Web::Capabilities, next to markdown_warning); a notice it names isn't
+// drawn (shownElsewhere). An older server sends none: every notice shows.
+let pageCapabilities = {};
 const promptEl = $("#prompt");
 const actionBtn = $("#actionBtn");
 const cancelBtn = $("#cancelBtn");
@@ -121,22 +128,20 @@ function findInTurnRoots(selector) {
 // The open session's fields (session_state.js); resetSessionState() starts
 // them over.
 let current = emptySessionState();
-let turnRunning = false;
-let liveTurnTimingEl = 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 liveTurnId = 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 turnsEnded = 0;
-// What the running turn waits on, after its live timing line: a provider
-// retry (generation_retrying) or plugins' setup (plugin_init_wait); "" when
-// it streams again.
-let liveTurnNote = "";
-let timingInterval = null;
+// The running turn as the page follows it (live_turn.js): whether one
+// runs, its timing line and the turns this page saw end (live_timing.js),
+// its merges' bubble flags, its turn-end reads.
+const liveTurn = createLiveTurn({
+  timing: () => current.timing,
+  // The stage's status row while it holds the turn (the line moves into
+  // the history with it), else the history.
+  place: (el) => {
+    const stageHost = turnDom.timingHost?.() || null;
+    (stageHost || historyEl).appendChild(el);
+    return !!stageHost;
+  },
+  onTick: () => updateInfoBar(),
+});
 
 // This tab's id in the session's events: tells its own prompts from the
 // ones other clients (an attached TUI, another tab, reminders) sent.
@@ -157,20 +162,12 @@ let selectSeq = null;
 // The stream was opened from 0 (a wake with no cursor to go on) and no
 // new turn has started on it yet: see followWokenWorker.
 let streamFromGuess = false;
-// The last input_merged had an origin with no bubble: its merged text
-// (pending_input_merged) gets one ("report": a delegate report's).
-let 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.
-let wakeStart = false;
 // The enqueued_ids this page sent (from the /turn acks): only these come back
 // into the composer when their turn fails.
 const sentIds = new Set();
 // Own prompt_restored events that came before their /turn ack, by
 // enqueued_id: the ack puts that prompt back instead of clearing it.
 const earlyRestores = new Map();
-// The last turn_failed's line, shown again after prompt_restored's resync.
-let lastFailedText = null;
 
 // The page's scope (scope.js): ?dir= is the folder a project view came
 // from (new chats start there); the server names its project, if any.
@@ -219,13 +216,17 @@ function openSessionEvents() {
       allSessions = applySessionEvent(allSessions, "session", data);
       render();
       if (data.session && data.session.id === selected) followSelectedSession(data.session);
+      else if (selected && data.session?.parent_id === selected) updateInfoBar(); // its children chip
     },
     session_gone: (data) => {
       notifications.noticeSessions("session_gone", data);
+      selecting.picked.delete(data.id);
+      selecting.skipReasons.delete(data.id);
       const next = applySessionEvent(allSessions, "session_gone", data);
       if (next !== allSessions) {
         allSessions = next;
         render();
+        if (selected) updateInfoBar(); // a deleted child leaves the children chip
       }
       leaveGoneSession(data.id, "deleted");
     },
@@ -314,26 +315,34 @@ function allViewSessions() {
   return listedSessions(allSessions, $("#includeArchived").checked);
 }
 
-function filteredSessions(list) {
-  const q = $("#filter").value.trim().toLowerCase();
-  if (!q) return list;
-  return list.filter(
-    (s) =>
-      previewForCard(s).toLowerCase().includes(q) ||
-      (s.first_preview || "").toLowerCase().includes(q) ||
-      s.short_id.toLowerCase().includes(q) ||
-      s.id.toLowerCase().includes(q) ||
-      s.status.toLowerCase().includes(q) ||
-      waitingSearchText(s).includes(q),
-  );
+function filterQuery() {
+  return $("#filter").value.trim().toLowerCase();
+}
+
+// Whether a session matches the all view's search +q+ (lower case).
+function matchesFilter(s, q) {
+  return previewForCard(s).toLowerCase().includes(q) ||
+    (s.first_preview || "").toLowerCase().includes(q) ||
+    s.short_id.toLowerCase().includes(q) ||
+    s.id.toLowerCase().includes(q) ||
+    s.status.toLowerCase().includes(q) ||
+    waitingSearchText(s).includes(q);
 }
 
 // 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)
 // wears the warning colour and says what for.
-// deletable: the all-sessions view's cards get a delete button.
-function cardHtml(s, { deletable = false } = {}) {
+// deletable / archivable: the all-sessions view's cards get a delete and an
+// archive (unarchive, on an archived card) button. selectable: select mode's
+// checkbox instead (picked: checked), and skipReason: why a batch skipped it.
+// family: the family the session heads (sessions_list.js families): with
+// members, its chip (which opens their list), and the card waits when any
+// 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.
+function cardHtml(s, { deletable = false, archivable = false, selectable = false, picked = false, skipReason = null, family = null, open = false, rows = false, matchIds = 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}`;
   const preview = escapeHtml(previewForCard(s));
@@ -352,7 +361,23 @@ function cardHtml(s, { deletable = false } = {}) {
   const stopped = waiting ? null : stoppedBadge(s);
   const stoppedHtml = stopped ? `<span class="stopped-badge" title="${escapeHtml(stopped.title)}">${escapeHtml(stopped.text)}</span>` : "";
   const dotWord = waiting ? waiting.title : s.status;
-  return `<div class="card${s.archived ? " archived" : ""}${waiting ? " waiting" : ""}" data-id="${s.id}" title="${escapeHtml(tip)}${memTitle ? ` · ${escapeHtml(memTitle)}` : ""}"><div class="preview">${preview}</div>${s.recap ? `<div class="recap" title="${escapeHtml(s.recap)}">${escapeHtml(s.recap)}</div>` : ""}<div class="meta"><span class="status dot ${escapeHtml(s.status)}${waiting ? " waiting" : ""}" title="${escapeHtml(dotWord)}" aria-label="${escapeHtml(dotWord)}"></span>${waitingHtml}${stoppedHtml}${timeHtml}${ctxHtml}${folderHtml}${parentChipHtml(s)}${ownerBadgeHtml(s)}${archivedHtml}${s.used_memory_names && s.used_memory_names.length ? `<span title="${escapeHtml(s.used_memory_names.join(", "))}">mem ${s.used_memory_names.length}</span>` : ""}</div>${deletable ? `<button type="button" class="card-del" data-del="${escapeHtml(s.id)}" title="Delete session" aria-label="Delete session ${escapeHtml(s.short_id)}">\u2715</button>` : ""}</div>`;
+  const pickHtml = selectable ? `<input type="checkbox" class="card-pick" aria-label="Select session ${escapeHtml(s.short_id)}"${picked ? " checked" : ""}>` : "";
+  const skipHtml = skipReason ? `<div class="skip-reason">skipped: ${escapeHtml(skipReason)}</div>` : "";
+  const familyWaiting = !!fam && familyWaits(fam);
+  const kidsHtml = fam ? familyChipHtml(fam, { open }) : "";
+  const rowsHtml = fam && rows && open ? familyRowsHtml(fam, { activeId: selected, matchIds, archivable: !selectable }) : "";
+  const membersAttr = fam ? ` data-members="${escapeHtml(fam.members.map((m) => m.session.id).join(" "))}"` : "";
+  return `<div class="card${s.archived ? " archived" : ""}${waiting || familyWaiting ? " waiting" : ""}${selectable && picked ? " picked" : ""}${fam && rows && open ? " family-open" : ""}" data-id="${s.id}"${membersAttr} title=""${escapeHtml(tip)}${memTitle ? ` · ${escapeHtml(memTitle)}` : ""}"><div class="preview">${preview}</div>${s.recap ? `<div class="recap" title="${escapeHtml(s.recap)}">${escapeHtml(s.recap)}</div>` : ""}<div class="meta"><span class="status dot ${escapeHtml(s.status)}${waiting ? " waiting" : ""}" title="${escapeHtml(dotWord)}" aria-label="${escapeHtml(dotWord)}"></span>${waitingHtml}${stoppedHtml}${timeHtml}${ctxHtml}${folderHtml}${parentChipHtml(s)}${kidsHtml}${ownerBadgeHtml(s)}${archivedHtml}${s.used_memory_names && s.used_memory_names.length ? `<span title="${escapeHtml(s.used_memory_names.join(", "))}">mem ${s.used_memory_names.length}</span>` : ""}</div>${rowsHtml}${skipHtml}${pickHtml}${selectable ? "" : cardToolsHtml(s, { deletable, archivable })}</div>`;
+}
+
+function cardToolsHtml(s, { deletable, archivable }) {
+  if (!deletable && !archivable) return "";
+  const short = escapeHtml(s.short_id);
+  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>`;
+  const del = deletable ? `<button type="button" class="card-del" data-del="${escapeHtml(s.id)}" title="Delete session" aria-label="Delete session ${short}">\u2715</button>` : "";
+  return `<div class="card-tools">${arch}${del}</div>`;
 }
 
 // A delegated session's `↳ <parent>` chip; the parent's preview is the tooltip.
@@ -375,30 +400,62 @@ function fitStripColumns() {
   topStripEl.style.setProperty("--strip-cols", stripCols);
 }
 
-// The order a list draws its cards in: the sessions that wait on the user
-// first (waitingFirst), back to their place once answered. Never under the
+// The order a list draws its cards in: +next+, what waits on the user
+// first (waitingFirst), back to its place once answered. Never under the
 // pointer, though: while it is over the list the order last drawn holds,
-// and its leaving draws the list again.
-const drawnOrder = new Map(); // list element → ids in the order last drawn
+// and its leaving draws the list again. +idOf+ names a card: a session's
+// id, or familyId (a card per family: its head's id). drawnOrder is the
+// cards drawn, which select mode picks from.
+const drawnOrder = new Map(); // list element → card ids in the order last drawn
 const heldLists = new Set(); // lists drawn in a held order
 const canHover = globalThis.matchMedia?.("(hover: hover)").matches ?? false;
-function listOrder(el, list) {
-  const next = waitingFirst(list);
-  const held = canHover && el.matches(":hover") ? drawnOrder.get(el) : null;
-  const ordered = held ? heldOrder(held, next) : next;
-  if (held && ordered.some((s, i) => s !== next[i])) heldLists.add(el);
+function listOrder(el, next, idOf = (s) => s.id) {
+  // The strip's popover holds it too (the pointer leaves the strip for it,
+  // and a touch screen has no hover at all).
+  const holding = (canHover && el.matches(":hover")) || (el === topStripEl && familyPop.isOpen());
+  const held = holding ? drawnOrder.get(el) : null;
+  const ordered = held ? heldOrder(held, next, idOf) : next;
+  if (held && ordered.some((x, i) => idOf(x) !== idOf(next[i]))) heldLists.add(el);
   else heldLists.delete(el);
-  drawnOrder.set(el, ordered.map((s) => s.id));
+  drawnOrder.set(el, ordered.map(idOf));
   return ordered;
 }
 
-function stripSessions() {
-  return listOrder(topStripEl, shownSessions()).slice(0, stripCols);
+// The strip's cards: families in the list's order (a family in its
+// first-listed member's place, so a hub upsert doesn't move it), waiting
+// ones first, as many as fit. A family is one card.
+function stripCards() {
+  return listOrder(topStripEl, waitingFirst(families(shownSessions(), { order: "list" })), familyId).slice(0, stripCols);
 }
 
+// The strip's family popover (families_view.js): the open family's rows,
+// under its chip.
+let stripFamilies = new Map(); // head id → family, as the strip last drew it
+const familyPop = createFamilyPop({
+  doc: document,
+  win: window,
+  rowsFor: (id) => {
+    const f = stripFamilies.get(id);
+    return f && f.members.length ? familyRowsHtml(f, { activeId: selected }) : null;
+  },
+  anchorFor: (id) => [...topStripEl.querySelectorAll(".card[data-id] .family-chip")].find((chip) => chip.closest(".card").dataset.id === id) || null,
+  onPick: (id) => {
+    familyPop.close();
+    select(id);
+  },
+  // A strip order held while it was open catches up (unless the pointer is
+  // back over the strip: its leaving does it then).
+  onClose: () => {
+    if (heldLists.has(topStripEl) && !(canHover && topStripEl.matches(":hover"))) renderTop(stripCards());
+  },
+});
+window.addEventListener("keydown", (e) => familyPop.onKeydown(e), true);
+document.addEventListener("pointerdown", (e) => familyPop.onPointerDown(e), true);
+document.addEventListener("scroll", () => familyPop.reposition(), true);
+
 function render() {
   fitStripColumns();
-  renderTop(stripSessions());
+  renderTop(stripCards());
   if (allViewOpen()) renderAll();
 }
 
@@ -408,36 +465,77 @@ window.addEventListener("resize", () => {
   stripResizeTimer = setTimeout(() => {
     const before = stripCols;
     fitStripColumns();
-    if (stripCols !== before && allSessions.length) renderTop(stripSessions());
+    if (stripCols !== before && allSessions.length) renderTop(stripCards());
+    familyPop.reposition();
   }, 150);
 });
 
-function bindCards(container, onPick) {
+// onPick: a card's click (open it, or pick it in select mode); onFamily:
+// a family chip's (toggle its list); onRow: a family row's (open that
+// delegate).
+function bindCards(container, onPick, { onFamily = () => {}, onRow = () => {} } = {}) {
   container.querySelectorAll(".card[data-id]").forEach((el) => {
     el.addEventListener("click", (e) => {
+      const chip = e.target.closest(".family-chip");
+      if (chip) {
+        e.stopPropagation();
+        onFamily(el.dataset.id, chip, e);
+        return;
+      }
       const del = e.target.closest(".card-del");
       if (del) {
         e.stopPropagation();
         confirmDelete(del.dataset.del);
         return;
       }
-      onPick(el.dataset.id);
+      // Archive from the list: the view stays open, the toast has Undo.
+      const arch = e.target.closest(".card-arch");
+      if (arch) {
+        e.stopPropagation();
+        const id = arch.dataset.arch;
+        setArchived(id, !allSessions.find((x) => x.id === id)?.archived);
+        return;
+      }
+      const row = e.target.closest(".family-row[data-id]");
+      if (row) {
+        e.stopPropagation();
+        onRow(row.dataset.id, e);
+        return;
+      }
+      onPick(el.dataset.id, e);
     });
-    if (selected && el.dataset.id === selected) el.classList.add("active");
+  });
+  paintActive();
+}
+
+// The open session's marks: its card (.active), its row in a family's list
+// (in a card or the strip's popover), and a quieter .contains-active on the
+// card of the family it is folded into.
+function paintActive() {
+  document.querySelectorAll(".card[data-id]").forEach((el) => {
+    el.classList.toggle("active", !!selected && el.dataset.id === selected);
+    el.classList.toggle("contains-active", !!selected && (el.dataset.members || "").split(" ").includes(selected));
+  });
+  document.querySelectorAll(".family-row[data-id]").forEach((el) => {
+    el.classList.toggle("active", !!selected && el.dataset.id === selected);
   });
 }
 
-// The latest sessions (as many as fit), then the way to all of them.
-function renderTop(sessions) {
+// The latest sessions (as many as fit, a family one card), then the way
+// to all of them.
+function renderTop(cards) {
   topStripEl.classList.remove("loading");
   renderStripShow();
+  stripFamilies = new Map(cards.map((f) => [f.head.id, f]));
   if (scopeError) {
     topStripEl.innerHTML = `<div class="hint scope-error">${escapeHtml(scopeError)} · <a href="${escapeHtml(allScopeHref("", null, location.search))}">show every session</a></div>`;
+    familyPop.close();
     return;
   }
   // Only archived sessions: no cards, but the tile stays, the way to them.
   if (!allSessions.length) {
     topStripEl.innerHTML = "";
+    familyPop.close();
     return;
   }
   const n = shownSessions().length;
@@ -445,37 +543,252 @@ function renderTop(sessions) {
     ? `${n} ${n === 1 ? "session" : "sessions"}`
     : `${allSessions.length - n} archived`;
   const tile = `<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>`;
-  topStripEl.innerHTML = sessions.map((s) => cardHtml(s)).join("") + tile;
-  bindCards(topStripEl, select);
+  topStripEl.innerHTML = cards.map((f) => cardHtml(f.head, { family: f, open: familyPop.openHead() === f.head.id })).join("") + tile;
+  bindCards(topStripEl, select, {
+    onFamily: (id, _chip, e) => {
+      familyPop.toggle(id);
+      // From the keyboard (Enter / Space: no pointer, detail 0) the focus
+      // goes into the popover, which sits at the end of body; Esc brings it back.
+      if (e.detail === 0 && familyPop.isOpen()) $("#familyPop .fr-open")?.focus();
+    },
+  });
   $("#allTile").addEventListener("click", openAllView);
   $("#stripHide").addEventListener("click", () => setStripHidden(true));
+  familyPop.refresh();
 }
 
 // The hidden strip's pill: "▾ 5 sessions · ● 1 live · ● 1 waiting",
-// following the list.
+// following the list: its cards (a family is one), the live and waiting
+// sessions (a waiting delegate too).
 function renderStripShow() {
-  const { count, live, waiting } = stripShowParts(shownSessions());
+  const shown = shownSessions();
+  const { count, live, waiting } = stripShowParts(shown, { cards: families(shown).length });
   const liveHtml = live ? ` · <span class="live"><span class="live-dot" aria-hidden="true"></span>${escapeHtml(live)}</span>` : "";
   const waitingHtml = waiting ? ` · <span class="waiting"><span class="waiting-dot" aria-hidden="true"></span>${escapeHtml(waiting)}</span>` : "";
   $("#stripShow").innerHTML = `<span class="pill-arrow" aria-hidden="true">\u25BE</span> ${escapeHtml(count)}${liveHtml}${waitingHtml}`;
 }
 
-// A delegated session sits right after its parent: applied on every
-// render, since a hub snapshot hands the list back in the server's order.
+// A parent's card holds its delegates (families, by the newest member: a
+// hub snapshot hands the list back in the server's order), folded unless
+// one waits on the user, a search matched one or the user opened it. The
+// search runs over the families, so a matching delegate brings its parent's
+// card along. Select mode picks cards (a family's rows have no checkbox:
+// archiving the parent takes its delegates).
+const familyToggles = new Map(); // head id → open, the user's chip clicks (this page's life)
+const searchToggles = new Map(); // the same while a search matched a member; a new search clears it
+const drawnOpen = new Map(); // head id → open as last drawn in all sessions
+
 function renderAll() {
   const listed = allViewSessions();
-  const sessions = listOrder(allListEl, withChildrenAfterParents(filteredSessions(listed)));
-  $("#count").textContent = sessions.length === listed.length
-    ? `${listed.length}`
-    : `${sessions.length} / ${listed.length}`;
-  if (!sessions.length) {
+  const q = filterQuery();
+  const all = families(listed);
+  const shown = q ? filterFamilies(all, (s) => matchesFilter(s, q)) : all;
+  const fams = listOrder(allListEl, waitingFirst(shown), familyId);
+  const delegates = all.reduce((n, f) => n + f.members.length, 0);
+  $("#count").textContent = fams.length === all.length
+    ? `${all.length}${delegates ? ` (+${delegates} ${delegates === 1 ? "delegate" : "delegates"})` : ""}`
+    : `${fams.length} / ${all.length}`;
+  updateSelectBar();
+  if (!fams.length) {
+    drawnOpen.clear();
     allListEl.innerHTML = `<div class="hint">${listed.length ? "No session matches." : "No sessions yet."}</div>`;
     return;
   }
-  allListEl.innerHTML = sessions.map((s) => cardHtml(s, { deletable: true })).join("");
-  bindCards(allListEl, (id) => { leaveAllView(sessionHash(id)); select(id); });
+  // A hub event redraws the list under a checkbox or a chip the keyboard is on.
+  const focused = document.activeElement?.matches?.("#allList .card-pick, #allList .family-chip")
+    ? { id: document.activeElement.closest(".card")?.dataset.id, sel: document.activeElement.matches(".card-pick") ? ".card-pick" : ".family-chip" } : null;
+  const opts = (s) => (selecting.on
+    ? { selectable: true, picked: selecting.picked.has(s.id), skipReason: selecting.skipReasons.get(s.id) }
+    : { deletable: true, archivable: true });
+  drawnOpen.clear();
+  allListEl.innerHTML = fams.map((f) => {
+    const matched = !!f.matchIds?.size;
+    const open = familyOpen(f, matched ? searchToggles : familyToggles, { matched });
+    drawnOpen.set(f.head.id, open);
+    return cardHtml(f.head, { ...opts(f.head), family: f, open, rows: true, matchIds: q ? f.matchIds : null });
+  }).join("");
+  bindCards(allListEl, (id, e) => {
+    if (selecting.on) {
+      togglePick(id, e);
+      return;
+    }
+    leaveAllView(sessionHash(id));
+    select(id);
+  }, {
+    onFamily: (headId) => {
+      const matched = !!q && !!fams.find((f) => f.head.id === headId)?.matchIds?.size;
+      (matched ? searchToggles : familyToggles).set(headId, !drawnOpen.get(headId));
+      renderAll();
+    },
+    // In select mode a row does nothing: rows aren't picked.
+    onRow: (id) => {
+      if (selecting.on) return;
+      leaveAllView(sessionHash(id));
+      select(id);
+    },
+  });
+  if (focused?.id) allListEl.querySelector(`.card[data-id="${focused.id}"] ${focused.sel}`)?.focus();
+}
+
+// ── Select mode (all sessions) ─────────────────────────────────────────────
+// "Select" turns the cards into picks: a click (or Shift-click, a range in
+// the drawn order) toggles one instead of opening it, and the bar acts on
+// the picked ones that are shown. The picks live here, not in the DOM:
+// renderAll draws the list again on every hub event.
+const selecting = {
+  on: false,
+  picked: new Set(),
+  last: null, // the last toggled id: a Shift-click's range starts there
+  skipReasons: new Map(), // id → why the last batch skipped it
+  running: null, // {done, total, archive} while a batch runs
+};
+
+function enterSelect() {
+  selecting.on = true;
+  renderAll();
+}
+
+function leaveSelect() {
+  selecting.on = false;
+  selecting.picked.clear();
+  selecting.last = null;
+  selecting.skipReasons.clear();
+  if (allViewOpen()) renderAll();
+  else updateSelectBar();
+}
+
+function togglePick(id, e) {
+  if (selecting.running) return; // the grid reflows while a batch runs
+  const order = drawnOrder.get(allListEl) || [];
+  const on = !selecting.picked.has(id);
+  const ids = e?.shiftKey ? rangeIds(order, selecting.last, id) : [id];
+  for (const x of ids) {
+    if (on) selecting.picked.add(x);
+    else selecting.picked.delete(x);
+    paintPick(x);
+  }
+  selecting.last = id;
+  updateSelectBar();
+}
+
+// A card's pick state in place (no redraw: the focus stays put).
+function paintPick(id) {
+  const el = allListEl.querySelector(`.card[data-id="${id}"]`);
+  if (!el) return;
+  const on = selecting.picked.has(id);
+  el.classList.toggle("picked", on);
+  const box = el.querySelector(".card-pick");
+  if (box) box.checked = on;
+}
+
+// The bar's numbers: picks of sessions still in the list (a snapshot can
+// drop one with no session_gone), and the shown ones a batch would act on.
+function selectCounts() {
+  const byId = new Map(allSessions.map((s) => [s.id, s]));
+  const shown = drawnOrder.get(allListEl) || [];
+  const shownSet = new Set(shown);
+  const live = [...selecting.picked].filter((id) => byId.has(id));
+  return {
+    picked: live.length,
+    hidden: live.filter((id) => !shownSet.has(id)).length,
+    archive: batchTargets(selecting.picked, shown, true, byId),
+    unarchive: batchTargets(selecting.picked, shown, false, byId),
+  };
 }
 
+function updateSelectBar() {
+  $("#allView").classList.toggle("selecting", selecting.on);
+  $("#selectBtn").hidden = selecting.on;
+  const bar = $("#selectBar");
+  bar.hidden = !selecting.on;
+  if (!selecting.on) return;
+  const c = selectCounts();
+  const run = selecting.running;
+  $("#selectCount").textContent = run
+    ? `${run.archive ? "Archiving" : "Unarchiving"} ${run.done}/${run.total}\u2026`
+    : `${c.picked} selected${c.hidden ? ` \u00b7 ${c.hidden} not shown` : ""}`;
+  $("#batchArchiveBtn").textContent = `Archive ${c.archive.length}`;
+  $("#batchArchiveBtn").disabled = !!run || !c.archive.length;
+  $("#batchUnarchiveBtn").textContent = `Unarchive ${c.unarchive.length}`;
+  $("#batchUnarchiveBtn").hidden = !c.unarchive.length;
+  $("#batchUnarchiveBtn").disabled = !!run;
+  $("#selectAllBtn").disabled = !!run;
+  $("#selectDoneBtn").disabled = !!run;
+}
+
+// The batch: the picked shown ones, one request at a time in the drawn
+// order (parents before their delegates), through the info bar's
+// archiveOne. A refused one stays picked with the server's reason on its
+// card; the end toast's Undo runs the opposite batch on the ones that went.
+async function runSelectBatch(archive) {
+  if (selecting.running) return;
+  const byId = new Map(allSessions.map((s) => [s.id, s]));
+  const ids = batchTargets(selecting.picked, drawnOrder.get(allListEl) || [], archive, byId);
+  if (!ids.length) return;
+  selecting.skipReasons.clear();
+  const outcome = await archiveBatch(ids, archive);
+  if (!outcome) return;
+  if (!allViewOpen()) leaveSelect(); // left the view while it ran
+  else renderAll();
+  showToast(batchToastText(batchCounts(outcome, archive)), outcome.done.length ? {
+    label: "Undo",
+    run: async () => {
+      const undone = await archiveBatch(outcome.done, !archive);
+      if (!undone) return;
+      if (allViewOpen()) renderAll();
+      showToast(batchToastText(batchCounts(undone, !archive)));
+    },
+  } : null);
+}
+
+// runBatch over archiveOne, with the bar's progress; the picks and skip
+// reasons follow the outcome. null when a batch already runs.
+async function archiveBatch(ids, archive) {
+  if (selecting.running) return null;
+  selecting.running = { done: 0, total: ids.length, archive };
+  updateSelectBar();
+  try {
+    const outcome = await runBatch(ids, async (id) => {
+      const answer = await archiveOne(id, archive);
+      if (answer.ok) {
+        render();
+        updateInfoBar();
+      }
+      return answer;
+    }, (done) => {
+      selecting.running.done = done;
+      updateSelectBar();
+    });
+    for (const id of [...outcome.done, ...outcome.covered, ...outcome.gone]) {
+      selecting.picked.delete(id);
+      selecting.skipReasons.delete(id);
+    }
+    for (const { id, reason } of outcome.skipped) selecting.skipReasons.set(id, reason);
+    return outcome;
+  } finally {
+    selecting.running = null;
+    updateSelectBar();
+    if (!eventsControl) refresh();
+  }
+}
+
+$("#batchArchiveBtn").addEventListener("click", () => runSelectBatch(true));
+$("#batchUnarchiveBtn").addEventListener("click", () => runSelectBatch(false));
+$("#selectBtn").addEventListener("click", enterSelect);
+$("#selectDoneBtn").addEventListener("click", leaveSelect);
+$("#selectAllBtn").addEventListener("click", () => {
+  for (const id of drawnOrder.get(allListEl) || []) {
+    selecting.picked.add(id);
+    paintPick(id);
+  }
+  updateSelectBar();
+});
+// A Shift-click picks a range: keep the browser from selecting the text
+// between the two cards.
+allListEl.addEventListener("mousedown", (e) => {
+  if (selecting.on && e.shiftKey) e.preventDefault();
+});
+
 // Delete a session (the info bar's button, an all-sessions card's ✕) after
 // a confirm; the list drops it without a reload. The server stops a live
 // worker first and refuses a session a terminal chi has open.
@@ -542,10 +855,13 @@ function applyView() {
   const open = allViewOpen();
   if (!open) {
     allViewPushed = false;
+    // A running batch ends on its own and clears the picks then.
+    if (selecting.on && !selecting.running) leaveSelect();
     topStripEl.scrollLeft = 0; // a phone's strip scrolls sideways to the tile
   }
   document.body.classList.toggle("all-view", open);
   if (open) {
+    familyPop.close(); // the strip is hidden in the all view
     // The list is live; only its order can lag (upserts keep cards in
     // place), so the all view opens in the server's order.
     allSessions = sortedByUpdated(allSessions);
@@ -582,7 +898,7 @@ function updateComposerMode() {
     fitPrompt();
   }
   if (selected) modelPicker.close();
-  const running = turnRunning && !!selected;
+  const running = liveTurn.running && !!selected;
   cancelBtn.style.display = running ? "" : "none";
   if (running) {
     setPlaceholder("Running… a message now steers this turn · Enter to send · Shift+Enter newline", "Steer the turn…");
@@ -615,7 +931,7 @@ function updateComposerMode() {
 }
 
 function setTurnRunning(running) {
-  turnRunning = !!running;
+  liveTurn.running = !!running;
   updateComposerMode();
   updateInfoBar();
 }
@@ -673,15 +989,14 @@ function clearSelection() {
   seedInitTasks(initTasks, []);
   renderInitRow();
   setSessionHash(null);
-  document.querySelectorAll(".card").forEach((el) => el.classList.remove("active"));
+  paintActive();
   resetSessionState();
   contextChips.clear();
-  clearTimingInterval();
-  liveTurnTimingEl = null;
-  liveTurnId = null;
+  liveTurn.forget();
   setTurnRunning(false);
   closeStream();
   setMarkdownWarning(null);
+  setCapabilities(null);
   updateComposerMode();
   updateInfoBar();
   updateFirstPeek();
@@ -712,9 +1027,7 @@ async function select(id) {
   clearNotice();
   selected = id;
   setSessionHash(id);
-  document.querySelectorAll(".card").forEach((el) =>
-    el.classList.toggle("active", el.dataset.id === id),
-  );
+  paintActive();
   historyEl.innerHTML = `<div class="hint">Loading…</div>`;
   emptyEl.classList.add("hidden");
   closeStream();
@@ -731,15 +1044,12 @@ async function select(id) {
 // Clear everything that belongs to one turn's rendering.
 function resetTurnView() {
   closeStream();
-  clearTimingInterval();
-  liveTurnTimingEl = null;
-  liveTurnId = null;
+  // workerGone and a re-render come through here: the answer_display wait
+  // goes too.
+  liveTurn.forget();
   questionCards.removeQuestion();
   questionCards.forgetContinue();
-  unmatchedMerge = false;
-  wakeStart = false;
   setTurnRunning(false);
-  releaseDisplayWait();
 }
 
 // (Re)render the selected session from the server and stream on from the
@@ -765,7 +1075,6 @@ async function resync({ endText = null } = {}) {
       return;
     }
     if (id !== selected) return;
-    releaseDisplayWait();
     resetTurnView();
     renderSessionView(data);
     // Preview is read-only: a worker is woken only by POST /turn, so attach
@@ -788,13 +1097,14 @@ async function resync({ endText = null } = {}) {
 function renderSessionView(data) {
   const s = data.session;
   setMarkdownWarning(data.markdown_warning);
+  setCapabilities(data.capabilities);
   current.status = s.status;
   current.model = s.model_name;
   current.served = s.served_model ? [s.served_model, s.served_model_for] : null;
   current.dir = s.working_directory;
   current.owner = s.owner || null;
   current.timing = normalizeTiming(data.timing);
-  turnsEnded = current.timing.turnRecords.length;
+  liveTurn.timing.ended = current.timing.turnRecords.length;
   const activeTurnId = current.timing.activeTurn?.id || null;
   // The saved fill, so a reloaded or stopped session shows it before its
   // next turn (a running turn's replay below streams over it).
@@ -838,20 +1148,21 @@ function renderSessionView(data) {
   else showRecap(data.recap);
   // A live worker's last cards and between-turns notices, where they
   // arrived; the running turn's go into its step once it is drawn.
-  const snapshotCards = splitSnapshotCards(data.cards);
+  const snapshotCards = splitSnapshotCards(data.cards, pageCapabilities);
   placeSnapshotCards(snapshotCards.placed);
   const replay = snapshotEvents({
     current_turn: data.current_turn,
     queued: data.queued,
     started_at: current.timing.activeTurn?.started_at,
   });
-  replay.forEach((event) => streamHandlers[event.type]?.(event));
+  // Marked replayed: a call's duration isn't timed from the replay's clock.
+  replay.forEach((event) => streamHandlers[event.type]?.({ ...event, replayed: true }));
   if (!data.current_turn) {
     setTurnRunning(current.status === "running");
-    if (turnRunning && current.timing.activeTurn?.started_at) startLiveTurnTiming(current.timing.activeTurn.started_at, activeTurnId);
-  } else if (turnRunning) {
+    if (liveTurn.running && current.timing.activeTurn?.started_at) liveTurn.timing.start(current.timing.activeTurn.started_at, activeTurnId);
+  } else if (liveTurn.running) {
     // The replayed turn_started carries no id: the running turn's record's.
-    liveTurnId = activeTurnId;
+    liveTurn.timing.turnId = activeTurnId;
   }
   turnDom.flush();
   snapshotCards.current.forEach((card) => upsertCard(card));
@@ -893,19 +1204,8 @@ function setMarkdownWarning(warning) {
   markdownWarningEl.hidden = false;
 }
 
-// The turn-end re-read (turn_completed): the final answer's rendered
-// markdown, the status and the timing. Kept as turnEndRead, so an
-// answer_display re-read waits for it.
-let turnEndRead = 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 workerGone (through resetTurnView) and a re-render release it as
-// well as its own timeout: it must never hold the turn's answer forever.
-let displayPending = null;
-
-function releaseDisplayWait() {
-  displayPending?.finish();
-  displayPending = null;
+function setCapabilities(capabilities) {
+  pageCapabilities = capabilities && typeof capabilities === "object" ? capabilities : {};
 }
 
 async function readTurnEnd() {
@@ -913,7 +1213,7 @@ async function readTurnEnd() {
   const id = selected;
   // The line and the turn this read is for, before the await: a turn
   // queued behind this one may start (a new live line) before it lands.
-  const line = { el: liveTurnTimingEl, turnId: liveTurnId };
+  const line = liveTurn.timing.capture();
   try {
     const d = await getSession(id, { tail: true, recent: true, turnId: line.turnId });
     if (id !== selected) return;
@@ -921,8 +1221,9 @@ async function readTurnEnd() {
       if (Array.isArray(d.session.used_memory_names)) current.usedMemories = d.session.used_memory_names;
       if (d.session.status) current.status = d.session.status;
       if (!(await mergeTurnTiming(id, d.timing))) return;
-      finishTurnLine(line);
+      liveTurn.timing.finishLine(line);
       setMarkdownWarning(d.markdown_warning);
+      setCapabilities(d.capabilities);
       if (Array.isArray(d.messages)) applyFinalMarkdown(d.messages);
       updateInfoBar();
       const sess = allSessions.find(s=>s.id===selected);
@@ -931,7 +1232,7 @@ async function readTurnEnd() {
         sess.status = current.status;
       }
       render();
-      document.querySelectorAll(".card").forEach(el=>el.classList.toggle("active", el.dataset.id===selected));
+      paintActive();
     }
   } catch(_){}
 }
@@ -994,15 +1295,6 @@ function addEndBubble(text, { stopped = false } = {}) {
   if (!turnDom.holds?.()) historyEl.scrollTop = historyEl.scrollHeight;
 }
 
-// The notice of a turn that ended with no answer (turn_summary.empty_answer),
-// as a reload draws it (turn_view.js EMPTY_ANSWER_CLASS).
-function emptyAnswerEl(emptyAnswer) {
-  const el = document.createElement("div");
-  el.className = EMPTY_ANSWER_CLASS;
-  el.textContent = emptyAnswerLine(emptyAnswer);
-  return el;
-}
-
 // Everything a turn's end (completed, canceled, failed) closes: then its
 // end line (+endText+, the cancel or failed line), then the step cards that
 // left the collapsed block (card.js leavesBlock), where a reload puts them.
@@ -1010,13 +1302,13 @@ function endTurnView(kind, endText = null, { emptyAnswer = null, stopped = false
   setTurnRunning(false);
   // Every ended turn has a record (completed, canceled, failed); a worker
   // gone mid-turn is re-rendered (resync), which counts again.
-  if (kind !== "gone") turnsEnded += 1;
+  if (kind !== "gone") liveTurn.timing.ended += 1;
   // A completed turn with no answer: its notice where the answer goes
   // (the turn view places it), else after the turn; before the timing.
-  const endNote = emptyAnswer ? emptyAnswerEl(emptyAnswer) : null;
+  const endNote = emptyAnswer ? htmlElement(emptyAnswerHtml(emptyAnswer)) : null;
   const kept = turnDom.turnEnded({ kind, endNote, emptyAnswer: !!emptyAnswer }) || [];
   if (endNote && !endNote.isConnected) appendToHistory(endNote);
-  finishLiveTurnTiming(null, { canceled: kind === "canceled" });
+  liveTurn.timing.finish({ canceled: kind === "canceled" });
   if (endText) addEndBubble(endText, { stopped });
   if (kept.length) {
     kept.forEach((el) => appendToHistory(el));
@@ -1031,28 +1323,13 @@ function endTurnView(kind, endText = null, { emptyAnswer = null, stopped = false
 // turn starts, or steered when merged into a running turn. This tab's own
 // prompts are echoed at send (data-own) and tagged by their turn_enqueued.
 
-const BADGES = { queued: "queued", steered: "steered", failed: "failed" };
-
+// The bubble a reload draws (turn_html.js), with this page's own fields.
 function makeUserBubble(prompt, { state = null, label = null, enqueuedId = null, own = false, images = null } = {}) {
   const hint = historyEl.querySelector(".hint");
   if (hint) hint.remove();
-  const div = document.createElement("div");
-  div.className = "bubble user";
-  div.dataset.userContent = normalize(prompt);
-  div.setAttribute(COPY_SOURCE_ATTR, prompt);
-  if (own) div.dataset.own = "1";
-  if (enqueuedId) div.dataset.enqueuedId = enqueuedId;
-  if (label) {
-    const from = document.createElement("span");
-    from.className = "origin-label";
-    from.textContent = label;
-    div.appendChild(from);
-  }
-  const message = document.createElement("div");
-  message.className = "user-message";
-  message.innerHTML = userBodyHtml(prompt) + thumbsHtml(selected, images);
-  div.appendChild(message);
-  setBubbleState(div, state);
+  const div = htmlElement(userBubbleHtml({ content: prompt }, {
+    label, state, own, enqueuedId, key: normalize(prompt), thumbs: thumbsHtml(selected, images),
+  }));
   const follow = isNearBottom();
   appendToHistory(div);
   if (follow) historyEl.scrollTop = historyEl.scrollHeight;
@@ -1068,10 +1345,7 @@ function setBubbleState(bubble, state) {
   }
   bubble.classList.add(state);
   bubble.dataset.userState = state;
-  const badge = document.createElement("span");
-  badge.className = "state-badge";
-  badge.textContent = BADGES[state];
-  bubble.appendChild(badge);
+  bubble.insertAdjacentHTML("beforeend", stateBadgeHtml(state));
 }
 
 function bubbleById(enqueuedId) {
@@ -1091,18 +1365,18 @@ function untaggedOwnBubble(prompt) {
 // Returns the bubble of the turn a turn_started starts (the stage takes it
 // into its prompt line), else null.
 function applyPromptOps(event) {
-  if (event.type === "turn_started") wakeStart = !!event.continue && isReportClient(event.origin?.client_id);
-  const ops = promptOps(event, { myId: clientId, known: (id) => !!bubbleById(id), unmatchedMerge, wakeStart });
-  if (event.type === "input_merged") unmatchedMerge = false;
-  if (event.type === "pending_input_merged") unmatchedMerge = false;
+  if (event.type === "turn_started") liveTurn.wakeStart = !!event.continue && isReportClient(event.origin?.client_id);
+  const ops = promptOps(event, { myId: clientId, known: (id) => !!bubbleById(id), unmatchedMerge: liveTurn.unmatchedMerge, wakeStart: liveTurn.wakeStart });
+  if (event.type === "input_merged") liveTurn.unmatchedMerge = false;
+  if (event.type === "pending_input_merged") liveTurn.unmatchedMerge = false;
   let started = null;
   for (const op of ops) {
     if (op.op === "report") {
-      unmatchedMerge = "report";
+      liveTurn.unmatchedMerge = "report";
     } else if (op.op === "add") {
       const bubble = makeUserBubble(op.prompt, { state: op.state, label: op.label, enqueuedId: op.enqueuedId, images: op.images });
       if (op.state === "started") started = bubble;
-      if (event.type === "pending_input_merged") wakeStart = false;
+      if (event.type === "pending_input_merged") liveTurn.wakeStart = false;
     } else if (op.op === "tag") {
       if (bubbleById(op.enqueuedId)) continue;
       const echo = untaggedOwnBubble(op.prompt);
@@ -1122,7 +1396,7 @@ function applyPromptOps(event) {
     } else if (op.op === "steer") {
       const bubble = bubbleById(op.enqueuedId);
       if (bubble) setBubbleState(bubble, "steered");
-      else unmatchedMerge = true;
+      else liveTurn.unmatchedMerge = true;
     }
   }
   return started;
@@ -1150,7 +1424,7 @@ function showRecap(text, turnsSince = 0) {
   // A stale one sits where it was written, above the turns it doesn't cover.
   // Never in the stage: a recap is between turns.
   const before = recapPlace(turnPromptBubbles(), turnsSince);
-  keepFollowing(historyEl, () => (before ? historyEl.insertBefore(details, before) : appendAboveLiveTiming(historyEl, details, liveTurnTimingEl)));
+  keepFollowing(historyEl, () => (before ? historyEl.insertBefore(details, before) : appendAboveLiveTiming(historyEl, details, liveTurn.timing.el)));
 }
 
 // A turn started: the recap describes the chat before it.
@@ -1402,6 +1676,11 @@ function removeRecap() {
 let attachCopiedAt = 0;
 infoTextEl.addEventListener("click", (e) => {
   if (e.target.closest(".worker-restart")) restartWorker();
+  // Pushed as openAllView does, so the view's back returns here.
+  if (e.target.closest(".children-chip")) {
+    e.preventDefault();
+    openAllView();
+  }
 });
 infoTextEl.addEventListener("click", async (e) => {
   if (!e.target.closest(".copy-attach") || !selected) return;
@@ -1484,10 +1763,13 @@ function updateInfoBar() {
   // A delegated session names its parent, as a link to it.
   const parentChip = delegatedBy(current.parentId, allSessions.find((x) => x.id === current.parentId) || null);
   const parentHtml = parentChip ? `<a class="model parent" href="${escapeHtml(sessionHash(current.parentId))}" title="${escapeHtml(parentChip.title)}">delegated by ${escapeHtml(String(current.parentId).slice(0, 8))}</a>` : "";
+  // A parent names its delegates; the link opens all sessions.
+  const kids = childrenSummary({ id: selected }, allSessions);
+  const kidsHtml = kids ? `<a class="model children-chip${kids.waitingText ? " waiting" : ""}" href="${escapeHtml(ALL_SESSIONS_HASH)}" title="${escapeHtml(`${kids.title} (all sessions)`)}">${escapeHtml(kids.text)}${kids.waitingText ? ` · <span class="kids-waiting">${escapeHtml(kids.waitingText)}</span>` : ""}</a>` : "";
   const attachCmd = `chi --attach ${selected}`;
   const copied = Date.now() - attachCopiedAt < 2000;
   const copyHtml = `<button type="button" class="copy-attach" title="Copy &quot;${escapeHtml(attachCmd)}&quot; to attach a terminal">${copied ? "copied ✓" : "copy chi --attach"}</button>`;
-  const metaHtml = `<div class="meta"><span class="id" title="${escapeHtml(selected)}">${escapeHtml(idShort)}</span>${copyHtml}<span class="${statusClass}">${escapeHtml(current.status||"")}</span><span class="model${label.mismatch ? " served-mismatch" : ""}" title="${escapeHtml(label.title)}">${escapeHtml(label.text)}</span>${parentHtml}${current.usedMemories.length ? `<span class="model mem-chip" title="${escapeHtml(memChipTitle(current.usedMemories))}">${escapeHtml(memChipText(current.usedMemories))}</span>` : ""}<span class="dir" title="${escapeHtml(current.dir||"")}"><bdi>${escapeHtml(current.dir||"")}</bdi></span>${ctxText ? `<span class="model ctx" title="${escapeHtml(ctxTip)}">${escapeHtml(ctxText)}</span>` : ""}${speedTextNow ? `<span class="model speed" title="${escapeHtml(speedTip)}">${escapeHtml(speedTextNow)}</span>` : ""}${timingText ? `<span class="model session-time"></span>` : ""}${workerBadgeHtml()}</div>`;
+  const metaHtml = `<div class="meta"><span class="id" title="${escapeHtml(selected)}">${escapeHtml(idShort)}</span>${copyHtml}<span class="${statusClass}">${escapeHtml(current.status||"")}</span><span class="model${label.mismatch ? " served-mismatch" : ""}" title="${escapeHtml(label.title)}">${escapeHtml(label.text)}</span>${parentHtml}${kidsHtml}${current.usedMemories.length ? `<span class="model mem-chip" title="${escapeHtml(memChipTitle(current.usedMemories))}">${escapeHtml(memChipText(current.usedMemories))}</span>` : ""}<span class="dir" title="${escapeHtml(current.dir||"")}"><bdi>${escapeHtml(current.dir||"")}</bdi></span>${ctxText ? `<span class="model ctx" title="${escapeHtml(ctxTip)}">${escapeHtml(ctxText)}</span>` : ""}${speedTextNow ? `<span class="model speed" title="${escapeHtml(speedTip)}">${escapeHtml(speedTextNow)}</span>` : ""}${timingText ? `<span class="model session-time"></span>` : ""}${workerBadgeHtml()}</div>`;
   const previewHtml = `<div class="preview-line"><span class="preview">${escapeHtml(current.firstPreview || "—")}</span> · <span class="mem" title="${escapeHtml(current.usedMemories.join(", "))}">mem: ${escapeHtml(memText)}</span></div>`;
   // The session clock ticks every second while a turn runs: only its text
   // changes, the bar's other nodes (a tooltip, a button mid-press) stay.
@@ -1505,80 +1787,16 @@ function memoriesTooltip(used, preloaded, muted) {
 }
 
 function currentSessionDuration() {
-  if (turnRunning && current.timing.startedAt) {
+  if (liveTurn.running && current.timing.startedAt) {
     return elapsedSince(current.timing.startedAt);
   }
   return current.timing.sessionDurationMs;
 }
 
-function clearTimingInterval() {
-  if (timingInterval !== null) {
-    clearInterval(timingInterval);
-    timingInterval = null;
-  }
-}
-
-let liveTurnNumber = null;
-// The live line sits in the stage's status row, which already says the turn
-// runs ("running a tool"): it drops its own "running" there. It never moves
-// mid-turn (finishLiveTurnTiming rewrites it before any hand-off).
-let liveTurnTimingInStage = false;
-
-function startLiveTurnTiming(startedAt = new Date().toISOString(), turnId = null) {
-  clearTimingInterval();
-  current.timing.activeTurn = turnId ? { id: turnId, started_at: startedAt } : { started_at: startedAt };
-  liveTurnId = turnId || null;
-  // The turns ended so far, so this one comes next.
-  liveTurnNumber = turnsEnded + 1;
-  liveTurnNote = "";
-  liveTurnTimingEl = document.createElement("div");
-  liveTurnTimingEl.className = "turn-timing live";
-  // The stage's status row while it holds the turn: the line moves into the
-  // history with it.
-  const stageHost = turnDom.timingHost?.() || null;
-  liveTurnTimingInStage = !!stageHost;
-  (stageHost || historyEl).appendChild(liveTurnTimingEl);
-  updateLiveTiming();
-  timingInterval = setInterval(updateLiveTiming, 1000);
-}
-
 // The stage takes a running turn's rows (its extras); else the history.
 function appendToHistory(el) {
   if (turnDom.place?.(el)) return;
-  appendAboveLiveTiming(historyEl, el, liveTurnTimingEl);
-}
-
-function updateLiveTiming() {
-  const duration = elapsedSince(current.timing.activeTurn?.started_at);
-  if (liveTurnTimingEl && duration !== null) {
-    liveTurnTimingEl.textContent = turnTimingText(liveTurnNumber, duration, { running: !liveTurnTimingInStage }) + (liveTurnNote ? ` · ${liveTurnNote}` : "");
-  }
-  updateInfoBar();
-}
-
-// Set (or clear, "") what the running turn waits on.
-function setLiveTurnNote(text) {
-  if (liveTurnNote === text) return;
-  liveTurnNote = text;
-  if (current.timing.activeTurn) updateLiveTiming();
-}
-
-// A canceled turn's line says so (+canceled+, or its record's status), as
-// a reload's does.
-function finishLiveTurnTiming(record = null, { canceled = false } = {}) {
-  const duration = Number.isFinite(Number(record?.duration_ms))
-    ? Number(record.duration_ms)
-    : elapsedSince(current.timing.activeTurn?.started_at);
-  if (liveTurnTimingEl && duration !== null) {
-    liveTurnNote = "";
-    liveTurnTimingEl.classList.remove("live");
-    const at = record ? current.timing.turnRecords.indexOf(record) : -1;
-    liveTurnTimingEl.textContent = turnTimingText(at >= 0 ? at + 1 : liveTurnNumber, duration,
-      { canceled: canceled || record?.status === "canceled" });
-  }
-  current.timing.activeTurn = null;
-  clearTimingInterval();
-  updateInfoBar();
+  appendAboveLiveTiming(historyEl, el, liveTurn.timing.el);
 }
 
 // A turn-end re-read's timing (?tail=1&recent=1: the newest turn's records
@@ -1587,7 +1805,7 @@ function finishLiveTurnTiming(record = null, { canceled = false } = {}) {
 // turn that started meanwhile keeps its line and its own active turn.
 // @return false when the session changed meanwhile
 async function mergeTurnTiming(id, data) {
-  const keepActive = () => (turnRunning ? current.timing.activeTurn : null);
+  const keepActive = () => (liveTurn.running ? current.timing.activeTurn : null);
   const merged = mergeTiming(current.timing, data);
   current.timing = { ...merged.timing, activeTurn: keepActive() };
   if (merged.short) {
@@ -1599,30 +1817,10 @@ async function mergeTurnTiming(id, data) {
       if (id !== selected) return false;
     }
   }
-  turnsEnded = Math.max(turnsEnded, current.timing.turnRecords.length);
+  liveTurn.timing.ended = Math.max(liveTurn.timing.ended, current.timing.turnRecords.length);
   return true;
 }
 
-// Finish the timing 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 id (an older worker's events): the last
-// record. No record: the line stays as the turn's end left it. The ticker
-// stops only if that line is still the live one.
-function finishTurnLine(line) {
-  const records = current.timing.turnRecords;
-  const record = line.turnId ? records.find((r) => r.id === line.turnId) : records[records.length - 1];
-  if (line.el === liveTurnTimingEl) {
-    current.timing.activeTurn = null;
-    clearTimingInterval();
-  }
-  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" });
-  }
-  updateInfoBar();
-}
-
 function updateFirstPeek() {
   if (current.ctxPct !== null && current.ctxPct > 20 && current.firstPreview) {
     firstPeekEl.textContent = current.firstPreview;
@@ -1640,7 +1838,7 @@ function setUsedMemories(names) {
   if (sess) {
     sess.used_memory_names = current.usedMemories.slice();
     render();
-    document.querySelectorAll(".card").forEach(el=>el.classList.toggle("active", el.dataset.id===selected));
+    paintActive();
   }
 }
 
@@ -1683,7 +1881,7 @@ function workerGone(id, { opened = true } = {}) {
   if (id !== selected) return;
   // A turn that was running is over: its worker can't finish it.
   const stopped = stoppingId === id;
-  const endText = workerGoneText({ turnRunning, stopped });
+  const endText = workerGoneText({ turnRunning: liveTurn.running, stopped });
   if (endText) {
     endTurnView("gone", endText, { stopped });
     if (!stopped) setLiveStatus("idle");
@@ -1712,7 +1910,7 @@ const streamHandlers = {
     // Route the chunk's bytes to the text bubble and the thinking block (see
     // chunk_router.js). Raw `content` is only a fallback for an older server.
     const { text, thinking } = routeChunk(data);
-    setLiveTurnNote("");
+    liveTurn.timing.setNote("");
     turnDom.chunk({ text, thinking, iteration: data.iteration ?? null });
     const pct = extractCtxPct(data, current.ctxWindow);
     if (pct !== null && !Number.isNaN(pct)) {
@@ -1723,11 +1921,11 @@ const streamHandlers = {
   },
   generation_started: (data) => {
     if (data?.context_window_tokens) current.ctxWindow = data.context_window_tokens;
-    setLiveTurnNote("");
+    liveTurn.timing.setNote("");
     turnDom.generationStarted(data || {});
   },
   generation_completed: (data) => {
-    setLiveTurnNote("");
+    liveTurn.timing.setNote("");
     if (data?.served_model) current.served = [data.served_model, data.requested_model];
     // The generation's speed and the session's token totals, from the server.
     current.timing.tokens = generationTokens(current.timing.tokens, data);
@@ -1764,10 +1962,9 @@ const streamHandlers = {
     const promptBubble = applyPromptOps(data);
     setTurnRunning(true);
     setLiveStatus("running");
-    clearTimingInterval();
-    liveTurnTimingEl = null;
+    liveTurn.timing.detach();
     turnDom.turnStarted({ ...data, promptBubble });
-    startLiveTurnTiming(data.started_at, data.turn_id || null);
+    liveTurn.timing.start(data.started_at, data.turn_id || null);
   }),
   turn_completed: async (data) => {
     endTurnView("completed", null, { emptyAnswer: data.turn_summary?.empty_answer || null });
@@ -1778,9 +1975,9 @@ const streamHandlers = {
     // that dies before it never sends one: workerGone releases the wait, and
     // displayWait's timeout ends it whatever happens (4.14).
     const display = data.display_pending ? displayWait() : null;
-    if (display) displayPending = display;
-    turnEndRead = readTurnEnd();
-    await turnEndRead;
+    if (display) liveTurn.displayPending = display;
+    liveTurn.endRead = readTurnEnd();
+    await liveTurn.endRead;
     // The answer bubble the turn view held at its box's height pops now
     // that the rendered markdown is in it (or the re-read failed: then the
     // plain text pops), and the display if one was coming, so the links
@@ -1793,13 +1990,13 @@ const streamHandlers = {
   // turn_completed, so re-read the answer once that read is done.
   answer_display: async (data) => {
     try {
-      await turnEndRead;
+      await liveTurn.endRead;
       if (!selected || !data.display) return;
       const d = await getSession(selected, { tail: true, recent: true });
       if (Array.isArray(d.messages)) applyFinalMarkdown(d.messages);
     } catch (_) {
     } finally {
-      releaseDisplayWait();
+      liveTurn.releaseDisplay();
     }
   },
   turn_canceled: (data) => {
@@ -1811,8 +2008,8 @@ const streamHandlers = {
   // stays up: it rolls the turn back and hands the prompt back
   // (prompt_restored), and the prompts queued behind it run as usual.
   turn_failed: (data) => {
-    lastFailedText = failedTurnText(data);
-    endTurnView("failed", lastFailedText);
+    liveTurn.failedText = failedTurnText(data);
+    endTurnView("failed", liveTurn.failedText);
     setLiveStatus("idle");
   },
   // The rolled-back turn left the session: render it from the server again,
@@ -1826,8 +2023,8 @@ const streamHandlers = {
       fitPrompt();
     }
     if (restoredImages?.length) setChips(restoredChips(selected, restoredImages));
-    const failedText = lastFailedText;
-    lastFailedText = null;
+    const failedText = liveTurn.failedText;
+    liveTurn.failedText = null;
     await resync();
     // The re-render drew it from the session (failed_turn): drawn again
     // below with this event's label and images.
@@ -1904,19 +2101,24 @@ const streamHandlers = {
   recap_ready: (data) => {
     // After the turn it covers, never above it.
     turnDom.handOff?.({ immediate: true });
-    if (!turnRunning) showRecap(data.recap);
+    if (!liveTurn.running) showRecap(data.recap);
   },
   guardrail_warning: (data) => showGuardrailWarning(data.message, data.label || "guardrails"),
-  // A notice during a turn is a row of its current step.
-  hook_notice: (data) => { if (!turnDom.notice(data)) showHookNotice(data); },
+  // A notice during a turn is a row of its current step. One the page
+  // shows elsewhere (a hook's links in the rendered answer) isn't drawn,
+  // not even in the stage trail; a joined turn's notices come here too.
+  hook_notice: (data) => {
+    if (shownElsewhere(data, pageCapabilities)) return;
+    if (!turnDom.notice(data)) showHookNotice(data);
+  },
   // The loop asks again after an empty answer: a row of the empty step
   // (a reload puts it back from the snapshot's cards).
   empty_answer_retry: (data) => { turnDom.notice({ line: emptyRetryLine(data) }); },
   steer_cut: (data) => { turnDom.notice({ line: steerCutLine(data) }); },
   // The provider is asked again after an error, or the turn waits for
   // plugins' setup: a note on the live timing line until it streams.
-  generation_retrying: (data) => setLiveTurnNote(retryStatusLine(data)),
-  plugin_init_wait: (data) => setLiveTurnNote(initWaitLine(data)),
+  generation_retrying: (data) => liveTurn.timing.setNote(retryStatusLine(data)),
+  plugin_init_wait: (data) => liveTurn.timing.setNote(initWaitLine(data)),
   plugin_init_started: (data) => onInitEvent("plugin_init_started", data),
   plugin_init_finished: (data) => onInitEvent("plugin_init_finished", data),
   // A plugin's card, or a new version of one (the same id).
@@ -1939,12 +2141,12 @@ const streamHandlers = {
 async function refreshTimingFromSession() {
   if (!selected) return;
   const id = selected;
-  const line = { el: liveTurnTimingEl, turnId: liveTurnId };
+  const line = liveTurn.timing.capture();
   try {
     const data = await getSession(id, { tail: true, recent: true, turnId: line.turnId });
     if (id !== selected) return;
     if (data.session?.status) current.status = data.session.status;
-    if (await mergeTurnTiming(id, data.timing)) finishTurnLine(line);
+    if (await mergeTurnTiming(id, data.timing)) liveTurn.timing.finishLine(line);
   } catch (_) {}
 }
 
@@ -2429,25 +2631,40 @@ function markArchived(ids, archived) {
   allSessions = allSessions.map((s) => (set.has(s.id) ? { ...s, archived } : s));
 }
 
-async function setArchived(id, archive, { undo = true } = {}) {
-  const short = id.slice(0, 8);
-  let result;
-  // A live worker is stopped by the archive: its stream ending is a stop.
-  if (archive) stoppingId = id;
+// One archive / unarchive request, the core the info bar, a card's button
+// and a batch share. The ids in the answer flip in the list at once. When
+// the open session's worker was stopped (it, or a delegate of the archived
+// one), its stream ending is a stop, not a lost worker.
+// @return {ok: true, result} | {ok: false, error}
+async function archiveOne(id, archive) {
+  // A live worker in the tree is stopped by the archive: the open
+  // session's stream ending then is a stop.
+  const mine = archive && selected && inTree(allSessions, id, selected) ? selected : null;
+  if (mine) stoppingId = mine;
   try {
-    result = archive ? await archiveSession(id) : await unarchiveSession(id);
+    const result = archive ? await archiveSession(id) : await unarchiveSession(id);
     markArchived(archive ? result.archived : result.unarchived, archive);
-    if (archive && id === selected && (result.stopped || []).includes(id)) {
+    if (mine && mine === selected && (result.stopped || []).includes(mine)) {
       // Its worker is gone: don't wait for its stream to notice.
       streamControl?.close();
       current.status = "stopped";
-      workerGone(id);
+      workerGone(mine);
     }
-  } catch (e) {
-    alert(`Could not ${archive ? "archive" : "unarchive"} session ${short}: ${e.message}`);
-    return;
+    return { ok: true, result };
+  } catch (error) {
+    return { ok: false, error };
   } finally {
-    if (archive) stoppingId = null;
+    // Another call may have taken it meanwhile: clear only our own.
+    if (mine && stoppingId === mine) stoppingId = null;
+  }
+}
+
+async function setArchived(id, archive, { undo = true } = {}) {
+  const short = id.slice(0, 8);
+  const answer = await archiveOne(id, archive);
+  if (!answer.ok) {
+    alert(`Could not ${archive ? "archive" : "unarchive"} session ${short}: ${answer.error.message}`);
+    return;
   }
   render();
   updateInfoBar();
@@ -2482,7 +2699,7 @@ const annotateBar = createAnnotateBar({
   presets: parsePresets(document.body.dataset.annotatePresets),
   canAnnotate: () => !!selected && current.owner !== "tui",
   roots: turnRoots,
-  isLive: (root) => turnRunning && turnDom.containsLive(root),
+  isLive: (root) => liveTurn.running && turnDom.containsLive(root),
   onQuote: (text) => {
     promptEl.value = appendQuote(promptEl.value, text);
     fitPrompt();
@@ -2521,6 +2738,7 @@ function applyStripHidden() {
   }));
 }
 function setStripHidden(hidden) {
+  if (hidden) familyPop.close();
   try { localStorage.setItem("chi_strip_hidden", hidden ? "1" : "0"); } catch (_) {}
   stripShownWhileShort = !hidden && shortWindow.matches;
   applyStripHidden();
@@ -2533,17 +2751,26 @@ shortWindow.addEventListener("change", () => {
 $("#stripShow").addEventListener("click", () => setStripHidden(false));
 $("#stripHideTop").addEventListener("click", () => setStripHidden(true));
 
-$("#filter").addEventListener("input", renderAll);
+$("#filter").addEventListener("input", () => {
+  searchToggles.clear();
+  renderAll();
+});
 // A list whose order was held under the pointer (listOrder) catches up.
 topStripEl.addEventListener("pointerleave", () => {
-  if (heldLists.has(topStripEl)) renderTop(stripSessions());
+  // Not while its family popover is open: the pointer went there (close() catches up).
+  if (heldLists.has(topStripEl) && !familyPop.isOpen()) renderTop(stripCards());
 });
 allListEl.addEventListener("pointerleave", () => {
   if (heldLists.has(allListEl) && allViewOpen()) renderAll();
 });
-// Esc leaves the all-sessions view.
+// Esc leaves select mode first, then the all-sessions view.
 document.addEventListener("keydown", (e) => {
-  if (e.key === "Escape" && allViewOpen()) closeAllView();
+  if (e.key !== "Escape" || !allViewOpen()) return;
+  if (selecting.on) {
+    if (!selecting.running) leaveSelect();
+    return;
+  }
+  closeAllView();
 });
 applyView();