samagotchi 0.62.0 → 0.64.0

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;
 }

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

@@ -222,13 +222,23 @@ export function genLabelParts(gen) {
   if (line) return { head: cut(line), calls, repeats: true };
   if (first?.title) return { head: cut(`${toolName(first)} ${first.title}`), calls, repeats: true };
   if (gen.tools.length) {
-    const names = [...new Set(gen.tools.map(toolName))];
-    const head = `working with ${names.slice(0, LABEL_TOOLS).join(", ")}${names.length > LABEL_TOOLS ? ", …" : ""}`;
-    return { head, calls, repeats: false };
+    // A plugin label that is a verb ("echoing", the default "calling
+    // tool") is the head itself when every call has one; among other
+    // tools it gives way to its tool's name ("working with read, echo").
+    const verbs = gen.tools.every(isVerbLabel);
+    const names = [...new Set(gen.tools.map((r) => (verbs || !isVerbLabel(r) ? toolName(r) : r.tool || "tool")))];
+    const list = `${names.slice(0, LABEL_TOOLS).join(", ")}${names.length > LABEL_TOOLS ? ", …" : ""}`;
+    return { head: verbs ? list : `working with ${list}`, calls, repeats: false };
   }
   return { head: "thinking", calls: "", repeats: false };
 }
 
+// A plugin tool's label that reads as a verb (its first word ends in
+// "ing": "echoing", "calling tool"), not as a name ("chrome: screenshot").
+function isVerbLabel(row) {
+  return /^[a-z]+ing\b/i.test(String(row?.label || ""));
+}
+
 // A step that said something (its text is not the turn's answer): a row of
 // its own in a finished block's outline.
 export function isNarrated(gen) {

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

@@ -24,13 +24,15 @@ import { html, nothing, render } from "./vendor/lit-html.js";
 import { setAnswerRefs } from "./answer_refs.js";
 import { bindRowRefs } from "./refs.js";
 import { leavesBlock } from "./card.js";
-import { copySourceAttr } from "./copy.js";
-import { escapeHtml, failedTurnText, messageBodyHtml, noteHtml, normalize, sourceLabel, steerRowHtml } from "./format.js";
-import { thumbsHtml } from "./images.js";
+import { failedTurnText, normalize, sourceLabel } from "./format.js";
+import { thumbsTemplate } from "./images.js";
 import { shouldFollowScroll } from "./scroll.js";
 import { hookNoticeLabel } from "./turn_events.js";
-import { commandBubbleHtml, emptyAnswerHtml, htmlElement, shellCommandMessage, toolRowHtml, toolRowInnerHtml, userBubbleHtml } from "./turn_html.js";
-import { cancelLineHtml, formatDuration, turnGroups, turnTimingText } from "./timing.js";
+import {
+  answerBubbleTemplate, cancelLineTemplate, commandBubbleTemplate, elementOf, emptyAnswerTemplate, noteBubbleTemplate, shellCommandMessage,
+  steerRowTemplate, toolRowInnerTemplate, toolRowTemplate, userBubbleTemplate,
+} from "./turn_html.js";
+import { formatDuration, turnGroups, turnTimingText } from "./timing.js";
 import { createSentenceFeed } from "./sentences.js";
 import { createTicker } from "./thinking_ticker.js";
 import * as model from "./turn_model.js";
@@ -110,13 +112,6 @@ function nodesOf(template) {
   return frag;
 }
 
-// +markup+ (any HTML string) as nodes.
-function rawNodes(markup) {
-  const t = document.createElement("template");
-  t.innerHTML = markup;
-  return t.content;
-}
-
 // ---- A finished block's outline ----
 
 // A finished block as its outline (turn_model.js outlineRuns of +gens+, its
@@ -170,43 +165,16 @@ export function outlineBlock(blockEl, gens) {
   return true;
 }
 
-// Reloaded tool rows (turn_html.js toolRowHtml) as nodes, each row's
+// Reloaded tool rows (turn_html.js toolRowTemplate) as nodes, each row's
 // plugin refs bound to its title (refs.js bindRowRefs).
 function rowNodes(rows, thumbs) {
-  const nodes = rawNodes(rows.map((r) => toolRowHtml(r, { thumbs })).join(""));
+  const nodes = nodesOf(rows.map((r) => toolRowTemplate(r, { thumbs })));
   [...nodes.children].forEach((el, i) => bindRowRefs(el, rows[i]));
   return nodes;
 }
 
 // ---- The live view ----
 
-// The parts of a drawn tool row a user may have changed (the command's
-// raw toggle, an opened diff) or that never change once there (the
-// thumbs): a redraw keeps them as they are.
-const KEPT_PARTS = ["activity-command", "activity-diff", "activity-read", "thumbs"];
-
-const childWith = (el, cls) => [...el.children].find((c) => c.classList.contains(cls));
-
-// A live tool row drawn again from its activity row (status, title,
-// output): the reloaded row's markup (toolRowInnerHtml), the kept parts
-// and the stop-task button carried over. +html+ is that markup.
-function redrawRow(el, markup) {
-  const fresh = htmlElement(`<div>${markup}</div>`);
-  for (const cls of KEPT_PARTS) {
-    const old = childWith(el, cls);
-    const drawn = childWith(fresh, cls);
-    if (old && drawn) drawn.replaceWith(old);
-  }
-  const stop = childWith(el, "task-stop");
-  el.replaceChildren(...fresh.childNodes);
-  if (stop) rowAnchor(el).after(stop);
-}
-
-// Where a row's stop-task button goes: after its title (else its tool).
-function rowAnchor(el) {
-  return childWith(el, "activity-params") || childWith(el, "activity-tool");
-}
-
 // The container seams (the stage view composes this view, stage_view.js):
 //   blockHost(el)  puts the turn's block in the page (default: the history);
 //   follow()       keeps the live part in view (default: the history's
@@ -485,10 +453,11 @@ export function createTurnView({
     onChange();
   }
 
-  // A tool row is the reloaded row's markup (turn_html.js toolRowHtml),
-  // drawn again when an event changed it.
-  const rowHtml = new WeakMap();
-  const rowThumbs = (images) => thumbsHtml(sessionId(), images);
+  // A live tool row is its own element, the reloaded row's template
+  // (turn_html.js toolRowInnerTemplate) rendered into it on each event.
+  const rowThumbs = (images) => thumbsTemplate(sessionId(), images);
+  // A row element → its stop-task button (syncTaskStop).
+  const rowStops = new WeakMap();
 
   // A row, notice or card into the step's activity; a step that wrote no
   // narration before it drops the "…".
@@ -504,43 +473,48 @@ export function createTurnView({
     apply(r);
     const entry = genEls.get(r.gen);
     let el = entry.rows.get(r.row.key);
-    const inner = toolRowInnerHtml(r.row, { thumbs: rowThumbs });
     if (!el) {
-      el = htmlElement(toolRowHtml(r.row, { thumbs: rowThumbs }));
-      bindRowRefs(el, r.row);
-      rowHtml.set(el, inner);
+      el = document.createElement("div");
+      el.className = "activity-row";
+      el.dataset.key = r.row.key;
       entry.rows.set(r.row.key, el);
+      drawRow(el, r.row);
       addItem(entry, el);
     } else {
       if (!r.gen.text) entry.placeholder = false;
-      if (rowHtml.get(el) !== inner) {
-        redrawRow(el, inner);
-        bindRowRefs(el, r.row);
-      }
-      rowHtml.set(el, inner);
+      drawRow(el, r.row);
       // A late result in a closed step: its label and failed mark.
       draw(entry);
     }
-    syncTaskStop(el, r.row);
     updateBlockSummary();
     onChange();
   }
 
-  // The stop-task button after a running task_wait's params; gone once the
-  // row completes.
+  // The row rendered again (lit writes only what changed: a toggled raw
+  // command, an opened diff or read and the thumbs stay), its stop-task
+  // button in its slot, its plugin refs bound to its title (refs.js).
+  function drawRow(el, row) {
+    render(toolRowInnerTemplate(row, { thumbs: rowThumbs, stop: syncTaskStop(el, row) }), el);
+    bindRowRefs(el, row);
+  }
+
+  // The stop-task button of a running task_wait's row (after its title),
+  // nothing once the row completes.
   function syncTaskStop(el, row) {
     const taskId = taskStop?.target(row);
-    const btn = el.querySelector(":scope > .task-stop");
+    let btn = rowStops.get(el);
     if (!taskId) {
-      btn?.remove();
-      return;
+      rowStops.delete(el);
+      return nothing;
     }
     if (btn) {
       btn.disabled = taskStop.busy(taskId);
-      return;
+      return btn;
     }
     const command = () => taskCommand(turn?.gens, taskId);
-    rowAnchor(el).after(taskStopButton(taskStop, taskId, { command }));
+    btn = taskStopButton(taskStop, taskId, { command });
+    rowStops.set(el, btn);
+    return btn;
   }
 
   // A hook's line (hook_notice) as a row of the current step, above the row
@@ -560,7 +534,7 @@ export function createTurnView({
   // that ends first puts it in its last step). False with no running turn.
   function steer(data) {
     if (!turn || turn.ended) return false;
-    pendingSteers.push(htmlElement(steerRowHtml(data)));
+    pendingSteers.push(elementOf(steerRowTemplate(data)));
     return true;
   }
 
@@ -829,26 +803,12 @@ export function stepText(block, iteration) {
 // A re-rendered failed turn's line (a .bubble.cancel, as live's
 // addEndBubble), in turn_failed's words (failedTurnText) from what the turn
 // record kept of it (SessionMetrics' failure: summary, message,
-// error_class, kept_steps); "" for any other record, or a failed one saved
-// before records kept that.
-function failedLineHtml(record) {
+// error_class, kept_steps); nothing for any other record, or a failed one
+// saved before records kept that.
+function failedLineTemplate(record) {
   const failure = record?.status === "failed" ? record.failure : null;
-  if (!failure || typeof failure !== "object") return "";
-  return `<div class="bubble cancel">${escapeHtml(failedTurnText(failure))}</div>`;
-}
-
-// Parts (HTML strings and templates, in order) as one fragment.
-function fragmentOf(parts) {
-  const out = document.createDocumentFragment();
-  let markup = "";
-  for (const part of parts) {
-    if (typeof part === "string") { markup += part; continue; }
-    if (markup) out.append(rawNodes(markup));
-    markup = "";
-    out.append(nodesOf(part));
-  }
-  if (markup) out.append(rawNodes(markup));
-  return out;
+  if (!failure || typeof failure !== "object") return nothing;
+  return html`<div class="bubble cancel">${failedTurnText(failure)}</div>`;
 }
 
 // A reloaded history in the turn view (renderHistory's object path), as
@@ -857,53 +817,51 @@ function fragmentOf(parts) {
 // the thinking, params and output, from the saved messages; status and
 // duration from the timing's tool records), then the answer and the turn's
 // timing line under it.
-// +thumbs(images)+ draws a prompt's or a tool row's image thumbs.
+// +thumbs(images)+ draws a prompt's or a tool row's image thumbs (a
+// template, images.js thumbsTemplate).
 export function turnHistoryNodes(items, timing, { thumbs }) {
-  const timingHtml = (group) => {
+  const timingTemplate = (group) => {
     const record = group.record;
     // Numbered by its place in the turn records, as live (a failed turn
     // whose prompt went back still counts).
     const at = (timing?.turnRecords || []).indexOf(record);
     return record && formatDuration(record.duration_ms)
-      ? `<div class="turn-timing">${escapeHtml(turnTimingText(at >= 0 ? at + 1 : group.turnIndex + 1, record.duration_ms, { canceled: record.status === "canceled" }))}</div>`
-      : "";
+      ? html`<div class="turn-timing">${turnTimingText(at >= 0 ? at + 1 : group.turnIndex + 1, record.duration_ms, { canceled: record.status === "canceled" })}</div>`
+      : nothing;
   };
-  // The timing line after the bubble, not in it: where the live view
-  // leaves it at the turn's end. +at+: the message's index, for its refs
+  // An answer's bubble; +at+, the message's index, is for its refs
   // (data-answer-at, gone before the nodes are returned).
-  const answerHtml = (at, timing) => {
-    const m = items[at];
-    const { body, renderedMarkdown } = messageBodyHtml(m);
-    return `<div class="bubble output${renderedMarkdown ? " markdown" : ""}" data-answer-at="${at}"${copySourceAttr(m, renderedMarkdown)}>${body}</div>${timing}`;
-  };
+  const answerBubble = (at, cls = "") => answerBubbleTemplate(items[at], { cls, at });
+  // The timing line after the bubble, not in it: where the live view
+  // leaves it at the turn's end.
+  const answerTemplate = (at, timing) => html`${answerBubble(at)}${timing}`;
   // A user's line, labelled when chi brought it in (a delegate report). A
   // `!cmd`'s saved message (the worker's "!(<command>)\n<output>") renders
   // as its command bubble, as live does — not as a user bubble.
-  const userHtml = (m, opts = {}) => {
+  const userTemplate = (m, opts = {}) => {
     const shell = shellCommandMessage(m?.content);
-    if (shell) return commandBubbleHtml(shell);
-    return userBubbleHtml(m, { label: sourceLabel(m?.source), thumbs: thumbs(m.images), ...opts });
+    if (shell) return commandBubbleTemplate(shell);
+    return userBubbleTemplate(m, { label: sourceLabel(m?.source), thumbs: thumbs(m.images), ...opts });
   };
   // The first text after a delegate report merged mid-turn, unless it is
   // the turn's answer (shown anyway).
-  const reportReplyHtml = (i, group) => {
-    if (items[i]?.source !== "delegate_report") return "";
+  const reportReplyTemplate = (i, group) => {
+    if (items[i]?.source !== "delegate_report") return nothing;
     const j = items.findIndex((m, k) => k > i && m?.role === "assistant" && String(m.content ?? "").trim());
-    if (j < 0 || j === group.answer || items.slice(i + 1, j).some((m) => m?.role === "user" && !m.merged)) return "";
-    const { body, renderedMarkdown } = messageBodyHtml(items[j]);
-    return `<div class="bubble output report-reply${renderedMarkdown ? " markdown" : ""}" data-answer-at="${j}"${copySourceAttr(items[j], renderedMarkdown)}>${body}</div>`;
+    if (j < 0 || j === group.answer || items.slice(i + 1, j).some((m) => m?.role === "user" && !m.merged)) return nothing;
+    return answerBubble(j, " report-reply");
   };
-  const steerHtml = (i, bubble) => steerRowHtml({ source: items[i].source, text: items[i].content }, { bubble });
+  const steerTemplate = (i, bubble) => steerRowTemplate({ source: items[i].source, text: items[i].content }, { bubble });
   const parts = [];
   // Each block's steps, in order: its outline once the nodes exist.
   const outlines = [];
   for (const group of turnGroups(items, timing)) {
-    if (group.kind === "note") { parts.push(`<div class="bubble note">${noteHtml(items[group.i])}</div>`); continue; }
-    if (group.kind === "steer") { parts.push(steerHtml(group.i, true)); continue; }
-    if (group.kind === "answer") { parts.push(answerHtml(group.answer, "")); continue; }
+    if (group.kind === "note") { parts.push(noteBubbleTemplate(items[group.i])); continue; }
+    if (group.kind === "steer") { parts.push(steerTemplate(group.i, true)); continue; }
+    if (group.kind === "answer") { parts.push(answerTemplate(group.answer, nothing)); continue; }
     const prompt = items[group.user];
     // A context wake turn starts with its note.
-    parts.push(prompt.role === "note" ? `<div class="bubble note">${noteHtml(prompt)}</div>` : userHtml(prompt));
+    parts.push(prompt.role === "note" ? noteBubbleTemplate(prompt) : userTemplate(prompt));
     const [only] = group.steps;
     const ended = group.answer !== null || group.emptyAnswer != null;
     const textless = only && (only.i === null || !String(items[only.i].content ?? ""));
@@ -917,7 +875,7 @@ export function turnHistoryNodes(items, timing, { thumbs }) {
       const gens = group.steps.map((step) => ({ text: step.i === null ? "" : String(items[step.i].content ?? ""), thinking: step.thinking || "", tools: step.tools }));
       const steps = gens.map((gen, k) => stepTemplate(gen, {
         // The steers the step answered first, where the live rows went.
-        steers: (group.steps[k].steers || []).map((i) => rawNodes(steerHtml(i, false))),
+        steers: (group.steps[k].steers || []).map((i) => steerTemplate(i, false)),
         items: gen.tools.length ? [rowNodes(gen.tools, thumbs)] : [],
       }));
       parts.push(html`<details class="turn-work done"><summary>${model.blockSummary({ gens, ended: true })}</summary>${steps}</details>`);
@@ -926,28 +884,27 @@ export function turnHistoryNodes(items, timing, { thumbs }) {
     // Steers with no step to sit in, or in a turn that shows no block: on
     // their own after the prompt.
     const loose = noBlock ? [...group.steps.flatMap((step) => step.steers || []), ...(group.steers || [])] : group.steers || [];
-    parts.push(loose.map((i) => steerHtml(i, true)).join(""));
+    parts.push(loose.map((i) => steerTemplate(i, true)));
     // The user's lines merged into the turn: the live "steered" bubbles,
     // after its steps and before its answer. A delegate report's is
     // followed by the text that answered it when that isn't the answer: a
     // small model tells its user about a report before its next tool call,
     // and that step's text would stay folded in the block.
     parts.push((group.merged || []).map((i) =>
-      userHtml(items[i], { state: "steered", step: items[i].step }) +
-      reportReplyHtml(i, group)).join(""));
+      html`${userTemplate(items[i], { state: "steered", step: items[i].step })}${reportReplyTemplate(i, group)}`));
     // A turn that ended with no answer: chi's muted notice where the answer
     // would be, before the timing, as live.
-    if (group.emptyAnswer != null) parts.push(`${emptyAnswerHtml(items[group.emptyAnswer])}${timingHtml(group)}`);
+    if (group.emptyAnswer != null) parts.push(html`${emptyAnswerTemplate(items[group.emptyAnswer])}${timingTemplate(group)}`);
     // A turn with no answer (canceled, or running: no record yet) shows its
     // timing after its prompt and steps, where the live view leaves it.
-    else if (group.answer === null) parts.push(timingHtml(group));
-    else parts.push(answerHtml(group.answer, timingHtml(group)));
+    else if (group.answer === null) parts.push(timingTemplate(group));
+    else parts.push(answerTemplate(group.answer, timingTemplate(group)));
     // A canceled turn ends with its cancel line, a failed one whose steps
     // stayed with its failure line, as the live view left them.
-    parts.push(cancelLineHtml(group.record, escapeHtml));
-    parts.push(failedLineHtml(group.record));
+    parts.push(cancelLineTemplate(group.record));
+    parts.push(failedLineTemplate(group.record));
   }
-  const out = fragmentOf(parts);
+  const out = nodesOf(parts);
   // A finished turn's block as the live end leaves it: its outline, open.
   [...out.children].filter((el) => el.matches(".turn-work")).forEach((block, i) => outlineBlock(block, outlines[i] || []));
   // Each answer bubble knows its message's refs (answer_refs.js; the

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

@@ -0,0 +1,8 @@
+// lit-html 3.3.3 (npm tarball lit-html-3.3.3.tgz, directive.js: the minified production
+// build, unmodified but for this line and the dropped sourceMappingURL). BSD-3-Clause.
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}export{i as Directive,t as PartType,e as directive};

data/lib/samagotchi/web/public/vendor/directives/unsafe-html.js

@@ -0,0 +1,8 @@
+// lit-html 3.3.3 (npm tarball lit-html-3.3.3.tgz, directives/unsafe-html.js: the minified
+// production build, unmodified but for this line and the dropped sourceMappingURL). BSD-3-Clause.
+import{nothing as t,noChange as i}from"../lit-html.js";import{directive as r,Directive as s,PartType as n}from"../directive.js";
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};