samagotchi 0.62.0 → 0.63.0

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);
@@ -1882,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;
@@ -1964,7 +1924,7 @@ const lightboxEl = $("#lightbox");
 let chips = [];
 
 function renderChips() {
-  chipsEl.innerHTML = chipsHtml(chips);
+  render(chipsTemplate(chips), chipsEl);
   chipsEl.hidden = !chips.length;
 }
 
@@ -2222,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 });
     }
@@ -2319,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

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

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

@@ -1,9 +1,9 @@
 // A tool call's full command in a richer UI than the TUI's params line:
 // the server's view (ToolView: an execute/task_create's command uncut up to
-// 8,000 chars, the call's cwd: argument). Pure HTML builders for the tool
-// row (turn_html.js toolRowHtml, live and reloaded alike).
-import { copyButtonHtml } from "./copy.js";
-import { escapeHtml } from "./format.js";
+// 8,000 chars, the call's cwd: argument). lit-html templates for the tool
+// row (turn_html.js toolRowTemplate, live and reloaded alike).
+import { html, nothing } from "./vendor/lit-html.js";
+import { copyButtonTemplate } from "./copy.js";
 
 // What a row's title hovers: the full command when the call has one,
 // else the params line when the row shows a title in its place.
@@ -15,7 +15,7 @@ export function rowHover(row) {
 // The expanded row's command block: "in <cwd>" when the call gave one (as
 // given: execute's may be relative to the project root), the command as
 // written (whitespace kept, its own scroll), a copy button, and a line
-// saying how much a cut command left out. "" for a call without a view.
+// saying how much a cut command left out. nothing for a call without a view.
 //
 // A view with steps (CommandSteps) shows them in the command's place, its
 // leading cd as one more "in" tag, and a "raw" toggle (a checkbox, CSS
@@ -28,30 +28,33 @@ export function rowHover(row) {
 // +title+ is the row's: the model's description of the command, when it
 // gave one, cut to fit. The block starts with the whole description when
 // the title is cut, never in place of the command.
-export function commandBlockHtml(view, title = null) {
+export function commandBlockTemplate(view, title = null) {
   const command = view?.command;
-  if (!command) return "";
+  if (!command) return nothing;
   const desc = view.description && view.description !== title
-    ? `<div class="activity-command-desc">${escapeHtml(view.description)}</div>`
-    : "";
+    ? html`<div class="activity-command-desc">${view.description}</div>`
+    : nothing;
   const steps = Array.isArray(view.steps) && view.steps.length ? view.steps : null;
   const dirs = [view.cwd, steps && view.cd].filter(Boolean);
   const where = dirs.length
-    ? `in ${dirs.map((d) => `<span>${escapeHtml(d)}</span>`).join(" <span class=\"activity-command-sep\">›</span> ")}`
-    : "";
+    ? html`in ${dirs.map((d, i) => html`${i ? html` <span class="activity-command-sep">›</span> ` : nothing}<span>${d}</span>`)}`
+    : null;
   const cut = view.truncated
-    ? `<div class="activity-command-cut">… (${command.length.toLocaleString("en-US")} of ${Number(view.chars || 0).toLocaleString("en-US")} chars)</div>`
-    : "";
-  const raw = `<pre><code>${escapeHtml(command)}</code></pre>`;
+    ? html`<div class="activity-command-cut">… (${command.length.toLocaleString("en-US")} of ${Number(view.chars || 0).toLocaleString("en-US")} chars)</div>`
+    : nothing;
+  const raw = html`<pre><code>${command}</code></pre>`;
   if (!steps) {
-    const cwd = where ? `<div class="activity-command-cwd">${where}</div>` : "";
-    return `<div class="activity-command code-wrap">${desc}${cwd}${raw}${copyButtonHtml("code")}${cut}</div>`;
+    const cwd = where ? html`<div class="activity-command-cwd">${where}</div>` : nothing;
+    return html`<div class="activity-command code-wrap">${desc}${cwd}${raw}${copyButtonTemplate("code")}${cut}</div>`;
   }
   // No "in" tag: the toggle alone, floated beside the first step (an
-  // empty line for it would sit above the steps).
-  const head = (where ? `<div class="activity-command-head"><span class="activity-command-cwd">${where}</span>` : `<div class="activity-command-head bare">`) +
-    `<label class="activity-command-raw" title="Show the command as written"><input type="checkbox">raw</label></div>`;
-  return `<div class="activity-command code-wrap has-steps">${desc}${head}${stepsHtml(steps)}${raw}${copyButtonHtml("code")}${cut}</div>`;
+  // empty line for it would sit above the steps). lit never binds the
+  // checkbox: a user's toggle stays across a redraw.
+  const toggle = html`<label class="activity-command-raw" title="Show the command as written"><input type="checkbox">raw</label>`;
+  const head = where
+    ? html`<div class="activity-command-head"><span class="activity-command-cwd">${where}</span>${toggle}</div>`
+    : html`<div class="activity-command-head bare">${toggle}</div>`;
+  return html`<div class="activity-command code-wrap has-steps">${desc}${head}${stepsTemplate(steps)}${raw}${copyButtonTemplate("code")}${cut}</div>`;
 }
 
 // What an op between two steps reads as: an arrow for "then" (&&, ;, a
@@ -59,26 +62,27 @@ export function commandBlockHtml(view, title = null) {
 const OP_GLYPHS = { "&&": "→", ";": "→", "\n": "→", "|": "→", "|&": "→", "||": "else", "&": "&" };
 const OP_NAMES = { "\n": "new line", "&": "after starting the step before in the background" };
 
-function opHtml(op) {
-  if (!op) return `<span class="step-op"></span>`;
+function opTemplate(op) {
+  if (!op) return html`<span class="step-op"></span>`;
   const glyph = OP_GLYPHS[op] || op;
   const name = OP_NAMES[op] || op;
-  return `<span class="step-op${op === "||" ? " else" : ""}" title="${escapeHtml(name)}">${escapeHtml(glyph)}</span>`;
+  return html`<span class=${`step-op${op === "||" ? " else" : ""}`} title=${name}>${glyph}</span>`;
 }
 
 // A step's redirections to or from nowhere (2>&1, 2>/dev/null, </dev/null),
 // dimmed: plumbing, not what the step does.
 const PLUMBING = /(^|\s)(\d*>&\d+|&>\/dev\/null|\d*>>?\s*\/dev\/null|<\s*\/dev\/null)(?=\s|$)/g;
 
-export function stepTextHtml(text) {
-  let out = "";
+export function stepTextTemplate(text) {
+  const out = [];
   let at = 0;
   for (const m of String(text).matchAll(PLUMBING)) {
     const start = m.index + m[1].length;
-    out += `${escapeHtml(text.slice(at, start))}<span class="step-plumbing">${escapeHtml(m[2])}</span>`;
+    out.push(text.slice(at, start), html`<span class="step-plumbing">${m[2]}</span>`);
     at = start + m[2].length;
   }
-  return out + escapeHtml(String(text).slice(at));
+  out.push(String(text).slice(at));
+  return out;
 }
 
 function heredocLabel({ tag, lines }) {
@@ -88,25 +92,25 @@ function heredocLabel({ tag, lines }) {
 // A step's heredoc chip: the first heredoc's tag and size, and "+N" for
 // the others when the step has more (CommandSteps' heredocs:, as gh api
 // -f body="$(cat <<EOF …)" -f title="$(cat <<EOF …)"), as a title with
-// more steps reads "+N"; the hover lists them all. "" without one.
+// more steps reads "+N"; the hover lists them all. nothing without one.
 export function heredocChip(step) {
-  if (!step?.heredoc) return "";
+  if (!step?.heredoc) return nothing;
   const all = Array.isArray(step.heredocs) && step.heredocs.length > 1 ? step.heredocs : [step.heredoc];
   const more = all.length > 1 ? ` +${all.length - 1}` : "";
   const title = all.length > 1
     ? `${all.length} heredocs: ${all.map(heredocLabel).join(", ")}; their text in the raw command`
     : "a heredoc: its text in the raw command";
-  return `<span class="step-chip heredoc" title="${escapeHtml(title)}">${escapeHtml(heredocLabel(all[0]))}${more}</span>`;
+  return html`<span class="step-chip heredoc" title=${title}>${heredocLabel(all[0])}${more}</span>`;
 }
 
 // The steps as a list: a label as a small heading above its step, the op
 // that links a step to the one before, its text, its limit and heredoc
 // as chips (beside the text, below it when the row is narrow).
-export function stepsHtml(steps) {
+export function stepsTemplate(steps) {
   const items = steps.map((step) => {
-    const label = step.label ? `<li class="step-label">${escapeHtml(step.label)}</li>` : "";
-    const limit = step.limit ? `<span class="step-chip" title="output limited">${escapeHtml(step.limit)}</span>` : "";
-    return `${label}<li class="activity-step">${opHtml(step.op)}<span class="step-body"><code>${stepTextHtml(step.text)}</code>${limit}${heredocChip(step)}</span></li>`;
+    const label = step.label ? html`<li class="step-label">${step.label}</li>` : nothing;
+    const limit = step.limit ? html`<span class="step-chip" title="output limited">${step.limit}</span>` : nothing;
+    return html`${label}<li class="activity-step">${opTemplate(step.op)}<span class="step-body"><code>${stepTextTemplate(step.text)}</code>${limit}${heredocChip(step)}</span></li>`;
   });
-  return `<ol class="activity-steps">${items.join("")}</ol>`;
+  return html`<ol class="activity-steps">${items}</ol>`;
 }