samagotchi 0.67.0 → 0.69.0

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

@@ -32,47 +32,49 @@ import {
 } 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 { chipName, chipsTemplate, imageFiles, restoredChips, thumbsTemplate, turnRefs, turnText, uploadChips } from "./images.js";
-import { normalize, firstPreview, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy, childrenSummary, promptNotesChip } from "./format.js";
-import { createTurnView, stepText, turnHistoryNodes } from "./turn_view.js";
-import { BADGES, elementOf, emptyAnswerTemplate, noteBubbleTemplate, stateBadgeTemplate, steerRowTemplate, userBubbleTemplate } from "./turn_html.js";
+import { normalize, firstPreview, failedTurnText, deleteConfirmText, goneSessionNotice, 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 { createCardsPlace } from "./cards_place.js";
 import { createStageView, FOLD_MS } from "./stage_view.js";
-import { CONTINUE_OPENER, isOpener, chainDate, chainNeighbours, continueRefusal, continuedText, openChildrenTemplate } from "./chains.js";
+import { CONTINUE_OPENER, chainNeighbours, isOpener, continueRefusal, continuedText, freshLink, openChildrenTemplate } from "./chains.js";
 import { createTaskStopper } from "./task_stop.js";
 import { appendQuote } from "./annotations.js";
 import { parsePresets } from "./annotate_presets.js";
 import { createAnnotateBar } from "./annotate_bar.js";
 import { actionLine, annotationActions, composerWithAction } from "./annotate_actions.js";
 import { copyText, installCopy } from "./copy.js";
-import { ctxBarText, ctxBarTip, lastSpeedText, speedText } from "./ctx.js";
 import { createQuestionCards } from "./question_cards.js";
-import { cardPlace, drawCard, isCard, isNoticeCard, refreshCardBody, splitSnapshotCards, turnNoticePlace } from "./card.js";
+import { splitSnapshotCards } from "./card.js";
 import { PROMPT_LINE_PX, PROMPT_MIN_PX, gripFloor, promptHeight } from "./composer_size.js";
 import { createCommandList } from "./command_list.js";
 import { createPromptHistory } from "./prompt_history.js";
 import { ALL_SESSIONS_HASH, sessionHash, sessionIdFromHash } from "./route.js";
 import { scopeDir, scopeTemplate } from "./scope.js";
 import { html, nothing, render } from "./vendor/lit-html.js";
-import { easeScrollTo, FOLLOW_MS, shouldFollowScroll, keepFollowing } from "./scroll.js";
+import { easeScrollTo, FOLLOW_MS, shouldFollowScroll } from "./scroll.js";
 import { SHORT_WINDOW_QUERY, stripAutoHidden } from "./strip.js";
-import { applySessionEvent, flattenFamilies, inTree, sortedByUpdated } from "./sessions_list.js";
+import { applySessionEvent, inTree, sortedByUpdated } from "./sessions_list.js";
 import { createNotifications } from "./notifications.js";
 import { tabTitle, topBarTitle } from "./session_title.js";
-import { restartConfirmText, versionNotice, workerBadge } from "./update_notice.js";
+import { restartConfirmText, versionNotice } from "./update_notice.js";
 import {
-  appendAboveLiveTiming, formatDuration, mergeTiming, normalizeTiming, sessionDurationNow, STOPPED_LINE_CLASS,
+  appendAboveLiveTiming, mergeTiming, normalizeTiming,
 } from "./timing.js";
 import { createLiveTurn } from "./live_turn.js";
 import { applyFinalAnswer, pairAnswerRefs } from "./answer_refs.js";
 import { installRefClicks } from "./refs.js";
 import { linkRefs, touchedFiles } from "./ref_scan.js";
-import { DONE_MS, applyInitEvent, dropDone, initRowHtml, newInitTasks, seedInitTasks } from "./init_row.js";
-import { isReportClient, hookNoticeLabel, llmContextNotice, newClientId, noticeLine, promptOps, snapshotEvents, workerGoneText } from "./turn_events.js";
-import { applyConfirm, drawCommandBubble, keptCommandBubbles, restoreCommandBubbles } from "./commands.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 { createStreamHandlers } from "./stream_handlers.js";
@@ -81,6 +83,7 @@ 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";
 
 const $ = (s) => document.querySelector(s);
 const topStripEl = $("#topStrip");
@@ -88,7 +91,6 @@ const allListEl = $("#allList");
 const historyEl = $("#history");
 const emptyEl = $("#empty");
 const composerEl = $("#composer");
-const infoBarEl = $("#infoBar");
 // The open session's title in the top bar, when no strip card in sight
 // shows it; the tab's base ("Chi · <project>"), set by renderScope.
 const sessionTitleEl = $("#sessionTitle");
@@ -117,7 +119,7 @@ const llmContextControl = createLlmContextControl({
 // drops it too, a failed create keeps it).
 const llmContextNewEl = $("#llmContextNew");
 let newChatLlmContext = null;
-const newChatLlmSummary = () => (modelPickEl.hidden ? null : modelPicker.chosenRow()?.llm_context || null);
+const newChatLlmSummary = () => (selected || modelPickEl.hidden ? null : modelPicker.chosenRow()?.llm_context || null);
 const llmContextNewControl = createLlmContextControl({
   el: llmContextNewEl,
   summary: newChatLlmSummary,
@@ -153,7 +155,7 @@ const reasoningHistoryControl = createReasoningHistoryControl({
 // for the next new chat only (sent with its create, then dropped).
 const thinkingNewEl = $("#thinkingNew");
 let newChatThinking = null;
-const newChatThinkingSummary = () => (modelPickEl.hidden ? null : modelPicker.chosenRow()?.thinking || null);
+const newChatThinkingSummary = () => (selected || modelPickEl.hidden ? null : modelPicker.chosenRow()?.thinking || null);
 const thinkingNewControl = createThinkingControl({
   el: thinkingNewEl,
   summary: newChatThinkingSummary,
@@ -291,6 +293,38 @@ const questionCards = createQuestionCards({
   removeHintIfEmpty: () => removeHintIfEmpty(),
   askingText: () => turnDom.askingText(),
 });
+// The history's bubbles (bubbles.js): output, end lines, every client's
+// prompts, the recap, warnings and notices, command and note bubbles.
+const bubbles = createBubbles({
+  historyEl,
+  appendToHistory: (el) => appendToHistory(el),
+  isNearBottom: () => isNearBottom(),
+  turnDom,
+  findInTurnRoots: (selector) => findInTurnRoots(selector),
+  shownTexts,
+  liveTurn,
+  selected: () => selected,
+  clientId,
+});
+const {
+  removeHintIfEmpty, appendChunk, addEndBubble, makeUserBubble, bubbleById, applyPromptOps, showRecap, markRecapStale,
+  showGuardrailWarning, showSteers, showHookNotice, addCommandBubble, commandBubble, addNoteBubble,
+} = bubbles;
+// The plugin cards and a snapshot's notices in the history (cards_place.js).
+const cards = createCardsPlace({
+  historyEl,
+  appendToHistory: (el) => appendToHistory(el),
+  isNearBottom: () => isNearBottom(),
+  turnDom,
+  findInTurnRoots: (selector) => findInTurnRoots(selector),
+  selected: () => selected,
+  clientId,
+  questionCards,
+  bubbles,
+  followWokenWorker: () => followWokenWorker(),
+});
+const { upsertCard, placeSnapshotCards, refreshCardBodies } = cards;
+turnRoots().forEach((root) => root.addEventListener("click", cards.onCardAction));
 // The enqueued_ids this page sent (from the /turn acks): only these come back
 // into the composer when their turn fails.
 const sentIds = new Set();
@@ -554,11 +588,13 @@ function updateComposerMode() {
   // In a session the box is one line: its minimum follows the class.
   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();
     fitPrompt();
     placeToast();
   }
+  syncModelPick();
   if (selected) {
-    modelPicker.close();
     llmContextNewControl.close();
     // The start page's choice was for a new chat: opening a session drops it.
     if (newChatLlmContext) {
@@ -615,6 +651,8 @@ function syncDeliveryLine() {
 
 function setTurnRunning(running) {
   liveTurn.running = !!running;
+  // A fresh link's picker goes now, not at the timing re-read after the turn.
+  if (running && selected) current.turnStarted = true;
   updateComposerMode();
   updateInfoBar();
 }
@@ -639,7 +677,7 @@ function setLiveStatus(status) {
 const initRowEl = $("#initRow");
 const initTasks = newInitTasks();
 function renderInitRow() {
-  initRowEl.innerHTML = initRowHtml(initTasks);
+  render(initRowTemplate(initTasks), initRowEl);
   initRowEl.hidden = initTasks.size === 0;
 }
 function onInitEvent(type, data) {
@@ -649,7 +687,8 @@ function onInitEvent(type, data) {
   const session = selected;
   setTimeout(() => {
     if (session !== selected) return;
-    initRowEl.querySelector(`.init-task.done[data-id="${CSS.escape(done)}"]`)?.classList.add("fading");
+    fadeDone(initTasks, done);
+    renderInitRow();
     setTimeout(() => {
       if (session !== selected) return;
       dropDone(initTasks, done);
@@ -847,15 +886,6 @@ function renderSessionView(data, { kept = [] } = {}) {
   updateComposerMode();
 }
 
-// The history's one line while it has nothing else (loading, an error,
-// no output yet).
-function hintEl(text) {
-  const el = document.createElement("div");
-  el.className = "hint";
-  el.textContent = text;
-  return el;
-}
-
 function renderHistory(items) {
   if (!items.length) {
     historyEl.replaceChildren(hintEl("No output yet. Send a message."));
@@ -865,12 +895,7 @@ function renderHistory(items) {
     historyEl.replaceChildren(turnHistoryNodes(items, current.timing, { thumbs: (images) => thumbsTemplate(selected, images) }));
     linkTextRefs();
   } else {
-    historyEl.replaceChildren(...items.map((c) => {
-      const el = document.createElement("div");
-      el.className = "bubble output";
-      el.textContent = String(c);
-      return el;
-    }));
+    historyEl.replaceChildren(...items.map((c) => elementOf(outputBubbleTemplate(c))));
   }
   historyEl.scrollTop = historyEl.scrollHeight;
 }
@@ -978,30 +1003,6 @@ function atHistoryEnd() {
   return shouldFollowScroll({ scrollHeight, scrollTop, clientHeight });
 }
 
-function appendChunk(text) {
-  if (!text) return;
-  const k = normalize(text);
-  if (!k || shownTexts.shows(k)) return;
-  const follow = isNearBottom();
-  const hint = historyEl.querySelector(".hint");
-  if (hint) hint.remove();
-  const div = document.createElement("div");
-  div.className = "bubble output";
-  div.textContent = text;
-  appendToHistory(div);
-  if (follow) historyEl.scrollTop = historyEl.scrollHeight;
-}
-
-// +stopped+: a stop someone chose (a cancel, the session's stop), drawn in
-// the stopped style (timing.js STOPPED_LINE_CLASS); else a failure's line.
-function addEndBubble(text, { stopped = false } = {}) {
-  const div = document.createElement("div");
-  div.className = stopped ? STOPPED_LINE_CLASS : "bubble cancel";
-  div.textContent = text;
-  appendToHistory(div);
-  if (!turnDom.holds?.()) historyEl.scrollTop = historyEl.scrollHeight;
-}
-
 // Everything a turn's end (completed, canceled, failed) closes: then its
 // end line (+endText+, the cancel or failed line), then the step cards that
 // left the collapsed block (card.js leavesBlock), where a reload puts them.
@@ -1025,349 +1026,6 @@ function endTurnView(kind, endText = null, { emptyAnswer = null, stopped = false
   if (questionCards.pendingQuestion()) questionCards.resolveQuestion(questionCards.pendingQuestion().id, { cancelled: true, reason: "turn ended" });
 }
 
-// ── Prompt bubbles ─────────────────────────────────────────────────────────
-// Every client's prompts, keyed by enqueued_id: queued (badge) until their
-// turn starts, or steered when merged into a running turn. This tab's own
-// prompts are echoed at send (data-own) and tagged by their turn_enqueued.
-
-// The bubble a reload draws (turn_html.js), with this page's own fields.
-// +delivery+: how it went into a running turn (next_step, cut, queue): its
-// queued badge says what it waits for.
-function makeUserBubble(prompt, { state = null, label = null, enqueuedId = null, own = false, images = null, delivery = null } = {}) {
-  const hint = historyEl.querySelector(".hint");
-  if (hint) hint.remove();
-  const div = elementOf(userBubbleTemplate({ content: prompt }, {
-    label, state, own, enqueuedId, delivery, key: normalize(prompt), thumbs: thumbsTemplate(selected, images),
-  }));
-  const follow = isNearBottom();
-  appendToHistory(div);
-  if (follow) historyEl.scrollTop = historyEl.scrollHeight;
-  return div;
-}
-
-function setBubbleState(bubble, state) {
-  bubble.classList.remove("queued", "steered", "failed");
-  bubble.querySelector(".state-badge")?.remove();
-  if (!BADGES[state]) {
-    delete bubble.dataset.userState;
-    return;
-  }
-  bubble.classList.add(state);
-  bubble.dataset.userState = state;
-  bubble.append(elementOf(stateBadgeTemplate(state, bubble.dataset.delivery || null)));
-}
-
-// A bubble's delivery changed (the ack's cut: off goes in at the next
-// step; a queue to a turn that ended meanwhile is just the next turn): its
-// badge follows.
-function setBubbleDelivery(bubble, delivery) {
-  if ((bubble.dataset.delivery || null) === (delivery || null)) return;
-  if (delivery) bubble.dataset.delivery = delivery;
-  else delete bubble.dataset.delivery;
-  if (bubble.dataset.userState) setBubbleState(bubble, bubble.dataset.userState);
-}
-
-function bubbleById(enqueuedId) {
-  if (!enqueuedId) return null;
-  return findInTurnRoots(".bubble.user[data-enqueued-id]").find(
-    (el) => el.dataset.enqueuedId === enqueuedId,
-  ) || null;
-}
-
-// This tab's oldest untagged echo, preferring one with the same text.
-function untaggedOwnBubble(prompt) {
-  const echoes = findInTurnRoots(".bubble.user[data-own]:not([data-enqueued-id])");
-  const text = normalize(prompt || "");
-  return echoes.find((el) => el.dataset.userContent === text) || echoes[0] || null;
-}
-
-// Returns the bubble of the turn a turn_started starts (the stage takes it
-// into its prompt line), else null.
-function applyPromptOps(event) {
-  if (event.type === "turn_started") liveTurn.wakeStart = !!event.continue && isReportClient(event.origin?.client_id);
-  const ops = promptOps(event, { myId: clientId, known: (id) => !!bubbleById(id), unmatchedMerge: liveTurn.unmatchedMerge, wakeStart: liveTurn.wakeStart });
-  if (event.type === "input_merged") liveTurn.unmatchedMerge = false;
-  if (event.type === "pending_input_merged") liveTurn.unmatchedMerge = false;
-  let started = null;
-  for (const op of ops) {
-    if (op.op === "report") {
-      liveTurn.unmatchedMerge = "report";
-    } else if (op.op === "add") {
-      const bubble = makeUserBubble(op.prompt, { state: op.state, label: op.label, enqueuedId: op.enqueuedId, images: op.images, delivery: op.delivery });
-      if (op.state === "started") started = bubble;
-      if (event.type === "pending_input_merged") liveTurn.wakeStart = false;
-    } else if (op.op === "tag") {
-      if (bubbleById(op.enqueuedId)) continue;
-      const echo = untaggedOwnBubble(op.prompt);
-      if (echo) {
-        echo.dataset.enqueuedId = op.enqueuedId;
-        if (op.delivery) setBubbleDelivery(echo, op.delivery);
-      }
-      // Re-rendered from a snapshot: the echo is gone, the prompt still queued.
-      else makeUserBubble(op.prompt, { state: "queued", own: true, enqueuedId: op.enqueuedId, images: op.images, delivery: op.delivery });
-    } else if (op.op === "start") {
-      const bubble = bubbleById(op.enqueuedId) || untaggedOwnBubble(op.prompt);
-      // A resync (a new worker woken by this page's send) re-rendered the
-      // history and took the echo with it: draw the prompt again.
-      if (!bubble) started = makeUserBubble(op.prompt, { own: true, enqueuedId: op.enqueuedId, images: op.images });
-      else {
-        if (op.enqueuedId) bubble.dataset.enqueuedId = op.enqueuedId;
-        setBubbleState(bubble, null);
-        started = bubble;
-      }
-    } else if (op.op === "steer") {
-      const bubble = bubbleById(op.enqueuedId);
-      if (bubble) setBubbleState(bubble, "steered");
-      else liveTurn.unmatchedMerge = true;
-    }
-  }
-  return started;
-}
-
-// ── Idle recap ─────────────────────────────────────────────────────────────
-// A summary the worker writes after a quiet stretch or as it leaves: shown at
-// the end of the history. A turn starting leaves it in place, marked
-// earlier; only a new recap replaces it.
-
-function showRecap(text, turnsSince = 0) {
-  if (!text) return;
-  removeRecap();
-  const details = document.createElement("details");
-  details.className = "bubble recap";
-  if (turnsSince > 0) details.classList.add("stale");
-  details.open = true;
-  const summary = document.createElement("summary");
-  summary.textContent = recapLabel(turnsSince);
-  const body = document.createElement("div");
-  body.className = "recap-body";
-  body.textContent = text;
-  details.appendChild(summary);
-  details.appendChild(body);
-  // A stale one sits where it was written, above the turns it doesn't cover.
-  // Never in the stage: a recap is between turns.
-  turnDom.settleFold?.();
-  const before = recapPlace(turnPromptBubbles(), turnsSince);
-  keepFollowing(historyEl, () => (before ? historyEl.insertBefore(details, before) : appendAboveLiveTiming(historyEl, details, liveTurn.timing.el)));
-}
-
-// A turn started: the recap describes the chat before it.
-function markRecapStale() {
-  historyEl.querySelectorAll(".bubble.recap:not(.stale)").forEach((el) => {
-    el.classList.add("stale");
-    const summary = el.querySelector("summary");
-    if (summary) summary.textContent = recapLabel(0, true);
-  });
-}
-
-// A guardrail hook or rule file that failed to load (once per worker), or
-// a bundle's plugin (+label+ "plugins").
-// +before+: the element it goes above (a snapshot's), else the end.
-function showGuardrailWarning(text, label = "guardrails", { before = null } = {}) {
-  if (!text) return;
-  const el = document.createElement("div");
-  el.className = "bubble guardrail-warning";
-  el.textContent = `${label}: ${text}`;
-  const follow = isNearBottom();
-  if (before) historyEl.insertBefore(el, before);
-  else appendToHistory(el);
-  if (follow) historyEl.scrollTop = historyEl.scrollHeight;
-}
-
-// A hook's line to the user (event[:notify]): "<bundle>: text", in the
-// warning colour for level warn.
-// +before+: the element it goes above (a snapshot's notice), else the end.
-// A plugin's steers (pending_input_merged's steers): a row of the running
-// turn's step, else (no turn runs) a bubble.
-function showSteers(steers) {
-  for (const steer of steers || []) {
-    if (turnDom.steer(steer)) continue;
-    removeHintIfEmpty();
-    const row = elementOf(steerRowTemplate(steer, { bubble: true }));
-    const follow = isNearBottom();
-    appendToHistory(row);
-    if (follow) historyEl.scrollTop = historyEl.scrollHeight;
-  }
-}
-
-function showHookNotice(data, { before = null } = {}) {
-  removeHintIfEmpty();
-  const el = document.createElement("div");
-  el.className = "bubble hook-notice" + (data.level === "warn" ? " warn" : "") + (data.cls ? ` ${data.cls}` : "");
-  el.textContent = data.line || `${hookNoticeLabel(data.hook)}: ${data.text || ""}`;
-  if (data.title) el.title = data.title;
-  const follow = isNearBottom();
-  if (before) historyEl.insertBefore(el, before);
-  else appendToHistory(el);
-  if (follow) historyEl.scrollTop = historyEl.scrollHeight;
-}
-
-// ── plugin cards ───────────────────────────────────────────────────────────
-// A plugin's card (docs/plugins.md, Cards): a glass card between turns, or
-// a row of the running turn's step. The same id updates the card in place.
-// An action button runs its command line in the session (sendCommand), as
-// if typed.
-
-function cardElement(id) {
-  if (!id) return null;
-  return findInTurnRoots(".plugin-card").find((el) => el.dataset.cardId === String(id)) || null;
-}
-
-// Show +card+: update the one with its id where it is, else add it (a
-// running turn's card as a row of its step; else before +before+ or at the
-// end of the history). A running turn's card with actions asks the user
-// something (check-in's Nudge / Keep going / Stop): it goes under the turn's
-// block, not into a step that collapses when the next one starts.
-function upsertCard(card, { before = null } = {}) {
-  if (!card || !card.id) return;
-  const existing = cardElement(card.id);
-  if (existing) {
-    const drawn = drawCard(existing, card);
-    drawn.classList.add("card-updated");
-    setTimeout(() => drawn.classList.remove("card-updated"), 900);
-    return;
-  }
-  removeHintIfEmpty();
-  const el = drawCard(document.createElement(isNoticeCard(card) ? "details" : "div"), card);
-  const asks = (card.actions || []).some((a) => a && a.command);
-  if (card.in_turn && !before && !asks && turnDom.card(el)) return;
-  const follow = isNearBottom();
-  if (before) historyEl.insertBefore(el, before);
-  else appendToHistory(el);
-  if (follow) historyEl.scrollTop = historyEl.scrollHeight;
-}
-
-// A snapshot's cards and notices, each above the first turn after it; a
-// turn's own notice where it showed live (placeTurnNotice).
-function placeSnapshotCards(entries) {
-  const users = turnPromptBubbles();
-  for (const entry of entries) {
-    const before = cardPlace(users, entry);
-    if (isCard(entry)) upsertCard(entry, { before });
-    else if (entry.type === "question") placeResolvedQuestion(entry, before);
-    else if (entry.type === "guardrail_warning") showGuardrailWarning(entry.message, entry.label || "guardrails", { before });
-    else if (entry.in_turn) placeTurnNotice(entry, before);
-    else if (entry.type === "hook_notice") showHookNotice(entry, { before });
-  }
-}
-
-// A finished turn's row, a hook's notice or the loop's asking again
-// (+before+: the next turn's prompt, or null for the last turn): a row of
-// its step, above the row of the call it came before, as live; else (a
-// plain answer, a step the history doesn't have) a bubble before the
-// turn's answer, or before its timing line when it has none.
-function placeTurnNotice(entry, before) {
-  const extra = entry.type === "llm_context_edited" ? llmContextNotice(entry) : {};
-  const line = noticeLine(entry);
-  const turnEls = reloadedTurnEls(before);
-  const place = turnNoticePlace(entry);
-  const block = turnEls.find((el) => el.matches(".turn-work"));
-  const step = place && block ? block.querySelectorAll(":scope > .gen")[place.step] : null;
-  if (!step) {
-    showHookNotice({ ...entry, ...extra, line }, { before: turnAnswerEl(turnEls) || before });
-    return;
-  }
-  const el = document.createElement("div");
-  el.className = "hook-notice" + (entry.level === "warn" ? " warn" : "") + (extra.cls ? ` ${extra.cls}` : "");
-  el.textContent = line;
-  if (extra.title) el.title = extra.title;
-  let body = step.querySelector(":scope > .activity-body");
-  if (!body) {
-    body = document.createElement("div");
-    body.className = "activity-body";
-    step.appendChild(body);
-  }
-  const row = [...body.children].find((r) => r.dataset.key === place.rowKey);
-  body.insertBefore(el, row || null);
-}
-
-// A prompt that started a turn: not a line steered into a running one.
-const TURN_PROMPT = ".bubble.user:not(.steered)";
-
-// The history's turn prompts, oldest first (what turns_since counts).
-function turnPromptBubbles() {
-  return [...historyEl.querySelectorAll(`:scope > ${TURN_PROMPT}`)];
-}
-
-// The elements of the reloaded turn that ends before +before+ (the next
-// turn's prompt, or null for the last turn), its prompt first.
-function reloadedTurnEls(before) {
-  const turnEls = [];
-  for (let el = before ? before.previousElementSibling : historyEl.lastElementChild; el; el = el.previousElementSibling) {
-    turnEls.unshift(el);
-    if (el.matches(TURN_PROMPT)) break;
-  }
-  return turnEls;
-}
-
-// What goes after a reloaded turn's own rows and cards: its answer, else
-// its timing line; null when it has neither.
-function turnAnswerEl(turnEls) {
-  return turnEls.filter((el) => el.matches(".bubble.output, .empty-answer")).pop() || turnEls.find((el) => el.matches(".turn-timing")) || null;
-}
-
-// A finished turn's question (the snapshot's cards keep it with its
-// answer): the card as it was left live, resolved, before the lines the
-// user sent into the turn after it (a steered bubble's data-step: the step
-// that read it) and the turn's answer. A pending one is the running turn's
-// (pending_question draws it).
-function placeResolvedQuestion(entry, before) {
-  const pq = entry.pending_question;
-  if (!pq?.id || !(entry.answer || entry.cancelled)) return;
-  const turnEls = reloadedTurnEls(before);
-  const asked = Number(entry.iteration) || 1;
-  // The reply that asked: its step's text in the reloaded block (the card
-  // keeps it, as live), never the running turn's.
-  const said = stepText(turnEls.find((el) => el.matches(".turn-work")), asked);
-  questionCards.renderQuestion(pq, { said });
-  const card = questionCards.questionCard();
-  if (!card || card.dataset.qid !== String(pq.id)) return;
-  questionCards.resolveQuestion(pq.id, { answer: entry.answer || null, cancelled: !!entry.cancelled, reason: entry.reason || "" });
-  const later = turnEls.find((el) => el.matches(".bubble.user.steered") && Number(el.dataset.step) > asked);
-  historyEl.insertBefore(card, later || turnAnswerEl(turnEls) || before);
-}
-
-// A live card's body comes as text; the worker's snapshot (through the
-// server) has it rendered. One re-read for a burst of cards.
-let cardBodiesTimer = null;
-function refreshCardBodies() {
-  clearTimeout(cardBodiesTimer);
-  const id = selected;
-  cardBodiesTimer = setTimeout(async () => {
-    try {
-      const data = await getSession(id, { cards: true });
-      if (id !== selected) return;
-      for (const card of data.cards || []) {
-        const el = card.type === "card" && cardElement(card.id);
-        if (el) refreshCardBody(el, card);
-      }
-    } catch (_) {}
-  }, 150);
-}
-
-function onCardAction(e) {
-  const button = e.target.closest(".plugin-card .card-action");
-  if (!button || !selected) return;
-  const card = button.closest(".plugin-card");
-  const err = card.querySelector(".card-error");
-  err.classList.add("hidden");
-  button.disabled = true;
-  sendCommand(selected, button.dataset.command, { clientId, card: true })
-    .then(() => {
-      // The command woke the worker: follow its stream if none is open.
-      followWokenWorker();
-    })
-    .catch((error) => {
-      err.textContent = error.message;
-      err.classList.remove("hidden");
-    })
-    .finally(() => { button.disabled = false; });
-}
-turnRoots().forEach((root) => root.addEventListener("click", onCardAction));
-
-function removeRecap() {
-  historyEl.querySelectorAll(".bubble.recap").forEach((el) => el.remove());
-}
-
 // The info bar's "copy chi --attach": the full id, which the page shows
 // only short; "copied ✓" for 2 s (current.attachCopiedAt: that session's).
 infoTextEl.addEventListener("click", (e) => {
@@ -1387,12 +1045,9 @@ infoTextEl.addEventListener("click", async (e) => {
   setTimeout(updateInfoBar, 2000);
 });
 
-// The open session's worker runs an older chi than the newest installed:
-// a badge, with Restart when the worker can (else the stop command).
+// The open session's worker badge (info_bar_model.js workerBadgeFor).
 function currentWorkerBadge() {
-  if (!selected || current.owner !== "worker") return null;
-  return workerBadge({ workerVersion: current.workerVersion, features: current.workerFeatures,
-                       installed: versions.installed, served: versions.served, sessionId: selected });
+  return workerBadgeFor(selected, current, versions);
 }
 
 // Restart: the session moves to a new worker on the newest chi; the page
@@ -1415,76 +1070,40 @@ async function restartWorker() {
   }
 }
 
+// The session bar (info_bar_model.js sessionBar): its buttons, and the
+// info line rendered by info_bar.js.
 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,
+    now: Date.now(),
+  });
   const stopBtn = document.getElementById("infoStopBtn");
   const deleteBtn = document.getElementById("infoDeleteBtn");
   const archiveBtn = document.getElementById("infoArchiveBtn");
   const continueBtn = document.getElementById("infoContinueBtn");
-  const chain = selected ? chainNeighbours(allSessions, selected, { continues: current.continues }) : { prev: null, next: null };
   if (continueBtn) {
-    // A link continued already has its → link instead; a terminal's
-    // session is continued there.
-    continueBtn.style.display = selected && !chain.next && current.owner !== "tui" ? "" : "none";
-    const busy = !!selected && continuingIds.has(selected);
-    continueBtn.disabled = busy;
-    continueBtn.textContent = busy ? "continuing…" : "continue →";
+    continueBtn.style.display = buttons.continue.shown ? "" : "none";
+    continueBtn.disabled = buttons.continue.disabled;
+    continueBtn.textContent = buttons.continue.text;
   }
-  if (deleteBtn) deleteBtn.style.display = selected ? "" : "none";
+  if (deleteBtn) deleteBtn.style.display = buttons.delete.shown ? "" : "none";
   if (archiveBtn) {
-    archiveBtn.style.display = selected ? "" : "none";
-    const archived = selectedArchived();
-    archiveBtn.textContent = archived ? "unarchive" : "archive";
-    archiveBtn.classList.toggle("archived", archived);
-    archiveBtn.title = archived ? "Unarchive: back to the lists" : "Archive: hide from the lists, keep for good";
+    archiveBtn.style.display = buttons.archive.shown ? "" : "none";
+    archiveBtn.textContent = buttons.archive.text;
+    archiveBtn.classList.toggle("archived", buttons.archive.archived);
+    archiveBtn.title = buttons.archive.title;
   }
-  if (!selected) {
-    // The start page hides the info bar (the storage path is on #/sessions).
-    renderInfoBar(infoTextEl, null);
-    if (stopBtn) stopBtn.style.display = "none";
-    updateSessionTitle();
-    return;
-  }
-  if (stopBtn) stopBtn.style.display = canStopSession({ owner: current.owner, streaming: !!streamControl }) ? "" : "none";
-  const tokens = current.timing.tokens;
-  const ctxTip = ctxBarTip(tokens, current.timing.memoryIndex,
-                           { tokens: current.ctxWindow, source: current.ctxWindowSource, pct: current.ctxPct,
-                             budget: current.llmContext?.budget_tokens });
-  const speedTextNow = lastSpeedText(tokens);
-  const avgSpeed = speedText(tokens?.avg_decode_tps, tokens?.tps_source);
-  const sessionDuration = currentSessionDuration();
-  // A delegated session names its parent, as a link to it.
-  const parentChip = delegatedBy(current.parentId, allSessions.find((x) => x.id === current.parentId) || null);
-  const badge = currentWorkerBadge();
-  // The session clock ticks every second while a turn runs: lit writes its
-  // text alone, the bar's other nodes (a tooltip, a button mid-press) stay.
-  renderInfoBar(infoTextEl, {
-    id: selected,
-    copied: Date.now() - current.attachCopiedAt < 2000,
-    status: current.status,
-    model: modelLabel(current.model, ...(current.served || [])),
-    // A link of a session chain: ← the previous link, → the next one (each
-    // only while the list holds it).
-    chain: { prev: chainLink(chain.prev), next: chainLink(chain.next) },
-    parent: parentChip ? { id: current.parentId, title: parentChip.title } : null,
-    // A parent names its delegates; the link opens all sessions.
-    kids: childrenSummary({ id: selected }, allSessions),
-    llmContext: current.llmContext,
-    thinking: current.thinking,
-    reasoningHistory: current.reasoningHistory,
-    // The tools chip (toolkit_chip.js): null on full.
-    toolkit: current.toolkit,
-    // The model notes the session's prompt carried.
-    notes: promptNotesChip(current.promptNotes),
-    memories: current.usedMemories,
-    preloaded: current.preloadedMemories,
-    muted: current.mutedMemories,
-    dir: current.dir,
-    ctx: { text: ctxBarText(current.ctxPct, current.ctxWindowSource), tip: ctxTip },
-    speed: speedTextNow ? { text: speedTextNow, tip: `Decode speed of the last generation${avgSpeed ? `; session average ${avgSpeed}` : ""}` } : null,
-    clock: sessionDuration === null ? "" : `session ${formatDuration(sessionDuration)}`,
-    worker: badge ? { badge, busy: restartingIds.has(selected) } : null,
-  });
+  if (stopBtn) stopBtn.style.display = buttons.stop.shown ? "" : "none";
+  // No session: the start page hides the info bar (the storage path is on
+  // #/sessions). The session clock ticks every second while a turn runs:
+  // lit writes its text alone, the bar's other nodes (a tooltip, a button
+  // mid-press) stay.
+  renderInfoBar(infoTextEl, bar);
   updateSessionTitle();
+  // A fresh link's picker follows what the bar follows: its model, its
+  // owner, a next link continued from elsewhere.
+  syncModelPick();
 }
 
 // The open session's title, once on screen (session_title.js): its strip
@@ -1513,18 +1132,6 @@ function updateSessionTitle() {
   }
 }
 
-// A chain's link (chains.js chainNeighbours) as the info bar's ← / →
-// shows it (info_bar.js chainLinkTemplate), or null.
-function chainLink(link) {
-  if (!link) return null;
-  return { id: link.id, date: chainDate(link.session?.created_at), preview: link.session ? lists.cardTitle(link.session) : "",
-           archived: !!link.session?.archived };
-}
-
-function currentSessionDuration() {
-  return sessionDurationNow(current.timing, liveTurn.running);
-}
-
 // The stage takes a running turn's rows (its extras); else the history.
 function appendToHistory(el) {
   // (The stage's place first moves a turn still sliding away into the history.)
@@ -1690,6 +1297,10 @@ const streamHandlers = createStreamHandlers({
   onInitEvent: (type, data) => onInitEvent(type, data),
   upsertCard: (card) => upsertCard(card),
   refreshCardBodies: () => refreshCardBodies(),
+  syncModelPick: () => {
+    if (pendingPick) pickRanEarly = true;
+    syncModelPick();
+  },
 });
 
 async function refreshTimingFromSession() {
@@ -1705,12 +1316,6 @@ async function refreshTimingFromSession() {
 }
 
 
-function removeHintIfEmpty() {
-  const hint = historyEl.querySelector(".hint");
-  if (!hint) return;
-  // Remove the placeholder when the card will be the first content in history.
-  if (!historyEl.querySelector(".bubble")) hint.remove();
-}
 function closeStream() {
   turnDom.reset();
   if (streamControl) {
@@ -1739,6 +1344,9 @@ function handleCreate() {
 // /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();
@@ -1897,30 +1505,6 @@ function clearComposer() {
   fitPrompt();
 }
 
-function addCommandBubble(view) {
-  removeHintIfEmpty();
-  const div = document.createElement("div");
-  // Page-only: kept across a resync of this session (keptCommandBubbles).
-  if (selected) div.dataset.keptFor = selected;
-  drawCommandBubble(div, view);
-  const follow = isNearBottom();
-  appendToHistory(div);
-  if (follow) historyEl.scrollTop = historyEl.scrollHeight;
-}
-
-function commandBubble(commandId) {
-  if (!commandId) return null;
-  return findInTurnRoots(".bubble.command").find((el) => el.dataset.commandId === String(commandId)) || null;
-}
-
-function addNoteBubble(note) {
-  removeHintIfEmpty();
-  const div = elementOf(noteBubbleTemplate(note));
-  const follow = isNearBottom();
-  appendToHistory(div);
-  if (follow) historyEl.scrollTop = historyEl.scrollHeight;
-}
-
 async function handleCancel() {
   if (!selected) return;
   cancelBtn.disabled = true;
@@ -1947,10 +1531,24 @@ $("#newBtn").addEventListener("click", () => {
 // ── 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). 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.
+// 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 chat 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"),
@@ -1958,12 +1556,70 @@ const modelPicker = createModelPicker({
   list: $("#modelList"),
   composer: $("#composer"),
   center: $("#center"),
-  onPick: () => {
-    renderNewChatLlmContext();
-    renderNewChatThinking();
+  remember: () => !selected,
+  onPick: (name) => {
+    if (selected) pickForLink(name);
+    else {
+      renderNewChatLlmContext();
+      renderNewChatThinking();
+    }
     promptEl.focus();
   },
 });
+// 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 chat");
+  }
+}
+// Leaving a session: the start page's remembered model again (no fetch).
+function restoreStartPick() {
+  let stored = null;
+  try { stored = localStorage.getItem(MODEL_KEY); } catch (_) {}
+  modelPicker.restore(stored);
+  renderNewChatLlmContext();
+  renderNewChatThinking();
+}
 async function loadModels() {
   let payload;
   try {
@@ -1974,8 +1630,10 @@ async function loadModels() {
   let stored = null;
   try { stored = localStorage.getItem(MODEL_KEY); } catch (_) {}
   if (!modelPicker.setModels(payload, stored)) return;
-  modelPickEl.title = payload.warning ? `The model the new chat starts on · ${payload.warning}` : "The model the new chat starts on";
+  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();
 }
@@ -2250,13 +1908,15 @@ async function continueSelected() {
     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) });
+      showToast(continuedText(id, created, { opened: false }), { label: "Open", run: () => select(next) }, { sticky });
       return;
     }
     await select(next);
     if (selected === next) fillOpener();
-    showToast(continuedText(id, created));
+    showToast(continuedText(id, created), null, { sticky });
   } catch (e) {
     const refusal = continueRefusal(e, allSessions);
     if (refusal.kind === "open") {
@@ -2343,22 +2003,32 @@ async function setArchived(id, archive, { undo = true } = {}) {
 
 // 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; with no card in sight (the
-// start page, all sessions) the CSS's 24 px from the bottom.
+// 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 gap = 12;
   const dock = document.getElementById("dock");
   const r = dock.getBoundingClientRect();
-  const over = document.body.classList.contains("has-session") && r.height > 0;
-  const stage = document.getElementById("turnStage");
-  const top = stage && !stage.hidden ? Math.min(r.top, stage.getBoundingClientRect().top) : r.top;
-  const bottom = over ? `${Math.round(window.innerHeight - top + gap)}px` : "";
+  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");
   }
 }
+// The model panel opening, closing or changing height (its list filters).
+new ResizeObserver(() => placeToast()).observe(document.getElementById("modelPanel"));
 
 // sticky: stays until its action or its ✕ (else gone after 6 s). +text+:
 // words, or a template (chains.js openChildrenTemplate: a link in it, a
@@ -2370,8 +2040,8 @@ function showToast(text, action = null, { sticky = false } = {}) {
   render(html`<span @click=${(e) => { if (e.target.closest?.("a[href]")) hide(); }}>${text}</span>${action
     ? html`<button type="button" class="toast-action" @click=${() => { hide(); action.run(); }}>${action.label}</button>`
     : nothing}${sticky ? html`<button type="button" class="toast-close" title="Dismiss" aria-label="Dismiss" @click=${hide}>✕</button>` : nothing}`, el);
-  placeToast();
   el.hidden = false;
+  placeToast();
   clearTimeout(toastTimer);
   if (!sticky) toastTimer = setTimeout(hide, 6000);
 }