samagotchi 0.67.0 → 0.68.0

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

@@ -0,0 +1,130 @@
+// The stage view's live slots (stage_view.js): the headline, the asking
+// text, the "now" row, the trail and the chip's ticks, each drawn from
+// liveSlots (stage_model.js) and patched only when what it shows changes
+// (+shown+), so an unchanged slot keeps its nodes: a selection in it
+// survives, and its animations never restart (the ticks' blink; the
+// headline's fade restarts on purpose at a new text).
+import { FLASH_MARKS, trailFlashText, trailItemText, trailTone } from "./stage_model.js";
+import { taskCommand, taskStopButton } from "./task_stop.js";
+
+// The stage's one element helper (stage_view.js builds its skeleton with it).
+export function node(tag, cls, parent = null) {
+  const el = document.createElement(tag);
+  if (cls) el.className = cls;
+  if (parent) parent.appendChild(el);
+  return el;
+}
+
+// +headline+, +asking+, +now+, +trail+, +ticks+: the slots' elements.
+// +taskStop+: the page's stopper (task_stop.js), for the stop-task button
+// on a running task_wait; +gens()+ the running turn's gens (the button's
+// command, read at its click); +onChange+ redraws (the stage's
+// scheduleRefresh).
+export function createStageSlots({ headline, asking, now, trail, ticks, taskStop = null, gens, onChange }) {
+  // What each slot shows, so an unchanged slot is left alone.
+  const shown = { headline: null, now: null, trail: null, asking: null };
+
+  function drawHeadline({ text, thinking }) {
+    const key = `${thinking ? "t" : "n"}|${text}`;
+    if (shown.headline === key) return;
+    shown.headline = key;
+    headline.replaceChildren();
+    headline.classList.toggle("thinking", thinking);
+    if (thinking) {
+      const tag = node("span", "ts-think-tag", headline);
+      tag.textContent = "thinking";
+    }
+    headline.appendChild(document.createTextNode(text));
+    headline.classList.remove("fresh");
+    void headline.offsetWidth;
+    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.
+    const stopId = tool?.taskId && taskStop?.target({ tool: "task_wait", status: "running", view: { task_id: tool.taskId } });
+    const stopKey = stopId ? `|stop:${tool.key}:${taskStop.busy(stopId)}` : "";
+    const key = tool ? `run|${tool.name}|${tool.title}|${tool.command || ""}${stopKey}` : `quiet|${quiet}`;
+    if (shown.now === key) return;
+    shown.now = key;
+    now.replaceChildren();
+    now.classList.toggle("running", !!tool);
+    node("span", tool ? "ts-spin" : "ts-idle", now);
+    if (tool) {
+      const name = node("span", `ts-tool ${tool.kind}`, now);
+      name.textContent = tool.name;
+      const title = node("span", "ts-title", now);
+      title.textContent = tool.title;
+      // The full command when the call has one (the title is its first step +N).
+      title.title = tool.command || tool.title;
+      if (stopId) {
+        const command = () => taskCommand(gens(), stopId);
+        now.appendChild(taskStopButton(taskStop, stopId, { command, onChange }));
+      }
+    } else if (quiet) {
+      const word = node("span", "ts-title quiet", now);
+      word.textContent = quiet;
+    }
+  }
+
+  // +flash+: the trail's flash ({ kind, text, until }), shown ahead of the
+  // calls until its time is up.
+  function drawTrail(items, flash) {
+    const flashing = flash && flash.until > Date.now() ? flash : null;
+    const key = JSON.stringify([flashing?.kind, flashing?.text, items]);
+    if (shown.trail === key) return;
+    shown.trail = key;
+    trail.replaceChildren();
+    if (flashing) {
+      const flash = trailFlashText(flashing, FLASH_MARKS[flashing.kind]);
+      const el = node("span", `ts-trail-item ${flashing.kind}`, trail);
+      el.textContent = flash.text;
+      el.title = flash.hover;
+    }
+    for (const item of items) {
+      const tone = trailTone(item.status);
+      const el = node("span", `ts-trail-item${tone ? ` ${tone}` : ""}`, trail);
+      const { text, hover } = trailItemText(item);
+      el.textContent = text;
+      el.title = hover;
+    }
+    if (!flashing && !items.length) node("span", "ts-trail-item none", trail).textContent = "no tool calls yet";
+  }
+
+  function drawTicks(list) {
+    list.forEach((tick, i) => {
+      let el = ticks.children[i];
+      if (!el) {
+        el = node("span", "", ticks);
+        el.setAttribute("role", "button");
+      }
+      const cls = `ts-tick ${tick.kind} ${tick.status}`;
+      if (el.className !== cls) el.className = cls;
+      el.dataset.step = String(tick.step);
+      el.title = `step ${tick.step + 1}`;
+    });
+    while (ticks.children.length > list.length) ticks.lastChild.remove();
+  }
+
+  // A new turn (or none): the slots empty, the asking text hidden, the next
+  // draw of each slot a fresh one.
+  function reset() {
+    for (const slot of [headline, asking, now, trail, ticks]) slot.replaceChildren();
+    asking.hidden = true;
+    shown.headline = shown.now = shown.trail = shown.asking = null;
+  }
+
+  return { drawHeadline, drawAsking, drawNow, drawTrail, drawTicks, reset };
+}

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

@@ -11,25 +11,23 @@
 // 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.
+// and annotate survive. 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.
 import { createTurnView } from "./turn_view.js";
-import { flashOf, frameTarget, handOffDue, handOffOrder, headlineOf, inUseFrom, isPlain, liveSlots, placeFor, placeKind, QUEUED_CHILDREN, trailFlashText, trailItemText, trailTone } from "./stage_model.js";
+import { chipLabelText, flashOf, handOffDue, handOffOrder, headlineOf, isPlain, liveSlots, MARKS, miniToolText, 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 { formatDuration } from "./timing.js";
 import { easeScrollTo } from "./scroll.js";
-import { taskCommand, taskStopButton } from "./task_stop.js";
 
 const COLLAPSE_KEY = "chi_stage_collapsed";
-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;
 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.
@@ -41,21 +39,6 @@ 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";
-const MARKS = { answered: "✓", "no answer": "∅", canceled: "■", failed: "✕" };
-// The mark of a flash in the trail: a warn notice, a hook's info notice,
-// an applied LLM context edit (✂), a steer-cut row and a plugin's nudge (↪).
-const FLASH_MARKS = { warn: "⚠", info: "ℹ", edit: "✂", steer: "↪" };
-
-function node(tag, cls, parent = null) {
-  const el = document.createElement(tag);
-  if (cls) el.className = cls;
-  if (parent) parent.appendChild(el);
-  return el;
-}
-
-function reducedMotion() {
-  return matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
 
 function readCollapsed() {
   try { return localStorage.getItem(COLLAPSE_KEY) === "1"; } catch (_) { return false; }
@@ -127,6 +110,11 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
   // 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);
+  const slotsView = createStageSlots({
+    headline, asking, now, trail, ticks, taskStop,
+    gens: () => view.current().turn?.gens,
+    onChange: () => scheduleRefresh(),
+  });
 
   // The turn in the stage, from turnStarted until the hand-off (or a reset).
   let holding = false;
@@ -145,18 +133,6 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
   let revealed = false;
   let rafPending = false;
   let foldTimer = null;
-  let watchTimer = null;
-  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, asking: null };
 
   const view = createTurnView({
     historyEl,
@@ -240,22 +216,22 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     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);
+    slotsView.drawHeadline(slots.headline);
+    slotsView.drawAsking(slots.asking);
+    slotsView.drawNow(slots.tool, slots.quiet);
+    slotsView.drawTrail(slots.trail, flash);
+    slotsView.drawTicks(slots.ticks);
     const calls = slots.ticks.length;
     // An ended turn says each thing once: its steps in the chip (the label
     // of what the cloud holds), its time in the status row's timing line
     // (the one that moves into the history). The chip keeps the time when
     // that line is elsewhere (a turn the stage didn't hold from its start).
     const elapsed = endKind && !timingSlot.firstChild ? formatDuration(endedAt - startedAt) : "";
-    chipLabel.textContent = `${steps} · ${calls} tool call${calls === 1 ? "" : "s"}${elapsed ? ` · ${elapsed}` : ""}`;
-    miniTool.textContent = collapsed && slots.tool ? `${slots.tool.name} ${slots.tool.title}` : "";
-    miniTool.title = (collapsed && slots.tool?.command) || "";
+    chipLabel.textContent = chipLabelText({ steps: slots.step, calls, elapsed });
+    const mini = miniToolText({ collapsed, tool: slots.tool });
+    miniTool.textContent = mini.text;
+    miniTool.title = mini.title;
 
     // 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.
@@ -263,90 +239,13 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     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 : "";
+    stepEl.textContent = stepSlotText({ step: slots.step, ended: !!endKind, chipHidden: cloud.hidden });
     promptSlot.hidden = !promptSlot.firstChild;
     extras.hidden = !extras.firstChild;
     answer.hidden = !answer.firstChild;
     tail.hidden = !tail.firstChild;
   }
 
-  function drawHeadline({ text, thinking }) {
-    const key = `${thinking ? "t" : "n"}|${text}`;
-    if (shown.headline === key) return;
-    shown.headline = key;
-    headline.replaceChildren();
-    headline.classList.toggle("thinking", thinking);
-    if (thinking) {
-      const tag = node("span", "ts-think-tag", headline);
-      tag.textContent = "thinking";
-    }
-    headline.appendChild(document.createTextNode(text));
-    headline.classList.remove("fresh");
-    void headline.offsetWidth;
-    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.
-    const stopId = tool?.taskId && taskStop?.target({ tool: "task_wait", status: "running", view: { task_id: tool.taskId } });
-    const stopKey = stopId ? `|stop:${tool.key}:${taskStop.busy(stopId)}` : "";
-    const key = tool ? `run|${tool.name}|${tool.title}|${tool.command || ""}${stopKey}` : `quiet|${quiet}`;
-    if (shown.now === key) return;
-    shown.now = key;
-    now.replaceChildren();
-    now.classList.toggle("running", !!tool);
-    node("span", tool ? "ts-spin" : "ts-idle", now);
-    if (tool) {
-      const name = node("span", `ts-tool ${tool.kind}`, now);
-      name.textContent = tool.name;
-      const title = node("span", "ts-title", now);
-      title.textContent = tool.title;
-      // The full command when the call has one (the title is its first step +N).
-      title.title = tool.command || tool.title;
-      if (stopId) {
-        const command = () => taskCommand(view.current().turn?.gens, stopId);
-        now.appendChild(taskStopButton(taskStop, stopId, { command, onChange: scheduleRefresh }));
-      }
-    } else if (quiet) {
-      const word = node("span", "ts-title quiet", now);
-      word.textContent = quiet;
-    }
-  }
-
-  function drawTrail(items) {
-    const flashing = flash && flash.until > Date.now() ? flash : null;
-    const key = JSON.stringify([flashing?.kind, flashing?.text, items]);
-    if (shown.trail === key) return;
-    shown.trail = key;
-    trail.replaceChildren();
-    if (flashing) {
-      const flash = trailFlashText(flashing, FLASH_MARKS[flashing.kind]);
-      const el = node("span", `ts-trail-item ${flashing.kind}`, trail);
-      el.textContent = flash.text;
-      el.title = flash.hover;
-    }
-    for (const item of items) {
-      const tone = trailTone(item.status);
-      const el = node("span", `ts-trail-item${tone ? ` ${tone}` : ""}`, trail);
-      const { text, hover } = trailItemText(item);
-      el.textContent = text;
-      el.title = hover;
-    }
-    if (!flashing && !items.length) node("span", "ts-trail-item none", trail).textContent = "no tool calls yet";
-  }
-
   // One line in the trail for FLASH_MS, ahead of the calls (a newer flash
   // takes its place).
   function flashTrail(what) {
@@ -356,49 +255,18 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     setTimeout(scheduleRefresh, FLASH_MS + 50);
   }
 
-  function drawTicks(list) {
-    list.forEach((tick, i) => {
-      let el = ticks.children[i];
-      if (!el) {
-        el = node("span", "", ticks);
-        el.setAttribute("role", "button");
-      }
-      const cls = `ts-tick ${tick.kind} ${tick.status}`;
-      if (el.className !== cls) el.className = cls;
-      el.dataset.step = String(tick.step);
-      el.title = `step ${tick.step + 1}`;
-    });
-    while (ticks.children.length > list.length) ticks.lastChild.remove();
-  }
-
   // 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() {
-    afterGrowth(() => {
+    frame.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));
+      if (top < scroller.scrollTop || seen < Math.min(answer.offsetHeight - ANSWER_CUT, ANSWER_SEEN)) frame.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() {
@@ -407,7 +275,7 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     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));
-    fitCap();
+    frame.fitCap();
     scheduleRefresh();
   }
 
@@ -422,14 +290,14 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     cloudOpen = open;
     cloudBody.hidden = !open || cloud.hidden;
     // Closed by hand: its room isn't held at the scroller's end.
-    if (!open) maxContent = 0;
+    if (!open) frame.forgetContent();
     cloud.classList.toggle("open", open);
     stage.classList.toggle("cloud-open", open);
     chip.setAttribute("aria-expanded", String(open));
-    fitCap();
+    frame.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));
+    if (open) frame.afterGrowth(() => frame.reveal(cloudBody));
   }
 
   // Open the cloud at step +i+ (a hand toggle, as a click on its row), its
@@ -480,7 +348,7 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
       applyCollapsed();
     }
     setCloud(true);
-    if (e.detail) e.detail.until = new Promise((resolve) => afterGrowth(resolve));
+    if (e.detail) e.detail.until = new Promise((resolve) => frame.afterGrowth(resolve));
   });
   headline.addEventListener("keydown", (e) => {
     if (e.key === "Enter" || e.key === " ") {
@@ -494,170 +362,24 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     promptSlot.classList.toggle("full");
   });
 
-  // ── 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) ────────────────────
-
-  // 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;
-    // 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);
-    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)
-      + queuedSlot.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, queuedSlot]) 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 ─────────────────
-
-  stage.addEventListener("pointerenter", (e) => { if (e.pointerType === "mouse") pointerIn = true; });
-  stage.addEventListener("pointermove", (e) => { if (e.pointerType === "mouse") pointerIn = true; });
-  stage.addEventListener("pointerleave", () => { pointerIn = false; });
-  // Scrolling needs the pointer over it, a touch or keyboard focus; the
-  // stage's own scrolls (follow, the answer's top) are no use.
-  for (const type of ["touchstart", "touchmove", "wheel"]) {
-    stage.addEventListener(type, () => { lastTouch = Date.now(); }, { passive: true, capture: true });
-  }
-
-  function inUse(nowMs) {
-    const active = document.activeElement;
-    const sel = window.getSelection();
-    return inUseFrom({
-      pointerIn,
-      lastTouchMs: lastTouch,
-      // A clicked button keeps the focus in Chrome: only keyboard focus and
-      // a field being typed in count.
-      focusInside: !!active && stage.contains(active) && active.matches(":focus-visible"),
-      selectionInside: !!sel && !sel.isCollapsed && stage.contains(sel.anchorNode),
-      nowMs,
-    });
-  }
-
-  function stopWatch() {
-    clearInterval(watchTimer);
-    watchTimer = null;
-    quietSince = null;
-    stage.classList.remove("in-use");
-  }
+  // 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, composerEl,
+    observed: [status, promptSlot, live, extras, answer, tail, cloudBody, cloud, queuedSlot],
+    isHolding: () => holding,
+    isCollapsed: () => collapsed,
+    isCloudOpen: () => cloudOpen,
+  });
 
-  function startWatch() {
-    stopWatch();
-    watchTimer = setInterval(() => {
-      if (!holding || !endKind) return stopWatch();
-      const nowMs = Date.now();
-      const busy = inUse(nowMs);
-      stage.classList.toggle("in-use", busy);
-      const r = handOffDue({ ended: true, pending: !settled || pendingCard(), inUse: busy, quietSinceMs: quietSince, nowMs });
-      quietSince = r.quietSinceMs;
-      if (r.due) handOff();
-    }, WATCH_MS);
-  }
+  // The in-use watch (stage_watch.js): an ended turn hands off once the
+  // stage has not been in use for a while and nothing is pending.
+  const watch = createInUseWatch({
+    stage,
+    watching: () => holding && !!endKind,
+    onTick: ({ inUse, quietSinceMs, nowMs }) => handOffDue({ ended: true, pending: !settled || pendingCard(), inUse, quietSinceMs, nowMs }),
+    onDue: () => handOff(),
+  });
 
   // ── show, clear, hand off ────────────────────────────────────────────────
 
@@ -681,10 +403,9 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
   }
 
   function emptySlots() {
-    for (const slot of [promptSlot, extras, answer, tail, cloudBody, queuedSlot, timingSlot, headline, asking, now, trail, ticks]) slot.replaceChildren();
+    for (const slot of [promptSlot, extras, answer, tail, cloudBody, queuedSlot, timingSlot]) slot.replaceChildren();
+    slotsView.reset();
     promptSlot.classList.remove("full");
-    asking.hidden = true;
-    shown.headline = shown.now = shown.trail = shown.asking = null;
     thinkingLine = null;
     flash = null;
     setCloud(false);
@@ -697,10 +418,10 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
   // scroll are the history's (place, timingHost, holds). The slots keep
   // what they show until clearStage.
   function releaseTurn() {
-    stopWatch();
+    watch.stop();
     clearTimeout(settleTimer);
     holding = false;
-    held = null;
+    frame.resetHeld();
     endKind = null;
     emptyAnswer = false;
     settled = true;
@@ -712,7 +433,7 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     cancelFold();
     emptySlots();
     stage.hidden = true;
-    frameFree();
+    frame.frameFree();
     if (revealed) {
       revealed = false;
       collapsed = readCollapsed();
@@ -792,8 +513,8 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
         else release();
       }
       holding = true;
-      held = null;
-      maxContent = 0;
+      frame.resetHeld();
+      frame.forgetContent();
       endKind = null;
       emptyAnswer = false;
       settled = true;
@@ -839,7 +560,7 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
       clearTimeout(settleTimer);
       if (!settled) settleTimer = setTimeout(() => { settled = true; }, SETTLE_CAP_MS);
       refresh();
-      startWatch();
+      watch.start();
       return kept;
     },
     // A hook's notice and a plugin's nudge go into their step inside the
@@ -899,7 +620,7 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
       // 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) afterGrowth(() => reveal(slot));
+      if (waits) frame.afterGrowth(() => frame.reveal(slot));
       return true;
     },
     // Where the live timing line goes (the status row), null: the history.