samagotchi 0.62.0 → 0.64.0

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

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

@@ -23,16 +23,17 @@ export function sessionCommandLine(text, commands) {
 }
 
 // /cut TEXT and /queue TEXT: the UIs' own words for a delivery (listed
-// for Tab and /help, never run as commands; TerminalUI::Formatting's
-// STEER_CHOICE: the word, then any whitespace and the text). During a
+// for Tab and /help, never run as commands; ComposerRoute::STEER_CHOICE
+// (spec/fixtures/composer_routes.json): the word, then any whitespace and the text). During a
 // turn /cut TEXT is the text sent as a cut (POST /turn, delivery "cut"),
-// as chi send --cut does; /queue isn't in the web yet (the page says so,
-// as the attached TUI does). With no running turn both are the text as a
-// normal turn. The bare word gets the usage line.
+// as chi send --cut does, and /queue TEXT the text queued to run as a turn
+// of its own after this one (delivery "queue"; a worker that can't queue
+// refuses it, and the page shows the refusal's detail). With no running
+// turn both are the text as a normal turn. The bare word gets the usage
+// line.
 // @return {{send: string, delivery?: string} | {reply: string} | null}
 //   null: not a delivery line
 export const STEER_CHOICE_USAGE = "(/cut and /queue need a message: /cut TEXT, /queue TEXT)";
-export const QUEUE_UNAVAILABLE_WEB = "(/queue isn't available in the web yet; a plain message goes in at the running turn's next step, and /cut TEXT cuts in)";
 const STEER_CHOICE = /^\/(cut|queue)(?:\s+([\s\S]*))?$/;
 
 export function steerChoiceRoute(text, { running = false } = {}) {
@@ -41,8 +42,7 @@ export function steerChoiceRoute(text, { running = false } = {}) {
   const message = (match[2] || "").trim();
   if (!message) return { reply: STEER_CHOICE_USAGE };
   if (!running) return { send: message };
-  if (match[1] === "queue") return { reply: QUEUE_UNAVAILABLE_WEB };
-  return { send: message, delivery: "cut" };
+  return { send: message, delivery: match[1] };
 }
 
 // A line that is one word: a slash and a name, no spaces, no second slash

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

@@ -7,8 +7,8 @@ import { sessionCommandLine, startPageReplyOrHint, steerChoiceRoute, unknownComm
 
 // Where a composer line goes, in the order the page reads it:
 //   1. /cut TEXT, /queue TEXT (steerChoiceRoute): during a turn in a session
-//      the text as a cut, or the page's own answer; else the text goes on
-//      as the line.
+//      the text as a cut or queued for after the turn; else the text goes
+//      on as the line.
 //   2. On the start page (+session+ false): the page's own reply or a typo
 //      hint (startPageReplyOrHint) needs no session; anything else makes one.
 //   3. In a session (routeSessionLine): a session command, the page's own
@@ -21,7 +21,7 @@ import { sessionCommandLine, startPageReplyOrHint, steerChoiceRoute, unknownComm
 //                            +send+ again in it (routeSessionLine, with its
 //                            commands)
 //   {command}                POST /command
-//   {send, delivery}         POST /turn (+delivery+ "cut" or null)
+//   {send, delivery}         POST /turn (+delivery+ "cut", "queue" or null)
 export function routeComposerLine(text, { session = true, running = false, commands = [], images = 0 } = {}) {
   const choice = steerChoiceRoute(text, { running: running && session });
   if (choice?.reply) return { reply: choice.reply, line: text };

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

@@ -33,7 +33,8 @@ export function liveDurationText(durationMs) {
 
 // A cancel's reason as the terminal UIs name it too (Formatting::
 // CANCEL_REASONS); anything else as it is. Both sides: spec/shared/labels_matrix.json.
-const CANCEL_REASONS = { ctrl_c: "Ctrl-C", user: "stopped", hook: "by a hook", worker_stopped: "worker stopped" };
+const CANCEL_REASONS = { ctrl_c: "Ctrl-C", user: "stopped", hook: "by a hook", worker_stopped: "worker stopped",
+  session_stopped: "session stopped" };
 
 // The line a canceled turn ends with: "■ canceled (stopped)", live from
 // turn_canceled's reason and after a re-render from the turn record's
@@ -49,13 +50,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);