samagotchi 0.67.0 → 0.68.0

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

@@ -12,6 +12,7 @@
 // choice for the next create only (POST /api/sessions' llm_context), never
 // remembered: nothing is sent unless the user sets one.
 
+import { createChipPopover } from "./chip_popover.js";
 import { html, nothing, render } from "./vendor/lit-html.js";
 
 const STRATEGIES = [
@@ -201,113 +202,40 @@ export function renderForm(target, summary, opts = {}) {
   render(formTemplate(summary, opts), target);
 }
 
-const EDGE = 16;
-const GAP = 8;
-
-// Where the popover goes for the chip's +rect+: above it, or below when
-// the room above is short of its height and below has more; capped to the
-// room on that side (it scrolls), never past the window's edges.
-// @return {{left, top?, bottom?, maxHeight?}}
-export function popoverPlace(rect, { width, height, innerWidth, innerHeight }) {
-  const left = Math.max(EDGE, Math.min(rect.left, innerWidth - width - EDGE));
-  const above = rect.top - GAP - EDGE;
-  const below = innerHeight - rect.bottom - GAP - EDGE;
-  const down = height > above && below > above;
-  const room = Math.max(0, down ? below : above);
-  const place = down ? { left, top: rect.bottom + GAP } : { left, bottom: Math.max(EDGE, innerHeight - rect.top + GAP) };
-  return height > room ? { ...place, maxHeight: room } : place;
-}
-
-// The chip's popover. el: where the chip is drawn (#infoText, info_bar.js:
-// clicks are delegated); summary(): the open session's llm_context;
-// session(): the open session's id; running(): a turn runs; run(line):
-// sends the command.
+// The chip's popover (chip_popover.js' shell). el: where the chip is drawn
+// (#infoText, info_bar.js: clicks are delegated); summary(): the open
+// session's llm_context; session(): the open session's id; running(): a
+// turn runs; run(line): sends the command.
 // The start page's (kind NEW_CHAT): summary() is the picked model's,
 // choice() the pending choice, and choose(next) takes a Set's (null for
 // "follow the model") instead of a command running. id and anchor (the
 // chip's selector) keep the two controls apart.
 export function createLlmContextControl({ el, summary, session = () => null, running = () => false, run,
                                           kind = SESSION, choice = () => null, choose = null,
-                                          id = "llmContextPopover", anchor: anchorSel = ".llmctx-chip",
+                                          id = "llmContextPopover", anchor = ".llmctx-chip",
                                           doc = document, win = window }) {
   const fresh = kind === NEW_CHAT;
-  const pop = doc.createElement("div");
-  pop.id = id;
-  pop.className = "ctx-popover llmctx-popover";
-  pop.setAttribute("role", "dialog");
-  pop.hidden = true;
-  doc.body.appendChild(pop);
-  // The values the form opened with, and the session it is for.
+  // The values the form opened with.
   let initial = null;
-  let openFor = null;
   // What the open form was drawn from: the summary, the form's options and
-  // the summary its "Now:" line reads. A closed popover is empty, so each
-  // open draws a fresh form (unsent edits are gone).
+  // the summary its "Now:" line reads.
   let shown = null;
   const draw = (changes = {}) => {
     shown = { ...shown, ...changes };
-    renderForm(pop, shown.data, { ...shown.opts, now: shown.now, error: shown.error });
+    renderForm(shell.pop, shown.data, { ...shown.opts, now: shown.now, error: shown.error });
   };
 
-  function place(anchor) {
-    const width = Math.min(360, win.innerWidth - 32);
-    pop.style.width = `${width}px`;
-    pop.style.maxHeight = "";
-    const at = popoverPlace(anchor.getBoundingClientRect(), { width, height: pop.offsetHeight,
-                                                              innerWidth: win.innerWidth, innerHeight: win.innerHeight });
-    pop.style.left = `${at.left}px`;
-    pop.style.top = at.top === undefined ? "" : `${at.top}px`;
-    pop.style.bottom = at.bottom === undefined ? "" : `${at.bottom}px`;
-    if (at.maxHeight !== undefined) pop.style.maxHeight = `${at.maxHeight}px`;
-  }
-
-  function open(anchor) {
-    const data = summary();
-    if (!data) return;
+  // A refresh (a newer summary): an open form keeps what the user typed;
+  // only its "Now:" line follows (the same template again: lit writes that
+  // line alone).
+  function show(data, opening) {
+    if (!opening) return draw({ now: data });
     initial = fresh ? ownValues({ own: choice() }) : ownValues(data);
-    openFor = session();
     shown = { data, opts: { running: running(), kind, choice: choice() } };
     draw({ now: data, error: null });
-    pop.hidden = false;
-    place(anchor);
-  }
-
-  function close() {
-    pop.hidden = true;
-    initial = null;
-    openFor = null;
-    shown = null;
-    render(nothing, pop);
   }
 
-  function isOpen() { return !pop.hidden; }
-
-  // A new summary (a command_ran, a re-read): an open form keeps what the
-  // user typed; only its "Now:" line follows (the same template again: lit
-  // writes that line alone). Another session closes it.
-  function refresh() {
-    if (!isOpen()) return;
-    const data = summary();
-    if (!data || session() !== openFor) return close();
-    draw({ now: data });
-  }
-
-  el.addEventListener("click", (e) => {
-    const anchor = e.target.closest(anchorSel);
-    if (!anchor) return;
-    e.stopPropagation();
-    if (isOpen()) close();
-    else open(anchor);
-  });
-  // An edit makes an error the last Set showed stale.
-  const clearError = () => {
-    if (shown?.error) draw({ error: null });
-  };
-  pop.addEventListener("input", clearError);
-  pop.addEventListener("change", clearError);
-  pop.addEventListener("submit", (e) => {
-    e.preventDefault();
-    const form = e.target;
+  function submit(form) {
     const values = { strategy: form.elements.strategy.value, apply: form.elements.apply.value,
                      budget: form.elements.budget.value };
     if (fresh) {
@@ -318,29 +246,32 @@ export function createLlmContextControl({ el, summary, session = () => null, run
         draw({ error: err.message });
         return;
       }
-      close();
+      shell.close();
       choose(next);
       return;
     }
     const line = commandLine(values, initial);
-    close();
+    shell.close();
     if (line) run(line);
+  }
+
+  function act(name) {
+    if (name !== "reset") return;
+    shell.close();
+    if (fresh) choose(null);
+    else run(commandLine());
+  }
+
+  const shell = createChipPopover({
+    id, className: "ctx-popover llmctx-popover", width: 360, el, anchor, summary, session, show,
+    onClose: () => { initial = null; shown = null; }, onSubmit: submit, onAct: act, doc, win,
   });
-  pop.addEventListener("click", (e) => {
-    const act = e.target.closest("[data-act]")?.dataset.act;
-    if (act === "close") close();
-    else if (act === "reset") {
-      close();
-      if (fresh) choose(null);
-      else run(commandLine());
-    }
-  });
-  doc.addEventListener("click", (e) => {
-    if (isOpen() && !pop.contains(e.target) && !e.target.closest?.(anchorSel)) close();
-  });
-  doc.addEventListener("keydown", (e) => {
-    if (e.key === "Escape" && isOpen()) close();
-  });
+  // An edit makes an error the last Set showed stale.
+  const clearError = () => {
+    if (shown?.error) draw({ error: null });
+  };
+  shell.pop.addEventListener("input", clearError);
+  shell.pop.addEventListener("change", clearError);
 
-  return { close, refresh, get open() { return isOpen(); } };
+  return { close: shell.close, refresh: shell.refresh, get open() { return shell.isOpen(); } };
 }

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

@@ -9,26 +9,32 @@
 // has it. The search input keeps the focus:
 // ↑/↓ PageUp/PageDown move, ⏎ picks, Esc and Tab close without a change.
 
-import { escapeHtml } from "./format.js";
 import { moveSelection } from "./command_complete.js";
 import {
   MODEL_KEY, RECENT_KEY, groupRows, matchModels, modelRows, pickModel, pushRecent, recentRows, rowNote, rowTitle,
 } from "./model_pick.js";
+import { html, nothing, render as draw } from "./vendor/lit-html.js";
 
 const PAGE = 8;
 const MAX_HEIGHT = 360;
 const MIN_ROOM = 200;
 const GAP = 8;
 
-// The text with the [start, end) ranges in <mark>, escaped slice by slice.
-function markedHtml(text, marks) {
-  let html = "";
+// The text with the [start, end) ranges in <mark> (lit-html parts).
+function markedTemplate(text, marks) {
+  const parts = [];
   let at = 0;
   for (const [a, b] of marks || []) {
-    html += `${escapeHtml(text.slice(at, a))}<mark>${escapeHtml(text.slice(a, b))}</mark>`;
+    parts.push(text.slice(at, a), html`<mark>${text.slice(a, b)}</mark>`);
     at = b;
   }
-  return html + escapeHtml(text.slice(at));
+  parts.push(text.slice(at));
+  return parts;
+}
+
+// A group's head ("Recent", a host with its notes).
+function headTemplate(label, note = "") {
+  return html`<div class="model-group" role="presentation">${label}${note ? html` <span>${note}</span>` : nothing}</div>`;
 }
 
 function readRecent() {
@@ -58,40 +64,38 @@ export function createModelPicker({ button, panel, input, list, composer, center
     button.classList.toggle("unavailable", rows.some((r) => r.name === name && r.unavailable === true));
   }
 
-  function rowHtml(row, i, { hostMarks = [], idMarks = [], showHost = !row.isDefaultHost } = {}) {
-    const host = showHost ? `<span class="model-host">${markedHtml(row.host, hostMarks)}</span><span class="model-dot"> · </span>` : "";
+  // One option row. The active one is drawn so here and kept so by
+  // showActive (the arrows and the pointer move it without a redraw).
+  function rowTemplate(row, i, { hostMarks = [], idMarks = [], showHost = !row.isDefaultHost } = {}) {
+    const host = showHost
+      ? html`<span class="model-host">${markedTemplate(row.host, hostMarks)}</span><span class="model-dot"> · </span>` : nothing;
     const noteText = rowNote(row, defaultName);
-    const note = noteText ? `<span class="model-note">${noteText}</span>` : "";
+    const note = noteText ? html`<span class="model-note">${noteText}</span>` : nothing;
     const cls = `model-option${i === active ? " active" : ""}${row.name === chosen ? " chosen" : ""}${row.unavailable ? " unavailable" : ""}`;
-    const titleText = rowTitle(row);
-    const title = titleText ? ` title="${escapeHtml(titleText)}"` : "";
-    return `<div class="${cls}" role="option" id="model-option-${i}" aria-selected="${i === active}" data-index="${i}"${title}>` +
-      `<span class="model-id">${host}${markedHtml(row.id, idMarks)}</span>${note}</div>`;
+    return html`<div class=${cls} role="option" id=${`model-option-${i}`} aria-selected=${String(i === active)} data-index=${i} title=${rowTitle(row) || nothing}><span class="model-id">${host}${markedTemplate(row.id, idMarks)}</span>${note}</div>`;
   }
 
   function render() {
     const query = input.value.trim();
-    let html = "";
+    const parts = [];
     shown = [];
-    const add = (row, opts) => { html += rowHtml(row, shown.length, opts); shown.push(row); };
+    const add = (row, opts) => { parts.push(rowTemplate(row, shown.length, opts)); shown.push(row); };
     if (query) {
       for (const m of matchModels(rows, query)) add(m.row, { hostMarks: m.hostMarks, idMarks: m.idMarks });
-      if (!shown.length) html = `<div class="model-empty" role="presentation">Nothing matches</div>`;
+      if (!shown.length) parts.push(html`<div class="model-empty" role="presentation">Nothing matches</div>`);
     } else {
       const recent = recentRows(rows, readRecent());
-      const head = (label, note = "") =>
-        `<div class="model-group" role="presentation">${escapeHtml(label)}${note ? ` <span>${escapeHtml(note)}</span>` : ""}</div>`;
       if (recent.length) {
-        html += head("Recent");
+        parts.push(headTemplate("Recent"));
         recent.forEach((row) => add(row));
       }
       for (const group of groupRows(rows)) {
-        html += head(group.host, [group.isDefault ? "default host" : "", group.unavailable ? "host down" : ""].filter(Boolean).join(" · "));
+        parts.push(headTemplate(group.host, [group.isDefault ? "default host" : "", group.unavailable ? "host down" : ""].filter(Boolean).join(" · ")));
         group.rows.forEach((row) => add(row, { showHost: false }));
       }
     }
     if (active >= shown.length) active = 0;
-    list.innerHTML = html;
+    draw(parts, list);
     showActive();
   }
 
@@ -144,7 +148,7 @@ export function createModelPicker({ button, panel, input, list, composer, center
   function close({ refocus = false } = {}) {
     if (!isOpen()) return;
     panel.hidden = true;
-    list.innerHTML = "";
+    draw(nothing, list);
     shown = [];
     button.setAttribute("aria-expanded", "false");
     input.setAttribute("aria-expanded", "false");

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

@@ -7,7 +7,7 @@
 // are left alone, inline code only when it is the ref alone, a bare URL's
 // text too.
 
-import { refAttrs } from "./refs.js";
+import { refSpan } from "./refs.js";
 
 // A path (no spaces), a line, an optional end line and an optional column
 // (kept in the text, not used). LineLinker::REF.
@@ -168,12 +168,6 @@ function wrapRefs(node, hits) {
   node.replaceWith(frag);
 }
 
-function refSpan(doc, ref) {
-  const holder = doc.createElement("div");
-  holder.innerHTML = `<span class="ref"${refAttrs(ref)}></span>`;
-  return holder.firstChild;
-}
-
 // [start, end] of each fenced block (an unclosed one runs to the end).
 function fencedBlocks(text) {
   const blocks = [];

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

@@ -32,6 +32,19 @@ export function refAttrs(ref) {
   return ` data-ref-kind="${escapeHtml(ref.kind)}"${attr("path", ref.path)}${attr("line", ref.line)}${attr("end-line", ref.end_line)}`;
 }
 
+// A span with refAttrs' ref class and data attributes, for a page that
+// builds DOM (ref_scan.js).
+export function refSpan(doc, ref) {
+  const span = doc.createElement("span");
+  span.className = "ref";
+  if (!ref?.kind) return span;
+  span.dataset.refKind = ref.kind;
+  for (const [name, value] of [["refPath", ref.path], ["refLine", ref.line], ["refEndLine", ref.end_line]]) {
+    if (value) span.dataset[name] = String(value);
+  }
+  return span;
+}
+
 // A kind, as the server's Ref allows it (Ref::KIND).
 const KIND = /^[a-z][a-z0-9_-]{0,31}$/;
 

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

@@ -0,0 +1,179 @@
+// 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
+// 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.
+import { frameTarget } from "./stage_model.js";
+import { easeScrollTo } from "./scroll.js";
+
+// 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;
+
+export function reducedMotion() {
+  return matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+// +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 }) {
+  // 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
+
+  // 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();
+    }));
+  }
+
+  // ── 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 * (isCloudOpen() ? 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 && !isCollapsed() && !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 holding = isHolding();
+    const collapsed = isCollapsed();
+    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 observed) frameObserver.observe(el);
+
+  return {
+    fitCap,
+    frameFree,
+    afterGrowth,
+    easeStage,
+    reveal,
+    // A new turn, or none: no height held yet.
+    resetHeld: () => { held = null; },
+    // The tallest content seen is forgotten (a new turn, the cloud closed by hand).
+    forgetContent: () => { maxContent = 0; },
+  };
+}

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

@@ -124,6 +124,39 @@ export function trailFlashText(flash, mark) {
   return { text, hover: text };
 }
 
+// The status row's mark for an ended turn's phase (liveSlots), none while
+// it runs.
+export 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 (↪).
+export const FLASH_MARKS = { warn: "⚠", info: "ℹ", edit: "✂", steer: "↪" };
+
+// "1 step", "3 steps".
+export function stepsText(n) {
+  return `${n} step${n === 1 ? "" : "s"}`;
+}
+
+// The chip's label: the steps, the calls, and the turn's time when the
+// status row's timing line isn't there to say it (+elapsed+, "" for none).
+export function chipLabelText({ steps, calls, elapsed = "" }) {
+  return `${stepsText(steps)} · ${calls} tool call${calls === 1 ? "" : "s"}${elapsed ? ` · ${elapsed}` : ""}`;
+}
+
+// The status row's step: running, the step it is on; ended, the count,
+// unless the chip says it (+chipHidden+: no chip shows).
+export function stepSlotText({ step, ended, chipHidden }) {
+  return !ended ? `step ${step}` : chipHidden ? stepsText(step) : "";
+}
+
+// The collapsed stage's mini tool in the status row: the running call's
+// name and title, its full command as the hover; "" for both otherwise.
+export function miniToolText({ collapsed, tool }) {
+  return {
+    text: collapsed && tool ? `${tool.name} ${tool.title}` : "",
+    title: (collapsed && tool?.command) || "",
+  };
+}
+
 // While the first step has no thinking and no tool rows the turn is plain:
 // its text streams in the stage's answer slot, as the turn view's
 // chrome-less block streams like a bubble.