samagotchi 0.2.0

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

@@ -0,0 +1,74 @@
+// 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 card's class: a warn card wears the warning colour.
+export function cardClass(card) {
+  return "bubble plugin-card" + (card?.level === "warn" ? " warn" : "");
+}
+
+// Whether a card shown as a row of a step leaves the turn's block when the
+// turn ends and the block collapses (it would be hidden then): a warn card
+// always, and any card of a turn that ended without completing (canceled,
+// failed, the worker gone), which is often the card saying why and how to
+// steer. It goes after the turn's end line, where a reload puts it. An info
+// card of a completed turn stays a row of its step.
+export function leavesBlock({ warn = false, kind = "completed" } = {}) {
+  return warn || 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;
+  const body = String(card?.body ?? "");
+  return body.trim() ? `<pre>${escapeHtml(body)}</pre>` : "";
+}
+
+// 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>` : "";
+  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>`;
+}
+
+// Where a snapshot's card or between-turns notice goes: before the user
+// bubble that starts the first turn after it (turns_since counts the turns
+// completed after it), or null for the end of the history.
+export function cardPlace(userBubbles, card) {
+  return recapPlace(userBubbles, card?.turns_since);
+}
+
+// A snapshot's cards: the ones placed in the history, the running turn's
+// (a row of its current step once the turn is drawn), and the ones that
+// came during the running turn but aren't its own (an anytime command's,
+// such as /btw: after the running turn once it is drawn, as they came).
+export function splitSnapshotCards(cards) {
+  const list = Array.isArray(cards) ? cards : [];
+  return {
+    placed: list.filter((c) => !c.current && !c.during),
+    current: list.filter((c) => c.current),
+    during: list.filter((c) => !c.current && c.during),
+  };
+}
+
+// Where a snapshot's turn notice (a hook's notice during a turn, in_turn)
+// goes in its reloaded turn's block: the step of its iteration (the
+// iteration-th .gen, 0-based index here) and the key of the tool row it
+// came before (it came after +calls+ of that step's calls started), or null
+// without an iteration (the notice then goes before the turn's answer).
+export function turnNoticePlace(notice) {
+  const iteration = Number(notice?.iteration);
+  if (!notice?.in_turn || !Number.isInteger(iteration) || iteration < 1) return null;
+  return { step: iteration - 1, rowKey: `${iteration}:${(Number(notice.calls) || 0) + 1}` };
+}

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

@@ -0,0 +1,360 @@
+// The chat view of a running turn: one streaming answer bubble per
+// generation, one thinking block per turn (above the first bubble) and one
+// activity panel per turn (at the first tool call). This module owns that
+// per-turn DOM; app.js's stream handlers call it and keep the rest (prompt
+// bubbles, cards, the timing line, the session state). turn_view.js offers
+// the same interface with a different placement; app.js picks one at boot.
+//
+// deps: historyEl, appendToHistory(el) (above the live timing line),
+// isNearBottom(), sawText(normalizedText) (the turn output dedupe),
+// sessionId() (image thumbs of a tool row).
+import { newActivity, addStarted, addCompleted, finalizeActivity, activityCount, toolName } from "./activity.js";
+import { copySourceAttr } from "./copy.js";
+import { escapeHtml, leadTrimmed, messageBodyHtml, noteHtml, normalize } from "./format.js";
+import { thumbsHtml } from "./images.js";
+import { shouldFollowScroll } from "./scroll.js";
+import { tallyText } from "./tally.js";
+import { cancelLineHtml, formatDuration, timedTurnIndexes, turnRecordAt, turnTimingText } from "./timing.js";
+
+export function activityStatusClass(status) {
+  if (status === "running") return "running";
+  if (status === "error") return "error";
+  return "ok";
+}
+
+export function activityStatusLabel(status) {
+  if (status === "running") return "running";
+  if (status === "error") return "error";
+  return "done";
+}
+
+export function createChatView({ historyEl, appendToHistory, isNearBottom, sawText, sessionId }) {
+  let streamingBubble = null;
+  let streamingBuffer = "";
+  let rafPending = false;
+  let activityModel = null;
+  let activityEl = null;
+  let activityElBody = null;
+  const activityRowEls = new Map();
+  // One live "thinking" block per turn (Claude-like); streams :generation_chunk
+  // `thinking` deltas and auto-collapses on turn_completed.
+  let thinkingEl = null;
+  let thinkingBodyEl = null;
+  let thinkingBuffer = "";
+
+  function removeHint() {
+    const hint = historyEl.querySelector(".hint");
+    if (hint) hint.remove();
+  }
+
+  function ensureStreamingBubble() {
+    if (streamingBubble) return streamingBubble;
+    removeHint();
+    streamingBubble = document.createElement("div");
+    streamingBubble.className = "bubble output streaming";
+    streamingBubble.textContent = "";
+    appendToHistory(streamingBubble);
+    return streamingBubble;
+  }
+
+  function flush() {
+    rafPending = false;
+    // Runs every animation frame while streaming — must not yank a user who
+    // scrolled up to read; only follow when they were already near the bottom.
+    const follow = isNearBottom();
+    // An empty buffer keeps the "…" placeholder.
+    if (streamingBubble && streamingBuffer) {
+      streamingBubble.textContent = streamingBuffer;
+    }
+    if (thinkingBodyEl) {
+      // The capped thinking box follows its own tail the same way, unless the
+      // user scrolled up inside it.
+      const followThinking = shouldFollowScroll(thinkingBodyEl, 24);
+      thinkingBodyEl.textContent = thinkingBuffer;
+      if (followThinking) thinkingBodyEl.scrollTop = thinkingBodyEl.scrollHeight;
+    }
+    if (follow) historyEl.scrollTop = historyEl.scrollHeight;
+  }
+
+  function scheduleFlush() {
+    if (rafPending) return;
+    rafPending = true;
+    requestAnimationFrame(flush);
+  }
+
+  function appendToken(content) {
+    if (!content) return;
+    // Leading whitespace right after a closed think/tool_call block (or at the
+    // start of the stream) would otherwise render as an empty first line in
+    // the pre-wrap bubble. Trim it only at the start of a bubble so mid-bubble
+    // paragraph spacing is preserved.
+    if (streamingBuffer === "") content = content.replace(/^[ \t\r\n]+/, "");
+    if (!content) return;
+    streamingBuffer += content;
+    ensureStreamingBubble();
+    scheduleFlush();
+  }
+
+  // ── Per-turn live thinking block ─────────────────────────────────────────
+  // Routed from :generation_chunk `thinking`. One <details> per turn; accumulates
+  // across the turn's generations and collapses on turn completion.
+
+  function ensureThinkingEl() {
+    if (thinkingEl) return thinkingEl;
+    removeHint();
+    const details = document.createElement("details");
+    details.className = "bubble thinking";
+    details.open = true;
+    const summary = document.createElement("summary");
+    summary.textContent = "thinking";
+    details.appendChild(summary);
+    const body = document.createElement("div");
+    body.className = "thinking-body";
+    details.appendChild(body);
+    thinkingEl = details;
+    thinkingBodyEl = body;
+    // Prefer Claude-like ordering: thinking above the streaming answer bubble.
+    if (streamingBubble && streamingBubble.parentNode === historyEl) {
+      historyEl.insertBefore(details, streamingBubble);
+    } else {
+      appendToHistory(details);
+    }
+    return details;
+  }
+
+  function appendThinking(content) {
+    // The box starts at the first visible character, not the "\n" after <think>.
+    const piece = leadTrimmed(thinkingBuffer, content);
+    if (!piece) return;
+    thinkingBuffer += piece;
+    ensureThinkingEl();
+    scheduleFlush();
+  }
+
+  function finalizeThinkingEl() {
+    if (thinkingBodyEl) thinkingBodyEl.textContent = thinkingBuffer.replace(/[ \t\r\n]+$/, "");
+    if (thinkingEl) thinkingEl.open = false;
+    thinkingBuffer = "";
+  }
+
+  function resetThinkingState() {
+    thinkingEl = null;
+    thinkingBodyEl = null;
+    thinkingBuffer = "";
+  }
+
+  function finalizeStreaming() {
+    if (streamingBubble) {
+      const k = normalize(streamingBuffer);
+      // The text lands in the bubble on the next animation frame; a generation
+      // can end before one runs (a burst of frames, a hidden tab), so write it
+      // here too or the bubble keeps its "…" placeholder.
+      if (k) {
+        streamingBubble.textContent = streamingBuffer;
+        sawText(k);
+      }
+      else streamingBubble.remove(); // drop text-less bubbles (thinking/tool-only generations, "…" placeholder)
+      streamingBubble.classList.remove("streaming");
+      streamingBubble = null;
+    }
+    streamingBuffer = "";
+    rafPending = false;
+  }
+
+  // ── Per-turn tool/memory activity panel ──────────────────────────────────
+  // One collapsible <details> per turn; each :tool_call_started/completed upserts
+  // a row (keyed by iteration:call_index) that transitions running -> ok/error.
+  // Memory reads/writes flow through the same tool_call events, so they show here too.
+
+  function ensureActivityEl() {
+    if (activityEl) return activityEl;
+    removeHint();
+    const details = document.createElement("details");
+    details.className = "bubble activity";
+    details.open = true;
+    const summary = document.createElement("summary");
+    summary.textContent = "activity";
+    details.appendChild(summary);
+    const body = document.createElement("div");
+    body.className = "activity-body";
+    details.appendChild(body);
+    activityEl = details;
+    activityElBody = body;
+    appendToHistory(details);
+    return details;
+  }
+
+  function renderActivityRow(row) {
+    const el = document.createElement("div");
+    el.className = "activity-row";
+    el.dataset.key = row.key;
+    const statusEl = document.createElement("span");
+    statusEl.className = "activity-status";
+    const toolEl = document.createElement("span");
+    toolEl.className = "activity-tool";
+    toolEl.textContent = toolName(row);
+    const paramsEl = document.createElement("span");
+    paramsEl.className = "activity-params";
+    const outEl = document.createElement("div");
+    outEl.className = "activity-output";
+    outEl.style.display = "none";
+    el.appendChild(statusEl);
+    el.appendChild(toolEl);
+    el.appendChild(paramsEl);
+    el.appendChild(outEl);
+    activityRowEls.set(row.key, el);
+    const follow = isNearBottom();
+    (activityElBody || ensureActivityEl().querySelector(".activity-body")).appendChild(el);
+    updateActivityRowEl(row);
+    if (follow) historyEl.scrollTop = historyEl.scrollHeight;
+  }
+
+  function updateActivityRowEl(row) {
+    const el = activityRowEls.get(row.key);
+    if (!el) return;
+    fillActivityRow(el, row, sessionId());
+  }
+
+  function updateActivitySummary() {
+    if (!activityEl) return;
+    const summary = activityEl.querySelector("summary");
+    if (!summary) return;
+    // From the 3rd call: "activity · 12 tool calls (2 failed) · execute ×7 · …" (the rows show the last call).
+    const tally = tallyText(activityModel?.rows, { last: false });
+    summary.textContent = tally ? `activity · ${tally}` : `activity (${activityCount(activityModel)})`;
+  }
+
+  function finalizeActivityEl() {
+    if (activityModel) finalizeActivity(activityModel);
+    if (activityEl) activityEl.open = false;
+  }
+
+  function resetActivityState() {
+    activityModel = null;
+    activityEl = null;
+    activityElBody = null;
+    activityRowEls.clear();
+  }
+
+  function toolEvent(data, add) {
+    const model = activityModel || (activityModel = newActivity());
+    ensureActivityEl();
+    const row = add(model, data);
+    if (!activityRowEls.has(row.key)) renderActivityRow(row);
+    else updateActivityRowEl(row);
+    updateActivitySummary();
+  }
+
+  return {
+    turnStarted(data) {
+      resetActivityState();
+      resetThinkingState();
+      streamingBuffer = "";
+      ensureStreamingBubble();
+      if (data.prompt) streamingBubble.textContent = "…";
+    },
+    generationStarted() {
+      // A generation left open (a join mid-way) ends where the next begins.
+      finalizeStreaming();
+      ensureStreamingBubble();
+    },
+    chunk({ text, thinking }) {
+      if (text) appendToken(text);
+      if (thinking) appendThinking(thinking);
+    },
+    generationCompleted() {
+      finalizeStreaming();
+    },
+    toolStarted(data) {
+      toolEvent(data, (model, event) => addStarted(model, event).row);
+    },
+    toolCompleted(data) {
+      toolEvent(data, addCompleted);
+    },
+    // Everything a turn's end (completed, canceled, failed) closes.
+    turnEnded() {
+      finalizeStreaming();
+      finalizeActivityEl();
+      finalizeThinkingEl();
+    },
+    // A hook's notice stays the page's bubble in this view.
+    notice() {
+      return false;
+    },
+    // So is a card.
+    card() {
+      return false;
+    },
+    flush,
+    // The element is rewritten every frame while the turn runs (annotate
+    // skips it).
+    containsLive(el) {
+      return !!thinkingEl?.contains(el);
+    },
+    reset() {
+      streamingBubble = null;
+      streamingBuffer = "";
+      rafPending = false;
+      resetActivityState();
+      resetThinkingState();
+    },
+  };
+}
+
+// One tool row's status, name, params, output and image thumbs from its
+// activity row (activity.js). Shared with the turn view.
+// A reloaded history in the chat view (renderHistory's object path): one
+// bubble per message; each turn's timing line under its last bubble, then
+// its cancel line, where the live view leaves them.
+// +thumbs(images)+ draws a prompt's image thumbs.
+export function chatHistoryHtml(items, timing, { thumbs }) {
+  const timedTurns = timedTurnIndexes(items);
+  return items
+    .map((m, i) => {
+      if (m.role === "note") return `<div class="bubble note">${noteHtml(m)}</div>`;
+      const turnIndex = timedTurns[i];
+      const cls = m.role === "user" ? "user" : "output";
+      const { body, renderedMarkdown } = messageBodyHtml(m);
+      const markdown = renderedMarkdown ? " markdown" : "";
+      const record = turnIndex === null ? null : turnRecordAt(timing, turnIndex);
+      const timingHtml = record && formatDuration(record.duration_ms)
+        ? `<div class="turn-timing">${escapeHtml(turnTimingText(turnIndex + 1, record.duration_ms, { canceled: record.status === "canceled" }))}</div>`
+        : "";
+      // A canceled turn ends with its cancel line, as the live view left it.
+      const cancelHtml = record ? cancelLineHtml(record, escapeHtml) : "";
+      // A user bubble is a flex row (label, text, badge): its text sits in
+      // one block so quotes stack instead of lining up side by side.
+      const inner = m.role === "user" ? `<div class="user-message">${body}${thumbs(m.images)}</div>` : body;
+      // The timing line goes after the bubble, not in it: under the answer,
+      // or under the prompt of a turn canceled before any answer.
+      return `<div class="bubble ${cls}${markdown}"${copySourceAttr(m, renderedMarkdown)}>${inner}</div>${timingHtml}${cancelHtml}`;
+    })
+    .join("");
+}
+
+export function fillActivityRow(el, row, sessionId) {
+  const statusEl = el.querySelector(".activity-status");
+  statusEl.className = `activity-status ${activityStatusClass(row.status)}`;
+  statusEl.textContent = activityStatusLabel(row.status);
+  const toolEl = el.querySelector(".activity-tool");
+  if (toolEl) toolEl.textContent = toolName(row);
+  const paramsEl = el.querySelector(".activity-params");
+  if (paramsEl) paramsEl.textContent = row.params || "";
+  const outEl = el.querySelector(".activity-output");
+  if (outEl) {
+    if (row.status === "running") {
+      outEl.style.display = "none";
+      outEl.textContent = "";
+      outEl.title = "";
+    } else {
+      // dispatch prefixes output with "[tool]"; strip that noise for display.
+      const full = (row.output || "").replace(/^\[[^\]]*\]\s*/, "");
+      outEl.title = full;
+      outEl.textContent = full.length > 300 ? `${full.slice(0, 300)}…` : full;
+      outEl.style.display = full ? "" : "none";
+    }
+  }
+  // The images a tool returned (the chat view's reloaded history has no tool
+  // rows; the turn view's has, turn_view.js reloadRowHtml).
+  if (row.images?.length && !el.querySelector(".thumbs")) el.insertAdjacentHTML("beforeend", thumbsHtml(sessionId, row.images));
+}

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

@@ -0,0 +1,25 @@
+// Pure routing for one :generation_chunk event into the two render lanes.
+//
+// Phase 2 (web-stream-rendering): the server enriches each :generation_chunk with
+// additive `text` (visible prose, thinking + tool_call blocks removed) and
+// `thinking` (thinking-only) fields, leaving raw `content` untouched. When those
+// fields are present we use them and ignore raw `content`; when absent (a
+// pre-Phase-2 server, or a non-splitting profile the server did not enrich) we
+// fall back to raw `content` so behavior matches the pre-Phase-2 UI.
+//
+// Presence is checked with `typeof === "string"` (not truthiness) so an empty
+// `text` (e.g. a chunk that is entirely a tool_call body) still selects the new
+// wire instead of accidentally falling back to raw `content`.
+export function routeChunk(data) {
+  data = data || {};
+  if (typeof data.text === "string" || typeof data.thinking === "string") {
+    return {
+      text: typeof data.text === "string" ? data.text : "",
+      thinking: typeof data.thinking === "string" ? data.thinking : "",
+    };
+  }
+  return {
+    text: typeof data.content === "string" ? data.content : "",
+    thinking: "",
+  };
+}

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

@@ -0,0 +1,39 @@
+// The composer's / autocomplete: pure helpers over the session GET's
+// `commands` (Commands::Registry#listing: name, description, anytime,
+// local, uis, source).
+
+// The commands to offer while the composer holds one "/word" being typed
+// (no space or newline yet): the session's slash commands that start with
+// it, by name. The terminal UIs' own (local: /stats, /exit …) don't run here.
+export function commandMatches(commands, text) {
+  const typed = String(text || "");
+  if (!/^\/\S*$/.test(typed)) return [];
+  const needle = typed.toLowerCase();
+  return (Array.isArray(commands) ? commands : [])
+    .filter((c) => c && !c.local && typeof c.name === "string" && c.name.startsWith("/"))
+    .filter((c) => c.name.toLowerCase().startsWith(needle))
+    .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+// What picking +name+ does to the composer: {text, send}. The name
+// completes with a space for its arguments; ⏎ on a name already typed in
+// full sends it as it is (⏎ on "/help" runs /help).
+export function pickCommand(name, text, { enter = false } = {}) {
+  if (enter && String(text || "") === name) return { text: name, send: true };
+  return { text: `${name} `, send: false };
+}
+
+// The highlighted row after an arrow key (+delta+ ±1), wrapping.
+export function moveSelection(index, count, delta) {
+  if (!count) return -1;
+  return (((index + delta) % count) + count) % count;
+}
+
+// One row's parts: the name, its description, and a note (the bundle it
+// comes from; "mid-turn too" for an anytime one), "" when there is none.
+export function commandRow(command) {
+  const notes = [];
+  if (command.source && command.source !== "core") notes.push(command.source);
+  if (command.anytime) notes.push("mid-turn too");
+  return { name: command.name, description: command.description || "", note: notes.join(" · ") };
+}

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

@@ -0,0 +1,19 @@
+// The composer's height. It grows with its text up to a cap; the grip on
+// its top edge sets a taller floor (the cap then is at least that floor).
+export const PROMPT_MIN_PX = 72; // about three lines of the 15 px field
+export const PROMPT_CAP_SHARE = 0.35; // of the window's height, for growing with text
+export const PROMPT_GRIP_SHARE = 0.5; // of the window's height, for the grip
+
+// contentPx: the text's height (scrollHeight plus borders); floorPx: the
+// grip's height, or null.
+export function promptHeight({ contentPx, floorPx = null, viewportPx }) {
+  const floor = Math.max(PROMPT_MIN_PX, floorPx || 0);
+  const cap = Math.max(floor, Math.round(viewportPx * PROMPT_CAP_SHARE));
+  return { height: Math.min(Math.max(contentPx, floor), cap), scrolls: contentPx > cap };
+}
+
+// A grip drag: the floor it asks for, kept between the minimum and the
+// grip's share of the window.
+export function gripFloor(px, viewportPx) {
+  return Math.round(Math.min(Math.max(px, PROMPT_MIN_PX), viewportPx * PROMPT_GRIP_SHARE));
+}

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

@@ -0,0 +1,142 @@
+// Copy buttons: one on every prompt and answer bubble, one on every code
+// block of a rendered answer. An answer copies its markdown source (the
+// saved message's `content`, kept on the bubble as data-copy-source when the
+// page shows rendered html), a prompt the text as typed, a code block just
+// its code.
+//
+// The buttons carry no text (an icon; "copied ✓" is CSS content), so a
+// bubble's textContent, the turn output dedupe and an annotation's selected
+// text stay what they were. They are added by one observer on #history, so
+// every path that fills it (a render, a live turn in either view, the
+// turn-end markdown) gets them without knowing about them.
+
+export const COPY_SOURCE_ATTR = "data-copy-source";
+
+// +text+ to the clipboard; true when it got there. Without the Clipboard
+// API (an insecure origin, e.g. chi web on a LAN address) the old way.
+export async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch (_) {
+    const area = document.createElement("textarea");
+    area.value = text;
+    document.body.appendChild(area);
+    area.select();
+    const ok = document.execCommand("copy");
+    area.remove();
+    return ok;
+  }
+}
+
+// What a bubble copies: its kept source, else its visible text without the
+// page's chrome (timing line, badges, labels, the buttons).
+const CHROME = ".turn-timing, .state-badge, .origin-label, .thumbs, .copy-btn";
+
+export function bubbleCopyText(bubble) {
+  const source = bubble.getAttribute?.(COPY_SOURCE_ATTR);
+  if (source !== null && source !== undefined) return source;
+  const root = bubble.classList?.contains("user") ? bubble.querySelector(".user-message") || bubble : bubble;
+  return visibleText(root, CHROME).replace(/^\s+|\s+$/g, "");
+}
+
+// +el+'s text without the subtrees matching +skip+.
+export function visibleText(el, skip) {
+  let out = "";
+  for (const node of el.childNodes || []) {
+    if (node.nodeType === 3) out += node.nodeValue;
+    else if (node.nodeType === 1 && !(skip && node.matches?.(skip))) out += visibleText(node, skip);
+  }
+  return out;
+}
+
+// A code block's code: the <code> inside it (else the <pre>), without the
+// newline the markdown renderer ends every block with.
+export function codeText(pre) {
+  const code = pre.querySelector?.("code") || pre;
+  return visibleText(code, ".copy-btn").replace(/\n$/, "");
+}
+
+// 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 = String(message?.content ?? "")
+    .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 BUBBLES = ".bubble.output:not(.streaming), .bubble.user";
+const CODE = ".bubble.output pre";
+
+function makeButton(doc, kind) {
+  const btn = doc.createElement("button");
+  btn.type = "button";
+  btn.className = `copy-btn copy-${kind}`;
+  btn.title = kind === "code" ? "Copy code" : "Copy";
+  btn.setAttribute("aria-label", btn.title);
+  btn.innerHTML = ICON;
+  return btn;
+}
+
+// Buttons on every bubble and code block in +root+ (and on +root+ itself)
+// that has none yet.
+export function decorate(root) {
+  const doc = root.ownerDocument;
+  const bubbles = [...root.querySelectorAll(BUBBLES)];
+  if (root.matches(BUBBLES)) bubbles.push(root);
+  for (const bubble of bubbles) {
+    // First, so the markdown's :last-child margins still see the last block.
+    if (!bubble.querySelector(":scope > .copy-btn")) bubble.prepend(makeButton(doc, "bubble"));
+  }
+  for (const pre of root.querySelectorAll(CODE)) {
+    if (pre.parentElement?.classList.contains("code-wrap")) continue;
+    const wrap = doc.createElement("div");
+    wrap.className = "code-wrap";
+    pre.replaceWith(wrap);
+    wrap.appendChild(pre);
+    wrap.appendChild(makeButton(doc, "code"));
+  }
+}
+
+// Watch +historyEl+ and answer clicks on its buttons.
+export function installCopy(historyEl) {
+  // Only what changed is looked at: a streaming bubble rewrites its text
+  // every frame, and a long history shouldn't be walked for that.
+  const roots = new Set();
+  const run = () => {
+    const batch = [...roots];
+    roots.clear();
+    for (const el of batch) if (el.isConnected) decorate(el);
+  };
+  new MutationObserver((records) => {
+    const was = roots.size;
+    for (const r of records) {
+      if (r.target !== historyEl) roots.add(r.target);
+      for (const n of r.addedNodes) if (n.nodeType === 1) roots.add(n);
+    }
+    if (!was && roots.size) requestAnimationFrame(run);
+  }).observe(historyEl, { childList: true, subtree: true, attributes: true, attributeFilter: ["class"] });
+  decorate(historyEl);
+
+  // A press on a button must not start (or drop) a text selection.
+  historyEl.addEventListener("mousedown", (e) => {
+    if (e.target.closest?.(".copy-btn")) e.preventDefault();
+  });
+  historyEl.addEventListener("click", async (e) => {
+    const btn = e.target.closest?.(".copy-btn");
+    if (!btn) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const text = btn.classList.contains("copy-code")
+      ? codeText(btn.parentElement.querySelector("pre"))
+      : bubbleCopyText(btn.parentElement);
+    if (!(await copyText(text))) return;
+    btn.dataset.copied = "1";
+    clearTimeout(btn._copiedTimer);
+    btn._copiedTimer = setTimeout(() => { delete btn.dataset.copied; }, 1500);
+  });
+}