samagotchi 0.54.0 → 0.56.0

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

@@ -23,52 +23,56 @@ import {
 } from "./data.js";
 import { createContextChips } from "./context_chips.js";
 import {
-  chipHtml as llmContextChipHtml, chipModel as llmContextChipModel, choiceWords, createLlmContextControl, NEW_CHAT,
+  chipModel as llmContextChipModel, choiceWords, createLlmContextControl, NEW_CHAT,
   withChoice,
 } from "./llm_context_chip.js";
 import {
-  chipHtml as thinkingChipHtml, chipModel as thinkingChipModel, createThinkingControl,
+  chipModel as thinkingChipModel, createThinkingControl,
   withChoice as withThinkingChoice,
 } from "./thinking_chip.js";
-import { renderStable } from "./stable_html.js";
+import { createReasoningHistoryControl } from "./reasoning_history_chip.js";
+import { renderInfoBar } from "./info_bar.js";
 import { createShownTexts } from "./shown_texts.js";
 import { MODEL_KEY } from "./model_pick.js";
-import { emptySessionState } from "./session_state.js";
+import { emptySessionState, sessionStateFrom } 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, ownerBadge, previewForCard, firstPreview, relativeTime, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy, childrenSummary, promptNotesChip } from "./format.js";
+import { escapeHtml, noteHtml, normalize, steerRowHtml, firstPreview, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy, childrenSummary, promptNotesChip } from "./format.js";
 import { createTurnView, turnHistoryNodes } 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 { CONTINUE_OPENER, allViewChains, chainChipHtml, chainTitle, isOpener, chainDate, chainNeighbours, chainRowsHtml, continueRefusal, continuedText, foldChains, openChildrenHtml } from "./chains.js";
+import { CONTINUE_OPENER, isOpener, chainDate, chainNeighbours, continueRefusal, continuedText, openChildrenHtml } from "./chains.js";
 import { createTaskStopper } from "./task_stop.js";
 import { appendQuote } from "./annotations.js";
 import { parsePresets } from "./annotate_presets.js";
 import { createAnnotateBar } from "./annotate_bar.js";
 import { COPY_SOURCE_ATTR, copySource, copyText, installCopy, showsAnswer } from "./copy.js";
-import { routeChunk } from "./chunk_router.js";
-import { extractCtxPct, savedCtxPct, cardCtxText, ctxBarText, ctxBarTip, generationTokens, lastSpeedText, speedText } from "./ctx.js";
+import { ctxBarText, ctxBarTip, lastSpeedText, speedText } from "./ctx.js";
 import { createQuestionCards } from "./question_cards.js";
-import { cardClass, cardInnerHtml, cardPlace, isCard, isNoticeCard, noticeInnerHtml, shownElsewhere, splitSnapshotCards, turnNoticePlace } from "./card.js";
+import { cardClass, cardInnerHtml, cardPlace, isCard, isNoticeCard, noticeInnerHtml, 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";
 import { ALL_SESSIONS_HASH, sessionHash, sessionIdFromHash } from "./route.js";
-import { allScopeHref, cardFolder, projectScopeHref, scopeDir } from "./scope.js";
+import { allScopeHref, projectScopeHref, scopeDir } from "./scope.js";
 import { shouldFollowScroll, keepFollowing } from "./scroll.js";
-import { SHORT_WINDOW_QUERY, stripAutoHidden, stripColumns, stripShowParts } from "./strip.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 { SHORT_WINDOW_QUERY, stripAutoHidden } from "./strip.js";
+import { applySessionEvent, flattenFamilies, inTree, sortedByUpdated } from "./sessions_list.js";
 import { createNotifications } from "./notifications.js";
 import { tabTitle, topBarTitle } from "./session_title.js";
 import { restartConfirmText, versionNotice, workerBadge } from "./update_notice.js";
-import { anchorInsertIndex, commandAnchor, isShellCommandLine, keepsCommandBubble } from "./kept_commands.js";
 import {
-  appendAboveLiveTiming, cancelLineText, formatDuration, mergeTiming, normalizeTiming, sessionDurationNow, STOPPED_LINE_CLASS,
+  appendAboveLiveTiming, formatDuration, mergeTiming, normalizeTiming, sessionDurationNow, STOPPED_LINE_CLASS,
 } from "./timing.js";
 import { createLiveTurn } from "./live_turn.js";
+import { installRefClicks, setRefKinds } from "./refs.js";
 import { DONE_MS, applyInitEvent, dropDone, initRowHtml, newInitTasks, seedInitTasks } from "./init_row.js";
-import { clientLabel, commandView, isReportClient, displayWait, dropEarlyRestores, emptyRetryLine, historyHasCommandBubble, hookNoticeLabel, initWaitLine, isOwn, llmContextHover, llmContextLine, sessionCommandLine, keepEarlyRestore, newClientId, noticeLine, promptOps, reminderText, restoreAction, composerAfterAck, restoreOnAck, replaysDrawnTurn, retryStatusLine, snapshotEvents, steerChoiceRoute, steerCutLine, startPageReplyOrHint, turnOutput, unknownCommandHint, webLocalReply, workerGoneText } from "./turn_events.js";
+import { isReportClient, hookNoticeLabel, llmContextNotice, newClientId, noticeLine, promptOps, snapshotEvents, workerGoneText } from "./turn_events.js";
+import { applyConfirm, drawCommandBubble, keptCommandBubbles, restoreCommandBubbles } from "./commands.js";
+import { createComposerCommands, routeComposerLine, routeSessionLine } from "./composer.js";
+import { composerAfterAck, dropEarlyRestores, restoreOnAck } from "./restore.js";
+import { createStreamHandlers } from "./stream_handlers.js";
+import { createListsView } from "./lists_view.js";
 
 const $ = (s) => document.querySelector(s);
 const topStripEl = $("#topStrip");
@@ -131,6 +135,15 @@ const thinkingControl = createThinkingControl({
   running: () => liveTurn.running,
   run: (line) => runSessionCommand(line),
 });
+// The open session's reasoning history chip, after the thinking one (a
+// chat host's only): /reasoning-history runs in the session's worker.
+const reasoningHistoryControl = createReasoningHistoryControl({
+  el: infoTextEl,
+  summary: () => (selected ? current.reasoningHistory : null),
+  session: () => selected,
+  running: () => liveTurn.running,
+  run: (line) => runSessionCommand(line),
+});
 // The start page's thinking chip: the picked model's level, and a level
 // for the next new chat only (sent with its create, then dropped).
 const thinkingNewEl = $("#thinkingNew");
@@ -170,7 +183,11 @@ 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.
+// And what this viewer can do (editor: open a path in this machine's
+// editor; per request), with the editor's URL template (editor_url) next
+// to it: refs.js's actions read both (pageViewer).
 let pageCapabilities = {};
+let pageEditorUrl = null;
 const promptEl = $("#prompt");
 const actionBtn = $("#actionBtn");
 const cancelBtn = $("#cancelBtn");
@@ -286,7 +303,7 @@ async function refresh() {
     allSessions = [];
     renderScope();
   }
-  render();
+  lists.render();
 }
 
 // The list as a projection of the hub's events: a snapshot on every
@@ -298,14 +315,14 @@ function openSessionEvents() {
       noticeVersions(data);
       notifications.noticeSessions("snapshot", data);
       allSessions = applySessionEvent(allSessions, "snapshot", data);
-      render();
+      lists.render();
       const sess = allSessions.find((s) => s.id === selected);
       if (sess) followSelectedSession(sess);
     },
     session: (data) => {
       notifications.noticeSessions("session", data);
       allSessions = applySessionEvent(allSessions, "session", data);
-      render();
+      lists.render();
       if (data.session && data.session.id === selected) followSelectedSession(data.session);
       // Its children chip; its chain's ← → links (a link that continues it, its previous one).
       else if (selected && (data.session?.parent_id === selected || data.session?.continues === selected
@@ -313,12 +330,11 @@ function openSessionEvents() {
     },
     session_gone: (data) => {
       notifications.noticeSessions("session_gone", data);
-      selecting.picked.delete(data.id);
-      selecting.skipReasons.delete(data.id);
+      lists.forget(data.id);
       const next = applySessionEvent(allSessions, "session_gone", data);
       if (next !== allSessions) {
         allSessions = next;
-        render();
+        lists.render();
         if (selected) updateInfoBar(); // a deleted child leaves the children chip, a deleted chain link its ← → link
       }
       leaveGoneSession(data.id, "deleted");
@@ -399,582 +415,30 @@ function renderScope() {
   });
 }
 
-// The strip, its count and the hidden strip's pill leave archived sessions
-// out; the all view shows them with "include archived". allSessions keeps
-// them all (parent chips, the open session).
-function shownSessions() {
-  return listedSessions(allSessions, false);
-}
-
-function allViewSessions() {
-  return listedSessions(allSessions, $("#includeArchived").checked);
-}
-
-function filterQuery() {
-  return $("#filter").value.trim().toLowerCase();
-}
-
-// The page's sessions by id, built again only when the list changed.
-let byIdOf = { list: null, map: new Map() };
-function sessionsById() {
-  if (byIdOf.list !== allSessions) byIdOf = { list: allSessions, map: new Map(allSessions.map((s) => [s.id, s])) };
-  return byIdOf.map;
-}
-
-// A card's title: its preview, or its chain's first link's for a link
-// titled with the opener (chains.js chainTitle; display only).
-function cardTitle(s) {
-  return chainTitle(s, sessionsById());
-}
-
-// Whether a session matches the all view's search +q+ (lower case).
-function matchesFilter(s, q) {
-  return cardTitle(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 / 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. A family in a session chain (chains.js foldChains) carries its
-// `day N` chip, which opens the other links in a popover.
-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(cardTitle(s));
-  const memTitle = s.used_memory_names && s.used_memory_names.length ? `mem: ${s.used_memory_names.join(", ")}` : "";
-  const ago = relativeTime(ts);
-  const timeHtml = ago ? `<span class="time" title="${escapeHtml(new Date(ts).toLocaleString())}">${escapeHtml(ago)}</span>` : "";
-  const folder = cardFolder(s.working_directory, scope.projectName);
-  const folderHtml = folder ? `<span class="folder" title="${escapeHtml(s.working_directory)}">${escapeHtml(folder)}</span>` : "";
-  const archivedHtml = s.archived ? `<span class="archived-badge" title="Archived: hidden from the lists, kept for good">archived</span>` : "";
-  const ctx = cardCtxText(s.ctx_pct);
-  const ctxHtml = ctx ? `<span class="ctx" title="${escapeHtml(ctxBarTip(s.tokens, s.memory_index, { pct: s.ctx_pct }))}">${escapeHtml(ctx)}</span>` : "";
-  const waiting = waitingBadge(s);
-  const waitingHtml = waiting ? `<span class="attn attn-${waiting.kind}" title="${escapeHtml(waiting.title)}">${escapeHtml(waiting.text)}</span>` : "";
-  // A turn a hook stopped wears its own badge, unless the session waits on
-  // the user (the waiting badge wins: the stop is behind the need).
-  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;
-  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 = !!family && familyWaits(family);
-  const chainHtml = family?.chain ? chainChipHtml(family, { open: chainOpenHead() === s.id }) : "";
-  const kidsHtml = fam ? familyChipHtml(fam, { open }) : "";
-  const rowsHtml = fam && rows && open ? familyRowsHtml(fam, { activeId: selected, matchIds, archivable: !selectable }) : "";
-  // Its delegates and its chain's other links: the card is .contains-active while one is open.
-  const memberIds = [...(fam ? fam.members.map((m) => m.session.id) : []),
-    ...(family?.chain ? family.chain.links.map((x) => x.id).filter((id) => id !== s.id) : [])];
-  const membersAttr = memberIds.length ? ` data-members="${escapeHtml(memberIds.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)}${chainHtml}${kidsHtml}${ownerBadgeHtml(s)}${archivedHtml}</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.
-function parentChipHtml(s) {
-  const chip = delegatedBy(s.parent_id, allSessions.find((x) => x.id === s.parent_id) || null);
-  return chip ? `<span class="parent" title="${escapeHtml(chip.title)}">${escapeHtml(chip.text)}</span>` : "";
-}
-
-function ownerBadgeHtml(s) {
-  const badge = ownerBadge(s.owner, s.id);
-  return badge ? `<span class="owner ${badge.kind}" title="${escapeHtml(badge.title)}">${escapeHtml(badge.text)}</span>` : "";
-}
-
-// The strip's card count follows the window: more cards on wide screens
-// (each capped at 440 px) instead of 3 stretched ones. main's 16 px padding
-// sits on both sides; measuring main works while the strip is hidden too.
-let stripCols = 3;
-function fitStripColumns() {
-  stripCols = stripColumns(topStripEl.parentElement.clientWidth - 32);
-  topStripEl.style.setProperty("--strip-cols", stripCols);
-}
-
-// 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. A hidden list holds nothing: the
-// strip keeps :hover for a moment after a click on its All sessions tile
-// hid it, and an update held then brought it back from the all view in an
-// order nobody saw (a waiting family behind). +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, 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 = el.getClientRects().length > 0
-    && ((canHover && el.matches(":hover")) || (el === topStripEl && familyPop.isOpen()) || chainPopIn(el));
-  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(idOf));
-  return ordered;
-}
-
-// 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(foldChains(families(shownSessions(), { order: "list" }), allSessions)), 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({
+// The session lists (lists_view.js): the strip, all sessions, their cards,
+// select mode, the family and chain popovers.
+const lists = createListsView({
   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);
-
-// A chain's popover (chains.js): the other links of the chain a card's
-// `day N` chip stands for, under the chip, in the strip or all sessions
-// (the list it was opened from: chainFrom). A row opens that link.
-let chainFamilies = new Map(); // head id → family, as the lists last drew it
-let chainFrom = null; // the list element the open popover's chip is in
-const chainPop = createFamilyPop({
-  id: "chainPop",
-  doc: document,
-  win: window,
-  rowsFor: (id) => {
-    const f = chainFamilies.get(id);
-    return f?.chain ? chainRowsHtml(f, { activeId: selected }) : null;
-  },
-  anchorFor: (id) => (chainFrom ? [...chainFrom.querySelectorAll(".card[data-id] .chain-chip")].find((chip) => chip.closest(".card").dataset.id === id) || null : null),
-  onPick: (id) => {
-    chainPop.close();
-    if (allViewOpen()) leaveAllView(sessionHash(id));
-    select(id);
-  },
-  // chainFrom stays (Esc focuses the chip again after the close); only an
-  // open popover holds a list (chainPopIn).
-  onClose: () => {
-    if (chainFrom === topStripEl && heldLists.has(topStripEl) && !(canHover && topStripEl.matches(":hover"))) renderTop(stripCards());
-  },
-});
-function chainOpenHead() {
-  return chainPop.openHead();
-}
-function chainPopIn(el) {
-  return chainPop.isOpen() && chainFrom === el;
-}
-function toggleChainPop(from, id, e) {
-  if (chainPop.openHead() === id && chainFrom === from) {
-    chainPop.close();
-    return;
-  }
-  chainPop.close();
-  chainFrom = from;
-  chainPop.open(id);
-  // From the keyboard the focus goes into the popover; Esc brings it back.
-  if (e?.detail === 0 && chainPop.isOpen()) $("#chainPop .fr-open")?.focus();
-}
-window.addEventListener("keydown", (e) => chainPop.onKeydown(e), true);
-document.addEventListener("pointerdown", (e) => chainPop.onPointerDown(e), true);
-document.addEventListener("scroll", () => chainPop.reposition(), true);
-
-function render() {
-  fitStripColumns();
-  renderTop(stripCards());
-  if (allViewOpen()) renderAll();
-}
-
-let stripResizeTimer = null;
-window.addEventListener("resize", () => {
-  clearTimeout(stripResizeTimer);
-  stripResizeTimer = setTimeout(() => {
-    const before = stripCols;
-    fitStripColumns();
-    if (stripCols !== before && allSessions.length) renderTop(stripCards());
-    familyPop.reposition();
-    chainPop.reposition();
-  }, 150);
-});
-
-// 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 chainChip = e.target.closest(".chain-chip");
-      if (chainChip) {
-        e.stopPropagation();
-        toggleChainPop(container, el.dataset.id, e);
-        return;
-      }
-      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;
-      }
-      // 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);
-    });
-  });
-  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 open session's card may have come into the strip or left it.
-  updateSessionTitle();
-}
-
-// 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]));
-  noteChainFamilies(cards);
-  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();
-    chainPop.close();
-    return;
-  }
-  // Only archived sessions: no cards, but the tile stays, the way to them.
-  if (!allSessions.length) {
-    topStripEl.innerHTML = "";
-    familyPop.close();
-    chainPop.close();
-    return;
-  }
-  const n = shownSessions().length;
-  const count = n || allSessions.length === n
-    ? `${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 = 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();
-  if (chainFrom === topStripEl) chainPop.refresh();
-}
-
-// The chain families a list drew: the popover's rows come from them.
-function noteChainFamilies(fams) {
-  for (const f of fams) {
-    if (f.chain) chainFamilies.set(f.head.id, f);
-    else chainFamilies.delete(f.head.id);
-  }
-}
-
-// The hidden strip's pill: "▾ 5 sessions · ● 1 live · ● 1 waiting",
-// following the list: its sessions, the number the All sessions tile
-// shows, and the live and waiting ones (a waiting delegate too).
-function renderStripShow() {
-  const shown = shownSessions();
-  const { count, live, waiting } = stripShowParts(shown);
-  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 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 q = filterQuery();
-  // A search and the archived ones see every link as a card (allViewChains).
-  const all = allViewChains(families(listed), allSessions, { query: q, includeArchived: $("#includeArchived").checked });
-  noteChainFamilies(all);
-  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>`;
-    if (chainFrom === allListEl) chainPop.refresh();
-    return;
-  }
-  // A hub event redraws the list under a checkbox or a chip the keyboard is on.
-  const focusSel = [".card-pick", ".family-chip", ".chain-chip"].find((sel) => document.activeElement?.matches?.(`#allList ${sel}`));
-  const focused = focusSel ? { id: document.activeElement.closest(".card")?.dataset.id, sel: focusSel } : 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();
-  if (chainFrom === allListEl) chainPop.refresh();
-}
-
-// ── 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();
+  topStripEl,
+  allListEl,
+  sessions: () => allSessions,
+  selected: () => selected,
+  scope,
+  scopeError: () => scopeError,
+  eventsLive: () => !!eventsControl,
+  refresh: () => refresh(),
+  select: (id) => select(id),
+  confirmDelete: (id) => confirmDelete(id),
+  setArchived: (id, archive) => setArchived(id, archive),
+  archiveOne: (id, archive) => archiveOne(id, archive),
+  updateInfoBar: () => updateInfoBar(),
+  updateSessionTitle: () => updateSessionTitle(),
+  showToast: (text, action) => showToast(text, action),
+  allViewOpen: () => allViewOpen(),
+  openAllView: () => openAllView(),
+  leaveAllView: (hash) => leaveAllView(hash),
+  setStripHidden: (hidden) => setStripHidden(hidden),
 });
 
 // Delete a session (the info bar's button, an all-sessions card's ✕) after
@@ -996,7 +460,7 @@ async function confirmDelete(id) {
   }
   allSessions = allSessions.filter((s) => s.id !== id);
   if (selected === id) clearSelection();
-  render();
+  lists.render();
 }
 
 // All sessions: its own view at #/sessions, so the browser's back button
@@ -1044,19 +508,19 @@ function applyView() {
   if (!open) {
     allViewPushed = false;
     // A running batch ends on its own and clears the picks then.
-    if (selecting.on && !selecting.running) leaveSelect();
+    if (lists.selecting.on && !lists.selecting.running) lists.leaveSelect();
     topStripEl.scrollLeft = 0; // a phone's strip scrolls sideways to the tile
   }
   document.body.classList.toggle("all-view", open);
   updateSessionTitle();
   // Its chip was in the list just hidden (the strip, or all sessions).
-  chainPop.close();
+  lists.chainPop.close();
   if (open) {
-    familyPop.close(); // the strip is hidden in the all view
+    lists.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);
-    renderAll();
+    lists.renderAll();
     if (!eventsControl) refresh();
     $("#filter").select();
   }
@@ -1151,7 +615,7 @@ function setLiveStatus(status) {
     // snapshot or the all view re-sorts (no card jumping under the pointer;
     // a session event replaces it in place too, see sessions_list.js).
     allSessions[i] = withLiveStatus(allSessions[i], status);
-    render();
+    lists.render();
   }
   updateInfoBar();
 }
@@ -1194,14 +658,14 @@ function clearSelection() {
   seedInitTasks(initTasks, []);
   renderInitRow();
   setSessionHash(null);
-  paintActive();
+  lists.paintActive();
   resetSessionState();
   contextChips.clear();
   liveTurn.forget();
   setTurnRunning(false);
   closeStream();
   setMarkdownWarning(null);
-  setCapabilities(null);
+  setCapabilities(null, null);
   updateComposerMode();
   updateInfoBar();
   promptEl.focus();
@@ -1231,7 +695,7 @@ async function select(id) {
   clearNotice();
   selected = id;
   setSessionHash(id);
-  paintActive();
+  lists.paintActive();
   historyEl.innerHTML = `<div class="hint">Loading…</div>`;
   emptyEl.classList.add("hidden");
   closeStream();
@@ -1278,7 +742,7 @@ async function resync({ endText = null } = {}) {
       return;
     }
     if (id !== selected) return;
-    const kept = keptCommandBubbles(id);
+    const kept = keptCommandBubbles(historyEl, id);
     resetTurnView();
     renderSessionView(data, { kept });
     // Preview is read-only: a worker is woken only by POST /turn, so attach
@@ -1295,88 +759,24 @@ async function resync({ endText = null } = {}) {
   }
 }
 
-// The prompt and command bubbles in the history, in order, by kind
-// (kept_commands.js): a prompt, a `!cmd`'s (saved, so redrawn) or another.
-function historyAnchors() {
-  const els = [...historyEl.querySelectorAll(".bubble.user, .bubble.command")];
-  const kinds = els.map((el) => {
-    if (el.classList.contains("user")) return "user";
-    const line = el.querySelector(":scope > .command-line")?.textContent;
-    return !el.classList.contains("failed") && isShellCommandLine(line) ? "shell" : "other";
-  });
-  return { els, kinds };
-}
-
-// This session's own command bubbles (/help, /model …: drawn by this page,
-// never saved) with their anchors, before a resync redraws the history.
-// In-flight ones (busy, queued) are left out: the snapshot draws them again.
-function keptCommandBubbles(id) {
-  const { els, kinds } = historyAnchors();
-  return els
-    .map((el, i) => ({ el, anchor: commandAnchor(kinds, i) }))
-    .filter(({ el }) => el.dataset.keptFor === id && !el.classList.contains("busy") && !el.classList.contains("queued"))
-    .filter(({ el }) => keepsCommandBubble(el.querySelector(":scope > .command-line")?.textContent));
-}
-
-// The kept bubbles back into the redrawn history, each after its turn.
-function restoreCommandBubbles(kept) {
-  if (!kept.length) return;
-  historyEl.querySelector(".hint")?.remove();
-  kept.forEach(({ el, anchor }) => {
-    const { els, kinds } = historyAnchors();
-    const at = anchorInsertIndex(kinds, anchor);
-    if (at < els.length) els[at].before(el);
-    else historyEl.appendChild(el);
-  });
-}
-
 // A session view: its messages, then the turn in progress and the queued
 // prompts (a live worker's snapshot) replayed through the stream handlers,
 // then a pending question.
 function renderSessionView(data, { kept = [] } = {}) {
-  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, s.served_expected_by || null] : null;
-  current.dir = s.working_directory;
-  current.owner = s.owner || null;
-  current.timing = normalizeTiming(data.timing);
+  setCapabilities(data.capabilities, data.editor_url);
+  // The saved fill (when there is one) goes in here too, so a reloaded or
+  // stopped session shows it before its next turn (a running turn's replay
+  // below streams over it).
+  Object.assign(current, sessionStateFrom(data));
   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).
-  const savedPct = savedCtxPct(data.timing?.context, s.llm_context?.budget_tokens);
-  if (savedPct !== null) current.ctxPct = savedPct;
-  if (data.timing?.context?.window_tokens) {
-    current.ctxWindow = data.timing.context.window_tokens;
-    current.ctxWindowSource = data.timing.context.window_source || null;
-  }
-  current.firstPreview = s.first_preview || previewForCard(s);
-  current.usedMemories = s.used_memory_names || [];
-  current.preloadedMemories = s.preloaded_memory_names || [];
-  current.mutedMemories = s.muted_memory_names || [];
-  current.promptNotes = Array.isArray(s.prompt_notes) ? s.prompt_notes : [];
-  current.llmContext = s.llm_context || null;
   llmContextControl.refresh();
-  current.thinking = s.thinking || null;
   thinkingControl.refresh();
-  current.parentId = s.parent_id || null;
-  current.continues = s.continues || null;
-  current.commands = Array.isArray(data.commands) ? data.commands : [];
-  if (data.messages && data.messages.length) {
-    const first = data.messages.find((m) => m.role === "user");
-    if (first && first.content) current.firstPreview = firstPreview(first.content);
-    renderHistory(data.messages);
-  } else {
-    renderHistory(data.history || []);
-    if (!current.firstPreview && data.history && data.history.length) {
-      const txt = firstPreview(data.history[0]);
-      if (txt) current.firstPreview = txt;
-    }
-  }
-  restoreCommandBubbles(kept);
+  reasoningHistoryControl.refresh();
+  if (data.messages && data.messages.length) renderHistory(data.messages);
+  else renderHistory(data.history || []);
+  restoreCommandBubbles(historyEl, kept);
   // A failed turn's prompt went back to the user: shown after the
   // conversation, marked failed, as it was live (prompt_restored).
   if (data.failed_turn) {
@@ -1453,10 +853,23 @@ function setMarkdownWarning(warning) {
   markdownWarningEl.hidden = false;
 }
 
-function setCapabilities(capabilities) {
+// Both from one payload, together; the body's has-editor and refs-<kind>
+// classes follow (the refs' hover styling keys on refs-<kind>).
+function setCapabilities(capabilities, editorUrl) {
   pageCapabilities = capabilities && typeof capabilities === "object" ? capabilities : {};
+  pageEditorUrl = pageCapabilities.editor === true && typeof editorUrl === "string" && editorUrl ? editorUrl : null;
+  document.body.classList.toggle("has-editor", pageEditorUrl !== null);
+  setRefKinds(document.body, pageViewer());
 }
 
+// What this viewer can do with a ref (refs.js REF_ACTIONS).
+function pageViewer() {
+  return { editor: pageCapabilities.editor === true, editorUrl: pageEditorUrl };
+}
+
+// Refs anywhere on the page (a tool row's file, its diff lines): one listener.
+installRefClicks(document.body, pageViewer);
+
 async function readTurnEnd() {
   if (!selected) return;
   const id = selected;
@@ -1474,7 +887,7 @@ async function readTurnEnd() {
       if (!(await mergeTurnTiming(id, d.timing))) return;
       liveTurn.timing.finishLine(line);
       setMarkdownWarning(d.markdown_warning);
-      setCapabilities(d.capabilities);
+      setCapabilities(d.capabilities, d.editor_url);
       if (Array.isArray(d.messages)) applyFinalMarkdown(d.messages);
       updateInfoBar();
       const sess = allSessions.find(s=>s.id===selected);
@@ -1482,8 +895,8 @@ async function readTurnEnd() {
         sess.used_memory_names = current.usedMemories.slice();
         sess.status = current.status;
       }
-      render();
-      paintActive();
+      lists.render();
+      lists.paintActive();
     }
   } catch(_){}
 }
@@ -1718,11 +1131,6 @@ function showSteers(steers) {
   }
 }
 
-// A ✂ row's notice data (turnDom.notice, placeTurnNotice).
-function llmContextNotice(data) {
-  return { line: llmContextLine(data), cls: "llm-context", title: llmContextHover(data) };
-}
-
 function showHookNotice(data, { before = null } = {}) {
   removeHintIfEmpty();
   const el = document.createElement("div");
@@ -1957,16 +1365,6 @@ function currentWorkerBadge() {
                        installed: versions.installed, served: versions.served, sessionId: selected });
 }
 
-function workerBadgeHtml() {
-  const badge = currentWorkerBadge();
-  if (!badge) return "";
-  const busy = restartingId === selected;
-  const button = badge.restart
-    ? `<button type="button" class="worker-restart"${busy ? " disabled" : ""}>${busy ? "restarting…" : "Restart"}</button>`
-    : "";
-  return `<span class="worker-badge" title="${escapeHtml(badge.title)}">${escapeHtml(badge.text)}${button}</span>`;
-}
-
 // Restart: the session moves to a new worker on the newest chi; the page
 // follows it (its bridge_up), the composer's draft stays as it is.
 async function restartWorker() {
@@ -2011,49 +1409,49 @@ function updateInfoBar() {
   }
   if (!selected) {
     // The start page hides the info bar (the storage path is on #/sessions).
-    renderStable(infoTextEl, "");
-    infoTextEl.title = "";
+    renderInfoBar(infoTextEl, null);
     if (stopBtn) stopBtn.style.display = "none";
     updateSessionTitle();
     return;
   }
   if (stopBtn) stopBtn.style.display = canStopSession({ owner: current.owner, streaming: !!streamControl }) ? "" : "none";
-  const idShort = selected.slice(0,8);
-  const ctxText = ctxBarText(current.ctxPct, current.ctxWindowSource);
   const tokens = current.timing.tokens;
   const ctxTip = ctxBarTip(tokens, current.timing.memoryIndex,
                            { tokens: current.ctxWindow, source: current.ctxWindowSource, pct: current.ctxPct,
                              budget: current.llmContext?.budget_tokens });
   const speedTextNow = lastSpeedText(tokens);
   const avgSpeed = speedText(tokens?.avg_decode_tps, tokens?.tps_source);
-  const speedTip = `Decode speed of the last generation${avgSpeed ? `; session average ${avgSpeed}` : ""}`;
   const sessionDuration = currentSessionDuration();
-  const timingText = sessionDuration === null ? "" : `session ${formatDuration(sessionDuration)}`;
-  const statusClass = current.status ? `status ${escapeHtml(current.status)}` : "status";
-  const label = modelLabel(current.model, ...(current.served || []));
   // 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 link of a session chain: ← the previous link, → the next one (each
-  // only while the list holds it).
-  const chainHtml = [
-    chain.prev ? chainLinkHtml(chain.prev, "\u2190", "The previous link of this chain") : "",
-    chain.next ? chainLinkHtml(chain.next, "\u2192", "The next link of this chain") : "",
-  ].join("");
-  // A parent names its delegates; the link opens all sessions.
-  const kids = childrenSummary({ id: selected }, allSessions);
-  // The model notes the session's prompt carried.
-  const notes = promptNotesChip(current.promptNotes);
-  const notesHtml = notes ? `<span class="model notes-chip" title="${escapeHtml(notes.title)}">${escapeHtml(notes.text)}</span>` : "";
-  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>${chainHtml}${parentHtml}${kidsHtml}${llmContextChipHtml(current.llmContext, escapeHtml)}${thinkingChipHtml(current.thinking, escapeHtml)}${notesHtml}${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><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>`;
-  // 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.
-  renderStable(infoTextEl, metaHtml, { ".session-time": timingText });
-  infoTextEl.title = memoriesTooltip(current.usedMemories, current.preloadedMemories, current.mutedMemories);
+  const badge = currentWorkerBadge();
+  // The session clock ticks every second while a turn runs: lit writes its
+  // text alone, the bar's other nodes (a tooltip, a button mid-press) stay.
+  renderInfoBar(infoTextEl, {
+    id: selected,
+    copied: Date.now() - attachCopiedAt < 2000,
+    status: current.status,
+    model: modelLabel(current.model, ...(current.served || [])),
+    // A link of a session chain: ← the previous link, → the next one (each
+    // only while the list holds it).
+    chain: { prev: chainLink(chain.prev), next: chainLink(chain.next) },
+    parent: parentChip ? { id: current.parentId, title: parentChip.title } : null,
+    // A parent names its delegates; the link opens all sessions.
+    kids: childrenSummary({ id: selected }, allSessions),
+    llmContext: current.llmContext,
+    thinking: current.thinking,
+    reasoningHistory: current.reasoningHistory,
+    // The model notes the session's prompt carried.
+    notes: promptNotesChip(current.promptNotes),
+    memories: current.usedMemories,
+    preloaded: current.preloadedMemories,
+    muted: current.mutedMemories,
+    dir: current.dir,
+    ctx: { text: ctxBarText(current.ctxPct, current.ctxWindowSource), tip: ctxTip },
+    speed: speedTextNow ? { text: speedTextNow, tip: `Decode speed of the last generation${avgSpeed ? `; session average ${avgSpeed}` : ""}` } : null,
+    clock: sessionDuration === null ? "" : `session ${formatDuration(sessionDuration)}`,
+    worker: badge ? { badge, busy: restartingId === selected } : null,
+  });
   updateSessionTitle();
 }
 
@@ -2062,9 +1460,9 @@ function updateInfoBar() {
 // browser tab names it too. It follows the card's: a chain link opened with
 // the opener reads its chain's first link's title (cardTitle).
 function updateSessionTitle() {
-  const shown = selected ? sessionsById().get(selected) : null;
+  const shown = selected ? lists.sessionsById().get(selected) : null;
   const first = current.firstPreview || "";
-  const raw = !selected ? "" : (shown && isOpener(first) ? cardTitle(shown) : first);
+  const raw = !selected ? "" : (shown && isOpener(first) ? lists.cardTitle(shown) : first);
   const title = raw === "\u2014" ? "" : raw; // "—": no first message yet
   const text = topBarTitle({
     title,
@@ -2083,24 +1481,12 @@ function updateSessionTitle() {
   }
 }
 
-// The info bar's ← / → link to a chain's link (chains.js chainNeighbours):
-// its date (else its short id), its preview and id in the tooltip.
-function chainLinkHtml(link, arrow, what) {
-  const short = String(link.id).slice(0, 8);
-  const date = chainDate(link.session?.created_at);
-  const preview = link.session ? cardTitle(link.session) : "";
-  const title = `${what}: ${short}${preview ? ` · ${preview}` : ""}${link.session?.archived ? " (archived)" : ""}`;
-  const text = arrow === "\u2190" ? `${arrow} ${date || short}` : `${date || short} ${arrow}`;
-  return `<a class="model chain-link" href="${escapeHtml(sessionHash(link.id))}" title="${escapeHtml(title)}">${escapeHtml(text)}</a>`;
-}
-
-// `memories: a, b · preloaded: c · muted: d`: the used memories always,
-// the session's --memory and --mute lists only when there are any.
-function memoriesTooltip(used, preloaded, muted) {
-  const parts = [`memories: ${(used || []).join(", ") || "—"}`];
-  if (preloaded && preloaded.length) parts.push(`preloaded: ${preloaded.join(", ")}`);
-  if (muted && muted.length) parts.push(`muted: ${muted.join(", ")}`);
-  return parts.join(" · ");
+// A chain's link (chains.js chainNeighbours) as the info bar's ← / →
+// shows it (info_bar.js chainLinkTemplate), or null.
+function chainLink(link) {
+  if (!link) return null;
+  return { id: link.id, date: chainDate(link.session?.created_at), preview: link.session ? lists.cardTitle(link.session) : "",
+           archived: !!link.session?.archived };
 }
 
 function currentSessionDuration() {
@@ -2141,8 +1527,8 @@ function setUsedMemories(names) {
   const sess = allSessions.find(s=>s.id===selected);
   if (sess) {
     sess.used_memory_names = current.usedMemories.slice();
-    render();
-    paintActive();
+    lists.render();
+    lists.paintActive();
   }
 }
 
@@ -2197,7 +1583,7 @@ function workerGone(id, { opened = true } = {}) {
   const i = allSessions.findIndex((s) => s.id === id);
   if (i >= 0 && allSessions[i].owner === "worker") {
     allSessions[i] = withoutWorker(allSessions[i]);
-    render();
+    lists.render();
   }
   updateInfoBar();
   // Once: a worker still alive with a bridge (the stream dropped, not the
@@ -2207,274 +1593,71 @@ function workerGone(id, { opened = true } = {}) {
   else setTimeout(() => { if (id === selected && !(streamControl && streamControl.live)) resync({ endText }); }, STREAM_RETRY_MS);
 }
 
-// The stream's event handlers; renderSessionView replays a snapshot through
-// them too.
-const streamHandlers = {
-  generation_chunk: (data) => {
-    // 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);
-    liveTurn.timing.setNote("");
-    turnDom.chunk({ text, thinking, iteration: data.iteration ?? null });
-    const pct = extractCtxPct(data, current.ctxWindow, current.llmContext?.budget_tokens);
-    if (pct !== null && !Number.isNaN(pct)) {
-      current.ctxPct = pct;
-      updateInfoBar();
-    }
-  },
-  generation_started: (data) => {
-    if (data?.context_window_tokens) {
-      current.ctxWindow = data.context_window_tokens;
-      current.ctxWindowSource = data.context_window_source || null;
-    }
-    liveTurn.timing.setNote("");
-    turnDom.generationStarted(data || {});
-  },
-  generation_completed: (data) => {
-    liveTurn.timing.setNote("");
-    if (data?.served_model) current.served = [data.served_model, data.requested_model, data.served_expected_by || null];
-    // The generation's speed and the session's token totals, from the server.
-    current.timing.tokens = generationTokens(current.timing.tokens, data);
-    if (data?.served_model || data?.tokens) updateInfoBar();
-    turnDom.generationCompleted();
-  },
-  // Prompts sent while a turn ran merge into it at an iteration boundary:
-  // input_merged names them (their bubbles turn "steered"), then
-  // pending_input_merged carries the merged text, shown only for prompts
-  // this tab has no bubble for. Its `answer` (the answer the merge
-  // superseded) is the TUI's line: here it streamed as that step's text.
-  input_merged: (data) => applyPromptOps(data),
-  pending_input_merged: (data) => {
-    applyPromptOps(data);
-    showSteers(data.steers);
-  },
-  turn_enqueued: (data) => applyPromptOps(data),
-  turn_started: (data) => keepFollowing(historyEl, () => {
-    if (streamFromGuess) {
+// The stream's event handlers (stream_handlers.js); renderSessionView
+// replays a snapshot through them too.
+const streamHandlers = createStreamHandlers({
+  selected: () => selected,
+  state: () => current,
+  clientId,
+  capabilities: () => pageCapabilities,
+  historyEl,
+  liveTurn,
+  turnDom,
+  shownTexts,
+  questionCards,
+  contextChips,
+  llmContextControl,
+  thinkingControl,
+  reasoningHistoryControl,
+  sentIds,
+  earlyRestores,
+  stream: {
+    takeGuess: () => {
+      const guess = streamFromGuess;
       streamFromGuess = false;
-      // A replay of a turn the render drew: re-read and stream from there.
-      if (replaysDrawnTurn(data, current.timing.turnRecords)) {
-        streamControl?.close();
-        streamControl = null;
-        resync();
-        return;
-      }
-    }
-    // A finished turn still in the stage goes first: the start op looks
-    // for a queued prompt among its rows.
-    turnDom.handOff?.({ immediate: true });
-    markRecapStale();
-    shownTexts.turnStarted();
-    const promptBubble = applyPromptOps(data);
-    setTurnRunning(true);
-    setLiveStatus("running");
-    liveTurn.timing.detach();
-    turnDom.turnStarted({ ...data, promptBubble });
-    liveTurn.timing.start(data.started_at, data.turn_id || null);
-  }),
-  turn_completed: async (data) => {
-    endTurnView("completed", null, { emptyAnswer: data.turn_summary?.empty_answer || null });
-    const out = turnOutput(data);
-    if (out) appendChunk(out);
-    // after_turn hooks are running and may present the answer: its
-    // answer_display (display: null when they didn't) comes next. A worker
-    // 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) 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
-    // never swap in after the pop. The hold reveals by itself after
-    // HOLD_MS whatever comes. The stage has no hold.
-    if (display) await display.promise;
-    turnDom.answerReady?.();
-  },
-  // An after_turn hook presented the answer (AnswerDisplay): it comes after
-  // turn_completed, so re-read the answer once that read is done.
-  answer_display: async (data) => {
-    try {
-      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 {
-      liveTurn.releaseDisplay();
-    }
-  },
-  turn_canceled: (data) => {
-    endTurnView("canceled", cancelLineText(data.cancellation_reason || "", data.cancelled_by), { stopped: true });
-    setLiveStatus("idle");
-    refreshTimingFromSession();
-  },
-  // The turn raised (e.g. the model server stayed unreachable). The worker
-  // stays up: it rolls the turn back and hands the prompt back
-  // (prompt_restored), and the prompts queued behind it run as usual. A turn
-  // that got to tool steps stays as it is (kept_steps; no prompt_restored).
-  turn_failed: (data) => {
-    const text = failedTurnText(data);
-    // Only a rolled-back turn's line waits for its prompt_restored.
-    liveTurn.failedText = Number.isInteger(data.kept_steps) ? null : text;
-    endTurnView("failed", text);
-    setLiveStatus("idle");
+      return guess;
+    },
+    restart: () => {
+      streamControl?.close();
+      streamControl = null;
+      resync();
+    },
   },
-  // The rolled-back turn left the session: render it from the server again,
-  // then show the prompt once more, marked failed (with why). This tab's own
-  // prompt goes back into an empty composer.
-  prompt_restored: async (data) => {
-    keepEarlyRestore(data, earlyRestores, { myId: clientId, sentIds });
-    const { refill, label, images: restoredImages } = restoreAction(data, { myId: clientId, sentIds, composerEmpty: !promptEl.value.trim() && !chips.length });
-    if (refill) {
-      promptEl.value = refill;
+  composer: {
+    empty: () => !promptEl.value.trim() && !chips.length,
+    refill: (text) => {
+      promptEl.value = text;
       fitPrompt();
-    }
-    if (restoredImages?.length) setChips(restoredChips(selected, restoredImages));
-    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.
-    const drawn = historyEl.querySelector(".bubble.user[data-failed-turn]");
-    if (drawn) {
-      if (drawn.nextElementSibling?.classList.contains("cancel")) drawn.nextElementSibling.remove();
-      drawn.remove();
-    }
-    // Not an echo waiting for its turn_enqueued: it keeps its enqueued_id, so
-    // a resend's echo isn't matched to it.
-    makeUserBubble(data.prompt || "", { state: "failed", label, enqueuedId: data.origin?.enqueued_id || `failed:${Date.now()}`, images: data.images });
-    if (failedText) addEndBubble(failedText);
-  },
-  // A session command ran in the worker (any client's). One that changed
-  // the conversation (!rollback, !cmd, a continue answered no) re-reads it.
-  command_ran: async (data) => {
-    const view = commandView(data, clientId);
-    if (view.modelName && view.modelName !== current.model) {
-      current.model = view.modelName;
-      current.served = null;
-      updateInfoBar();
-    }
-    // /llm-context changed what the next turn runs under.
-    if (data.llm_context) {
-      current.llmContext = data.llm_context;
-      updateInfoBar();
-      llmContextControl.refresh();
-    }
-    // /thinking (or /model) changed the level the next turn runs at.
-    if (data.thinking) {
-      current.thinking = data.thinking;
-      updateInfoBar();
-      thinkingControl.refresh();
-    }
-    if (view.resync) await resync();
-    // A card's action that isn't anytime (the step-limit question's
-    // /continue) has no bubble: nothing to remove. An anytime or queued
-    // one's bubble was drawn at its command_queued: filled in here. One
-    // queued for after the turn ran after it: its bubble moves from among
-    // the turn's rows to after its answer and timing line.
-    const queued = view.anytime || view.queued ? commandBubble(view.commandId) : null;
-    if (view.hidden) queued?.remove();
-    else if (queued && view.queued && !view.anytime) {
-      queued.remove();
-      addCommandBubble(view);
-    } else if (queued) drawCommandBubble(queued, view);
-    // A command that changed the conversation (!cmd): the redrawn history
-    // ends with its command bubble already (the saved "!(…)\n<output>"
-    // message renders as one) — no second bubble, or the output shows twice.
-    else if (view.resync && historyHasCommandBubble(findInTurnRoots(".bubble.command"), view.line)) { /* drawn by the resync */ }
-    else addCommandBubble(view);
-  },
-  // An anytime command (/help, a plugin's /btw) runs at once, beside a
-  // turn: its bubble goes here, so the cards it shows come after it. One
-  // queued for after the turn (/model X mid-turn) shows waiting here.
-  command_queued: (data) => {
-    // A card's action waits for its command_ran: shown only if it answers.
-    if ((data.anytime || data.waits) && !data.card && !commandBubble(data.command_id)) addCommandBubble(commandView(data, clientId));
-  },
-  // Due reminders went into the turn (a reminder turn has no prompt bubble).
-  reminder_injected: (data) => addCommandBubble({ label: null, line: reminderText(data), text: "" }),
-  // A context note joined the conversation (between turns; no turn runs).
-  context_added: (data) => {
-    addNoteBubble({ label: data.label, content: data.text || "" });
-    // An attached context source's note: its chip changed.
-    if (data.context_source) contextChips.refresh();
-  },
-  continue_offered: (data) => questionCards.renderContinue(data),
-  continue_resolved: (data) => questionCards.resolveContinue(data),
-  tool_call_started: (data) => turnDom.toolStarted(data),
-  tool_call_completed: (data) => turnDom.toolCompleted(data),
-  // The engine's list, after every memory read and at a turn's end.
-  used_memories_updated: (data) => {
-    if (Array.isArray(data.used_memory_names)) setUsedMemories(data.used_memory_names);
-  },
-  context_status: (data) => {
-    const pct = extractCtxPct(data, current.ctxWindow, current.llmContext?.budget_tokens);
-    if (pct !== null) {
-      current.ctxPct = pct;
-      updateInfoBar();
-    }
-  },
-  question_requested: (data) => {
-    const pq = data.pending_question;
-    if (pq && pq.id) questionCards.renderQuestion(pq);
-  },
-  question_answered: (data) => {
-    questionCards.resolveQuestion(data.id, { answer: data.answer });
-  },
-  // A delegate's question relayed to its parent's card, or no longer.
-  question_relay: (data) => questionCards.markRelayed(data.id, data.relayed_to),
-  question_cancelled: (data) => {
-    questionCards.resolveQuestion(data.id, { cancelled: true, reason: data.reason });
-  },
-  // One collected just as a turn started describes the chat before it.
-  recap_ready: (data) => {
-    // After the turn it covers, never above it.
-    turnDom.handOff?.({ immediate: true });
-    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. 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), cls: "steer-cut" }); },
-  // A batch of LLM context edits the server applied: a ✂ row of the
-  // current step, its hover listing the outputs.
-  llm_context_edited: (data) => { turnDom.notice(llmContextNotice(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) => {
-    // A dropped stream's step asked again: what it streamed is void.
-    if (data?.restarted) turnDom.generationRestarted(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).
-  card: (data) => {
-    upsertCard(data);
-    if (data.body) refreshCardBodies();
-  },
-  // The stream's cursor could not be replayed: render from scratch.
-  reset: () => resync(),
-  // Synthetic (snapshotEvents): a prompt merged into the turn in progress.
-  merged_input: (data) => {
-    const origin = (data.origins || [])[0] || {};
-    const own = isOwn(origin.client_id, clientId);
-    makeUserBubble(data.content, {
-      state: "steered", own, enqueuedId: origin.enqueued_id || null, label: own ? null : clientLabel(origin.client_id),
-    });
+    },
+    setChips: (list) => setChips(list),
   },
-};
+  getSession,
+  resync: () => resync(),
+  updateInfoBar: () => updateInfoBar(),
+  applyPromptOps: (data) => applyPromptOps(data),
+  showSteers: (steers) => showSteers(steers),
+  markRecapStale: () => markRecapStale(),
+  setTurnRunning: (running) => setTurnRunning(running),
+  setLiveStatus: (status) => setLiveStatus(status),
+  endTurnView: (kind, endText, opts) => endTurnView(kind, endText, opts),
+  appendChunk: (text) => appendChunk(text),
+  readTurnEnd: () => readTurnEnd(),
+  applyFinalMarkdown: (messages) => applyFinalMarkdown(messages),
+  refreshTimingFromSession: () => refreshTimingFromSession(),
+  makeUserBubble: (prompt, opts) => makeUserBubble(prompt, opts),
+  addEndBubble: (text) => addEndBubble(text),
+  commandBubble: (id) => commandBubble(id),
+  addCommandBubble: (view) => addCommandBubble(view),
+  addNoteBubble: (note) => addNoteBubble(note),
+  findInTurnRoots: (selector) => findInTurnRoots(selector),
+  setUsedMemories: (names) => setUsedMemories(names),
+  showRecap: (text) => showRecap(text),
+  showGuardrailWarning: (text, label) => showGuardrailWarning(text, label),
+  showHookNotice: (data) => showHookNotice(data),
+  onInitEvent: (type, data) => onInitEvent(type, data),
+  upsertCard: (card) => upsertCard(card),
+  refreshCardBodies: () => refreshCardBodies(),
+});
 
 async function refreshTimingFromSession() {
   if (!selected) return;
@@ -2508,7 +1691,7 @@ function closeStream() {
 function addCreatedSession(created) {
   const { bridge_port: _port, ...session } = created;
   allSessions = applySessionEvent(allSessions, "session", { session });
-  render();
+  lists.render();
 }
 
 // A first message: an idle session, then the turn (or the command) into it
@@ -2524,36 +1707,17 @@ async function handleSendTurn() {
   if (!prompt) return;
   // An image-only send's text is its placeholders: not for ↑.
   const typed = promptEl.value.trim() !== "";
-  // /cut TEXT and /queue TEXT (the terminals' words for a delivery): the
-  // text as a cut, or the page's own answer (/queue, the bare word).
-  let delivery = null;
-  const choice = steerChoiceRoute(prompt, { running: liveTurn.running && !!selected });
-  if (choice?.reply) {
-    if (selected) addCommandBubble({ label: null, line: prompt, text: choice.reply });
-    else showNotice(choice.reply);
-    promptEl.value = "";
-    fitPrompt();
-    return;
-  }
   // The composer holds the line as typed until the ack (composerAfterAck).
   const line = prompt;
-  if (choice) {
-    prompt = choice.send;
-    delivery = choice.delivery || null;
-  }
-  if (!selected) {
-    // The start page's own reply (a web-local command) or the hint for a
-    // typo: neither needs a session, so none is made for it (2.29).
-    const local = startPageReplyOrHint(prompt, { commands: current.commands, images: chips.length });
-    if (local) {
-      promptEl.value = "";
-      fitPrompt();
-      showNotice(local);
-      return;
-    }
+  // Where the line goes (composer.js): the page's own reply, a session to
+  // make first (the start page), a command, or a turn.
+  let route = routeComposerLine(prompt, {
+    session: !!selected, running: liveTurn.running, commands: current.commands, images: chips.length,
+  });
+  if (route.create) {
     actionBtn.disabled = true;
     try {
-      const s = await createIdleSession({ dir: scope.dir, model: chosenModel(), preview: prompt,
+      const s = await createIdleSession({ dir: scope.dir, model: chosenModel(), preview: route.send,
                                           llm_context: choiceWords(newChatLlmContext),
                                           thinking: newChatThinking || undefined });
       // The choice was for this chat only.
@@ -2569,20 +1733,19 @@ async function handleSendTurn() {
     } finally {
       actionBtn.disabled = false;
     }
+    // In the new session, by its command list (select read it).
+    route = routeSessionLine(route.send, { commands: current.commands, images: chips.length, delivery: route.delivery });
+  }
+  if (route.reply) {
+    // The start page's reply is a notice: no session is made for it (2.29).
+    if (selected) addCommandBubble({ label: null, line: route.line, text: route.reply });
+    else showNotice(route.reply);
+    clearComposer();
+    return;
   }
-  // A session command by the session's list (the new one's too: select
-  // read it); an unknown /word is a prompt, as in a terminal — but a typo
-  // of a command (/modle) gets the hint, not a turn.
-  if (!chips.length && sessionCommandLine(prompt, current.commands)) return handleSendCommand(prompt);
-  if (!chips.length) {
-    const typo = unknownCommandHint(prompt, current.commands);
-    if (typo) {
-      addCommandBubble({ label: null, line: prompt, text: typo });
-      promptEl.value = "";
-      fitPrompt();
-      return;
-    }
-  }
+  if (route.command) return composerCommands.send(route.command);
+  prompt = route.send;
+  const delivery = route.delivery;
   const hint = historyEl.querySelector(".hint");
   if (hint) hint.remove();
   // Sending moves a finished turn out of the stage at once (else the echo
@@ -2605,8 +1768,7 @@ async function handleSendTurn() {
       // The worker knew it as a command (its list was newer than ours):
       // its command_ran shows it, not a prompt bubble.
       echo.remove();
-      promptEl.value = "";
-      fitPrompt();
+      clearComposer();
       followWokenWorker();
       return;
     }
@@ -2650,47 +1812,36 @@ async function handleSendTurn() {
   }
 }
 
-// /model, !ls, /continue no … run in the session's worker; every client
-// shows the command_ran, this one too.
-async function handleSendCommand(line) {
-  const local = webLocalReply(line);
-  if (local) {
-    addCommandBubble({ label: null, line, text: local });
-    promptEl.value = "";
-    fitPrompt();
-    return;
-  }
-  actionBtn.disabled = true;
-  try {
-    await sendCommand(selected, line, { clientId });
-    promptEl.value = "";
-    fitPrompt();
-    refreshHistory();
-    // The command woke the worker: follow its stream if none is open.
-    followWokenWorker();
-  } catch (e) {
-    if (e.code === "owned_by_tui") {
-      current.owner = "tui";
-      updateComposerMode();
-      return;
-    }
-    addCommandBubble({ label: null, line, text: e.message, failed: true });
-  } finally {
-    actionBtn.disabled = current.owner === "tui";
-    promptEl.focus();
-  }
+// /model, !ls … from the composer, and a control's command (the llm ctx
+// and thinking chips): composer.js.
+const composerCommands = createComposerCommands({
+  session: () => selected,
+  clientId,
+  sendCommand,
+  followWokenWorker: () => followWokenWorker(),
+  refreshHistory: () => refreshHistory(),
+  failed: (line, text) => addCommandBubble({ label: null, line, text, failed: true }),
+  ownedByTui: () => {
+    current.owner = "tui";
+    updateComposerMode();
+  },
+  composer: {
+    busy: () => { actionBtn.disabled = true; },
+    clear: () => clearComposer(),
+    done: () => {
+      actionBtn.disabled = current.owner === "tui";
+      promptEl.focus();
+    },
+  },
+});
+
+function runSessionCommand(line) {
+  return composerCommands.run(line);
 }
 
-// A session command from a control (the llm ctx chip), not the composer:
-// its command_ran shows its line and reply, as a typed one's would.
-async function runSessionCommand(line) {
-  if (!selected) return;
-  try {
-    await sendCommand(selected, line, { clientId });
-    followWokenWorker();
-  } catch (e) {
-    addCommandBubble({ label: null, line, text: e.message, failed: true });
-  }
+function clearComposer() {
+  promptEl.value = "";
+  fitPrompt();
 }
 
 function addCommandBubble(view) {
@@ -2704,24 +1855,6 @@ function addCommandBubble(view) {
   if (follow) historyEl.scrollTop = historyEl.scrollHeight;
 }
 
-// A command bubble's line and output (again, when its command_ran fills in
-// an anytime command's bubble in place).
-function drawCommandBubble(div, { label, line, text, busy = false, failed = false, waiting = false, commandId = null }) {
-  div.className = "bubble command" + (busy ? " busy" : "") + (failed ? " failed" : "") + (waiting ? " queued" : "");
-  if (commandId) div.dataset.commandId = commandId;
-  div.replaceChildren();
-  const head = document.createElement("div");
-  head.className = "command-line";
-  head.textContent = label ? `${label}> ${line}` : line;
-  div.appendChild(head);
-  if (text) {
-    const body = document.createElement("pre");
-    body.className = "command-output";
-    body.textContent = text;
-    div.appendChild(body);
-  }
-}
-
 function commandBubble(commandId) {
   if (!commandId) return null;
   return findInTurnRoots(".bubble.command").find((el) => el.dataset.commandId === String(commandId)) || null;
@@ -3104,7 +2237,7 @@ async function setArchived(id, archive, { undo = true } = {}) {
     alert(`Could not ${archive ? "archive" : "unarchive"} session ${short}: ${answer.error.message}`);
     return;
   }
-  render();
+  lists.render();
   updateInfoBar();
   if (!eventsControl) refresh();
   const what = archive ? "Archived" : "Unarchived";
@@ -3148,10 +2281,6 @@ function showToast(text, action = null, { sticky = false, html = false } = {}) {
   if (!sticky) toastTimer = setTimeout(() => { el.hidden = true; }, 6000);
 }
 
-$("#includeArchived").addEventListener("change", () => {
-  if (allViewOpen()) renderAll();
-});
-
 // Annotate (annotate_bar.js): a selection in the conversation offers
 // "Annotate" and the presets, which append a quote to the composer.
 const annotateBar = createAnnotateBar({
@@ -3168,6 +2297,12 @@ const annotateBar = createAnnotateBar({
   },
 });
 historyEl.addEventListener("scroll", annotateBar.schedule);
+// A command bubble's Apply (CacheConfirm): sends the change's --yes line
+// once; its own bubble then says what it did.
+historyEl.addEventListener("click", (e) => {
+  const button = e.target.closest?.("[data-confirm-line]");
+  if (button) applyConfirm(button, runSessionCommand);
+});
 turnDom.scrollEl?.addEventListener("scroll", annotateBar.schedule, true);
 turnRoots().forEach((root) => installCopy(root));
 
@@ -3198,7 +2333,7 @@ function applyStripHidden() {
   updateSessionTitle();
 }
 function setStripHidden(hidden) {
-  if (hidden) familyPop.close();
+  if (hidden) lists.familyPop.close();
   try { localStorage.setItem("chi_strip_hidden", hidden ? "1" : "0"); } catch (_) {}
   stripShownWhileShort = !hidden && shortWindow.matches;
   applyStripHidden();
@@ -3211,23 +2346,11 @@ shortWindow.addEventListener("change", () => {
 $("#stripShow").addEventListener("click", () => setStripHidden(false));
 $("#stripHideTop").addEventListener("click", () => setStripHidden(true));
 
-$("#filter").addEventListener("input", () => {
-  searchToggles.clear();
-  renderAll();
-});
-// A list whose order was held under the pointer (listOrder) catches up.
-topStripEl.addEventListener("pointerleave", () => {
-  // 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 select mode first, then the all-sessions view.
 document.addEventListener("keydown", (e) => {
   if (e.key !== "Escape" || !allViewOpen()) return;
-  if (selecting.on) {
-    if (!selecting.running) leaveSelect();
+  if (lists.selecting.on) {
+    if (!lists.selecting.running) lists.leaveSelect();
     return;
   }
   closeAllView();