samagotchi 0.61.0 → 0.63.0

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

@@ -7,6 +7,9 @@
 // provider can attach one: GET …/context's can_add_url) opens a form that
 // attaches a URL (a GitHub PR); the web never adds a command.
 
+import { html, nothing, render } from "./vendor/lit-html.js";
+import { keepFocus } from "./keep_focus.js";
+
 // "now", "3m", "2h", "4d" since an ISO time; "" for none.
 export function ageText(iso, now = Date.now()) {
   const at = Date.parse(iso || "");
@@ -38,33 +41,40 @@ export function chipModel(rows, now = Date.now()) {
   });
 }
 
-// addUrl: end with the "+ URL" chip.
-export function chipsHtml(chips, escapeHtml, { addUrl = false } = {}) {
-  return chips.map((chip) => `<button type="button" class="ctx-chip ${chip.state}" data-name="${escapeHtml(chip.name)}" ` +
-    `title="${escapeHtml(chip.title)}" aria-haspopup="dialog">` +
-    `${chip.state === "unread" ? '<span class="ctx-dot" aria-hidden="true"></span>' : ""}${escapeHtml(chip.label)}</button>`).join("") +
-    (addUrl ? '<button type="button" class="ctx-chip ctx-add" data-act="add" title="Attach a URL (a GitHub PR) the agent can read and hears about when it changes" aria-haspopup="dialog">+ URL</button>' : "");
+const ADD_TITLE = "Attach a URL (a GitHub PR) the agent can read and hears about when it changes";
+
+// The chips (a lit-html template; attributes after a bound one are bound
+// too, so they keep their order). addUrl: end with the "+ URL" chip;
+// open: the chip whose popover is open (a source's name), addOpen: the
+// "+ URL" form is.
+export function chipsTemplate(chips, { addUrl = false, open = null, addOpen = false } = {}) {
+  return html`${chips.map((chip) => html`<button type="button" class=${`ctx-chip ${chip.state}${chip.name === open ? " open" : ""}`}
+    data-name=${chip.name} title=${chip.title} aria-haspopup=${"dialog"}>${
+      chip.state === "unread" ? html`<span class="ctx-dot" aria-hidden="true"></span>` : nothing}${chip.label}</button>`)}${
+    addUrl ? html`<button type="button" class=${`ctx-chip ctx-add${addOpen ? " open" : ""}`} data-act=${"add"} title=${ADD_TITLE}
+      aria-haspopup=${"dialog"}>+ URL</button>` : nothing}`;
 }
 
-// The "+ URL" popover: the URL, an optional why, Attach; +url+ and +error+
-// after a try that failed.
-export function addFormHtml(escapeHtml, { url = "", error = null } = {}) {
-  return `<form class="ctx-add-form"><div class="ctx-pop-head"><strong>Attach a URL</strong>` +
-    `<button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div>` +
-    `<div class="ctx-pop-meta">A link an installed bundle knows (github-pr: a pull request). The agent gets a note when it changes.</div>` +
-    `<input class="ctx-add-input" name="url" type="url" inputmode="url" placeholder="https://github.com/owner/repo/pull/123" value="${escapeHtml(url)}" required autocomplete="off">` +
-    `<input class="ctx-add-input" name="why" type="text" placeholder="why (optional)" maxlength="300" autocomplete="off">` +
-    (error ? `<div class="ctx-pop-error" role="alert">${escapeHtml(error)}</div>` : "") +
-    `<div class="ctx-pop-actions"><button type="submit" class="ctx-add-submit">Attach</button></div></form>`;
+// The "+ URL" popover: the URL, an optional why, Attach; +error+ after a
+// try that failed, +busy+ while one runs.
+export function addFormTemplate({ error = null, busy = false } = {}) {
+  return html`<form class="ctx-add-form"><div class="ctx-pop-head"><strong>Attach a URL</strong
+    ><button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div
+    ><div class="ctx-pop-meta">A link an installed bundle knows (github-pr: a pull request). The agent gets a note when it changes.</div
+    ><input class="ctx-add-input" name="url" type="url" inputmode="url" placeholder="https://github.com/owner/repo/pull/123" required autocomplete="off"
+    ><input class="ctx-add-input" name="why" type="text" placeholder="why (optional)" maxlength="300" autocomplete="off"
+    >${error ? html`<div class="ctx-pop-error" role="alert">${error}</div>` : nothing
+    }<div class="ctx-pop-actions"><button type="submit" class="ctx-add-submit" ?disabled=${busy}>Attach</button></div></form>`;
 }
 
-// The popover's inside for one row (GET …/context's).
-export function popoverHtml(row, escapeHtml, now = Date.now()) {
+// The popover's inside for one row (GET …/context's); +text+ the row's
+// text once "view text" read it (null before).
+export function popoverTemplate(row, { text = null, now = Date.now() } = {}) {
   const kind = row.kind === "cmd" ? `runs every ${row.every_seconds ? `${row.every_seconds}s` : "few minutes"}` : "pushed";
   const url = hintUrl(row.hint);
   const hint = url
-    ? `<a class="ctx-pop-hint" href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(url)}</a>`
-    : (row.hint ? `<div class="ctx-pop-hint">${escapeHtml(row.hint)}</div>` : "");
+    ? html`<a class="ctx-pop-hint" href=${url} target=${"_blank"} rel=${"noopener noreferrer"}>${url}</a>`
+    : (row.hint ? html`<div class="ctx-pop-hint">${row.hint}</div>` : nothing);
   const age = ageText(row.fetched_at, now);
   const meta = [age ? (age === "now" ? "fetched just now" : `fetched ${age} ago`) : "no text yet",
                 row.unread ? "the agent hasn't read this change" : (row.has_text ? "the agent has read it" : "")]
@@ -73,29 +83,32 @@ export function popoverHtml(row, escapeHtml, now = Date.now()) {
   const detachTitle = row.scope === "project"
     ? "The project's source: this session stops seeing it (chi context unmute brings it back)"
     : "Remove it from this session";
-  return `<div class="ctx-pop-head"><strong>${escapeHtml(row.name)}</strong>` +
-    `<span class="ctx-pop-kind">${escapeHtml(row.scope)} · ${escapeHtml(kind)}</span>` +
-    `<button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div>` +
-    (row.why ? `<div class="ctx-pop-why">${escapeHtml(row.why)}</div>` : "") +
-    hint +
-    (row.summary ? `<div class="ctx-pop-summary">${escapeHtml(row.summary)}</div>` : "") +
-    `<div class="ctx-pop-meta">${escapeHtml(meta)}</div>` +
-    (row.error ? `<div class="ctx-pop-error">last refresh failed: ${escapeHtml(row.error)}</div>` : "") +
-    `<pre class="ctx-pop-text" hidden></pre>` +
-    `<div class="ctx-pop-actions">` +
-    (row.has_text ? `<button type="button" data-act="view">view text</button>` : "") +
-    `<button type="button" class="ctx-pop-detach" data-act="detach" title="${escapeHtml(detachTitle)}">${detach}</button></div>`;
+  return html`<div class="ctx-pop-head"><strong>${row.name}</strong
+    ><span class="ctx-pop-kind">${row.scope} · ${kind}</span
+    ><button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div
+    >${row.why ? html`<div class="ctx-pop-why">${row.why}</div>` : nothing}${hint}${
+      row.summary ? html`<div class="ctx-pop-summary">${row.summary}</div>` : nothing
+    }<div class="ctx-pop-meta">${meta}</div
+    >${row.error ? html`<div class="ctx-pop-error">last refresh failed: ${row.error}</div>` : nothing
+    }<pre class="ctx-pop-text" ?hidden=${text === null}>${text ?? ""}</pre
+    ><div class="ctx-pop-actions">${row.has_text && text === null ? html`<button type="button" data-act="view">view text</button>` : nothing
+    }<button type="button" class="ctx-pop-detach" data-act="detach" title=${detachTitle}>${detach}</button></div>`;
 }
 
 // The chips for the session bar. el: #contextChips; api: {list(id),
-// show(id, name), detach(id, name), add(id, {url, why})}; escapeHtml;
-// toast(text).
-export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc = document, win = window }) {
+// show(id, name), detach(id, name), add(id, {url, why})}; toast(text).
+// Chips, popover and form are lit templates: a redraw (a refresh, the
+// minute's tick) keeps their nodes, so focus and typed text stay.
+export function createContextChips({ el, api, toast = () => {}, doc = document, win = window }) {
   let sessionId = null;
   let rows = [];
   let canAdd = false;
   let openName = null;
   let loadSeq = 0;
+  // The open row's text once read (view text), and the "+ URL" form's
+  // state ({error, busy}).
+  let text = null;
+  let addState = {};
   const pop = doc.createElement("div");
   pop.id = "contextPopover";
   pop.className = "ctx-popover";
@@ -106,17 +119,20 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
   // openName ADD: the "+ URL" form is open.
   const ADD = "\u0000add";
 
-  function render() {
+  function drawChips() {
     const chips = chipModel(rows);
-    el.innerHTML = chipsHtml(chips, escapeHtml, { addUrl: canAdd });
+    // A source inserted before the focused chip: the focus stays on its source.
+    keepFocus(el, "data-name", () => render(chipsTemplate(chips, { addUrl: canAdd, open: openName === ADD ? null : openName,
+                                                                   addOpen: openName === ADD }), el));
     el.hidden = chips.length === 0 && !canAdd;
     // The "+ URL" chip alone sits inline, not on a row of its own.
     el.classList.toggle("only-add", chips.length === 0 && canAdd);
-    if (openName === ADD) {
-      if (canAdd) el.querySelector(".ctx-add")?.classList.add("open");
-      else close();
-    } else if (openName && !chips.some((chip) => chip.name === openName)) close();
-    else if (openName) el.querySelector(`.ctx-chip[data-name="${openName}"]`)?.classList.add("open");
+  }
+
+  // The chips, and the open popover closed when what it is for has gone.
+  function draw() {
+    if (openName === ADD ? !canAdd : openName && !chipModel(rows).some((chip) => chip.name === openName)) close();
+    else drawChips();
   }
 
   async function refresh() {
@@ -134,10 +150,11 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
       rows = [];
       canAdd = false;
     }
-    render();
-    if (openName && openName !== ADD) {
+    draw();
+    // An open popover follows its row, but not while it shows the text.
+    if (openName && openName !== ADD && text === null) {
       const row = rows.find((r) => r.name === openName);
-      if (row && pop.querySelector(".ctx-pop-text")?.hidden !== false) fill(row);
+      if (row) fill(row);
     }
   }
 
@@ -146,7 +163,6 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
     rows = [];
     canAdd = false;
     close();
-    render();
     return refresh();
   }
 
@@ -155,11 +171,10 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
     rows = [];
     canAdd = false;
     close();
-    render();
   }
 
   function fill(row) {
-    pop.innerHTML = popoverHtml(row, escapeHtml);
+    render(popoverTemplate(row, { text }), pop);
   }
 
   // Above the chip, inside the window with a 16px gutter.
@@ -174,19 +189,30 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
   function open(name, chip) {
     const row = rows.find((r) => r.name === name);
     if (!row) return;
+    // Another popover's nodes go, so this one starts fresh.
+    render(nothing, pop);
     openName = name;
+    text = null;
     fill(row);
     pop.hidden = false;
     place(chip);
-    el.querySelectorAll(".ctx-chip").forEach((c) => c.classList.toggle("open", c.dataset.name === name));
+    drawChips();
   }
 
-  function openAdd(chip, state = {}) {
+  const drawAdd = (changes = {}) => {
+    addState = { ...addState, ...changes };
+    render(addFormTemplate(addState), pop);
+  };
+
+  function openAdd(chip) {
+    render(nothing, pop);
     openName = ADD;
-    pop.innerHTML = addFormHtml(escapeHtml, state);
+    text = null;
+    addState = {};
+    drawAdd();
     pop.hidden = false;
     place(chip);
-    el.querySelectorAll(".ctx-chip").forEach((c) => c.classList.toggle("open", c === chip));
+    drawChips();
     pop.querySelector('input[name="url"]')?.focus();
   }
 
@@ -195,8 +221,7 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
     const url = form.elements.url.value.trim();
     const why = form.elements.why.value.trim();
     if (!id || !url) return;
-    const button = form.querySelector(".ctx-add-submit");
-    if (button) button.disabled = true;
+    drawAdd({ busy: true });
     try {
       const data = await api.add(id, { url, why: why || undefined });
       if (id !== sessionId) return;
@@ -205,32 +230,35 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
       toast(`Attached ${data.name}: the agent gets a note before your next message`);
     } catch (e) {
       if (id !== sessionId || openName !== ADD) return;
-      const chip = el.querySelector(".ctx-add");
-      if (chip) openAdd(chip, { url, error: String(e.message).replace(/ \(\d+\)$/, "") });
+      // The same form again: what the user typed stays; the URL gets focus.
+      drawAdd({ busy: false, error: String(e.message).replace(/ \(\d+\)$/, "") });
+      pop.querySelector('input[name="url"]')?.focus();
     }
   }
 
   function close() {
     openName = null;
+    text = null;
+    addState = {};
     pop.hidden = true;
-    el.querySelectorAll(".ctx-chip.open").forEach((c) => c.classList.remove("open"));
+    render(nothing, pop);
+    drawChips();
   }
 
   async function viewText() {
     const name = openName;
-    const pre = pop.querySelector(".ctx-pop-text");
-    if (!name || !pre) return;
+    if (!name || name === ADD) return;
     try {
       const data = await api.show(sessionId, name);
       if (name !== openName) return;
-      pre.textContent = data.text || "";
-      pre.hidden = false;
-      pop.querySelector('[data-act="view"]')?.remove();
+      const row = rows.find((r) => r.name === name);
+      if (!row) return;
+      text = data.text || "";
+      fill(row);
     } catch (e) {
       toast(`Can't read ${name}: ${String(e.message).replace(/ \(\d+\)$/, "")}`);
     }
   }
-
   async function detach() {
     const row = rows.find((r) => r.name === openName);
     if (!row) return;
@@ -279,7 +307,7 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
   });
   win.addEventListener("focus", () => refresh());
   // The ages move on by themselves.
-  win.setInterval(() => { if (rows.length) render(); }, 60_000);
+  win.setInterval(() => { if (rows.length) drawChips(); }, 60_000);
 
   return { load, clear, refresh, close, get rows() { return rows; } };
 }

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/families_view.js

@@ -1,23 +1,44 @@
 // A parent's card with its delegates folded in (docs/sessions.md, the web):
-// the chip that opens the family's list, and the list's rows. Pure string
-// builders; app.js places them (inline in all sessions, a popover over the
-// strip) and binds the clicks.
-import { escapeHtml, ownerBadge, previewForCard, relativeTime } from "./format.js";
+// the chip that opens the family's list, and the list's rows, as lit-html
+// templates; lists_view.js places them (inline in all sessions, a popover
+// over the strip) and binds the clicks. Attributes after a bound one are
+// bound too, so they keep their order in the markup (lit sets bound ones
+// after the static ones).
+import { ownerBadge, previewForCard, relativeTime } from "./format.js";
 import { familySummary, stoppedBadge, waitingBadge } from "./sessions_list.js";
+import { html, nothing, render } from "./vendor/lit-html.js";
+import { keepFocus } from "./keep_focus.js";
 
 // The chip in a parent's meta row: "▸ 3 delegates · ● 1 live · 1 waiting"
 // (a waiting one in the attention colour), its tooltip the delegates by
-// state. "" for a family with no members.
+// state. nothing for a family with no members.
 // @param open whether the list is open (aria-expanded; the arrow turns)
-export function familyChipHtml(f, { open = false } = {}) {
+export function familyChipTemplate(f, { open = false } = {}) {
   const sum = familySummary(f);
-  if (!sum) return "";
+  if (!sum) return nothing;
   const waiting = sum.counts.waiting;
-  const liveHtml = sum.live ? `<span class="fc-live"> · <span class="live-dot" aria-hidden="true"></span>${sum.live} live</span>` : "";
-  const waitingHtml = waiting ? ` · <span class="fc-waiting">${waiting} waiting</span>` : "";
-  return `<button type="button" class="family-chip${waiting ? " waiting" : ""}" aria-expanded="${open ? "true" : "false"}" title="${escapeHtml(sum.title)}"><span class="fc-arrow" aria-hidden="true">▸</span>${sum.total} ${sum.total === 1 ? "delegate" : "delegates"}${liveHtml}${waitingHtml}</button>`;
+  const live = sum.live ? html`<span class="fc-live"> · <span class="live-dot" aria-hidden="true"></span>${sum.live} live</span>` : nothing;
+  const waitingT = waiting ? html` · <span class="fc-waiting">${waiting} waiting</span>` : nothing;
+  return html`<button type="button" class=${`family-chip${waiting ? " waiting" : ""}`} aria-expanded=${open ? "true" : "false"}
+    title=${sum.title}><span class="fc-arrow" aria-hidden="true">▸</span>${sum.total} ${sum.total === 1 ? "delegate" : "delegates"}${
+    live}${waitingT}</button>`;
 }
 
+// A row's status dot (a family's or a chain's): the waiting title over the
+// status when the session waits on the user.
+export function rowDotTemplate(s, waiting) {
+  const word = (waiting ? waiting.title : s.status) || "";
+  return html`<span class=${`status dot ${s.status || ""}${waiting ? " waiting" : ""}`} title=${word} aria-label=${word}></span>`;
+}
+
+// A row's waiting or stopped badge, and the archived one.
+export function rowBadgesTemplate(waiting, stopped) {
+  return html`${waiting ? html`<span class=${`attn attn-${waiting.kind}`} title=${waiting.title}>${waiting.text}</span>` : nothing}${
+    stopped ? html`<span class="stopped-badge" title=${stopped.title}>${stopped.text}</span>` : nothing}`;
+}
+
+export const archivedBadge = html`<span class="archived-badge" title="Archived: hidden from the lists, kept for good">archived</span>`;
+
 // The family's list: one row per member, depth first, indented one step
 // per depth (--depth): status dot, preview, time, the waiting / stopped
 // badge, the owner badge, archived. A row's click opens that session.
@@ -25,7 +46,7 @@ export function familyChipHtml(f, { open = false } = {}) {
 // @param matchIds a search's matching members (.match; the rest .dim), or
 //   null without a search
 // @param archivable an archive button per row (all sessions, not in select mode)
-export function familyRowsHtml(f, { activeId = null, matchIds = null, archivable = false, now = Date.now() } = {}) {
+export function familyRowsTemplate(f, { activeId = null, matchIds = null, archivable = false, now = Date.now() } = {}) {
   const rows = f.members.map(({ session: s, depth }) => {
     const cls = ["family-row"];
     if (activeId && s.id === activeId) cls.push("active");
@@ -36,23 +57,17 @@ export function familyRowsHtml(f, { activeId = null, matchIds = null, archivable
     const stopped = waiting ? null : stoppedBadge(s);
     const owner = ownerBadge(s.owner, s.id);
     const ago = relativeTime(ts, now);
-    const dotWord = waiting ? waiting.title : s.status;
-    const parts = [
-      `<span class="status dot ${escapeHtml(s.status || "")}${waiting ? " waiting" : ""}" title="${escapeHtml(dotWord || "")}" aria-label="${escapeHtml(dotWord || "")}"></span>`,
-      `<span class="fr-preview">${escapeHtml(previewForCard(s))}</span>`,
-      waiting ? `<span class="attn attn-${waiting.kind}" title="${escapeHtml(waiting.title)}">${escapeHtml(waiting.text)}</span>` : "",
-      stopped ? `<span class="stopped-badge" title="${escapeHtml(stopped.title)}">${escapeHtml(stopped.text)}</span>` : "",
-      ago ? `<span class="time">${escapeHtml(ago)}</span>` : "",
-      owner ? `<span class="owner ${owner.kind}" title="${escapeHtml(owner.title)}">${escapeHtml(owner.text)}</span>` : "",
-      s.archived ? `<span class="archived-badge" title="Archived: hidden from the lists, kept for good">archived</span>` : "",
-    ].join("");
-    const short = escapeHtml(s.short_id || String(s.id).slice(0, 8));
-    const arch = !archivable ? "" : s.archived
-      ? `<button type="button" class="card-arch" data-arch="${escapeHtml(s.id)}" title="Unarchive: back to the lists" aria-label="Unarchive session ${short}"></button>`
-      : `<button type="button" class="card-arch" data-arch="${escapeHtml(s.id)}" title="Archive: hide from the lists, keep for good" aria-label="Archive session ${short}"></button>`;
-    return `<div class="${cls.join(" ")}" data-id="${escapeHtml(s.id)}" style="--depth:${depth}" role="listitem"><button type="button" class="fr-open" title="${escapeHtml(`${s.id} · ${s.status || ""}`)}">${parts}</button>${arch}</div>`;
+    const short = s.short_id || String(s.id).slice(0, 8);
+    const arch = !archivable ? nothing : s.archived
+      ? html`<button type="button" class="card-arch" data-arch=${s.id} title=${"Unarchive: back to the lists"} aria-label=${`Unarchive session ${short}`}></button>`
+      : html`<button type="button" class="card-arch" data-arch=${s.id} title=${"Archive: hide from the lists, keep for good"} aria-label=${`Archive session ${short}`}></button>`;
+    return html`<div class=${cls.join(" ")} data-id=${s.id} style=${`--depth:${depth}`} role=${"listitem"}><button type="button" class="fr-open"
+      title=${`${s.id} · ${s.status || ""}`}>${rowDotTemplate(s, waiting)}<span class="fr-preview">${previewForCard(s)}</span>${
+      rowBadgesTemplate(waiting, stopped)}${ago ? html`<span class="time">${ago}</span>` : nothing}${
+      owner ? html`<span class=${`owner ${owner.kind}`} title=${owner.title}>${owner.text}</span>` : nothing}${
+      s.archived ? archivedBadge : nothing}</button>${arch}</div>`;
   });
-  return `<div class="family-rows" role="list">${rows.join("")}</div>`;
+  return html`<div class="family-rows" role="list">${rows}</div>`;
 }
 
 // The widest window index.html lays out as a phone (@media (max-width:600px)).
@@ -61,11 +76,13 @@ export const PHONE_MAX_PX = 600;
 // The strip's family popover: one #familyPop in body (position: fixed, so
 // the strip's sideways scroll on a phone doesn't clip it), under the chip
 // it was opened from and as wide as that card (300 px at least, inside the
-// window; on a phone, the window less 16 px gutters). The strip draws again on every hub event: refresh() then finds
-// the new chip for the same head, rewrites the rows only when they changed,
+// window; on a phone, the window less 16 px gutters). The strip draws again
+// on every hub event: refresh() then finds the new chip for the same head,
+// draws the rows again (lit writes only what changed: a row keeps its
+// nodes, reused by position, so keepFocus keeps the focus on its session)
 // and closes when the family is gone.
-// @param rowsFor (headId) → the rows' html, or null when the family has no
-//   members (any more)
+// @param rowsFor (headId) → the rows' template, or null when the family
+//   has no members (any more)
 // @param anchorFor (headId) → its chip in the strip, or null
 // @param onPick (id) a row's click
 // @param onClose () after it closed (the strip's held order catches up)
@@ -73,7 +90,6 @@ export const PHONE_MAX_PX = 600;
 export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor, onPick, onClose = () => {} }) {
   let el = null;
   let headId = null;
-  let html = "";
 
   const element = () => {
     if (el) return el;
@@ -110,10 +126,8 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
       close();
       return false;
     }
-    if (rows !== html) {
-      el.innerHTML = rows;
-      html = rows;
-    }
+    // A row inserted before the focused one: the focus stays on its session.
+    keepFocus(el, "data-id", () => render(rows, el));
     anchor.setAttribute("aria-expanded", "true");
     place(anchor);
     return true;
@@ -123,7 +137,6 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
     if (headId && headId !== id) close();
     headId = id;
     element().hidden = false;
-    html = "";
     draw();
   }
 
@@ -131,9 +144,8 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
     if (!headId) return;
     anchorFor(headId)?.setAttribute("aria-expanded", "false");
     headId = null;
-    html = "";
     el.hidden = true;
-    el.innerHTML = "";
+    render(nothing, el);
     onClose();
   }
 

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).