samagotchi 0.135.0 → 0.136.1

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

@@ -3,13 +3,22 @@
 // gets a fold row: a sibling just before the bubble, never inside it (the
 // bubble's copy text, its claims and a live end's innerHTML stay the
 // bubble's own). Folded, the bubble has the class `.folded` (CSS hides it;
-// no inline style) and the row reads its first line
-// and its size, "‹first line› · N lines ▸"; unfolded, the row stays as a
-// slim "▾ N lines" header.
+// no inline style) and the row is the answer's box closed: "▸ ‹first
+// line› · N lines" in the bubble's shape; unfolded, the row is that box's
+// top edge, "▾ N lines", the bubble its rest (CSS joins the two). The box
+// never changes shape, a click changes its height, animated
+// (details_motion.js animateHeight) unless the viewer prefers no motion.
+//
+// A delegate report (a user line chi brought in, data-source
+// "delegate_report") gets the same row, folded by default (it is written
+// for the model; the reply under it is the user's summary): the row sits
+// where the report sits and reads "delegate report · ‹first line› · N
+// lines". Its key: a merged one's data-line-key, a wake turn's opening
+// "<turn id>:prompt". A live merged report has no key until a reload.
 //
 // Which answers are folded is this browser's choice (localStorage through
-// storage.js): one key per session holding the folded answers' keys, the
-// last FOLD_KEEP of them. An answer's key is its turn's id
+// storage.js): one key per session holding the folded answers' keys and
+// the unfolded reports' keys, the last FOLD_KEEP of each. An answer's key is its turn's id
 // (data-answer-turn), a delegate report's reply its own (data-reply-key);
 // a bubble with neither (an answer before any prompt, a canceled turn's
 // partial) gets no row. The keys of sessions gone from the session list go
@@ -23,6 +32,7 @@
 // A module of its own: static JS is cached at unversioned URLs, and a new
 // export on an old module would blank the page.
 import { bubbleCopyText } from "./copy.js";
+import { animateHeight, canAnimate } from "./details_motion.js";
 import { clip } from "./format.js";
 import { readStored, removeStored, storedKeys, writeStored } from "./storage.js";
 
@@ -36,7 +46,9 @@ export const FOLD_PREFIX = "chi_answer_fold:";
 const LABEL_CHARS = 160;
 
 const ROW_CLASS = "answer-fold";
-const ANSWERS = ".bubble.output";
+// What gets a row: answers and delegate reports (user lines chi brought in).
+const REPORTS = '.bubble.user[data-source="delegate_report"]';
+const ANSWERS = `.bubble.output, ${REPORTS}`;
 // Not done yet: still streaming.
 const UNFINISHED = ".streaming";
 
@@ -71,12 +83,13 @@ export function foldLabel(text, { display = false } = {}) {
   return clip(plainLine(heading ?? texts[0] ?? ""), LABEL_CHARS);
 }
 
-// The row's words: folded, the label and the size; unfolded, the size.
-export function foldRowText(text, { display = false, folded = true } = {}) {
+// The row's words: folded, the label and the size; unfolded, the size
+// alone (the content is right under it). +label+: the row's own (a
+// report's, reportLabel), else the answer's.
+export function foldRowText(text, { display = false, folded = true, label = foldLabel(text, { display }) } = {}) {
   const n = lineCount(text);
   const size = `${n} line${n === 1 ? "" : "s"}`;
   if (!folded) return { label: "", size };
-  const label = foldLabel(text, { display });
   return { label, size: label ? `\u00a0\u00b7 ${size}` : size };
 }
 
@@ -86,11 +99,17 @@ export function foldStoreKey(sessionId) {
   return sessionId ? `${FOLD_PREFIX}${sessionId}` : null;
 }
 
+// A session's entry: {root, turns, open}. `turns` holds the answers folded
+// by hand (and Revise stubs opened, revise_stack.js); `open` the delegate
+// reports unfolded by hand (a report folds by default). An entry written
+// before `open` reads as none unfolded.
+const strings = (list) => (Array.isArray(list) ? list.filter((t) => typeof t === "string") : []);
+
 function readEntry(key) {
   try {
     const entry = JSON.parse(readStored(key, "null"));
-    if (!entry || !Array.isArray(entry.turns)) return null;
-    return { root: typeof entry.root === "string" ? entry.root : null, turns: entry.turns.filter((t) => typeof t === "string") };
+    if (!entry || (!Array.isArray(entry.turns) && !Array.isArray(entry.open))) return null;
+    return { root: typeof entry.root === "string" ? entry.root : null, turns: strings(entry.turns), open: strings(entry.open) };
   } catch (_) {
     return null;
   }
@@ -103,6 +122,12 @@ export function readFolded(sessionId) {
   return (key && readEntry(key)?.turns) || [];
 }
 
+// The session's delegate reports unfolded by hand, oldest first.
+export function readOpened(sessionId) {
+  const key = foldStoreKey(sessionId);
+  return (key && readEntry(key)?.open) || [];
+}
+
 // +list+ with +answerKey+ folded (moved to the end) or not, at most
 // FOLD_KEEP long. Pure.
 export function withFold(list, answerKey, folded) {
@@ -113,11 +138,23 @@ export function withFold(list, answerKey, folded) {
 // Saves +answerKey+ folded or not for +sessionId+. +root+: the session's
 // project root, kept for the sweep of a project's list.
 export function writeFold(sessionId, answerKey, folded, { root = null } = {}) {
+  writeList(sessionId, "turns", answerKey, folded, root);
+}
+
+// Saves the report +reportKey+ unfolded (+open+) or not for +sessionId+.
+export function writeOpened(sessionId, reportKey, open, { root = null } = {}) {
+  writeList(sessionId, "open", reportKey, open, root);
+}
+
+// +member+ in or out of the entry's +list+ ("turns" or "open"), the other
+// list kept; the key goes when both are empty.
+function writeList(sessionId, list, member, inList, root) {
   const key = foldStoreKey(sessionId);
-  if (!key || !answerKey) return;
-  const turns = withFold(readFolded(sessionId), answerKey, folded);
-  if (!turns.length) removeStored(key);
-  else writeStored(key, JSON.stringify({ root, turns }));
+  if (!key || !member) return;
+  const entry = readEntry(key) || { turns: [], open: [] };
+  const next = { turns: entry.turns, open: entry.open, [list]: withFold(entry[list], member, inList) };
+  if (!next.turns.length && !next.open.length) removeStored(key);
+  else writeStored(key, JSON.stringify({ root, turns: next.turns, ...(next.open.length ? { open: next.open } : {}) }));
 }
 
 // The session list loaded (+sessions+, each {id, project_root}): the fold
@@ -137,8 +174,17 @@ export function sweepAnswerFolds(sessions, { scoped = false } = {}) {
 
 // ---- The rows ----
 
-// The key an answer bubble is folded by, or null.
+const isReport = (bubble) => !!bubble?.matches?.(REPORTS);
+
+// The key an answer bubble is folded by, or null. A delegate report's: a
+// merged one's line key (data-line-key, "<turn id>:input:<place>"), one
+// that opened a wake turn its turn's id and ":prompt" (never the answer's
+// key, the bare id).
 export function answerKey(bubble) {
+  if (isReport(bubble)) {
+    const turn = bubble.getAttribute("data-turn-id");
+    return bubble.getAttribute("data-line-key") || (turn ? `${turn}:prompt` : null);
+  }
   return bubble?.getAttribute?.("data-answer-turn") || bubble?.getAttribute?.("data-reply-key") || null;
 }
 
@@ -146,13 +192,30 @@ function answerText(bubble) {
   return bubbleCopyText(bubble);
 }
 
+// A delegate report's lines before its body: "session: <id>",
+// "status: <s>", "---".
+const REPORT_HEADER = /^(?:(?:session|status):\s|---\s*$)/;
+
+// A report row's label: its origin label (the bubble's) and its first
+// heading or first line after the header.
+export function reportLabel(text, origin = "") {
+  const body = String(text ?? "").replace(/\r\n?/g, "\n").split("\n").filter((l) => !REPORT_HEADER.test(l.trim())).join("\n");
+  const first = foldLabel(body);
+  return clip([origin.trim(), first].filter(Boolean).join(" · "), LABEL_CHARS);
+}
+
 function drawRow(row, bubble) {
   const folded = bubble.classList.contains("folded");
   const text = answerText(bubble);
-  const { label, size } = foldRowText(text, { display: bubble.hasAttribute("data-answer-display"), folded });
+  const report = isReport(bubble);
+  const own = report ? { label: reportLabel(text, bubble.querySelector(":scope > .origin-label")?.textContent || "") } : {};
+  const { label, size } = foldRowText(text, { display: bubble.hasAttribute("data-answer-display"), folded, ...own });
+  const what = report ? "report" : "answer";
   row.setAttribute("aria-expanded", folded ? "false" : "true");
-  row.title = folded ? "Show the answer" : "Fold the answer";
+  row.title = folded ? `Show the ${what}` : `Fold the ${what}`;
   row.classList.toggle("folded", folded);
+  row.classList.toggle("report", report);
+  row.classList.toggle("steered", report && bubble.classList.contains("steered"));
   const [labelEl, sizeEl] = row.children;
   if (labelEl.textContent !== label) labelEl.textContent = label;
   if (sizeEl.textContent !== size) sizeEl.textContent = size;
@@ -186,8 +249,9 @@ export function keepRowInView(scroller, row, mutate) {
 // @param historyEl the history (#history), also its scroller
 // @param sessionId () => the open session's id
 // @param projectRoot () => the open session's project root, or null
+// @param motion (bubble) => whether a fold or unfold animates (canAnimate)
 // @return {decorate(root)} (the observer runs it; specs call it)
-export function installAnswerFold({ historyEl, sessionId, projectRoot = () => null }) {
+export function installAnswerFold({ historyEl, sessionId, projectRoot = () => null, motion = canAnimate }) {
   // Each bubble's row, and each row's bubble.
   const rows = new WeakMap();
   const bubbleOf = new WeakMap();
@@ -202,14 +266,18 @@ export function installAnswerFold({ historyEl, sessionId, projectRoot = () => nu
       rows.set(bubble, row);
       bubbleOf.set(row, bubble);
       // The stored choice, once: after that the bubble's class is the state
-      // (a jump that unfolds it, history_reveal.js, isn't saved).
-      if (stored().includes(key)) bubble.classList.add("folded");
+      // (a jump that unfolds it, history_reveal.js, isn't saved). An answer
+      // is open unless folded by hand, a report folded unless opened.
+      const folded = isReport(bubble) ? !stored().open.includes(key) : stored().turns.includes(key);
+      if (folded) bubble.classList.add("folded");
     }
     if (bubble.previousElementSibling !== row) historyEl.insertBefore(row, bubble);
     drawRow(row, bubble);
   }
 
-  // Rows whose bubble left (a re-render, a replaced bubble) go with it.
+  // Rows whose bubble left (a re-render, a replaced bubble) go with it; a
+  // row something was placed after (a card or a recap placed before a
+  // report that opens its turn) goes back just before its bubble.
   function dropOrphans() {
     for (const row of historyEl.querySelectorAll(`:scope > .${ROW_CLASS}`)) {
       const bubble = bubbleOf.get(row);
@@ -219,8 +287,8 @@ export function installAnswerFold({ historyEl, sessionId, projectRoot = () => nu
   }
 
   function decorate(root) {
-    let folded = null;
-    const stored = () => (folded ??= readFolded(sessionId()));
+    let entry = null;
+    const stored = () => (entry ??= { turns: readFolded(sessionId()), open: readOpened(sessionId()) });
     if (root.matches?.(ANSWERS)) decorateBubble(root, stored);
     for (const bubble of root.querySelectorAll?.(ANSWERS) || []) decorateBubble(bubble, stored);
   }
@@ -229,18 +297,22 @@ export function installAnswerFold({ historyEl, sessionId, projectRoot = () => nu
   // the same frame as its bubble, so nothing below it shifts after a paint.
   new MutationObserver((records) => {
     const roots = new Set();
-    let removed = false;
+    let settle = false;
     for (const r of records) {
       if (r.type === "attributes") {
         if (r.target.matches?.(ANSWERS)) roots.add(r.target);
         continue;
       }
-      if (r.removedNodes.length) removed = true;
+      if (r.removedNodes.length) settle = true;
       const answer = r.target.closest?.(ANSWERS);
       if (answer) roots.add(answer);
-      for (const n of r.addedNodes) if (n.nodeType === 1 && !n.classList.contains(ROW_CLASS)) roots.add(n);
+      for (const n of r.addedNodes) {
+        if (n.nodeType !== 1 || n.classList.contains(ROW_CLASS)) continue;
+        roots.add(n);
+        if (r.target === historyEl) settle = true;
+      }
     }
-    if (removed) dropOrphans();
+    if (settle) dropOrphans();
     for (const el of roots) if (el.isConnected) decorate(el);
   }).observe(historyEl, { childList: true, subtree: true, attributes: true, attributeFilter: ["class"] });
   decorate(historyEl);
@@ -251,11 +323,19 @@ export function installAnswerFold({ historyEl, sessionId, projectRoot = () => nu
     if (!bubble) return;
     e.preventDefault();
     const folded = !bubble.classList.contains("folded");
-    keepRowInView(historyEl, row, () => {
+    const settle = () => keepRowInView(historyEl, row, () => {
       bubble.classList.toggle("folded", folded);
       drawRow(row, bubble);
     });
-    writeFold(sessionId(), answerKey(bubble), folded, { root: projectRoot() });
+    if (!motion(bubble)) settle();
+    else if (folded) animateHeight(bubble, bubble.offsetHeight, 0, { fade: true }).then(settle);
+    else {
+      settle();
+      animateHeight(bubble, 0, bubble.offsetHeight, { fade: true });
+    }
+    // An answer's choice is its fold, a report's its unfold (D2: the default differs).
+    if (isReport(bubble)) writeOpened(sessionId(), answerKey(bubble), !folded, { root: projectRoot() });
+    else writeFold(sessionId(), answerKey(bubble), folded, { root: projectRoot() });
   });
 
   return { decorate };

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

@@ -35,10 +35,8 @@ import {
 import { authProbe, createAuthLost } from "./auth_lost.js";
 import { REPLACE_SESSION_TEXT, fragmentCode, tradeFragmentCode } from "./token_fragment.js";
 import { createContextChips } from "./context_chips.js";
-import { createLlmContextControl } from "./llm_context_chip.js";
 import { createParticipantsControl } from "./participants_panel.js";
-import { createThinkingControl } from "./thinking_chip.js";
-import { createReasoningHistoryControl } from "./reasoning_history_chip.js";
+import { createSettingsControl } from "./settings_chip.js";
 import { renderInfoBar } from "./info_bar.js";
 import { sessionBar, workerBadgeFor } from "./info_bar_model.js";
 import { createShownTexts } from "./shown_texts.js";
@@ -74,6 +72,7 @@ import { OWNER_FINAL, verifyTurnOf } from "./verify_target.js";
 import { actionLine, annotationActions, composerWithAction } from "./annotate_actions.js";
 import { copyText, installCopy } from "./copy.js";
 import { installAnswerFold, sweepAnswerFolds } from "./answer_fold.js";
+import { installDetailsMotion } from "./details_motion.js";
 import { answerLabel, installReviseStacks, reviseChipTemplate, reviseWorkerUnavailable } from "./revise_stack.js";
 import { createQuestionCards } from "./question_cards.js";
 import { splitSnapshotCards } from "./card.js";
@@ -155,29 +154,13 @@ const contextChips = createContextChips({
   api: { list: listContext, show: getContext, detach: detachContext, add: addContext },
   toast: (text) => showToast(text),
 });
-// The open session's LLM context chip in the info bar, and its popover:
-// /llm-context runs in the session's worker.
-const llmContextControl = createLlmContextControl({
+// The open session's ⚙ chip in the info bar, and its panel (thinking,
+// reasoning history, LLM context): a pick runs its command in the session's
+// worker.
+const settingsControl = createSettingsControl({
   el: infoTextEl,
-  summary: () => (store.selected ? store.current.llmContext : null),
-  session: () => store.selected,
-  running: () => liveTurn.running,
-  run: (line) => runSessionCommand(line),
-});
-// The open session's thinking chip, beside the llm ctx one: /thinking runs
-// in the session's worker.
-const thinkingControl = createThinkingControl({
-  el: infoTextEl,
-  summary: () => (store.selected ? store.current.thinking : null),
-  session: () => store.selected,
-  running: () => liveTurn.running,
-  run: (line) => runSessionCommand(line),
-});
-// The open session's reasoning history chip, after the thinking one (a
-// chat host's only): /reasoning-history runs in the session's worker.
-const reasoningHistoryControl = createReasoningHistoryControl({
-  el: infoTextEl,
-  summary: () => (store.selected ? store.current.reasoningHistory : null),
+  summaries: () => (store.selected ? { thinking: store.current.thinking, reasoningHistory: store.current.reasoningHistory,
+                                       llmContext: store.current.llmContext } : null),
   session: () => store.selected,
   running: () => liveTurn.running,
   run: (line) => runSessionCommand(line),
@@ -1191,14 +1174,15 @@ function renderSessionView(data, { kept = [] } = {}) {
   const loadWarned = (label) => (data.cards || []).some((c) => c?.type === "guardrail_warning" && (c.label || "guardrails") === label);
   if (!loadWarned("guardrails")) showGuardrailWarning(data.guardrail_warning);
   if (!loadWarned("plugins")) showGuardrailWarning(data.plugin_warning, "plugins");
-  // The recap saved with the session (also a stopped one's), else a live
-  // worker's from before saved_recap existed.
-  if (data.saved_recap) showRecap(data.saved_recap.text, data.saved_recap.turns_since, data.saved_recap.created_at || null);
-  else showRecap(data.recap);
   // A live worker's last cards and between-turns notices, where they
   // arrived; the running turn's go into its step once it is drawn.
   const snapshotCards = splitSnapshotCards(data.cards, pageCapabilities);
   placeSnapshotCards(snapshotCards.placed);
+  // The recap saved with the session (also a stopped one's), else a live
+  // worker's from before saved_recap existed. After the cards: the last
+  // turn's check-in notice goes to the end, and the recap closes the page.
+  if (data.saved_recap) showRecap(data.saved_recap.text, data.saved_recap.turns_since, data.saved_recap.created_at || null);
+  else showRecap(data.recap);
   const replay = snapshotEvents({
     current_turn: data.current_turn,
     queued: data.queued,
@@ -1373,8 +1357,6 @@ function endTurnView(kind, endText = null, { emptyAnswer = null, stopped = false
   if (questionCards.pendingQuestion()) questionCards.resolveQuestion(questionCards.pendingQuestion().id, { cancelled: true, reason: "turn ended" });
 }
 
-// The info bar's "copy chi --attach": the full id, which the page shows
-// only short; "copied ✓" for 2 s (current.attachCopiedAt: that session's).
 infoTextEl.addEventListener("click", (e) => {
   if (e.target.closest(".worker-restart")) restartWorker();
   // Pushed as openAllView does, so the view's back returns here.
@@ -1383,12 +1365,10 @@ infoTextEl.addEventListener("click", (e) => {
     openAllView();
   }
 });
+// The info bar's id: a click copies the full id, which the bar shows only short.
 infoTextEl.addEventListener("click", async (e) => {
-  if (!e.target.closest(".copy-attach") || !store.selected) return;
-  const id = store.selected;
-  if (!(await copyText(`chi --attach ${id}`)) || id !== store.selected) return;
-  store.update({ current: { attachCopiedAt: Date.now() } });
-  setTimeout(() => store.touch("infoBar"), 2000);
+  if (!e.target.closest(".id") || !store.selected) return;
+  showToast((await copyText(store.selected)) ? "Session id copied" : "Couldn't copy the session id");
 });
 
 // Apply (review_apply.js) under a participant's review turn that just
@@ -1503,7 +1483,7 @@ function updateInfoBar() {
   const { buttons, bar } = sessionBar({
     id: store.selected, state: store.current, sessions: store.sessions, versions, cardTitle: (s) => lists.cardTitle(s),
     continuing: sessionActions.continuing, restarting: restartingIds, streaming: !!streamControl, running: liveTurn.running,
-    now: Date.now(), workingSet: workingSet ? workingSet.chip() : undefined, participants: participantsControl.chip(),
+    workingSet: workingSet ? workingSet.chip() : undefined, participants: participantsControl.chip(),
   });
   const stopBtn = document.getElementById("infoStopBtn");
   const deleteBtn = document.getElementById("infoDeleteBtn");
@@ -2106,6 +2086,10 @@ historyEl.addEventListener("click", (e) => {
 });
 turnDom.scrollEl.addEventListener("scroll", annotateBar.schedule, true);
 turnRoots().forEach((root) => installCopy(root));
+// A steps block, a thinking block and the recap open and close by hand
+// with their height animated (details_motion.js), in the history and on
+// the stage.
+installDetailsMotion({ root: document.body, selector: ".turn-work, .bubble.thinking, .bubble.recap" });
 // Long answers fold by hand (answer_fold.js), per viewer and session.
 installAnswerFold({
   historyEl,
@@ -2193,9 +2177,7 @@ document.addEventListener("keydown", (e) => {
 // before it (none at load) would redraw nothing.
 store.on("lists", () => lists.render());
 store.on("paintActive", () => lists.paintActive());
-store.on("llmContextChip", () => llmContextControl.refresh());
-store.on("thinkingChip", () => thinkingControl.refresh());
-store.on("reasoningChip", () => reasoningHistoryControl.refresh());
+store.on("settingsPanel", () => settingsControl.refresh());
 // The working set's list offers pin only under forget.
 store.on("workingSetStrategy", () => workingSet?.strategyChanged());
 store.on("featureGates", () => featureGates.check(store.current));

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

@@ -14,6 +14,11 @@ import { hookNoticeLabel, isReportClient, promptOps } from "./turn_events.js";
 import { drawCommandBubble } from "./commands.js";
 import { TIME_GAP_CLASS, timeGapEl } from "./time_gaps.js";
 
+// What a session's load places at a turn's prompt from the snapshot
+// (cards_place.js placeSnapshotCards): its cards, answered questions,
+// notices and warnings.
+const SNAPSHOT_PLACED = ".plugin-card, .bubble.question, .bubble.hook-notice, .bubble.guardrail-warning";
+
 export function removeQueuedBubble(bubble) {
   if (!bubble) return;
   const slot = bubble.parentElement?.classList.contains("ts-queued") ? bubble.parentElement : null;
@@ -159,10 +164,11 @@ export function createBubbles({
 
   // The bubble a reload draws (turn_html.js), with this page's own fields.
   // +delivery+: how it went into a running turn (next_step, cut, queue): its
-  // queued badge says what it waits for.
-  function makeUserBubble(prompt, { state = null, label = null, enqueuedId = null, own = false, images = null, delivery = null, author = null, turnId = null } = {}) {
+  // queued badge says what it waits for. +source+: a delegate report's
+  // "delegate_report" (its fold row, answer_fold.js).
+  function makeUserBubble(prompt, { state = null, label = null, enqueuedId = null, own = false, images = null, delivery = null, author = null, turnId = null, source = null } = {}) {
     removeHint();
-    const div = elementOf(userBubbleTemplate({ content: prompt, turn_id: turnId }, {
+    const div = elementOf(userBubbleTemplate({ content: prompt, turn_id: turnId, source }, {
       label, state, own, enqueuedId, delivery, author, key: normalize(prompt), thumbs: thumbsTemplate(selected(), images),
     }));
     return placeFollowing(div);
@@ -182,10 +188,16 @@ export function createBubbles({
     return echoes.find((el) => el.dataset.userContent === text) || echoes[0] || null;
   }
 
+  // The running wake turn's id (a turn chi ran for reports), for its report's bubble.
+  let wakeTurnId = null;
+
   // Returns the bubble of the turn a turn_started starts (the stage takes it
   // into its prompt line), else null.
   function applyPromptOps(event) {
-    if (event.type === "turn_started") liveTurn.wakeStart = !!event.continue && isReportClient(event.origin?.client_id);
+    if (event.type === "turn_started") {
+      liveTurn.wakeStart = !!event.continue && isReportClient(event.origin?.client_id);
+      wakeTurnId = liveTurn.wakeStart ? event.turn_id || null : null;
+    }
     const ops = promptOps(event, { myId: clientId, known: (id) => !!bubbleById(id), unmatchedMerge: liveTurn.unmatchedMerge, wakeStart: liveTurn.wakeStart });
     if (event.type === "input_merged") liveTurn.unmatchedMerge = false;
     if (event.type === "pending_input_merged") liveTurn.unmatchedMerge = false;
@@ -194,7 +206,10 @@ export function createBubbles({
       if (op.op === "report") {
         liveTurn.unmatchedMerge = "report";
       } else if (op.op === "add") {
-        const bubble = makeUserBubble(op.prompt, { state: op.state, label: op.label, enqueuedId: op.enqueuedId, images: op.images, delivery: op.delivery, author: op.author });
+        // A report that opens a wake turn carries that turn's id, as a
+        // reload's does (its fold key); a merged one has none until reload.
+        const turnId = op.source && !op.state && liveTurn.wakeStart ? wakeTurnId : null;
+        const bubble = makeUserBubble(op.prompt, { state: op.state, label: op.label, enqueuedId: op.enqueuedId, images: op.images, delivery: op.delivery, author: op.author, source: op.source, turnId });
         if (op.state === "started") started = bubble;
         if (event.type === "pending_input_merged") liveTurn.wakeStart = false;
       } else if (op.op === "tag") {
@@ -241,8 +256,13 @@ export function createBubbles({
     // Never in the stage: a recap is between turns.
     turnDom.settleFold();
     const prompt = recapPlace(turnPromptBubbles(historyEl), turnsSince);
-    // Above that turn's gap divider too: the recap was written before the quiet stretch ended.
-    const before = prompt?.previousElementSibling?.matches(`.${TIME_GAP_CLASS}`) ? prompt.previousElementSibling : prompt;
+    // Above that turn's gap divider too: the recap was written before the quiet stretch ended. The
+    // snapshot's cards placed at that prompt (placed first) sit between the divider and the prompt.
+    // A delegate report's fold row (answer_fold.js) heads its prompt.
+    const head = prompt?.previousElementSibling?.matches(".answer-fold") ? prompt.previousElementSibling : prompt;
+    let back = head?.previousElementSibling;
+    while (back?.matches(SNAPSHOT_PLACED)) back = back.previousElementSibling;
+    const before = back?.matches(`.${TIME_GAP_CLASS}`) ? back : head;
     keepFollowing(historyEl, () => (before ? historyEl.insertBefore(details, before) : appendAboveLiveTiming(historyEl, details, liveTurn.timing.el)));
   }
 

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

@@ -1,5 +1,5 @@
-// The popover shell a session-bar chip opens (llm_context_chip.js,
-// level_chip.js, the working set's): a div.ctx-popover on the body, placed
+// The popover shell a session-bar chip opens (settings_chip.js' ⚙ panel,
+// the working set's, the start page's panels): a div.ctx-popover on the body, placed
 // at the chip, opened by a click on it (delegated on +el+) or by open()
 // (another opener: the working set's rail and footprint), closed by a second
 // click, its × (data-act="close"), a click outside or Esc; focus goes back

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

@@ -0,0 +1,74 @@
+// Collapsibles keep their shape: a steps block, a thinking block, the recap
+// and the answer fold are the same box open or closed (the bar, the border,
+// the width), and a click only changes the height. This module is the
+// motion: a click on one of their summaries animates the height between the
+// two states (Web Animations, MOTION_MS) instead of snapping, and the
+// answer fold borrows animateHeight for its bubble. Nothing moves when the
+// viewer prefers reduced motion or the element cannot animate (an old
+// engine, a spec's DOM): the click is the native toggle then.
+//
+// Only a hand's click animates: the page's own opens and closes (a turn's
+// end closing a block, a reload drawing the outline) stay instant, as they
+// are not a change the viewer watches.
+//
+// A module of its own: static JS is cached at unversioned URLs, and a new
+// export on an old module would blank the page.
+
+export const MOTION_MS = 220;
+
+// Whether +el+ can animate for this viewer.
+export function canAnimate(el) {
+  if (typeof el?.animate !== "function") return false;
+  const win = el.ownerDocument?.defaultView;
+  return !win?.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
+}
+
+// Animates +el+'s height from +from+ to +to+ (px), its overflow clipped
+// meanwhile; +fade+ fades it with the height. Resolves when the animation
+// is over (or canceled).
+export async function animateHeight(el, from, to, { fade = false, ms = MOTION_MS } = {}) {
+  const at = (h, o) => (fade ? { height: `${h}px`, opacity: String(o) } : { height: `${h}px` });
+  const anim = el.animate([at(from, from ? 1 : 0), at(to, to ? 1 : 0)], { duration: ms, easing: "ease" });
+  el.style.overflow = "hidden";
+  try {
+    await anim.finished;
+  } catch {
+    // canceled: the element is where its class puts it
+  } finally {
+    el.style.overflow = "";
+  }
+}
+
+// A <details>' height closed: its summary and its own padding and borders.
+function closedHeight(details, summary) {
+  const win = details.ownerDocument?.defaultView;
+  const cs = win?.getComputedStyle?.(details);
+  const px = (v) => Number.parseFloat(v) || 0;
+  const frame = cs ? px(cs.paddingTop) + px(cs.paddingBottom) + px(cs.borderTopWidth) + px(cs.borderBottomWidth) : 0;
+  return summary.offsetHeight + frame;
+}
+
+// Installs the motion on +root+ for the <details> matching +selector+ whose
+// own summary is clicked. +motion+: whether to animate +el+ (canAnimate).
+export function installDetailsMotion({ root, selector, motion = canAnimate }) {
+  const busy = new WeakSet();
+  root.addEventListener("click", (e) => {
+    const summary = e.target.closest?.("summary");
+    const details = summary?.parentElement;
+    if (!details || !details.matches?.(selector) || summary.parentElement !== details) return;
+    if (e.target.closest("a, button, input, label") !== null && e.target !== summary) return;
+    if (!motion(details)) return;
+    e.preventDefault();
+    if (busy.has(details)) return;
+    busy.add(details);
+    const done = () => busy.delete(details);
+    if (details.open) {
+      const from = details.offsetHeight;
+      animateHeight(details, from, closedHeight(details, summary)).then(() => { details.open = false; done(); });
+    } else {
+      const from = closedHeight(details, summary);
+      details.open = true;
+      animateHeight(details, from, details.offsetHeight).then(done);
+    }
+  });
+}

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

@@ -1,6 +1,6 @@
 // The one way a jump into the history shows what it lands on: whatever
 // hides +el+ unfolds: a closed <details> around it (a turn's steps block, a
-// step, a diff), an answer folded by hand (answer_fold.js: its row follows
+// step, a diff), an answer or a delegate report folded (answer_fold.js: its row follows
 // the bubble's class; the jump's unfold isn't saved), a superseded version
 // of a Revise stack (revise_stack.js: its stub opens, not saved). Every
 // jump goes through it (claim_link.js showClaim, refs.js showRow and so the
@@ -19,7 +19,7 @@ import { openStubOver } from "./revise_stack.js";
 export function revealInHistory(el) {
   if (!el) return null;
   openStubOver(el);
-  el.closest?.(".bubble.output.folded")?.classList.remove("folded");
+  el.closest?.(".bubble.folded")?.classList.remove("folded");
   for (let details = el.parentElement?.closest("details"); details; details = details.parentElement?.closest("details")) {
     details.open = true;
   }