samagotchi 0.168.0 → 0.169.0

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

@@ -10,33 +10,36 @@
 // 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 block's order (the
 // hand-off), so a handed-off turn reads like its reload. Slots are patched in place, never rebuilt from HTML: a selection
-// and annotate survive. When the model's own question blocks the turn
-// after a reply, the turn opens in the history (stage_opened.js): the
-// reply becomes a conversation bubble, the prompt, the block and the rows
-// so far go there, and the stage shows its asking form (the card alone)
-// until the answer. The rules are pure in stage_model.js; the live
-// slots are drawn by stage_slots.js, the cap and the held height are
-// stage_frame.js's, and the in-use watch that times the hand-off is
-// stage_watch.js's.
+// and annotate survive. When a card waits for the user (a question, an
+// approval, a delegate's relayed card, a hook's question, check-in), the
+// turn opens in the history (stage_opened.js): the prompt, the block and the
+// rows so far go there (chi's line before its own question or approval as a
+// lead-in bubble), and the stage docks the card alone (the asking form)
+// until the answer. The step limit's card goes under its ended turn. The
+// rules are pure in stage_model.js; the live slots are drawn by
+// stage_slots.js, the cap and the held height are stage_frame.js's, the
+// in-use watch that times the hand-off is stage_watch.js's, the docked card
+// and the fold are stage_asking.js's, and the waiting cards as data are
+// stage_waiting.js's.
 import { createTurnBlock } from "./turn_block.js";
 import { openAfterEnd } from "./block_open.js";
-import { chipLabelText, flashOf, handOffDue, handOffOrder, headlineOf, isPlain, liveSlots, MARKS, miniToolText, placeFor, placeKind, QUEUED_CHILDREN, stepSlotText } from "./stage_model.js";
+import { chipLabelText, flashOf, handOffDue, handOffOrder, headlineOf, isPlain, liveSlots, MARKS, foldedRowText, phaseLabel, placeFor, placeKind, QUEUED_CHILDREN, stepSlotText } from "./stage_model.js";
 import { createStageSlots, node } from "./stage_slots.js";
 import { createStageFrame, reducedMotion } from "./stage_frame.js";
 import { createInUseWatch } from "./stage_watch.js";
 import { createStageStall, GRACE_MS, stallState } from "./stage_stall.js";
 import { formatDuration } from "./timing.js";
 import { easeScrollTo } from "./scroll.js";
-import { readStored, writeStored } from "./storage.js";
 import { createWorkingSetRail } from "./working_set_rail.js";
 import { moveToHistoryEnd } from "./history_end.js";
 import { turnElements } from "./turn_range.js";
 import { createOpenedTurn } from "./stage_opened.js";
 import { askingRefs } from "./turn_model.js";
-import { ASKS, PENDING, waitsInStage } from "./stage_cards.js";
+import { ASKS, PENDING } from "./stage_cards.js";
+import { createStageAsking } from "./stage_asking.js";
+import { createStageWaiting, isApprovalCard, isBlocking, waitingKey, waitingKind } from "./stage_waiting.js";
 import { stampRows } from "./working_set_view.js";
 
-const COLLAPSE_KEY = "chi_stage_collapsed";
 // The turn-end read (markdown, answer_display) settles within this, or the
 // hand-off stops waiting for it.
 const SETTLE_CAP_MS = 8000;
@@ -51,26 +54,15 @@ const ANSWER_CUT = 12;
 const ANSWERED_LINE = 40;
 // That line brought back sits this far under the scroller's edge.
 const ANSWERED_GAP = 8;
-// The model's own question (question_cards.js data-kind; not an approval,
-// the step limit, a hook's question or a delegate's relayed one): the one
-// card whose asking text opens the turn in the history (stage_opened.js).
-const ASK_CARD = '.bubble.question[data-kind="question"]:not([data-relay])';
-// A blocking approval, a delegate's relayed one too: too tall for the stage's
-// view, it gets a raised cap (raiseForApproval).
-const APPROVAL_CARD = '.bubble.question[data-kind="approval"]';
 // What opens a turn in the history (reload_check.js's OPENING).
 const OPENING = "[data-turn-id], [data-opening-id]";
 
-function readCollapsed() {
-  return readStored(COLLAPSE_KEY) === "1";
-}
-
 // +historyNearBottom+: the history's own follow check (the hand-off scrolls
 // the history only for a reader at its end). +dockEl+ and +centerEl+ size
 // the stage's cap.
 // +taskStop+: the page's stopper (task_stop.js), for the stop-task button
-// on a running task_wait. +renderMarkdown+ and +linkRefs+: the asking
-// slot's markdown read and ref pass (stage_slots.js). +workingSet+: the
+// on a running task_wait. +renderMarkdown+ and +linkRefs+: a lead-in
+// bubble's markdown read and ref pass (stage_opened.js). +workingSet+: the
 // page's working set (working_set_view.js, web.working_set; null: off): its
 // rail in the live slots, its footprint at the hand-off. +onCancel+: the
 // status row's Stop turn (a promise of the cancel request; the button is
@@ -99,6 +91,18 @@ export function createStageView({
   const status = node("div", "ts-status", stage);
   const mark = node("span", "ts-mark", status);
   const phaseEl = node("span", "ts-phase", status);
+  // Two cards docked: one at a time, "‹ 1 of 2 ›" (stage_waiting.js shown).
+  const pager = node("span", "ts-pager", status);
+  pager.hidden = true;
+  const pagePrev = node("button", "ts-page", pager);
+  pagePrev.type = "button";
+  pagePrev.textContent = "‹";
+  pagePrev.setAttribute("aria-label", "The card before");
+  const pageLabel = node("span", "ts-page-label", pager);
+  const pageNext = node("button", "ts-page", pager);
+  pageNext.type = "button";
+  pageNext.textContent = "›";
+  pageNext.setAttribute("aria-label", "The next card");
   const stepEl = node("span", "ts-step", status);
   const timingSlot = node("span", "ts-timing", status);
   const miniTool = node("span", "ts-mini", status);
@@ -131,11 +135,6 @@ export function createStageView({
   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),
-  // as markdown when web.markdown is on.
-  const asking = node("div", "ts-asking", live);
-  asking.hidden = true;
   const now = node("div", "ts-now", live);
   const trail = node("div", "ts-trail", live);
   // The working set's rail: out of the live slots' flow on their right (a
@@ -149,6 +148,11 @@ export function createStageView({
     workingSet.onServer(() => scheduleRefresh());
   }
   const extras = node("div", "ts-extras", scroller);
+  // While check-in's card is docked: the live step's text, streamed under
+  // the card (the steps are in the history then). The answer's own slot
+  // takes it over at the turn's end (placeAnswer, in one task).
+  const asksText = node("div", "ts-asks-text", scroller);
+  asksText.hidden = true;
   const answer = node("div", "ts-answer", scroller);
   const tail = node("div", "ts-tail", scroller);
   // The cloud's steps, the scroller's last slot, right above the chip.
@@ -174,7 +178,7 @@ export function createStageView({
   // The quiet signal: its span in the now row, its head after the timing line.
   const stall = createStageStall({ stage, nowEl: now, timingSlot });
   const slotsView = createStageSlots({
-    headline, asking, now, trail, ticks, taskStop, renderMarkdown, linkRefs,
+    headline, now, trail, ticks, taskStop,
     gens: () => view.current().turn?.gens,
     onChange: () => scheduleRefresh(),
   });
@@ -191,10 +195,7 @@ export function createStageView({
   let thinkingLine = null; // { step, text } from the live step's ticker
   let flash = null; // { kind, text, until } a notice or nudge in the trail
   let flashTimer = null; // its end's redraw
-  let collapsed = readCollapsed();
   let cloudOpen = false;
-  // A ref's "show in turn" opened a collapsed stage (not kept).
-  let revealed = false;
   let rafPending = false;
   // A turn the page knows runs (the session says running) with none in the
   // stage to show (a join without its current_turn): the status row alone,
@@ -244,6 +245,7 @@ export function createStageView({
     blockHost: (el) => cloudBody.appendChild(el),
     placeAnswer: (pieces, { plain, blockEl }) => {
       if (plain) blockEl.remove();
+      drawAsksText("");
       answer.append(...pieces);
       showAnswerTop();
     },
@@ -256,6 +258,19 @@ export function createStageView({
     },
   });
 
+  // The cards that wait in the stage, as data (stage_waiting.js): the
+  // docked card, its fold, what blocks, the approval's cap read them.
+  const waiting = createStageWaiting();
+  // The asking form and the stage's fold (stage_asking.js).
+  const ask = createStageAsking({
+    stage, extras, tail, scroller, fold, view, opener, frame: () => frame, isOpened: () => opened, setOpened,
+    isEnded: () => !!endKind, promptEl: () => promptEl, setCloud, scheduleRefresh, pendingCard, waiting,
+  });
+  const {
+    askingGen, asksOf, askedFor, askedText, docks, leadInText, openTurn, settleCards, askingCard, cardOf, foldedText, markOwnToggles,
+    isCollapsed, drawCollapsed, applyCollapsed, setCollapsed,
+  } = ask;
+
   // ── slots ────────────────────────────────────────────────────────────────
 
   // "history" (an opened turn's), "cloud", "answer" (a plain turn's in
@@ -272,8 +287,12 @@ export function createStageView({
     requestAnimationFrame(refresh);
   }
 
+  // A card that blocks the turn waits (stage_waiting.js, checked against
+  // the slots first: a replay answers a card and starts the next step in one
+  // task, before the refresh).
   function pendingCard() {
-    return !!(extras.querySelector(PENDING) || tail.querySelector(PENDING));
+    ask.reconcileWaiting();
+    return waiting.count() > 0;
   }
 
   // A blocking approval too tall for the stage's view: a raised cap, the
@@ -282,75 +301,64 @@ export function createStageView({
   // fits never gets here.
   function raiseForApproval(blocked) {
     if (!blocked || roomCap) return;
-    const card = extras.querySelector(PENDING) || tail.querySelector(PENDING);
-    if (!card?.matches(APPROVAL_CARD) || frame.fitsCap(card)) return;
+    const front = waiting.get(waiting.front());
+    const card = front?.approval ? cardOf(front.key) : null;
+    if (!card || frame.fitsCap(card)) return;
     roomCap = true;
     frame.fitCap();
   }
 
-  // The step that asked the turn's question: live, the step whose call
-  // runs (turn_model.js askingText); in a replay (a reload, a resync) the
-  // asking call has already completed when its question_requested comes
-  // (TurnAccumulator.join_events), so the last step when its last call is
-  // ask_user_question and no card of this page took its reply yet (+asked+:
-  // a later card, another kind's, never reuses it). null: none.
-  function askingGen() {
-    const { turn } = view.current();
-    const gen = turn && !turn.ended ? turn.gens[turn.gens.length - 1] : null;
-    if (!gen?.text) return null;
-    if (view.askingText()) return gen;
-    return gen.tools[gen.tools.length - 1]?.tool === "ask_user_question" && !asked.has(gen) ? gen : null;
-  }
-  // The steps whose reply a question card took (place: question_cards.js
-  // reads askingText right before), for askingGen's replay rule.
-  const asked = new WeakSet();
-  function askedFor() {
-    const gen = askingGen();
-    if (gen) asked.add(gen);
-  }
-
-  // The reply that asked the question, "" for none.
-  function askedText() {
-    return String(askingGen()?.text || "").trim();
+  // An asking card (check-in) waits while the turn runs.
+  function asksCard() {
+    return !endKind && waiting.count({ asks: true }) > waiting.count();
   }
 
-  // The reply that asked +el+ when +el+ is the model's own question and
-  // there is one (the promotion rule: ASK_CARD, in the extras, a reply
-  // before it); "" otherwise.
-  function promotedText(el) {
-    if (!el.matches?.(ASK_CARD) || !el.matches(PENDING)) return "";
-    return askedText();
+  // One docked card at a time: the others wait behind it (.ts-behind) and
+  // the pager says where the shown one is.
+  function drawDocked(shownCard) {
+    const keys = waiting.docked();
+    for (const key of keys) cardOf(key)?.classList.toggle("ts-behind", !!shownCard && cardOf(key) !== shownCard);
+    for (const el of extras.querySelectorAll(":scope > .ts-behind")) if (!keys.includes(waitingKey(el))) el.classList.remove("ts-behind");
+    // Focus in a card that went behind (a new card came in front of it):
+    // to the card that shows now.
+    const focused = document.activeElement;
+    if (shownCard && focused && [...extras.querySelectorAll(":scope > .ts-behind")].some((el) => el.contains(focused))) focusIn(shownCard);
+    const at = shownCard ? keys.indexOf(waitingKey(shownCard)) : -1;
+    pager.hidden = keys.length < 2 || at < 0;
+    if (pager.hidden) return;
+    const label = `${at + 1} of ${keys.length}`;
+    if (pageLabel.textContent !== label) pageLabel.textContent = label;
+    pagePrev.disabled = at === 0;
+    pageNext.disabled = at === keys.length - 1;
+    // A pager button the page just disabled keeps no focus: the other one has it.
+    if (document.activeElement === pagePrev && pagePrev.disabled) pageNext.focus();
+    else if (document.activeElement === pageNext && pageNext.disabled) pagePrev.focus();
   }
 
-  // The turn opens in the history (once): the prompt, the block (closed;
-  // its steps in order from now on) and the rows the extras hold, in the
-  // hand-off's order. What waits stays.
-  function openTurn() {
-    if (opened) return;
-    const { blockEl } = view.current();
-    view.inOrder?.();
-    setCloud(false);
-    if (blockEl) blockEl.open = false;
-    const rows = [...extras.children].filter((el) => !waitsInStage(el));
-    setOpened(true);
-    opener.open(handOffOrder({ prompt: promptEl, block: blockEl, extras: rows }));
-  }
-
-  // An opened turn's cards that stopped waiting go into the history: a
-  // promoted one under its reason (also after the turn's end, so a card
-  // cancelled by Stop turn sits there), another one at the history's end
-  // while the turn runs.
-  function settleCards() {
-    if (!opened) return;
-    for (const el of [...extras.children]) {
-      if (waitsInStage(el)) continue;
-      if (opener.has(el)) opener.settle(el);
-      else if (!endKind) opener.add(el);
+  // +card+'s first control takes the focus (its summary is out of the tab
+  // order while it waits), else the card.
+  function focusIn(card) {
+    const control = card.querySelector('input:not([type="hidden"]), textarea, select, button:not([disabled]), a[href]');
+    if (control) control.focus();
+    else {
+      if (!card.hasAttribute("tabindex")) card.tabIndex = -1;
+      card.focus();
     }
   }
+  for (const [button, by] of [[pagePrev, -1], [pageNext, 1]]) {
+    button.addEventListener("click", (e) => {
+      e.stopPropagation();
+      waiting.page(by);
+      refresh();
+      const shown = askingCard();
+      if (shown) frame.afterGrowth(() => frame.reveal(shown.parentElement));
+    });
+  }
 
-  function asksCard() {
-    return !endKind && !!extras.querySelector(ASKS);
+  // The text under a docked check-in card, patched only when it changes.
+  function drawAsksText(text) {
+    if (asksText.textContent !== text) asksText.textContent = text;
+    asksText.hidden = !text;
   }
   // A card answered or redrawn in place (its buttons gone) changes the
   // status without a turn event: at once (a microtask), so the slots swap in
@@ -377,13 +385,21 @@ export function createStageView({
     const thinking = thinkingLine && thinkingLine.step === turn.gens.length ? thinkingLine.text : "";
     // 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.
+    ask.reconcileWaiting();
     settleCards();
+    markOwnToggles();
     const blocked = pendingCard();
-    // The asking form: a promoted card waits (the card alone in the stage;
-    // its reply is the reason bubble in the history, not the asking slot).
-    const askingForm = [...extras.querySelectorAll(PENDING)].some((el) => opener.has(el));
+    // The asking form: a docked card waits (the card alone in the stage;
+    // its turn is in the history, a reply before it the lead-in bubble).
+    const asking = askingCard();
+    const askingForm = !!asking;
     stage.classList.toggle("asking-form", askingForm);
-    const slots = liveSlots(turn, { narration, thinking, pending: blocked || asksCard(), blocked, ended: endKind, emptyAnswer });
+    // Its fold (stage_asking.js trackFold): that card's only.
+    ask.trackFold();
+    drawDocked(asking);
+    const collapsed = isCollapsed();
+    drawCollapsed();
+    const slots = liveSlots(turn, { narration, thinking, pending: blocked || asksCard(), 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
@@ -398,13 +414,18 @@ export function createStageView({
     cancel.hidden = !onCancel || !!endKind;
     stage.classList.toggle("waiting", blocked);
     if (!blocked && wasWaiting) settleAnsweredCard();
-    stage.classList.toggle("asking", !!slots.asking);
     stage.dataset.phase = slots.phase;
     mark.textContent = MARKS[slots.phase] || "";
-    phaseEl.textContent = slots.phase;
+    // check-in docked, nothing blocking: the row says what chi does now (the
+    // running call, "writing" while text streams) and the text streams
+    // under the card.
+    const asksFront = !!asking && !blocked && !endKind && waiting.get(waiting.front())?.kind === "asks";
+    const streaming = asksFront ? liveSlots(turn).phase : "";
+    phaseEl.textContent = phaseLabel({ phase: slots.phase, asksFront, streaming });
+    stage.classList.toggle("asks-live", asksFront);
+    drawAsksText(asksFront && gen?.text && !gen.answer ? String(gen.text).trim() : "");
 
     slotsView.drawHeadline(slots.headline);
-    slotsView.drawAsking(askingForm ? "" : slots.asking, slots.askingRefs);
     raiseForApproval(blocked);
     slotsView.drawNow(slots.tool, slots.quiet);
     drawStall(clock(), blocked);
@@ -422,15 +443,19 @@ export function createStageView({
     // that line is elsewhere (a turn the stage didn't hold from its start).
     const elapsed = endKind && !timingSlot.firstChild ? formatDuration(endedAt - startedAt) : "";
     chipLabel.textContent = chipLabelText({ steps: slots.step, calls, elapsed });
-    const mini = miniToolText({ collapsed, tool: slots.tool });
+    // Folded, the row says what the docked card asks (live and after a
+    // reload alike: from the card), else the running call.
+    const mini = foldedRowText({ collapsed, question: foldedText(asking), tool: slots.tool, running: asksFront });
     miniTool.textContent = mini.text;
     miniTool.title = mini.title;
+    miniTool.classList.toggle("ts-mini-question", mini.question);
 
     // 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);
-    // The chip: a block in the cloud, or in the history (it reveals it there).
-    cloud.hidden = place !== "cloud" && place !== "history";
+    // The chip: a block in the cloud. An opened turn's steps line in the
+    // history says the count: none here.
+    cloud.hidden = place !== "cloud";
     cloudBody.hidden = !cloudOpen || cloud.hidden;
     // Running: the step it is on. Ended: the count, unless the chip says it.
     stepEl.textContent = stepSlotText({ step: slots.step, ended: !!endKind, chipHidden: cloud.hidden });
@@ -529,25 +554,6 @@ export function createStageView({
 
   // ── collapse, cloud, peek ────────────────────────────────────────────────
 
-  function applyCollapsed() {
-    stage.classList.toggle("collapsed", collapsed);
-    scroller.hidden = collapsed;
-    fold.textContent = collapsed ? "▴" : "▾";
-    fold.setAttribute("aria-label", collapsed ? "Expand the running turn" : "Collapse the running turn to its status");
-    fold.setAttribute("aria-expanded", String(!collapsed));
-    frame.fitCap();
-    scheduleRefresh();
-  }
-
-  function setCollapsed(value) {
-    collapsed = value;
-    revealed = false;
-    writeStored(COLLAPSE_KEY, value ? "1" : "0");
-    applyCollapsed();
-    // Opened on a waiting card: it shows as it does on arrival.
-    if (!value && pendingCard()) frame.afterGrowth(() => frame.reveal(tail.querySelector(PENDING) ? tail : extras));
-  }
-
   function setCloud(open) {
     cloudOpen = open;
     cloudBody.hidden = !open || cloud.hidden;
@@ -574,7 +580,7 @@ export function createStageView({
       opener.reveal(step.el);
       return;
     }
-    if (collapsed) setCollapsed(false);
+    if (isCollapsed()) setCollapsed(false);
     setCloud(true);
     if (!step.el.open) step.summary.click();
     const wrap = step.thinkingWrap;
@@ -589,16 +595,14 @@ export function createStageView({
 
   fold.addEventListener("click", (e) => {
     e.stopPropagation();
-    setCollapsed(!collapsed);
+    setCollapsed(!isCollapsed());
   });
   status.addEventListener("click", (e) => {
-    if (collapsed && !e.target.closest("button, a")) setCollapsed(false);
+    if (isCollapsed() && !e.target.closest("button, a")) setCollapsed(false);
   });
   chip.addEventListener("click", (e) => {
     const tick = e.target.closest(".ts-tick");
     if (tick) openStep(Number(tick.dataset.step));
-    // An opened turn's block is in the history: the chip shows it there.
-    else if (opened) opener.reveal(view.current().blockEl);
     else setCloud(!cloudOpen);
   });
   headline.addEventListener("click", peek);
@@ -613,11 +617,7 @@ export function createStageView({
     if (!cloudBody.contains(e.target)) return;
     if (folding) return finishFold();
     if (!holding) return;
-    if (collapsed) {
-      collapsed = false;
-      revealed = true;
-      applyCollapsed();
-    }
+    if (isCollapsed()) ask.reveal();
     setCloud(true);
     if (e.detail) e.detail.until = new Promise((resolve) => frame.afterGrowth(resolve));
   });
@@ -636,13 +636,13 @@ export function createStageView({
   // The cap and the frame (stage_frame.js): the stage's height, held while
   // it holds a turn, and its own scrolls.
   const frame = createStageFrame({
-    stage, scroller, status, cloud, queuedSlot, holdEl, asking, extras, dockEl, centerEl,
-    observed: [status, promptSlot, live, extras, answer, tail, cloudBody, cloud, queuedSlot],
+    stage, scroller, status, cloud, queuedSlot, holdEl, extras, dockEl, centerEl,
+    observed: [status, promptSlot, live, extras, asksText, answer, tail, cloudBody, cloud, queuedSlot],
     isHolding: () => holding,
-    isCollapsed: () => collapsed,
+    isCollapsed,
     isCloudOpen: () => cloudOpen,
     isRoomCap: () => roomCap,
-    waitingCard: () => (stage.classList.contains("waiting") ? extras.querySelector(PENDING) || tail.querySelector(PENDING) : null),
+    waitingCard: () => (stage.classList.contains("waiting") ? cardOf(waiting.front()) : null),
   });
 
   // The in-use watch (stage_watch.js): an ended turn hands off once the
@@ -683,6 +683,7 @@ export function createStageView({
 
   function emptySlots() {
     for (const slot of [promptSlot, extras, answer, tail, cloudBody, queuedSlot, timingSlot]) slot.replaceChildren();
+    drawAsksText("");
     setOpened(false);
     promptEl = null;
     // The turn left the stage: the status row and the chip say nothing until
@@ -703,9 +704,13 @@ export function createStageView({
     flash = null;
     clearTimeout(flashTimer);
     roomCap = false;
+    markOwnToggles();
     opener.reset();
+    waiting.reset();
+    miniTool.classList.remove("ts-mini-question");
     setCloud(false);
-    stage.classList.remove("plain", "ended", "waiting", "held-wait", "asking", "in-use", "asking-form");
+    stage.classList.remove("plain", "ended", "waiting", "held-wait", "in-use", "asking-form", "asks-live");
+    pager.hidden = true;
     stage.style.removeProperty("--live-held");
   }
 
@@ -731,11 +736,7 @@ export function createStageView({
     emptySlots();
     stage.hidden = true;
     frame.frameFree();
-    if (revealed) {
-      revealed = false;
-      collapsed = readCollapsed();
-      applyCollapsed();
-    }
+    ask.unreveal();
   }
 
   function release() {
@@ -760,6 +761,8 @@ export function createStageView({
     const { blockEl } = view.current();
     view.chronological();
     const place = blockPlace(blockEl);
+    // A finished turn's block draws as a reload draws it.
+    if (blockEl) delete blockEl.dataset.openedTurn;
     // The block moves with the pieces from the cloud; an opened turn's is
     // in the history already.
     const block = place === "cloud" ? blockEl : null;
@@ -772,13 +775,13 @@ export function createStageView({
       // The prompt still in its slot (an opened turn's is in the history).
       prompt: !opened && promptEl?.parentNode === promptSlot ? promptEl : null,
       block,
-      extras: [...extras.children],
+      extras: [...extras.children].map((el) => { el.classList.remove("ts-behind"); return el; }),
       answer: [...answer.children],
       timing: timingSlot.firstElementChild,
       kept: [...tail.children],
       queued: [...queuedSlot.children],
     });
-    const animate = !immediate && !reducedMotion() && !document.hidden && !collapsed;
+    const animate = !immediate && !reducedMotion() && !document.hidden && !isCollapsed();
     folding = { pieces, block: blockEl, endKind, wasAtEnd: historyNearBottom(), animate, immediate, opened, prompt: promptEl };
     releaseTurn();
     if (!animate) return finishFold();
@@ -795,6 +798,9 @@ export function createStageView({
     // The stage held it open; here it takes its place in the history:
     // closed, unless the turn was cut short with an outline (block_open.js).
     if (fold.block) fold.block.open = openAfterEnd(fold.endKind, fold.block.classList.contains("outline"));
+    // A piece removed while it slid (the old continue card the step-limit
+    // question replaces) stays gone.
+    fold.pieces = fold.pieces.filter((el) => el.isConnected);
     moveToHistoryEnd(historyEl, fold.pieces, { animate: fold.animate });
     // An opened turn's reasons go in the pieces' task (after them: the
     // history is as tall as it gets, room to keep the reader's rows in
@@ -903,7 +909,10 @@ export function createStageView({
       // The warn cards the extras kept in sight leave the turn with the
       // block's (card.js leavesBlock): after the end line, as a reload has them.
       const warn = [...extras.querySelectorAll(":scope > .plugin-card.warn")];
-      warn.forEach((el) => el.remove());
+      warn.forEach((el) => {
+        el.remove();
+        waiting.settle(waitingKey(el), { only: "warn" });
+      });
       kept.push(...warn);
       view.chronological();
       endKind = args.kind;
@@ -946,8 +955,8 @@ export function createStageView({
     containsLive: (el) => view.containsLive(el),
     // The reply that asked (question_cards.js keeps it for the answered
     // card's two lines), a replayed question's too.
-    askingText: () => askedText(),
-    // The asking slot pairs them on its next draw.
+    askingText: (pq) => askedText(pq),
+    // A lead-in bubble drawn after this pairs them (askingRefs).
     questionRefs(refs) {
       alive();
       view.questionRefs(refs);
@@ -956,7 +965,9 @@ export function createStageView({
     // The turn model and its live phase as the status row reads it (the
     // composer's delivery line).
     current: () => view.current(),
-    phase: () => liveSlots(view.current().turn, { pending: pendingCard() || asksCard() }).phase,
+    // Only a card that blocks says "goes in once the card above is
+    // answered": check-in leaves the composer free.
+    phase: () => liveSlots(view.current().turn, { pending: pendingCard() }).phase,
     // Another session opens, or this one renders again: a turn still
     // sliding away is dropped (its history is about to be drawn anew),
     // never moved into whatever history shows now.
@@ -989,37 +1000,62 @@ export function createStageView({
         scheduleRefresh();
         return true;
       }
-      // An opened turn's row: the history's end, in arrival order.
+      // An opened turn's row: the history's end, in arrival order; a card
+      // that stopped waiting before it (a replay answers it and steers in
+      // one task, before the refresh) goes there first.
       if (where === "opened") {
+        ask.reconcileWaiting();
+        settleCards();
         opener.add(el);
         scheduleRefresh();
         return true;
       }
-      // The model's own question after a reply: the turn opens in the
-      // history, the reason lands there in this task, the card stays here.
-      const reason = waits && !endKind ? promotedText(el) : "";
-      // Read before the turn's pieces make the history taller.
-      const atEnd = reason ? historyNearBottom() : false;
-      if (reason) openTurn();
+      // A card that waits for the user docks: the turn opens in the
+      // history, a lead-in lands there in this task, the card stays here.
+      const docked = docks(el);
+      const key = waitingKey(el);
+      // A card drawn again with its key (the same question) keeps its lead-in.
+      const kept = docked && opener.has(key);
+      const reason = docked && !kept ? leadInText(el) : "";
+      // Read before the turn's pieces make the history taller: with no
+      // lead-in to read, a reader at the end follows the turn's move.
+      const atEnd = docked ? historyNearBottom() : false;
+      if (docked) openTurn({ follow: atEnd && !reason });
       const slot = endKind ? tail : extras;
       const stick = slot.scrollHeight - slot.scrollTop - slot.clientHeight < 24;
-      slot.appendChild(el);
+      // The stage's order (stage_waiting.js): a card that blocks goes before
+      // the asking ones, as a reload places them.
+      const behind = isBlocking(waitingKind(el)) ? [...slot.children].find((x) => waitingKind(x) === "asks") : null;
+      slot.insertBefore(el, behind || null);
       slot.hidden = false;
+      // The card is the stage's to keep (stage_waiting.js): docked when it
+      // waits for the user (its lead-in is the opener's, by the same key).
+      const waitKind = waitingKind(el);
+      if (waitKind) waiting.arrive(key, { kind: waitKind, docked, approval: isApprovalCard(el) });
       if (stick || waits) slot.scrollTop = slot.scrollHeight;
+      if (kept) opener.relink(key, el);
       if (reason) {
         const { turn } = view.current();
         opener.ask({
-          card: el, text: reason, refs: askingRefs(turn) || askingGen()?.refs || null, step: turn?.gens.length || 0,
+          card: el, key, text: reason, refs: askingRefs(turn) || askingGen(asksOf(el))?.refs || null, step: turn?.gens.length || 0,
           turnId: promptEl?.dataset.turnId || null, questionId: el.dataset.qid ?? null, follow: atEnd,
         });
       }
-      // A waiting card and the asking text (refresh) land in one task.
+      // The step limit: its card goes under its ended turn in the
+      // conversation at once, as a reload draws it (the hand-off: its fold,
+      // the history's follow and the reload check as for any finished turn;
+      // the in-use watch and the end read don't hold it).
+      if (endKind && waitKind === "continue") {
+        handOff();
+        return true;
+      }
+      // A waiting card and the asking form (refresh) land in one task.
       if (waits) refresh();
       else scheduleRefresh();
       // The asking form: the stage shrinks to the card (one of its two
       // allowed shrinks, stage_frame.js; the other is releaseHeldWait).
-      if (reason) frame.forgetContent();
-      if (waits && el.matches?.(".bubble.question")) askedFor();
+      if (docked) frame.forgetContent();
+      if (waits && el.matches?.(".bubble.question")) askedFor(el);
       // 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 (once the stage has grown for it).
@@ -1059,6 +1095,12 @@ export function createStageView({
       drawStall(nowMs);
     },
     handOff,
+    // A card stopped waiting (stage_waiting.js keys; +only+: when it is that
+    // kind): question_cards.js's resolve path, cards_place.js upsertCard.
+    // The stage's redraw comes from the card's own change.
+    settleWaiting: (key, opts) => waiting.settle(key, opts),
+    // The waiting cards as data (the tests' and the harness's read).
+    waiting: { list: () => waiting.list(), front: () => waiting.front(), docked: () => waiting.docked(), folded: () => waiting.folded(), count: (o) => waiting.count(o) },
     root: stage,
     scrollEl: scroller,
   };