samagotchi 0.91.0 → 0.93.0

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

@@ -150,7 +150,10 @@ export function createCardsPlace({
           const el = card.type === "card" && cardElement(card.id);
           if (el) refreshCardBody(el, card);
         }
-      } catch (_) {}
+      } catch (_) {
+        // The live text stays (a failed re-read is only a lost render);
+        // the next card or load renders it.
+      }
     }, 150);
   }
 

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

@@ -94,6 +94,12 @@ export function chipsTemplate(chips) {
     html`<span class="chip" data-index=${i}><img src=${c.src} alt=""><span class="chip-name">${c.name}</span><button type="button" class="chip-remove" data-index=${i} aria-label=${`remove ${c.name}`}>×</button></span>`);
 }
 
+// The chips left once a send is acked: those added while it was in flight
+// (an upload can take seconds) stay for the next message.
+export function chipsAfterSend(chips, sent) {
+  return (chips || []).filter((c) => !sent.includes(c));
+}
+
 // The {file, name} refs a turn names.
 export function turnRefs(chips) {
   return (chips || []).filter((c) => c.ref).map((c) => ({ file: c.ref.file, name: c.name }));

data/lib/samagotchi/web/public/index.html

@@ -646,7 +646,7 @@ body.has-session #composer{flex-direction:row;align-items:flex-end;padding:10px}
 body.has-session #composer textarea{min-height:0}
 body.has-session #composeHint{display:none}
 body.has-session #composer .actions-col{flex-wrap:nowrap;flex-shrink:0}
-/* The model picker (the start page, and a fresh chain link: app.js syncModelPick): reads as a label, "host:model ▾", left of Start; a button under a drawn caret that opens a searchable list (model_picker.js). Its name ellipsizes within max-width. */
+/* The model picker (the start page, and a fresh chain link: start_page.js syncModelPick): reads as a label, "host:model ▾", left of Start; a button under a drawn caret that opens a searchable list (model_picker.js). Its name ellipsizes within max-width. */
 #composer .actions-col .model-pick{order:0;position:relative;display:inline-block;max-width:min(50%,380px);height:28px;min-height:28px;padding:0 22px 0 8px;border-radius:8px;overflow:hidden;background:transparent;color:var(--text-muted);font-size:12px;line-height:28px;text-align:left;text-overflow:ellipsis;transition:background .12s ease,color .12s ease}
 #composer .actions-col .model-pick:hover,#composer .actions-col .model-pick[aria-expanded="true"]{filter:none;background:color-mix(in srgb,var(--bg-hover) 75%,transparent);color:var(--text-2)}
 #composer .actions-col .model-pick[hidden],body.has-session #composer .actions-col .model-pick{display:none}

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

@@ -1,7 +1,17 @@
 // The start page's model picker: pure helpers over GET /api/models' payload.
+import { cantText } from "./format.js";
 
 export const MODEL_KEY = "chi_model";
 
+// A failed GET /api/models' toast: the picker stays hidden, so it says why
+// and what a new session gets (+ new session asks again). "" (no toast) in
+// a session, where no picker shows (+asked+: + new session's own load),
+// and for a fetch aborted or cut by the page unloading.
+export function modelsFailedText(error, { startPage = true, asked = false, leaving = false } = {}) {
+  if (leaving || error?.name === "AbortError" || !(startPage || asked)) return "";
+  return `${cantText("list the models", error)}. A new session starts on the default model.`;
+}
+
 // The name to preselect from the rows (modelRows): the remembered one when
 // it is still offered (any case), else the server's default, both even
 // when their host is down; else the first row whose host answered, else

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

@@ -0,0 +1,173 @@
+import { routeComposerLine, routeSessionLine } from "./composer.js";
+import { chipsAfterSend, restoredChips, turnRefs, turnText, uploadChips } from "./images.js";
+import { cantText, firstPreview } from "./format.js";
+import { setBubbleDelivery } from "./bubbles.js";
+import { composerAfterAck, dropEarlyRestores, restoreOnAck } from "./restore.js";
+
+// The composer's send (used by app.js): a line into the open session, or
+// on the start page a new session first (an idle one, then the line as for
+// any later one, so a failed first turn's prompt comes back into the
+// composer too). The route (composer.js), the echo, the images' upload, the
+// /turn and its ack, a fast failure's restore (restore.js) and the error's
+// words.
+//
+// Hooks: +session()+ the open session's id or null; +state()+ its fields
+// (session_state.js: owner, commands, firstPreview); +running()+ a turn
+// runs; +clientId+; +sentIds+ / +earlyRestores+ (restore.js' bookkeeping);
+// +api+: {createIdleSession, uploadImage, sendTurn} (data.js); +dir+: the
+// page's scope folder (new sessions start there); +startPage+
+// (start_page.js: pendingPick(), chosenModel(), newChoices(),
+// clearChoices()); +takeDelivery()+ the delivery line's armed choice;
+// +composer+: {el (the text box), button (Send/Start), chips(),
+// setChips(list), fit(), clear(), openForVisit(), focus()}; +historyEl+,
+// +turnDom+; +makeUserBubble(prompt, opts)+, +bubbleById(id)+,
+// +addCommandBubble(view)+; +addCreatedSession(created)+, +select(id)+,
+// +showNotice(text)+, +updateInfoBar()+, +updateComposerMode()+,
+// +followWokenWorker()+, +refreshHistory()+, +leaveGoneSession(id, why)+,
+// +runCommand(command)+ (composer.js send), +toast(text, action, options)+;
+// +alert+: the browser's.
+export function createSendTurn({
+  session, state, running, clientId, sentIds, earlyRestores, api, dir, startPage, takeDelivery, composer,
+  historyEl, turnDom, makeUserBubble, bubbleById, addCommandBubble,
+  addCreatedSession, select, showNotice, updateInfoBar, updateComposerMode, followWokenWorker, refreshHistory,
+  leaveGoneSession, runCommand, toast, alert = (text) => globalThis.alert(text),
+}) {
+  const promptEl = composer.el;
+  const actionBtn = composer.button;
+
+  // +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 send({ delivery: chosen = null } = {}) {
+    if (state().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.
+    const pick = startPage.pendingPick();
+    if (pick) await pick;
+    let prompt = turnText(promptEl.value, composer.chips());
+    if (!prompt) return;
+    const armed = takeDelivery();
+    // 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: !!session(), running: running(), commands: state().commands, images: composer.chips().length,
+    });
+    if (route.create) {
+      actionBtn.disabled = true;
+      try {
+        const s = await api.createIdleSession({ dir, model: startPage.chosenModel(), preview: route.send,
+                                                ...startPage.newChoices() });
+        // The choice was for this chat only.
+        startPage.clearChoices();
+        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: state().commands, images: composer.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 (session()) addCommandBubble({ label: null, line: route.line, text: route.reply });
+      else showNotice(route.reply);
+      composer.clear();
+      return;
+    }
+    if (route.command) return runCommand(route.command);
+    prompt = route.send;
+    const isRunning = running() && !!session();
+    const delivery = route.delivery || (isRunning ? 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 = composer.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 = isRunning ? (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 (!state().firstPreview || state().firstPreview === "—") {
+      state().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 = session();
+    try {
+      await uploadChips(sending, sentTo, { upload: api.uploadImage });
+      const ack = await api.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();
+        composer.clear();
+        if (sentTo === session()) 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 === session()) composer.openForVisit();
+      promptEl.value = composerAfterAck({ sent: line, current: promptEl.value, refill: restored?.refill || "" });
+      composer.fit();
+      // Only the sent chips go: images added since stay (they go up at their own send).
+      const kept = chipsAfterSend(composer.chips(), sending);
+      composer.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 === session()) 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 !== session()) return toast(cantText(`send to ${sentTo.slice(0, 8)}`, e), null, { sticky: true });
+        state().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 === session()) return addCommandBubble({ label: null, line, text: e.body?.detail || e.message, failed: true });
+      toast(cantText("send", e), null, { sticky: true });
+    } finally {
+      actionBtn.disabled = state().owner === "tui";
+      composer.focus();
+    }
+  }
+
+  return { send };
+}

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

@@ -0,0 +1,203 @@
+import { continueRefusal, continuedText, openChildrenTemplate } from "./chains.js";
+import { cantText, deleteConfirmText, goneSessionNotice } from "./format.js";
+import { sessionHash } from "./route.js";
+import { inTree } from "./sessions_list.js";
+
+// What the page does to a whole session (used by app.js): Continue, Archive
+// and Unarchive, Delete and Stop, from the info bar's buttons, a card's or a
+// batch; and the start page when the open session is gone.
+//
+// Hooks: +selected()+ the open session's id or null; +state()+ its fields
+// (session_state.js); +sessions()+ / +setSessions(list)+ the page's list;
+// +api+: {continueSession, archiveSession, unarchiveSession, deleteSession,
+// stopSession} (data.js); +eventsLive()+ the hub's stream is open (else
+// +refresh()+ fetches the list); +lists+ (lists_view.js: render);
+// +select(id)+, +clearSelection()+, +showNotice(text)+, +updateInfoBar()+,
+// +toast(text, action, options)+, +addCreatedSession(created)+,
+// +fillOpener(created)+ (the new link's composer), +closeLiveStream()+ (the live
+// stream's close, the stream left as it is) and +workerGone(id)+ the page's.
+// +alert+ / +confirm+: the browser's.
+export function createSessionActions({
+  selected, state, sessions, setSessions, api, eventsLive, refresh, lists,
+  select, clearSelection, showNotice, updateInfoBar, toast, addCreatedSession, fillOpener, closeLiveStream, workerGone,
+  alert = (text) => globalThis.alert(text), confirm = (text) => globalThis.confirm(text),
+}) {
+  // The session this tab is stopping: its stream may close before the stop
+  // request returns (workerGone reads it).
+  let stoppingId = null;
+
+  // 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 = sessions().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 api.deleteSession(id);
+    } catch (e) {
+      alert(`Could not delete session ${id.slice(0, 8)}: ${e.message}`);
+      if (!eventsLive()) refresh();
+      return;
+    }
+    setSessions(sessions().filter((s) => s.id !== id));
+    if (selected() === id) clearSelection();
+    lists.render();
+  }
+
+  // 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));
+  }
+
+  // The info bar's Stop: the open session's worker, after a confirm.
+  async function stopSelected() {
+    if (!selected()) return;
+    if (!confirm(`Stop session ${selected()}?`)) return;
+    const id = selected();
+    stoppingId = id;
+    try {
+      await api.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.
+      toast(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 (!eventsLive()) refresh();
+  }
+
+  // ── 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 api.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) {
+        toast(continuedText(id, created, { opened: false }), { label: "Open", run: () => select(next) }, { sticky });
+        return;
+      }
+      await select(next);
+      if (selected() === next) fillOpener(created);
+      toast(continuedText(id, created), null, { sticky });
+    } catch (e) {
+      const refusal = continueRefusal(e, sessions());
+      if (refusal.kind === "open") {
+        if (selected() === id) await select(refusal.id);
+        toast(`${short} is continued already: ${selected() === refusal.id ? "opened" : "see"} ${refusal.id.slice(0, 8)}`);
+      } else if (refusal.kind === "children") {
+        toast(openChildrenTemplate(id, refusal.children, sessionHash), null, { sticky: true });
+      } else {
+        toast(`Can't continue ${short}: ${refusal.text}`, null, { sticky: true });
+      }
+    } finally {
+      continuingIds.delete(id);
+      updateInfoBar();
+    }
+  }
+
+  // ── 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 !!sessions().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);
+    setSessions(sessions().map((s) => (set.has(s.id) ? { ...s, archived } : s)));
+  }
+
+  // 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) {
+    closeLiveStream();
+    state().status = "stopped";
+    workerGone(id);
+  }
+
+  // One archive / unarchive request, the core the info bar, a card's button
+  // and a batch share. The ids in the answer flip in the list at once. When
+  // the open session's worker was stopped (it, or a delegate of the archived
+  // one), its stream ending is a stop, not a lost worker.
+  // @return {ok: true, result} | {ok: false, error}
+  async function archiveOne(id, archive) {
+    // A live worker in the tree is stopped by the archive: the open
+    // session's stream ending then is a stop.
+    const open = selected();
+    const mine = archive && open && inTree(sessions(), id, open) ? open : null;
+    if (mine) stoppingId = mine;
+    try {
+      const result = archive ? await api.archiveSession(id) : await api.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 (!eventsLive()) refresh();
+    const what = archive ? "Archived" : "Unarchived";
+    toast(`${what} ${short}`, undo ? { label: "Undo", run: () => setArchived(id, !archive, { undo: false }) } : null);
+  }
+
+  // The info bar's Archive / Unarchive: the open session's, by its state.
+  function toggleArchiveSelected() {
+    if (!selected()) return;
+    if (selectedArchived()) setArchived(selected(), false);
+    else setArchived(selected(), true);
+  }
+
+  return {
+    confirmDelete, leaveGoneSession, stopSelected, continueSelected, archiveOne, setArchived, toggleArchiveSelected,
+    // The sessions whose Continue is under way (the info bar's button).
+    continuing: continuingIds,
+    // The session this tab is stopping, or null.
+    stoppingId: () => stoppingId,
+  };
+}

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

@@ -0,0 +1,236 @@
+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 { MODEL_KEY, modelsFailedText } from "./model_pick.js";
+import { createModelPicker } from "./model_picker.js";
+import { chainNeighbours, freshLink } from "./chains.js";
+import { readStored } from "./storage.js";
+
+// ── 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.
+//
+// Beside it, the start page's LLM context and thinking chips: 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).
+export const START_PICK_TITLE = "The model the new session starts on";
+
+// Used by app.js. Elements: +pickEl+ (the picker's button), +panelEl+,
+// +searchEl+, +listEl+, +composerEl+, +centerEl+ (model_picker.js'),
+// +llmContextEl+ / +thinkingEl+ (the two chips).
+// Hooks: +selected()+ the open session's id or null; +state()+ the open
+// session's fields (session_state.js: model, continues…); +running()+ a turn
+// runs; +sessions()+ the list; +run(line)+ a session command from a control
+// (resolves true once the worker took it); +focusPrompt()+; +toast(text)+;
+// +listModels()+ GET /api/models (data.js). +win+: the page's unload events.
+export function createStartPage({
+  pickEl, panelEl, searchEl, listEl, composerEl, centerEl, llmContextEl, thinkingEl,
+  selected, state, running, sessions, run, focusPrompt, toast, listModels,
+  doc = globalThis.document, win = globalThis.window,
+}) {
+  // The new session's own choices (null: follow the picked model's).
+  let newChatLlmContext = null;
+  let newChatThinking = null;
+  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;
+  // A reload cuts the fetch: its error is no news (modelsFailedText).
+  let pageLeaving = false;
+
+  const newChatLlmSummary = () => (selected() || pickEl.hidden ? null : modelPicker.chosenRow()?.llm_context || null);
+  const llmContextNewControl = createLlmContextControl({
+    el: llmContextEl,
+    summary: newChatLlmSummary,
+    kind: NEW_SESSION,
+    choice: () => newChatLlmContext,
+    choose: (next) => {
+      newChatLlmContext = next;
+      renderNewChatLlmContext();
+      focusPrompt();
+    },
+    id: "llmContextNewPopover",
+    anchor: "#llmContextNew",
+  });
+  const newChatThinkingSummary = () => (selected() || pickEl.hidden ? null : modelPicker.chosenRow()?.thinking || null);
+  const thinkingNewControl = createThinkingControl({
+    el: thinkingEl,
+    summary: newChatThinkingSummary,
+    kind: NEW_SESSION,
+    choice: () => newChatThinking,
+    choose: (next) => {
+      newChatThinking = next;
+      renderNewChatThinking();
+      focusPrompt();
+    },
+    id: "thinkingNewPopover",
+    anchor: "#thinkingNew",
+  });
+  function renderNewChatThinking() {
+    const chip = thinkingChipModel(withThinkingChoice(newChatThinkingSummary(), newChatThinking), { kind: NEW_SESSION });
+    thinkingEl.hidden = !chip;
+    if (!chip) return thinkingNewControl.close();
+    thinkingEl.textContent = chip.text;
+    thinkingEl.title = chip.title;
+    thinkingEl.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 });
+    llmContextEl.hidden = !chip;
+    if (!chip) return llmContextNewControl.close();
+    llmContextEl.textContent = chip.text;
+    llmContextEl.title = chip.title;
+    llmContextEl.classList.toggle("own", chip.own);
+  }
+
+  const modelPicker = createModelPicker({
+    button: pickEl,
+    panel: panelEl,
+    input: searchEl,
+    list: listEl,
+    composer: composerEl,
+    center: centerEl,
+    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 ran = run(`/model ${name}`).then((ok) => {
+      const ranEarly = pendingPick === ran && pickRanEarly;
+      if (pendingPick === ran) {
+        pendingPick = null;
+        pendingPickId = null;
+        pickRanEarly = false;
+      }
+      if ((!ok || ranEarly) && selected() === id) syncModelPick();
+      return ok;
+    });
+    pendingPick = ran;
+    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() {
+    const open = selected();
+    const current = state();
+    // The list walk only for a link that is fresh otherwise (the info bar
+    // calls this every second while a turn runs).
+    const fresh = !!open && freshLink(current, { running: running() })
+      && !chainNeighbours(sessions(), open, { continues: current.continues }).next;
+    doc.body.classList.toggle("fresh-link", fresh);
+    const linkId = fresh ? open : 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 (open !== pickSelected || linkId !== pickLinkId) modelPicker.close();
+    pickSelected = open;
+    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 === open)) modelPicker.show(current.model);
+      pickEl.title = "The model this link starts on";
+      pickEl.setAttribute("aria-label", "Model this link starts on");
+    } else {
+      pickEl.title = startPickTitle;
+      pickEl.setAttribute("aria-label", "Model for the new session");
+    }
+  }
+  // A command_ran with a model (stream_handlers.js): while a pick is in
+  // flight its ack syncs again.
+  function commandRan() {
+    if (pendingPick) pickRanEarly = true;
+    syncModelPick();
+  }
+  // Leaving a session: the start page's remembered model again (no fetch).
+  function restoreStartPick() {
+    modelPicker.restore(readStored(MODEL_KEY));
+    renderNewChatLlmContext();
+    renderNewChatThinking();
+  }
+  win.addEventListener("beforeunload", () => { pageLeaving = true; });
+  win.addEventListener("pagehide", () => { pageLeaving = true; });
+  win.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) toast(text);
+      return;
+    }
+    const stored = readStored(MODEL_KEY);
+    if (!modelPicker.setModels(payload, stored)) return;
+    startPickTitle = payload.warning ? `${START_PICK_TITLE} · ${payload.warning}` : START_PICK_TITLE;
+    pickEl.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 pickEl.hidden ? undefined : modelPicker.chosen() || undefined;
+  }
+  // The create request's own choices (the chips').
+  function newChoices() {
+    return { llm_context: choiceWords(newChatLlmContext), thinking: newChatThinking || undefined };
+  }
+  // The choices were for that new session only: a create took them.
+  function clearChoices() {
+    newChatLlmContext = null;
+    renderNewChatLlmContext();
+    newChatThinking = null;
+    renderNewChatThinking();
+  }
+  // A session opened: the start page's choices were for a new session, they go.
+  function dropChoices() {
+    llmContextNewControl.close();
+    if (newChatLlmContext) {
+      newChatLlmContext = null;
+      renderNewChatLlmContext();
+    }
+    thinkingNewControl.close();
+    if (newChatThinking) {
+      newChatThinking = null;
+      renderNewChatThinking();
+    }
+  }
+
+  return {
+    syncModelPick, commandRan, restoreStartPick, loadModels, chosenModel, newChoices, clearChoices, dropChoices,
+    // A fresh link's /model still in flight (a send waits for it), or null.
+    pendingPick: () => pendingPick,
+  };
+}