samagotchi 0.61.0 → 0.63.0

data/lib/samagotchi/web/app.rb

@@ -921,7 +921,7 @@ module Samagotchi
           state = nil
           session_json = { id: id, status: displayed_status(session), used_memory_names: Array(session.used_memory_names),
                            prompt_notes: session.prompt_notes.map(&:to_h) }
-          messages = last_assistant_for_display(session.messages, turn_id: turn_id)
+          messages = last_assistant_for_display(session.messages, turn_id: turn_id, cwd: session.working_directory)
         end
         live_metrics = state && state["metrics"]
         # Without recent=1: a tab opened before this release (it replaces its
@@ -1696,7 +1696,8 @@ module Samagotchi
         source = if live
                    persisted.merge(live_metrics).merge(
                      "started_at" => persisted["started_at"] || live_metrics["started_at"],
-                     "turn_records" => merge_timing_records(persisted["turn_records"], live_metrics["turn_records"]),
+                     "turn_records" => merge_timing_records(without_running_turn(persisted["turn_records"], live_metrics),
+                                                            live_metrics["turn_records"]),
                      "tool_records" => merge_timing_records(persisted["tool_records"], live_metrics["tool_records"])
                    )
                  else
@@ -1777,6 +1778,18 @@ module Samagotchi
         AnalyticsFile.read(@session_class.session_dir(session_id, state_dir: default_state_dir)) || {}
       end
 
+      # The saved turn records without the one the live worker is running:
+      # its turn checkpoint saves that turn's record so far as a killed
+      # turn's (canceled, worker_stopped, SessionMetrics#persist's
+      # running_turn), which is only true once the worker is gone.
+      def without_running_turn(records, live_metrics)
+        active = live_metrics["active_turn"]
+        id = active.is_a?(Hash) ? active["id"] || active[:id] : nil
+        return records if id.nil?
+
+        Array(records).reject { |record| record.is_a?(Hash) && (record["id"] || record[:id]) == id }
+      end
+
       def merge_timing_records(persisted, live)
         (Array(persisted) + Array(live)).each_with_object({}) do |record, records|
           next unless record.is_a?(Hash)
@@ -1910,7 +1923,7 @@ module Samagotchi
             message[:html] = @markdown_renderer.render(rendered) if !rendered.empty? && @markdown_renderer.available?
             # The refs after_turn hooks attached (AnswerRefs), checked again:
             # a stored file is never trusted. Never raises.
-            refs = Samagotchi::AnswerRefs.for_display(m[:display_refs] || m["display_refs"])
+            refs = Samagotchi::AnswerRefs.for_display(m[:display_refs] || m["display_refs"], cwd: cwd)
             message[:display_refs] = refs unless refs.empty?
           end
           message[:parts] = did if did
@@ -1955,8 +1968,10 @@ module Samagotchi
 
       # The last message messages_for_display shows as an answer
       # (AnswerTail), as a list of at most one: only that one is rendered.
-      def last_assistant_for_display(msgs, turn_id: nil)
-        messages_for_display([AnswerTail.find(msgs, turn_id: turn_id)].compact)
+      # +cwd+: the session's folder, for its file refs (nil from a live
+      # worker's tail: its refs were held to the folder when they were added).
+      def last_assistant_for_display(msgs, turn_id: nil, cwd: nil)
+        messages_for_display([AnswerTail.find(msgs, turn_id: turn_id)].compact, cwd: cwd)
       end
 
       def parse_json(str)

data/lib/samagotchi/web/message_parts.rb

@@ -9,6 +9,7 @@ require_relative "../tools/builtins"
 require_relative "../image_store"
 require_relative "../llm_context_edit"
 require_relative "../token_usage"
+require_relative "../row_refs"
 
 module Samagotchi
   module Web
@@ -37,7 +38,8 @@ module Samagotchi
     # A plugin tool's params are what its live row showed (its preview),
     # saved with the result as tool_params (native: one per call, chat: one
     # per result); its label ("chrome: screenshot") likewise as tool_labels,
-    # the part's label:. The web server has no Engine and runs no plugins, so a
+    # the part's label:, and its row refs as tool_refs (RowRefs, checked
+    # again here), the part's refs:. The web server has no Engine and runs no plugins, so a
     # result without them (older sessions) falls back to the given
     # registry: the built-ins', and a plugin tool's arguments as key="value"
     # from the parsers' args:, as the live row shows them for a tool
@@ -106,11 +108,12 @@ module Samagotchi
         shown = saved_list(responses, :tool_params, calls.length)
         labels = saved_list(responses, :tool_labels, calls.length)
         diffs = saved_list(responses, :tool_diffs, calls.length)
+        refs = saved_list(responses, :tool_refs, calls.length)
         ids = saved_list(responses, :tool_ids, calls.length)
         images = split_images(responses, calls.length)
         calls.each_with_index.map do |call, i|
-          tool_part(call, outputs[i], registry, shown[i], images[i], label: labels[i], diff: diffs[i], cwd: cwd,
-                                                                     tool_id: ids[i], marks: marks)
+          tool_part(call, outputs[i], registry, shown[i], images[i], label: labels[i], diff: diffs[i], refs: refs[i],
+                                                                     cwd: cwd, tool_id: ids[i], marks: marks)
         end
       end
 
@@ -144,7 +147,8 @@ module Samagotchi
           response = by_id[field(raw, :id).to_s] || (responses[i] && !unique.call(ids[i]) ? responses[i] : nil)
           tool_part(call, response && field(response, :content).to_s, registry, field(response, :tool_params),
                     response && field(response, :images), label: field(response, :tool_labels),
-                                                          diff: field(response, :tool_diffs), cwd: cwd,
+                                                          diff: field(response, :tool_diffs),
+                                                          refs: field(response, :tool_refs), cwd: cwd,
                                                           tool_id: Array(field(response, :tool_ids)).first, marks: marks)
         end
       end
@@ -224,10 +228,12 @@ module Samagotchi
 
       # +shown+ is the saved params line, when it is a String.
       # +diff+ is what an edit/write changed (EditPreview.change), saved as
-      # tool_diffs. +cwd+: the session's working directory, for the title.
+      # tool_diffs. +refs+: a plugin tool's row refs, saved as tool_refs
+      # (RowRefs.for_display checks them again against +cwd+). +cwd+: the
+      # session's working directory, for the title.
       # +tool_id+: its output's ToolIds id, with its ✂ mark in +marks+.
-      def tool_part(call, output, registry, shown = nil, images = nil, label: nil, diff: nil, cwd: nil, tool_id: nil,
-                    marks: {})
+      def tool_part(call, output, registry, shown = nil, images = nil, label: nil, diff: nil, refs: nil, cwd: nil,
+                    tool_id: nil, marks: {})
         name = call[:name].to_s
         params = shown.is_a?(String) ? shown : ToolActivity.tool_activity_params(name, call, registry: registry)
         part = { tool: name, params: params.to_s }
@@ -240,9 +246,11 @@ module Samagotchi
           part[:output] = output.length > OUTPUT_MAX ? output[0, OUTPUT_MAX] : output
           part[:output_truncated] = true if output.length > OUTPUT_MAX
         end
-        refs = Array(images).select { |ref| ref.is_a?(Hash) }
-        part[:images] = refs.map { |ref| ImageStore.symbolize(ref).slice(:file, :name, :width, :height) } unless refs.empty?
+        shots = Array(images).select { |image| image.is_a?(Hash) }
+        part[:images] = shots.map { |image| ImageStore.symbolize(image).slice(:file, :name, :width, :height) } unless shots.empty?
         part[:diff] = diff if diff.is_a?(Hash)
+        row_refs = RowRefs.for_display(refs, cwd: cwd)
+        part[:refs] = row_refs unless row_refs.empty?
         if tool_id
           part[:tool_id] = tool_id.to_s
           mark = mark_of(tool_id.to_s, marks, output)

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

@@ -45,8 +45,11 @@ export function newActivity() {
 //   ref: what the row traces to (the server's FileRef: {kind: "file",
 //     path, line?, end_line?}, the file a file tool touched), which
 //     refs.js makes the row's title and diff lines open.
+//   refs: a plugin tool's refs (the server's RowRefs: [{kind, target,
+//     label?, actions}]): the first on the row's title, the others in its
+//     menu (refs.js bindRowRefs).
 export const ACTIVITY_FIELDS = Object.freeze(["title", "called_as"]);
-export const EVENT_FIELDS = Object.freeze(["view", "ref"]);
+export const EVENT_FIELDS = Object.freeze(["view", "ref", "refs"]);
 const ROW_FIELDS = Object.freeze([...ACTIVITY_FIELDS, ...EVENT_FIELDS]);
 
 // The +fields+ of +source+ that are set, as an object (for a spread).
@@ -137,10 +140,10 @@ export function addCompleted(model, event = {}, now = null) {
   // A grep that found nothing (status ok): the row says "no match".
   if (event.activity?.no_match) row.no_match = true;
   // The images the tool returned (a reload in the turn view draws them from
-  // the saved parts, turn_html.js toolRowHtml).
+  // the saved parts, turn_html.js toolRowTemplate).
   if (event.images?.length) row.images = event.images;
   // What an edit/write changed in its file (a reload draws it from the
-  // saved parts, turn_html.js toolRowHtml).
+  // saved parts, turn_html.js toolRowTemplate).
   if (event.diff) row.diff = event.diff;
   const duration = callDuration(row, event, now);
   if (duration !== null) row.duration_ms = duration;

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

@@ -36,12 +36,12 @@ 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, chipsHtml, imageFiles, restoredChips, thumbsHtml, turnRefs, turnText } from "./images.js";
-import { escapeHtml, noteHtml, normalize, steerRowHtml, firstPreview, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy, childrenSummary, promptNotesChip } from "./format.js";
-import { createTurnView, turnHistoryNodes } from "./turn_view.js";
-import { BADGES, emptyAnswerHtml, htmlElement, stateBadgeHtml, userBubbleHtml } from "./turn_html.js";
-import { createStageView } from "./stage_view.js";
-import { CONTINUE_OPENER, isOpener, chainDate, chainNeighbours, continueRefusal, continuedText, openChildrenHtml } from "./chains.js";
+import { chipName, chipsTemplate, imageFiles, restoredChips, thumbsTemplate, turnRefs, turnText } 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 { createStageView, FOLD_MS } from "./stage_view.js";
+import { CONTINUE_OPENER, isOpener, chainDate, chainNeighbours, continueRefusal, continuedText, openChildrenTemplate } from "./chains.js";
 import { createTaskStopper } from "./task_stop.js";
 import { appendQuote } from "./annotations.js";
 import { parsePresets } from "./annotate_presets.js";
@@ -49,13 +49,14 @@ import { createAnnotateBar } from "./annotate_bar.js";
 import { copyText, installCopy } from "./copy.js";
 import { ctxBarText, ctxBarTip, lastSpeedText, speedText } from "./ctx.js";
 import { createQuestionCards } from "./question_cards.js";
-import { cardClass, cardInnerHtml, cardPlace, isCard, isNoticeCard, noticeInnerHtml, splitSnapshotCards, turnNoticePlace } from "./card.js";
+import { cardPlace, drawCard, isCard, isNoticeCard, refreshCardBody, splitSnapshotCards, turnNoticePlace } 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 { allScopeHref, projectScopeHref, scopeDir } from "./scope.js";
-import { shouldFollowScroll, keepFollowing } from "./scroll.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 { SHORT_WINDOW_QUERY, stripAutoHidden } from "./strip.js";
 import { applySessionEvent, flattenFamilies, inTree, sortedByUpdated } from "./sessions_list.js";
 import { createNotifications } from "./notifications.js";
@@ -94,14 +95,12 @@ const infoTextEl = $("#infoText");
 const contextChips = createContextChips({
   el: $("#contextChips"),
   api: { list: listContext, show: getContext, detach: detachContext, add: addContext },
-  escapeHtml,
   toast: (text) => showToast(text),
 });
 // The open session's LLM context chip in the info bar, and its popover:
 // /llm-context runs in the session's worker.
 const llmContextControl = createLlmContextControl({
   el: infoTextEl,
-  escapeHtml,
   summary: () => (selected ? current.llmContext : null),
   session: () => selected,
   running: () => liveTurn.running,
@@ -116,7 +115,6 @@ let newChatLlmContext = null;
 const newChatLlmSummary = () => (modelPickEl.hidden ? null : modelPicker.chosenRow()?.llm_context || null);
 const llmContextNewControl = createLlmContextControl({
   el: llmContextNewEl,
-  escapeHtml,
   summary: newChatLlmSummary,
   kind: NEW_CHAT,
   choice: () => newChatLlmContext,
@@ -264,6 +262,7 @@ const questionCards = createQuestionCards({
   isNearBottom: () => isNearBottom(),
   scrollToEnd: () => { historyEl.scrollTop = historyEl.scrollHeight; },
   removeHintIfEmpty: () => removeHintIfEmpty(),
+  askingText: () => turnDom.askingText(),
 });
 // The event id (or, from an older worker, the event_seq) the selected session
 // was rendered at (null: no live worker then), where a stream opened later
@@ -392,29 +391,11 @@ function followSelectedSession(sess) {
 // new chat starts on the start page.
 function renderScope() {
   const el = $("#scope");
-  const allLink = `<a class="scope-all" href="${escapeHtml(allScopeHref(location.hash, scope.dir, location.search))}" title="Sessions of every project">all</a>`;
-  if (scopeError) {
-    el.innerHTML = `<span class="scope-name error" title="${escapeHtml(scopeError)}">folder not found</span>${allLink}`;
-  } else if (scope.projectName) {
-    el.innerHTML = `<span class="scope-name" title="Sessions of ${escapeHtml(scope.projectDir)}">${escapeHtml(scope.projectName)}</span>${allLink}`;
-  } else {
-    const where = scope.dir || scope.serverDir;
-    const backLink = scope.backName
-      ? `<a class="scope-all scope-back" href="${escapeHtml(projectScopeHref(scope.backDir, location.hash, location.search))}" title="Sessions of ${escapeHtml(scope.backName)} only">← ${escapeHtml(scope.backName)}</a>`
-      : "";
-    el.innerHTML = `<span class="scope-name" title="Sessions of every project">all projects</span>${backLink}${where ? `<span class="scope-where" title="New chats start in ${escapeHtml(where)}">new chat in<span class="path"><bdi>${escapeHtml(where)}</bdi></span></span>` : ""}`;
-  }
+  render(scopeTemplate(scope, { error: scopeError, where: () => ({ hash: location.hash, search: location.search }) }), el);
   el.hidden = false;
   // The tab: "<session title> · Chi · <project>" (updateSessionTitle).
   tabBase = scope.projectName ? `Chi · ${scope.projectName}` : "Chi";
   updateSessionTitle();
-  // The links follow the hash (an open session, the all-sessions view).
-  el.querySelector(".scope-all:not(.scope-back)")?.addEventListener("click", (e) => {
-    e.currentTarget.href = allScopeHref(location.hash, scope.dir, location.search);
-  });
-  el.querySelector(".scope-back")?.addEventListener("click", (e) => {
-    e.currentTarget.href = projectScopeHref(scope.backDir, location.hash, location.search);
-  });
 }
 
 // The session lists (lists_view.js): the strip, all sessions, their cards,
@@ -584,7 +565,7 @@ function updateComposerMode() {
     actionBtn.textContent = "Start";
     actionBtn.disabled = false;
     emptyEl.classList.remove("hidden");
-    historyEl.innerHTML = "";
+    historyEl.replaceChildren();
     updateInfoBar();
   } else if (current.owner === "tui") {
     setPlaceholder("A terminal chi owns this session · run it with chi --shared to send from here", "A terminal chi owns this session");
@@ -698,7 +679,7 @@ async function select(id) {
   selected = id;
   setSessionHash(id);
   lists.paintActive();
-  historyEl.innerHTML = `<div class="hint">Loading…</div>`;
+  historyEl.replaceChildren(hintEl("Loading…"));
   emptyEl.classList.add("hidden");
   closeStream();
   resetSessionState();
@@ -740,7 +721,7 @@ async function resync({ endText = null } = {}) {
       data = await getSession(id, { parts: true });
     } catch (e) {
       if (e.status === 404) return leaveGoneSession(id, "not_found");
-      if (id === selected) historyEl.innerHTML = `<div class="hint">Error: ${escapeHtml(e.message)}</div>`;
+      if (id === selected) historyEl.replaceChildren(hintEl(`Error: ${e.message}`));
       return;
     }
     if (id !== selected) return;
@@ -832,16 +813,30 @@ 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.innerHTML = `<div class="hint">No output yet. Send a message.</div>`;
+    historyEl.replaceChildren(hintEl("No output yet. Send a message."));
     return;
   }
   if (typeof items[0] === "object" && items[0].role) {
-    historyEl.replaceChildren(turnHistoryNodes(items, current.timing, { thumbs: (images) => thumbsHtml(selected, images) }));
+    historyEl.replaceChildren(turnHistoryNodes(items, current.timing, { thumbs: (images) => thumbsTemplate(selected, images) }));
     linkTextRefs();
   } else {
-    historyEl.innerHTML = items.map((c) => `<div class="bubble output">${escapeHtml(c)}</div>`).join("");
+    historyEl.replaceChildren(...items.map((c) => {
+      const el = document.createElement("div");
+      el.className = "bubble output";
+      el.textContent = String(c);
+      return el;
+    }));
   }
   historyEl.scrollTop = historyEl.scrollHeight;
 }
@@ -983,7 +978,7 @@ function endTurnView(kind, endText = null, { emptyAnswer = null, stopped = false
   if (kind !== "gone") liveTurn.timing.ended += 1;
   // A completed turn with no answer: its notice where the answer goes
   // (the turn view places it), else after the turn; before the timing.
-  const endNote = emptyAnswer ? htmlElement(emptyAnswerHtml(emptyAnswer)) : null;
+  const endNote = emptyAnswer ? elementOf(emptyAnswerTemplate(emptyAnswer)) : null;
   const kept = turnDom.turnEnded({ kind, endNote, emptyAnswer: !!emptyAnswer }) || [];
   if (endNote && !endNote.isConnected) appendToHistory(endNote);
   liveTurn.timing.finish({ canceled: kind === "canceled" });
@@ -1005,8 +1000,8 @@ function endTurnView(kind, endText = null, { emptyAnswer = null, stopped = false
 function makeUserBubble(prompt, { state = null, label = null, enqueuedId = null, own = false, images = null } = {}) {
   const hint = historyEl.querySelector(".hint");
   if (hint) hint.remove();
-  const div = htmlElement(userBubbleHtml({ content: prompt }, {
-    label, state, own, enqueuedId, key: normalize(prompt), thumbs: thumbsHtml(selected, images),
+  const div = elementOf(userBubbleTemplate({ content: prompt }, {
+    label, state, own, enqueuedId, key: normalize(prompt), thumbs: thumbsTemplate(selected, images),
   }));
   const follow = isNearBottom();
   appendToHistory(div);
@@ -1023,7 +1018,7 @@ function setBubbleState(bubble, state) {
   }
   bubble.classList.add(state);
   bubble.dataset.userState = state;
-  bubble.insertAdjacentHTML("beforeend", stateBadgeHtml(state));
+  bubble.append(elementOf(stateBadgeTemplate(state)));
 }
 
 function bubbleById(enqueuedId) {
@@ -1101,6 +1096,7 @@ function showRecap(text, turnsSince = 0) {
   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)));
 }
@@ -1137,10 +1133,9 @@ function showSteers(steers) {
   for (const steer of steers || []) {
     if (turnDom.steer(steer)) continue;
     removeHintIfEmpty();
-    const holder = document.createElement("div");
-    holder.innerHTML = steerRowHtml(steer, { bubble: true });
+    const row = elementOf(steerRowTemplate(steer, { bubble: true }));
     const follow = isNearBottom();
-    appendToHistory(holder.firstChild);
+    appendToHistory(row);
     if (follow) historyEl.scrollTop = historyEl.scrollHeight;
   }
 }
@@ -1168,36 +1163,6 @@ function cardElement(id) {
   return findInTurnRoots(".plugin-card").find((el) => el.dataset.cardId === String(id)) || null;
 }
 
-// A notice is a <details> (a one-line row that opens), a card a <div>: a
-// card that turns into the other kind (btw's "thinking…" → its answer) is
-// drawn on a new element in its place. Returns the element drawn.
-function drawCard(el, card) {
-  const notice = isNoticeCard(card);
-  if (el.tagName !== (notice ? "DETAILS" : "DIV")) {
-    const fresh = document.createElement(notice ? "details" : "div");
-    el.replaceWith(fresh);
-    el = fresh;
-  }
-  el.className = cardClass(card);
-  el.dataset.cardId = card.id;
-  // A running turn's own card (the stage's status waits on one that asks).
-  if (card.in_turn) el.dataset.inTurn = "1";
-  else delete el.dataset.inTurn;
-  if (notice) {
-    const open = el.open;
-    el.innerHTML = noticeInnerHtml(card);
-    el.open = open;
-  } else if (card.body_html === undefined && el.dataset.body === String(card.body ?? "") && el.querySelector(".card-body")) {
-    // The same body again from the stream: keep the rendered one.
-    const body = el.querySelector(".card-body").innerHTML;
-    el.innerHTML = cardInnerHtml({ ...card, body_html: body });
-  } else {
-    el.innerHTML = cardInnerHtml(card);
-  }
-  el.dataset.body = String(card.body ?? "");
-  return el;
-}
-
 // 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
@@ -1299,12 +1264,15 @@ function turnAnswerEl(turnEls) {
 function placeResolvedQuestion(entry, before) {
   const pq = entry.pending_question;
   if (!pq?.id || !(entry.answer || entry.cancelled)) return;
-  questionCards.renderQuestion(pq);
+  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 turnEls = reloadedTurnEls(before);
-  const asked = Number(entry.iteration) || 1;
   const later = turnEls.find((el) => el.matches(".bubble.user.steered") && Number(el.dataset.step) > asked);
   historyEl.insertBefore(card, later || turnAnswerEl(turnEls) || before);
 }
@@ -1321,8 +1289,7 @@ function refreshCardBodies() {
       if (id !== selected) return;
       for (const card of data.cards || []) {
         const el = card.type === "card" && cardElement(card.id);
-        const body = el && el.querySelector(".card-body");
-        if (body && typeof card.body_html === "string" && el.dataset.body === String(card.body ?? "")) body.innerHTML = card.body_html;
+        if (el) refreshCardBody(el, card);
       }
     } catch (_) {}
   }, 150);
@@ -1509,6 +1476,7 @@ function currentSessionDuration() {
 
 // 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.)
   if (turnDom.place?.(el)) return;
   appendAboveLiveTiming(historyEl, el, liveTurn.timing.el);
 }
@@ -1876,9 +1844,7 @@ function commandBubble(commandId) {
 
 function addNoteBubble(note) {
   removeHintIfEmpty();
-  const div = document.createElement("div");
-  div.className = "bubble note";
-  div.innerHTML = noteHtml(note);
+  const div = elementOf(noteBubbleTemplate(note));
   const follow = isNearBottom();
   appendToHistory(div);
   if (follow) historyEl.scrollTop = historyEl.scrollHeight;
@@ -1958,7 +1924,7 @@ const lightboxEl = $("#lightbox");
 let chips = [];
 
 function renderChips() {
-  chipsEl.innerHTML = chipsHtml(chips);
+  render(chipsTemplate(chips), chipsEl);
   chipsEl.hidden = !chips.length;
 }
 
@@ -2039,15 +2005,51 @@ fitPrompt();
 // The card floats over the history: keep the history's bottom padding at the
 // card's height, and stay pinned to the end if the reader was there, since the
 // card grows (text, chips, Cancel, a wrapping footer) under a reader at the end.
+// In the stage view the stage floats above the card, out of the dock's flow
+// (stage_view.js): the reserve counts it too, with its 10 px gap, while it
+// shows.
 const dockEl = $("#dock");
 const centerEl = $("#center");
-new ResizeObserver(() => {
-  // 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;
+// A leaving stage (the hand-off's slide) no longer counts: the reserve eases
+// down over the slide (index.html, #center.reserve-easing).
+const stageEl = view === "stage" ? turnDom.root : null;
+const STAGE_GAP = 10;
+function dockReserve() {
+  const shown = stageEl && !stageEl.hidden && !stageEl.classList.contains("leaving");
+  return dockEl.offsetHeight + (shown ? stageEl.offsetHeight + STAGE_GAP : 0);
+}
+const historyEnd = () => historyEl.scrollHeight - historyEl.clientHeight;
+// A reader at the end stays there when the reserve changes: at once for the
+// composer card, eased for the stage (+fromStage+: it appeared, grew or
+// leaves), so the history glides rather than jumps. An eased follow running
+// counts as at the end.
+function updateReserve({ fromStage = false } = {}) {
+  const follow = atHistoryEnd() || historyEl.dataset.following !== undefined;
+  const leaving = !!stageEl?.classList.contains("leaving");
+  centerEl.classList.toggle("reserve-easing", leaving);
+  const reserve = `${dockReserve()}px`;
+  const changed = centerEl.style.getPropertyValue("--dock-h") !== reserve;
+  if (changed) centerEl.style.setProperty("--dock-h", reserve);
+  if (changed && follow) {
+    if (fromStage) easeScrollTo(historyEl, historyEnd, { ms: leaving ? FOLD_MS : FOLLOW_MS, reduce: matchMedia("(prefers-reduced-motion: reduce)").matches });
+    else if (historyEl.dataset.following === undefined) historyEl.scrollTop = historyEl.scrollHeight;
+  }
   placeToast();
-}).observe(dockEl);
+}
+const dockObserver = new ResizeObserver((entries) => updateReserve({ fromStage: entries.some((e) => e.target === stageEl) }));
+dockObserver.observe(dockEl);
+if (stageEl) {
+  dockObserver.observe(stageEl);
+  // Only showing, hiding and leaving change the reserve (not the stage's
+  // other classes: waiting, in-use…).
+  let stageShown = "";
+  new MutationObserver(() => {
+    const shown = `${stageEl.hidden}|${stageEl.classList.contains("leaving")}`;
+    if (shown === stageShown) return;
+    stageShown = shown;
+    updateReserve({ fromStage: true });
+  }).observe(stageEl, { attributes: true, attributeFilter: ["class", "hidden"] });
+}
 window.addEventListener("resize", () => placeToast());
 
 promptEl.addEventListener("paste", (e) => {
@@ -2180,7 +2182,7 @@ async function continueSelected() {
       if (selected === id) await select(refusal.id);
       showToast(`${short} is continued already: ${selected === refusal.id ? "opened" : "see"} ${refusal.id.slice(0, 8)}`);
     } else if (refusal.kind === "children") {
-      showToast(openChildrenHtml(id, refusal.children, sessionHash), null, { sticky: true, html: true });
+      showToast(openChildrenTemplate(id, refusal.children, sessionHash), null, { sticky: true });
     } else {
       showToast(`Can't continue ${short}: ${refusal.text}`, null, { sticky: true });
     }
@@ -2260,14 +2262,16 @@ 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; 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; 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 bottom = over ? `${Math.round(window.innerHeight - r.top + gap)}px` : "";
+  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 root = document.documentElement.style;
   if (root.getPropertyValue("--toast-bottom") !== bottom) {
     if (bottom) root.setProperty("--toast-bottom", bottom);
@@ -2275,24 +2279,20 @@ function placeToast() {
   }
 }
 
-// sticky: stays until its action or its ✕ (else gone after 6 s).
+// 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
+// delegate a continue waits for, opens that session and hides the toast).
 let toastTimer = null;
-// html: +text+ is markup this page built (its parts escaped), not words.
-function showToast(text, action = null, { sticky = false, html = false } = {}) {
+function showToast(text, action = null, { sticky = false } = {}) {
   const el = $("#toast");
-  el.innerHTML = `<span>${html ? text : escapeHtml(text)}</span>${action ? `<button type="button" class="toast-action">${escapeHtml(action.label)}</button>` : ""}` +
-    (sticky ? `<button type="button" class="toast-close" title="Dismiss" aria-label="Dismiss">✕</button>` : "");
+  const hide = () => { el.hidden = true; };
+  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;
-  el.querySelector(".toast-action")?.addEventListener("click", () => {
-    el.hidden = true;
-    action.run();
-  });
-  el.querySelector(".toast-close")?.addEventListener("click", () => { el.hidden = true; });
-  // A link in it (a delegate a continue waits for) opens that session.
-  el.querySelectorAll("a[href]").forEach((a) => a.addEventListener("click", () => { el.hidden = true; }));
   clearTimeout(toastTimer);
-  if (!sticky) toastTimer = setTimeout(() => { el.hidden = true; }, 6000);
+  if (!sticky) toastTimer = setTimeout(hide, 6000);
 }
 
 // Annotate (annotate_bar.js): a selection in the conversation offers