samagotchi 0.60.0 → 0.62.0

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

@@ -1,18 +1,21 @@
 // The stage view of a running turn (web.view: stage): the active turn pinned
-// above the composer, as the top section of the dock card. It shows only
+// above the composer, its own card floating over the dock's (out of the
+// dock's flow: its height never moves the composer). It shows only
 // what happens now in fixed slots (a status row, the prompt, a two-line
 // headline, the running tool, a one-line trail of the last calls), the
 // cards and rows that arrive meanwhile in their own capped scroller, the
-// answer, and a chip with one tick per tool call: the "cloud", the turn
-// view's block (turn_view.js) reused as is, expands in place, newest step
-// first while the turn runs. When the turn has ended and the stage is not
+// answer, and a chip with one tick per tool call, the stage's footer (no
+// content above it can push it away): the "cloud", the turn view's block
+// (turn_view.js) reused as is, opens above it as the scroller's last slot,
+// newest step first while the turn runs. When the turn has ended and the stage is not
 // in use, everything moves into the history in the turn view's order (the
 // hand-off), so a handed-off turn reads like the turn view's and like its
 // reload. Slots are patched in place, never rebuilt from HTML: a selection
 // and annotate survive. The rules are pure in stage_model.js.
 import { createTurnView } from "./turn_view.js";
-import { flashOf, handOffDue, handOffOrder, headlineOf, inUseFrom, isPlain, liveSlots, placeFor, trailFlashText, trailItemText, trailTone } from "./stage_model.js";
+import { flashOf, frameTarget, handOffDue, handOffOrder, headlineOf, inUseFrom, isPlain, liveSlots, placeFor, trailFlashText, trailItemText, trailTone } from "./stage_model.js";
 import { formatDuration } from "./timing.js";
+import { easeScrollTo } from "./scroll.js";
 import { taskCommand, taskStopButton } from "./task_stop.js";
 
 const COLLAPSE_KEY = "chi_stage_collapsed";
@@ -20,8 +23,19 @@ const WATCH_MS = 200;
 // The turn-end read (markdown, answer_display) settles within this, or the
 // hand-off stops waiting for it.
 const SETTLE_CAP_MS = 8000;
-const FOLD_MS = 420;
+export const FOLD_MS = 420;
+// The stage grows (a card, the long answer, the cloud opening) with a short
+// ease: deliberate, never a snap.
+const GROW_MS = 180;
+const GROW_EASE = "cubic-bezier(.2,.7,.3,1)";
+// The room between the stage and the composer card (index.html's margin-bottom).
+const STAGE_GAP = 10;
 const FLASH_MS = 4000;
+// The answer reads from its top: at the end it is scrolled to unless this
+// much of it (about three lines) shows already.
+const ANSWER_SEEN = 72;
+// A short answer cut by less than this at its foot isn't scrolled to.
+const ANSWER_CUT = 12;
 const PENDING = ".bubble.question:not(.answered):not(.cancelled), .bubble.continue:not(.resolved)";
 // A running turn's card with actions (check-in's Nudge / Keep going / Stop)
 // asks the user too, but the turn goes on: it waits only while the turn runs
@@ -39,6 +53,10 @@ function node(tag, cls, parent = null) {
   return el;
 }
 
+function reducedMotion() {
+  return matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 function readCollapsed() {
   try { return localStorage.getItem(COLLAPSE_KEY) === "1"; } catch (_) { return false; }
 }
@@ -80,18 +98,32 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
   headline.tabIndex = 0;
   headline.setAttribute("role", "button");
   headline.title = "Show this step's reasoning";
+  // While a question or approval waits: the whole reply that asked it, in
+  // the headline's place (the card says what to answer, this says why).
+  const asking = node("div", "ts-asking", live);
+  asking.hidden = true;
   const now = node("div", "ts-now", live);
   const trail = node("div", "ts-trail", live);
   const extras = node("div", "ts-extras", scroller);
   const answer = node("div", "ts-answer", scroller);
   const tail = node("div", "ts-tail", scroller);
-  const cloud = node("div", "ts-cloud", scroller);
+  // The cloud's steps, the scroller's last slot, right above the chip.
+  const cloudBody = node("div", "ts-cloud-body", scroller);
+  cloudBody.hidden = true;
+  // A 1 px mark at the tallest content's end (absolute: out of the flow),
+  // so the scroll extent never drops while the turn runs: content that
+  // shrinks never lowers a scrolled reader's scrollTop (the browser would
+  // clamp it, moving everything in sight), even in the layout before
+  // fitFrame runs.
+  const holdEl = node("div", "ts-hold", scroller);
+  holdEl.setAttribute("aria-hidden", "true");
+  // The footer: the chip, pinned to the stage's bottom edge as the status
+  // row is to its top.
+  const cloud = node("div", "ts-foot", stage);
   const chip = node("button", "ts-chip", cloud);
   chip.type = "button";
   const chipLabel = node("span", "ts-chip-label", chip);
   const ticks = node("span", "ts-ticks", chip);
-  const cloudBody = node("div", "ts-cloud-body", cloud);
-  cloudBody.hidden = true;
 
   // The turn in the stage, from turnStarted until the hand-off (or a reset).
   let holding = false;
@@ -114,8 +146,14 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
   let quietSince = null;
   let pointerIn = false;
   let lastTouch = 0;
+  // The frame (fitFrame): the height held while the turn runs and the
+  // tallest content seen.
+  let held = null;
+  let maxContent = 0;
+  let growth = null; // the running ease of the frame's growth (an Animation)
+  let growthTo = 0; // its end height
   // What each slot shows, so an unchanged slot is left alone.
-  const shown = { headline: null, now: null, trail: null };
+  const shown = { headline: null, now: null, trail: null, asking: null };
 
   const view = createTurnView({
     historyEl,
@@ -161,8 +199,9 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     return !endKind && !!extras.querySelector(ASKS);
   }
   // A card answered or redrawn in place (its buttons gone) changes the
-  // status without a turn event.
-  new MutationObserver(() => scheduleRefresh()).observe(extras, { childList: true, subtree: true });
+  // status without a turn event: at once (a microtask), so the slots swap in
+  // the card's own task, never a frame apart.
+  new MutationObserver(() => refresh()).observe(extras, { childList: true, subtree: true });
 
   function refresh() {
     rafPending = false;
@@ -183,17 +222,25 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     // A question blocks the turn: its card takes the live slots' room. An
     // asking card's turn goes on: the status waits, the slots stay.
     const blocked = pendingCard();
-    const slots = liveSlots(turn, { narration, thinking, pending: blocked || asksCard(), ended: endKind, emptyAnswer });
-
+    const slots = liveSlots(turn, { narration, thinking, pending: blocked || asksCard(), blocked, ended: endKind, emptyAnswer });
+
+    // The live slots keep their height while the turn waits and until its
+    // next step (held-wait, set with waiting): the card under them never
+    // moves at the answer. The waiting height is measured before the swap.
+    const wasWaiting = stage.classList.contains("waiting");
+    if (blocked && !wasWaiting) stage.classList.add("held-wait");
+    if (!blocked && wasWaiting) stage.style.setProperty("--live-held", `${live.offsetHeight}px`);
     stage.classList.toggle("plain", plain);
     stage.classList.toggle("ended", !!endKind);
     stage.classList.toggle("waiting", blocked);
+    stage.classList.toggle("asking", !!slots.asking);
     stage.dataset.phase = slots.phase;
     mark.textContent = MARKS[slots.phase] || "";
     phaseEl.textContent = slots.phase;
     const steps = `${slots.step} step${slots.step === 1 ? "" : "s"}`;
 
     drawHeadline(slots.headline);
+    drawAsking(slots.asking);
     drawNow(slots.tool, slots.quiet);
     drawTrail(slots.trail);
     drawTicks(slots.ticks);
@@ -207,8 +254,11 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     miniTool.textContent = collapsed && slots.tool ? `${slots.tool.name} ${slots.tool.title}` : "";
     miniTool.title = (collapsed && slots.tool?.command) || "";
 
-    live.hidden = plain || !!endKind;
+    // An ended turn's live slots go, unless something under them would move
+    // (a card or a row in the extras): then they stay as they were last.
+    live.hidden = plain || (!!endKind && !extras.firstChild);
     cloud.hidden = !blockEl || blockEl.parentNode !== cloudBody;
+    cloudBody.hidden = !cloudOpen || cloud.hidden;
     // Running: the step it is on. Ended: the count, unless the chip says it.
     stepEl.textContent = !endKind ? `step ${slots.step}` : cloud.hidden ? steps : "";
     promptSlot.hidden = !promptSlot.firstChild;
@@ -233,6 +283,17 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     headline.classList.add("fresh");
   }
 
+  // Patched only when the text changes (a late chunk to the closed gen
+  // rewrites the same text): a selection in it survives. A new text reads
+  // from its top.
+  function drawAsking(text) {
+    asking.hidden = !text;
+    if (shown.asking === text) return;
+    shown.asking = text;
+    asking.textContent = text;
+    asking.scrollTop = 0;
+  }
+
   function drawNow(tool, quiet) {
     // A task_wait's stop button, as the row's (task_stop.js): in the key
     // with its in-flight state, so a redraw keeps a clicked one disabled.
@@ -307,13 +368,34 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     while (ticks.children.length > list.length) ticks.lastChild.remove();
   }
 
-  // The answer reads from its top (no tail pin in the stage).
+  // The answer reads from its top (no tail pin in the stage): scrolled to
+  // (eased, once the stage has grown for it) when its top is out of sight
+  // or only its first line shows.
   function showAnswerTop() {
-    requestAnimationFrame(() => {
-      if (answer.firstChild) scroller.scrollTop = Math.max(0, answer.offsetTop - 8);
+    afterGrowth(() => {
+      if (!answer.firstChild || answer.hidden || stage.hidden) return;
+      const top = answer.offsetTop;
+      const seen = scroller.scrollTop + scroller.clientHeight - top;
+      if (top < scroller.scrollTop || seen < Math.min(answer.offsetHeight - ANSWER_CUT, ANSWER_SEEN)) easeStage(Math.max(0, top - 8));
     });
   }
 
+  // The stage's own scrolls, eased (instant with reduced motion).
+  function easeStage(top) {
+    if (Math.abs(top - scroller.scrollTop) < 1) return;
+    easeScrollTo(scroller, top, { reduce: reducedMotion() });
+  }
+
+  // +fn+ once the frame has grown for a change made now: two frames on (the
+  // ResizeObserver starts the ease in the frame after the change), then at
+  // the ease's end.
+  function afterGrowth(fn) {
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (growth?.playState === "running") growth.finished.then(fn, fn);
+      else fn();
+    }));
+  }
+
   // ── collapse, cloud, peek ────────────────────────────────────────────────
 
   function applyCollapsed() {
@@ -335,11 +417,16 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
 
   function setCloud(open) {
     cloudOpen = open;
-    cloudBody.hidden = !open;
+    cloudBody.hidden = !open || cloud.hidden;
+    // Closed by hand: its room isn't held at the scroller's end.
+    if (!open) maxContent = 0;
     cloud.classList.toggle("open", open);
     stage.classList.toggle("cloud-open", open);
     chip.setAttribute("aria-expanded", String(open));
     fitCap();
+    // The steps open right above the chip: in sight (the answer and the
+    // cards above them scroll up), once the stage has grown for them.
+    if (open) afterGrowth(() => reveal(cloudBody));
   }
 
   // Open the cloud at step +i+ (a hand toggle, as a click on its row), its
@@ -377,14 +464,20 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
   // stage and the cloud to it, as a hand toggle would.
   // A collapsed stage opens for this turn only: the kept choice
   // (chi_stage_collapsed) is left alone and comes back at the release.
+  // The row's scroll into view (refs.js) waits for the stage's growth.
+  // A row of a turn sliding away is no longer the stage's: it goes into the
+  // history first (finishFold), and refs.js finds it there.
   stage.addEventListener("ref:reveal", (e) => {
     if (!cloudBody.contains(e.target)) return;
+    if (folding) return finishFold();
+    if (!holding) return;
     if (collapsed) {
       collapsed = false;
       revealed = true;
       applyCollapsed();
     }
     setCloud(true);
+    if (e.detail) e.detail.until = new Promise((resolve) => afterGrowth(resolve));
   });
   headline.addEventListener("keydown", (e) => {
     if (e.key === "Enter" || e.key === " ") {
@@ -402,24 +495,119 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
   // never above the session panel (the dock is absolute: a tall composer or
   // a phone's keyboard would push the stage's top out) ────────────────────
 
-  // Scroll the stage so +slot+'s end shows (it is the scroller's child).
-  function revealSlot(slot) {
-    if (stage.hidden || slot.hidden) return;
-    const end = slot.offsetTop + slot.offsetHeight - scroller.clientHeight;
-    if (end > scroller.scrollTop) scroller.scrollTop = end;
+  // Where the stage's scroll goes so +slot+ (the scroller's child) shows:
+  // its end in sight, and the asking text's top too when it and the slot
+  // (a waiting card) fit together (the reply reads from its start, the card
+  // still in sight). null: nothing to show.
+  function revealTop(slot) {
+    if (stage.hidden || slot.hidden) return null;
+    let top = Math.max(scroller.scrollTop, slot.offsetTop + slot.offsetHeight - scroller.clientHeight);
+    if (!asking.hidden && asking.offsetTop < top && slot.offsetTop + slot.offsetHeight - asking.offsetTop <= scroller.clientHeight) top = asking.offsetTop;
+    return top;
+  }
+
+  // Scrolls the stage to show +slot+: eased, or at once (+now+: the cap
+  // dropped under it).
+  function reveal(slot, { now = false } = {}) {
+    const top = revealTop(slot);
+    if (top === null) return;
+    if (now) scroller.scrollTop = top;
+    else easeStage(top);
   }
 
   function fitCap() {
     if (stage.hidden) return;
-    const rest = dockEl.offsetHeight - stage.offsetHeight;
+    // The composer card and the gap above it (the stage floats over them,
+    // out of the dock's flow).
+    const rest = dockEl.offsetHeight + STAGE_GAP;
     const room = centerEl.clientHeight - rest - 32;
     const share = window.innerHeight * (cloudOpen ? 0.8 : 0.6);
-    stage.style.setProperty("--stage-max", `${Math.max(96, Math.round(Math.min(share, room)))}px`);
+    const cap = Math.max(96, Math.round(Math.min(share, room)));
+    const was = capPx();
+    if (cap === was) return;
+    stage.style.setProperty("--stage-max", `${cap}px`);
+    fitFrame();
+    // A smaller cap (a phone's keyboard came up) keeps a waiting card in
+    // sight: the asking text above it would push it out. A larger one
+    // leaves the reader's scroll alone.
+    if (cap < was && stage.classList.contains("waiting")) {
+      requestAnimationFrame(() => reveal(extras, { now: true }));
+    }
   }
   new ResizeObserver(() => fitCap()).observe(centerEl);
   new ResizeObserver(() => fitCap()).observe(composerEl);
   window.addEventListener("resize", fitCap);
 
+  // ── the frame: the one place that writes the stage's height ────────────
+  // Nothing in the stage view jumps. The rules: the stage is out of the
+  // dock's flow (index.html), so its height never moves the composer; while
+  // it holds a turn its height is held and grow-only (frameTarget), so a
+  // content change happens inside it; growth eases (frameTo); the chip is a
+  // footer no content can push; the hand-off releases the turn at once
+  // (releaseTurn) and empties the stage only after it slid away under the
+  // composer (a transform, then finishFold/clearStage).
+
+  // The stage's height, +px+. +animate+: a growth eases (GROW_MS, Web
+  // Animations: the running ease is +growth+), unless motion is reduced or
+  // the stage is hidden or collapsed; a shrink (the cap dropped) is at once.
+  function frameTo(px, { animate = false } = {}) {
+    const from = stage.offsetHeight;
+    stage.style.height = `${px}px`;
+    if (px === from) return;
+    const ease = animate && px > from && !collapsed && !stage.hidden && !document.hidden && !reducedMotion();
+    if (growth && (!ease || growth.playState !== "running" || growthTo !== px)) {
+      growth.cancel();
+      growth = null;
+    }
+    if (!ease || growth) return;
+    growth = stage.animate([{ height: `${from}px` }, { height: `${px}px` }], { duration: GROW_MS, easing: GROW_EASE });
+    growthTo = px;
+    const run = growth;
+    run.finished.then(() => { if (growth === run) growth = null; }, () => {});
+  }
+
+  // Back to the content's own height (under the cap).
+  function frameFree() {
+    growth?.cancel();
+    growth = null;
+    stage.style.height = "";
+  }
+
+  function capPx() {
+    return parseFloat(stage.style.getPropertyValue("--stage-max")) || Infinity;
+  }
+
+  // The scroller's content height: its last shown slot's end (offsetTop is
+  // the scroller's own, whatever its scroll) and its bottom padding.
+  function contentHeight() {
+    const css = getComputedStyle(scroller);
+    let end = parseFloat(css.paddingTop) || 0;
+    for (const el of scroller.children) {
+      if (el === holdEl || el.hidden || !el.getClientRects().length) continue;
+      end = el.offsetTop + el.offsetHeight;
+    }
+    return end + (parseFloat(css.paddingBottom) || 0);
+  }
+
+  // Holds the frame while the stage holds a turn (stage_model.js
+  // frameTarget: grow-only, clamped by the cap; free when collapsed or
+  // released). Run from a ResizeObserver on the slots (after layout, before
+  // paint: no frame shows the content's own height) and when the cap moves.
+  function fitFrame() {
+    if (stage.hidden || stage.classList.contains("leaving")) return;
+    const content = scroller.hidden ? 0 : contentHeight();
+    const holds = holding && !collapsed;
+    maxContent = holds ? Math.max(maxContent, content) : 0;
+    const mark = `${Math.max(0, Math.round(maxContent) - 1)}px`;
+    if (holdEl.style.top !== mark) holdEl.style.top = mark;
+    const natural = (stage.offsetHeight - stage.clientHeight) + status.offsetHeight + content + (cloud.hidden || collapsed ? 0 : cloud.offsetHeight);
+    held = frameTarget({ natural, held, cap: capPx(), holding, collapsed });
+    if (held === null) frameFree();
+    else frameTo(held, { animate: true });
+  }
+  const frameObserver = new ResizeObserver(() => fitFrame());
+  for (const el of [status, promptSlot, live, extras, answer, tail, cloudBody, cloud]) frameObserver.observe(el);
+
   // ── in use: pointer over it (tracked on the stage itself: :hover goes
   // stale when children change), a touch or wheel in the last 4 s (phones
   // have no hover), keyboard focus or a selection in it ─────────────────
@@ -469,11 +657,11 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
 
   // ── show, clear, hand off ────────────────────────────────────────────────
 
+  // A fold cut short (the stage shows again): the slide's class goes.
   function cancelFold() {
     clearTimeout(foldTimer);
     foldTimer = null;
     stage.classList.remove("leaving");
-    stage.style.height = "";
   }
 
   function show() {
@@ -481,7 +669,7 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     const hidden = stage.hidden;
     stage.hidden = false;
     applyCollapsed();
-    if (hidden && !matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    if (hidden && !reducedMotion()) {
       stage.classList.remove("enter");
       void stage.offsetWidth;
       stage.classList.add("enter");
@@ -489,24 +677,38 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
   }
 
   function emptySlots() {
-    for (const slot of [promptSlot, extras, answer, tail, cloudBody, timingSlot, headline, now, trail, ticks]) slot.replaceChildren();
+    for (const slot of [promptSlot, extras, answer, tail, cloudBody, timingSlot, headline, asking, now, trail, ticks]) slot.replaceChildren();
     promptSlot.classList.remove("full");
-    shown.headline = shown.now = shown.trail = null;
+    asking.hidden = true;
+    shown.headline = shown.now = shown.trail = shown.asking = null;
     thinkingLine = null;
     flash = null;
     setCloud(false);
-    stage.classList.remove("plain", "ended", "waiting", "in-use");
+    stage.classList.remove("plain", "ended", "waiting", "held-wait", "asking", "in-use");
+    stage.style.removeProperty("--live-held");
   }
 
-  function release() {
+  // The turn leaves the stage's care (the hand-off's start, a reset, a new
+  // turn): from here new rows, the next timing line and the history's
+  // scroll are the history's (place, timingHost, holds). The slots keep
+  // what they show until clearStage.
+  function releaseTurn() {
     stopWatch();
     clearTimeout(settleTimer);
     holding = false;
+    held = null;
     endKind = null;
     emptyAnswer = false;
     settled = true;
     view.reset();
+  }
+
+  // The stage empty and hidden, its frame free.
+  function clearStage() {
+    cancelFold();
     emptySlots();
+    stage.hidden = true;
+    frameFree();
     if (revealed) {
       revealed = false;
       collapsed = readCollapsed();
@@ -514,65 +716,76 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     }
   }
 
-  // Everything the stage holds, into the history's end in the turn view's
-  // order: prompt, block (collapsed, chronological), extras, answer, timing
-  // line, then the end line and what came after the end. The stage folds
-  // away while the turn fades up into the history (not with +immediate+:
-  // another turn takes the stage at once). The history follows only a
-  // reader who was at its end.
+  function release() {
+    releaseTurn();
+    clearStage();
+  }
+
+  // The hand-off: everything the stage holds goes into the history's end in
+  // the turn view's order (prompt, block (chronological; its outline open,
+  // else collapsed), extras, answer, timing line, then the end line and
+  // what came after the end). The turn is released at once; the stage
+  // slides away under the composer still drawn (a transform: nothing on the
+  // page moves; app.js eases the history's bottom reserve meanwhile), then
+  // the pieces arrive in the history and it follows a reader who was at its
+  // end. Not with +immediate+ (another turn takes the stage at once), a
+  // reduced motion, a hidden page or a collapsed stage: all at once.
+  let folding = null; // { pieces, block, wasAtEnd, animate } while it slides
   function handOff({ immediate = false } = {}) {
+    if (folding && immediate) finishFold();
     if (!holding || !endKind) return;
     const { blockEl } = view.current();
     view.chronological();
-    if (blockEl) blockEl.open = false;
-    const wasAtEnd = historyNearBottom();
+    const block = blockEl && blockEl.parentNode === cloudBody ? blockEl : null;
     const pieces = handOffOrder({
       prompt: promptSlot.firstElementChild,
-      block: blockEl && blockEl.parentNode === cloudBody ? blockEl : null,
+      block,
       extras: [...extras.children],
       answer: [...answer.children],
       timing: timingSlot.firstElementChild,
       kept: [...tail.children],
     });
-    const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
-    const animate = !immediate && !reduce && !document.hidden && !collapsed;
-    if (animate) {
-      stage.style.height = `${stage.offsetHeight}px`;
-      void stage.offsetHeight;
-    }
+    const animate = !immediate && !reducedMotion() && !document.hidden && !collapsed;
+    folding = { pieces, block: blockEl, wasAtEnd: historyNearBottom(), animate };
+    releaseTurn();
+    if (!animate) return finishFold();
+    stage.classList.add("leaving");
+    foldTimer = setTimeout(finishFold, FOLD_MS);
+  }
+
+  // The fold's end (or a cut-short fold): the original pieces (their ref
+  // bindings, selection and late updates with them) move into the history.
+  function finishFold() {
+    const fold = folding;
+    if (!fold) return;
+    folding = null;
+    // Closed, unless it is an outline (turn_view.js outlineBlock): the
+    // history reads its narrated steps without a click.
+    if (fold.block) fold.block.open = fold.block.classList.contains("outline");
     historyEl.querySelector(":scope > .hint")?.remove();
-    for (const el of pieces) {
+    for (const el of fold.pieces) {
       historyEl.appendChild(el);
-      if (animate) {
+      if (fold.animate) {
         el.classList.add("ts-arrive");
         el.addEventListener("animationend", () => el.classList.remove("ts-arrive"), { once: true });
       }
     }
-    release();
-    if (!animate) {
-      stage.hidden = true;
-      if (wasAtEnd) historyEl.scrollTop = historyEl.scrollHeight;
-      return;
-    }
-    stage.classList.add("leaving");
-    stage.style.height = "0px";
-    if (wasAtEnd) historyEl.scrollTo({ top: historyEl.scrollHeight, behavior: "smooth" });
-    foldTimer = setTimeout(() => {
-      cancelFold();
-      stage.hidden = true;
-      if (wasAtEnd) historyEl.scrollTo({ top: historyEl.scrollHeight, behavior: "smooth" });
-    }, FOLD_MS);
+    clearStage();
+    if (fold.wasAtEnd) easeScrollTo(historyEl, () => historyEl.scrollHeight - historyEl.clientHeight, { reduce: !fold.animate || reducedMotion() });
   }
 
   // ── the view interface (app.js) ──────────────────────────────────────────
 
   return {
     turnStarted(data) {
+      if (folding) finishFold();
       if (holding) {
         if (endKind) handOff({ immediate: true });
         else release();
       }
       holding = true;
+      held = null;
+      maxContent = 0;
       endKind = null;
       emptyAnswer = false;
       settled = true;
@@ -585,7 +798,12 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
       show();
       refresh();
     },
-    generationStarted: (data) => view.generationStarted(data),
+    generationStarted(data) {
+      // The next step: the live slots' waiting height is let go.
+      stage.classList.remove("held-wait");
+      stage.style.removeProperty("--live-held");
+      view.generationStarted(data);
+    },
     chunk: (data) => view.chunk(data),
     generationRestarted: (data) => view.generationRestarted(data),
     generationCompleted: () => view.generationCompleted(),
@@ -634,14 +852,17 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
       view.answerReady();
     },
     containsLive: (el) => view.containsLive(el),
+    askingText: () => view.askingText(),
     reset() {
-      cancelFold();
+      if (folding) finishFold();
       release();
-      stage.hidden = true;
     },
     // The stage's extras while it holds a turn (a card, a queued prompt, a
     // command, a note, the end line); false: the history takes it.
     place(el) {
+      // A turn still sliding away goes into the history first: what comes
+      // now comes after it.
+      if (folding) finishFold();
       const kind = el.matches?.(".bubble.recap") ? "recap" : "row";
       if (placeFor({ live: holding, handingOff: false, kind }) !== "stage") return false;
       const slot = endKind ? tail : extras;
@@ -650,15 +871,23 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
       slot.hidden = false;
       const waits = el.matches?.(PENDING) || el.querySelector?.(ASKS);
       if (stick || waits) slot.scrollTop = slot.scrollHeight;
-      scheduleRefresh();
+      // A waiting card and the asking text (refresh) land in one task.
+      if (waits) refresh();
+      else scheduleRefresh();
       // A card that waits for the user is brought into the stage's view: in
       // a short window the prompt and headline fill it and the card sat
-      // below, out of sight (after the refresh, which hides the live slots).
-      if (waits) requestAnimationFrame(() => requestAnimationFrame(() => revealSlot(slot)));
+      // below, out of sight (once the stage has grown for it).
+      if (waits) afterGrowth(() => reveal(slot));
       return true;
     },
     // Where the live timing line goes (the status row), null: the history.
-    timingHost: () => (holding ? timingSlot : null),
+    timingHost: () => {
+      if (folding) finishFold();
+      return holding ? timingSlot : null;
+    },
+    // Before anything else goes into the history (app.js): a turn still
+    // sliding away gets there first.
+    settleFold: () => { if (folding) finishFold(); },
     // A turn is in the stage (running, or ended and not handed off yet):
     // nothing the turn does touches the history's scroll.
     holds: () => holding,

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

@@ -141,12 +141,14 @@ export function createStreamHandlers(deps) {
       if (display) await display.promise;
       turnDom.answerReady?.();
     },
-    // An after_turn hook presented the answer (AnswerDisplay): it comes after
-    // turn_completed, so re-read the answer once that read is done.
+    // An after_turn hook presented the answer (AnswerDisplay) or attached
+    // refs to it (AnswerRefs: refs, a count; display null when only refs):
+    // it comes after turn_completed, so re-read the answer once that read
+    // is done.
     answer_display: async (data) => {
       try {
         await liveTurn.endRead;
-        if (!selected() || !data.display) return;
+        if (!selected() || (!data.display && !data.refs)) return;
         const d = await getSession(selected(), { tail: true, recent: true });
         if (Array.isArray(d.messages)) applyFinalMarkdown(d.messages);
       } catch (_) {

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

@@ -33,7 +33,7 @@ export function liveDurationText(durationMs) {
 
 // A cancel's reason as the terminal UIs name it too (Formatting::
 // CANCEL_REASONS); anything else as it is. Both sides: spec/shared/labels_matrix.json.
-const CANCEL_REASONS = { ctrl_c: "Ctrl-C", user: "stopped", hook: "by a hook" };
+const CANCEL_REASONS = { ctrl_c: "Ctrl-C", user: "stopped", hook: "by a hook", worker_stopped: "worker stopped" };
 
 // The line a canceled turn ends with: "■ canceled (stopped)", live from
 // turn_canceled's reason and after a re-render from the turn record's