samagotchi 0.54.0 → 0.56.0

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

@@ -0,0 +1,269 @@
+// Session commands in the web: which composer lines are commands, the
+// page's own replies, how a command_ran shows (pure, no DOM), and the
+// command bubbles this page draws and keeps across a resync (DOM, plain
+// nodes: no lit, so the modules that import this one need no DOM to load).
+// Split out of turn_events.js and app.js.
+
+import { clientLabel, isOwn } from "./turn_events.js";
+import { anchorInsertIndex, commandAnchor, isShellCommandLine, keepsCommandBubble } from "./kept_commands.js";
+
+// Whether a composer line in an open session is one of its commands
+// (+commands+: the session GET's listing), as the terminals decide
+// (Commands::Registry#lookup): a "!" line with something after the "!", or
+// a listed name alone or followed by a space; a terminal's own (/stats,
+// /exit) too, which the page answers itself (webLocalReply). An unknown
+// "/word" (a path, a typo) goes to the model as a prompt, as in a terminal.
+export function sessionCommandLine(text, commands) {
+  const line = String(text || "").trim();
+  if (/^!\s*\S/.test(line)) return true;
+  if (!line.startsWith("/")) return false;
+  if (webLocalReply(line)) return true;
+  return (Array.isArray(commands) ? commands : [])
+    .some((c) => c && typeof c.name === "string" && (line === c.name || line.startsWith(`${c.name} `)));
+}
+
+// /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
+// 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.
+// @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 } = {}) {
+  const match = STEER_CHOICE.exec(String(text || "").trim());
+  if (!match) return null;
+  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" };
+}
+
+// A line that is one word: a slash and a name, no spaces, no second slash
+// (Commands::Registry#unknown_command_word?). `/modle` is one; `/foo bar`
+// and `/usr/bin/env` are not (they are prompts).
+const UNKNOWN_COMMAND_WORD = /^\/[A-Za-z][A-Za-z0-9_-]*$/;
+
+// The hint for a command word no command answers (a typo like `/modle`),
+// or null when the line is not one: `Unknown command /modle. Did you mean
+// /model? /help lists the commands.` The "Did you mean" part needs a close
+// name among the session's commands and the page's own (webLocalReply).
+export function unknownCommandHint(text, commands) {
+  const line = String(text || "").trim();
+  if (!UNKNOWN_COMMAND_WORD.test(line)) return null;
+  if (sessionCommandLine(line, commands)) return null;
+  const names = (Array.isArray(commands) ? commands : [])
+    .map((c) => (c && typeof c.name === "string" ? c.name : null))
+    .filter(Boolean)
+    .concat(Object.keys(WEB_LOCAL_REPLIES));
+  const close = closestName(line, names);
+  return `Unknown command ${line}. ${close ? `Did you mean ${close}? ` : ""}/help lists the commands.`;
+}
+
+// The closest name within an optimal string alignment distance of 2, or
+// null. Ties go to the first in the list.
+function closestName(line, names) {
+  let best = null;
+  let bestDistance = 3;
+  for (const name of names) {
+    const distance = osaDistance(line, name);
+    if (distance < bestDistance) {
+      best = name;
+      bestDistance = distance;
+    }
+  }
+  return best;
+}
+
+// Optimal string alignment distance: Levenshtein, with an adjacent
+// transposition counting as 1 (so `/modle` is 1 from `/model`, as Ruby's
+// DidYouMean reads it).
+function osaDistance(a, b) {
+  const rows = Array.from({ length: a.length + 1 }, (_, i) => [i, ...Array(b.length).fill(0)]);
+  for (let j = 0; j <= b.length; j += 1) rows[0][j] = j;
+  for (let i = 1; i <= a.length; i += 1) {
+    for (let j = 1; j <= b.length; j += 1) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      rows[i][j] = Math.min(rows[i - 1][j] + 1, rows[i][j - 1] + 1, rows[i - 1][j - 1] + cost);
+      if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1]) {
+        rows[i][j] = Math.min(rows[i][j], rows[i - 2][j - 2] + 1);
+      }
+    }
+  }
+  return rows[a.length][b.length];
+}
+
+// The terminal's own commands (a button in the web, or none yet): the
+// reply the page shows itself (they never go to the worker, which doesn't
+// know them), or null.
+const WEB_LOCAL_REPLIES = {
+  "/archive": "/archive: use the archive button in the session bar",
+  "/detach": "/detach: a terminal's command; close the tab to leave, the worker keeps running",
+  "/exit": "/exit: close the tab to leave; stop in the session bar stops the worker",
+  "/quit": "/quit: close the tab to leave; stop in the session bar stops the worker",
+  "/recap": "/recap: not in the web yet; a recap shows here by itself when you come back to an idle session, and /recap in a terminal (chi --attach) makes one now",
+  "/stats": "/stats: not in the web yet; each turn shows its time, the session bar the context use and speed (hover ctx for tokens and cost), and /stats in a terminal (chi --attach) has the rest",
+};
+
+export function webLocalReply(text) {
+  const name = String(text || "").trim().split(/\s+/)[0].toLowerCase();
+  return WEB_LOCAL_REPLIES[name] || null;
+}
+
+// The start page's first message when the page answers it itself
+// (webLocalReply: /stats, /exit …): shown there, with no session made just
+// to hold the reply. With images it is a message, as in a session.
+export function startPageReply(text, { images = 0 } = {}) {
+  return images ? null : webLocalReply(text);
+}
+
+// The start page's reply to a first message that needs no session at all
+// (2.29): its own command's reply (startPageReply), or the hint for a
+// command word no command answers (a typo like /modle) — the hint the page
+// shows in a session too, as a command bubble. Decided before the session
+// is created, so a first /stats or /modle leaves none behind. A null here
+// means the message goes to a session (a prompt, or anything with images).
+export function startPageReplyOrHint(text, { commands = [], images = 0 } = {}) {
+  if (images) return null;
+  return startPageReply(text) || unknownCommandHint(text, commands);
+}
+
+// The continue card's answers, as the terminal's continue prompt reads them.
+export function continueLine(choice, reason = "") {
+  const why = String(reason || "").trim();
+  if (choice === "no" && why) return `/continue no, ${why}`;
+  return `/continue ${choice}`;
+}
+
+// How to show a command_ran: `label` names another client (null for this
+// tab's own), `resync` says the conversation changed (!rollback, !cmd, a
+// continue answered no) and must be read again. An anytime command's
+// (`anytime`, D8) bubble is drawn at its command_queued, before the cards
+// it shows; its command_ran fills that bubble in (`commandId`). So is a
+// command queued for after the running turn (`queued`): its command_queued
+// (waits: "turn_end") draws it `waiting`, saying so, until it ran or was
+// dropped (styled as failed). A change that restarts the prompt cache asks
+// first (CacheConfirm): `confirm` is the line that applies it, and this
+// tab's own bubble (`own`) gets an Apply button that sends it.
+export const QUEUED_TEXT = "queued: runs after this turn";
+export const APPLY_TEXT = "Apply (restarts the cache)";
+
+export function commandView(event, myId) {
+  const own = isOwn(event.client_id, myId);
+  const waiting = event.waits === "turn_end";
+  return {
+    own,
+    label: own ? null : clientLabel(event.client_id),
+    line: event.line || "",
+    text: event.output || (waiting ? QUEUED_TEXT : ""),
+    busy: event.status === "busy",
+    failed: event.status === "error" || event.status === "dropped",
+    resync: (event.changed || []).includes("messages"),
+    modelName: event.model_name || null,
+    anytime: event.anytime === true,
+    queued: waiting || event.queued === true,
+    waiting,
+    commandId: event.command_id || null,
+    confirm: typeof event.confirm?.line === "string" ? event.confirm.line : null,
+    // A card's action (Nudge…): no bubble unless it says something back.
+    hidden: event.card === true && !event.output && event.status !== "error",
+  };
+}
+
+// Whether a command_ran that re-read the conversation (`resync`) needs its
+// own bubble: the redrawn history ends with a command bubble for its line
+// (a `!cmd` appends its "!(<command>)\n<output>" message, which renders as
+// one), so a second bubble would show the output twice. +historyBubbles+:
+// the `.bubble.command` elements in document order; +line+: the event's
+// line. Only the last one counts: it is the redrawn history's end.
+export function historyHasCommandBubble(historyBubbles, line) {
+  const last = historyBubbles[historyBubbles.length - 1];
+  return !!last && last.querySelector(":scope > .command-line")?.textContent === line;
+}
+
+// A command bubble's line and output (again, when its command_ran fills in
+// an anytime command's bubble in place), and this tab's own change's Apply
+// button when it asks first (a delegated click sends its line: app.js).
+// Command bubbles are page-only: after a reload the button is gone, and
+// the change is typed again.
+export function drawCommandBubble(div, { label, line, text, busy = false, failed = false, waiting = false, commandId = null,
+                                         own = false, confirm = null }) {
+  div.className = "bubble command" + (busy ? " busy" : "") + (failed ? " failed" : "") + (waiting ? " queued" : "");
+  if (commandId) div.dataset.commandId = commandId;
+  div.replaceChildren();
+  const head = document.createElement("div");
+  head.className = "command-line";
+  head.textContent = label ? `${label}> ${line}` : line;
+  div.appendChild(head);
+  if (text) {
+    const body = document.createElement("pre");
+    body.className = "command-output";
+    body.textContent = text;
+    div.appendChild(body);
+  }
+  if (own && confirm) {
+    const apply = document.createElement("button");
+    apply.type = "button";
+    apply.className = "command-confirm";
+    apply.dataset.confirmLine = confirm;
+    apply.title = confirm;
+    apply.textContent = APPLY_TEXT;
+    div.appendChild(apply);
+  }
+}
+
+// A click on a bubble's Apply button: sends its --yes line once (the
+// button is disabled at once), and enables it again when the line wasn't
+// sent (+run+ resolves false or throws), so the user can try again.
+export async function applyConfirm(button, run) {
+  if (!button || button.disabled) return;
+  button.disabled = true;
+  let sent = false;
+  try {
+    sent = await run(button.dataset.confirmLine);
+  } catch {
+    sent = false;
+  }
+  if (!sent) button.disabled = false;
+}
+
+// The prompt and command bubbles in the history, in order, by kind
+// (kept_commands.js): a prompt, a `!cmd`'s (saved, so redrawn) or another.
+function historyAnchors(historyEl) {
+  const els = [...historyEl.querySelectorAll(".bubble.user, .bubble.command")];
+  const kinds = els.map((el) => {
+    if (el.classList.contains("user")) return "user";
+    const line = el.querySelector(":scope > .command-line")?.textContent;
+    return !el.classList.contains("failed") && isShellCommandLine(line) ? "shell" : "other";
+  });
+  return { els, kinds };
+}
+
+// This session's own command bubbles (/help, /model …: drawn by this page,
+// never saved) with their anchors, before a resync redraws the history.
+// In-flight ones (busy, queued) are left out: the snapshot draws them again.
+export function keptCommandBubbles(historyEl, id) {
+  const { els, kinds } = historyAnchors(historyEl);
+  return els
+    .map((el, i) => ({ el, anchor: commandAnchor(kinds, i) }))
+    .filter(({ el }) => el.dataset.keptFor === id && !el.classList.contains("busy") && !el.classList.contains("queued"))
+    .filter(({ el }) => keepsCommandBubble(el.querySelector(":scope > .command-line")?.textContent));
+}
+
+// The kept bubbles back into the redrawn history, each after its turn.
+export function restoreCommandBubbles(historyEl, kept) {
+  if (!kept.length) return;
+  historyEl.querySelector(".hint")?.remove();
+  kept.forEach(({ el, anchor }) => {
+    const { els, kinds } = historyAnchors(historyEl);
+    const at = anchorInsertIndex(kinds, anchor);
+    if (at < els.length) els[at].before(el);
+    else historyEl.appendChild(el);
+  });
+}

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

@@ -0,0 +1,105 @@
+// The composer's line: where a typed line goes (routeComposerLine, pure),
+// and a session command sent from it or from a control such as the llm ctx
+// chip (createComposerCommands: no DOM, the page passes its hooks). Split
+// out of app.js; plain JS, no markup.
+
+import { sessionCommandLine, startPageReplyOrHint, steerChoiceRoute, unknownCommandHint, webLocalReply } from "./commands.js";
+
+// 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.
+//   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
+//      reply to a terminal's command, a typo hint, else a turn.
+// +images+ is the count of image chips: a line with images is a message.
+// @return one of
+//   {reply, line}            the page answers itself (a bubble in a session,
+//                            a notice on the start page); nothing is sent
+//   {create: true, send, delivery}  start page: make a session, then route
+//                            +send+ again in it (routeSessionLine, with its
+//                            commands)
+//   {command}                POST /command
+//   {send, delivery}         POST /turn (+delivery+ "cut" 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 };
+  const prompt = choice ? choice.send : text;
+  const delivery = choice?.delivery || null;
+  if (!session) {
+    const local = startPageReplyOrHint(prompt, { commands, images });
+    if (local) return { reply: local, line: prompt };
+    return { create: true, send: prompt, delivery };
+  }
+  return routeSessionLine(prompt, { commands, images, delivery });
+}
+
+// A line in a session, after its /cut or /queue was read: a session command
+// by the session's list (+commands+), or the page's own reply to one of a
+// terminal's; an unknown /word is a prompt, as in a terminal, but a typo of
+// a command (/modle) gets the hint, not a turn.
+export function routeSessionLine(prompt, { commands = [], images = 0, delivery = null } = {}) {
+  if (!images && sessionCommandLine(prompt, commands)) {
+    const local = webLocalReply(prompt);
+    return local ? { reply: local, line: prompt } : { command: prompt };
+  }
+  if (!images) {
+    const typo = unknownCommandHint(prompt, commands);
+    if (typo) return { reply: typo, line: prompt };
+  }
+  return { send: prompt, delivery };
+}
+
+// /model, !ls, /continue no … run in the session's worker; every client
+// shows the command_ran, this one too.
+// deps:
+//   session()            the open session's id, or null
+//   clientId             this tab's id (the command_ran's origin)
+//   sendCommand(id, line, {clientId})   POST /command (data.js)
+//   followWokenWorker()  the command woke the worker: follow its stream
+//   refreshHistory()
+//   failed(line, text)   a failed command's bubble
+//   ownedByTui()         a plain terminal holds the session
+//   composer: {busy(), clear(), done()}   the composer's send button and text
+export function createComposerCommands(deps) {
+  const { session, clientId, sendCommand, followWokenWorker, refreshHistory, failed, ownedByTui, composer } = deps;
+
+  // A line typed in the composer (routeComposerLine's {command}).
+  async function send(line) {
+    composer.busy();
+    try {
+      await sendCommand(session(), line, { clientId });
+      composer.clear();
+      refreshHistory();
+      followWokenWorker();
+    } catch (e) {
+      if (e.code === "owned_by_tui") {
+        ownedByTui();
+        return;
+      }
+      failed(line, e.message);
+    } finally {
+      composer.done();
+    }
+  }
+
+  // A session command from a control (the llm ctx chip), not the composer:
+  // its command_ran shows its line and reply, as a typed one's would.
+  // Resolves true once the worker took it, false when it wasn't sent (no
+  // session, a refusal or a network error: the failed bubble says why).
+  async function run(line) {
+    const id = session();
+    if (!id) return false;
+    try {
+      await sendCommand(id, line, { clientId });
+      followWokenWorker();
+      return true;
+    } catch (e) {
+      failed(line, e.message);
+      return false;
+    }
+  }
+
+  return { send, run };
+}

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

@@ -29,8 +29,33 @@ export function diffLineClass(line) {
   return "ctx";
 }
 
-function linesHtml(lines) {
-  return lines.map((line) => `<span class="diff-line diff-${diffLineClass(line)}">${escapeHtml(line) || " "}</span>`).join("");
+// Each line's line number in the file after the change (the new side),
+// from the hunk headers ("@@ -a,b +c,d @@"): a hunk header its hunk's
+// start, a context or added line its own, a removed line the line it was
+// removed before; null outside a hunk and for a meta line ("\ No newline
+// at end of file", "… N more lines"). An emptied file's hunk (+0,0) gives
+// 0, which no line carries.
+export function diffLineNumbers(lines) {
+  let next = null;
+  return lines.map((line) => {
+    const kind = diffLineClass(line);
+    if (kind === "hunk") {
+      const m = /^@@ -\d+(?:,\d+)? \+(\d+)/.exec(line);
+      next = m ? Number(m[1]) : null;
+      return next;
+    }
+    if (next === null || kind === "meta") return null;
+    if (kind === "del") return next;
+    return next++;
+  });
+}
+
+// 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("");
 }
 
 // @param diff an EditPreview: a diff, or {error} / {skipped}
@@ -43,11 +68,12 @@ export function diffHtml(diff, { fold = DIFF_FOLD_LINES } = {}) {
   if (!text) return `<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 shown = `<pre class="diff"><code>${linesHtml(lines.slice(0, fold))}</code></pre>`;
+  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;
   // 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))}</code></pre></details>`;
+    `<pre class="diff"><code>${linesHtml(lines.slice(fold), numbers.slice(fold))}</code></pre></details>`;
   return head + shown + rest;
 }
 

data/lib/samagotchi/web/public/index.html

@@ -307,6 +307,9 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
 .bubble.command.queued .command-output{color:var(--text-faint)}
 .command-line{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-3)}
 .command-output{margin:6px 0 0;white-space:pre-wrap;font-size:12px;color:var(--text-2)}
+.bubble.command .command-confirm{margin-top:8px;padding:3px 10px;border-radius:6px;font:inherit;font-size:12px;cursor:pointer;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border)}
+.bubble.command .command-confirm:hover:not(:disabled){border-color:var(--accent)}
+.bubble.command .command-confirm:disabled{opacity:.55;cursor:default}
 .bubble.continue{border-left:3px solid var(--accent);background:var(--bg-panel);padding:10px 12px}
 .bubble.continue.resolved{border-left-color:var(--text-muted);opacity:.8}
 .continue-text{font-size:14px;color:var(--text);margin-bottom:6px}
@@ -365,6 +368,11 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
 .diff{margin:0;padding:4px 0;background:var(--bg-inset);border:1px solid var(--border);border-radius:6px;font-size:12px;line-height:1.45;overflow:auto;max-height:420px}
 .diff code{display:block;min-width:max-content}
 .diff-line{display:block;padding:0 10px;white-space:pre;color:var(--text-2)}
+/* Refs (refs.js): text until hovered, and only for a kind this viewer has an action for (body.refs-file). */
+.refs-file .ref[data-ref-kind="file"]:hover{color:var(--accent);text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
+.refs-file .ref[data-ref-kind="file"]:hover::after{content:"\2197";margin-left:.3em;color:var(--text-faint);display:inline-block}
+.refs-file .activity-row:has(.ref[data-ref-kind="file"]) .diff-line[data-line]:hover{cursor:pointer;box-shadow:inset 2px 0 var(--accent)}
+.refs-file .activity-row:has(.ref[data-ref-kind="file"]) .diff-line[data-line]:hover::after{content:"\2197  " attr(data-line);float:right;padding-left:12px;color:var(--text-faint)}
 .diff-add{background:var(--diff-add-bg);color:var(--diff-add-text)}
 .diff-del{background:var(--diff-del-bg);color:var(--diff-del-text)}
 .diff-hunk{color:var(--text-faint)}
@@ -699,9 +707,9 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 #infoBar #infoDeleteBtn{background:transparent;color:var(--text-muted);border:1px solid transparent}
 #infoBar #infoDeleteBtn:hover{color:var(--on-solid);background:var(--danger-bg);border-color:var(--danger-bg)}
 /* The LLM context and thinking chips (llm_context_chip.js, thinking_chip.js): model-like chips that open their popovers; accent when the session set its own. */
-#infoBar .meta .llmctx-chip,#infoBar .meta .think-chip{padding:2px 6px;border-radius:6px;font-size:11px;font-weight:400;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap}
-#infoBar .meta .llmctx-chip:hover,#infoBar .meta .think-chip:hover{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
-#infoBar .meta .llmctx-chip.own,#infoBar .meta .think-chip.own{color:var(--accent);border-color:var(--accent-border)}
+#infoBar .meta .llmctx-chip,#infoBar .meta .think-chip,#infoBar .meta .rh-chip{padding:2px 6px;border-radius:6px;font-size:11px;font-weight:400;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap}
+#infoBar .meta .llmctx-chip:hover,#infoBar .meta .think-chip:hover,#infoBar .meta .rh-chip:hover{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
+#infoBar .meta .llmctx-chip.own,#infoBar .meta .think-chip.own,#infoBar .meta .rh-chip.own{color:var(--accent);border-color:var(--accent-border)}
 .llmctx-form{display:flex;flex-direction:column;gap:8px;margin:0}
 .llmctx-form .ctx-pop-head strong{font-family:inherit}
 .llmctx-field{display:flex;align-items:center;gap:8px}

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

@@ -0,0 +1,80 @@
+// The session bar's info line (#infoText): the open session's id, its copy
+// chi --attach button, status, model, chain links, parent and delegates,
+// llm ctx, thinking and reasoning history chips, model notes, memories, folder, ctx, speed,
+// session clock and the worker's version badge. A lit-html template over a
+// plain model app.js builds (updateInfoBar), so the markup lives here and
+// runs under node --test (spec/web/public/info_bar.test.js).
+//
+// It is redrawn every second while a turn runs (the session clock): lit
+// writes only what changed, so a shown tooltip stays up, a press on one of
+// its buttons isn't lost to a rewrite, and the chips' popovers keep their
+// anchor (clicks on it are delegated, app.js and the chip controls).
+
+import { html, nothing, render } from "./vendor/lit-html.js";
+import { memChipText, memChipTitle } from "./format.js";
+import { ALL_SESSIONS_HASH, sessionHash } from "./route.js";
+import { chipTemplate as llmContextChip } from "./llm_context_chip.js";
+import { chipTemplate as thinkingChip } from "./thinking_chip.js";
+import { chipTemplate as reasoningHistoryChip } from "./reasoning_history_chip.js";
+
+export const PREV = "←";
+export const NEXT = "→";
+
+// A chain's ← / → link (chains.js chainNeighbours): its date (else its short
+// id), its preview and id in the tooltip. +link+: {id, date, preview,
+// archived}.
+export function chainLinkTemplate(link, arrow, what) {
+  const short = String(link.id).slice(0, 8);
+  const title = `${what}: ${short}${link.preview ? ` · ${link.preview}` : ""}${link.archived ? " (archived)" : ""}`;
+  const text = arrow === PREV ? `${arrow} ${link.date || short}` : `${link.date || short} ${arrow}`;
+  return html`<a class="model chain-link" href=${sessionHash(link.id)} title=${title}>${text}</a>`;
+}
+
+// `memories: a, b · preloaded: c · muted: d`: the used memories always,
+// the session's --memory and --mute lists only when there are any.
+export function memoriesTooltip(used, preloaded, muted) {
+  const parts = [`memories: ${(used || []).join(", ") || "—"}`];
+  if (preloaded && preloaded.length) parts.push(`preloaded: ${preloaded.join(", ")}`);
+  if (muted && muted.length) parts.push(`muted: ${muted.join(", ")}`);
+  return parts.join(" · ");
+}
+
+// The open session's worker runs an older chi than the newest installed
+// (update_notice.js workerBadge): its badge, with Restart when it can.
+function workerBadgeTemplate(worker) {
+  if (!worker?.badge) return nothing;
+  const { badge, busy } = worker;
+  const button = badge.restart
+    ? html`<button type="button" class="worker-restart" ?disabled=${busy}>${busy ? "restarting…" : "Restart"}</button>`
+    : nothing;
+  return html`<span class="worker-badge" title=${badge.title}>${badge.text}${button}</span>`;
+}
+
+function kidsTemplate(kids) {
+  if (!kids) return nothing;
+  const waiting = kids.waitingText ? html` · <span class="kids-waiting">${kids.waitingText}</span>` : nothing;
+  return html`<a class=${`model children-chip${kids.waitingText ? " waiting" : ""}`} href=${ALL_SESSIONS_HASH} title=${`${kids.title} (all sessions)`}>${kids.text}${waiting}</a>`;
+}
+
+// The info line for +bar+, nothing without a session (the start page hides
+// the bar). +bar+:
+//   id, copied (the copy button just copied), status, model ({text, title,
+//   mismatch}: format.js modelLabel), chain ({prev, next}: chainLinkTemplate's
+//   links or null), parent ({id, title} or null), kids (format.js
+//   childrenSummary), llmContext, thinking and reasoningHistory (the chips'
+//   summaries; reasoningHistory null on a native host: no chip), notes
+//   ({text, title} or null), memories (the used names), dir, ctx ({text,
+//   tip}), speed ({text, tip} or null), clock (the session time's text, ""
+//   for none), worker ({badge, busy} or null).
+export function infoBarHtml(bar) {
+  if (!bar) return nothing;
+  const attach = `chi --attach ${bar.id}`;
+  const memories = bar.memories || [];
+  return html`<div class="meta"><span class="id" title=${bar.id}>${String(bar.id).slice(0, 8)}</span><button type="button" class="copy-attach" title=${`Copy "${attach}" to attach a terminal`}>${bar.copied ? "copied ✓" : "copy chi --attach"}</button><span class=${bar.status ? `status ${bar.status}` : "status"}>${bar.status || ""}</span><span class=${`model${bar.model.mismatch ? " served-mismatch" : ""}`} title=${bar.model.title}>${bar.model.text}</span>${bar.chain?.prev ? chainLinkTemplate(bar.chain.prev, PREV, "The previous link of this chain") : nothing}${bar.chain?.next ? chainLinkTemplate(bar.chain.next, NEXT, "The next link of this chain") : nothing}${bar.parent ? html`<a class="model parent" href=${sessionHash(bar.parent.id)} title=${bar.parent.title}>delegated by ${String(bar.parent.id).slice(0, 8)}</a>` : nothing}${kidsTemplate(bar.kids)}${llmContextChip(bar.llmContext)}${thinkingChip(bar.thinking)}${reasoningHistoryChip(bar.reasoningHistory)}${bar.notes ? html`<span class="model notes-chip" title=${bar.notes.title}>${bar.notes.text}</span>` : nothing}${memories.length ? html`<span class="model mem-chip" title=${memChipTitle(memories)}>${memChipText(memories)}</span>` : nothing}<span class="dir" title=${bar.dir || ""}><bdi>${bar.dir || ""}</bdi></span><span class="model ctx" title=${bar.ctx.tip}>${bar.ctx.text}</span>${bar.speed ? html`<span class="model speed" title=${bar.speed.tip}>${bar.speed.text}</span>` : nothing}${bar.clock ? html`<span class="model session-time">${bar.clock}</span>` : nothing}${workerBadgeTemplate(bar.worker)}</div>`;
+}
+
+// Draws +bar+ into +el+ (#infoText), with the memories in its tooltip.
+export function renderInfoBar(el, bar) {
+  render(infoBarHtml(bar), el);
+  el.title = bar ? memoriesTooltip(bar.memories, bar.preloaded, bar.muted) : "";
+}