samagotchi 0.92.0 → 0.94.0

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

@@ -23,31 +23,22 @@ 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, modelsFailedText } from "./model_pick.js";
 import { emptySessionState, sessionStateFrom } from "./session_state.js";
-import { createModelPicker } from "./model_picker.js";
-import { admitImages, chipName, chipsAfterSend, 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 { createStageView } 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";
@@ -63,12 +54,12 @@ import { createCommandList } from "./command_list.js";
 import { createPromptHistory } from "./prompt_history.js";
 import { ALL_SESSIONS_HASH, sessionHash, sessionIdFromHash } from "./route.js";
 import { scopeDir, scopeTemplate } from "./scope.js";
-import { html, nothing, render } from "./vendor/lit-html.js";
-import { easeScrollTo, FOLLOW_MS, shouldFollowScroll } from "./scroll.js";
+import { render } from "./vendor/lit-html.js";
+import { 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,17 +73,19 @@ 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";
 import { liveSlots } from "./stage_model.js";
 import { currentGen } from "./turn_model.js";
 import { toolName } from "./activity.js";
-import { toastBottom } from "./toast_place.js";
+import { createDockReserve } from "./dock_reserve.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 +115,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 +133,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 +168,6 @@ const cancelBtn = $("#cancelBtn");
 const attachBtn = $("#attachBtn");
 const attachInput = $("#attachInput");
 const infoCancelBtn = $("#infoCancelBtn");
-const modelPickEl = $("#modelPick");
 const composeHintEl = $("#composeHint");
 
 let selected = null;
@@ -260,6 +217,17 @@ const turnDom = view === "stage"
     renderMarkdown, linkRefs: linkRefsIn,
   })
   : createTurnView(viewArgs);
+// The history's bottom reserve and the toast's place follow the composer
+// card and the stage floating over the history (dock_reserve.js).
+const { placeToast } = createDockReserve({
+  dockEl: $("#dock"),
+  centerEl: $("#center"),
+  stageEl: view === "stage" ? turnDom.root : null,
+  historyEl,
+  toastEl: $("#toast"),
+  modelPanelEl: $("#modelPanel"),
+  atHistoryEnd,
+});
 // Where a running turn's rows can be: the history, and the stage while it
 // holds a turn (lookups by id, copy, annotate, card actions).
 function turnRoots() {
@@ -506,27 +474,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 +585,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 +726,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;
@@ -1088,7 +1039,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");
@@ -1117,7 +1068,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
@@ -1214,10 +1165,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.
@@ -1226,7 +1173,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 });
@@ -1287,38 +1234,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() {
@@ -1350,150 +1278,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();
-    // Only the sent chips go: images added since stay (they go up at their own send).
-    const kept = chipsAfterSend(chips, sending);
-    setChips(restored?.images?.length ? kept.concat(restoredChips(sentTo, restored.images)) : kept);
-    // 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({
@@ -1503,7 +1287,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";
@@ -1521,6 +1305,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);
 }
@@ -1552,132 +1381,10 @@ async function handleCancel() {
 $("#newBtn").addEventListener("click", () => {
   if (allViewOpen()) leaveAllView("");
   clearSelection();
-  loadModels({ asked: true });
+  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();
-}
-// A reload cuts the fetch: its error is no news (modelsFailedText).
-let pageLeaving = false;
-addEventListener("beforeunload", () => { pageLeaving = true; });
-addEventListener("pagehide", () => { pageLeaving = true; });
-addEventListener("pageshow", () => { pageLeaving = false; }); // back from the bfcache
-// +asked+: + new session's load, for the start page it opens.
-async function loadModels({ asked = false } = {}) {
-  let payload;
-  try {
-    payload = await listModels();
-  } catch (e) {
-    const text = modelsFailedText(e, { startPage: !selected, asked, leaving: pageLeaving });
-    if (text) showToast(text);
-    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");
@@ -1744,55 +1451,6 @@ promptEl.addEventListener("input", fitPrompt);
 window.addEventListener("resize", fitPrompt);
 fitPrompt();
 
-// The card floats over the history: keep the history's bottom padding at the
-// card's height, and stay pinned to the end if the reader was there, since the
-// card grows (text, chips, Cancel, a wrapping footer) under a reader at the end.
-// In the stage view the stage floats above the card, out of the dock's flow
-// (stage_view.js): the reserve counts it too, with its 10 px gap, while it
-// shows.
-const dockEl = $("#dock");
-const centerEl = $("#center");
-// A leaving stage (the hand-off's slide) no longer counts: the reserve eases
-// down over the slide (index.html, #center.reserve-easing).
-const stageEl = view === "stage" ? turnDom.root : null;
-function dockReserve() {
-  const shown = stageEl && !stageEl.hidden && !stageEl.classList.contains("leaving");
-  return dockEl.offsetHeight + (shown ? stageEl.offsetHeight + STAGE_GAP : 0);
-}
-const historyEnd = () => historyEl.scrollHeight - historyEl.clientHeight;
-// A reader at the end stays there when the reserve changes: at once for the
-// composer card, eased for the stage (+fromStage+: it appeared, grew or
-// leaves), so the history glides rather than jumps. An eased follow running
-// counts as at the end.
-function updateReserve({ fromStage = false } = {}) {
-  const follow = atHistoryEnd() || historyEl.dataset.following !== undefined;
-  const leaving = !!stageEl?.classList.contains("leaving");
-  centerEl.classList.toggle("reserve-easing", leaving);
-  const reserve = `${dockReserve()}px`;
-  const changed = centerEl.style.getPropertyValue("--dock-h") !== reserve;
-  if (changed) centerEl.style.setProperty("--dock-h", reserve);
-  if (changed && follow) {
-    if (fromStage) easeScrollTo(historyEl, historyEnd, { ms: leaving ? FOLD_MS : FOLLOW_MS, reduce: reducedMotion() });
-    else if (historyEl.dataset.following === undefined) historyEl.scrollTop = historyEl.scrollHeight;
-  }
-  placeToast();
-}
-const dockObserver = new ResizeObserver((entries) => updateReserve({ fromStage: entries.some((e) => e.target === stageEl) }));
-dockObserver.observe(dockEl);
-if (stageEl) {
-  dockObserver.observe(stageEl);
-  // Only showing, hiding and leaving change the reserve (not the stage's
-  // other classes: waiting, in-use…).
-  let stageShown = "";
-  new MutationObserver(() => {
-    const shown = `${stageEl.hidden}|${stageEl.classList.contains("leaving")}`;
-    if (shown === stageShown) return;
-    stageShown = shown;
-    updateReserve({ fromStage: true });
-  }).observe(stageEl, { attributes: true, attributeFilter: ["class", "hidden"] });
-}
-window.addEventListener("resize", () => placeToast());
-
 promptEl.addEventListener("paste", (e) => {
   const files = imageFiles(e.clipboardData);
   // Text pasted along with an image still lands in the textarea.
@@ -1901,7 +1559,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")) {
@@ -1909,81 +1567,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
@@ -1997,97 +1586,7 @@ 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
-// model panel (toast_place.js); with no card in sight (the start page, all
-// sessions) the CSS's 24 px from the bottom.
-function placeToast() {
-  const dock = document.getElementById("dock");
-  const r = dock.getBoundingClientRect();
-  const shownTop = (el) => {
-    const box = el && !el.hidden ? el.getBoundingClientRect() : null;
-    return box && box.height > 0 ? box.top : null;
-  };
-  const px = toastBottom({
-    inSession: document.body.classList.contains("has-session") && r.height > 0,
-    viewportHeight: window.innerHeight,
-    dockTop: r.top,
-    tops: [shownTop(document.getElementById("turnStage")), shownTop(document.getElementById("modelPanel"))],
-    toastHeight: document.getElementById("toast").offsetHeight,
-  });
-  const bottom = px === null ? "" : `${px}px`;
-  const root = document.documentElement.style;
-  if (root.getPropertyValue("--toast-bottom") !== bottom) {
-    if (bottom) root.setProperty("--toast-bottom", bottom);
-    else root.removeProperty("--toast-bottom");
-  }
-}
 const toasts = createToasts({ el: $("#toast"), onChange: placeToast });
-// The model panel opening, closing or changing height (its list filters).
-new ResizeObserver(() => placeToast()).observe(document.getElementById("modelPanel"));
 
 function showToast(text, action = null, options = {}) { toasts.show(text, action, options); }
 
@@ -2191,7 +1690,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();