samagotchi 0.62.0 → 0.64.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
@@ -1923,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
@@ -1968,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/public/activity.js

@@ -140,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 { 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, emptyAnswerHtml, htmlElement, stateBadgeHtml, userBubbleHtml } from "./turn_html.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, openChildrenHtml } from "./chains.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,12 +49,13 @@ 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 { 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";
@@ -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,
@@ -393,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,
@@ -585,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");
@@ -699,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();
@@ -741,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;
@@ -833,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;
 }
@@ -984,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" });
@@ -1006,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);
@@ -1024,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) {
@@ -1139,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;
   }
 }
@@ -1170,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
@@ -1326,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);
@@ -1779,6 +1741,7 @@ async function handleSendTurn() {
     updateInfoBar();
   }
   actionBtn.disabled = true;
+  const sentTo = selected;
   try {
     for (const chip of sending) {
       if (!chip.ref) chip.ref = await uploadImage(selected, chip.file, chip.name);
@@ -1825,6 +1788,11 @@ async function handleSendTurn() {
       updateComposerMode();
       return;
     }
+    // A stale tab sent into a session deleted meanwhile: the start page
+    // says so, and the line stays in the composer.
+    if (e.code === "not_found") return leaveGoneSession(sentTo, "not_found");
+    // A /queue to a worker that can't queue (it would steer): its words, the text kept.
+    if (e.code === "delivery_unavailable") return addCommandBubble({ label: null, line, text: e.body?.detail || e.message, failed: true });
     alert(e.message);
   } finally {
     actionBtn.disabled = current.owner === "tui";
@@ -1882,9 +1850,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;
@@ -1964,7 +1930,7 @@ const lightboxEl = $("#lightbox");
 let chips = [];
 
 function renderChips() {
-  chipsEl.innerHTML = chipsHtml(chips);
+  render(chipsTemplate(chips), chipsEl);
   chipsEl.hidden = !chips.length;
 }
 
@@ -2222,7 +2188,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 });
     }
@@ -2319,24 +2285,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

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

@@ -1,7 +1,10 @@
 // A plugin's card (docs/plugins.md, Cards): a title, a body and actions,
 // each action a command line the session runs. app.js places and updates
-// the element; this module draws it and says where it goes.
-import { escapeHtml, recapPlace } from "./format.js";
+// the element; this module draws it (lit-html templates) and says where it
+// goes.
+import { html, nothing, render } from "./vendor/lit-html.js";
+import { unsafeHTML } from "./vendor/directives/unsafe-html.js";
+import { recapPlace } from "./format.js";
 
 // The card's class: a warn card wears the warning colour; a notice is a
 // one-line row.
@@ -31,13 +34,13 @@ export function noticeCardLine(card) {
   return title && body ? `${title}: ${body}` : title || body;
 }
 
-// A notice's markup inside its <details>: the line as the summary, and
-// where it came from when the row is opened (the line wraps then).
-export function noticeInnerHtml(card) {
+// A notice inside its <details>: the line as the summary, and where it
+// came from when the row is opened (the line wraps then).
+export function noticeTemplate(card) {
   const title = String(card?.title ?? "").trim();
   const source = String(card?.source ?? "").trim();
-  const from = source && source !== title ? `<div class="notice-from">from <span class="card-source">${escapeHtml(source)}</span></div>` : "";
-  return `<summary>${escapeHtml(noticeCardLine(card))}</summary>${from}`;
+  const from = source && source !== title ? html`<div class="notice-from">from <span class="card-source">${source}</span></div>` : nothing;
+  return html`<summary>${noticeCardLine(card)}</summary>${from}`;
 }
 
 // Whether a card shown as a row of a step leaves the turn's block when the
@@ -51,27 +54,74 @@ export function leavesBlock({ warn = false, kind = "completed" } = {}) {
 }
 
 // The body: the server's body_html (rendered markdown, sanitized; or the
-// escaped text in a <pre>), else the plain text in a <pre> (a live event
-// carries no html; the page's ?cards=1 re-read brings it).
-export function cardBodyHtml(card) {
-  if (typeof card?.body_html === "string") return card.body_html;
+// escaped text in a <pre>) as it is, else the plain text in a <pre> (a
+// live event carries no html; the page's ?cards=1 re-read brings it);
+// null for none. The same body_html again keeps its nodes (unsafeHTML
+// renders a string it rendered last time as it is).
+export function cardBodyTemplate(card) {
+  if (typeof card?.body_html === "string") return card.body_html ? unsafeHTML(card.body_html) : null;
   const body = String(card?.body ?? "");
-  return body.trim() ? `<pre>${escapeHtml(body)}</pre>` : "";
+  return body.trim() ? html`<pre>${body}</pre>` : null;
 }
 
-// The card's inner markup: its head (title, source), body and one button
-// per action (the command as its tooltip and data).
-export function cardInnerHtml(card) {
-  const source = card.source ? `<span class="card-source">${escapeHtml(card.source)}</span>` : "";
-  const head = `<div class="card-head"><span class="card-title">${escapeHtml(card.title || "")}</span>${source}</div>`;
-  const bodyHtml = cardBodyHtml(card);
-  const body = bodyHtml ? `<div class="card-body">${bodyHtml}</div>` : "";
+// The card: its head (title, source), body and one button per action (the
+// command as its tooltip and data), then the line a failed action writes.
+export function cardTemplate(card) {
+  const source = card.source ? html`<span class="card-source">${card.source}</span>` : nothing;
+  const body = cardBodyTemplate(card);
   const actions = (card.actions || []).filter((a) => a && a.command);
   const buttons = actions.length
-    ? `<div class="card-actions">${actions.map((a) =>
-      `<button type="button" class="card-action ghost" data-command="${escapeHtml(a.command)}" title="${escapeHtml(a.command)}">${escapeHtml(a.label || a.command)}</button>`).join("")}</div>`
-    : "";
-  return `${head}${body}${buttons}<div class="card-error hidden"></div>`;
+    ? html`<div class="card-actions">${actions.map((a) =>
+      html`<button type="button" class="card-action ghost" data-command=${a.command} title=${a.command}>${a.label || a.command}</button>`)}</div>`
+    : nothing;
+  return html`<div class="card-head"><span class="card-title">${card.title || ""}</span>${source}</div>${body ? html`<div class="card-body">${body}</div>` : nothing}${buttons}<div class="card-error hidden"></div>`;
+}
+
+// A card element → the card it shows, as drawCard drew it.
+const DRAWN = new WeakMap();
+
+// +card+ drawn on +el+ (a notice on a <details>, a card on a <div>; one
+// that turns into the other kind, btw's "thinking…" → its answer, is
+// drawn on a new element in its place). Returns the element drawn. A
+// redraw writes only what changed: an open notice stays open, a body
+// that didn't change keeps its nodes (a selection in it), and the same
+// body again from the stream (text, no html) keeps the rendered one. A
+// failed action's line goes, as the card is new.
+export function drawCard(el, card) {
+  const notice = isNoticeCard(card);
+  if (el.tagName !== (notice ? "DETAILS" : "DIV")) {
+    const fresh = el.ownerDocument.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;
+  const drawn = DRAWN.get(el);
+  const sameBody = card.body_html === undefined && drawn && String(drawn.body ?? "") === String(card.body ?? "");
+  paint(el, sameBody ? { ...card, body_html: drawn.body_html } : card);
+  const error = el.querySelector(":scope > .card-error");
+  if (error) {
+    error.textContent = "";
+    error.classList.add("hidden");
+  }
+  return el;
+}
+
+function paint(el, card) {
+  render(isNoticeCard(card) ? noticeTemplate(card) : cardTemplate(card), el);
+  DRAWN.set(el, card);
+}
+
+// The rendered body a re-read brought (the snapshot's +card+ with its
+// body_html) onto a card drawn with the same body text; a no-op for any
+// other.
+export function refreshCardBody(el, card) {
+  const drawn = DRAWN.get(el);
+  if (!drawn || isNoticeCard(drawn) || typeof card?.body_html !== "string" || String(drawn.body ?? "") !== String(card.body ?? "")) return;
+  paint(el, { ...drawn, body_html: card.body_html });
 }
 
 // Where a snapshot's card or between-turns notice goes: before the user

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

@@ -6,7 +6,7 @@
 // `day N` chip, its earlier links in a popover); the session page links the
 // previous and the next link. Pure: lists_view.js places the chip and rows
 // (lit-html templates) and app.js the toast's markup, and they bind them.
-import { escapeHtml, normalize, previewForCard, relativeTime } from "./format.js";
+import { normalize, previewForCard, relativeTime } from "./format.js";
 import { stoppedBadge, waitingBadge } from "./sessions_list.js";
 import { waitingOn } from "./notify.js";
 import { archivedBadge, rowBadgesTemplate, rowDotTemplate } from "./families_view.js";
@@ -226,10 +226,12 @@ export function continueRefusal(error, sessions = []) {
 // continue can't move to the next link (an older chi's worker, a chi
 // REPL), each a link to its session with what to do about it.
 // @param hrefFor (id) → its page's href
-export function openChildrenHtml(prevId, children, hrefFor) {
+export function openChildrenTemplate(prevId, children, hrefFor) {
   const n = children.length;
-  const items = children.map((c) => `<li><a href="${escapeHtml(hrefFor(c.id))}" class="cr-child">${escapeHtml(c.short)}</a>${c.text ? ` ${escapeHtml(c.text)}` : ""}</li>`).join("");
-  return `<div class="continue-refused"><div>Can't continue ${escapeHtml(String(prevId).slice(0, 8))}: ${n} open ${n === 1 ? "delegate" : "delegates"} can't move to the next link. Do what ${n === 1 ? "it says" : "each says"}, or wait for ${n === 1 ? "it" : "them"}, then continue.</div><ul>${items}</ul></div>`;
+  const items = children.map((c) => html`<li><a href=${hrefFor(c.id)} class=${"cr-child"}>${c.short}</a>${c.text ? ` ${c.text}` : nothing}</li>`);
+  const line = `Can't continue ${String(prevId).slice(0, 8)}: ${n} open ${n === 1 ? "delegate" : "delegates"} can't move to the next link. ` +
+    `Do what ${n === 1 ? "it says" : "each says"}, or wait for ${n === 1 ? "it" : "them"}, then continue.`;
+  return html`<div class="continue-refused"><div>${line}</div><ul>${items}</ul></div>`;
 }
 
 // The toast after a continue: the new link, the previous one archived (when