samagotchi 0.9.0 → 0.10.0

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

@@ -8,8 +8,6 @@ import {
   deleteSession,
   archiveSession,
   unarchiveSession,
-  sendAnswer,
-  dismissQuestion,
   sendCommand,
   openStream,
   openEvents,
@@ -18,32 +16,33 @@ import {
   listModels,
 } from "./data.js";
 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, messageBodyHtml, noteHtml, normalize, steerRowHtml, userBodyHtml, ownerBadge, previewForCard, relativeTime, firstMessageOf, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy } from "./format.js";
+import { escapeHtml, noteHtml, normalize, steerRowHtml, userBodyHtml, ownerBadge, previewForCard, relativeTime, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy } from "./format.js";
 import { createTurnView, turnHistoryHtml } from "./turn_view.js";
 import { createStageView } from "./stage_view.js";
-import { annotateBarLeft, annotationSource, appendQuote, quoteBlock } from "./annotations.js";
-import { parsePresets, presetNote } from "./annotate_presets.js";
-import { COPY_SOURCE_ATTR, copySource, copySourceAttr, copyText, installCopy, showsAnswer } from "./copy.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 } from "./ctx.js";
-import { diffHtml } from "./diff_view.js";
-import { approvalAllowed, approvalView, isApproval, nextCardAction, resultText, summaryText } from "./question_card.js";
+import { createQuestionCards } from "./question_cards.js";
 import { cardClass, cardInnerHtml, cardPlace, isCard, splitSnapshotCards, turnNoticePlace } from "./card.js";
 import { gripFloor, promptHeight } from "./composer_size.js";
-import { commandMatches, commandRow, moveSelection, pickCommand } from "./command_complete.js";
+import { createCommandList } from "./command_list.js";
 import { ALL_SESSIONS_HASH, sessionHash, sessionIdFromHash } from "./route.js";
 import { allScopeHref, cardFolder, projectScopeHref, scopeDir } from "./scope.js";
 import { shouldFollowScroll, keepFollowing } from "./scroll.js";
 import { stripColumns, stripShowParts } from "./strip.js";
 import { applySessionEvent, listedSessions, sortedByUpdated, withChildrenAfterParents } from "./sessions_list.js";
-import { NOTIFY_CHANNEL, attentionText, createNotifyGate, initialAttentionState, notifyState as bellState, trackAttention } from "./notify.js";
+import { createNotifications } from "./notifications.js";
 import {
   appendAboveLiveTiming, cancelLineText, elapsedSince, formatDuration, normalizeTiming, turnTimingText,
 } from "./timing.js";
 import { DONE_MS, applyInitEvent, dropDone, initRowHtml, newInitTasks, seedInitTasks } from "./init_row.js";
-import { clientLabel, commandView, continueLine, emptyRetryLine, hookNoticeLabel, initWaitLine, isCommandLine, isOwn, keepEarlyRestore, newClientId, noticeLine, promptOps, reminderText, restoreAction, restoreOnAck, retryStatusLine, snapshotEvents, turnOutput, webLocalReply, workerGoneText } from "./turn_events.js";
+import { clientLabel, commandView, emptyRetryLine, hookNoticeLabel, initWaitLine, isCommandLine, isOwn, keepEarlyRestore, newClientId, noticeLine, promptOps, reminderText, restoreAction, restoreOnAck, retryStatusLine, snapshotEvents, turnOutput, webLocalReply, workerGoneText } from "./turn_events.js";
 
 const $ = (s) => document.querySelector(s);
 const topStripEl = $("#topStrip");
@@ -96,25 +95,9 @@ function turnRoots() {
 function findInTurnRoots(selector) {
   return turnRoots().flatMap((root) => [...root.querySelectorAll(selector)]);
 }
-let currentFirstPreview = "";
-let currentUsedMemories = [];
-// The session's --memory and --mute lists (from the session card; shown in
-// the info bar's tooltip).
-let currentPreloadedMemories = [];
-let currentMutedMemories = [];
-let currentParentId = null;
-let currentCtxPct = null;
-// Window the kernel resolved for the running generation (:generation_started).
-let currentCtxWindow = null;
-let currentStatus = "";
-let currentModel = "";
-// What the worker's server said it served for a model name: [served, asked].
-let currentServed = null;
-let currentDir = "";
-// Who holds the selected session: "worker" (shared), "tui" (a plain terminal
-// chi; sending would be refused) or null.
-let currentOwner = null;
-let currentTiming = normalizeTiming();
+// The open session's fields (session_state.js); resetSessionState() starts
+// them over.
+let current = emptySessionState();
 let turnRunning = false;
 let liveTurnTimingEl = null;
 // What the running turn waits on, after its live timing line: a provider
@@ -122,16 +105,19 @@ let liveTurnTimingEl = null;
 // it streams again.
 let liveTurnNote = "";
 let timingInterval = null;
-// Live ask_user_question card, keyed by pending question id. Re-rendered from
-// pending_question on session select so a reload mid-question restores it.
-let questionCardEl = null;
-let pendingQuestion = null;
-// The continue offer's card while the offer is pending.
-let continueCardEl = null;
 
 // 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.
 const clientId = newClientId();
+// The question and continue cards in the history (question_cards.js).
+const questionCards = createQuestionCards({
+  sessionId: () => selected,
+  clientId,
+  place: (card) => appendToHistory(card),
+  isNearBottom: () => isNearBottom(),
+  scrollToEnd: () => { historyEl.scrollTop = historyEl.scrollHeight; },
+  removeHintIfEmpty: () => removeHintIfEmpty(),
+});
 // The event id (or, from an older worker, the event_seq) the selected session
 // was rendered at (null: no live worker then), where a stream opened later
 // has to start.
@@ -182,20 +168,20 @@ async function refresh() {
 function openSessionEvents() {
   eventsControl = openEvents({
     snapshot: (data) => {
-      noticeSessions("snapshot", data);
+      notifications.noticeSessions("snapshot", data);
       allSessions = applySessionEvent(allSessions, "snapshot", data);
       render();
       const sess = allSessions.find((s) => s.id === selected);
       if (sess) followSelectedSession(sess);
     },
     session: (data) => {
-      noticeSessions("session", data);
+      notifications.noticeSessions("session", data);
       allSessions = applySessionEvent(allSessions, "session", data);
       render();
       if (data.session && data.session.id === selected) followSelectedSession(data.session);
     },
     session_gone: (data) => {
-      noticeSessions("session_gone", data);
+      notifications.noticeSessions("session_gone", data);
       const next = applySessionEvent(allSessions, "session_gone", data);
       if (next !== allSessions) {
         allSessions = next;
@@ -217,9 +203,9 @@ function openSessionEvents() {
 // (a turn another client sent woke one, or a replacement after a kill)
 // gets the stream attached through one resync.
 function followSelectedSession(sess) {
-  currentOwner = sess.owner || null;
+  current.owner = sess.owner || null;
   const streaming = !!(streamControl && streamControl.live);
-  if (!streaming) currentStatus = sess.status;
+  if (!streaming) current.status = sess.status;
   updateInfoBar();
   if (!sess.bridge_up || streaming) return;
   if (resyncsInFlight > 0) resyncAgain = true;
@@ -244,8 +230,7 @@ function renderScope() {
     el.innerHTML = `<span class="scope-name" title="Sessions of every project">all projects</span>${backLink}${where ? `<span class="scope-where" title="New chats start in ${escapeHtml(where)}">new chat in<span class="path"><bdi>${escapeHtml(where)}</bdi></span></span>` : ""}`;
   }
   el.hidden = false;
-  baseTitle = scope.projectName ? `Chi · ${scope.projectName}` : "Chi";
-  setTitle();
+  notifications.setBaseTitle(scope.projectName ? `Chi · ${scope.projectName}` : "Chi");
   // The links follow the hash (an open session, the all-sessions view).
   el.querySelector(".scope-all:not(.scope-back)")?.addEventListener("click", (e) => {
     e.currentTarget.href = allScopeHref(location.hash, scope.dir);
@@ -512,7 +497,7 @@ function updateComposerMode() {
     emptyEl.classList.remove("hidden");
     historyEl.innerHTML = "";
     updateInfoBar();
-  } else if (currentOwner === "tui") {
+  } else if (current.owner === "tui") {
     setPlaceholder("A terminal chi owns this session and doesn't share it — run it with chi --shared to send from here", "A terminal chi owns this session");
     composeHintEl.textContent = "";
     actionBtn.textContent = "Send";
@@ -536,7 +521,7 @@ function setTurnRunning(running) {
 // Session status is turn state (idle/running): follow the live stream in the
 // info bar and the session's card without a refetch.
 function setLiveStatus(status) {
-  currentStatus = status;
+  current.status = status;
   const i = allSessions.findIndex((s) => s.id === selected);
   if (i >= 0) {
     // Its card gets the new dot and time; it keeps its place until the next
@@ -572,24 +557,22 @@ function onInitEvent(type, data) {
   }, DONE_MS);
 }
 
+// Forget what the info bar, composer and command list knew about the open
+// session; select() and clearSelection() both start from here, so a field
+// the previous session set (its "delegated by" parent, its commands) never
+// shows for the next one.
+function resetSessionState() {
+  current = emptySessionState();
+  commandList.close();
+}
+
 function clearSelection() {
   selected = null;
   seedInitTasks(initTasks, []);
   renderInitRow();
   setSessionHash(null);
   document.querySelectorAll(".card").forEach((el) => el.classList.remove("active"));
-  currentFirstPreview = "";
-  currentUsedMemories = [];
-  currentPreloadedMemories = [];
-  currentMutedMemories = [];
-  currentCtxPct = null;
-  currentCtxWindow = null;
-  currentStatus = "";
-  currentModel = "";
-  currentServed = null;
-  currentDir = "";
-  currentOwner = null;
-  currentTiming = normalizeTiming();
+  resetSessionState();
   clearTimingInterval();
   liveTurnTimingEl = null;
   setTurnRunning(false);
@@ -631,20 +614,7 @@ async function select(id) {
   historyEl.innerHTML = `<div class="hint">Loading…</div>`;
   emptyEl.classList.add("hidden");
   closeStream();
-  currentFirstPreview = "";
-  currentUsedMemories = [];
-  currentPreloadedMemories = [];
-  currentMutedMemories = [];
-  currentCtxPct = null;
-  currentCtxWindow = null;
-  currentStatus = "";
-  currentModel = "";
-  currentServed = null;
-  currentDir = "";
-  currentOwner = null;
-  currentCommands = [];
-  closeCommandList();
-  currentTiming = normalizeTiming();
+  resetSessionState();
   resetTurnView();
   updateFirstPeek();
   updateInfoBar();
@@ -658,8 +628,8 @@ function resetTurnView() {
   closeStream();
   clearTimingInterval();
   liveTurnTimingEl = null;
-  removeQuestionCard();
-  continueCardEl = null;
+  questionCards.removeQuestion();
+  questionCards.forgetContinue();
   unmatchedMerge = false;
   setTurnRunning(false);
 }
@@ -709,32 +679,32 @@ async function resync({ endText = null } = {}) {
 function renderSessionView(data) {
   const s = data.session;
   setMarkdownWarning(data.markdown_warning);
-  currentStatus = s.status;
-  currentModel = s.model_name;
-  currentServed = s.served_model ? [s.served_model, s.served_model_for] : null;
-  currentDir = s.working_directory;
-  currentOwner = s.owner || null;
-  currentTiming = normalizeTiming(data.timing);
+  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);
   // 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);
-  if (savedPct !== null) currentCtxPct = savedPct;
-  if (data.timing?.context?.window_tokens) currentCtxWindow = data.timing.context.window_tokens;
-  currentFirstPreview = s.first_preview || previewForCard(s);
-  currentUsedMemories = s.used_memory_names || [];
-  currentPreloadedMemories = s.preloaded_memory_names || [];
-  currentMutedMemories = s.muted_memory_names || [];
-  currentParentId = s.parent_id || null;
-  currentCommands = Array.isArray(data.commands) ? data.commands : [];
+  if (savedPct !== null) current.ctxPct = savedPct;
+  if (data.timing?.context?.window_tokens) current.ctxWindow = data.timing.context.window_tokens;
+  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.parentId = s.parent_id || 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) currentFirstPreview = normalize(first.content).slice(0,80) + (normalize(first.content).length>80?"…":"");
+    if (first && first.content) current.firstPreview = normalize(first.content).slice(0,80) + (normalize(first.content).length>80?"…":"");
     renderHistory(data.messages);
   } else {
     renderHistory(data.history || []);
-    if (!currentFirstPreview && data.history && data.history.length) {
+    if (!current.firstPreview && data.history && data.history.length) {
       const txt = normalize(String(data.history[0]||"")).slice(0,80);
-      if(txt) currentFirstPreview = txt;
+      if(txt) current.firstPreview = txt;
     }
   }
   // A failed turn's prompt went back to the user: shown after the
@@ -762,22 +732,22 @@ function renderSessionView(data) {
   const replay = snapshotEvents({
     current_turn: data.current_turn,
     queued: data.queued,
-    started_at: currentTiming.activeTurn?.started_at,
+    started_at: current.timing.activeTurn?.started_at,
   });
   replay.forEach((event) => streamHandlers[event.type]?.(event));
   if (!data.current_turn) {
-    setTurnRunning(currentStatus === "running");
-    if (turnRunning && currentTiming.activeTurn?.started_at) startLiveTurnTiming(currentTiming.activeTurn.started_at);
+    setTurnRunning(current.status === "running");
+    if (turnRunning && current.timing.activeTurn?.started_at) startLiveTurnTiming(current.timing.activeTurn.started_at);
   }
   turnDom.flush();
   snapshotCards.current.forEach((card) => upsertCard(card));
   snapshotCards.during.forEach((card) => upsertCard(card));
   // A question the worker is blocked on (also after a reload).
   if (data.pending_question && data.pending_question.id && data.pending_question.status === "pending") {
-    renderQuestionCard(data.pending_question);
+    questionCards.renderQuestion(data.pending_question);
   }
   // A turn ran out of iterations and waits for a yes or no.
-  if (data.continue_offer) renderContinueCard(data.continue_offer);
+  if (data.continue_offer) questionCards.renderContinue(data.continue_offer);
   updateInfoBar();
   updateFirstPeek();
   updateComposerMode();
@@ -789,7 +759,7 @@ function renderHistory(items) {
     return;
   }
   if (typeof items[0] === "object" && items[0].role) {
-    historyEl.innerHTML = turnHistoryHtml(items, currentTiming, { thumbs: (images) => thumbsHtml(selected, images) });
+    historyEl.innerHTML = turnHistoryHtml(items, current.timing, { thumbs: (images) => thumbsHtml(selected, images) });
   } else {
     historyEl.innerHTML = items.map((c) => `<div class="bubble output">${escapeHtml(c)}</div>`).join("");
   }
@@ -818,17 +788,17 @@ async function readTurnEnd() {
   try {
     const d = await getSession(selected, { tail: true });
     if (d.session) {
-      if (Array.isArray(d.session.used_memory_names)) currentUsedMemories = d.session.used_memory_names;
-      if (d.session.status) currentStatus = d.session.status;
+      if (Array.isArray(d.session.used_memory_names)) current.usedMemories = d.session.used_memory_names;
+      if (d.session.status) current.status = d.session.status;
       applyTiming(d.timing);
-      finishLiveTurnTiming(currentTiming.turnRecords[currentTiming.turnRecords.length - 1]);
+      finishLiveTurnTiming(current.timing.turnRecords[current.timing.turnRecords.length - 1]);
       setMarkdownWarning(d.markdown_warning);
       if (Array.isArray(d.messages)) applyFinalMarkdown(d.messages);
       updateInfoBar();
       const sess = allSessions.find(s=>s.id===selected);
       if (sess) {
-        sess.used_memory_names = currentUsedMemories.slice();
-        sess.status = currentStatus;
+        sess.used_memory_names = current.usedMemories.slice();
+        sess.status = current.status;
       }
       render();
       document.querySelectorAll(".card").forEach(el=>el.classList.toggle("active", el.dataset.id===selected));
@@ -909,7 +879,7 @@ function endTurnView(kind, endText = null) {
     if (!turnDom.holds?.()) historyEl.scrollTop = historyEl.scrollHeight;
   }
   // The question dies with its turn (the worker stopped waiting).
-  if (pendingQuestion) resolveQuestionCard(pendingQuestion.id, { cancelled: true, reason: "turn ended" });
+  if (questionCards.pendingQuestion()) questionCards.resolveQuestion(questionCards.pendingQuestion().id, { cancelled: true, reason: "turn ended" });
 }
 
 // ── Prompt bubbles ─────────────────────────────────────────────────────────
@@ -1213,10 +1183,10 @@ function turnAnswerEl(turnEls) {
 function placeResolvedQuestion(entry, before) {
   const pq = entry.pending_question;
   if (!pq?.id || !(entry.answer || entry.cancelled)) return;
-  renderQuestionCard(pq);
-  const card = questionCardEl;
+  questionCards.renderQuestion(pq);
+  const card = questionCards.questionCard();
   if (!card || card.dataset.qid !== String(pq.id)) return;
-  resolveQuestionCard(pq.id, { answer: entry.answer || null, cancelled: !!entry.cancelled, reason: entry.reason || "" });
+  questionCards.resolveQuestion(pq.id, { answer: entry.answer || null, cancelled: !!entry.cancelled, reason: entry.reason || "" });
   const turnEls = reloadedTurnEls(before);
   const asked = Number(entry.iteration) || 1;
   const later = turnEls.find((el) => el.matches(".bubble.user.steered") && Number(el.dataset.step) > asked);
@@ -1295,24 +1265,24 @@ function updateInfoBar() {
     if (stopBtn) stopBtn.style.display = "none";
     return;
   }
-  if (stopBtn) stopBtn.style.display = canStopSession({ owner: currentOwner, streaming: !!streamControl }) ? "" : "none";
+  if (stopBtn) stopBtn.style.display = canStopSession({ owner: current.owner, streaming: !!streamControl }) ? "" : "none";
   const idShort = selected.slice(0,8);
-  const memText = currentUsedMemories.length ? currentUsedMemories.join(", ") : "—";
-  const ctxText = currentCtxPct !== null ? `ctx ${Math.round(currentCtxPct)}%` : "";
+  const memText = current.usedMemories.length ? current.usedMemories.join(", ") : "—";
+  const ctxText = current.ctxPct !== null ? `ctx ${Math.round(current.ctxPct)}%` : "";
   const sessionDuration = currentSessionDuration();
   const timingText = sessionDuration === null ? "" : `session ${formatDuration(sessionDuration)}`;
-  const statusClass = currentStatus ? `status ${escapeHtml(currentStatus)}` : "status";
-  const label = modelLabel(currentModel, ...(currentServed || []));
+  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(currentParentId, allSessions.find((x) => x.id === currentParentId) || null);
-  const parentHtml = parentChip ? `<a class="model parent" href="${escapeHtml(sessionHash(currentParentId))}" title="${escapeHtml(parentChip.title)}">delegated by ${escapeHtml(String(currentParentId).slice(0, 8))}</a>` : "";
+  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>` : "";
   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(currentStatus||"")}</span><span class="model${label.mismatch ? " served-mismatch" : ""}" title="${escapeHtml(label.title)}">${escapeHtml(label.text)}</span>${parentHtml}<span class="dir" title="${escapeHtml(currentDir||"")}">${escapeHtml((currentDir||"").slice(0,48))}</span>${ctxText ? `<span class="model">${escapeHtml(ctxText)}</span>` : ""}${timingText ? `<span class="model">${escapeHtml(timingText)}</span>` : ""}</div>`;
-  const previewHtml = `<div class="preview-line"><span class="preview">${escapeHtml(currentFirstPreview || "—")}</span> · <span class="mem" title="${escapeHtml(currentUsedMemories.join(", "))}">mem: ${escapeHtml(memText)}</span></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}<span class="dir" title="${escapeHtml(current.dir||"")}">${escapeHtml((current.dir||"").slice(0,48))}</span>${ctxText ? `<span class="model">${escapeHtml(ctxText)}</span>` : ""}${timingText ? `<span class="model">${escapeHtml(timingText)}</span>` : ""}</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>`;
   infoTextEl.innerHTML = metaHtml + previewHtml;
-  infoTextEl.title = memoriesTooltip(currentUsedMemories, currentPreloadedMemories, currentMutedMemories);
+  infoTextEl.title = memoriesTooltip(current.usedMemories, current.preloadedMemories, current.mutedMemories);
 }
 
 // `memories: a, b · preloaded: c · muted: d`: the used memories always,
@@ -1325,10 +1295,10 @@ function memoriesTooltip(used, preloaded, muted) {
 }
 
 function currentSessionDuration() {
-  if (turnRunning && currentTiming.startedAt) {
-    return elapsedSince(currentTiming.startedAt);
+  if (turnRunning && current.timing.startedAt) {
+    return elapsedSince(current.timing.startedAt);
   }
-  return currentTiming.sessionDurationMs;
+  return current.timing.sessionDurationMs;
 }
 
 function clearTimingInterval() {
@@ -1342,9 +1312,9 @@ let liveTurnNumber = null;
 
 function startLiveTurnTiming(startedAt = new Date().toISOString()) {
   clearTimingInterval();
-  currentTiming.activeTurn = { started_at: startedAt };
+  current.timing.activeTurn = { started_at: startedAt };
   // The turn records hold the finished turns, so this one comes next.
-  liveTurnNumber = currentTiming.turnRecords.length + 1;
+  liveTurnNumber = current.timing.turnRecords.length + 1;
   liveTurnNote = "";
   liveTurnTimingEl = document.createElement("div");
   liveTurnTimingEl.className = "turn-timing live";
@@ -1362,7 +1332,7 @@ function appendToHistory(el) {
 }
 
 function updateLiveTiming() {
-  const duration = elapsedSince(currentTiming.activeTurn?.started_at);
+  const duration = elapsedSince(current.timing.activeTurn?.started_at);
   if (liveTurnTimingEl && duration !== null) {
     liveTurnTimingEl.textContent = turnTimingText(liveTurnNumber, duration, { running: true }) + (liveTurnNote ? ` · ${liveTurnNote}` : "");
   }
@@ -1373,7 +1343,7 @@ function updateLiveTiming() {
 function setLiveTurnNote(text) {
   if (liveTurnNote === text) return;
   liveTurnNote = text;
-  if (currentTiming.activeTurn) updateLiveTiming();
+  if (current.timing.activeTurn) updateLiveTiming();
 }
 
 // A canceled turn's line says so (+canceled+, or its record's status), as
@@ -1381,29 +1351,29 @@ function setLiveTurnNote(text) {
 function finishLiveTurnTiming(record = null, { canceled = false } = {}) {
   const duration = Number.isFinite(Number(record?.duration_ms))
     ? Number(record.duration_ms)
-    : elapsedSince(currentTiming.activeTurn?.started_at);
+    : elapsedSince(current.timing.activeTurn?.started_at);
   if (liveTurnTimingEl && duration !== null) {
     liveTurnNote = "";
     liveTurnTimingEl.classList.remove("live");
-    const at = record ? currentTiming.turnRecords.indexOf(record) : -1;
+    const at = record ? current.timing.turnRecords.indexOf(record) : -1;
     liveTurnTimingEl.textContent = turnTimingText(at >= 0 ? at + 1 : liveTurnNumber, duration,
       { canceled: canceled || record?.status === "canceled" });
   }
-  currentTiming.activeTurn = null;
+  current.timing.activeTurn = null;
   clearTimingInterval();
   updateInfoBar();
 }
 
 function applyTiming(data) {
-  currentTiming = normalizeTiming(data);
-  if (turnRunning && currentTiming.activeTurn?.started_at) {
-    startLiveTurnTiming(currentTiming.activeTurn.started_at);
+  current.timing = normalizeTiming(data);
+  if (turnRunning && current.timing.activeTurn?.started_at) {
+    startLiveTurnTiming(current.timing.activeTurn.started_at);
   }
 }
 
 function updateFirstPeek() {
-  if (currentCtxPct !== null && currentCtxPct > 20 && currentFirstPreview) {
-    firstPeekEl.textContent = currentFirstPreview;
+  if (current.ctxPct !== null && current.ctxPct > 20 && current.firstPreview) {
+    firstPeekEl.textContent = current.firstPreview;
     firstPeekEl.classList.add("visible");
   } else {
     firstPeekEl.textContent = "";
@@ -1412,11 +1382,11 @@ function updateFirstPeek() {
 }
 
 function setUsedMemories(names) {
-  currentUsedMemories = names.slice();
+  current.usedMemories = names.slice();
   updateInfoBar();
   const sess = allSessions.find(s=>s.id===selected);
   if (sess) {
-    sess.used_memory_names = currentUsedMemories.slice();
+    sess.used_memory_names = current.usedMemories.slice();
     render();
     document.querySelectorAll(".card").forEach(el=>el.classList.toggle("active", el.dataset.id===selected));
   }
@@ -1455,7 +1425,7 @@ function workerGone(id, { opened = true } = {}) {
     endTurnView("gone", endText);
     if (!stopped) setLiveStatus("idle");
   }
-  if (currentOwner === "worker") currentOwner = null;
+  if (current.owner === "worker") current.owner = null;
   // Its card says "live" (the list's owner, or setLiveStatus's) until the
   // hub's event says otherwise: the worker is gone now, as far as this
   // tab can tell.
@@ -1476,28 +1446,27 @@ function workerGone(id, { opened = true } = {}) {
 // them too.
 const streamHandlers = {
   generation_chunk: (data) => {
-    // Phase 2: route the chunk's bytes to the text bubble and the thinking
-    // block (see chunk_router.js). Raw `content` is only used as a fallback
-    // for pre-Phase-2 / non-enriched servers.
+    // 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("");
     turnDom.chunk({ text, thinking, iteration: data.iteration ?? null });
-    const pct = extractCtxPct(data, currentCtxWindow);
+    const pct = extractCtxPct(data, current.ctxWindow);
     if (pct !== null && !Number.isNaN(pct)) {
-      currentCtxPct = pct;
+      current.ctxPct = pct;
       updateInfoBar();
       updateFirstPeek();
     }
   },
   generation_started: (data) => {
-    if (data?.context_window_tokens) currentCtxWindow = data.context_window_tokens;
+    if (data?.context_window_tokens) current.ctxWindow = data.context_window_tokens;
     setLiveTurnNote("");
     turnDom.generationStarted(data || {});
   },
   generation_completed: (data) => {
     setLiveTurnNote("");
     if (data?.served_model) {
-      currentServed = [data.served_model, data.requested_model];
+      current.served = [data.served_model, data.requested_model];
       updateInfoBar();
     }
     turnDom.generationCompleted();
@@ -1599,9 +1568,9 @@ const streamHandlers = {
   // 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 !== currentModel) {
-      currentModel = view.modelName;
-      currentServed = null;
+    if (view.modelName && view.modelName !== current.model) {
+      current.model = view.modelName;
+      current.served = null;
       updateInfoBar();
     }
     if (view.resync) await resync();
@@ -1620,8 +1589,8 @@ const streamHandlers = {
   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 || "" }),
-  continue_offered: (data) => renderContinueCard(data),
-  continue_resolved: (data) => resolveContinueCard(data),
+  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.
@@ -1629,22 +1598,22 @@ const streamHandlers = {
     if (Array.isArray(data.used_memory_names)) setUsedMemories(data.used_memory_names);
   },
   context_status: (data) => {
-    const pct = extractCtxPct(data, currentCtxWindow);
+    const pct = extractCtxPct(data, current.ctxWindow);
     if (pct !== null) {
-      currentCtxPct = pct;
+      current.ctxPct = pct;
       updateInfoBar();
       updateFirstPeek();
     }
   },
   question_requested: (data) => {
-    const pq = data.pending_question || data.pendingQuestion;
-    if (pq && pq.id) renderQuestionCard(pq);
+    const pq = data.pending_question;
+    if (pq && pq.id) questionCards.renderQuestion(pq);
   },
   question_answered: (data) => {
-    resolveQuestionCard(data.id, { answer: data.answer });
+    questionCards.resolveQuestion(data.id, { answer: data.answer });
   },
   question_cancelled: (data) => {
-    resolveQuestionCard(data.id, { cancelled: true, reason: data.reason });
+    questionCards.resolveQuestion(data.id, { cancelled: true, reason: data.reason });
   },
   // One collected just as a turn started describes the chat before it.
   recap_ready: (data) => {
@@ -1685,236 +1654,13 @@ async function refreshTimingFromSession() {
   if (!selected) return;
   try {
     const data = await getSession(selected, { tail: true });
-    if (data.session?.status) currentStatus = data.session.status;
+    if (data.session?.status) current.status = data.session.status;
     applyTiming(data.timing);
-    finishLiveTurnTiming(currentTiming.turnRecords[currentTiming.turnRecords.length - 1]);
+    finishLiveTurnTiming(current.timing.turnRecords[current.timing.turnRecords.length - 1]);
   } catch (_) {}
 }
 
 
-// ── ask_user_question card ─────────────────────────────────────────────────
-// Inline card in the message history: rendered on question_requested (or from
-// pending_question on session select for reload recovery), resolved/disabled
-// on question_answered / question_cancelled so SSE replay and answers from
-// another client converge to the same state.
-
-function renderQuestionCard(pq) {
-  const action = nextCardAction({ cardId: questionCardEl?.dataset.qid ?? null, pendingId: pendingQuestion?.id ?? null }, pq);
-  if (action === "same") return;
-  // A resolved card stays where it was; only a pending one is replaced.
-  if (action === "keep") questionCardEl = null;
-  else removeQuestionCard();
-  pendingQuestion = pq;
-  removeHintIfEmpty();
-
-  const approval = approvalView(pq);
-  const card = document.createElement("details");
-  card.className = approval ? "bubble question approval" : "bubble question";
-  card.dataset.qid = pq.id;
-  // Open while pending: the question must be actionable.
-  card.open = true;
-
-  // The summary is the card's one line: the question (or its header) while
-  // pending, the result once resolved. It replaces the old .question-header.
-  const summary = document.createElement("summary");
-  summary.textContent = summaryText(pq);
-  card.appendChild(summary);
-  // A hand toggle: the resolve's auto-collapse then leaves it as the user
-  // left it (rememberToggle-style, as turn_view.js does).
-  summary.addEventListener("click", () => { card.dataset.toggled = "1"; });
-
-  if (approval) {
-    card.appendChild(renderApprovalDetails(approval));
-  } else {
-    const q = document.createElement("div");
-    q.className = "question-text";
-    q.textContent = pq.question || "";
-    card.appendChild(q);
-  }
-
-  const options = Array.isArray(pq.options) ? pq.options : [];
-  if (options.length) {
-    const list = document.createElement("div");
-    list.className = "question-options";
-    const inputType = pq.multi_select ? "checkbox" : "radio";
-    options.forEach((label, i) => {
-      const row = document.createElement("label");
-      row.className = "question-option";
-      const input = document.createElement("input");
-      input.type = inputType;
-      input.name = `q-${pq.id}`;
-      input.value = String(label);
-      input.dataset.index = String(i);
-      const text = document.createElement("span");
-      text.textContent = String(label);
-      row.appendChild(input);
-      row.appendChild(text);
-      list.appendChild(row);
-    });
-    card.appendChild(list);
-  }
-
-  let freeformInput = null;
-  if (pq.allow_freeform) {
-    freeformInput = document.createElement("input");
-    freeformInput.type = "text";
-    freeformInput.className = "question-freeform";
-    freeformInput.placeholder = approval ? "Reason for the model (with Deny, or alone to deny)…" : "Other…";
-    card.appendChild(freeformInput);
-  }
-
-  const err = document.createElement("div");
-  err.className = "question-error hidden";
-  card.appendChild(err);
-
-  const submit = document.createElement("button");
-  submit.className = "question-submit";
-  submit.textContent = "Submit";
-  submit.addEventListener("click", () => {
-    const chosen = Array.from(card.querySelectorAll(".question-option input:checked")).map((i) => i.value);
-    const freeform = freeformInput ? freeformInput.value.trim() : "";
-    if (!chosen.length && !freeform) {
-      err.textContent = "Pick an option or enter a response.";
-      err.classList.remove("hidden");
-      return;
-    }
-    err.classList.add("hidden");
-    submit.disabled = true;
-    card.classList.add("submitting");
-    sendAnswer(selected, {
-      id: pq.id,
-      selected: chosen,
-      ...(freeform ? { freeform } : {}),
-    }).catch((e) => {
-      submit.disabled = false;
-      card.classList.remove("submitting");
-      err.textContent = /503|not_live/.test(e.message)
-        ? "Session is not running — restart it to answer."
-        : e.message;
-      err.classList.remove("hidden");
-    });
-  });
-  card.appendChild(submit);
-
-  // Leaves the question unanswered, like an empty answer in the terminal.
-  // The card closes on the question_cancelled every client gets.
-  // For an approval, dismissing denies the call.
-  const dismiss = document.createElement("button");
-  dismiss.className = "question-dismiss ghost";
-  dismiss.textContent = approval ? "Deny" : "Dismiss";
-  dismiss.addEventListener("click", () => {
-    err.classList.add("hidden");
-    submit.disabled = true;
-    dismiss.disabled = true;
-    dismissQuestion(selected, pq.id).catch((e) => {
-      submit.disabled = false;
-      dismiss.disabled = false;
-      err.textContent = /503|not_live/.test(e.message)
-        ? "Session is not running — restart it to answer."
-        : e.message;
-      err.classList.remove("hidden");
-    });
-  });
-  card.appendChild(dismiss);
-
-  appendToHistory(card);
-  questionCardEl = card;
-  if (isNearBottom()) historyEl.scrollTop = historyEl.scrollHeight;
-}
-
-// The tool, the command (or paths, or args) as code, where and why; no
-// code box when there is nothing to show.
-function renderApprovalDetails(view) {
-  const box = document.createElement("div");
-  box.className = "approval-details";
-  const tool = document.createElement("div");
-  tool.className = "approval-tool";
-  tool.textContent = view.tool;
-  box.appendChild(tool);
-  if (view.what) {
-    const what = document.createElement("pre");
-    what.className = view.isCommand ? "approval-what command" : "approval-what paths";
-    const code = document.createElement("code");
-    code.textContent = view.what;
-    what.appendChild(code);
-    box.appendChild(what);
-  }
-  // An edit/write: the diff it would make, under the path.
-  if (view.preview) {
-    const diff = document.createElement("div");
-    diff.className = "approval-diff";
-    diff.innerHTML = diffHtml(view.preview);
-    box.appendChild(diff);
-  }
-  for (const [cls, label, text] of [["approval-where", "in", view.where], ["approval-why", "why", view.why]]) {
-    if (!text) continue;
-    const row = document.createElement("div");
-    row.className = cls;
-    const b = document.createElement("span");
-    b.className = "approval-label";
-    b.textContent = `${label} `;
-    row.appendChild(b);
-    row.appendChild(document.createTextNode(text));
-    box.appendChild(row);
-  }
-  return box;
-}
-
-function resolveQuestionCard(id, { answer = null, cancelled = false, reason = "" } = {}) {
-  if (!questionCardEl) return;
-  if (id && pendingQuestion && String(pendingQuestion.id) !== String(id)) return;
-  // A double-delivered question_answered / question_cancelled (SSE replay
-  // after a reconnect) is a no-op: the card is already resolved.
-  if (questionCardEl.classList.contains("answered") || questionCardEl.classList.contains("cancelled")
-    || questionCardEl.querySelector(".question-result")) return;
-
-  const result = resultText(pendingQuestion, { answer, cancelled, reason });
-  const note = document.createElement("div");
-  note.className = "question-result";
-  note.textContent = result;
-  if (cancelled) {
-    questionCardEl.classList.add("cancelled");
-  } else {
-    questionCardEl.classList.add("answered");
-    if (approvalAllowed(pendingQuestion, answer) === false) questionCardEl.classList.add("denied");
-    markQuestionSelection(answer && Array.isArray(answer.selected) ? answer.selected : []);
-  }
-  questionCardEl.appendChild(note);
-  questionCardEl.classList.remove("submitting");
-  disableQuestionInputs();
-  // The summary becomes the result; the card collapses to that one line
-  // unless the user opened or closed it by hand.
-  const summary = questionCardEl.querySelector("summary");
-  if (summary) summary.textContent = summaryText(pendingQuestion, { answer, cancelled, reason });
-  if (!questionCardEl.dataset.toggled) questionCardEl.open = false;
-  pendingQuestion = null;
-}
-
-function markQuestionSelection(sel) {
-  if (!questionCardEl || !sel.length) return;
-  questionCardEl.querySelectorAll(".question-option input").forEach((input) => {
-    if (sel.includes(input.value)) {
-      input.checked = true;
-      input.closest(".question-option").classList.add("selected");
-    }
-  });
-}
-
-function disableQuestionInputs() {
-  if (!questionCardEl) return;
-  questionCardEl.querySelectorAll("input, button").forEach((el) => {
-    el.disabled = true;
-  });
-}
-
-function removeQuestionCard() {
-  if (questionCardEl) {
-    questionCardEl.remove();
-    questionCardEl = null;
-  }
-  pendingQuestion = null;
-}
-
 function removeHintIfEmpty() {
   const hint = historyEl.querySelector(".hint");
   if (!hint) return;
@@ -1961,7 +1707,7 @@ async function handleCreate() {
 
 async function handleSendTurn() {
   if (!selected && !chips.length && isCommandLine(promptEl.value.trim())) return handleCreate();
-  if (currentOwner === "tui") return;
+  if (current.owner === "tui") return;
   const prompt = turnText(promptEl.value, chips);
   if (!prompt) return;
   if (!chips.length && isCommandLine(prompt)) return handleSendCommand(prompt);
@@ -1986,8 +1732,8 @@ async function handleSendTurn() {
   const sending = chips.slice();
   const echo = makeUserBubble(prompt, { state: "queued", own: true, images: sending });
   if (!turnDom.holds?.()) historyEl.scrollTop = historyEl.scrollHeight;
-  if (!currentFirstPreview || currentFirstPreview==="—") {
-    currentFirstPreview = normalize(prompt).slice(0,80) + (normalize(prompt).length>80?"…":"");
+  if (!current.firstPreview || current.firstPreview==="—") {
+    current.firstPreview = normalize(prompt).slice(0,80) + (normalize(prompt).length>80?"…":"");
     updateInfoBar();
     updateFirstPeek();
   }
@@ -2023,13 +1769,13 @@ async function handleSendTurn() {
       return;
     }
     if (/owned_by_tui|409/.test(e.message)) {
-      currentOwner = "tui";
+      current.owner = "tui";
       updateComposerMode();
       return;
     }
     alert(e.message);
   } finally {
-    actionBtn.disabled = currentOwner === "tui";
+    actionBtn.disabled = current.owner === "tui";
     promptEl.focus();
   }
 }
@@ -2053,13 +1799,13 @@ async function handleSendCommand(line) {
     if (!streamControl?.live) startStream(selected, selectSeq ?? 0);
   } catch (e) {
     if (/owned_by_tui|409/.test(e.message)) {
-      currentOwner = "tui";
+      current.owner = "tui";
       updateComposerMode();
       return;
     }
     addCommandBubble({ label: null, line, text: e.message, failed: true });
   } finally {
-    actionBtn.disabled = currentOwner === "tui";
+    actionBtn.disabled = current.owner === "tui";
     promptEl.focus();
   }
 }
@@ -2106,88 +1852,6 @@ function addNoteBubble(note) {
   if (follow) historyEl.scrollTop = historyEl.scrollHeight;
 }
 
-// ── continue card ──────────────────────────────────────────────────────────
-// A turn ran out of iterations: continue it, drop it, or drop it saying why
-// (the terminal's continue prompt). Answers go as /continue commands; the
-// card closes on the continue_resolved every client gets.
-
-const CONTINUE_DECISIONS = {
-  resume: "Continued",
-  abort: "Not continued",
-  abort_with_reason: "Not continued (reason noted)",
-  dropped: "Dropped: a new prompt came",
-};
-
-function renderContinueCard(offer) {
-  if (continueCardEl?.isConnected) return;
-  removeHintIfEmpty();
-  const card = document.createElement("div");
-  card.className = "bubble continue";
-  const text = document.createElement("div");
-  text.className = "continue-text";
-  text.textContent = "The turn ran out of iterations. Continue it?";
-  card.appendChild(text);
-  const task = offer?.context?.original_prompt;
-  if (task) {
-    const ctx = document.createElement("div");
-    ctx.className = "continue-context";
-    ctx.textContent = task;
-    card.appendChild(ctx);
-  }
-  const err = document.createElement("div");
-  err.className = "question-error hidden";
-  const answer = (line) => {
-    err.classList.add("hidden");
-    card.querySelectorAll("button, input").forEach((el) => { el.disabled = true; });
-    sendCommand(selected, line, { clientId }).catch((e) => {
-      card.querySelectorAll("button, input").forEach((el) => { el.disabled = false; });
-      err.textContent = e.message;
-      err.classList.remove("hidden");
-    });
-  };
-  const yes = document.createElement("button");
-  yes.className = "continue-yes";
-  yes.textContent = "Yes";
-  yes.addEventListener("click", () => answer(continueLine("yes")));
-  const no = document.createElement("button");
-  no.className = "continue-no ghost";
-  no.textContent = "No";
-  no.addEventListener("click", () => answer(continueLine("no")));
-  const reason = document.createElement("input");
-  reason.type = "text";
-  reason.className = "continue-reason";
-  reason.placeholder = "Why not? (the model reads it)";
-  const noBecause = document.createElement("button");
-  noBecause.className = "continue-no-reason ghost";
-  noBecause.textContent = "No, because…";
-  noBecause.addEventListener("click", () => {
-    if (!reason.value.trim()) return reason.focus();
-    answer(continueLine("no", reason.value));
-  });
-  const row = document.createElement("div");
-  row.className = "continue-actions";
-  [yes, no, reason, noBecause].forEach((el) => row.appendChild(el));
-  card.appendChild(row);
-  card.appendChild(err);
-  const follow = isNearBottom();
-  appendToHistory(card);
-  continueCardEl = card;
-  if (follow) historyEl.scrollTop = historyEl.scrollHeight;
-}
-
-function resolveContinueCard(data) {
-  const card = continueCardEl;
-  continueCardEl = null;
-  if (!card) return;
-  card.classList.add("resolved");
-  card.querySelectorAll("button, input").forEach((el) => { el.disabled = true; });
-  const note = document.createElement("div");
-  note.className = "question-result";
-  const who = isOwn(data.client_id, clientId) ? "" : ` (${clientLabel(data.client_id) || "another client"})`;
-  note.textContent = (CONTINUE_DECISIONS[data.decision] || data.decision || "Answered") + who;
-  card.appendChild(note);
-}
-
 async function handleCancel() {
   if (!selected) return;
   cancelBtn.disabled = true;
@@ -2370,97 +2034,17 @@ document.addEventListener("keydown", (e) => {
   if (e.key === "Escape" && !lightboxEl.hidden) lightboxEl.hidden = true;
 });
 cancelBtn.addEventListener("click", () => handleCancel());
-// ── / autocomplete ─────────────────────────────────────────────────────────
-// While the composer holds one "/word", a small glass list above it offers
-// the session's commands (its worker's, plugins' too): arrows move, ⏎/Tab
-// pick, Esc closes, a tap picks. A closed list takes no keys.
-
-let currentCommands = [];
-let commandShown = [];
-let commandIndex = 0;
-const commandListEl = $("#commandList");
-
-function commandListOpen() {
-  return !commandListEl.hidden && commandShown.length > 0;
-}
-
-function updateCommandList() {
-  const shown = selected && currentOwner !== "tui" ? commandMatches(currentCommands, promptEl.value) : [];
-  if (!shown.length) return closeCommandList();
-  const keep = commandShown[commandIndex]?.name;
-  commandShown = shown;
-  commandIndex = Math.max(0, shown.findIndex((c) => c.name === keep));
-  renderCommandList();
-}
-
-function renderCommandList() {
-  commandListEl.innerHTML = commandShown.map((c, i) => {
-    const row = commandRow(c);
-    const note = row.note ? `<span class="command-note">${escapeHtml(row.note)}</span>` : "";
-    return `<div class="command-option${i === commandIndex ? " active" : ""}" role="option" id="command-option-${i}" ` +
-      `aria-selected="${i === commandIndex}" data-index="${i}"><span class="command-name">${escapeHtml(row.name)}</span>` +
-      `<span class="command-desc">${escapeHtml(row.description)}</span>${note}</div>`;
-  }).join("");
-  commandListEl.hidden = false;
-  promptEl.setAttribute("aria-expanded", "true");
-  promptEl.setAttribute("aria-activedescendant", `command-option-${commandIndex}`);
-  commandListEl.querySelector(".command-option.active")?.scrollIntoView({ block: "nearest" });
-}
-
-function closeCommandList() {
-  commandShown = [];
-  commandIndex = 0;
-  commandListEl.hidden = true;
-  commandListEl.innerHTML = "";
-  promptEl.setAttribute("aria-expanded", "false");
-  promptEl.removeAttribute("aria-activedescendant");
-}
-
-// @return whether the pick took the key (false: ⏎ on a full name sends it)
-function acceptCommand(index, { enter = false } = {}) {
-  const command = commandShown[index];
-  if (!command) return false;
-  const pick = pickCommand(command.name, promptEl.value, { enter });
-  closeCommandList();
-  if (pick.send) return false;
-  promptEl.value = pick.text;
-  promptEl.setSelectionRange(pick.text.length, pick.text.length);
-  fitPrompt();
-  promptEl.focus();
-  return true;
-}
-
-// @return whether the open list took the key
-function handleCommandListKey(e) {
-  if (!commandListOpen() || e.isComposing) return false;
-  if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-    commandIndex = moveSelection(commandIndex, commandShown.length, e.key === "ArrowDown" ? 1 : -1);
-    renderCommandList();
-  } else if (e.key === "Tab" && !e.shiftKey) {
-    acceptCommand(commandIndex);
-  } else if (e.key === "Enter" && !e.shiftKey) {
-    if (!acceptCommand(commandIndex, { enter: true })) return false;
-  } else if (e.key === "Escape") {
-    closeCommandList();
-    e.stopPropagation();
-  } else {
-    return false;
-  }
-  e.preventDefault();
-  return true;
-}
-
-promptEl.addEventListener("input", updateCommandList);
-promptEl.addEventListener("blur", closeCommandList);
-// Keep the focus in the composer: the pick happens on click.
-commandListEl.addEventListener("pointerdown", (e) => e.preventDefault());
-commandListEl.addEventListener("click", (e) => {
-  const option = e.target.closest(".command-option");
-  if (option) acceptCommand(Number(option.dataset.index));
+// The / autocomplete (command_list.js): the session's commands while the
+// composer holds one "/word".
+const commandList = createCommandList({
+  list: $("#commandList"),
+  prompt: promptEl,
+  commands: () => (selected && current.owner !== "tui" ? current.commands : []),
+  afterPick: () => fitPrompt(),
 });
 
 promptEl.addEventListener("keydown", (e) => {
-  if (handleCommandListKey(e)) return;
+  if (commandList.handleKey(e)) return;
   if (e.key === "Enter" && !e.shiftKey) {
     e.preventDefault();
     if (!selected) handleCreate();
@@ -2477,7 +2061,7 @@ $("#infoStopBtn").addEventListener("click", async () => {
     if (id === selected) {
       // The worker is gone: don't wait for its stream to notice.
       streamControl?.close();
-      currentStatus = "stopped";
+      current.status = "stopped";
       workerGone(id);
     }
   } finally {
@@ -2523,7 +2107,7 @@ async function setArchived(id, archive, { undo = true } = {}) {
     if (archive && id === selected && (result.stopped || []).includes(id)) {
       // Its worker is gone: don't wait for its stream to notice.
       streamControl?.close();
-      currentStatus = "stopped";
+      current.status = "stopped";
       workerGone(id);
     }
   } catch (e) {
@@ -2556,239 +2140,28 @@ $("#includeArchived").addEventListener("change", () => {
   if (allViewOpen()) renderAll();
 });
 
-// ── Annotate ───────────────────────────────────────────────────────────────
-// Selecting text in an answer, thinking, a tool row or an own message shows
-// "Annotate" and the presets (web.annotate_presets); Annotate appends the
-// quote (with where it came from) to the composer, a preset the quote with
-// its text as the note. Nothing is sent. The bar lives outside #history,
-// which is re-rendered whole. The selection is read when it changes: a live
-// bubble rewrites its text every frame, which would collapse it by the time
-// a button is clicked.
-
-const annotatePresets = parsePresets(document.body.dataset.annotatePresets);
-const annotateBar = document.createElement("div");
-annotateBar.id = "annotateBar";
-annotateBar.hidden = true;
-annotateBar.setAttribute("role", "toolbar");
-annotateBar.setAttribute("aria-label", "Annotate");
-function annotateButton(text, cls) {
-  const btn = document.createElement("button");
-  btn.type = "button";
-  btn.className = cls;
-  btn.textContent = text;
-  return btn;
-}
-annotateBar.appendChild(annotateButton("Annotate", "annotate-main"));
-annotatePresets.forEach((text, i) => {
-  const btn = annotateButton(text, "annotate-preset");
-  btn.dataset.index = String(i);
-  btn.title = text;
-  annotateBar.appendChild(btn);
+// Annotate (annotate_bar.js): a selection in the conversation offers
+// "Annotate" and the presets, which append a quote to the composer.
+const annotateBar = createAnnotateBar({
+  presets: parsePresets(document.body.dataset.annotatePresets),
+  canAnnotate: () => !!selected && current.owner !== "tui",
+  roots: turnRoots,
+  isLive: (root) => turnRunning && turnDom.containsLive(root),
+  onQuote: (text) => {
+    promptEl.value = appendQuote(promptEl.value, text);
+    fitPrompt();
+    promptEl.focus();
+    promptEl.setSelectionRange(promptEl.value.length, promptEl.value.length);
+    promptEl.scrollTop = promptEl.scrollHeight;
+  },
 });
-document.body.appendChild(annotateBar);
-let pendingQuote = null;
-
-function hideAnnotate() {
-  pendingQuote = null;
-  annotateBar.hidden = true;
-}
-
-function updateAnnotate() {
-  const sel = window.getSelection();
-  if (!selected || currentOwner === "tui" || !sel || sel.isCollapsed || !sel.rangeCount) return hideAnnotate();
-  const range = sel.getRangeAt(0);
-  if (!turnRoots().some((root) => root.contains(range.startContainer))) return hideAnnotate();
-  const source = annotationSource(range.startContainer);
-  // A running turn's narration box shows complete sentences and its thinking
-  // is appended by delta; a selection in either is refused while the step is
-  // live — the quote lands once it closes (then on the full text).
-  if (!source || (turnRunning && turnDom.containsLive(source.root))) return hideAnnotate();
-  // Clip to where the selection starts: one tool row, one bubble.
-  const clipped = range.cloneRange();
-  if (!source.root.contains(range.endContainer)) clipped.setEnd(source.root, source.root.childNodes.length);
-  const block = quoteBlock(clipped.toString(), source);
-  if (!block) return hideAnnotate();
-  pendingQuote = block;
-  const rects = clipped.getClientRects();
-  const rect = rects.length ? rects[rects.length - 1] : clipped.getBoundingClientRect();
-  annotateBar.hidden = false;
-  // Measured at the left edge: a fixed element's shrink-to-fit width is
-  // capped by what's right of it, so at the last (right) spot it would
-  // measure wrapped.
-  annotateBar.style.left = "8px";
-  const w = annotateBar.offsetWidth;
-  const h = annotateBar.offsetHeight;
-  const maxTop = window.innerHeight - h - 8;
-  const top = Math.min(rect.bottom + 6, maxTop);
-  annotateBar.style.top = `${Math.max(top, 8)}px`;
-  annotateBar.style.left = `${annotateBarLeft(rect, w, window.innerWidth)}px`;
-  // Not over a copy button (this bubble's, one inside it, the next
-  // bubble's).
-  const box = annotateBar.getBoundingClientRect();
-  const bubble = source.root.closest(".bubble");
-  const near = [bubble, bubble?.nextElementSibling].filter(Boolean);
-  for (const btn of near.flatMap((el) => [...el.querySelectorAll(".copy-btn")])) {
-    const r = btn.getBoundingClientRect();
-    if (r.bottom < box.top || r.top > box.bottom || r.right < box.left || r.left > box.right) continue;
-    annotateBar.style.top = `${Math.max(Math.min(r.bottom + 4, maxTop), 8)}px`;
-    break;
-  }
-}
-
-let annotateRaf = false;
-function scheduleAnnotate() {
-  if (annotateRaf) return;
-  annotateRaf = true;
-  requestAnimationFrame(() => { annotateRaf = false; updateAnnotate(); });
-}
-document.addEventListener("selectionchange", scheduleAnnotate);
-historyEl.addEventListener("scroll", scheduleAnnotate);
-turnDom.scrollEl?.addEventListener("scroll", scheduleAnnotate, true);
-window.addEventListener("resize", scheduleAnnotate);
+historyEl.addEventListener("scroll", annotateBar.schedule);
+turnDom.scrollEl?.addEventListener("scroll", annotateBar.schedule, true);
 turnRoots().forEach((root) => installCopy(root));
-// Keep the selection when a button is pressed.
-annotateBar.addEventListener("mousedown", (e) => e.preventDefault());
-annotateBar.addEventListener("click", (e) => {
-  const btn = e.target.closest("button");
-  if (!btn || !pendingQuote) return;
-  const preset = btn.dataset.index === undefined ? null : annotatePresets[Number(btn.dataset.index)];
-  promptEl.value = appendQuote(promptEl.value, preset ? presetNote(pendingQuote, preset) : pendingQuote);
-  fitPrompt();
-  window.getSelection()?.removeAllRanges();
-  hideAnnotate();
-  promptEl.focus();
-  promptEl.setSelectionRange(promptEl.value.length, promptEl.value.length);
-  promptEl.scrollTop = promptEl.scrollHeight;
-});
-
-// ── Notifications (notify.js): when a session needs the user (a question,
-// an approval, a failed turn, a long turn done) and this tab is not in
-// front, an OS notification (the bell turns them on) and a count in the
-// title (always). One tag per event, so several tabs show one, and none
-// while another chi tab is in front with it (notify.js, Several tabs).
-const NOTIFY_KEY = "chi_notify";
-const notifyBtn = $("#notifyBtn");
-let attention = initialAttentionState();
-const badgeKeys = new Set();
-let baseTitle = "Chi";
-
-function setTitle() {
-  document.title = badgeKeys.size ? `(${badgeKeys.size}) ${baseTitle}` : baseTitle;
-}
-
-// The user is looking at this tab: visible and focused (a window behind
-// the terminal is visible but not focused).
-function tabInFront() {
-  return document.visibilityState === "visible" && document.hasFocus();
-}
-
-function notifyWanted() {
-  try { return localStorage.getItem(NOTIFY_KEY) === "1"; } catch (_) { return false; }
-}
-
-// "on" | "off" | "denied" | "unsupported" (notify.js)
-function notifyState() {
-  const hasNotification = typeof globalThis.Notification === "function";
-  return bellState({
-    hasNotification,
-    secureContext: globalThis.isSecureContext !== false,
-    permission: hasNotification ? Notification.permission : "default",
-    wanted: notifyWanted(),
-  });
-}
-
-const NOTIFY_TITLES = {
-  on: "Notifications on: a session that needs you while this tab is in the background. Click to turn off",
-  off: "Notify me when a session needs me while this tab is in the background",
-  denied: "Notifications are blocked for this site in the browser's settings",
-};
 
-function renderNotifyBtn() {
-  const state = notifyState();
-  notifyBtn.hidden = state === "unsupported";
-  notifyBtn.dataset.state = state;
-  notifyBtn.title = NOTIFY_TITLES[state] || "";
-  notifyBtn.setAttribute("aria-pressed", state === "on" ? "true" : "false");
-}
-
-async function toggleNotify() {
-  const state = notifyState();
-  if (state === "unsupported" || state === "denied") return;
-  let wanted = state !== "on";
-  if (wanted && Notification.permission !== "granted") {
-    wanted = (await Notification.requestPermission()) === "granted";
-  }
-  try { localStorage.setItem(NOTIFY_KEY, wanted ? "1" : "0"); } catch (_) {}
-  renderNotifyBtn();
-}
-
-function showNotification(session, a) {
-  if (notifyState() !== "on") return;
-  const { title, body } = attentionText(session, a);
-  try {
-    const n = new Notification(title, { body, tag: a.key });
-    n.onclick = () => {
-      window.focus();
-      location.hash = sessionHash(a.sessionId);
-      n.close();
-    };
-  } catch (_) {}
-}
-
-// Another chi tab in front has these (notify.js, Several tabs).
-function seenElsewhere(keys) {
-  const size = badgeKeys.size;
-  for (const key of keys) badgeKeys.delete(key);
-  if (badgeKeys.size !== size) setTitle();
-}
-let notifyChannel = null;
-try {
-  if (typeof globalThis.BroadcastChannel === "function") notifyChannel = new BroadcastChannel(NOTIFY_CHANNEL);
-} catch (_) {}
-const notifyGate = createNotifyGate({ channel: notifyChannel, onSeen: seenElsewhere });
-
-// Every hub frame goes through here before the list takes it.
-function noticeSessions(type, data) {
-  const next = trackAttention(attention, type, data);
-  attention = next.state;
-  const size = badgeKeys.size;
-  for (const key of next.closed) badgeKeys.delete(key);
-  notifyGate.drop(next.closed);
-  if (next.attentions.length > 0 && tabInFront()) {
-    notifyGate.seenInFront(next.attentions.map((a) => a.key));
-  } else {
-    for (const a of next.attentions) {
-      notifyGate.offer(a, () => {
-        if (tabInFront()) return;
-        badgeKeys.add(a.key);
-        setTitle();
-        showNotification(attention.byId[a.sessionId], a);
-      });
-    }
-  }
-  if (badgeKeys.size !== size) setTitle();
-}
-
-// The user is here: the badge goes, and the other tabs drop what it had.
-function clearBadge() {
-  if (badgeKeys.size === 0) return;
-  notifyGate.seenInFront([...badgeKeys]);
-  badgeKeys.clear();
-  setTitle();
-}
-
-// The user is back: the page turned visible (Safari makes it visible
-// before it has focus, and a tab switch inside a focused window sends no
-// focus event), the window got focus, or they touched the page.
-function backInFront() {
-  if (document.visibilityState === "visible") clearBadge();
-}
-document.addEventListener("visibilitychange", backInFront);
-window.addEventListener("focus", backInFront);
-document.addEventListener("pointerdown", clearBadge, true);
-document.addEventListener("keydown", clearBadge, true);
-notifyBtn.addEventListener("click", toggleNotify);
-renderNotifyBtn();
+// Notifications (notifications.js): an OS notification and a title count
+// when a session needs the user while this tab is not in front.
+const notifications = createNotifications({ button: $("#notifyBtn") });
 
 // The latest-sessions strip can be hidden for more chat room; the choice
 // stays per browser (it replaced zen mode, so a zen user starts hidden).