samagotchi 0.3.0 → 0.5.0

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

@@ -17,16 +17,19 @@ import {
   uploadImage,
   listModels,
 } from "./data.js";
-import { MODEL_KEY, modelNames, pickModel } from "./model_pick.js";
+import { MODEL_KEY } from "./model_pick.js";
+import { createModelPicker } from "./model_picker.js";
 import { chipName, chipsHtml, imageFiles, restoredChips, thumbsHtml, turnRefs, turnText } from "./images.js";
 import { escapeHtml, messageBodyHtml, noteHtml, normalize, steerRowHtml, userBodyHtml, ownerBadge, previewForCard, relativeTime, firstMessageOf, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy } from "./format.js";
 import { chatHistoryHtml, createChatView } from "./chat_view.js";
 import { createTurnView, turnHistoryHtml } from "./turn_view.js";
+import { createStageView } from "./stage_view.js";
 import { annotateBarLeft, annotationSource, appendQuote, quoteBlock } from "./annotations.js";
 import { parsePresets, presetNote } from "./annotate_presets.js";
 import { COPY_SOURCE_ATTR, copySource, copySourceAttr, copyText, installCopy, showsAnswer } from "./copy.js";
 import { routeChunk } from "./chunk_router.js";
 import { extractCtxPct, savedCtxPct, cardCtxText } from "./ctx.js";
+import { diffHtml } from "./diff_view.js";
 import { approvalAllowed, approvalView, isApproval, nextCardAction, resultText, summaryText } from "./question_card.js";
 import { cardClass, cardInnerHtml, cardPlace, splitSnapshotCards, turnNoticePlace } from "./card.js";
 import { gripFloor, promptHeight } from "./composer_size.js";
@@ -36,12 +39,12 @@ import { allScopeHref, cardFolder, projectScopeHref, scopeDir } from "./scope.js
 import { shouldFollowScroll, keepFollowing } from "./scroll.js";
 import { stripColumns, stripShowParts } from "./strip.js";
 import { applySessionEvent, listedSessions, sortedByUpdated, withChildrenAfterParents } from "./sessions_list.js";
-import { NOTIFY_CHANNEL, attentionText, createNotifyGate, initialAttentionState, trackAttention } from "./notify.js";
+import { NOTIFY_CHANNEL, attentionText, createNotifyGate, initialAttentionState, notifyState as bellState, trackAttention } from "./notify.js";
 import {
   appendAboveLiveTiming, cancelLineText, elapsedSince, formatDuration, normalizeTiming, turnTimingText,
 } from "./timing.js";
 import { DONE_MS, applyInitEvent, dropDone, initRowHtml, newInitTasks, seedInitTasks } from "./init_row.js";
-import { clientLabel, commandView, continueLine, emptyRetryLine, hookNoticeLabel, isCommandLine, isOwn, keepEarlyRestore, newClientId, promptOps, reminderText, restoreAction, restoreOnAck, snapshotEvents, turnOutput, webLocalReply, workerGoneText } from "./turn_events.js";
+import { clientLabel, commandView, continueLine, emptyRetryLine, hookNoticeLabel, initWaitLine, isCommandLine, isOwn, keepEarlyRestore, newClientId, promptOps, reminderText, restoreAction, restoreOnAck, retryStatusLine, snapshotEvents, turnOutput, webLocalReply, workerGoneText } from "./turn_events.js";
 
 const $ = (s) => document.querySelector(s);
 const topStripEl = $("#topStrip");
@@ -57,7 +60,6 @@ const promptEl = $("#prompt");
 const actionBtn = $("#actionBtn");
 const cancelBtn = $("#cancelBtn");
 const modelPickEl = $("#modelPick");
-const modelSelectEl = $("#modelSelect");
 const composeHintEl = $("#composeHint");
 
 let selected = null;
@@ -71,18 +73,32 @@ let resyncsInFlight = 0;
 let resyncAgain = false;
 let allSessions = [];
 let seenContent = new Set();
-// The per-turn view (web.turn_view, or ?view=turn|chat): one block per turn
-// with its steps (turn_view.js), instead of a row of bubbles (chat_view.js).
-const turnView = document.body.dataset.turnView === "1";
+// The page's view of a turn (web.view, or ?view=turn|stage|chat): one block
+// per turn with its steps (turn_view.js), the running turn pinned above the
+// composer (the stage), or a row of bubbles (chat_view.js).
+const view = ["turn", "stage", "chat"].includes(document.body.dataset.view) ? document.body.dataset.view : "turn";
+// The turn and stage views draw a turn as steps (a reload asks for parts).
+const turnView = view !== "chat";
 // The running turn's DOM: the streaming bubbles, the thinking block and the
-// activity panel, or the turn block.
-const turnDom = (turnView ? createTurnView : createChatView)({
+// activity panel, the turn block, or the stage (the turn block in its cloud).
+const viewArgs = {
   historyEl,
   appendToHistory: (el) => appendToHistory(el),
   isNearBottom: () => isNearBottom(),
   sawText: (k) => seenContent.add(k),
   sessionId: () => selected,
-});
+};
+const turnDom = view === "stage"
+  ? createStageView({ ...viewArgs, isNearBottom: () => atHistoryEnd(), dockEl: $("#dock"), centerEl: $("#center"), composerEl })
+  : (turnView ? createTurnView : createChatView)(viewArgs);
+// 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() {
+  return turnDom.root ? [historyEl, turnDom.root] : [historyEl];
+}
+function findInTurnRoots(selector) {
+  return turnRoots().flatMap((root) => [...root.querySelectorAll(selector)]);
+}
 let currentFirstPreview = "";
 let currentUsedMemories = [];
 // The session's --memory and --mute lists (from the session card; shown in
@@ -104,6 +120,10 @@ let currentOwner = null;
 let currentTiming = normalizeTiming();
 let turnRunning = false;
 let liveTurnTimingEl = null;
+// What the running turn waits on, after its live timing line: a provider
+// retry (generation_retrying) or plugins' setup (plugin_init_wait); "" when
+// it streams again.
+let liveTurnNote = "";
 let timingInterval = null;
 // Live ask_user_question card, keyed by pending question id. Re-rendered from
 // pending_question on session select so a reload mid-question restores it.
@@ -477,6 +497,7 @@ const SEND_HINT = "Enter to send · Shift+Enter for a newline";
 // its next step (steering). Cancel is its own button then.
 function updateComposerMode() {
   document.body.classList.toggle("has-session", !!selected);
+  if (selected) modelPicker.close();
   const running = turnRunning && !!selected;
   cancelBtn.style.display = running ? "" : "none";
   if (running) {
@@ -824,7 +845,7 @@ function applyFinalMarkdown(messages) {
   );
   if (!message) return;
 
-  const bubble = [...historyEl.querySelectorAll(".bubble.output")]
+  const bubble = findInTurnRoots(".bubble.output")
     .reverse()
     .find((item) => showsAnswer(item, message, normalize));
   if (!bubble) return;
@@ -836,7 +857,7 @@ function applyFinalMarkdown(messages) {
 
 function seedSeenFromDom() {
   seenContent = new Set();
-  historyEl.querySelectorAll(".bubble").forEach((b) => {
+  findInTurnRoots(".bubble").forEach((b) => {
     const k = normalize(b.textContent);
     if (k) seenContent.add(k);
   });
@@ -845,8 +866,13 @@ function seedSeenFromDom() {
 // Sticky-follow scroll: only auto-scroll to the bottom while the user is
 // already near it; never yank them back down mid-read. Capture the decision
 // BEFORE any DOM mutation that grows the content (new chunk / row / thinking
-// delta), so the gap measured is the one the user was sitting at.
+// delta), so the gap measured is the one the user was sitting at. While the
+// stage holds a turn its rows go there: nothing it does moves the history.
 function isNearBottom() {
+  return !turnDom.holds?.() && atHistoryEnd();
+}
+
+function atHistoryEnd() {
   const { scrollHeight, scrollTop, clientHeight } = historyEl;
   return shouldFollowScroll({ scrollHeight, scrollTop, clientHeight });
 }
@@ -870,7 +896,7 @@ function addEndBubble(text) {
   div.className = "bubble cancel";
   div.textContent = text;
   appendToHistory(div);
-  historyEl.scrollTop = historyEl.scrollHeight;
+  if (!turnDom.holds?.()) historyEl.scrollTop = historyEl.scrollHeight;
 }
 
 // Everything a turn's end (completed, canceled, failed) closes: then its
@@ -883,7 +909,7 @@ function endTurnView(kind, endText = null) {
   if (endText) addEndBubble(endText);
   if (kept.length) {
     kept.forEach((el) => appendToHistory(el));
-    historyEl.scrollTop = historyEl.scrollHeight;
+    if (!turnDom.holds?.()) historyEl.scrollTop = historyEl.scrollHeight;
   }
   // The question dies with its turn (the worker stopped waiting).
   if (pendingQuestion) resolveQuestionCard(pendingQuestion.id, { cancelled: true, reason: "turn ended" });
@@ -939,25 +965,29 @@ function setBubbleState(bubble, state) {
 
 function bubbleById(enqueuedId) {
   if (!enqueuedId) return null;
-  return [...historyEl.querySelectorAll(".bubble.user[data-enqueued-id]")].find(
+  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 = [...historyEl.querySelectorAll(".bubble.user[data-own]:not([data-enqueued-id])")];
+  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) {
   const ops = promptOps(event, { myId: clientId, known: (id) => !!bubbleById(id), unmatchedMerge });
   if (event.type === "input_merged") unmatchedMerge = false;
   if (event.type === "pending_input_merged") unmatchedMerge = false;
+  let started = null;
   for (const op of ops) {
     if (op.op === "add") {
-      makeUserBubble(op.prompt, { state: op.state, label: op.label, enqueuedId: op.enqueuedId, images: op.images });
+      const bubble = makeUserBubble(op.prompt, { state: op.state, label: op.label, enqueuedId: op.enqueuedId, images: op.images });
+      if (op.state === "started") started = bubble;
     } else if (op.op === "tag") {
       if (bubbleById(op.enqueuedId)) continue;
       const echo = untaggedOwnBubble(op.prompt);
@@ -968,10 +998,11 @@ function applyPromptOps(event) {
       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) makeUserBubble(op.prompt, { own: true, enqueuedId: op.enqueuedId, images: op.images });
+      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);
@@ -979,6 +1010,7 @@ function applyPromptOps(event) {
       else unmatchedMerge = true;
     }
   }
+  return started;
 }
 
 // ── Idle recap ─────────────────────────────────────────────────────────────
@@ -1001,8 +1033,9 @@ function showRecap(text, turnsSince = 0) {
   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.
   const before = recapPlace([...historyEl.querySelectorAll(":scope > .bubble.user")], turnsSince);
-  keepFollowing(historyEl, () => (before ? historyEl.insertBefore(details, before) : appendToHistory(details)));
+  keepFollowing(historyEl, () => (before ? historyEl.insertBefore(details, before) : appendAboveLiveTiming(historyEl, details, liveTurnTimingEl)));
 }
 
 // A turn started: the recap describes the chat before it.
@@ -1062,7 +1095,7 @@ function showHookNotice(data, { before = null } = {}) {
 
 function cardElement(id) {
   if (!id) return null;
-  return [...historyEl.querySelectorAll(".plugin-card")].find((el) => el.dataset.cardId === String(id)) || null;
+  return findInTurnRoots(".plugin-card").find((el) => el.dataset.cardId === String(id)) || null;
 }
 
 function drawCard(el, card) {
@@ -1170,7 +1203,7 @@ function refreshCardBodies() {
   }, 150);
 }
 
-historyEl.addEventListener("click", (e) => {
+function onCardAction(e) {
   const button = e.target.closest(".plugin-card .card-action");
   if (!button || !selected) return;
   const card = button.closest(".plugin-card");
@@ -1187,7 +1220,8 @@ historyEl.addEventListener("click", (e) => {
       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());
@@ -1272,30 +1306,43 @@ function startLiveTurnTiming(startedAt = new Date().toISOString()) {
   currentTiming.activeTurn = { started_at: startedAt };
   // The turn records hold the finished turns, so this one comes next.
   liveTurnNumber = currentTiming.turnRecords.length + 1;
+  liveTurnNote = "";
   liveTurnTimingEl = document.createElement("div");
   liveTurnTimingEl.className = "turn-timing live";
-  historyEl.appendChild(liveTurnTimingEl);
+  // The stage's status row while it holds the turn: the line moves into the
+  // history with it.
+  (turnDom.timingHost?.() || historyEl).appendChild(liveTurnTimingEl);
   updateLiveTiming();
   timingInterval = setInterval(updateLiveTiming, 1000);
 }
 
+// The stage takes a running turn's rows (its extras); else the history.
 function appendToHistory(el) {
+  if (turnDom.place?.(el)) return;
   appendAboveLiveTiming(historyEl, el, liveTurnTimingEl);
 }
 
 function updateLiveTiming() {
   const duration = elapsedSince(currentTiming.activeTurn?.started_at);
   if (liveTurnTimingEl && duration !== null) {
-    liveTurnTimingEl.textContent = turnTimingText(liveTurnNumber, duration, { running: true });
+    liveTurnTimingEl.textContent = turnTimingText(liveTurnNumber, duration, { running: true }) + (liveTurnNote ? ` · ${liveTurnNote}` : "");
   }
   updateInfoBar();
 }
 
+// Set (or clear, "") what the running turn waits on.
+function setLiveTurnNote(text) {
+  if (liveTurnNote === text) return;
+  liveTurnNote = text;
+  if (currentTiming.activeTurn) updateLiveTiming();
+}
+
 function finishLiveTurnTiming(record = null) {
   const duration = Number.isFinite(Number(record?.duration_ms))
     ? Number(record.duration_ms)
     : elapsedSince(currentTiming.activeTurn?.started_at);
   if (liveTurnTimingEl && duration !== null) {
+    liveTurnNote = "";
     liveTurnTimingEl.classList.remove("live");
     const at = record ? currentTiming.turnRecords.indexOf(record) : -1;
     liveTurnTimingEl.textContent = turnTimingText(at >= 0 ? at + 1 : liveTurnNumber, duration);
@@ -1322,15 +1369,12 @@ function updateFirstPeek() {
   }
 }
 
-function addUsedMemory(name) {
-  const v = String(name||"").trim();
-  if (!v || currentUsedMemories.includes(v)) return;
-  currentUsedMemories.push(v);
+function setUsedMemories(names) {
+  currentUsedMemories = names.slice();
   updateInfoBar();
   const sess = allSessions.find(s=>s.id===selected);
   if (sess) {
-    sess.used_memory_names = sess.used_memory_names || [];
-    if (!sess.used_memory_names.includes(v)) sess.used_memory_names.push(v);
+    sess.used_memory_names = currentUsedMemories.slice();
     render();
     document.querySelectorAll(".card").forEach(el=>el.classList.toggle("active", el.dataset.id===selected));
   }
@@ -1394,6 +1438,7 @@ const streamHandlers = {
     // block (see chunk_router.js). Raw `content` is only used as a fallback
     // for pre-Phase-2 / non-enriched servers.
     const { text, thinking } = routeChunk(data);
+    setLiveTurnNote("");
     turnDom.chunk({ text, thinking, iteration: data.iteration ?? null });
     const pct = extractCtxPct(data, currentCtxWindow);
     if (pct !== null && !Number.isNaN(pct)) {
@@ -1404,9 +1449,11 @@ const streamHandlers = {
   },
   generation_started: (data) => {
     if (data?.context_window_tokens) currentCtxWindow = data.context_window_tokens;
+    setLiveTurnNote("");
     turnDom.generationStarted(data || {});
   },
   generation_completed: (data) => {
+    setLiveTurnNote("");
     if (data?.served_model) {
       currentServed = [data.served_model, data.requested_model];
       updateInfoBar();
@@ -1424,13 +1471,16 @@ const streamHandlers = {
   },
   turn_enqueued: (data) => applyPromptOps(data),
   turn_started: (data) => keepFollowing(historyEl, () => {
+    // A finished turn still in the stage goes first: the start op looks
+    // for a queued prompt among its rows.
+    turnDom.handOff?.({ immediate: true });
     markRecapStale();
-    applyPromptOps(data);
+    const promptBubble = applyPromptOps(data);
     setTurnRunning(true);
     setLiveStatus("running");
     clearTimingInterval();
     liveTurnTimingEl = null;
-    turnDom.turnStarted(data);
+    turnDom.turnStarted({ ...data, promptBubble });
     startLiveTurnTiming(data.started_at);
   }),
   turn_completed: async (data) => {
@@ -1530,24 +1580,11 @@ const streamHandlers = {
   context_added: (data) => addNoteBubble({ label: data.label, content: data.text || "" }),
   continue_offered: (data) => renderContinueCard(data),
   continue_resolved: (data) => resolveContinueCard(data),
-  tool_call_started: (data) => {
-    turnDom.toolStarted(data);
-    const call = data.call || {};
-    let name = null;
-    if (call.name === "memory_read" && call.content) {
-      name = String(call.content).split(",")[0].trim();
-      if (name) name = name.replace(/\.md$/,"").split("/").pop();
-    } else if (call.name === "read" && call.content && /memories\/.+\.md/.test(call.content)) {
-      name = String(call.content).split("/").pop().replace(/\.md$/,"");
-    }
-    if (name) addUsedMemory(name);
-  },
+  tool_call_started: (data) => turnDom.toolStarted(data),
   tool_call_completed: (data) => turnDom.toolCompleted(data),
+  // The engine's list, after every memory read and at a turn's end.
   used_memories_updated: (data) => {
-    if (Array.isArray(data.used_memory_names)) {
-      currentUsedMemories = data.used_memory_names.slice();
-      updateInfoBar();
-    }
+    if (Array.isArray(data.used_memory_names)) setUsedMemories(data.used_memory_names);
   },
   context_status: (data) => {
     const pct = extractCtxPct(data, currentCtxWindow);
@@ -1568,13 +1605,21 @@ const streamHandlers = {
     resolveQuestionCard(data.id, { cancelled: true, reason: data.reason });
   },
   // One collected just as a turn started describes the chat before it.
-  recap_ready: (data) => { if (!turnRunning) showRecap(data.recap); },
+  recap_ready: (data) => {
+    // After the turn it covers, never above it.
+    turnDom.handOff?.({ immediate: true });
+    if (!turnRunning) showRecap(data.recap);
+  },
   guardrail_warning: (data) => showGuardrailWarning(data.message, data.label || "guardrails"),
   // In the turn view, a notice during a turn is a row of its current step.
   hook_notice: (data) => { if (!turnDom.notice(data)) showHookNotice(data); },
   // The loop asks again after an empty answer: a row of the empty step (the
   // chat view shows nothing; after a reload neither does the turn view).
   empty_answer_retry: (data) => { turnDom.notice({ line: emptyRetryLine(data) }); },
+  // The provider is asked again after an error, or the turn waits for
+  // plugins' setup: a note on the live timing line until it streams.
+  generation_retrying: (data) => setLiveTurnNote(retryStatusLine(data)),
+  plugin_init_wait: (data) => setLiveTurnNote(initWaitLine(data)),
   plugin_init_started: (data) => onInitEvent("plugin_init_started", data),
   plugin_init_finished: (data) => onInitEvent("plugin_init_finished", data),
   // A plugin's card, or a new version of one (the same id).
@@ -1752,6 +1797,13 @@ function renderApprovalDetails(view) {
     what.appendChild(code);
     box.appendChild(what);
   }
+  // An edit/write: the diff it would make, under the path.
+  if (view.preview) {
+    const diff = document.createElement("div");
+    diff.className = "approval-diff";
+    diff.innerHTML = diffHtml(view.preview);
+    box.appendChild(diff);
+  }
   for (const [cls, label, text] of [["approval-where", "in", view.where], ["approval-why", "why", view.why]]) {
     if (!text) continue;
     const row = document.createElement("div");
@@ -1886,9 +1938,12 @@ async function handleSendTurn() {
   }
   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();
   const echo = makeUserBubble(prompt, { state: "queued", own: true, images: sending });
-  historyEl.scrollTop = historyEl.scrollHeight;
+  if (!turnDom.holds?.()) historyEl.scrollTop = historyEl.scrollHeight;
   if (!currentFirstPreview || currentFirstPreview==="—") {
     currentFirstPreview = normalize(prompt).slice(0,80) + (normalize(prompt).length>80?"…":"");
     updateInfoBar();
@@ -1996,7 +2051,7 @@ function drawCommandBubble(div, { label, line, text, busy = false, failed = fals
 
 function commandBubble(commandId) {
   if (!commandId) return null;
-  return [...historyEl.querySelectorAll(".bubble.command")].find((el) => el.dataset.commandId === String(commandId)) || null;
+  return findInTurnRoots(".bubble.command").find((el) => el.dataset.commandId === String(commandId)) || null;
 }
 
 function addNoteBubble(note) {
@@ -2119,7 +2174,17 @@ $("#newBtn").addEventListener("click", () => {
 // 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.
+// 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 modelPicker = createModelPicker({
+  button: modelPickEl,
+  panel: $("#modelPanel"),
+  input: $("#modelSearch"),
+  list: $("#modelList"),
+  composer: $("#composer"),
+  center: $("#center"),
+  onPick: () => promptEl.focus(),
+});
 async function loadModels() {
   let payload;
   try {
@@ -2127,26 +2192,16 @@ async function loadModels() {
   } catch (_) {
     return;
   }
-  const names = modelNames(payload);
-  if (!names.length) return;
   let stored = null;
   try { stored = localStorage.getItem(MODEL_KEY); } catch (_) {}
-  const chosen = pickModel(names, payload.default, stored || modelSelectEl.value);
-  modelSelectEl.innerHTML = names
-    .map((n) => `<option value="${escapeHtml(n)}"${n === chosen ? " selected" : ""}>${escapeHtml(n)}</option>`)
-    .join("");
+  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";
-  modelPickEl.dataset.value = chosen; // sizes the select to the chosen name (CSS)
   modelPickEl.hidden = false;
 }
-modelSelectEl.addEventListener("change", () => {
-  modelPickEl.dataset.value = modelSelectEl.value;
-  try { localStorage.setItem(MODEL_KEY, modelSelectEl.value); } catch (_) {}
-});
 // 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 : modelSelectEl.value || undefined;
+  return modelPickEl.hidden ? undefined : modelPicker.chosen() || undefined;
 }
 actionBtn.addEventListener("click", () => {
   if (!selected) handleCreate();
@@ -2238,7 +2293,8 @@ fitPrompt();
 const dockEl = $("#dock");
 const centerEl = $("#center");
 new ResizeObserver(() => {
-  const follow = isNearBottom();
+  // The stage's height too: a reader at the end stays there.
+  const follow = atHistoryEnd();
   centerEl.style.setProperty("--dock-h", `${dockEl.offsetHeight}px`);
   if (follow) historyEl.scrollTop = historyEl.scrollHeight;
 }).observe(dockEl);
@@ -2261,12 +2317,12 @@ composerEl.addEventListener("drop", (e) => {
   e.preventDefault();
   addImageFiles(files);
 });
-historyEl.addEventListener("click", (e) => {
+turnRoots().forEach((root) => root.addEventListener("click", (e) => {
   const img = e.target.closest("img.thumb");
   if (!img) return;
   lightboxEl.querySelector("img").src = img.src;
   lightboxEl.hidden = false;
-});
+}));
 lightboxEl.addEventListener("click", () => { lightboxEl.hidden = true; });
 document.addEventListener("keydown", (e) => {
   if (e.key === "Escape" && !lightboxEl.hidden) lightboxEl.hidden = true;
@@ -2499,7 +2555,7 @@ function updateAnnotate() {
   const sel = window.getSelection();
   if (!selected || currentOwner === "tui" || !sel || sel.isCollapsed || !sel.rangeCount) return hideAnnotate();
   const range = sel.getRangeAt(0);
-  if (!historyEl.contains(range.startContainer)) return hideAnnotate();
+  if (!turnRoots().some((root) => root.contains(range.startContainer))) return hideAnnotate();
   const source = annotationSource(range.startContainer);
   // A running turn's narration box shows complete sentences and its thinking
   // is appended by delta; a selection in either is refused while the step is
@@ -2545,8 +2601,9 @@ function scheduleAnnotate() {
 }
 document.addEventListener("selectionchange", scheduleAnnotate);
 historyEl.addEventListener("scroll", scheduleAnnotate);
+turnDom.scrollEl?.addEventListener("scroll", scheduleAnnotate, true);
 window.addEventListener("resize", scheduleAnnotate);
-installCopy(historyEl);
+turnRoots().forEach((root) => installCopy(root));
 // Keep the selection when a button is pressed.
 annotateBar.addEventListener("mousedown", (e) => e.preventDefault());
 annotateBar.addEventListener("click", (e) => {
@@ -2583,19 +2640,19 @@ function tabInFront() {
   return document.visibilityState === "visible" && document.hasFocus();
 }
 
-function notifySupported() {
-  return typeof globalThis.Notification === "function";
-}
-
 function notifyWanted() {
   try { return localStorage.getItem(NOTIFY_KEY) === "1"; } catch (_) { return false; }
 }
 
-// "on" | "off" | "denied" | "unsupported"
+// "on" | "off" | "denied" | "unsupported" (notify.js)
 function notifyState() {
-  if (!notifySupported()) return "unsupported";
-  if (Notification.permission === "denied") return "denied";
-  return notifyWanted() && Notification.permission === "granted" ? "on" : "off";
+  const hasNotification = typeof globalThis.Notification === "function";
+  return bellState({
+    hasNotification,
+    secureContext: globalThis.isSecureContext !== false,
+    permission: hasNotification ? Notification.permission : "default",
+    wanted: notifyWanted(),
+  });
 }
 
 const NOTIFY_TITLES = {

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

@@ -11,6 +11,7 @@
 import { newActivity, addStarted, addCompleted, finalizeActivity, activityCount, toolName } from "./activity.js";
 import { copySourceAttr } from "./copy.js";
 import { escapeHtml, leadTrimmed, messageBodyHtml, noteHtml, normalize, steerRowHtml } from "./format.js";
+import { activityDiffHtml } from "./diff_view.js";
 import { thumbsHtml } from "./images.js";
 import { shouldFollowScroll } from "./scroll.js";
 import { tallyText } from "./tally.js";
@@ -348,7 +349,11 @@ export function fillActivityRow(el, row, sessionId) {
   const toolEl = el.querySelector(".activity-tool");
   if (toolEl) toolEl.textContent = toolName(row);
   const paramsEl = el.querySelector(".activity-params");
-  if (paramsEl) paramsEl.textContent = row.params || "";
+  if (paramsEl) {
+    // The title in place of the params; the full params line on hover.
+    paramsEl.textContent = row.title || row.params || "";
+    paramsEl.title = row.title && row.params ? row.params : "";
+  }
   const outEl = el.querySelector(".activity-output");
   if (outEl) {
     if (row.status === "running") {
@@ -366,4 +371,6 @@ export function fillActivityRow(el, row, sessionId) {
   // The images a tool returned (the chat view's reloaded history has no tool
   // rows; the turn view's has, turn_view.js reloadRowHtml).
   if (row.images?.length && !el.querySelector(".thumbs")) el.insertAdjacentHTML("beforeend", thumbsHtml(sessionId, row.images));
+  // An edit/write's change, collapsed: "diff +3 −1".
+  if (row.diff && !el.querySelector(".activity-diff")) el.insertAdjacentHTML("beforeend", activityDiffHtml(row.diff));
 }

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

@@ -29,6 +29,8 @@ const DEFAULT_EVENT_TYPES = Object.freeze([
   "guardrail_warning",
   "hook_notice",
   "empty_answer_retry",
+  "generation_retrying",
+  "plugin_init_wait",
   "card",
   "plugin_init_started",
   "plugin_init_finished",

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

@@ -0,0 +1,58 @@
+// What chi's edit/write tools change, as HTML, apart from the DOM. One
+// renderer for both places: the approval card (the dry run, which can also
+// say the edit would fail, or that the file isn't shown) and a tool row's
+// collapsed "diff +3 −1" (what the call really changed). A diff is the
+// server's {text, added, removed, truncated, new_file} (EditPreview).
+
+import { escapeHtml } from "./format.js";
+
+// More lines than this fold behind a "show all N lines" toggle.
+export const DIFF_FOLD_LINES = 20;
+
+const MINUS = "−";
+
+// "+3 −1"
+export function diffCounts(diff) {
+  return `+${Number(diff?.added) || 0} ${MINUS}${Number(diff?.removed) || 0}`;
+}
+
+// A row's summary line: "diff +3 −1", "new file +12".
+export function diffSummary(diff) {
+  return diff?.new_file ? `new file +${Number(diff.added) || 0}` : `diff ${diffCounts(diff)}`;
+}
+
+export function diffLineClass(line) {
+  if (line.startsWith("@@")) return "hunk";
+  if (line.startsWith("+")) return "add";
+  if (line.startsWith("-")) return "del";
+  if (line.startsWith("\\") || line.startsWith("… ")) return "meta";
+  return "ctx";
+}
+
+function linesHtml(lines) {
+  return lines.map((line) => `<span class="diff-line diff-${diffLineClass(line)}">${escapeHtml(line) || " "}</span>`).join("");
+}
+
+// @param diff an EditPreview: a diff, or {error} / {skipped}
+// @return {string} HTML; "" for none
+export function diffHtml(diff, { fold = DIFF_FOLD_LINES } = {}) {
+  if (!diff || typeof diff !== "object") return "";
+  if (diff.error) return `<div class="diff-note warn">this edit would fail: ${escapeHtml(diff.error)}</div>`;
+  if (diff.skipped) return `<div class="diff-note">diff not shown: ${escapeHtml(diff.skipped)}</div>`;
+  const text = String(diff.text ?? "");
+  if (!text) return `<div class="diff-note">no change</div>`;
+  const lines = text.split("\n");
+  const head = diff.new_file ? `<div class="diff-note">new file</div>` : "";
+  const shown = `<pre class="diff"><code>${linesHtml(lines.slice(0, fold))}</code></pre>`;
+  if (lines.length <= fold) return head + shown;
+  // The rest opens under the first lines; the toggle hides once open (CSS).
+  const rest = `<details class="diff-more"><summary>show all ${lines.length} lines</summary>` +
+    `<pre class="diff"><code>${linesHtml(lines.slice(fold))}</code></pre></details>`;
+  return head + shown + rest;
+}
+
+// A tool row's collapsed diff (closed by default).
+export function activityDiffHtml(diff) {
+  if (!diff || typeof diff !== "object" || diff.error || diff.skipped) return "";
+  return `<details class="activity-diff"><summary>${escapeHtml(diffSummary(diff))}</summary>${diffHtml(diff)}</details>`;
+}