samagotchi 0.97.0 → 0.98.0

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 };
 }

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

@@ -40,6 +40,10 @@ const PENDING = ".bubble.question:not(.answered):not(.cancelled), .bubble.contin
 // asks the user too, but the turn goes on: it waits only while the turn runs
 // and never holds the hand-off (a turn cut short can leave it open).
 const ASKS = ".plugin-card[data-in-turn] .card-action";
+// 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 long asking text gets the question room.
+const ASK_CARD = '.bubble.question[data-kind="question"]:not([data-relay])';
 
 function readCollapsed() {
   return readStored(COLLAPSE_KEY) === "1";
@@ -113,6 +117,14 @@ export function createStageView({
   chip.type = "button";
   const chipLabel = node("span", "ts-chip-label", chip);
   const ticks = node("span", "ts-ticks", chip);
+  // The question room's jump pill, at the scroller's bottom edge (absolute,
+  // above the chip): while the room's card is out of the stage's view it
+  // eases the stage to it (drawPill).
+  const pill = node("button", "ts-room-pill", cloud);
+  pill.type = "button";
+  pill.setAttribute("aria-label", "Go to the question");
+  pill.hidden = true;
+  pill.textContent = "❓ Answer ↓";
   // Below the turn's card: the lines queued for after it (placeKind
   // "queued"), each to run as a turn of its own; they hand off last.
   const queuedSlot = node("div", "ts-queued", stage);
@@ -140,6 +152,21 @@ export function createStageView({
   let revealed = false;
   let rafPending = false;
   let foldTimer = null;
+  // The question room (drawRoom): the pending ask card whose asking text
+  // overflowed its cap, and the turn's raised cap (stage_frame.js; kept
+  // until the next turn: the frame is grow-only).
+  let roomCard = null;
+  let roomCap = false;
+  // What the overflow was measured for ({ card, text }): measured once the
+  // asking text shows in its final form (its markdown, or the raw text when
+  // there is none: the raw text is taller, and a short question's could
+  // overflow where its markdown fits), again only for a new card or text,
+  // never at a cap's change (a phone's keyboard).
+  let measured = null;
+  // The ask card whose arrival reveal has run (no pill while the stage
+  // grows to it), and whether the room's card is in the stage's view.
+  let arrived = null;
+  let cardInSight = true;
 
   const view = createTurnView({
     historyEl,
@@ -181,6 +208,69 @@ export function createStageView({
     return !!(extras.querySelector(PENDING) || tail.querySelector(PENDING));
   }
 
+  // The pending card in the extras when it is the model's own question
+  // (never the tail's: a post-end card, the step limit; asking is empty then).
+  function askCard() {
+    const card = extras.querySelector(PENDING);
+    return card?.matches(ASK_CARD) ? card : null;
+  }
+
+  // The asking text overflows its cap (+1 px of rounding), measured with
+  // the room's class off.
+  function askingOverflows() {
+    return !asking.hidden && asking.scrollHeight > asking.clientHeight + 1;
+  }
+
+  // The question room: while a model's own question waits and its asking
+  // text didn't fit its cap, the slot loses its cap and the stage's one
+  // scroll reads the whole reply (index.html .question-room); the cap rises
+  // for the rest of the turn. The card keeps the room until it stops
+  // pending (+text+: the asking text drawn).
+  function drawRoom(blocked, text) {
+    const ask = blocked ? askCard() : null;
+    if (roomCard && ask === roomCard) return;
+    if (roomCard) {
+      cardSight.unobserve(roomCard);
+      stage.classList.remove("question-room");
+      roomCard = null;
+    }
+    if (!ask || !slotsView.askingSettled() || (measured && measured.card === ask && measured.text === text)) return;
+    measured = { card: ask, text };
+    if (!askingOverflows()) return;
+    roomCard = ask;
+    stage.classList.add("question-room");
+    cardInSight = true;
+    cardSight.observe(roomCard);
+    if (!roomCap) {
+      roomCap = true;
+      frame.fitCap();
+    }
+    // Decided after the card's arrival reveal (a slow markdown read): the
+    // reply reads from its start now, the pill only after that.
+    if (arrived === ask) {
+      arrived = null;
+      frame.afterGrowth(() => {
+        if (roomCard !== ask) return;
+        frame.reveal(extras, { fromStart: true });
+        arrived = ask;
+        drawPill();
+      });
+    }
+  }
+
+  // The pill: the room's card out of the stage's view, once its arrival
+  // reveal has run, the stage open.
+  function drawPill() {
+    pill.hidden = !(roomCard && !collapsed && arrived === roomCard && !cardInSight);
+  }
+
+  // The room's card in the stage's view: ~40 px of it shows above the
+  // scroller's bottom edge (where the pill sits).
+  const cardSight = new IntersectionObserver((entries) => {
+    for (const entry of entries) if (entry.target === roomCard) cardInSight = entry.isIntersecting;
+    drawPill();
+  }, { root: scroller, rootMargin: "0px 0px -40px 0px", threshold: 0 });
+
   function asksCard() {
     return !endKind && !!extras.querySelector(ASKS);
   }
@@ -214,7 +304,10 @@ export function createStageView({
     // 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.classList.add("held-wait");
+      live.style.minHeight = "";
+    }
     if (!blocked && wasWaiting) stage.style.setProperty("--live-held", `${live.offsetHeight}px`);
     stage.classList.toggle("plain", plain);
     stage.classList.toggle("ended", !!endKind);
@@ -225,7 +318,9 @@ export function createStageView({
     phaseEl.textContent = slots.phase;
 
     slotsView.drawHeadline(slots.headline);
-    slotsView.drawAsking(slots.asking);
+    slotsView.drawAsking(slots.asking, slots.askingRefs);
+    drawRoom(blocked, slots.asking);
+    drawPill();
     slotsView.drawNow(slots.tool, slots.quiet);
     slotsView.drawTrail(slots.trail, flash);
     slotsView.drawTicks(slots.ticks);
@@ -253,6 +348,25 @@ export function createStageView({
     tail.hidden = !tail.firstChild;
   }
 
+  // The next step: the live slots' waiting height is let go. In a turn
+  // with the question room that height was the whole reply's: it goes as
+  // far as the stage's scroll absorbs it (the scroll moves up by as much,
+  // in the same task: the card in view stays put), the rest kept as the
+  // live slots' least height until the next wait or turn.
+  function releaseHeldWait() {
+    const held = roomCap && stage.classList.contains("held-wait") && !stage.classList.contains("waiting");
+    const before = held ? live.offsetHeight : 0;
+    const top = scroller.scrollTop;
+    stage.classList.remove("held-wait");
+    stage.style.removeProperty("--live-held");
+    live.style.minHeight = "";
+    if (!held) return;
+    const after = live.offsetHeight;
+    const absorbed = Math.min(Math.max(0, before - after), top);
+    if (before - absorbed > after) live.style.minHeight = `${before - absorbed}px`;
+    if (absorbed) scroller.scrollTop = top - absorbed;
+  }
+
   // One line in the trail for FLASH_MS, ahead of the calls (a newer flash
   // takes its place).
   function flashTrail(what) {
@@ -339,6 +453,13 @@ export function createStageView({
     else setCloud(!cloudOpen);
   });
   headline.addEventListener("click", peek);
+  // To the card: its end in sight (the arrival's rule), or back up to it
+  // for a reader below it (the cloud open under the card).
+  pill.addEventListener("click", () => {
+    if (!roomCard) return;
+    if (roomCard.offsetTop < scroller.scrollTop) frame.easeStage(Math.max(0, roomCard.offsetTop - 8));
+    else frame.reveal(extras);
+  });
   // A ref's "show in turn" (refs.js) names a row in the cloud: open the
   // stage and the cloud to it, as a hand toggle would.
   // A collapsed stage opens for this turn only: the kept choice
@@ -378,6 +499,7 @@ export function createStageView({
     isHolding: () => holding,
     isCollapsed: () => collapsed,
     isCloudOpen: () => cloudOpen,
+    isRoomCap: () => roomCap,
   });
 
   // The in-use watch (stage_watch.js): an ended turn hands off once the
@@ -421,9 +543,16 @@ export function createStageView({
     thinkingLine = null;
     flash = null;
     clearTimeout(flashTimer);
+    if (roomCard) cardSight.unobserve(roomCard);
+    roomCard = null;
+    roomCap = false;
+    measured = null;
+    arrived = null;
+    pill.hidden = true;
     setCloud(false);
-    stage.classList.remove("plain", "ended", "waiting", "held-wait", "asking", "in-use");
+    stage.classList.remove("plain", "ended", "waiting", "held-wait", "asking", "in-use", "question-room");
     stage.style.removeProperty("--live-held");
+    live.style.minHeight = "";
   }
 
   // The turn leaves the stage's care (the hand-off's start, a reset, a new
@@ -546,9 +675,7 @@ export function createStageView({
       refresh();
     },
     generationStarted(data, now = null) {
-      // The next step: the live slots' waiting height is let go.
-      stage.classList.remove("held-wait");
-      stage.style.removeProperty("--live-held");
+      releaseHeldWait();
       view.generationStarted(data, now);
     },
     chunk: (data) => view.chunk(data),
@@ -600,6 +727,11 @@ export function createStageView({
     },
     containsLive: (el) => view.containsLive(el),
     askingText: () => view.askingText(),
+    // The asking slot pairs them on its next draw.
+    questionRefs(refs) {
+      view.questionRefs(refs);
+      scheduleRefresh();
+    },
     // The turn model and its live phase as the status row reads it (the
     // composer's delivery line).
     current: () => view.current(),
@@ -637,8 +769,17 @@ export function createStageView({
       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 (once the stage has grown for it).
-      if (waits) frame.afterGrowth(() => frame.reveal(slot));
+      // below, out of sight (once the stage has grown for it). A question
+      // with the room reads from the reply's start instead (its pill leads
+      // to the card); its pill shows from here on.
+      if (waits) {
+        frame.afterGrowth(() => {
+          const ask = askCard();
+          frame.reveal(slot, { fromStart: !!ask && ask === roomCard });
+          arrived = ask;
+          drawPill();
+        });
+      }
       return true;
     },
     // Where the live timing line goes (the status row), null: the history.

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

@@ -332,7 +332,11 @@ export function createStreamHandlers(deps) {
     },
     question_requested: (data) => {
       const pq = data.pending_question;
-      if (pq && pq.id) questionCards.renderQuestion(pq);
+      if (!pq || !pq.id) return;
+      // A plugin's refs on the reply that asks: on its step before the card
+      // draws the asking slot.
+      if (pq.refs) turnDom.questionRefs?.(pq.refs);
+      questionCards.renderQuestion(pq);
     },
     question_answered: (data) => {
       questionCards.resolveQuestion(data.id, { answer: data.answer });