samagotchi 0.61.0 → 0.63.0

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

@@ -1,7 +1,10 @@
 // A plugin's card (docs/plugins.md, Cards): a title, a body and actions,
 // each action a command line the session runs. app.js places and updates
-// the element; this module draws it and says where it goes.
-import { escapeHtml, recapPlace } from "./format.js";
+// the element; this module draws it (lit-html templates) and says where it
+// goes.
+import { html, nothing, render } from "./vendor/lit-html.js";
+import { unsafeHTML } from "./vendor/directives/unsafe-html.js";
+import { recapPlace } from "./format.js";
 
 // The card's class: a warn card wears the warning colour; a notice is a
 // one-line row.
@@ -31,13 +34,13 @@ export function noticeCardLine(card) {
   return title && body ? `${title}: ${body}` : title || body;
 }
 
-// A notice's markup inside its <details>: the line as the summary, and
-// where it came from when the row is opened (the line wraps then).
-export function noticeInnerHtml(card) {
+// A notice inside its <details>: the line as the summary, and where it
+// came from when the row is opened (the line wraps then).
+export function noticeTemplate(card) {
   const title = String(card?.title ?? "").trim();
   const source = String(card?.source ?? "").trim();
-  const from = source && source !== title ? `<div class="notice-from">from <span class="card-source">${escapeHtml(source)}</span></div>` : "";
-  return `<summary>${escapeHtml(noticeCardLine(card))}</summary>${from}`;
+  const from = source && source !== title ? html`<div class="notice-from">from <span class="card-source">${source}</span></div>` : nothing;
+  return html`<summary>${noticeCardLine(card)}</summary>${from}`;
 }
 
 // Whether a card shown as a row of a step leaves the turn's block when the
@@ -51,27 +54,74 @@ export function leavesBlock({ warn = false, kind = "completed" } = {}) {
 }
 
 // The body: the server's body_html (rendered markdown, sanitized; or the
-// escaped text in a <pre>), else the plain text in a <pre> (a live event
-// carries no html; the page's ?cards=1 re-read brings it).
-export function cardBodyHtml(card) {
-  if (typeof card?.body_html === "string") return card.body_html;
+// escaped text in a <pre>) as it is, else the plain text in a <pre> (a
+// live event carries no html; the page's ?cards=1 re-read brings it);
+// null for none. The same body_html again keeps its nodes (unsafeHTML
+// renders a string it rendered last time as it is).
+export function cardBodyTemplate(card) {
+  if (typeof card?.body_html === "string") return card.body_html ? unsafeHTML(card.body_html) : null;
   const body = String(card?.body ?? "");
-  return body.trim() ? `<pre>${escapeHtml(body)}</pre>` : "";
+  return body.trim() ? html`<pre>${body}</pre>` : null;
 }
 
-// The card's inner markup: its head (title, source), body and one button
-// per action (the command as its tooltip and data).
-export function cardInnerHtml(card) {
-  const source = card.source ? `<span class="card-source">${escapeHtml(card.source)}</span>` : "";
-  const head = `<div class="card-head"><span class="card-title">${escapeHtml(card.title || "")}</span>${source}</div>`;
-  const bodyHtml = cardBodyHtml(card);
-  const body = bodyHtml ? `<div class="card-body">${bodyHtml}</div>` : "";
+// The card: its head (title, source), body and one button per action (the
+// command as its tooltip and data), then the line a failed action writes.
+export function cardTemplate(card) {
+  const source = card.source ? html`<span class="card-source">${card.source}</span>` : nothing;
+  const body = cardBodyTemplate(card);
   const actions = (card.actions || []).filter((a) => a && a.command);
   const buttons = actions.length
-    ? `<div class="card-actions">${actions.map((a) =>
-      `<button type="button" class="card-action ghost" data-command="${escapeHtml(a.command)}" title="${escapeHtml(a.command)}">${escapeHtml(a.label || a.command)}</button>`).join("")}</div>`
-    : "";
-  return `${head}${body}${buttons}<div class="card-error hidden"></div>`;
+    ? html`<div class="card-actions">${actions.map((a) =>
+      html`<button type="button" class="card-action ghost" data-command=${a.command} title=${a.command}>${a.label || a.command}</button>`)}</div>`
+    : nothing;
+  return html`<div class="card-head"><span class="card-title">${card.title || ""}</span>${source}</div>${body ? html`<div class="card-body">${body}</div>` : nothing}${buttons}<div class="card-error hidden"></div>`;
+}
+
+// A card element → the card it shows, as drawCard drew it.
+const DRAWN = new WeakMap();
+
+// +card+ drawn on +el+ (a notice on a <details>, a card on a <div>; one
+// that turns into the other kind, btw's "thinking…" → its answer, is
+// drawn on a new element in its place). Returns the element drawn. A
+// redraw writes only what changed: an open notice stays open, a body
+// that didn't change keeps its nodes (a selection in it), and the same
+// body again from the stream (text, no html) keeps the rendered one. A
+// failed action's line goes, as the card is new.
+export function drawCard(el, card) {
+  const notice = isNoticeCard(card);
+  if (el.tagName !== (notice ? "DETAILS" : "DIV")) {
+    const fresh = el.ownerDocument.createElement(notice ? "details" : "div");
+    el.replaceWith(fresh);
+    el = fresh;
+  }
+  el.className = cardClass(card);
+  el.dataset.cardId = card.id;
+  // A running turn's own card (the stage's status waits on one that asks).
+  if (card.in_turn) el.dataset.inTurn = "1";
+  else delete el.dataset.inTurn;
+  const drawn = DRAWN.get(el);
+  const sameBody = card.body_html === undefined && drawn && String(drawn.body ?? "") === String(card.body ?? "");
+  paint(el, sameBody ? { ...card, body_html: drawn.body_html } : card);
+  const error = el.querySelector(":scope > .card-error");
+  if (error) {
+    error.textContent = "";
+    error.classList.add("hidden");
+  }
+  return el;
+}
+
+function paint(el, card) {
+  render(isNoticeCard(card) ? noticeTemplate(card) : cardTemplate(card), el);
+  DRAWN.set(el, card);
+}
+
+// The rendered body a re-read brought (the snapshot's +card+ with its
+// body_html) onto a card drawn with the same body text; a no-op for any
+// other.
+export function refreshCardBody(el, card) {
+  const drawn = DRAWN.get(el);
+  if (!drawn || isNoticeCard(drawn) || typeof card?.body_html !== "string" || String(drawn.body ?? "") !== String(card.body ?? "")) return;
+  paint(el, { ...drawn, body_html: card.body_html });
 }
 
 // Where a snapshot's card or between-turns notice goes: before the user

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

@@ -4,10 +4,13 @@
 // through `continues`, forward through the session whose `continues` names
 // this one. The lists fold a chain into its latest listed link's card (a
 // `day N` chip, its earlier links in a popover); the session page links the
-// previous and the next link. Pure: app.js places the markup and binds it.
-import { escapeHtml, normalize, previewForCard, relativeTime } from "./format.js";
+// previous and the next link. Pure: lists_view.js places the chip and rows
+// (lit-html templates) and app.js the toast's markup, and they bind them.
+import { normalize, previewForCard, relativeTime } from "./format.js";
 import { stoppedBadge, waitingBadge } from "./sessions_list.js";
 import { waitingOn } from "./notify.js";
+import { archivedBadge, rowBadgesTemplate, rowDotTemplate } from "./families_view.js";
+import { html, nothing } from "./vendor/lit-html.js";
 
 // The opener a new link's composer is filled with (never sent: the user
 // edits or sends it). The same for every chain.
@@ -148,10 +151,11 @@ export function chainOthers(f) {
 // The chip in a chain's card: "day 3" (the head's place; "day 2 of 3" when
 // later links aren't listed), with a live dot / "waiting" when one of the
 // other links has a worker / waits on the user (typing in an archived link
-// brings it back, but it stays folded here). "" for a family in no chain.
+// brings it back, but it stays folded here). nothing for a family in no
+// chain. A lit-html template, as families_view.js's chip.
 // @param open whether the list is open (aria-expanded)
-export function chainChipHtml(f, { open = false } = {}) {
-  if (!f?.chain) return "";
+export function chainChipTemplate(f, { open = false } = {}) {
+  if (!f?.chain) return nothing;
   const { links, at } = f.chain;
   const others = chainOthers(f);
   const live = others.filter(({ session: s }) => s.owner === "worker").length;
@@ -162,9 +166,10 @@ export function chainChipHtml(f, { open = false } = {}) {
   const later = links.length - 1 - at;
   const parts = [earlier ? `${earlier} earlier ${earlier === 1 ? "link" : "links"}` : "", later ? `${later} later` : ""].filter(Boolean);
   const title = `Session chain: day ${day} of ${links.length} (${parts.join(", ")}); open the list`;
-  const liveHtml = live ? `<span class="cc-live"> · <span class="live-dot" aria-hidden="true"></span>${live} live</span>` : "";
-  const waitingHtml = waiting ? ` · <span class="cc-waiting">${waiting} waiting</span>` : "";
-  return `<button type="button" class="chain-chip${waiting ? " waiting" : ""}" aria-expanded="${open ? "true" : "false"}" title="${escapeHtml(title)}"><span class="cc-arrow" aria-hidden="true">↩</span>${escapeHtml(text)}${liveHtml}${waitingHtml}</button>`;
+  const liveT = live ? html`<span class="cc-live"> · <span class="live-dot" aria-hidden="true"></span>${live} live</span>` : nothing;
+  const waitingT = waiting ? html` · <span class="cc-waiting">${waiting} waiting</span>` : nothing;
+  return html`<button type="button" class=${`chain-chip${waiting ? " waiting" : ""}`} aria-expanded=${open ? "true" : "false"}
+    title=${title}><span class="cc-arrow" aria-hidden="true">↩</span>${text}${liveT}${waitingT}</button>`;
 }
 
 // The chain's list (the chip's popover): one row per other link, newest
@@ -172,7 +177,7 @@ export function chainChipHtml(f, { open = false } = {}) {
 // its preview), the waiting / stopped badge, archived. A row's click opens
 // that link (families_view.js's popover binds .family-row[data-id]).
 // @param activeId the open session's id (its row is .active)
-export function chainRowsHtml(f, { activeId = null, now = Date.now() } = {}) {
+export function chainRowsTemplate(f, { activeId = null, now = Date.now() } = {}) {
   const byId = new Map((f?.chain?.links || []).map((s) => [s.id, s]));
   const rows = chainOthers(f).map(({ session: s, day }) => {
     const cls = ["family-row", "chain-row"];
@@ -180,22 +185,15 @@ export function chainRowsHtml(f, { activeId = null, now = Date.now() } = {}) {
     if (s.archived) cls.push("archived");
     const waiting = waitingBadge(s, { inFamily: true });
     const stopped = waiting ? null : stoppedBadge(s);
-    const dotWord = waiting ? waiting.title : s.status;
     const date = chainDate(s.created_at);
     const ago = relativeTime(s.updated_at || s.created_at || "", now);
-    const parts = [
-      `<span class="status dot ${escapeHtml(s.status || "")}${waiting ? " waiting" : ""}" title="${escapeHtml(dotWord || "")}" aria-label="${escapeHtml(dotWord || "")}"></span>`,
-      `<span class="cr-day">day ${day}</span>`,
-      date ? `<span class="cr-date">${escapeHtml(date)}</span>` : "",
-      `<span class="fr-preview">${escapeHtml(s.recap || chainTitle(s, byId))}</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>` : "",
-      s.archived ? `<span class="archived-badge" title="Archived: hidden from the lists, kept for good">archived</span>` : "",
-    ].join("");
     const tip = `${s.id} · ${s.status || ""}${ago ? ` · updated ${ago}` : ""}`;
-    return `<div class="${cls.join(" ")}" data-id="${escapeHtml(s.id)}" style="--depth:1" role="listitem"><button type="button" class="fr-open" title="${escapeHtml(tip)}">${parts}</button></div>`;
+    return html`<div class=${cls.join(" ")} data-id=${s.id} style=${"--depth:1"} role=${"listitem"}><button type="button" class="fr-open"
+      title=${tip}>${rowDotTemplate(s, waiting)}<span class="cr-day">day ${day}</span>${
+      date ? html`<span class="cr-date">${date}</span>` : nothing}<span class="fr-preview">${s.recap || chainTitle(s, byId)}</span>${
+      rowBadgesTemplate(waiting, stopped)}${s.archived ? archivedBadge : nothing}</button></div>`;
   });
-  return `<div class="family-rows chain-rows" role="list">${rows.join("")}</div>`;
+  return html`<div class="family-rows chain-rows" role="list">${rows}</div>`;
 }
 
 // What the page does with a refused continue (POST /api/sessions
@@ -228,10 +226,12 @@ export function continueRefusal(error, sessions = []) {
 // continue can't move to the next link (an older chi's worker, a chi
 // REPL), each a link to its session with what to do about it.
 // @param hrefFor (id) → its page's href
-export function openChildrenHtml(prevId, children, hrefFor) {
+export function openChildrenTemplate(prevId, children, hrefFor) {
   const n = children.length;
-  const items = children.map((c) => `<li><a href="${escapeHtml(hrefFor(c.id))}" class="cr-child">${escapeHtml(c.short)}</a>${c.text ? ` ${escapeHtml(c.text)}` : ""}</li>`).join("");
-  return `<div class="continue-refused"><div>Can't continue ${escapeHtml(String(prevId).slice(0, 8))}: ${n} open ${n === 1 ? "delegate" : "delegates"} can't move to the next link. Do what ${n === 1 ? "it says" : "each says"}, or wait for ${n === 1 ? "it" : "them"}, then continue.</div><ul>${items}</ul></div>`;
+  const items = children.map((c) => html`<li><a href=${hrefFor(c.id)} class=${"cr-child"}>${c.short}</a>${c.text ? ` ${c.text}` : nothing}</li>`);
+  const line = `Can't continue ${String(prevId).slice(0, 8)}: ${n} open ${n === 1 ? "delegate" : "delegates"} can't move to the next link. ` +
+    `Do what ${n === 1 ? "it says" : "each says"}, or wait for ${n === 1 ? "it" : "them"}, then continue.`;
+  return html`<div class="continue-refused"><div>${line}</div><ul>${items}</ul></div>`;
 }
 
 // The toast after a continue: the new link, the previous one archived (when

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

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