samagotchi 0.96.0 → 0.98.0

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

@@ -3,9 +3,14 @@
 // a final answer's rendering and refs, and the refs across the page. The
 // page's state comes in as getters (capabilities, roots, currentDir), read
 // at each call.
+
+// The texts whose refs linkTextRefs links: the answers and the closed
+// steps' texts.
+const TEXTS = ".bubble.output, .gen:not(.live) > .gen-text";
+
 export function createMarkdownPlace({
   capabilities, renderText, roots, touchedFiles, currentDir, linkRefs, applyFinalAnswer, findInTurnRoots, normalize,
-  pairAnswerRefs,
+  pairAnswerRefs, setAnswerRefs = () => {},
 }) {
   // A text the page already shows as its markdown HTML (POST /api/render,
   // sanitised there), or null: markdown off here (no request), or a failed
@@ -17,9 +22,20 @@ export function createMarkdownPlace({
       .catch(() => null);
   }
 
-  // The `path:line` refs in one rendered text (the stage's asking slot, a
-  // kept reply), as linkTextRefs links the answers'.
-  function linkRefsIn(el) {
+  // A plugin's +refs+ (a question's: its pending question's refs) paired
+  // with one shown text (answer_refs.js), again after each swap of its
+  // nodes: setAnswerRefs starts the pairing over. Not +refs+: nothing.
+  function pairRefsIn(el, refs) {
+    if (refs === undefined || refs === null) return;
+    setAnswerRefs(el, refs);
+    pairAnswerRefs(el);
+  }
+
+  // The refs in one rendered text (the stage's asking slot, a kept reply),
+  // as linkTextRefs links the answers': a plugin's +refs+ first
+  // (pairRefsIn), then the `path:line` ones.
+  function linkRefsIn(el, refs) {
+    pairRefsIn(el, refs);
     linkRefs(el, touchedFiles(roots()), currentDir());
   }
 
@@ -32,7 +48,8 @@ export function createMarkdownPlace({
   }
 
   // The refs on the answers' and closed steps' texts, on this page: first
-  // each answer's own (a plugin's, answer_refs.js), then the `path:line`
+  // each one's own (a plugin's, answer_refs.js: a step's are a question's,
+  // on the reply that asked it), then the `path:line`
   // refs that name a file the session's rows (and cards) touched
   // (ref_scan.js), which leave a plugin's alone. Not mid-stream: at a
   // turn's end and after a reload's render. A ref already made stays as it
@@ -41,13 +58,13 @@ export function createMarkdownPlace({
     const pageRoots = roots();
     const touched = touchedFiles(pageRoots);
     for (const root of pageRoots) {
-      for (const el of root.querySelectorAll(".bubble.output")) pairAnswerRefs(el);
+      for (const el of root.querySelectorAll(TEXTS)) pairAnswerRefs(el);
     }
     if (!touched.size) return;
     for (const root of pageRoots) {
-      for (const el of root.querySelectorAll(".bubble.output, .gen:not(.live) > .gen-text")) linkRefs(el, touched, currentDir());
+      for (const el of root.querySelectorAll(TEXTS)) linkRefs(el, touched, currentDir());
     }
   }
 
-  return { renderMarkdown, linkRefsIn, applyFinalMarkdown, linkTextRefs };
+  return { renderMarkdown, pairRefsIn, linkRefsIn, applyFinalMarkdown, linkTextRefs };
 }

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

@@ -35,7 +35,10 @@ import { plainText } from "./plain_line.js";
 //   askingText via the page's view), kept by a question or own approval card
 // @param renderMarkdown (text) => Promise<html|null>: the kept reply's
 //   markdown (the page's POST /api/render; null keeps the raw text)
-// @param linkRefs (el) the page's path:line ref pass on it
+// @param linkRefs (el, refs) the page's ref pass on it: a plugin's +refs+
+//   (the question's) paired, then the path:line ones
+// @param pairRefs (el, refs) a plugin's +refs+ paired only (the question's
+//   own text; markdown_place.js pairRefsIn)
 // @param api {sendAnswer, dismissQuestion, sendCommand} (data.js)
 // @param doc the page's document
 // @return {renderQuestion(pq, {said}), resolveQuestion(id, opts), removeQuestion(),
@@ -43,7 +46,7 @@ import { plainText } from "./plain_line.js";
 //   renderContinue(offer), resolveContinue(data), forgetContinue()}
 export function createQuestionCards({
   sessionId, clientId, place, isNearBottom, scrollToEnd, removeHintIfEmpty, askingText = () => "",
-  renderMarkdown = () => Promise.resolve(null), linkRefs = () => {},
+  renderMarkdown = () => Promise.resolve(null), linkRefs = () => {}, pairRefs = () => {},
   api = { sendAnswer, dismissQuestion, sendCommand }, doc = globalThis.document,
 }) {
   // Live ask_user_question card, keyed by pending question id. Re-rendered from
@@ -73,6 +76,10 @@ export function createQuestionCards({
     const card = doc.createElement("details");
     card.className = approval ? "bubble question approval" : stepLimit ? "bubble question step-limit" : "bubble question";
     card.dataset.qid = pq.id;
+    // What asks (the stage's question room is a model's own question's,
+    // stage_view.js): the kind, and a delegate's question relayed here.
+    card.dataset.kind = pq.kind || "question";
+    if (relayView(pq)) card.dataset.relay = "1";
     const asked = keepsAskingText(pq) ? String(said ?? askingText() ?? "").trim() : "";
     if (asked) saidOf.set(card, asked);
     // Open while pending: the question must be actionable.
@@ -98,6 +105,8 @@ export function createQuestionCards({
       const q = doc.createElement("div");
       q.className = "question-text";
       q.textContent = (relay && pq.relay.asked) || pq.question || "";
+      // A plugin's refs on the question (its step's: one may name a ticket here too).
+      if (!relay) pairRefs(q, questionRefsOf(pq));
       card.appendChild(q);
     }
 
@@ -421,6 +430,7 @@ export function createQuestionCards({
     // clamped line), and whole, selectable, at the top of the body
     // when it is open (a drag in the summary would toggle the card).
     const asked = saidOf.get(questionEl);
+    const refs = questionRefsOf(pending);
     let full = null;
     if (summary && asked) {
       const line = doc.createElement("div");
@@ -431,6 +441,7 @@ export function createQuestionCards({
       full = doc.createElement("div");
       full.className = "question-said-full";
       full.textContent = asked;
+      pairRefs(full, refs);
       questionEl.insertBefore(full, summary.nextSibling);
     }
     // 4.02: a reopened card's summary already carries the result (the
@@ -441,15 +452,15 @@ export function createQuestionCards({
     if (summary && !keepNote) note.classList.add("hidden");
     if (!questionEl.dataset.toggled) questionEl.open = false;
     // After the collapse: a card left open by hand renders at once.
-    if (full) renderSaidOnOpen(questionEl, full, asked);
+    if (full) renderSaidOnOpen(questionEl, full, asked, refs);
     pending = null;
   }
 
   // The body's copy as markdown, from the card's first open on (a reload
   // draws every card in the history: rendering them all would ask once per
   // card). Raw until then, and when the render answers null (then the next
-  // open asks again).
-  function renderSaidOnOpen(card, full, asked) {
+  // open asks again). +refs+: the question's, paired again on the swap.
+  function renderSaidOnOpen(card, full, asked, refs) {
     let state = "raw";
     const draw = () => {
       if (!card.open || state !== "raw") return;
@@ -463,13 +474,19 @@ export function createQuestionCards({
           // Sanitised on the server (POST /api/render).
           full.innerHTML = html;
           full.classList.add("markdown", "md-compact");
-          linkRefs(full);
+          linkRefs(full, refs);
         });
     };
     card.addEventListener("toggle", draw);
     draw();
   }
 
+  // A pending question's refs (a plugin's, on the reply that asks it), or
+  // null: none, or not an array.
+  function questionRefsOf(pq) {
+    return Array.isArray(pq?.refs) && pq.refs.length ? pq.refs : null;
+  }
+
   function markQuestionSelection(sel) {
     if (!questionEl || !sel.length) return;
     questionEl.querySelectorAll(".question-choice").forEach((button) => {

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

@@ -1,15 +1,25 @@
-// The info bar's ✎ (Rename this session): a small input in its place,
+// The title's ✎ (Rename this session): a small input over the title as it
+// shows on screen (the active strip card's title row, or the top bar's),
 // prefilled with the session's title ("" for none). Enter sends
 // `/title TEXT` (blank: `/title --clear`) through the chips' command path
 // (composer.js run: the reply shows as a command bubble, a refusal in the
 // failed bubble, the composer untouched); leaving the field saves the same
-// way (a phone's keyboard dismissed keeps what was typed). Esc, or opening
-// another session, closes it unsent. The cards follow from the saved file
-// (the hub's scan), as for any title.
+// way (a phone's keyboard dismissed keeps what was typed). Esc, opening
+// another session, or the title leaving the screen closes it unsent. The
+// cards follow from the saved file (the hub's scan), as for any title.
+//
+// The input lives at the end of body, fixed over its anchor's rect: the
+// strip draws every card from new nodes on each session event, so an input
+// inside a card would be thrown away mid-typing.
 import { normalize } from "./format.js";
 
 // As long as a title may be (TitleCommand::LIMIT).
 const TITLE_CHARS = 80;
+// The narrowest field (a short title still gets room to type), the gap kept
+// to the window's right edge, and the lowest field.
+const MIN_WIDTH_PX = 192;
+const EDGE_PX = 16;
+const MIN_HEIGHT_PX = 24;
 
 // The line the input's +text+ sends.
 export function titleLine(text) {
@@ -17,21 +27,47 @@ export function titleLine(text) {
   return title ? `/title ${title}` : "/title --clear";
 }
 
-// @param button the ✎ button (it hides while the input shows)
+// Where the input goes over +rect+ (the anchor's) in a window +innerWidth+
+// wide: the anchor's box, at least MIN_WIDTH_PX wide and MIN_HEIGHT_PX tall
+// (centred on it), never closer than EDGE_PX to the right edge.
+export function inputBox(rect, innerWidth) {
+  const height = Math.max(rect.height, MIN_HEIGHT_PX);
+  const room = Math.max(innerWidth - rect.left - EDGE_PX, 0);
+  const width = Math.min(Math.max(rect.width, MIN_WIDTH_PX), room);
+  return { left: rect.left, top: rect.top + (rect.height - height) / 2, width, height };
+}
+
+// Whether a card's title row +rect+ has left its scroller's +clip+ (a
+// phone's strip swiped sideways: a fixed input isn't clipped by its overflow).
+export function outsideClip(rect, clip) {
+  return rect.left < clip.left - 1 || rect.right > clip.right + 1 || rect.bottom < clip.top || rect.top > clip.bottom;
+}
+
+// @param doc the document (the input goes at the end of its body)
+// @param anchor () => the title row on screen for the open session (its ✎
+//   inside), or null when none shows
 // @param session () => the open session's id, or null
 // @param titleOf (id) => that session's title, or null
+// @param shownTitle (id) => the title as the page shows it (the
+//   placeholder: an untitled chain link shows its chain's), or ""
+// @param closePopovers () => close the family and chain popovers (their Esc
+//   would close the popover and refocus its chip: a blur, so a save)
+// @param onClose () => after the input closed (a held strip catches up)
 // @param run (line) => composer.js run's promise
-export function createRename({ button, session, titleOf, run }) {
+export function createRename({ doc = document, anchor, session, titleOf, shownTitle = () => "", closePopovers = () => {}, onClose = () => {}, run }) {
   let input = null;
   let openFor = null;
+  const win = doc.defaultView;
 
+  // Removing the input blurs it: input is cleared first, so that blur sends
+  // nothing (a close is always unsent).
   function close() {
     if (!input) return;
     const el = input;
     input = null;
     openFor = null;
     el.remove();
-    button.hidden = false;
+    onClose();
   }
 
   // Enter's and blur's: once (closing it blurs it again), and only to the
@@ -46,14 +82,40 @@ export function createRename({ button, session, titleOf, run }) {
     return run(titleLine(text));
   }
 
+  // Over the anchor's title row, in its title's font size (CSS keeps a
+  // phone's at 16px: under that, iOS zooms the page on focus).
+  function place(a) {
+    const box = inputBox(a.getBoundingClientRect(), win.innerWidth);
+    Object.assign(input.style, {
+      left: `${box.left}px`, top: `${box.top}px`, width: `${box.width}px`, height: `${box.height}px`,
+    });
+    const text = a.firstElementChild;
+    const size = text && win.getComputedStyle ? win.getComputedStyle(text).fontSize : "";
+    if (size) input.style.setProperty("--rename-font", size);
+    // The top bar's row runs to the bell: CSS caps the input there, so it
+    // reads as the title edited, not a field across the bar.
+    input.classList.toggle("over-bar", !a.closest("#topStrip"));
+  }
+
+  // A card's row out of the strip's sight (swiped sideways).
+  function clipped(a) {
+    const strip = a.closest("#topStrip");
+    return !!strip && outsideClip(a.getBoundingClientRect(), strip.getBoundingClientRect());
+  }
+
   function open() {
     const id = session();
     if (input || !id) return;
-    const el = document.createElement("input");
+    const a = anchor();
+    if (!a) return;
+    closePopovers();
+    // The active card may sit scrolled sideways out of a phone's strip.
+    a.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    const el = doc.createElement("input");
     el.type = "text";
     el.className = "rename-input";
     el.maxLength = TITLE_CHARS;
-    el.placeholder = "Session title";
+    el.placeholder = normalize(shownTitle(id)) || "Session title";
     el.setAttribute("aria-label", "Session title (Enter saves, empty clears, Esc cancels)");
     el.value = titleOf(id) || "";
     el.dataset.before = el.value;
@@ -64,23 +126,34 @@ export function createRename({ button, session, titleOf, run }) {
       } else if (e.key === "Escape") {
         e.preventDefault();
         close();
+        // The ✎ as drawn now (the strip may have drawn its card again).
+        anchor()?.querySelector("button")?.focus();
       }
     });
     el.addEventListener("blur", () => submit());
     input = el;
     openFor = id;
-    button.hidden = true;
-    button.after(el);
+    doc.body.append(el);
+    place(a);
     el.focus();
     el.select();
   }
 
-  // The info bar redrew for +id+ (app.js updateInfoBar): an input opened
-  // for another session closes.
+  // The title moved (a strip draw, the strip hidden or shown, the page
+  // scrolled or resized): the input follows it. With no title on screen (the
+  // All sessions view, the title gone, the card swiped away) it closes unsent.
+  function reposition() {
+    if (!input) return;
+    const a = anchor();
+    if (!a || clipped(a)) close();
+    else place(a);
+  }
+
+  // The page shows +id+ (app.js updateSessionTitle): an input opened for
+  // another session closes.
   function follow(id) {
     if (input && openFor !== id) close();
   }
 
-  button.addEventListener("click", () => open());
-  return { open, close, follow, isOpen: () => !!input };
+  return { open, close, follow, reposition, isOpen: () => !!input };
 }

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

@@ -16,6 +16,12 @@ export function topBarTitle({ title, cardShown, stripHidden, allView }) {
   return text;
 }
 
+// Whether the title's ✎ shows (session_rename.js): any session but a plain
+// terminal's (`owner: "tui"`: it takes no commands from the web).
+export function renameShown(owner) {
+  return owner !== "tui";
+}
+
 // The browser tab: "<title, cut at 40> · <base>", the base alone without a
 // session title (base = "Chi · <project>" or "Chi").
 export function tabTitle({ title, base }) {

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

@@ -1,10 +1,12 @@
 // The stage view's cap and frame (stage_view.js): the one place that
 // writes the stage's height, and the stage's own scrolls. The cap: at most
-// ~60% of the page (~80% with the cloud open), and never above the session
+// ~60% of the page (~80% with the cloud open, 85% for the rest of a turn
+// whose question got the question room), and never above the session
 // panel. The frame: held and grow-only while the stage holds a turn
 // (stage_model.js frameTarget), its growth eased. The stage's state comes
-// in as getters (+isHolding+, +isCollapsed+, +isCloudOpen+); what the stage
-// changes of the frame's goes through resetHeld and forgetContent.
+// in as getters (+isHolding+, +isCollapsed+, +isCloudOpen+, +isRoomCap+);
+// what the stage changes of the frame's goes through resetHeld and
+// forgetContent.
 import { frameTarget } from "./stage_model.js";
 import { easeScrollTo } from "./scroll.js";
 
@@ -14,6 +16,11 @@ 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).
 export const STAGE_GAP = 10;
+// The cap's share of the page: the stage's own, with the cloud open, and
+// with the question room (a long reply that asks, stage_view.js).
+const SHARE = 0.6;
+const CLOUD_SHARE = 0.8;
+const ROOM_SHARE = 0.85;
 
 export function reducedMotion() {
   return matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -21,7 +28,7 @@ export function reducedMotion() {
 
 // +observed+: the elements whose size changes refit the frame (the stage's
 // slots, in the order they are observed).
-export function createStageFrame({ stage, scroller, status, cloud, queuedSlot, holdEl, asking, extras, dockEl, centerEl, composerEl, observed, isHolding, isCollapsed, isCloudOpen }) {
+export function createStageFrame({ stage, scroller, status, cloud, queuedSlot, holdEl, asking, extras, dockEl, centerEl, composerEl, observed, isHolding, isCollapsed, isCloudOpen, isRoomCap = () => false }) {
   // The frame (fitFrame): the height held while the turn runs and the
   // tallest content seen.
   let held = null;
@@ -45,25 +52,28 @@ export function createStageFrame({ stage, scroller, status, cloud, queuedSlot, h
     }));
   }
 
-  // ── the cap: at most ~60% of the page (~80% with the cloud open), and
-  // never above the session panel (the dock is absolute: a tall composer or
-  // a phone's keyboard would push the stage's top out) ────────────────────
+  // ── the cap: at most ~60% of the page (~80% with the cloud open, 85%
+  // once the turn's question got the room), and never above the session
+  // panel (the dock is absolute: a tall composer or a phone's keyboard
+  // would push the stage's top out) ──────────────────────────────────────
 
   // 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) {
+  // still in sight). +fromStart+ (the question room's arrival): the asking
+  // text's top even when they don't (the card is reached by the stage's
+  // jump pill, stage_view.js). null: nothing to show.
+  function revealTop(slot, { fromStart = false } = {}) {
     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;
+    if (!asking.hidden && asking.offsetTop < top && (fromStart || 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);
+  // dropped under it). +fromStart+: revealTop's.
+  function reveal(slot, { now = false, fromStart = false } = {}) {
+    const top = revealTop(slot, { fromStart });
     if (top === null) return;
     if (now) scroller.scrollTop = top;
     else easeStage(top);
@@ -75,7 +85,7 @@ export function createStageFrame({ stage, scroller, status, cloud, queuedSlot, h
     // out of the dock's flow).
     const rest = dockEl.offsetHeight + STAGE_GAP;
     const room = centerEl.clientHeight - rest - 32;
-    const share = window.innerHeight * (isCloudOpen() ? 0.8 : 0.6);
+    const share = window.innerHeight * (isRoomCap() ? ROOM_SHARE : isCloudOpen() ? CLOUD_SHARE : SHARE);
     const cap = Math.max(96, Math.round(Math.min(share, room)));
     const was = capPx();
     if (cap === was) return;

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

@@ -6,7 +6,7 @@ import { toolName } from "./activity.js";
 import { splitSentences } from "./sentences.js";
 import { steerSender } from "./format.js";
 import { hookNoticeLabel } from "./turn_events.js";
-import { askingText } from "./turn_model.js";
+import { askingRefs, askingText } from "./turn_model.js";
 import { plainLine } from "./plain_line.js";
 
 const READ_LIKE = new Set(["read", "memory_read", "web_fetch", "task_get", "task_list", "list_sessions"]);
@@ -156,7 +156,8 @@ const NO_ANSWER = "no answer";
 //            without its dir; command as for tool);
 //   ticks    one per call: {kind, status, step (the gen's index)};
 //   asking   the whole text of the reply whose call a card blocks
-//            (turn_model.js askingText), "" when none is blocked.
+//            (turn_model.js askingText), "" when none is blocked;
+//   askingRefs a plugin's refs on it (turn_model.js askingRefs), or null.
 // +pending+: a card waits for the user; +blocked+: a card that blocks the
 // turn (a question, an approval; not an action card) waits; +ended+: the
 // turn's end kind;
@@ -191,6 +192,7 @@ export function liveSlots(turn, { narration = "", thinking = "", pending = false
     trail,
     ticks: rows.map(({ row, step }) => ({ kind: toolKind(row.tool), status: row.status, step })),
     asking: blocked && !ended ? askingText(turn) : "",
+    askingRefs: blocked && !ended ? askingRefs(turn) : null,
   };
 }
 

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

@@ -21,17 +21,23 @@ export function node(tag, cls, parent = null) {
 // command, read at its click); +onChange+ redraws (the stage's
 // scheduleRefresh). +renderMarkdown(text)+: the asking text's HTML
 // (Promise<string|null>; null keeps the raw text: markdown off, a failed
-// read); +linkRefs(el)+: the page's path:line ref pass on the slot.
+// read); +linkRefs(el, refs)+: the page's ref pass on the slot (a
+// plugin's +refs+ paired first, then the path:line ones).
 export function createStageSlots({
   headline, asking, now, trail, ticks, taskStop = null, gens, onChange,
   renderMarkdown = () => Promise.resolve(null), linkRefs = () => {},
 }) {
   // What each slot shows, so an unchanged slot is left alone.
-  const shown = { headline: null, now: null, trail: null, asking: null };
+  const shown = { headline: null, now: null, trail: null, asking: null, askingRefs: "" };
+  // The refs the asking text is paired with (its pending question's).
+  let askingRefs = null;
   // The last asking text sent to render and its answer (in flight or
   // done, HTML only): the same question drawn again (after a reset, a
   // blank between) asks no second time.
   let rendering = { text: null, html: null };
+  // The asking text shows in its final form (its markdown swapped in, or
+  // a null render left the raw text): askingSettled.
+  let askingFinal = false;
 
   function drawHeadline({ text, thinking }) {
     const key = `${thinking ? "t" : "n"}|${text}`;
@@ -53,16 +59,28 @@ export function createStageSlots({
   // rewrites the same text): a selection in it survives. A new text reads
   // from its top: drawn raw at once, then swapped for its markdown when
   // that comes back while the slot still shows the same text (the text is
-  // final: it shows only once the call that asks runs).
-  function drawAsking(text) {
+  // final: it shows only once the call that asks runs). +refs+: a plugin's
+  // refs on it (the pending question's), paired on both draws; new refs on
+  // the same text (a second question in the step) are paired in place.
+  function drawAsking(text, refs = null) {
     asking.hidden = !text;
-    if (shown.asking === text) return;
+    const refsKey = text && Array.isArray(refs) && refs.length ? JSON.stringify(refs) : "";
+    if (shown.asking === text) {
+      if (shown.askingRefs === refsKey) return;
+      shown.askingRefs = refsKey;
+      askingRefs = refsKey ? refs : null;
+      linkRefs(asking, askingRefs);
+      return;
+    }
     shown.asking = text;
+    shown.askingRefs = refsKey;
+    askingRefs = refsKey ? refs : null;
     asking.classList.remove("markdown", "md-compact");
     asking.textContent = text;
     asking.scrollTop = 0;
+    askingFinal = false;
     if (!text) return;
-    linkRefs(asking);
+    linkRefs(asking, askingRefs);
     if (rendering.text !== text) {
       let html;
       try { html = Promise.resolve(renderMarkdown(text)).catch(() => null); } catch (_) { html = Promise.resolve(null); }
@@ -72,13 +90,24 @@ export function createStageSlots({
     pending.html.then((html) => {
       // A null isn't kept: the next draw of this text asks again.
       if (!html && rendering === pending) rendering = { text: null, html: null };
+      if (shown.asking !== text || askingFinal) return;
+      // The raw text is final (markdown off, a failed read): the stage
+      // measures it now.
+      if (!html) {
+        askingFinal = true;
+        onChange?.();
+        return;
+      }
       // Swapped once: a blank-then-same draw while in flight waits twice.
-      if (!html || shown.asking !== text || asking.classList.contains("markdown")) return;
+      if (asking.classList.contains("markdown")) return;
       // Sanitised on the server (POST /api/render), as an answer's HTML is.
       asking.innerHTML = html;
       asking.classList.add("markdown", "md-compact");
       asking.scrollTop = 0;
-      linkRefs(asking);
+      linkRefs(asking, askingRefs);
+      askingFinal = true;
+      // Its height changed: the stage measures it now (the question room).
+      onChange?.();
     });
   }
 
@@ -156,7 +185,10 @@ export function createStageSlots({
     asking.hidden = true;
     asking.classList.remove("markdown", "md-compact");
     shown.headline = shown.now = shown.trail = shown.asking = null;
+    shown.askingRefs = "";
+    askingRefs = null;
+    askingFinal = false;
   }
 
-  return { drawHeadline, drawAsking, drawNow, drawTrail, drawTicks, reset };
+  return { drawHeadline, drawAsking, drawNow, drawTrail, drawTicks, reset, askingSettled: () => askingFinal };
 }