samagotchi 0.61.0 → 0.63.0

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

@@ -1,15 +1,17 @@
-// The turn's pieces as HTML, one builder for the live page and a reload:
-// a tool row, a prompt bubble and the notice of a turn with no answer. The
-// live page makes its elements from the same markup a reload writes
-// (htmlElement), so the two can't drift apart. Pure but htmlElement: `node --test` covers it.
+// The turn's pieces as lit-html templates, one for the live page and a
+// reload: a tool row, a prompt bubble, a note, a steer, the notice of a
+// turn with no answer. The live page renders the same template a reload
+// does (elementOf, or its own lit root for a tool row), so the two can't
+// drift apart. `node --test` covers it (on the happy-dom shim).
 import { toolName } from "./activity.js";
-import { commandBlockHtml, rowHover } from "./command_view.js";
-import { copySourceAttr } from "./copy.js";
-import { activityDiffHtml } from "./diff_view.js";
-import { escapeHtml, userBodyHtml } from "./format.js";
-import { refAttrs } from "./refs.js";
-import { readLinesHtml } from "./read_view.js";
-import { formatDuration } from "./timing.js";
+import { html, nothing, render } from "./vendor/lit-html.js";
+import { commandBlockTemplate, rowHover } from "./command_view.js";
+import { copySource } from "./copy.js";
+import { activityDiffTemplate } from "./diff_view.js";
+import { steerSender } from "./format.js";
+import { rowTitleRef } from "./refs.js";
+import { readLinesTemplate } from "./read_view.js";
+import { STOPPED_LINE_CLASS, cancelLineText, formatDuration } from "./timing.js";
 import { emptyAnswerLine } from "./turn_events.js";
 
 // A row's status (live, or a saved tool record's on reload): running,
@@ -31,12 +33,14 @@ export function statusParts(status, { noMatch = false } = {}) {
   return { cls, label, word: cls === "ok" || cls === "running" ? "" : label };
 }
 
-function statusMarkHtml({ cls, label }) {
-  return `<span class="activity-status ${cls}" role="img" aria-label="${label}" title="${label}"></span>`;
+// role is bound too: lit sets bound attributes after the static ones, and
+// the markup keeps the order a reload wrote before.
+function statusMarkTemplate({ cls, label }) {
+  return html`<span class="activity-status ${cls}" role=${"img"} aria-label=${label} title=${label}></span>`;
 }
 
-function statusWordHtml({ cls, word, wordCls }) {
-  return word ? `<span class="activity-state ${wordCls || cls}">${word}</span>` : "";
+function statusWordTemplate({ cls, word, wordCls }) {
+  return word ? html`<span class="activity-state ${wordCls || cls}">${word}</span>` : nothing;
 }
 
 // A reloaded row's ✂ mark: what an LLM context edit saved on its output
@@ -62,11 +66,11 @@ function compactTokens(n) {
   return n >= 1000 ? `${(n / 1000).toFixed(1)}k tokens` : `${n} tokens`;
 }
 
-function llmEditHtml(row) {
+function llmEditTemplate(row) {
   const line = llmEditLine(row.edit);
-  if (!line) return "";
+  if (!line) return nothing;
   const hover = `${row.tool_id ? `${row.tool_id}: ` : ""}${line}\nThe model is sent this instead of the output; the session keeps it.`;
-  return `<div class="activity-edit" title="${escapeHtml(hover)}">${escapeHtml(line)}</div>`;
+  return html`<div class="activity-edit" title=${hover}>${line}</div>`;
 }
 
 // A tool row: its status mark, tool, title (else params; the full command,
@@ -76,30 +80,35 @@ function llmEditHtml(row) {
 // the rest on hover; a read of the file as-is also its numbered lines,
 // closed: read_view.js), its images (+thumbs+(images) draws them) and an
 // edit's collapsed diff, and a reloaded row's ✂ mark above its output. A
-// part with nothing to say is left out.
-export function toolRowHtml(row, { thumbs = () => "" } = {}) {
-  return `<div class="activity-row" data-key="${escapeHtml(row.key)}">${toolRowInnerHtml(row, { thumbs })}</div>`;
+// part with nothing to say is left out. A reload renders toolRowTemplate;
+// the live view renders toolRowInnerTemplate into its own row element
+// (turn_view.js), again on each event: lit writes only what changed, so a
+// part the user toggled (the raw command, the diff, the read lines) stays.
+// +stop+: the live row's stop-task button (a node), after the title.
+export function toolRowTemplate(row, opts = {}) {
+  return html`<div class="activity-row" data-key=${row.key}>${toolRowInnerTemplate(row, opts)}</div>`;
 }
 
-export function toolRowInnerHtml(row, { thumbs = () => "" } = {}) {
+export function toolRowInnerTemplate(row, { thumbs = () => nothing, stop = nothing } = {}) {
   const shown = row.title || row.params;
-  const hover = rowHover(row) ? ` title="${escapeHtml(rowHover(row))}"` : "";
-  // A row with a ref (a file tool's file) carries it on its title, which
-  // opens it, and its diff lines open it at their line (refs.js).
-  const ref = shown ? refAttrs(row.ref) : "";
-  const params = shown ? `<span class="activity-params${ref ? " ref" : ""}"${hover}${ref}>${escapeHtml(shown)}</span>` : "";
+  const hover = rowHover(row);
+  // A row with a ref (a file tool's file, else a plugin tool's first ref)
+  // carries it on its title, which opens it, and its diff lines open it at
+  // their line (refs.js; bindRowRefs binds a plugin's data to the title).
+  const ref = shown ? rowTitleRef(row) : null;
+  const attr = (value) => (value ? String(value) : nothing);
+  const params = shown
+    ? html`<span class=${`activity-params${ref?.kind ? " ref" : ""}`} title=${hover || nothing} data-ref-kind=${attr(ref?.kind)} data-ref-path=${attr(ref?.kind && ref.path)} data-ref-line=${attr(ref?.kind && ref.line)} data-ref-end-line=${attr(ref?.kind && ref.end_line)}>${shown}</span>`
+    : nothing;
   // The name the model called the tool by when it was an alias's, dim.
-  const alias = row.called_as ? `<span class="activity-alias">(called as ${escapeHtml(row.called_as)})</span>` : "";
+  const alias = row.called_as ? html`<span class="activity-alias">(called as ${row.called_as})</span>` : nothing;
   const duration = formatDuration(row.duration_ms);
   const full = row.status === "running" ? "" : String(row.output || "").replace(/^\[[^\]]*\]\s*/, "");
   const output = full
-    ? `<div class="activity-output" title="${escapeHtml(full)}">${escapeHtml(full.length > 300 ? `${full.slice(0, 300)}…` : full)}</div>`
-    : "";
+    ? html`<div class="activity-output" title=${full}>${full.length > 300 ? `${full.slice(0, 300)}…` : full}</div>`
+    : nothing;
   const status = statusParts(row.status, { noMatch: !!row.no_match });
-  return `${statusMarkHtml(status)}<span class="activity-tool">${escapeHtml(toolName(row))}</span>${params}${alias}${statusWordHtml(status)}` +
-    `${duration ? `<span class="activity-duration">${escapeHtml(duration)}</span>` : ""}` +
-    `${commandBlockHtml(row.view, row.title)}${llmEditHtml(row)}${output}${output ? readLinesHtml(row) : ""}` +
-    `${row.images?.length ? thumbs(row.images) : ""}${row.diff ? activityDiffHtml(row.diff) : ""}`;
+  return html`${statusMarkTemplate(status)}<span class="activity-tool">${toolName(row)}</span>${params}${stop}${alias}${statusWordTemplate(status)}${duration ? html`<span class="activity-duration">${duration}</span>` : nothing}${commandBlockTemplate(row.view, row.title)}${llmEditTemplate(row)}${output}${full ? readLinesTemplate(row) : nothing}${row.images?.length ? thumbs(row.images) : nothing}${row.diff ? activityDiffTemplate(row.diff) : nothing}`;
 }
 
 // A prompt bubble's states and their badges: queued (waiting for its
@@ -107,8 +116,8 @@ export function toolRowInnerHtml(row, { thumbs = () => "" } = {}) {
 // gave it back). Any other state ("started", none) is a plain bubble.
 export const BADGES = { queued: "queued", steered: "steered", failed: "failed" };
 
-export function stateBadgeHtml(state) {
-  return BADGES[state] ? `<span class="state-badge">${escapeHtml(BADGES[state])}</span>` : "";
+export function stateBadgeTemplate(state) {
+  return BADGES[state] ? html`<span class="state-badge">${BADGES[state]}</span>` : nothing;
 }
 
 // A `!cmd`'s saved user message (the worker appends "!(<command>)\n<output>"
@@ -127,45 +136,97 @@ export function shellCommandMessage(content) {
 // A `!cmd`'s history bubble: the same markup the live page draws for a
 // command (app.js's drawCommandBubble): the line, the output in a
 // pre.command-output.
-export function commandBubbleHtml({ line, text }) {
-  const body = text ? `<pre class="command-output">${escapeHtml(text)}</pre>` : "";
-  return `<div class="bubble command"><div class="command-line">${escapeHtml(line)}</div>${body}</div>`;
+export function commandBubbleTemplate({ line, text }) {
+  const body = text ? html`<pre class="command-output">${text}</pre>` : nothing;
+  return html`<div class="bubble command"><div class="command-line">${line}</div>${body}</div>`;
+}
+
+// A user message's body: runs of `>` lines become <blockquote>s, the rest
+// stays text. The bubble is pre-wrap, so the blank lines around a quote
+// are dropped (the blockquote's margin spaces it instead).
+export function userBodyTemplate(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 String(content ?? "");
+  return blocks.map((b) => {
+    if (b.kind === "quote") return html`<blockquote>${b.lines.join("\n")}</blockquote>`;
+    const body = b.lines.join("\n").replace(/^\s*\n/, "").replace(/\n\s*$/, "");
+    return body.trim() ? body : nothing;
+  });
+}
+
+// An answer's bubble (+cls+: a report reply's; +at+: its message's index,
+// data-answer-at): an assistant's rendered markdown (the server's html,
+// sanitized there) set as it is, as the live turn end sets it
+// (answer_refs.js applyFinalAnswer), else its text, set whole (no lit
+// markers inside: the bubble's nodes are the live one's). Its markdown
+// source is kept for the copy button when it shows rendered html.
+export function answerBubbleTemplate(message, { cls = "", at = null } = {}) {
+  const rendered = message?.role === "assistant" && typeof message.html === "string";
+  const user = !rendered && message?.role === "user";
+  const klass = `bubble output${cls}${rendered ? " markdown" : ""}`;
+  const answerAt = at ?? nothing;
+  const source = rendered || user ? copySource(message) : nothing;
+  if (rendered) return html`<div class=${klass} data-answer-at=${answerAt} data-copy-source=${source} .innerHTML=${message.html}></div>`;
+  if (user) return html`<div class=${klass} data-answer-at=${answerAt} data-copy-source=${source}>${userBodyTemplate(message.content)}</div>`;
+  return html`<div class=${klass} data-answer-at=${answerAt} data-copy-source=${source} .textContent=${String(message?.content ?? "")}></div>`;
+}
+
+// A context note's bubble (background the user or another session pushed
+// in; the model reads it, nobody asked it anything): who sent it, then its
+// text.
+export function noteBubbleTemplate(note) {
+  const from = note?.label ? `note from ${note.label}` : "note";
+  return html`<div class="bubble note"><div class="note-line">${from}</div><div class="note-text">${note?.content ?? ""}</div></div>`;
+}
+
+// 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 steerRowTemplate({ source, text } = {}, { bubble = false } = {}) {
+  const sender = steerSender(source);
+  const who = sender ? `${sender} nudged the model` : "nudged the model";
+  return html`<details class=${`${bubble ? "bubble " : ""}steer-row`}><summary>${who}</summary><div class="steer-text">${text ?? ""}</div></details>`;
 }
 
 // A user's line: who sent it (+label+, a delegate report's or another
 // client's), its body (`>` lines as quotes) and +thumbs+ (its images'
-// markup), its state's badge. +message+: { content, display } (the copy
+// template), its state's badge. +message+: { content, display } (the copy
 // source keeps the text as written). +step+: the step that read a line
 // merged mid-turn (a reload's; a resolved question goes before it).
 // The live page's own: +own+ (this tab sent it), +enqueuedId+ and +key+
 // (its normalized text: an echo waiting for its id is matched by it).
-export function userBubbleHtml(message, { label = null, state = null, step = null, thumbs = "", own = false, enqueuedId = null, key = null } = {}) {
+export function userBubbleTemplate(message, { label = null, state = null, step = null, thumbs = nothing, own = false, enqueuedId = null, key = null } = {}) {
   const named = BADGES[state] ? state : null;
-  const attrs = [
-    `class="bubble user${named ? ` ${named}` : ""}"`,
-    named ? `data-user-state="${named}"` : "",
-    step ? `data-step="${Number(step)}"` : "",
-  ].filter(Boolean).join(" ");
-  const live = [
-    key !== null ? ` data-user-content="${escapeHtml(key)}"` : "",
-    own ? ' data-own="1"' : "",
-    enqueuedId ? ` data-enqueued-id="${escapeHtml(enqueuedId)}"` : "",
-  ].join("");
-  const from = label ? `<span class="origin-label">${escapeHtml(label)}</span>` : "";
-  return `<div ${attrs}${copySourceAttr({ ...message, role: "user" }, false)}${live}>${from}` +
-    `<div class="user-message">${userBodyHtml(message?.content)}${thumbs}</div>${stateBadgeHtml(named)}</div>`;
+  const from = label ? html`<span class="origin-label">${label}</span>` : nothing;
+  return html`<div class=${`bubble user${named ? ` ${named}` : ""}`} data-user-state=${named || nothing} data-step=${step ? Number(step) : nothing} data-copy-source=${copySource({ ...message, role: "user" })} data-user-content=${key !== null ? key : nothing} data-own=${own ? "1" : nothing} data-enqueued-id=${enqueuedId || nothing}>${from}<div class="user-message">${userBodyTemplate(message?.content)}${thumbs}</div>${stateBadgeTemplate(named)}</div>`;
 }
 
 // The notice of a turn that ended with no answer (the server's
 // empty_answer item, turn_summary.empty_answer live): a muted row like the
 // loop's retry row, where the answer would be.
-export function emptyAnswerHtml(item) {
-  return `<div class="bubble hook-notice empty-answer">${escapeHtml(emptyAnswerLine(item))}</div>`;
+export function emptyAnswerTemplate(item) {
+  return html`<div class="bubble hook-notice empty-answer">${emptyAnswerLine(item)}</div>`;
+}
+
+// A re-rendered turn's cancel line (a .bubble.cancel.stopped, as live's
+// addEndBubble), nothing when the turn record is not a canceled one.
+export function cancelLineTemplate(record) {
+  if (record?.status !== "canceled") return nothing;
+  return html`<div class=${STOPPED_LINE_CLASS}>${cancelLineText(record.cancellation_reason, record.cancelled_by)}</div>`;
 }
 
-// The element +html+ (one top-level element) describes.
-export function htmlElement(html) {
-  const template = document.createElement("template");
-  template.innerHTML = html;
-  return template.content.firstElementChild;
+// +template+'s one top-level element, rendered once (the live page's
+// bubbles: their classes and badge change by hand after this).
+export function elementOf(template) {
+  const frag = document.createDocumentFragment();
+  render(template, frag);
+  return frag.firstElementChild;
 }

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

@@ -152,6 +152,20 @@ export function notice(turn, { hook, text, level } = {}) {
   return { gen };
 }
 
+// The whole text of the reply that asked the user (a question or an
+// approval blocks its call): the last gen's text, trimmed, while one of its
+// calls runs and the turn goes on; else "". Only that step's text: a hook's
+// question (asked before its call's row, or between steps) has no running
+// row there, so it gets none rather than another step's (or the answer's)
+// text. The stage shows it while the card waits; the card keeps it once
+// answered.
+export function askingText(turn) {
+  if (!turn || turn.ended) return "";
+  const gen = turn.gens[turn.gens.length - 1];
+  if (!gen?.text || !gen.tools.some((row) => row.status === "running")) return "";
+  return gen.text.trim();
+}
+
 // The turn is over (completed, canceled, failed, the worker gone).
 export function turnEnded(turn) {
   const closed = closeCurrent(turn);
@@ -215,6 +229,41 @@ export function genLabelParts(gen) {
   return { head: "thinking", calls: "", repeats: false };
 }
 
+// A step that said something (its text is not the turn's answer): a row of
+// its own in a finished block's outline.
+export function isNarrated(gen) {
+  return !gen.answer && !!String(gen.text || "").trim();
+}
+
+// A finished block's outline (+gens+: its steps in order, as the block holds
+// them): each narrated step a row, each run of the others between (tool-only,
+// thinking-only) one fold ({fold: [indices]}), so every mid-turn text's first
+// line reads without a click and the steps that said nothing take one line.
+// [] when no step said anything: the block stays closed, as before.
+// A last run of one thinking-only step stays a row (no "· 1 step" at the end).
+export function outlineRuns(gens) {
+  if (!gens.some(isNarrated)) return [];
+  const runs = [];
+  gens.forEach((gen, i) => {
+    if (isNarrated(gen)) return runs.push({ step: i });
+    const last = runs[runs.length - 1];
+    if (last?.fold) last.fold.push(i);
+    else runs.push({ fold: [i] });
+  });
+  // A turn doesn't end on a "1 step" fold for a lone thinking-only step
+  // (the answer's own thinking): it stays a row, its "thinking" label.
+  const last = runs[runs.length - 1];
+  const lone = last.fold?.length === 1 && gens[last.fold[0]];
+  if (lone && lone.tools.length === 0) runs[runs.length - 1] = { step: last.fold[0] };
+  return runs;
+}
+
+// A finished turn's steps as its block holds them: the answer's step left it
+// when the answer was all it had (turn_view.js promote).
+export function blockGens(turn) {
+  return turn.gens.filter((gen) => !(gen.answer && !gen.thinking && gen.tools.length === 0));
+}
+
 // The block's summary line: "working · 3 steps · 8 tool calls · execute ×7 · …"
 // while it runs, without the prefix after; the tally (tally.js) from 3 calls.
 export function blockSummary(turn, { running = false } = {}) {