samagotchi 0.62.0 → 0.63.0

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

@@ -10,6 +10,8 @@
 // every path that fills it (a render, a live turn in either view, the
 // turn-end markdown) gets them without knowing about them.
 
+import { html, render } from "./vendor/lit-html.js";
+
 export const COPY_SOURCE_ATTR = "data-copy-source";
 
 // +text+ to the clipboard; true when it got there. Without the Clipboard
@@ -73,26 +75,16 @@ export function showsAnswer(bubble, message, normalize) {
   return normalize(bubble.textContent) === normalize(message.content);
 }
 
-// The attribute that keeps a message's source on its reloaded bubble:
-// rendered html and a prompt (its `>` lines render as quotes) need it; a
-// plain answer's text is its source.
-export function copySourceAttr(message, renderedMarkdown) {
-  if (!renderedMarkdown && message?.role !== "user") return "";
-  const text = copySource(message)
-    .replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-  return ` ${COPY_SOURCE_ATTR}="${text}"`;
-}
-
-const ICON = '<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M10.5 3.5v-.5A1.5 1.5 0 0 0 9 1.5H3A1.5 1.5 0 0 0 1.5 3v6A1.5 1.5 0 0 0 3 10.5h.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>';
+const ICON = html`<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M10.5 3.5v-.5A1.5 1.5 0 0 0 9 1.5H3A1.5 1.5 0 0 0 1.5 3v6A1.5 1.5 0 0 0 3 10.5h.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>`;
 
 const BUBBLES = ".bubble.output:not(.streaming), .bubble.user";
 const CODE = ".bubble.output pre";
 
-// The button as markup, for a builder that returns HTML (a tool row's
+// The button as a lit template, for a templated part (a tool row's
 // command block, command_view.js); the same click handler answers it.
-export function copyButtonHtml(kind) {
+export function copyButtonTemplate(kind) {
   const title = kind === "code" ? "Copy code" : "Copy";
-  return `<button type="button" class="copy-btn copy-${kind}" title="${title}" aria-label="${title}">${ICON}</button>`;
+  return html`<button type="button" class=${`copy-btn copy-${kind}`} title=${title} aria-label=${title}>${ICON}</button>`;
 }
 
 function makeButton(doc, kind) {
@@ -101,7 +93,7 @@ function makeButton(doc, kind) {
   btn.className = `copy-btn copy-${kind}`;
   btn.title = kind === "code" ? "Copy code" : "Copy";
   btn.setAttribute("aria-label", btn.title);
-  btn.innerHTML = ICON;
+  render(ICON, btn);
   return btn;
 }
 

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

@@ -1,10 +1,10 @@
-// What chi's edit/write tools change, as HTML, apart from the DOM. One
+// What chi's edit/write tools change, as lit-html templates. One
 // renderer for both places: the approval card (the dry run, which can also
 // say the edit would fail, or that the file isn't shown) and a tool row's
 // collapsed "diff +3 −1" (what the call really changed). A diff is the
 // server's {text, added, removed, truncated, new_file} (EditPreview).
 
-import { escapeHtml } from "./format.js";
+import { html, nothing } from "./vendor/lit-html.js";
 
 // More lines than this fold behind a "show all N lines" toggle.
 export const DIFF_FOLD_LINES = 20;
@@ -51,34 +51,31 @@ export function diffLineNumbers(lines) {
 }
 
 // A line with a number carries it as data-line (refs.js opens it there).
-function linesHtml(lines, numbers) {
-  return lines.map((line, i) => {
-    const at = numbers[i] > 0 ? ` data-line="${numbers[i]}"` : "";
-    return `<span class="diff-line diff-${diffLineClass(line)}"${at}>${escapeHtml(line) || " "}</span>`;
-  }).join("");
+function linesTemplate(lines, numbers) {
+  return lines.map((line, i) =>
+    html`<span class=${`diff-line diff-${diffLineClass(line)}`} data-line=${numbers[i] > 0 ? numbers[i] : nothing}>${line || " "}</span>`);
 }
 
 // @param diff an EditPreview: a diff, or {error} / {skipped}
-// @return {string} HTML; "" for none
-export function diffHtml(diff, { fold = DIFF_FOLD_LINES } = {}) {
-  if (!diff || typeof diff !== "object") return "";
-  if (diff.error) return `<div class="diff-note warn">this edit would fail: ${escapeHtml(diff.error)}</div>`;
-  if (diff.skipped) return `<div class="diff-note">diff not shown: ${escapeHtml(diff.skipped)}</div>`;
+// @return a lit template; nothing for none
+export function diffTemplate(diff, { fold = DIFF_FOLD_LINES } = {}) {
+  if (!diff || typeof diff !== "object") return nothing;
+  if (diff.error) return html`<div class="diff-note warn">this edit would fail: ${diff.error}</div>`;
+  if (diff.skipped) return html`<div class="diff-note">diff not shown: ${diff.skipped}</div>`;
   const text = String(diff.text ?? "");
-  if (!text) return `<div class="diff-note">no change</div>`;
+  if (!text) return html`<div class="diff-note">no change</div>`;
   const lines = text.split("\n");
-  const head = diff.new_file ? `<div class="diff-note">new file</div>` : "";
+  const head = diff.new_file ? html`<div class="diff-note">new file</div>` : nothing;
   const numbers = diffLineNumbers(lines);
-  const shown = `<pre class="diff"><code>${linesHtml(lines.slice(0, fold), numbers.slice(0, fold))}</code></pre>`;
-  if (lines.length <= fold) return head + shown;
+  const shown = html`<pre class="diff"><code>${linesTemplate(lines.slice(0, fold), numbers.slice(0, fold))}</code></pre>`;
+  if (lines.length <= fold) return html`${head}${shown}`;
   // The rest opens under the first lines; the toggle hides once open (CSS).
-  const rest = `<details class="diff-more"><summary>show all ${lines.length} lines</summary>` +
-    `<pre class="diff"><code>${linesHtml(lines.slice(fold), numbers.slice(fold))}</code></pre></details>`;
-  return head + shown + rest;
+  return html`${head}${shown}<details class="diff-more"><summary>show all ${lines.length} lines</summary><pre class="diff"><code>${linesTemplate(lines.slice(fold), numbers.slice(fold))}</code></pre></details>`;
 }
 
-// A tool row's collapsed diff (closed by default).
-export function activityDiffHtml(diff) {
-  if (!diff || typeof diff !== "object" || diff.error || diff.skipped) return "";
-  return `<details class="activity-diff"><summary>${escapeHtml(diffSummary(diff))}</summary>${diffHtml(diff)}</details>`;
+// A tool row's collapsed diff (closed by default: lit never binds its
+// open, so a user's toggle stays across a redraw).
+export function activityDiffTemplate(diff) {
+  if (!diff || typeof diff !== "object" || diff.error || diff.skipped) return nothing;
+  return html`<details class="activity-diff"><summary>${diffSummary(diff)}</summary>${diffTemplate(diff)}</details>`;
 }

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

@@ -10,21 +10,6 @@ export function escapeHtml(value) {
   );
 }
 
-export function messageBodyHtml(message) {
-  if (message?.role === "assistant" && typeof message.html === "string") {
-    return { body: message.html, renderedMarkdown: true };
-  }
-  if (message?.role === "user") return { body: userBodyHtml(message.content), renderedMarkdown: false };
-  return { body: escapeHtml(message?.content), renderedMarkdown: false };
-}
-
-// A context note (background the user or another session pushed in; the
-// model reads it, nobody asked it anything): who sent it, then its text.
-export function noteHtml(note) {
-  const from = note?.label ? `note from ${note.label}` : "note";
-  return `<div class="note-line">${escapeHtml(from)}</div><div class="note-text">${escapeHtml(note?.content ?? "")}</div>`;
-}
-
 // Who a steer names as its sender: a plugin's own label, chi's sender ids
 // in words (the TUI's Formatting#steer_sender agrees;
 // spec/shared/labels_matrix.json). "": no one named.
@@ -41,39 +26,6 @@ export function sourceLabel(source) {
   return source === "delegate_report" ? steerSender(source) : null;
 }
 
-// A plugin's steer (a nudge put into the running turn): one line that
-// names who nudged the model, its text collapsed under it. +bubble+: on its
-// own between bubbles (no step holds it), not a row of a step.
-export function steerRowHtml({ source, text } = {}, { bubble = false } = {}) {
-  const sender = steerSender(source);
-  const who = sender ? `${sender} nudged the model` : "nudged the model";
-  return `<details class="${bubble ? "bubble " : ""}steer-row"><summary>${escapeHtml(who)}</summary>` +
-    `<div class="steer-text">${escapeHtml(text ?? "")}</div></details>`;
-}
-
-// A user message's body: runs of `>` lines become <blockquote>s, the rest
-// stays escaped text. The bubble is pre-wrap, so the blank lines around a
-// quote are dropped (the blockquote's margin spaces it instead).
-export function userBodyHtml(content) {
-  const text = String(content ?? "").replace(/\r\n?/g, "\n");
-  const blocks = [];
-  for (const line of text.split("\n")) {
-    const m = /^ {0,3}> ?(.*)$/.exec(line);
-    const kind = m ? "quote" : "text";
-    const last = blocks[blocks.length - 1];
-    if (last?.kind === kind) last.lines.push(m ? m[1] : line);
-    else blocks.push({ kind, lines: [m ? m[1] : line] });
-  }
-  if (!blocks.some((b) => b.kind === "quote")) return escapeHtml(content ?? "");
-  return blocks
-    .map((b) => {
-      if (b.kind === "quote") return `<blockquote>${escapeHtml(b.lines.join("\n"))}</blockquote>`;
-      const body = b.lines.join("\n").replace(/^\s*\n/, "").replace(/\n\s*$/, "");
-      return body.trim() ? escapeHtml(body) : "";
-    })
-    .join("");
-}
-
 // The piece to append to a streamed body that holds +sofar+: while the body
 // is empty its leading whitespace is dropped (a model's thinking starts with
 // the "\n" after <think>, which would render as an empty first line).

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

@@ -1,8 +1,8 @@
 // Images in the web UI: pasted or dropped into the composer as chips, sent
 // with a turn as refs (uploaded first), shown as thumbnails in the bubbles
 // and tool rows, opened full size in a lightbox. No DOM here beyond what the
-// callers pass, so it runs under `node --test`.
-import { escapeHtml } from "./format.js";
+// callers pass (the templates are lit-html's), so it runs under `node --test`.
+import { html, nothing } from "./vendor/lit-html.js";
 
 // The image files a paste's or drop's DataTransfer carries.
 export function imageFiles(dataTransfer) {
@@ -40,29 +40,25 @@ export function imageUrl(sessionId, ref) {
     .join("/")}`;
 }
 
-// Thumbnails for a bubble or a tool row; "" for none. `src` may be given
-// (a blob: URL while the upload is on its way).
-export function thumbsHtml(sessionId, images) {
+// Thumbnails for a bubble or a tool row; nothing for none. `src` may be
+// given (a blob: URL while the upload is on its way). A redraw with the
+// same images keeps the <img> elements (no reload).
+export function thumbsTemplate(sessionId, images) {
   const list = (images || []).filter((i) => i && (i.src || i.file));
-  if (!list.length) return "";
+  if (!list.length) return nothing;
   const thumbs = list.map((img) => {
     const src = img.src || imageUrl(sessionId, img);
     const size = img.width && img.height ? ` ${img.width}×${img.height}` : "";
     const title = `${img.name || "image"}${size}`;
-    return `<img class="thumb" src="${escapeHtml(src)}" alt="${escapeHtml(title)}" title="${escapeHtml(title)}" loading="lazy">`;
+    return html`<img class="thumb" src=${src} alt=${title} title=${title} loading=${"lazy"}>`;
   });
-  return `<div class="thumbs">${thumbs.join("")}</div>`;
+  return html`<div class="thumbs">${thumbs}</div>`;
 }
 
 // The composer's chips: a thumbnail, the name and a remove button each.
-export function chipsHtml(chips) {
-  return (chips || [])
-    .map(
-      (c, i) =>
-        `<span class="chip" data-index="${i}"><img src="${escapeHtml(c.src)}" alt=""><span class="chip-name">${escapeHtml(c.name)}</span>` +
-        `<button type="button" class="chip-remove" data-index="${i}" aria-label="remove ${escapeHtml(c.name)}">×</button></span>`,
-    )
-    .join("");
+export function chipsTemplate(chips) {
+  return (chips || []).map((c, i) =>
+    html`<span class="chip" data-index=${i}><img src=${c.src} alt=""><span class="chip-name">${c.name}</span><button type="button" class="chip-remove" data-index=${i} aria-label=${`remove ${c.name}`}>×</button></span>`);
 }
 
 // The {file, name} refs a turn names.

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

@@ -13,7 +13,8 @@
 // card closes on the continue_resolved every client gets.
 
 import { dismissQuestion, sendAnswer, sendCommand } from "./data.js";
-import { diffHtml } from "./diff_view.js";
+import { diffTemplate } from "./diff_view.js";
+import { render } from "./vendor/lit-html.js";
 import {
   answerErrorText, approvalAllowed, approvalView, CONTINUE_REASON_PLACEHOLDER, deniedReason, isContinue, keepsAskingText,
   nextCardAction, relayedToView, resultText, summaryText,
@@ -301,7 +302,7 @@ export function createQuestionCards({
     if (view.preview) {
       const diff = doc.createElement("div");
       diff.className = "approval-diff";
-      diff.innerHTML = diffHtml(view.preview);
+      render(diffTemplate(view.preview), diff);
       box.appendChild(diff);
     }
     for (const [cls, label, text] of [["approval-where", "in", view.where], ["approval-why", "why", view.why]]) {

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

@@ -1,10 +1,10 @@
-// A read row's output as the file's lines, numbered, apart from the DOM.
+// A read row's output as the file's lines, numbered (a lit-html template).
 // Only when the output is the file text as-is: each numbered line is a
 // ref's line (refs.js opens the row's file there). The row's preview
 // (turn_html.js) strips any "[tag] " and cuts at 300 chars; numbering
 // needs the text exactly as read, so it is drawn on its own, closed.
 
-import { escapeHtml } from "./format.js";
+import { html, nothing } from "./vendor/lit-html.js";
 
 // What follows one of these isn't the file's next line: a ToolRunner cap
 // ("[cut: …]"), a head/tail preview's gap ("[... omitted …]") or the note
@@ -58,19 +58,20 @@ export function readLines(row) {
   return out;
 }
 
-// A read row's numbered lines behind a closed toggle ("lines 40–60"); ""
-// when its output isn't the file as-is.
-export function readLinesHtml(row) {
+// A read row's numbered lines behind a closed toggle ("lines 40–60");
+// nothing when its output isn't the file as-is. lit never binds its open:
+// a user's toggle stays across a redraw.
+export function readLinesTemplate(row) {
   const lines = readLines(row);
   const numbered = lines?.filter((l) => l.line !== null) || [];
-  if (!numbered.length) return "";
+  if (!numbered.length) return nothing;
   const first = numbered[0].line;
   const last = numbered.at(-1).line;
   const label = first === last ? `line ${first}` : `lines ${first}–${last}`;
   // A blank line of the file holds no text, only a <br>: an empty block
   // drops out of a copied selection, a space would be copied as one.
   const spans = lines.map(({ text, line }) => line === null
-    ? `<span class="read-line read-meta">${escapeHtml(text)}</span>`
-    : `<span class="read-line" data-line="${line}">${escapeHtml(text) || "<br>"}</span>`).join("");
-  return `<details class="activity-read"><summary>${label}</summary><pre class="read-lines"><code>${spans}</code></pre></details>`;
+    ? html`<span class="read-line read-meta">${text}</span>`
+    : html`<span class="read-line" data-line=${line}>${text || html`<br>`}</span>`);
+  return html`<details class="activity-read"><summary>${label}</summary><pre class="read-lines"><code>${spans}</code></pre></details>`;
 }

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

@@ -1,6 +1,7 @@
 // The page's scope: ?dir=<folder> shows that folder's project (`chi web` in
 // a repo opens it so); no dir shows every session. The hash routes
 // (#/s/<id>, #/sessions) work in either.
+import { html, nothing } from "./vendor/lit-html.js";
 
 // The ?dir= folder in a location.search string, or null.
 export function scopeDir(search) {
@@ -43,3 +44,25 @@ export function cardFolder(workingDirectory, projectName) {
   if (!folder) return "";
   return folder === projectName ? "" : folder;
 }
+
+// The header's scope chip: "<project> · all" in a project view (all links
+// to the same place without ?dir); "all projects" otherwise, with a link
+// back to the project it came from and where a new chat starts on the
+// start page. +scope+: { dir, projectName, projectDir, serverDir, backDir,
+// backName }; +error+: why the ?dir= folder can't be shown; +where+:
+// () => { hash, search } (the page's location, read again at a click: the
+// links follow an open session or the all-sessions view).
+export function scopeTemplate(scope, { error = null, where = () => ({ hash: "", search: "" }) } = {}) {
+  const at = where();
+  const allHref = () => allScopeHref(where().hash, scope.dir, where().search);
+  const all = html`<a class="scope-all" href=${allScopeHref(at.hash, scope.dir, at.search)} title=${"Sessions of every project"} @click=${(e) => { e.currentTarget.href = allHref(); }}>all</a>`;
+  if (error) return html`<span class="scope-name error" title=${error}>folder not found</span>${all}`;
+  if (scope.projectName) return html`<span class="scope-name" title=${`Sessions of ${scope.projectDir}`}>${scope.projectName}</span>${all}`;
+  const dir = scope.dir || scope.serverDir;
+  const backHref = () => projectScopeHref(scope.backDir, where().hash, where().search);
+  const back = scope.backName
+    ? html`<a class="scope-all scope-back" href=${projectScopeHref(scope.backDir, at.hash, at.search)} title=${`Sessions of ${scope.backName} only`} @click=${(e) => { e.currentTarget.href = backHref(); }}>← ${scope.backName}</a>`
+    : nothing;
+  const newChat = dir ? html`<span class="scope-where" title=${`New chats start in ${dir}`}>new chat in<span class="path"><bdi>${dir}</bdi></span></span>` : nothing;
+  return html`<span class="scope-name" title="Sessions of every project">all projects</span>${back}${newChat}`;
+}

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

@@ -49,13 +49,6 @@ export function cancelLineText(reason, by) {
   return `${STOP_MARK} canceled` + (reason ? ` (${CANCEL_REASONS[reason] || reason})` : "");
 }
 
-// A re-rendered turn's cancel line (a .bubble.cancel.stopped), or "" when
-// the turn record is not a canceled one.
-export function cancelLineHtml(record, escape) {
-  if (record?.status !== "canceled") return "";
-  return `<div class="${STOPPED_LINE_CLASS}">${escape(cancelLineText(record.cancellation_reason, record.cancelled_by))}</div>`;
-}
-
 export function elapsedSince(startedAt, now = Date.now()) {
   const started = Date.parse(startedAt);
   const current = Number(now);

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

@@ -1,15 +1,17 @@
-// The turn's pieces as HTML, one builder for the live page and a reload:
-// a tool row, a prompt bubble and the notice of a turn with no answer. The
-// live page makes its elements from the same markup a reload writes
-// (htmlElement), so the two can't drift apart. Pure but htmlElement: `node --test` covers it.
+// The turn's pieces as lit-html templates, one for the live page and a
+// reload: a tool row, a prompt bubble, a note, a steer, the notice of a
+// turn with no answer. The live page renders the same template a reload
+// does (elementOf, or its own lit root for a tool row), so the two can't
+// drift apart. `node --test` covers it (on the happy-dom shim).
 import { toolName } from "./activity.js";
-import { commandBlockHtml, rowHover } from "./command_view.js";
-import { copySourceAttr } from "./copy.js";
-import { activityDiffHtml } from "./diff_view.js";
-import { escapeHtml, userBodyHtml } from "./format.js";
-import { refAttrs, rowTitleRef } from "./refs.js";
-import { readLinesHtml } from "./read_view.js";
-import { formatDuration } from "./timing.js";
+import { html, nothing, render } from "./vendor/lit-html.js";
+import { commandBlockTemplate, rowHover } from "./command_view.js";
+import { copySource } from "./copy.js";
+import { activityDiffTemplate } from "./diff_view.js";
+import { steerSender } from "./format.js";
+import { rowTitleRef } from "./refs.js";
+import { readLinesTemplate } from "./read_view.js";
+import { STOPPED_LINE_CLASS, cancelLineText, formatDuration } from "./timing.js";
 import { emptyAnswerLine } from "./turn_events.js";
 
 // A row's status (live, or a saved tool record's on reload): running,
@@ -31,12 +33,14 @@ export function statusParts(status, { noMatch = false } = {}) {
   return { cls, label, word: cls === "ok" || cls === "running" ? "" : label };
 }
 
-function statusMarkHtml({ cls, label }) {
-  return `<span class="activity-status ${cls}" role="img" aria-label="${label}" title="${label}"></span>`;
+// role is bound too: lit sets bound attributes after the static ones, and
+// the markup keeps the order a reload wrote before.
+function statusMarkTemplate({ cls, label }) {
+  return html`<span class="activity-status ${cls}" role=${"img"} aria-label=${label} title=${label}></span>`;
 }
 
-function statusWordHtml({ cls, word, wordCls }) {
-  return word ? `<span class="activity-state ${wordCls || cls}">${word}</span>` : "";
+function statusWordTemplate({ cls, word, wordCls }) {
+  return word ? html`<span class="activity-state ${wordCls || cls}">${word}</span>` : nothing;
 }
 
 // A reloaded row's ✂ mark: what an LLM context edit saved on its output
@@ -62,11 +66,11 @@ function compactTokens(n) {
   return n >= 1000 ? `${(n / 1000).toFixed(1)}k tokens` : `${n} tokens`;
 }
 
-function llmEditHtml(row) {
+function llmEditTemplate(row) {
   const line = llmEditLine(row.edit);
-  if (!line) return "";
+  if (!line) return nothing;
   const hover = `${row.tool_id ? `${row.tool_id}: ` : ""}${line}\nThe model is sent this instead of the output; the session keeps it.`;
-  return `<div class="activity-edit" title="${escapeHtml(hover)}">${escapeHtml(line)}</div>`;
+  return html`<div class="activity-edit" title=${hover}>${line}</div>`;
 }
 
 // A tool row: its status mark, tool, title (else params; the full command,
@@ -76,31 +80,35 @@ function llmEditHtml(row) {
 // the rest on hover; a read of the file as-is also its numbered lines,
 // closed: read_view.js), its images (+thumbs+(images) draws them) and an
 // edit's collapsed diff, and a reloaded row's ✂ mark above its output. A
-// part with nothing to say is left out.
-export function toolRowHtml(row, { thumbs = () => "" } = {}) {
-  return `<div class="activity-row" data-key="${escapeHtml(row.key)}">${toolRowInnerHtml(row, { thumbs })}</div>`;
+// part with nothing to say is left out. A reload renders toolRowTemplate;
+// the live view renders toolRowInnerTemplate into its own row element
+// (turn_view.js), again on each event: lit writes only what changed, so a
+// part the user toggled (the raw command, the diff, the read lines) stays.
+// +stop+: the live row's stop-task button (a node), after the title.
+export function toolRowTemplate(row, opts = {}) {
+  return html`<div class="activity-row" data-key=${row.key}>${toolRowInnerTemplate(row, opts)}</div>`;
 }
 
-export function toolRowInnerHtml(row, { thumbs = () => "" } = {}) {
+export function toolRowInnerTemplate(row, { thumbs = () => nothing, stop = nothing } = {}) {
   const shown = row.title || row.params;
-  const hover = rowHover(row) ? ` title="${escapeHtml(rowHover(row))}"` : "";
+  const hover = rowHover(row);
   // A row with a ref (a file tool's file, else a plugin tool's first ref)
   // carries it on its title, which opens it, and its diff lines open it at
   // their line (refs.js; bindRowRefs binds a plugin's data to the title).
-  const ref = shown ? refAttrs(rowTitleRef(row)) : "";
-  const params = shown ? `<span class="activity-params${ref ? " ref" : ""}"${hover}${ref}>${escapeHtml(shown)}</span>` : "";
+  const ref = shown ? rowTitleRef(row) : null;
+  const attr = (value) => (value ? String(value) : nothing);
+  const params = shown
+    ? html`<span class=${`activity-params${ref?.kind ? " ref" : ""}`} title=${hover || nothing} data-ref-kind=${attr(ref?.kind)} data-ref-path=${attr(ref?.kind && ref.path)} data-ref-line=${attr(ref?.kind && ref.line)} data-ref-end-line=${attr(ref?.kind && ref.end_line)}>${shown}</span>`
+    : nothing;
   // The name the model called the tool by when it was an alias's, dim.
-  const alias = row.called_as ? `<span class="activity-alias">(called as ${escapeHtml(row.called_as)})</span>` : "";
+  const alias = row.called_as ? html`<span class="activity-alias">(called as ${row.called_as})</span>` : nothing;
   const duration = formatDuration(row.duration_ms);
   const full = row.status === "running" ? "" : String(row.output || "").replace(/^\[[^\]]*\]\s*/, "");
   const output = full
-    ? `<div class="activity-output" title="${escapeHtml(full)}">${escapeHtml(full.length > 300 ? `${full.slice(0, 300)}…` : full)}</div>`
-    : "";
+    ? html`<div class="activity-output" title=${full}>${full.length > 300 ? `${full.slice(0, 300)}…` : full}</div>`
+    : nothing;
   const status = statusParts(row.status, { noMatch: !!row.no_match });
-  return `${statusMarkHtml(status)}<span class="activity-tool">${escapeHtml(toolName(row))}</span>${params}${alias}${statusWordHtml(status)}` +
-    `${duration ? `<span class="activity-duration">${escapeHtml(duration)}</span>` : ""}` +
-    `${commandBlockHtml(row.view, row.title)}${llmEditHtml(row)}${output}${output ? readLinesHtml(row) : ""}` +
-    `${row.images?.length ? thumbs(row.images) : ""}${row.diff ? activityDiffHtml(row.diff) : ""}`;
+  return html`${statusMarkTemplate(status)}<span class="activity-tool">${toolName(row)}</span>${params}${stop}${alias}${statusWordTemplate(status)}${duration ? html`<span class="activity-duration">${duration}</span>` : nothing}${commandBlockTemplate(row.view, row.title)}${llmEditTemplate(row)}${output}${full ? readLinesTemplate(row) : nothing}${row.images?.length ? thumbs(row.images) : nothing}${row.diff ? activityDiffTemplate(row.diff) : nothing}`;
 }
 
 // A prompt bubble's states and their badges: queued (waiting for its
@@ -108,8 +116,8 @@ export function toolRowInnerHtml(row, { thumbs = () => "" } = {}) {
 // gave it back). Any other state ("started", none) is a plain bubble.
 export const BADGES = { queued: "queued", steered: "steered", failed: "failed" };
 
-export function stateBadgeHtml(state) {
-  return BADGES[state] ? `<span class="state-badge">${escapeHtml(BADGES[state])}</span>` : "";
+export function stateBadgeTemplate(state) {
+  return BADGES[state] ? html`<span class="state-badge">${BADGES[state]}</span>` : nothing;
 }
 
 // A `!cmd`'s saved user message (the worker appends "!(<command>)\n<output>"
@@ -128,45 +136,97 @@ export function shellCommandMessage(content) {
 // A `!cmd`'s history bubble: the same markup the live page draws for a
 // command (app.js's drawCommandBubble): the line, the output in a
 // pre.command-output.
-export function commandBubbleHtml({ line, text }) {
-  const body = text ? `<pre class="command-output">${escapeHtml(text)}</pre>` : "";
-  return `<div class="bubble command"><div class="command-line">${escapeHtml(line)}</div>${body}</div>`;
+export function commandBubbleTemplate({ line, text }) {
+  const body = text ? html`<pre class="command-output">${text}</pre>` : nothing;
+  return html`<div class="bubble command"><div class="command-line">${line}</div>${body}</div>`;
+}
+
+// A user message's body: runs of `>` lines become <blockquote>s, the rest
+// stays text. The bubble is pre-wrap, so the blank lines around a quote
+// are dropped (the blockquote's margin spaces it instead).
+export function userBodyTemplate(content) {
+  const text = String(content ?? "").replace(/\r\n?/g, "\n");
+  const blocks = [];
+  for (const line of text.split("\n")) {
+    const m = /^ {0,3}> ?(.*)$/.exec(line);
+    const kind = m ? "quote" : "text";
+    const last = blocks[blocks.length - 1];
+    if (last?.kind === kind) last.lines.push(m ? m[1] : line);
+    else blocks.push({ kind, lines: [m ? m[1] : line] });
+  }
+  if (!blocks.some((b) => b.kind === "quote")) return String(content ?? "");
+  return blocks.map((b) => {
+    if (b.kind === "quote") return html`<blockquote>${b.lines.join("\n")}</blockquote>`;
+    const body = b.lines.join("\n").replace(/^\s*\n/, "").replace(/\n\s*$/, "");
+    return body.trim() ? body : nothing;
+  });
+}
+
+// An answer's bubble (+cls+: a report reply's; +at+: its message's index,
+// data-answer-at): an assistant's rendered markdown (the server's html,
+// sanitized there) set as it is, as the live turn end sets it
+// (answer_refs.js applyFinalAnswer), else its text, set whole (no lit
+// markers inside: the bubble's nodes are the live one's). Its markdown
+// source is kept for the copy button when it shows rendered html.
+export function answerBubbleTemplate(message, { cls = "", at = null } = {}) {
+  const rendered = message?.role === "assistant" && typeof message.html === "string";
+  const user = !rendered && message?.role === "user";
+  const klass = `bubble output${cls}${rendered ? " markdown" : ""}`;
+  const answerAt = at ?? nothing;
+  const source = rendered || user ? copySource(message) : nothing;
+  if (rendered) return html`<div class=${klass} data-answer-at=${answerAt} data-copy-source=${source} .innerHTML=${message.html}></div>`;
+  if (user) return html`<div class=${klass} data-answer-at=${answerAt} data-copy-source=${source}>${userBodyTemplate(message.content)}</div>`;
+  return html`<div class=${klass} data-answer-at=${answerAt} data-copy-source=${source} .textContent=${String(message?.content ?? "")}></div>`;
+}
+
+// A context note's bubble (background the user or another session pushed
+// in; the model reads it, nobody asked it anything): who sent it, then its
+// text.
+export function noteBubbleTemplate(note) {
+  const from = note?.label ? `note from ${note.label}` : "note";
+  return html`<div class="bubble note"><div class="note-line">${from}</div><div class="note-text">${note?.content ?? ""}</div></div>`;
+}
+
+// A plugin's steer (a nudge put into the running turn): one line that
+// names who nudged the model, its text collapsed under it. +bubble+: on its
+// own between bubbles (no step holds it), not a row of a step.
+export function steerRowTemplate({ source, text } = {}, { bubble = false } = {}) {
+  const sender = steerSender(source);
+  const who = sender ? `${sender} nudged the model` : "nudged the model";
+  return html`<details class=${`${bubble ? "bubble " : ""}steer-row`}><summary>${who}</summary><div class="steer-text">${text ?? ""}</div></details>`;
 }
 
 // A user's line: who sent it (+label+, a delegate report's or another
 // client's), its body (`>` lines as quotes) and +thumbs+ (its images'
-// markup), its state's badge. +message+: { content, display } (the copy
+// template), its state's badge. +message+: { content, display } (the copy
 // source keeps the text as written). +step+: the step that read a line
 // merged mid-turn (a reload's; a resolved question goes before it).
 // The live page's own: +own+ (this tab sent it), +enqueuedId+ and +key+
 // (its normalized text: an echo waiting for its id is matched by it).
-export function userBubbleHtml(message, { label = null, state = null, step = null, thumbs = "", own = false, enqueuedId = null, key = null } = {}) {
+export function userBubbleTemplate(message, { label = null, state = null, step = null, thumbs = nothing, own = false, enqueuedId = null, key = null } = {}) {
   const named = BADGES[state] ? state : null;
-  const attrs = [
-    `class="bubble user${named ? ` ${named}` : ""}"`,
-    named ? `data-user-state="${named}"` : "",
-    step ? `data-step="${Number(step)}"` : "",
-  ].filter(Boolean).join(" ");
-  const live = [
-    key !== null ? ` data-user-content="${escapeHtml(key)}"` : "",
-    own ? ' data-own="1"' : "",
-    enqueuedId ? ` data-enqueued-id="${escapeHtml(enqueuedId)}"` : "",
-  ].join("");
-  const from = label ? `<span class="origin-label">${escapeHtml(label)}</span>` : "";
-  return `<div ${attrs}${copySourceAttr({ ...message, role: "user" }, false)}${live}>${from}` +
-    `<div class="user-message">${userBodyHtml(message?.content)}${thumbs}</div>${stateBadgeHtml(named)}</div>`;
+  const from = label ? html`<span class="origin-label">${label}</span>` : nothing;
+  return html`<div class=${`bubble user${named ? ` ${named}` : ""}`} data-user-state=${named || nothing} data-step=${step ? Number(step) : nothing} data-copy-source=${copySource({ ...message, role: "user" })} data-user-content=${key !== null ? key : nothing} data-own=${own ? "1" : nothing} data-enqueued-id=${enqueuedId || nothing}>${from}<div class="user-message">${userBodyTemplate(message?.content)}${thumbs}</div>${stateBadgeTemplate(named)}</div>`;
 }
 
 // The notice of a turn that ended with no answer (the server's
 // empty_answer item, turn_summary.empty_answer live): a muted row like the
 // loop's retry row, where the answer would be.
-export function emptyAnswerHtml(item) {
-  return `<div class="bubble hook-notice empty-answer">${escapeHtml(emptyAnswerLine(item))}</div>`;
+export function emptyAnswerTemplate(item) {
+  return html`<div class="bubble hook-notice empty-answer">${emptyAnswerLine(item)}</div>`;
+}
+
+// A re-rendered turn's cancel line (a .bubble.cancel.stopped, as live's
+// addEndBubble), nothing when the turn record is not a canceled one.
+export function cancelLineTemplate(record) {
+  if (record?.status !== "canceled") return nothing;
+  return html`<div class=${STOPPED_LINE_CLASS}>${cancelLineText(record.cancellation_reason, record.cancelled_by)}</div>`;
 }
 
-// The element +html+ (one top-level element) describes.
-export function htmlElement(html) {
-  const template = document.createElement("template");
-  template.innerHTML = html;
-  return template.content.firstElementChild;
+// +template+'s one top-level element, rendered once (the live page's
+// bubbles: their classes and badge change by hand after this).
+export function elementOf(template) {
+  const frag = document.createDocumentFragment();
+  render(template, frag);
+  return frag.firstElementChild;
 }