samagotchi 0.91.0 → 0.93.0

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

@@ -23,31 +23,23 @@ import {
   renderText,
 } from "./data.js";
 import { createContextChips } from "./context_chips.js";
-import {
-  chipModel as llmContextChipModel, choiceWords, createLlmContextControl, NEW_SESSION,
-  withChoice,
-} from "./llm_context_chip.js";
-import {
-  chipModel as thinkingChipModel, createThinkingControl,
-  withChoice as withThinkingChoice,
-} from "./thinking_chip.js";
+import { createLlmContextControl } from "./llm_context_chip.js";
+import { createThinkingControl } from "./thinking_chip.js";
 import { createReasoningHistoryControl } from "./reasoning_history_chip.js";
 import { renderInfoBar } from "./info_bar.js";
 import { sessionBar, workerBadgeFor } from "./info_bar_model.js";
 import { createShownTexts } from "./shown_texts.js";
-import { MODEL_KEY } from "./model_pick.js";
 import { emptySessionState, sessionStateFrom } from "./session_state.js";
-import { createModelPicker } from "./model_picker.js";
-import { admitImages, chipName, chipsTemplate, imageFiles, restoredChips, thumbsTemplate, turnRefs, turnText, uploadChips } from "./images.js";
-import { normalize, firstPreview, failedTurnText, deleteConfirmText, goneSessionNotice, cantText, withLiveStatus, withoutWorker } from "./format.js";
+import { admitImages, chipName, chipsTemplate, imageFiles, thumbsTemplate } from "./images.js";
+import { normalize, failedTurnText, cantText, withLiveStatus, withoutWorker } from "./format.js";
 import { createTurnView, turnHistoryNodes } from "./turn_view.js";
 import { elementOf, emptyAnswerTemplate } from "./turn_html.js";
-import { createBubbles, hintEl, outputBubbleTemplate, setBubbleDelivery } from "./bubbles.js";
+import { createBubbles, hintEl, outputBubbleTemplate } from "./bubbles.js";
 import { createCardsPlace } from "./cards_place.js";
 import { createStageView, FOLD_MS } from "./stage_view.js";
 import { createMarkdownPlace } from "./markdown_place.js";
 import { reducedMotion, STAGE_GAP } from "./stage_frame.js";
-import { chainNeighbours, continueRefusal, continuedText, freshLink, openChildrenTemplate, openerText, openTitle } from "./chains.js";
+import { openerText, openTitle } from "./chains.js";
 import { createTaskStopper } from "./task_stop.js";
 import { appendQuote } from "./annotations.js";
 import { parsePresets } from "./annotate_presets.js";
@@ -68,7 +60,7 @@ import { easeScrollTo, FOLLOW_MS, shouldFollowScroll } from "./scroll.js";
 import { SHORT_WINDOW_QUERY, stripAutoHidden } from "./strip.js";
 import { createStripGrip } from "./strip_grip.js";
 import { waitingOn } from "./notify.js";
-import { applySessionEvent, inTree, sortedByUpdated } from "./sessions_list.js";
+import { applySessionEvent, sortedByUpdated } from "./sessions_list.js";
 import { createNotifications } from "./notifications.js";
 import { tabTitle, topBarTitle } from "./session_title.js";
 import { restartConfirmText, versionNotice } from "./update_notice.js";
@@ -82,8 +74,7 @@ import { linkRefs, touchedFiles } from "./ref_scan.js";
 import { DONE_MS, applyInitEvent, dropDone, fadeDone, initRowTemplate, newInitTasks, seedInitTasks } from "./init_row.js";
 import { newClientId, snapshotEvents, workerGoneText } from "./turn_events.js";
 import { applyConfirm, keptCommandBubbles, restoreCommandBubbles } from "./commands.js";
-import { createComposerCommands, routeComposerLine, routeSessionLine } from "./composer.js";
-import { composerAfterAck, dropEarlyRestores, restoreOnAck } from "./restore.js";
+import { createComposerCommands } from "./composer.js";
 import { createStreamHandlers } from "./stream_handlers.js";
 import { createListsView } from "./lists_view.js";
 import { createDeliveryControl, QUEUE_NEEDS_WORKER } from "./delivery_line.js";
@@ -93,6 +84,9 @@ import { toolName } from "./activity.js";
 import { toastBottom } from "./toast_place.js";
 import { createToasts } from "./toasts.js";
 import { createUnqueue } from "./unqueue.js";
+import { createStartPage } from "./start_page.js";
+import { createSessionActions } from "./session_actions.js";
+import { createSendTurn } from "./send_turn.js";
 
 const $ = (s) => document.querySelector(s);
 const topStripEl = $("#topStrip");
@@ -122,26 +116,6 @@ const llmContextControl = createLlmContextControl({
   running: () => liveTurn.running,
   run: (line) => runSessionCommand(line),
 });
-// The start page's LLM context chip, beside the model picker: the picked
-// model's values, and a choice for the next new session only (sent with its
-// create, then dropped; never remembered: a reload or opening a session
-// drops it too, a failed create keeps it).
-const llmContextNewEl = $("#llmContextNew");
-let newChatLlmContext = null;
-const newChatLlmSummary = () => (selected || modelPickEl.hidden ? null : modelPicker.chosenRow()?.llm_context || null);
-const llmContextNewControl = createLlmContextControl({
-  el: llmContextNewEl,
-  summary: newChatLlmSummary,
-  kind: NEW_SESSION,
-  choice: () => newChatLlmContext,
-  choose: (next) => {
-    newChatLlmContext = next;
-    renderNewChatLlmContext();
-    focusPrompt();
-  },
-  id: "llmContextNewPopover",
-  anchor: "#llmContextNew",
-});
 // The open session's thinking chip, beside the llm ctx one: /thinking runs
 // in the session's worker.
 const thinkingControl = createThinkingControl({
@@ -160,41 +134,26 @@ const reasoningHistoryControl = createReasoningHistoryControl({
   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 session only (sent with its create, then dropped).
-const thinkingNewEl = $("#thinkingNew");
-let newChatThinking = null;
-const newChatThinkingSummary = () => (selected || modelPickEl.hidden ? null : modelPicker.chosenRow()?.thinking || null);
-const thinkingNewControl = createThinkingControl({
-  el: thinkingNewEl,
-  summary: newChatThinkingSummary,
-  kind: NEW_SESSION,
-  choice: () => newChatThinking,
-  choose: (next) => {
-    newChatThinking = next;
-    renderNewChatThinking();
-    focusPrompt();
-  },
-  id: "thinkingNewPopover",
-  anchor: "#thinkingNew",
+// The start page's model picker and its LLM context and thinking chips
+// (start_page.js); a fresh chain link's picker too.
+const startPage = createStartPage({
+  pickEl: $("#modelPick"),
+  panelEl: $("#modelPanel"),
+  searchEl: $("#modelSearch"),
+  listEl: $("#modelList"),
+  composerEl: $("#composer"),
+  centerEl: $("#center"),
+  llmContextEl: $("#llmContextNew"),
+  thinkingEl: $("#thinkingNew"),
+  selected: () => selected,
+  state: () => current,
+  running: () => liveTurn.running,
+  sessions: () => allSessions,
+  run: (line) => runSessionCommand(line),
+  focusPrompt: () => focusPrompt(),
+  toast: (text) => showToast(text),
+  listModels,
 });
-function renderNewChatThinking() {
-  const chip = thinkingChipModel(withThinkingChoice(newChatThinkingSummary(), newChatThinking), { kind: NEW_SESSION });
-  thinkingNewEl.hidden = !chip;
-  if (!chip) return thinkingNewControl.close();
-  thinkingNewEl.textContent = chip.text;
-  thinkingNewEl.title = chip.title;
-  thinkingNewEl.classList.toggle("own", chip.own);
-}
-// Hidden without the model's values (the list not in, an older server).
-function renderNewChatLlmContext() {
-  const chip = llmContextChipModel(withChoice(newChatLlmSummary(), newChatLlmContext), { kind: NEW_SESSION });
-  llmContextNewEl.hidden = !chip;
-  if (!chip) return llmContextNewControl.close();
-  llmContextNewEl.textContent = chip.text;
-  llmContextNewEl.title = chip.title;
-  llmContextNewEl.classList.toggle("own", chip.own);
-}
 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
@@ -210,7 +169,6 @@ const cancelBtn = $("#cancelBtn");
 const attachBtn = $("#attachBtn");
 const attachInput = $("#attachInput");
 const infoCancelBtn = $("#infoCancelBtn");
-const modelPickEl = $("#modelPick");
 const composeHintEl = $("#composeHint");
 
 let selected = null;
@@ -506,27 +464,28 @@ const lists = createListsView({
   leaveAllView: (hash) => leaveAllView(hash),
 });
 
-// Delete a session (the info bar's button, an all-sessions card's ✕) after
-// a confirm; the list drops it without a reload. The server stops a live
-// worker first and refuses a session a terminal chi has open.
-async function confirmDelete(id) {
-  const sess = allSessions.find((s) => s.id === id) || { id };
-  if (sess.owner === "tui") {
-    alert(`Session ${id.slice(0, 8)} is open in a terminal chi; close it there first.`);
-    return;
-  }
-  if (!confirm(deleteConfirmText(sess))) return;
-  try {
-    await deleteSession(id);
-  } catch (e) {
-    alert(`Could not delete session ${id.slice(0, 8)}: ${e.message}`);
-    if (!eventsControl) refresh();
-    return;
-  }
-  allSessions = allSessions.filter((s) => s.id !== id);
-  if (selected === id) clearSelection();
-  lists.render();
-}
+// Continue, Archive, Delete and Stop, and the start page when the open
+// session is gone (session_actions.js).
+const sessionActions = createSessionActions({
+  selected: () => selected,
+  state: () => current,
+  sessions: () => allSessions,
+  setSessions: (list) => { allSessions = list; },
+  api: { continueSession, archiveSession, unarchiveSession, deleteSession, stopSession },
+  eventsLive: () => !!eventsControl,
+  refresh,
+  lists,
+  select,
+  clearSelection,
+  showNotice,
+  updateInfoBar,
+  toast: showToast,
+  addCreatedSession,
+  fillOpener,
+  closeLiveStream: () => streamControl?.close(),
+  workerGone,
+});
+const { confirmDelete, leaveGoneSession, continueSelected, archiveOne, setArchived } = sessionActions;
 
 // All sessions: its own view at #/sessions, so the browser's back button
 // leaves it. Opened from the page, it closes with history.back().
@@ -616,24 +575,13 @@ function updateComposerMode() {
   if (document.body.classList.toggle("has-session", !!selected) !== hadSession) {
     hadSession = !hadSession;
     // Back on the start page: its remembered model, not the last link's.
-    if (!hadSession) restoreStartPick();
+    if (!hadSession) startPage.restoreStartPick();
     fitPrompt();
     placeToast();
   }
-  syncModelPick();
-  if (selected) {
-    llmContextNewControl.close();
-    // The start page's choice was for a new session: opening a session drops it.
-    if (newChatLlmContext) {
-      newChatLlmContext = null;
-      renderNewChatLlmContext();
-    }
-    thinkingNewControl.close();
-    if (newChatThinking) {
-      newChatThinking = null;
-      renderNewChatThinking();
-    }
-  }
+  startPage.syncModelPick();
+  // The start page's choice was for a new session: opening a session drops it.
+  if (selected) startPage.dropChoices();
   const running = liveTurn.running && !!selected;
   cancelBtn.style.display = running ? "" : "none";
   // No images for a session a terminal owns (it takes no message from here);
@@ -768,13 +716,6 @@ function clearNotice() {
 }
 promptEl.addEventListener("input", clearNotice);
 
-// The open session no longer exists: back to the start page, saying why.
-function leaveGoneSession(id, why) {
-  if (selected !== id) return;
-  clearSelection();
-  showNotice(goneSessionNotice(id, why));
-}
-
 async function select(id) {
   clearNotice();
   selected = id;
@@ -992,7 +933,10 @@ async function readTurnEnd() {
       lists.render();
       lists.paintActive();
     }
-  } catch(_){}
+  } catch (_) {
+    // A failed read (the server or worker gone a moment) leaves the answer
+    // as the stream drew it, plain text: the session's next load renders it.
+  }
 }
 
 function seedSeenFromDom() {
@@ -1085,7 +1029,7 @@ async function restartWorker() {
 function updateInfoBar() {
   const { buttons, bar } = sessionBar({
     id: selected, state: current, sessions: allSessions, versions, cardTitle: (s) => lists.cardTitle(s),
-    continuing: continuingIds, restarting: restartingIds, streaming: !!streamControl, running: liveTurn.running,
+    continuing: sessionActions.continuing, restarting: restartingIds, streaming: !!streamControl, running: liveTurn.running,
     now: Date.now(),
   });
   const stopBtn = document.getElementById("infoStopBtn");
@@ -1114,7 +1058,7 @@ function updateInfoBar() {
   updateSessionTitle();
   // A fresh link's picker follows what the bar follows: its model, its
   // owner, a next link continued from elsewhere.
-  syncModelPick();
+  startPage.syncModelPick();
 }
 
 // The open session's title, once on screen (session_title.js): its strip
@@ -1211,10 +1155,6 @@ function startStream(id, fromSeq) {
   updateInfoBar();
 }
 
-// The session this tab is stopping: its stream may close before the stop
-// request returns.
-let stoppingId = null;
-
 // +opened+ false: the stream never delivered a frame (the proxy answered
 // 503, or the bridge refused it), so a retry waits a moment rather than
 // spinning through resync → stream → error.
@@ -1223,7 +1163,7 @@ function workerGone(id, { opened = true } = {}) {
   streamControl = null;
   if (id !== selected) return;
   // A turn that was running is over: its worker can't finish it.
-  const stopped = stoppingId === id;
+  const stopped = sessionActions.stoppingId() === id;
   const endText = workerGoneText({ turnRunning: liveTurn.running, stopped });
   if (endText) {
     endTurnView("gone", endText, { stopped });
@@ -1284,38 +1224,19 @@ const streamHandlers = createStreamHandlers({
       promptEl.value = text;
       fitPrompt();
     },
-    setChips: (list) => setChips(list),
+    setChips,
   },
   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(),
-  syncModelPick: () => {
-    if (pendingPick) pickRanEarly = true;
-    syncModelPick();
-  },
+  // The page's hooks, passed as they are: function declarations (hoisted)
+  // and the views' methods bound above.
+  resync, updateInfoBar, setTurnRunning, setLiveStatus, endTurnView, readTurnEnd, refreshTimingFromSession,
+  setUsedMemories, onInitEvent, findInTurnRoots, applyFinalMarkdown,
+  // bubbles.js
+  applyPromptOps, showSteers, markRecapStale, appendChunk, makeUserBubble, addEndBubble, commandBubble,
+  addCommandBubble, addNoteBubble, showRecap, showGuardrailWarning, showHookNotice,
+  // cards_place.js
+  upsertCard, refreshCardBodies,
+  syncModelPick: startPage.commandRan,
 });
 
 async function refreshTimingFromSession() {
@@ -1347,149 +1268,6 @@ function addCreatedSession(created) {
   lists.render();
 }
 
-// A first message: an idle session, then the turn (or the command) into it
-// as for any later one (handleSendTurn), so a failed first turn's prompt
-// comes back into the composer too (sentIds).
-function handleCreate() {
-  return handleSendTurn();
-}
-
-// +delivery+: the composer's choice for a running turn (Alt+Enter: queue;
-// a delivery-line link: cut or queue); else the armed one; a typed /cut or
-// /queue wins over both.
-async function handleSendTurn({ delivery: chosen = null } = {}) {
-  if (current.owner === "tui") return;
-  // A fresh link's pick first: its /model is queued in the worker once
-  // acked, and the worker runs queued commands before a turn's input.
-  if (pendingPick) await pendingPick;
-  let prompt = turnText(promptEl.value, chips);
-  if (!prompt) return;
-  const armed = deliveryControl.take();
-  // An image-only send's text is its placeholders: not for ↑.
-  const typed = promptEl.value.trim() !== "";
-  // The composer holds the line as typed until the ack (composerAfterAck).
-  const line = prompt;
-  // 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: route.send,
-                                          llm_context: choiceWords(newChatLlmContext),
-                                          thinking: newChatThinking || undefined });
-      // The choice was for this chat only.
-      newChatLlmContext = null;
-      renderNewChatLlmContext();
-      newChatThinking = null;
-      renderNewChatThinking();
-      addCreatedSession(s);
-      await select(s.id);
-    } catch (e) {
-      alert(e.message);
-      return;
-    } 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;
-  }
-  if (route.command) return composerCommands.send(route.command);
-  prompt = route.send;
-  const running = liveTurn.running && !!selected;
-  const delivery = route.delivery || (running ? chosen || armed : null);
-  const hint = historyEl.querySelector(".hint");
-  if (hint) hint.remove();
-  // Sending moves a finished turn out of the stage at once (else the echo
-  // would land among its rows); into a running one it is a queued row there.
-  turnDom.handOff?.({ immediate: true });
-  const sending = chips.slice();
-  // Into a running turn the echo says what it waits for (its delivery); a
-  // line with images always waits for the turn's end (the worker queues it).
-  const shownDelivery = running ? (sending.length ? "queue" : delivery || "next_step") : null;
-  const echo = makeUserBubble(prompt, { state: "queued", own: true, images: sending, delivery: shownDelivery });
-  if (!turnDom.holds?.()) historyEl.scrollTop = historyEl.scrollHeight;
-  if (!current.firstPreview || current.firstPreview==="—") {
-    current.firstPreview = firstPreview(prompt);
-    updateInfoBar();
-  }
-  actionBtn.disabled = true;
-  // The session the line goes to: the page may switch to another while an
-  // image uploads or the turn is sent, and what follows stays with this one.
-  const sentTo = selected;
-  try {
-    await uploadChips(sending, sentTo, { upload: uploadImage });
-    const ack = await sendTurn(sentTo, prompt, { clientId, images: turnRefs(sending), history: typed, delivery });
-    if (ack?.command_id) {
-      // The worker knew it as a command (its list was newer than ours):
-      // its command_ran shows it, not a prompt bubble.
-      echo.remove();
-      clearComposer();
-      if (sentTo === selected) followWokenWorker();
-      return;
-    }
-    if (ack?.enqueued_id) sentIds.add(ack.enqueued_id);
-    // A cut the worker didn't take (no thinking-only step: cut off) goes in
-    // at the next step; a queue whose turn ended meanwhile is the next turn.
-    if (ack?.cut === "off" || (ack?.delivery === "next_step" && echo.dataset.delivery === "queue")) {
-      setBubbleDelivery(echo, ack.cut === "off" ? "next_step" : null);
-    }
-    refreshHistory();
-    // A turn that failed fast was restored before this ack: its prompt
-    // (and images) go back into the composer, without replacing text typed
-    // since (4.13). The composer still holds the text just sent: it goes.
-    const restored = restoreOnAck(ack?.enqueued_id, earlyRestores, { myId: clientId, sentIds });
-    // A restored line must be seen: the composer opens for this visit.
-    if (restored?.refill && sentTo === selected) openForVisit();
-    promptEl.value = composerAfterAck({ sent: line, current: promptEl.value, refill: restored?.refill || "" });
-    fitPrompt();
-    clearChips();
-    if (restored?.images?.length) setChips(restoredChips(sentTo, restored.images));
-    // Its turn_enqueued usually tagged the echo already; the ack covers a
-    // worker that wasn't live (no turn_enqueued then).
-    if (ack?.enqueued_id && !echo.dataset.enqueuedId && !bubbleById(ack.enqueued_id)) {
-      echo.dataset.enqueuedId = ack.enqueued_id;
-    }
-    // A live stream carries this turn already; restarting it would drop the
-    // events in between. Without one, POST /turn just woke a worker: its
-    // events start after the seq the session was rendered at (0 for a new
-    // worker process). A switch since then opened the other session's own.
-    if (sentTo === selected) followWokenWorker();
-  } catch (e) {
-    echo.remove();
-    // The turn never reached the worker's queue: an early restore waiting
-    // for its ack is never taken back (4.13), so drop it here. The prompt
-    // is still in the composer, as the echo was removed.
-    dropEarlyRestores(earlyRestores);
-    // The chips stay (uploaded ones keep their ref, to sentTo) for another try: an
-    // image refused (bad_image, too_large, bad_images) says why below.
-    if (e.code === "owned_by_tui") {
-      if (sentTo !== selected) return showToast(cantText(`send to ${sentTo.slice(0, 8)}`, e), null, { sticky: true });
-      current.owner = "tui";
-      updateComposerMode();
-      return;
-    }
-    // A stale tab sent into a session deleted meanwhile: the start page
-    // says so, and the line stays in the composer.
-    if (e.code === "not_found") return leaveGoneSession(sentTo, "not_found");
-    // A /queue to a worker that can't queue (it would steer): its words, the text kept.
-    if (e.code === "delivery_unavailable" && sentTo === selected) return addCommandBubble({ label: null, line, text: e.body?.detail || e.message, failed: true });
-    showToast(cantText("send", e), null, { sticky: true });
-  } finally {
-    actionBtn.disabled = current.owner === "tui";
-    focusPrompt();
-  }
-}
-
 // /model, !ls … from the composer, and a control's command (the llm ctx
 // and thinking chips): composer.js.
 const composerCommands = createComposerCommands({
@@ -1499,7 +1277,7 @@ const composerCommands = createComposerCommands({
   followWokenWorker: () => followWokenWorker(),
   refreshHistory: () => refreshHistory(),
   failed: (line, text) => addCommandBubble({ label: null, line, text, failed: true }),
-  // As handleSendTurn says a turn's failure after a switch.
+  // As send_turn.js says a turn's failure after a switch.
   failedElsewhere: (line, text, id) => showToast(cantText(`run ${line} in ${id.slice(0, 8)}`, text), null, { sticky: true }),
   ownedByTui: () => {
     current.owner = "tui";
@@ -1517,6 +1295,51 @@ const composerCommands = createComposerCommands({
   },
 });
 
+// The composer's send (send_turn.js): a line into the open session, or a
+// new session first on the start page.
+const sendTurnControl = createSendTurn({
+  session: () => selected,
+  state: () => current,
+  running: () => liveTurn.running,
+  clientId,
+  sentIds,
+  earlyRestores,
+  api: { createIdleSession, uploadImage, sendTurn },
+  dir: scope.dir,
+  startPage,
+  takeDelivery: () => deliveryControl.take(),
+  composer: {
+    el: promptEl,
+    button: actionBtn,
+    chips: () => chips,
+    setChips,
+    fit: fitPrompt,
+    clear: clearComposer,
+    openForVisit: () => openForVisit(),
+    focus: () => focusPrompt(),
+  },
+  historyEl,
+  turnDom,
+  makeUserBubble,
+  bubbleById,
+  addCommandBubble,
+  addCreatedSession,
+  select,
+  showNotice,
+  updateInfoBar,
+  updateComposerMode,
+  followWokenWorker,
+  refreshHistory,
+  leaveGoneSession,
+  runCommand: (command) => composerCommands.send(command),
+  toast: showToast,
+});
+// +delivery+: the composer's choice for a running turn (Alt+Enter: queue;
+// a delivery-line link: cut or queue); else the armed one.
+function handleSendTurn({ delivery = null } = {}) {
+  return sendTurnControl.send({ delivery });
+}
+
 function runSessionCommand(line) {
   return composerCommands.run(line);
 }
@@ -1548,124 +1371,10 @@ async function handleCancel() {
 $("#newBtn").addEventListener("click", () => {
   if (allViewOpen()) leaveAllView("");
   clearSelection();
-  loadModels();
+  startPage.loadModels({ asked: true });
 });
 
-// ── The start page's model picker ──────────────────────────────────────────
-// The hosts' models from GET /api/models, the choice this browser made last
-// preselected while it is still offered (else the server's default). Hidden
-// until the list is in, and in a session (its model is in the info bar),
-// but a fresh chain link's (chains.js freshLink): there it shows the link's
-// model and a pick runs /model in the link, remembered neither as this
-// browser's choice nor in Recent. A host that failed is the picker's
-// tooltip; a route that fails leaves the picker hidden and the server's
-// default in charge. The search list itself is model_picker.js'; a pick
-// sends the focus to the message box.
-const START_PICK_TITLE = "The model the new session starts on";
-let startPickTitle = START_PICK_TITLE;
-// The fresh link the picker shows (null: the start page, or a session it
-// is hidden in), and a link pick's /model still in flight (a send waits).
-let pickLinkId = null;
-let pickSelected = null;
-let pendingPick = null;
-let pendingPickId = null;
-// A command_ran came while the pick was in flight (its sync was skipped):
-// the ack syncs then.
-let pickRanEarly = false;
-const modelPicker = createModelPicker({
-  button: modelPickEl,
-  panel: $("#modelPanel"),
-  input: $("#modelSearch"),
-  list: $("#modelList"),
-  composer: $("#composer"),
-  center: $("#center"),
-  remember: () => !selected,
-  onPick: (name) => {
-    if (selected) pickForLink(name);
-    else {
-      renderNewChatLlmContext();
-      renderNewChatThinking();
-    }
-    focusPrompt();
-  },
-});
-// A pick on a fresh link: /model in its worker (its command bubble and the
-// info bar follow from command_ran); refused, the button goes back to the
-// link's model, if the page is still on that link.
-function pickForLink(name) {
-  const id = selected;
-  const run = runSessionCommand(`/model ${name}`).then((ok) => {
-    const ranEarly = pendingPick === run && pickRanEarly;
-    if (pendingPick === run) {
-      pendingPick = null;
-      pendingPickId = null;
-      pickRanEarly = false;
-    }
-    if ((!ok || ranEarly) && selected === id) syncModelPick();
-    return ok;
-  });
-  pendingPick = run;
-  pendingPickId = id;
-  pickRanEarly = false;
-}
-// The button's name, tooltip and label for what the page shows: a fresh
-// link's model, else the start page's (whose choice stays as it is).
-// Toggles the fresh-link class (the CSS shows the button in a session
-// only with it); the panel closes when the link changes or stops being fresh.
-function syncModelPick() {
-  // The list walk only for a link that is fresh otherwise (the info bar
-  // calls this every second while a turn runs).
-  const fresh = !!selected && freshLink(current, { running: liveTurn.running })
-    && !chainNeighbours(allSessions, selected, { continues: current.continues }).next;
-  document.body.classList.toggle("fresh-link", fresh);
-  const linkId = fresh ? selected : null;
-  // Another session (or the start page), or the link stopped being fresh:
-  // a panel left open would come back open where it no longer belongs.
-  if (selected !== pickSelected || linkId !== pickLinkId) modelPicker.close();
-  pickSelected = selected;
-  pickLinkId = linkId;
-  if (fresh) {
-    // A pick in flight keeps its name until its /model is taken (its
-    // command_ran syncs again then).
-    if (!(pendingPick && pendingPickId === selected)) modelPicker.show(current.model);
-    modelPickEl.title = "The model this link starts on";
-    modelPickEl.setAttribute("aria-label", "Model this link starts on");
-  } else {
-    modelPickEl.title = startPickTitle;
-    modelPickEl.setAttribute("aria-label", "Model for the new session");
-  }
-}
-// Leaving a session: the start page's remembered model again (no fetch).
-function restoreStartPick() {
-  modelPicker.restore(readStored(MODEL_KEY));
-  renderNewChatLlmContext();
-  renderNewChatThinking();
-}
-async function loadModels() {
-  let payload;
-  try {
-    payload = await listModels();
-  } catch (_) {
-    return;
-  }
-  const stored = readStored(MODEL_KEY);
-  if (!modelPicker.setModels(payload, stored)) return;
-  startPickTitle = payload.warning ? `${START_PICK_TITLE} · ${payload.warning}` : START_PICK_TITLE;
-  modelPickEl.hidden = false;
-  // A fresh link open meanwhile shows its own model again, not the stored one.
-  syncModelPick();
-  renderNewChatLlmContext();
-  renderNewChatThinking();
-}
-// The picker's choice for a create request; nothing (the server's default)
-// while the list is not in.
-function chosenModel() {
-  return modelPickEl.hidden ? undefined : modelPicker.chosen() || undefined;
-}
-actionBtn.addEventListener("click", () => {
-  if (!selected) handleCreate();
-  else handleSendTurn();
-});
+actionBtn.addEventListener("click", () => handleSendTurn());
 
 // ── Images: paste or drop into the composer, chips until sent ─────────────
 const chipsEl = $("#chips");
@@ -1678,16 +1387,13 @@ function renderChips() {
   drawFoldControls();
 }
 
+// A chip that goes frees its preview; one kept in +list+ keeps it.
 function setChips(list) {
-  for (const c of chips) if (c.file && c.src) URL.revokeObjectURL(c.src);
+  for (const c of chips) if (c.file && c.src && !list.includes(c)) URL.revokeObjectURL(c.src);
   chips = list;
   renderChips();
 }
 
-function clearChips() {
-  setChips([]);
-}
-
 // A paste's, a drop's or the image button's files: the images the message
 // may still take become chips (images.js admitImages); a toast says why the
 // rest stayed out. Whether any went in.
@@ -1806,7 +1512,8 @@ composerEl.addEventListener("drop", (e) => {
 const unqueue = createUnqueue({
   sessionId: () => selected,
   clientId,
-  toast: (text) => showToast(text),
+  toast: (text, action, options) => showToast(text, action, options),
+  copy: (text) => copyText(text),
   // Edit: the removed text back into an empty composer (never over a draft).
   putBack: (text) => {
     if (promptEl.value.trim() || chips.length) return false;
@@ -1891,7 +1598,7 @@ promptEl.addEventListener("keydown", (e) => {
   // An IME's Enter picks the composition, it doesn't send.
   if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
     e.preventDefault();
-    if (!selected) handleCreate();
+    if (!selected) handleSendTurn();
     // Alt/Option+Enter: queued for after the running turn (D6), only to a
     // worker that queues (else it would steer): the text stays, a note says why.
     else if (e.altKey && liveTurn.running && !current.workerFeatures.includes("delivery")) {
@@ -1899,81 +1606,12 @@ promptEl.addEventListener("keydown", (e) => {
     } else handleSendTurn(e.altKey ? { delivery: "queue" } : {});
   }
 });
-$("#infoStopBtn").addEventListener("click", async () => {
-  if (!selected) return;
-  if (!confirm(`Stop session ${selected}?`)) return;
-  const id = selected;
-  stoppingId = id;
-  try {
-    await stopSession(id);
-    if (id === selected) stoppedWorker(id);
-  } catch (e) {
-    // A refusal (a terminal holds it) or a worker that won't stop: said, as
-    // a failed restart is.
-    showToast(cantText(`stop ${id.slice(0, 8)}`, e), null, { sticky: true });
-  } finally {
-    stoppingId = null;
-  }
-  // The list hears of the stop from the hub (the stop route rescans it).
-  if (!eventsControl) refresh();
-});
+$("#infoStopBtn").addEventListener("click", () => sessionActions.stopSelected());
 $("#infoDeleteBtn").addEventListener("click", () => {
   if (selected) confirmDelete(selected);
 });
 $("#infoContinueBtn").addEventListener("click", () => continueSelected());
-$("#infoArchiveBtn").addEventListener("click", () => {
-  if (!selected) return;
-  if (selectedArchived()) setArchived(selected, false);
-  else setArchived(selected, true);
-});
-
-// ── Continue (session chains) ───────────────────────────────────────────────
-// Continue → starts the next link of the open session's chain (the server
-// waits up to 30 s for its recap, archives it, starts the new one with the
-// recap as a note) and opens it with the opener in the composer, not sent
-// (fillOpener: the previous link's own first message when it continues one).
-// A link continued already opens that next link; its open delegates move
-// to the new link (the toast counts them); a refusal for open delegates
-// that can't move names them, each a link.
-// One continue per session at a time (the server locks it too); another
-// session's continue may run beside it.
-const continuingIds = new Set();
-
-async function continueSelected() {
-  if (!selected || continuingIds.has(selected)) return;
-  const id = selected;
-  const short = id.slice(0, 8);
-  continuingIds.add(id);
-  updateInfoBar();
-  try {
-    const created = await continueSession(id);
-    markArchived([id], true);
-    addCreatedSession(created);
-    const next = created.id;
-    // A model fallback's warning stays until closed.
-    const sticky = !!created.model_warning;
-    if (selected !== id) {
-      showToast(continuedText(id, created, { opened: false }), { label: "Open", run: () => select(next) }, { sticky });
-      return;
-    }
-    await select(next);
-    if (selected === next) fillOpener(created);
-    showToast(continuedText(id, created), null, { sticky });
-  } catch (e) {
-    const refusal = continueRefusal(e, allSessions);
-    if (refusal.kind === "open") {
-      if (selected === id) await select(refusal.id);
-      showToast(`${short} is continued already: ${selected === refusal.id ? "opened" : "see"} ${refusal.id.slice(0, 8)}`);
-    } else if (refusal.kind === "children") {
-      showToast(openChildrenTemplate(id, refusal.children, sessionHash), null, { sticky: true });
-    } else {
-      showToast(`Can't continue ${short}: ${refusal.text}`, null, { sticky: true });
-    }
-  } finally {
-    continuingIds.delete(id);
-    updateInfoBar();
-  }
-}
+$("#infoArchiveBtn").addEventListener("click", () => sessionActions.toggleArchiveSelected());
 
 // The new link's composer: the opener (openerText: the previous link's own,
 // else the constant), unless a draft is there (it stays). +created+: the
@@ -1987,68 +1625,6 @@ function fillOpener(created) {
   promptEl.setSelectionRange(promptEl.value.length, promptEl.value.length);
 }
 
-// ── Archive ────────────────────────────────────────────────────────────────
-// Archive hides a session (and its delegates) from the strip and the list,
-// kept for good; "include archived" in all sessions finds it. No confirm:
-// the toast's Undo takes it back. Archiving the open session stays on it
-// (the button flips to unarchive); its worker was stopped by the server.
-
-function selectedArchived() {
-  return !!allSessions.find((s) => s.id === selected)?.archived;
-}
-
-// The ids in the server's answer flip here at once; the hub's events
-// follow with the same.
-function markArchived(ids, archived) {
-  const set = new Set(ids);
-  allSessions = allSessions.map((s) => (set.has(s.id) ? { ...s, archived } : s));
-}
-
-// One archive / unarchive request, the core the info bar, a card's button
-// and a batch share. The ids in the answer flip in the list at once. When
-// the open session's worker was stopped (it, or a delegate of the archived
-// one), its stream ending is a stop, not a lost worker.
-// The open session's worker was stopped from here (the stop button, an
-// archive): don't wait for its stream to notice.
-function stoppedWorker(id) {
-  streamControl?.close();
-  current.status = "stopped";
-  workerGone(id);
-}
-
-// @return {ok: true, result} | {ok: false, error}
-async function archiveOne(id, archive) {
-  // A live worker in the tree is stopped by the archive: the open
-  // session's stream ending then is a stop.
-  const mine = archive && selected && inTree(allSessions, id, selected) ? selected : null;
-  if (mine) stoppingId = mine;
-  try {
-    const result = archive ? await archiveSession(id) : await unarchiveSession(id);
-    markArchived(archive ? result.archived : result.unarchived, archive);
-    if (mine && mine === selected && (result.stopped || []).includes(mine)) stoppedWorker(mine);
-    return { ok: true, result };
-  } catch (error) {
-    return { ok: false, error };
-  } finally {
-    // Another call may have taken it meanwhile: clear only our own.
-    if (mine && stoppingId === mine) stoppingId = null;
-  }
-}
-
-async function setArchived(id, archive, { undo = true } = {}) {
-  const short = id.slice(0, 8);
-  const answer = await archiveOne(id, archive);
-  if (!answer.ok) {
-    alert(`Could not ${archive ? "archive" : "unarchive"} session ${short}: ${answer.error.message}`);
-    return;
-  }
-  lists.render();
-  updateInfoBar();
-  if (!eventsControl) refresh();
-  const what = archive ? "Archived" : "Unarchived";
-  showToast(`${what} ${short}`, undo ? { label: "Undo", run: () => setArchived(id, !archive, { undo: false }) } : null);
-}
-
 // The toast sits above the session's composer card (measured: it grows with
 // a wrapping footer or a taller box), so it never covers the card's
 // controls, and above the stage while it shows and a fresh link's open
@@ -2181,7 +1757,7 @@ if (document.body.dataset.sessionsDir) {
 renderScope();
 updateInfoBar();
 updateComposerMode();
-loadModels();
+startPage.loadModels();
 // The list: the hub's stream when the browser has EventSource, else fetched.
 if (typeof globalThis.EventSource === "function") openSessionEvents();
 else refresh();