samagotchi 0.51.0 → 0.53.0

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

@@ -6,9 +6,21 @@
 // markdown, annotate and the turn output dedupe work on a plain bubble.
 // The grouping rules live in turn_model.js.
 //
+// A step is ONE lit-html template (stepTemplate) for the live page and a
+// reload: the live view keeps each step's state (its rows, the ticker's
+// line, the narration's sentences) and renders the template again when an
+// event changed it; lit writes only what changed, so a hand toggle, a
+// selection in the thinking and a row's kept parts stay.
+//
+// lit leaves comment nodes in the DOM (its part markers: <!--?lit$…$-->
+// and <!---->), in a live step and in a reloaded history alike. Code that
+// walks childNodes (or reads firstChild/lastChild) must skip comments;
+// element queries, :empty and textContent are unaffected.
+//
 // A block that holds one gen with no thinking and no tool rows hides its
 // chrome (CSS :has), so a plain answer streams like today's bubble, and is
 // removed at the end: the answer bubble takes its place.
+import { html, nothing, render } from "./vendor/lit-html.js";
 import { leavesBlock } from "./card.js";
 import { copySourceAttr } from "./copy.js";
 import { escapeHtml, failedTurnText, messageBodyHtml, noteHtml, normalize, sourceLabel, steerRowHtml } from "./format.js";
@@ -23,6 +35,86 @@ import * as model from "./turn_model.js";
 import { createHold } from "./hold.js";
 import { taskCommand, taskStopButton } from "./task_stop.js";
 
+// ---- The templates: one step, its thinking, its label ----
+
+// A closed step's summary (model.genLabel). When its head is the words the
+// body starts with (the narration's first line, the first call's title)
+// and it has calls, the summary is marked .repeats and its parts are
+// spans: an open step shows only its calls (index.html), so it doesn't say
+// the same words twice. Its text stays genLabel's either way.
+function closedLabel(gen) {
+  const { head, calls, repeats } = model.genLabelParts(gen);
+  if (!repeats || !calls) return { repeats: false, content: model.genLabel(gen) };
+  return { repeats: true, content: html`<span class="gen-head">${head}</span><span class="gen-sep"> · </span><span class="gen-calls">${calls}</span>` };
+}
+
+// A step's thinking: a collapsed <details> whose summary is "thinking" (a
+// live step's ticker: "thinking · <newest sentence>") over its body; a
+// thinking-only step's body sits bare under the step's own summary (no wrap
+// that would repeat "thinking"). +body+ is the text: a string, or the live
+// step's Text node (appended by delta: a selection in it survives).
+// +cls+ "bubble thinking" is a plain answer's collapsed thinking block.
+export function thinkingTemplate({ body, wrapped = true, line = null, cls = "thinking", on = {} }) {
+  const inner = html`<div class="thinking-body">${body}</div>`;
+  if (!wrapped) return inner;
+  const summary = line === null ? "thinking" : html`<span class="thinking-tag">thinking · </span>${line}`;
+  return html`<details class=${cls} @toggle=${on.thinkingToggle ?? nothing}><summary @click=${on.thinkingClick ?? nothing}>${summary}</summary>${inner}</details>`;
+}
+
+// A step's narration: the live box of complete sentences (one per line,
+// the newest last), the live "…" until the first one, or a closed step's
+// full text. None when there is nothing to say.
+function textTemplate(text, { live, sentences, placeholder }) {
+  if (live && sentences?.length) {
+    return html`<div class="gen-text streaming"><div class="narration">${sentences.map((s) => html`<div class="sentence">${s}</div>`)}</div></div>`;
+  }
+  if (live) return placeholder ? html`<div class="gen-text streaming">…</div>` : nothing;
+  return text ? html`<div class="gen-text">${text}</div>` : nothing;
+}
+
+// One step, live or reloaded. +gen+: { text, thinking, tools, answer } (a
+// taken answer's text is out of the step). The live view's state: +live+
+// (open, "step N" by its +index+, no failed mark yet), +open+ (lit sets it
+// only when it changes: a hand toggle stays), the +steers+ rows it
+// answers, its +items+ (tool rows, notices, cards: nodes or templates; a
+// reload's are its rows' nodes), the thinking +body+ node, the ticker's
+// +line+, the narration's +sentences+ and "…" +placeholder+, +on+ (the
+// click and toggle handlers).
+export function stepTemplate(gen, st = {}) {
+  const { live = false, index = 0, open = live, steers = [], items = [], body = gen.thinking, line = null,
+    sentences = null, placeholder = false, on = {} } = st;
+  const text = gen.answer ? "" : gen.text || "";
+  const label = live ? { repeats: false, content: `step ${index + 1}` } : closedLabel({ ...gen, text });
+  const failed = !live && model.failedCount(gen.tools) > 0;
+  // A step left with its thinking only reads "thinking" once.
+  const wrapped = live || !!text || gen.tools.length > 0;
+  return html`<details class=${`gen${live ? " live" : ""}${failed ? " has-failed" : ""}`} .open=${open}><summary class=${label.repeats ? "repeats" : nothing} @click=${on.stepClick ?? nothing}>${label.content}</summary>${steers}${gen.thinking ? thinkingTemplate({ body, wrapped, line, on }) : nothing}${textTemplate(text, { live, sentences, placeholder })}${items.length ? html`<div class="activity-body">${items}</div>` : nothing}</details>`;
+}
+
+// A hook's line (hook_notice) as a step's row. data.line is a whole row of
+// chi's own (an empty-answer retry), shown as is; data.cls a class of its
+// own and data.title its hover (a ✂ row's).
+function noticeTemplate(data) {
+  const cls = "hook-notice" + (data.level === "warn" ? " warn" : "") + (data.cls ? ` ${data.cls}` : "");
+  return html`<div class=${cls} title=${data.title || nothing}>${data.line || `${hookNoticeLabel(data.hook)}: ${data.text || ""}`}</div>`;
+}
+
+// +template+ rendered as detached nodes (a fragment).
+function nodesOf(template) {
+  const frag = document.createDocumentFragment();
+  render(template, frag);
+  return frag;
+}
+
+// +markup+ (any HTML string) as nodes.
+function rawNodes(markup) {
+  const t = document.createElement("template");
+  t.innerHTML = markup;
+  return t.content;
+}
+
+// ---- The live view ----
+
 // The parts of a drawn tool row a user may have changed (the command's
 // raw toggle, an opened diff) or that never change once there (the
 // thumbs): a redraw keeps them as they are.
@@ -33,8 +125,8 @@ const childWith = (el, cls) => [...el.children].find((c) => c.classList.contains
 // A live tool row drawn again from its activity row (status, title,
 // output): the reloaded row's markup (toolRowInnerHtml), the kept parts
 // and the stop-task button carried over. +html+ is that markup.
-function redrawRow(el, html) {
-  const fresh = htmlElement(`<div>${html}</div>`);
+function redrawRow(el, markup) {
+  const fresh = htmlElement(`<div>${markup}</div>`);
   for (const cls of KEPT_PARTS) {
     const old = childWith(el, cls);
     const drawn = childWith(fresh, cls);
@@ -82,7 +174,8 @@ export function createTurnView({
   let blockEl = null;
   let blockSummaryEl = null;
   let blockToggled = false;
-  // gen → { el, summary, thinking, text, activity, rows: Map(key → el), toggled }
+  // gen → a step's live state (newStep), its rendered nodes between
+  // part.startNode and end.
   const genEls = new Map();
   // Steer rows waiting for the step that answers them (steer()).
   let pendingSteers = [];
@@ -97,11 +190,6 @@ export function createTurnView({
     if (hint) hint.remove();
   }
 
-  // A hand toggle: the code's auto-collapse then leaves it as the user left it.
-  function rememberToggle(summary, mark) {
-    summary.addEventListener("click", mark);
-  }
-
   function createBlock() {
     removeHint();
     blockEl = document.createElement("details");
@@ -110,7 +198,7 @@ export function createTurnView({
     blockToggled = false;
     blockSummaryEl = document.createElement("summary");
     blockEl.appendChild(blockSummaryEl);
-    rememberToggle(blockSummaryEl, () => { blockToggled = true; });
+    blockSummaryEl.addEventListener("click", () => { blockToggled = true; });
     updateBlockSummary();
     blockHost(blockEl);
   }
@@ -119,77 +207,89 @@ export function createTurnView({
     if (blockSummaryEl && turn) blockSummaryEl.textContent = model.blockSummary(turn, { running: !turn.ended });
   }
 
+  // The step rendered again from its state (stepTemplate). Each live step
+  // is its own lit root, not an item of one block template: newestFirst
+  // puts a new step on top and chronological() reorders them, and lit
+  // (without the keyed repeat directive, not vendored) matches list items
+  // by index, so a block-wide render would hand step N's <details> (and
+  // its hand toggle) to another gen. The root's part lives on entry.end
+  // (render's renderBefore), so the step's nodes can move anywhere in the
+  // page between lit's start marker and that end comment (stepNodes).
+  function draw(entry) {
+    entry.part = render(stepTemplate(entry.gen, {
+      live: !entry.closed, index: entry.index, open: entry.open, steers: entry.steers, items: entry.items,
+      body: entry.thinkingText, line: entry.line, sentences: entry.sentences, placeholder: entry.placeholder, on: entry.on,
+    }), entry.frag, { renderBefore: entry.end });
+  }
+
+  // A step's nodes (lit's start marker, the <details>, the end marker), to
+  // move or remove them together.
+  function stepNodes(entry) {
+    const nodes = [];
+    for (let n = entry.part.startNode; n; n = n.nextSibling) {
+      nodes.push(n);
+      if (n === entry.end) break;
+    }
+    return nodes;
+  }
+
+  const thinkingWrap = (entry) => entry.el.querySelector(":scope > details.thinking");
+  const narrationEl = (entry) => entry.el.querySelector(":scope > .gen-text > .narration");
+
   function createGenEl(gen) {
-    const el = document.createElement("details");
-    el.className = "gen live";
-    el.open = true;
-    const summary = document.createElement("summary");
-    summary.textContent = `step ${turn.gens.length}`;
-    el.appendChild(summary);
-    // A plugin's steers merged since the last step: this step answers them.
-    for (const row of pendingSteers) el.appendChild(row);
+    const entry = {
+      gen, index: turn.gens.length - 1, frag: document.createDocumentFragment(), end: document.createComment(""),
+      part: null, el: null, open: true, toggled: false, closed: false,
+      // A plugin's steers merged since the last step: this step answers them.
+      steers: pendingSteers, items: [], rows: new Map(),
+      // A step after the first shows "…" until its text comes (the first one
+      // only for a prompt).
+      placeholder: turn.gens.length > 1, sentences: null, feed: createSentenceFeed(),
+      thinkingText: null, line: null, ticker: null, tickerTimer: null, thinkingToggled: false, on: null,
+    };
     pendingSteers = [];
-    const text = document.createElement("div");
-    text.className = "gen-text streaming";
-    // A step after the first shows "…" until its text comes (the first one
-    // only for a prompt).
-    if (turn.gens.length > 1) text.textContent = "…";
-    el.appendChild(text);
-    const entry = { el, summary, thinking: null, text, activity: null, rows: new Map(), toggled: false,
-      thinkingWrap: null, thinkingLine: null, ticker: null, tickerTimer: null, thinkingWritten: 0, thinkingToggled: false,
-      feed: createSentenceFeed(), box: null };
-    rememberToggle(summary, () => { entry.toggled = true; });
+    // A real click on a summary is a hand toggle: the code's auto-collapse
+    // then leaves it as the user left it. A peek at the thinking is per step
+    // (the page is for glancing): later steps start closed. The toggle event
+    // (queued after <details>.open flips) only scrolls the body to its tail
+    // on open.
+    entry.on = {
+      stepClick: () => { entry.toggled = true; },
+      thinkingClick: () => { entry.thinkingToggled = true; },
+      thinkingToggle: (e) => {
+        const wrap = e.currentTarget;
+        const body = wrap.querySelector(".thinking-body");
+        if (wrap.open && body) body.scrollTop = body.scrollHeight;
+      },
+    };
+    entry.frag.append(entry.end);
     genEls.set(gen, entry);
+    draw(entry);
+    entry.el = entry.end.previousElementSibling || entry.frag.querySelector("details.gen");
     const stick = isNearBottom();
-    if (newestFirst) blockEl.insertBefore(el, blockSummaryEl.nextSibling);
-    else blockEl.appendChild(el);
+    if (newestFirst) blockEl.insertBefore(entry.frag, blockSummaryEl.nextSibling);
+    else blockEl.appendChild(entry.frag);
     if (stick) follow();
     return entry;
   }
 
-  // The step's thinking as its own collapsed <details class="thinking"> (the
-  // ticker lives in its summary) before the narration; entry.thinking stays
-  // the body, entry.thinkingWrap the <details>, entry.thinkingLine its summary.
-  function thinkingEl(gen) {
-    const entry = genEls.get(gen);
-    if (!entry.thinking) {
-      entry.thinkingWrap = document.createElement("details");
-      entry.thinkingWrap.className = "thinking";
-      entry.thinkingLine = document.createElement("summary");
-      entry.thinkingLine.textContent = "thinking";
-      entry.thinkingWrap.appendChild(entry.thinkingLine);
-      entry.thinking = document.createElement("div");
-      entry.thinking.className = "thinking-body";
-      entry.thinkingWrap.appendChild(entry.thinking);
-      // A real click on the summary is a hand toggle of *this* step: its wrap
-      // then stays as the user left it at the step's end. A peek is per step
-      // (the page is for glancing): later steps start closed. The toggle
-      // event (queued after <details>.open flips) only scrolls the body to
-      // its tail on open.
-      rememberToggle(entry.thinkingLine, () => { entry.thinkingToggled = true; });
-      entry.thinkingWrap.addEventListener("toggle", () => {
-        if (entry.thinkingWrap.open) entry.thinking.scrollTop = entry.thinking.scrollHeight;
-      });
-      entry.ticker = createTicker({ now: () => Date.now(), dwellMs: 1500 });
-      entry.el.insertBefore(entry.thinkingWrap, entry.text);
-    }
-    return entry.thinking;
+  function stopTicker(entry) {
+    if (entry.tickerTimer) { clearTimeout(entry.tickerTimer); entry.tickerTimer = null; }
+    entry.ticker?.close();
   }
 
-  // The ticker's newest sentence into the summary: "thinking · <line>", the
-  // prefix a <span class="thinking-tag">, the sentence a text node.
+  // The ticker's newest sentence into the thinking's summary, with a subtle
+  // fade on change; the class is removed at close (reload parity: the
+  // re-rendered summary is plain "thinking").
   function setThinkingLine(entry, sentence) {
-    entry.thinkingLine.textContent = "";
-    const tag = document.createElement("span");
-    tag.className = "thinking-tag";
-    tag.textContent = "thinking · ";
-    entry.thinkingLine.appendChild(tag);
-    entry.thinkingLine.appendChild(document.createTextNode(sentence));
-    // A subtle fade on change; the class is removed at close (reload parity:
-    // the re-rendered summary is plain "thinking").
-    entry.thinkingLine.classList.remove("thinking-fade");
-    void entry.thinkingLine.offsetWidth;
-    entry.thinkingLine.classList.add("thinking-fade");
+    entry.line = sentence;
+    draw(entry);
+    const summary = thinkingWrap(entry)?.querySelector(":scope > summary");
+    if (summary) {
+      summary.classList.remove("thinking-fade");
+      void summary.offsetWidth;
+      summary.classList.add("thinking-fade");
+    }
     onThinkingLine(sentence);
   }
 
@@ -208,76 +308,46 @@ export function createTurnView({
     }
   }
 
-  // The live step's narration box (D1–D4 of the narration-box plan): the
-  // complete sentences so far, one per line, the newest last, inside
-  // entry.text (so the plain-answer chrome and containsLive see one element).
-  // Created on the first sentence, in place of the "…" placeholder.
-  function narrationBox(entry) {
-    if (!entry.box) {
-      entry.text.textContent = "";
-      entry.box = document.createElement("div");
-      entry.box.className = "narration";
-      entry.text.appendChild(entry.box);
-    }
-    return entry.box;
-  }
-
-  // Append complete sentences to the box, which follows its own tail unless
-  // the user scrolled up inside it to read (decided before the append: a
-  // burst lands several lines at once).
-  function appendSentences(entry, sentences) {
+  // Complete sentences into the narration box, which follows its own tail
+  // unless the user scrolled up inside it to read (decided before the
+  // append: a burst lands several lines at once).
+  function addSentences(entry, sentences) {
     if (!sentences.length) return;
-    const box = narrationBox(entry);
-    const stick = shouldFollowScroll(box, 24);
-    for (const sentence of sentences) {
-      const line = document.createElement("div");
-      line.className = "sentence";
-      line.textContent = sentence;
-      box.appendChild(line);
-    }
-    if (stick) box.scrollTop = box.scrollHeight;
+    const box = narrationEl(entry);
+    const stick = !box || shouldFollowScroll(box, 24);
+    entry.sentences = [...(entry.sentences || []), ...sentences];
+    draw(entry);
+    const drawn = narrationEl(entry);
+    if (stick && drawn) drawn.scrollTop = drawn.scrollHeight;
   }
 
-  function activityEl(gen) {
-    const entry = genEls.get(gen);
-    if (!entry.activity) {
-      entry.activity = document.createElement("div");
-      entry.activity.className = "activity-body";
-      entry.el.appendChild(entry.activity);
-    }
-    return entry.activity;
-  }
-
-  // The gen's text and thinking into its elements. The thinking is appended by
-  // delta (a selection survives; a full rewrite would drop it) and rewritten
-  // only when it shrank (the close's rtrim); the ticker advances from it while
-  // the step is live. The live narration goes into the box by complete
-  // sentences; a closed gen's text (the close itself, a late chunk via genFor)
-  // is written in full. The trailing whitespace is trimmed by the model at
-  // close.
+  // The gen's text and thinking into its step. The thinking is appended by
+  // delta to one Text node (a selection survives; a full rewrite would drop
+  // it) and rewritten only when it shrank (the close's rtrim); the ticker
+  // advances from it while the step is live. The live narration goes into
+  // the box by complete sentences; a closed gen shows its full text (the
+  // close itself, a late chunk via genFor).
   function writeGen(gen, { follow = false } = {}) {
     const entry = genEls.get(gen);
     if (!entry) return;
     if (gen.thinking) {
-      const body = thinkingEl(gen);
-      const written = entry.thinkingWritten;
-      if (gen.thinking.length >= written) {
-        if (gen.thinking.length > written) {
-          body.appendChild(document.createTextNode(gen.thinking.slice(written)));
-          entry.thinkingWritten = gen.thinking.length;
-        }
-      } else {
-        body.textContent = gen.thinking;
-        entry.thinkingWritten = gen.thinking.length;
+      const before = entry.thinkingText?.parentNode;
+      const stick = follow && before && shouldFollowScroll(before, 24);
+      if (!entry.thinkingText) {
+        entry.thinkingText = document.createTextNode("");
+        entry.ticker = createTicker({ now: () => Date.now(), dwellMs: 1500 });
       }
-      if (follow && shouldFollowScroll(body, 24)) body.scrollTop = body.scrollHeight;
+      const node = entry.thinkingText;
+      if (gen.thinking.length > node.length) node.appendData(gen.thinking.slice(node.length));
+      else if (gen.thinking.length < node.length) node.data = gen.thinking;
+      draw(entry);
+      if (stick) before.scrollTop = before.scrollHeight;
       // Late chunks reach closed gens (genFor); their ticker stays still.
       if (!gen.closed) feedTicker(gen);
     }
-    // An empty text keeps the "…" placeholder.
     if (!gen.text) return;
-    if (gen.closed) entry.text.textContent = gen.text;
-    else appendSentences(entry, entry.feed.feed(gen.text));
+    if (gen.closed) draw(entry);
+    else addSentences(entry, entry.feed.feed(gen.text));
   }
 
   function flush() {
@@ -298,68 +368,47 @@ export function createTurnView({
     requestAnimationFrame(flush);
   }
 
-  // A step left with its thinking only would read "thinking" twice (its own
-  // summary and its wrap's): the wrap goes and the body sits directly under
-  // the step's summary, as turnHistoryHtml draws it.
-  function unwrapThinking(entry) {
-    if (!entry.thinkingWrap) return;
-    if (entry.tickerTimer) { clearTimeout(entry.tickerTimer); entry.tickerTimer = null; }
-    entry.ticker.close();
-    entry.thinkingWrap.replaceWith(entry.thinking);
-    entry.thinkingWrap = null;
-    entry.thinkingLine = null;
-  }
-
   // A closed gen: its final text, collapsed to its label (unless the user
-  // opened it by hand), no longer live.
+  // opened it by hand), no longer live; its thinking's summary back to the
+  // plain "thinking", collapsed unless the user opened it.
   function closeGenEl(gen) {
     const entry = genEls.get(gen);
     if (!entry) return;
     dirty.delete(gen);
     writeGen(gen);
-    // The box gone: the step's full text (rtrimmed by the model at close),
-    // today's closed-step DOM and the reloaded one.
-    entry.text.textContent = gen.text;
-    entry.box = null;
-    entry.text.classList.remove("streaming");
-    entry.el.classList.remove("live");
-    if (entry.thinkingWrap) {
-      // Stop the ticker, revert its summary to the plain "thinking" (reload
-      // parity: no span, no fade class) and close the wrap unless the user
-      // opened it by hand.
-      if (entry.tickerTimer) { clearTimeout(entry.tickerTimer); entry.tickerTimer = null; }
-      entry.ticker.close();
-      entry.thinkingLine.textContent = "thinking";
-      entry.thinkingLine.classList.remove("thinking-fade");
-      if (!entry.thinkingToggled) entry.thinkingWrap.open = false;
-      // A thinking-only middle step (a single-gen turn is promote's plain
-      // answer, which reuses the wrap).
-      if (!gen.text && !gen.tools.length && turn.gens.length > 1) unwrapThinking(entry);
+    stopTicker(entry);
+    entry.line = null;
+    entry.closed = true;
+    entry.sentences = null;
+    if (!entry.toggled) entry.open = false;
+    const wrap = thinkingWrap(entry);
+    if (wrap && !entry.thinkingToggled) wrap.open = false;
+    draw(entry);
+    // The fade gone without a class="" left behind (the reloaded summary has none).
+    const summary = thinkingWrap(entry)?.querySelector(":scope > summary");
+    if (summary?.classList.contains("thinking-fade")) {
+      summary.classList.remove("thinking-fade");
+      if (!summary.classList.length) summary.removeAttribute("class");
     }
-    writeClosedLabel(entry, gen);
-    if (!entry.toggled) entry.el.open = false;
     // Every generation's text goes into the shown texts (the turn output dedupe).
     const k = normalize(gen.text);
     if (k) sawText(k);
   }
 
-  // A closed step's label and its failed mark (a red chevron that survives
-  // an ellipsed label): at close, and again when a late tool result lands
-  // in a step that already closed.
-  function writeClosedLabel(entry, gen) {
-    setLabel(entry.summary, gen);
-    entry.el.classList.toggle("has-failed", model.failedCount(gen.tools) > 0);
-  }
-
   // A step that closes mid-turn (the next one starts) collapses: a warn card
   // in it would go out of sight until the turn ends. It moves out of the
   // step, right after it in the block (open while the turn runs), where
   // turnEnded still finds it and takes it out of the block (leavesBlock).
+  // The card stays in entry.items while it sits outside the step: safe only
+  // because the step's items are never removed or reordered after this (a
+  // late row is appended, a no-op for the parts before it). A render whose
+  // items shifted would make lit insert the card back into the step (or
+  // another item into its slot).
   function liftWarnCards(gen) {
     const entry = genEls.get(gen);
     if (!entry) return;
     const cards = [...entry.el.querySelectorAll(".plugin-card.warn")];
-    if (cards.length) entry.el.after(...cards);
+    if (cards.length) entry.end.after(...cards);
   }
 
   function apply(r) {
@@ -376,28 +425,34 @@ export function createTurnView({
   const rowHtml = new WeakMap();
   const rowThumbs = (images) => thumbsHtml(sessionId(), images);
 
+  // A row, notice or card into the step's activity; a step that wrote no
+  // narration before it drops the "…".
+  function addItem(entry, item) {
+    if (!entry.gen.text) entry.placeholder = false;
+    const stick = isNearBottom();
+    entry.items.push(item);
+    draw(entry);
+    if (stick) follow();
+  }
+
   function toolEvent(r) {
     apply(r);
     const entry = genEls.get(r.gen);
-    // A step that wrote no narration before its calls drops the "…".
-    if (!r.gen.text) entry.text.textContent = "";
-    const body = activityEl(r.gen);
     let el = entry.rows.get(r.row.key);
-    const html = toolRowInnerHtml(r.row, { thumbs: rowThumbs });
+    const inner = toolRowInnerHtml(r.row, { thumbs: rowThumbs });
     if (!el) {
       el = htmlElement(toolRowHtml(r.row, { thumbs: rowThumbs }));
-      rowHtml.set(el, html);
+      rowHtml.set(el, inner);
       entry.rows.set(r.row.key, el);
-      const stick = isNearBottom();
-      body.appendChild(el);
-      syncTaskStop(el, r.row);
-      if (stick) follow();
+      addItem(entry, el);
     } else {
-      if (rowHtml.get(el) !== html) redrawRow(el, html);
-      rowHtml.set(el, html);
-      syncTaskStop(el, r.row);
+      if (!r.gen.text) entry.placeholder = false;
+      if (rowHtml.get(el) !== inner) redrawRow(el, inner);
+      rowHtml.set(el, inner);
+      // A late result in a closed step: its label and failed mark.
+      draw(entry);
     }
-    if (!entry.el.classList.contains("live")) writeClosedLabel(entry, r.gen);
+    syncTaskStop(el, r.row);
     updateBlockSummary();
     onChange();
   }
@@ -421,21 +476,11 @@ export function createTurnView({
 
   // A hook's line (hook_notice) as a row of the current step, above the row
   // of the call it judged; false with no running turn (app.js shows the
-  // bubble then). data.line is a whole row of chi's own (an empty-answer
-  // retry), shown as is; data.cls a class of its own and data.title its
-  // hover (a ✂ row's).
+  // bubble then).
   function notice(data) {
     const r = turn && model.notice(turn, data);
     if (!r) return false;
-    const entry = genEls.get(r.gen);
-    if (!r.gen.text) entry.text.textContent = "";
-    const el = document.createElement("div");
-    el.className = "hook-notice" + (data.level === "warn" ? " warn" : "") + (data.cls ? ` ${data.cls}` : "");
-    el.textContent = data.line || `${hookNoticeLabel(data.hook)}: ${data.text || ""}`;
-    if (data.title) el.title = data.title;
-    const stick = isNearBottom();
-    activityEl(r.gen).appendChild(el);
-    if (stick) follow();
+    addItem(genEls.get(r.gen), noticeTemplate(data));
     return true;
   }
 
@@ -446,9 +491,7 @@ export function createTurnView({
   // that ends first puts it in its last step). False with no running turn.
   function steer(data) {
     if (!turn || turn.ended) return false;
-    const holder = document.createElement("div");
-    holder.innerHTML = steerRowHtml(data);
-    pendingSteers.push(holder.firstChild);
+    pendingSteers.push(htmlElement(steerRowHtml(data)));
     return true;
   }
 
@@ -456,7 +499,10 @@ export function createTurnView({
   function flushSteers() {
     const gen = turn.gens[turn.gens.length - 1];
     const entry = gen && genEls.get(gen);
-    if (entry) for (const row of pendingSteers) entry.el.insertBefore(row, entry.thinkingWrap || entry.text);
+    if (entry) {
+      entry.steers = [...entry.steers, ...pendingSteers];
+      draw(entry);
+    }
     pendingSteers = [];
   }
 
@@ -467,14 +513,11 @@ export function createTurnView({
     const gen = turn && !turn.ended ? model.currentGen(turn) : null;
     const entry = gen && genEls.get(gen);
     if (!entry) return false;
-    if (!gen.text) entry.text.textContent = "";
-    const stick = isNearBottom();
-    activityEl(gen).appendChild(el);
-    if (stick) follow();
+    addItem(entry, el);
     return true;
   }
 
-  // The answer: the gen's narration moves out of the block as a bubble. With
+  // The answer: the gen's narration leaves the block as a bubble. With
   // +heldHeight+ (the live box's height, measured before the step closed) the
   // bubble is held at that height, scrolled to its tail, until answerReady()
   // (the rendered markdown landed) or 1.5 s reveals it.
@@ -482,63 +525,52 @@ export function createTurnView({
   // builds it), placed where the answer bubble would go.
   function promote(gen, { heldHeight = 0, endNote = null } = {}) {
     const entry = genEls.get(gen);
-    const bubble = entry.text;
-    // No text (an empty answer): no bubble, not even an empty one left in
-    // the step.
-    if (gen.text) bubble.className = "bubble output";
-    else bubble.remove();
-    // A hidden tab gets no pop: nobody sees it, and its timers are throttled.
-    const holding = useHold && heldHeight > 0 && !!gen.text && !document.hidden;
-    let holdHeight = 0;
-    if (holding) {
-      // Bubbles are border-box: the box's height plus the bubble's own
-      // padding and border keeps the same three lines in view.
-      const cs = getComputedStyle(bubble);
-      const chrome = ["paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"]
-        .reduce((sum, k) => sum + (parseFloat(cs[k]) || 0), 0);
-      holdHeight = heldHeight + chrome;
+    // No text (an empty answer): no bubble.
+    let bubble = null;
+    if (gen.text) {
+      bubble = document.createElement("div");
+      bubble.className = "bubble output";
+      bubble.textContent = gen.text;
     }
-    entry.text = document.createElement("div");
-    entry.text.className = "gen-text";
-    setLabel(entry.summary, { ...gen, text: "" });
+    // A hidden tab gets no pop: nobody sees it, and its timers are throttled.
+    const holding = useHold && heldHeight > 0 && !!bubble && !document.hidden;
     model.takeAnswer(turn, gen);
+    draw(entry);
     // Cards and hook notices in a step that goes (below, or with the whole
     // block for a plain answer) stay: before the answer, out of the block,
     // where a reload puts a turn's cards; a notice as the bubble it is
-    // between turns.
+    // between turns. These are lit-rendered nodes taken out of the step:
+    // safe only because the step is never rendered again with other items
+    // or steers (it is removed, its block goes, or it only closes); such a
+    // render would move them back in, and a changed class binding on a
+    // notice would drop the "bubble" class added here.
     const leaving = !gen.thinking && gen.tools.length === 0;
     const plain = turn.gens.length === 1 && gen.tools.length === 0;
     const cards = leaving || plain ? [...entry.el.querySelectorAll(".plugin-card, .hook-notice, .steer-row")] : [];
     cards.forEach((el) => { if (!el.classList.contains("plugin-card")) el.classList.add("bubble"); });
-    if (leaving) entry.el.remove();
+    if (leaving) stepNodes(entry).forEach((n) => n.remove());
     if (plain) {
       // A plain answer: no block, the bubble where it was; its thinking, if
       // any, as a collapsed thinking block above it.
       const pieces = [];
-      if (gen.thinking) {
-        if (!entry.thinkingWrap) thinkingEl(gen);
-        // Reuse the live step's thinking wrap, re-classed as the plain
-        // answer's collapsed block (the same element, not a new one): plain
-        // summary, no timer, closed.
-        if (entry.tickerTimer) { clearTimeout(entry.tickerTimer); entry.tickerTimer = null; }
-        entry.ticker.close();
-        entry.thinkingWrap.className = "bubble thinking";
-        entry.thinkingWrap.open = false;
-        entry.thinkingLine.textContent = "thinking";
-        pieces.push(entry.thinkingWrap);
-      }
+      if (gen.thinking) pieces.push(nodesOf(thinkingTemplate({ body: gen.thinking, cls: "bubble thinking" })).firstElementChild);
       pieces.push(...cards);
-      if (gen.text) pieces.push(bubble);
+      if (bubble) pieces.push(bubble);
       else if (endNote) pieces.push(endNote);
       placeAnswer(pieces, { plain: true, blockEl });
       blockEl = null;
       blockSummaryEl = null;
     } else {
-      placeAnswer(gen.text ? [...cards, bubble] : [...cards, ...(endNote ? [endNote] : [])], { plain: false, blockEl });
-      // The last step, left with its thinking only, reads "thinking" once.
-      if (!gen.tools.length && gen.thinking) unwrapThinking(entry);
+      placeAnswer(bubble ? [...cards, bubble] : [...cards, ...(endNote ? [endNote] : [])], { plain: false, blockEl });
+    }
+    if (holding) {
+      // Bubbles are border-box: the box's height plus the bubble's own
+      // padding and border keeps the same three lines in view.
+      const cs = getComputedStyle(bubble);
+      const chrome = ["paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"]
+        .reduce((sum, k) => sum + (parseFloat(cs[k]) || 0), 0);
+      hold.start(bubble, heldHeight + chrome);
     }
-    if (holding) hold.start(bubble, holdHeight);
   }
 
   // Returns the cards that left the block (card.js leavesBlock), detached:
@@ -557,7 +589,8 @@ export function createTurnView({
     // still open: the apply below swaps it for the full text and collapses
     // the step. Only a completed turn's answer pops; a canceled or failed
     // one shows at once.
-    const box = promoting && kind === "completed" ? genEls.get(last)?.box : null;
+    const lastEntry = promoting && kind === "completed" ? genEls.get(last) : null;
+    const box = lastEntry ? narrationEl(lastEntry) : null;
     const heldHeight = box ? box.getBoundingClientRect().height : 0;
     if (pendingSteers.length) flushSteers();
     apply(model.turnEnded(turn));
@@ -586,9 +619,7 @@ export function createTurnView({
     blockSummaryEl = null;
     blockToggled = false;
     // Clear every ticker timer before the map goes (a live step mid-dwell).
-    for (const entry of genEls.values()) {
-      if (entry.tickerTimer) { clearTimeout(entry.tickerTimer); entry.tickerTimer = null; }
-    }
+    for (const entry of genEls.values()) stopTicker(entry);
     genEls.clear();
     pendingSteers = [];
     dirty.clear();
@@ -602,7 +633,11 @@ export function createTurnView({
       createBlock();
       const r = model.turnStarted(turn);
       apply(r);
-      if (data.prompt) genEls.get(r.gen).text.textContent = "…";
+      if (data.prompt) {
+        const entry = genEls.get(r.gen);
+        entry.placeholder = true;
+        draw(entry);
+      }
     },
     generationStarted(data) {
       if (!turn) this.turnStarted({});
@@ -624,14 +659,10 @@ export function createTurnView({
       const entry = r && genEls.get(r.gen);
       if (!entry) return;
       dirty.delete(r.gen);
-      if (entry.thinkingWrap) {
-        if (entry.tickerTimer) { clearTimeout(entry.tickerTimer); entry.tickerTimer = null; }
-        entry.ticker.close();
-        entry.thinkingWrap.remove();
-      }
-      Object.assign(entry, { thinking: null, thinkingWrap: null, thinkingLine: null, ticker: null, thinkingWritten: 0,
-        box: null, feed: createSentenceFeed() });
-      entry.text.textContent = "…";
+      stopTicker(entry);
+      Object.assign(entry, { thinkingText: null, line: null, ticker: null, sentences: null, placeholder: true,
+        feed: createSentenceFeed() });
+      draw(entry);
       onChange();
     },
     generationCompleted() {
@@ -644,7 +675,7 @@ export function createTurnView({
       // The remainder is the step's last line: narration without a final
       // period ("Let me check the shell first") would otherwise never show.
       const entry = genEls.get(r.gen);
-      if (entry && r.gen.text && !r.gen.closed) appendSentences(entry, entry.feed.flush(r.gen.text));
+      if (entry && r.gen.text && !r.gen.closed) addSentences(entry, entry.feed.flush(r.gen.text));
     },
     toolStarted(data) {
       if (!turn) this.turnStarted({});
@@ -669,7 +700,9 @@ export function createTurnView({
     containsLive(el) {
       const gen = turn && model.currentGen(turn);
       const entry = gen && genEls.get(gen);
-      return !!entry && (entry.text.contains(el) || !!entry.thinking?.contains(el));
+      if (!entry) return false;
+      const text = entry.el.querySelector(":scope > .gen-text");
+      return !!text?.contains(el) || !!entry.thinkingText?.parentNode?.contains(el);
     },
     reset,
     // For a view that composes this one (the stage): the turn's model and
@@ -678,13 +711,13 @@ export function createTurnView({
     current() { return { turn, blockEl }; },
     step(i) {
       const entry = turn && genEls.get(turn.gens[i]);
-      return entry ? { el: entry.el, summary: entry.summary, thinkingWrap: entry.thinkingWrap } : null;
+      return entry ? { el: entry.el, summary: entry.el.querySelector(":scope > summary"), thinkingWrap: thinkingWrap(entry) } : null;
     },
     chronological() {
       if (!blockEl || !turn) return;
       for (const gen of turn.gens) {
-        const el = genEls.get(gen)?.el;
-        if (el?.parentNode === blockEl) blockEl.appendChild(el);
+        const entry = genEls.get(gen);
+        if (entry?.el.parentNode === blockEl) blockEl.append(...stepNodes(entry));
       }
     },
   };
@@ -699,28 +732,7 @@ function defaultPlaceAnswer(appendToHistory) {
   };
 }
 
-// A closed step's summary (model.genLabel). When its head is the words the
-// body starts with (the narration's first line, the first call's title)
-// and it has calls, the summary is marked .repeats and its parts are
-// spans: an open step shows only its calls (index.html), so it doesn't say
-// the same words twice. Its text stays genLabel's either way.
-// { repeats, html } (the summary's inside).
-function labelParts(gen) {
-  const { head, calls, repeats } = model.genLabelParts(gen);
-  if (!repeats || !calls) return { repeats: false, html: escapeHtml(model.genLabel(gen)) };
-  return { repeats: true, html: `<span class="gen-head">${escapeHtml(head)}</span><span class="gen-sep"> · </span><span class="gen-calls">${escapeHtml(calls)}</span>` };
-}
-
-function labelHtml(gen) {
-  const { repeats, html } = labelParts(gen);
-  return `<summary${repeats ? ' class="repeats"' : ""}>${html}</summary>`;
-}
-
-function setLabel(summary, gen) {
-  const { repeats, html } = labelParts(gen);
-  summary.classList.toggle("repeats", repeats);
-  summary.innerHTML = html;
-}
+// ---- A reload ----
 
 // A re-rendered failed turn's line (a .bubble.cancel, as live's
 // addEndBubble), in turn_failed's words (failedTurnText) from what the turn
@@ -733,13 +745,28 @@ function failedLineHtml(record) {
   return `<div class="bubble cancel">${escapeHtml(failedTurnText(failure))}</div>`;
 }
 
-// A reloaded history in the turn view (renderHistory's object path): per
-// turn the prompt, a collapsed block of its steps when it had any (texts,
-// and with the server's parts the thinking, params and output, from the
-// saved messages; status and duration from the timing's tool records),
-// then the answer and the turn's timing line under it.
+// Parts (HTML strings and templates, in order) as one fragment.
+function fragmentOf(parts) {
+  const out = document.createDocumentFragment();
+  let markup = "";
+  for (const part of parts) {
+    if (typeof part === "string") { markup += part; continue; }
+    if (markup) out.append(rawNodes(markup));
+    markup = "";
+    out.append(nodesOf(part));
+  }
+  if (markup) out.append(rawNodes(markup));
+  return out;
+}
+
+// A reloaded history in the turn view (renderHistory's object path), as
+// nodes: per turn the prompt, a collapsed block of its steps when it had
+// any (stepTemplate, the live page's: texts, and with the server's parts
+// the thinking, params and output, from the saved messages; status and
+// duration from the timing's tool records), then the answer and the turn's
+// timing line under it.
 // +thumbs(images)+ draws a prompt's or a tool row's image thumbs.
-export function turnHistoryHtml(items, timing, { thumbs }) {
+export function turnHistoryNodes(items, timing, { thumbs }) {
   const timingHtml = (group) => {
     const record = group.record;
     // Numbered by its place in the turn records, as live (a failed turn
@@ -773,40 +800,31 @@ export function turnHistoryHtml(items, timing, { thumbs }) {
     return `<div class="bubble output report-reply${renderedMarkdown ? " markdown" : ""}"${copySourceAttr(items[j], renderedMarkdown)}>${body}</div>`;
   };
   const steerHtml = (i, bubble) => steerRowHtml({ source: items[i].source, text: items[i].content }, { bubble });
-  return turnGroups(items, timing).map((group) => {
-    if (group.kind === "note") return `<div class="bubble note">${noteHtml(items[group.i])}</div>`;
-    if (group.kind === "steer") return steerHtml(group.i, true);
-    if (group.kind === "answer") return answerHtml(items[group.answer], "");
+  const parts = [];
+  for (const group of turnGroups(items, timing)) {
+    if (group.kind === "note") { parts.push(`<div class="bubble note">${noteHtml(items[group.i])}</div>`); continue; }
+    if (group.kind === "steer") { parts.push(steerHtml(group.i, true)); continue; }
+    if (group.kind === "answer") { parts.push(answerHtml(items[group.answer], "")); continue; }
     const prompt = items[group.user];
     // A context wake turn starts with its note.
-    const parts = [prompt.role === "note"
-      ? `<div class="bubble note">${noteHtml(prompt)}</div>`
-      : userHtml(prompt)];
+    parts.push(prompt.role === "note" ? `<div class="bubble note">${noteHtml(prompt)}</div>` : userHtml(prompt));
     const [only] = group.steps;
     const ended = group.answer !== null || group.emptyAnswer != null;
     const textless = only && (only.i === null || !String(items[only.i].content ?? ""));
     // A lone thinking step before an answer (or the notice of a turn with
-    // none): no block, as live.
+    // none): no block, the plain answer's collapsed thinking block.
     const plainThinking = group.steps.length === 1 && ended && textless && !only.tools.length && only.thinking;
     const noBlock = !group.steps.length || plainThinking;
     if (plainThinking) {
-      // A plain answer with thinking: the collapsed thinking block, as live.
-      parts.push(`<details class="bubble thinking"><summary>thinking</summary><div class="thinking-body">${escapeHtml(only.thinking)}</div></details>`);
+      parts.push(thinkingTemplate({ body: only.thinking, cls: "bubble thinking" }));
     } else if (group.steps.length) {
       const gens = group.steps.map((step) => ({ text: step.i === null ? "" : String(items[step.i].content ?? ""), thinking: step.thinking || "", tools: step.tools }));
-      const rows = gens.map((gen, k) => {
-        // A thinking-only step: the body directly under the step's own
-        // "thinking" summary (no wrap that would repeat it), as live.
-        const body = gen.thinking ? `<div class="thinking-body">${escapeHtml(gen.thinking)}</div>` : "";
-        const thinking = body && (gen.text || gen.tools.length) ? `<details class="thinking"><summary>thinking</summary>${body}</details>` : body;
-        const text = gen.text ? `<div class="gen-text">${escapeHtml(gen.text)}</div>` : "";
+      const steps = gens.map((gen, k) => stepTemplate(gen, {
         // The steers the step answered first, where the live rows went.
-        const steers = (group.steps[k].steers || []).map((i) => steerHtml(i, false)).join("");
-        const tools = gen.tools.length ? `<div class="activity-body">${gen.tools.map((r) => toolRowHtml(r, { thumbs })).join("")}</div>` : "";
-        const failed = model.failedCount(gen.tools) ? " has-failed" : "";
-        return `<details class="gen${failed}">${labelHtml(gen)}${steers}${thinking}${text}${tools}</details>`;
-      });
-      parts.push(`<details class="turn-work done"><summary>${escapeHtml(model.blockSummary({ gens, ended: true }))}</summary>${rows.join("")}</details>`);
+        steers: (group.steps[k].steers || []).map((i) => rawNodes(steerHtml(i, false))),
+        items: gen.tools.length ? [rawNodes(gen.tools.map((r) => toolRowHtml(r, { thumbs })).join(""))] : [],
+      }));
+      parts.push(html`<details class="turn-work done"><summary>${model.blockSummary({ gens, ended: true })}</summary>${steps}</details>`);
     }
     // Steers with no step to sit in, or in a turn that shows no block: on
     // their own after the prompt.
@@ -831,6 +849,6 @@ export function turnHistoryHtml(items, timing, { thumbs }) {
     // stayed with its failure line, as the live view left them.
     parts.push(cancelLineHtml(group.record, escapeHtml));
     parts.push(failedLineHtml(group.record));
-    return parts.join("");
-  }).join("");
+  }
+  return fragmentOf(parts);
 }