samagotchi 0.61.0 → 0.63.0

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

@@ -13,10 +13,11 @@
 // card closes on the continue_resolved every client gets.
 
 import { dismissQuestion, sendAnswer, sendCommand } from "./data.js";
-import { diffHtml } from "./diff_view.js";
+import { diffTemplate } from "./diff_view.js";
+import { render } from "./vendor/lit-html.js";
 import {
-  answerErrorText, approvalAllowed, approvalView, CONTINUE_REASON_PLACEHOLDER, deniedReason, isContinue, nextCardAction,
-  relayedToView, resultText, summaryText,
+  answerErrorText, approvalAllowed, approvalView, CONTINUE_REASON_PLACEHOLDER, deniedReason, isContinue, keepsAskingText,
+  nextCardAction, relayedToView, resultText, summaryText,
 } from "./question_card.js";
 import { sessionHash } from "./route.js";
 import { clientLabel, isOwn } from "./turn_events.js";
@@ -28,13 +29,15 @@ import { continueLine } from "./commands.js";
 // @param isNearBottom () => whether the history follows its end
 // @param scrollToEnd () scrolls the history to its end
 // @param removeHintIfEmpty () drops the history's placeholder hint
+// @param askingText () => the running turn's asking reply (turn_model.js
+//   askingText via the page's view), kept by a question or own approval card
 // @param api {sendAnswer, dismissQuestion, sendCommand} (data.js)
 // @param doc the page's document
-// @return {renderQuestion(pq), resolveQuestion(id, opts), removeQuestion(),
+// @return {renderQuestion(pq, {said}), resolveQuestion(id, opts), removeQuestion(),
 //   questionCard() (the live card or null), pendingQuestion() (or null),
 //   renderContinue(offer), resolveContinue(data), forgetContinue()}
 export function createQuestionCards({
-  sessionId, clientId, place, isNearBottom, scrollToEnd, removeHintIfEmpty,
+  sessionId, clientId, place, isNearBottom, scrollToEnd, removeHintIfEmpty, askingText = () => "",
   api = { sendAnswer, dismissQuestion, sendCommand }, doc = globalThis.document,
 }) {
   // Live ask_user_question card, keyed by pending question id. Re-rendered from
@@ -43,8 +46,12 @@ export function createQuestionCards({
   let pending = null;
   // The continue offer's card while the offer is pending.
   let continueEl = null;
+  // card → the reply that asked it, drawn under the summary once resolved.
+  const saidOf = new WeakMap();
 
-  function renderQuestionCard(pq) {
+  // +said+: the asking reply when the caller knows it (a reloaded card: its
+  // step's text, "" for none); else the running turn's (askingText).
+  function renderQuestionCard(pq, { said = null } = {}) {
     const action = nextCardAction({ cardId: questionEl?.dataset.qid ?? null, pendingId: pending?.id ?? null }, pq);
     if (action === "same") return;
     // A resolved card stays where it was; only a pending one is replaced.
@@ -60,6 +67,8 @@ 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;
+    const asked = keepsAskingText(pq) ? String(said ?? askingText() ?? "").trim() : "";
+    if (asked) saidOf.set(card, asked);
     // Open while pending: the question must be actionable.
     card.open = true;
 
@@ -174,11 +183,41 @@ export function createQuestionCards({
     });
     card.appendChild(dismiss);
 
+    // Enter in the response box or on an option submits (never denies or
+    // dismisses: that stays a click).
+    card.addEventListener("keydown", (e) => {
+      if (!isPlainEnter(e) || submit.disabled) return;
+      const t = e.target;
+      if (t !== freeformInput && !t?.closest?.(".question-option")) return;
+      e.preventDefault();
+      submit.click();
+    });
+
     // Read before the card makes the history taller.
     const follow = isNearBottom();
     place(card);
     questionEl = card;
     if (follow) scrollToEnd();
+    focusWhenIdle(card, pq.id);
+  }
+
+  function isPlainEnter(e) {
+    return e.key === "Enter" && !e.isComposing && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey;
+  }
+
+  // A new card takes the focus while nobody is typing: the focus is on
+  // the page or an empty composer. Checked after the caller is done, so a
+  // card drawn already answered (the history replay) never takes it.
+  function focusWhenIdle(card, id) {
+    queueMicrotask(() => {
+      if (questionEl !== card || String(pending?.id) !== String(id)) return;
+      const prompt = doc.getElementById?.("prompt");
+      const active = doc.activeElement;
+      const idle = !active || active === doc.body || (active === prompt && !prompt.value);
+      if (!idle || (prompt && prompt.value)) return;
+      const target = card.querySelector(".question-option input") || card.querySelector(".question-freeform");
+      target?.focus();
+    });
   }
 
   // The step-limit question's actions: a button per option (Continue,
@@ -263,7 +302,7 @@ export function createQuestionCards({
     if (view.preview) {
       const diff = doc.createElement("div");
       diff.className = "approval-diff";
-      diff.innerHTML = diffHtml(view.preview);
+      render(diffTemplate(view.preview), diff);
       box.appendChild(diff);
     }
     for (const [cls, label, text] of [["approval-where", "in", view.where], ["approval-why", "why", view.why]]) {
@@ -358,6 +397,23 @@ export function createQuestionCards({
     // unless the user opened or closed it by hand.
     const summary = questionEl.querySelector("summary");
     if (summary) summary.textContent = summaryText(pending, { answer, cancelled, reason });
+    // The reply that asked, kept with the card: what made the question
+    // answerable stays with it in the history. Muted under the "Q → A" line
+    // in two lines while the card is closed (a copy screen readers skip: not
+    // the toggle's label), 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);
+    if (summary && asked) {
+      const line = doc.createElement("div");
+      line.className = "question-said";
+      line.setAttribute("aria-hidden", "true");
+      line.textContent = asked;
+      summary.appendChild(line);
+      const full = doc.createElement("div");
+      full.className = "question-said-full";
+      full.textContent = asked;
+      questionEl.insertBefore(full, summary.nextSibling);
+    }
     // 4.02: a reopened card's summary already carries the result (the
     // snapshot re-renders it resolved), and the body line repeats it. It
     // stays for a hand-toggled card, whose expanded body the user looks at,

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

@@ -1,10 +1,10 @@
-// A read row's output as the file's lines, numbered, apart from the DOM.
+// A read row's output as the file's lines, numbered (a lit-html template).
 // Only when the output is the file text as-is: each numbered line is a
 // ref's line (refs.js opens the row's file there). The row's preview
 // (turn_html.js) strips any "[tag] " and cuts at 300 chars; numbering
 // needs the text exactly as read, so it is drawn on its own, closed.
 
-import { escapeHtml } from "./format.js";
+import { html, nothing } from "./vendor/lit-html.js";
 
 // What follows one of these isn't the file's next line: a ToolRunner cap
 // ("[cut: …]"), a head/tail preview's gap ("[... omitted …]") or the note
@@ -58,19 +58,20 @@ export function readLines(row) {
   return out;
 }
 
-// A read row's numbered lines behind a closed toggle ("lines 40–60"); ""
-// when its output isn't the file as-is.
-export function readLinesHtml(row) {
+// A read row's numbered lines behind a closed toggle ("lines 40–60");
+// nothing when its output isn't the file as-is. lit never binds its open:
+// a user's toggle stays across a redraw.
+export function readLinesTemplate(row) {
   const lines = readLines(row);
   const numbered = lines?.filter((l) => l.line !== null) || [];
-  if (!numbered.length) return "";
+  if (!numbered.length) return nothing;
   const first = numbered[0].line;
   const last = numbered.at(-1).line;
   const label = first === last ? `line ${first}` : `lines ${first}–${last}`;
   // A blank line of the file holds no text, only a <br>: an empty block
   // drops out of a copied selection, a space would be copied as one.
   const spans = lines.map(({ text, line }) => line === null
-    ? `<span class="read-line read-meta">${escapeHtml(text)}</span>`
-    : `<span class="read-line" data-line="${line}">${escapeHtml(text) || "<br>"}</span>`).join("");
-  return `<details class="activity-read"><summary>${label}</summary><pre class="read-lines"><code>${spans}</code></pre></details>`;
+    ? html`<span class="read-line read-meta">${text}</span>`
+    : html`<span class="read-line" data-line=${line}>${text || html`<br>`}</span>`);
+  return html`<details class="activity-read"><summary>${label}</summary><pre class="read-lines"><code>${spans}</code></pre></details>`;
 }

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

@@ -12,10 +12,12 @@ const HIDE_MS = 300;
 const EDGE = 8;
 // The ▾ sits in room its ref makes after itself while it shows
 // (data-ref-more, index.html), so it never covers what follows the ref:
-// the next words of an answer, a row's duration.
+// the next words of an answer, a row's duration. A ref that room would
+// push onto the next line (it ends its line: nothing follows it there)
+// makes none (data-ref-more="end"), and the ▾ goes just past its end.
 
 // +doc+'s ▾ and menu. open(el, items, {focus}) shows +items+ ({id, label,
-// run}) under +el+; showMore(el, onOpen) puts the ▾ after +el+, whose click
+// hint?, run}; the hint is the item's hover: a URL action's URL) under +el+; showMore(el, onOpen) puts the ▾ after +el+, whose click
 // calls +onOpen+; hideMoreSoon(el) takes it away unless the pointer reaches
 // it; close({refocus}) closes the menu.
 export function createRefMenu(doc = globalThis.document) {
@@ -56,12 +58,17 @@ export function createRefMenu(doc = globalThis.document) {
     if (moreFor && moreFor !== el) delete moreFor.dataset.refMore;
     moreFor = el;
     onMore = onOpen;
-    el.dataset.refMore = "";
+    const before = el.dataset.refMore === undefined ? lastRect(el) : null;
+    if (el.dataset.refMore === undefined) el.dataset.refMore = "";
+    let rect = lastRect(el);
+    if (before && wrapped(before, rect)) {
+      el.dataset.refMore = "end";
+      rect = lastRect(el);
+    }
     button.hidden = false;
-    const rect = lastRect(el);
     const width = button.offsetWidth || 16;
     const top = rect.top + (rect.height - (button.offsetHeight || rect.height)) / 2;
-    const left = rect.right - width - 1;
+    const left = el.dataset.refMore === "end" ? rect.right + 2 : rect.right - width - 1;
     button.style.left = `${Math.min(left, win.innerWidth - width - 2)}px`;
     button.style.top = `${top}px`;
   }
@@ -96,6 +103,7 @@ export function createRefMenu(doc = globalThis.document) {
       button.tabIndex = -1;
       button.dataset.target = item.id;
       button.textContent = item.label;
+      if (item.hint) button.title = item.hint;
       button.addEventListener("click", (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -190,6 +198,11 @@ export function createRefMenu(doc = globalThis.document) {
 
 // The ref's last line box (a ref wrapped over two lines ends on the
 // second); its whole box when it has none.
+// The room moved the ref's last box onto another line.
+function wrapped(before, after) {
+  return Math.abs(after.top - before.top) > before.height / 2;
+}
+
 function lastRect(el) {
   const rects = el.getClientRects?.() || [];
   return rects.length ? rects[rects.length - 1] : el.getBoundingClientRect();

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

@@ -10,7 +10,8 @@
 // bound to its element by bindRef: its label and its URL actions live in a
 // WeakMap off the DOM, and refTarget reads them first. Its actions join the
 // kind's own (the `actions` entry); a kind the page has no table for runs
-// only those.
+// only those. A plugin tool's row (its +refs+, bindRowRefs) puts its first
+// ref on the title and the others in the title's menu (the `more` entry).
 // A plain click runs the first one available (the main target); a ref
 // with more shows a ▾ on hover that opens a menu of all of them
 // (ref_menu.js), and a tap opens it. A ref with a target is a tab stop
@@ -74,20 +75,61 @@ export function httpUrl(url) {
 // nothing. A rebind replaces the target attributes. +el+, or null without one.
 export function bindRef(el, ref) {
   if (!el) return null;
-  if (!refKindOk(ref?.kind)) return el;
-  const target = ref.target || {};
+  const clean = cleanRef(ref);
+  if (!clean) return el;
+  const { target } = clean;
   el.classList.add("ref");
-  el.dataset.refKind = ref.kind;
+  el.dataset.refKind = clean.kind;
   for (const [name, value] of [["refPath", target.path], ["refLine", target.line], ["refEndLine", target.end_line]]) {
     if (value) el.dataset[name] = String(value);
     else delete el.dataset[name];
   }
+  REF_DATA.set(el, { ...clean, more: [] });
+  return el;
+}
+
+// +ref+ (the server's Ref#to_h) as the page keeps it: {kind, target,
+// label, actions}, its actions only those with an id, a label and an
+// http(s) URL; null for a kind the server's Ref refuses.
+function cleanRef(ref) {
+  if (!refKindOk(ref?.kind)) return null;
+  const target = ref.target && typeof ref.target === "object" ? ref.target : {};
   const actions = (Array.isArray(ref.actions) ? ref.actions : []).flatMap((action) => {
     const url = httpUrl(action?.url);
     return url && action.id && action.label ? [{ id: String(action.id), label: String(action.label), url }] : [];
   });
-  REF_DATA.set(el, { kind: ref.kind, target, label: ref.label || null, actions });
-  return el;
+  return { kind: ref.kind, target, label: ref.label ? String(ref.label) : null, actions };
+}
+
+// A tool row's refs: a plugin tool's (the events' and the reloaded part's
+// +refs+, the server's RowRefs: Ref#to_h each) that bindRef binds, after
+// the row's own (a file tool's +ref+, as a Ref) when it has one.
+function rowRefsOf(row) {
+  const own = row?.ref?.kind ? [{ kind: row.ref.kind, target: { path: row.ref.path, line: row.ref.line, end_line: row.ref.end_line } }] : [];
+  return [...own, ...(Array.isArray(row?.refs) ? row.refs : [])].map(cleanRef).filter(Boolean);
+}
+
+// The ref a tool row's title carries in its markup (turn_html.js, refAttrs'
+// shape: {kind, path?, line?, end_line?}): the row's own, else its first
+// plugin ref; null for none.
+export function rowTitleRef(row) {
+  const [first] = rowRefsOf(row);
+  return first ? { kind: first.kind, path: first.target.path, line: first.target.line, end_line: first.target.end_line } : null;
+}
+
+// Binds a tool row's refs to its title (the element turn_html.js drew from
+// +row+, live or reloaded; again after each redraw): the first as bindRef
+// does, the others the title's menu offers (D8). Only for a row with a
+// plugin ref: a file tool's row needs no binding (its attributes are its
+// ref). The title, or null.
+export function bindRowRefs(rowEl, row) {
+  const title = rowEl?.querySelector?.(":scope > .activity-params[data-ref-kind]");
+  if (!title || !Array.isArray(row?.refs) || !row.refs.length) return null;
+  const [first, ...more] = rowRefsOf(row);
+  if (!first) return null;
+  bindRef(title, first);
+  REF_DATA.get(title).more = more;
+  return title;
 }
 
 // The plugin ref bound to +el+ (bindRef's data), or null: a row title or
@@ -146,6 +188,51 @@ const URL_ACTIONS = Object.freeze({
     })),
 });
 
+// A short name for a ref in a menu of several: its label, else its id,
+// else its file's name (and line).
+function refName(ref) {
+  if (ref.label) return ref.label;
+  if (ref.target.id != null) return String(ref.target.id);
+  const name = String(ref.target.path || "").split("/").pop();
+  return ref.target.line ? `${name}:${ref.target.line}` : name;
+}
+
+// A row's other refs (bindRowRefs: all but the first), after the title's
+// own targets: each one's actions, named "<ref> · <action>", for every
+// viewer, and a file's editor (where the editor opens). A URL the menu
+// already has (the link's, an action's, an earlier one's) isn't repeated.
+const MORE_REFS = Object.freeze({
+  id: "more",
+  expand(target) {
+    const seen = new Set([target.href, ...(target.actions || []).map((action) => action.url)].map(httpUrl).filter(Boolean));
+    return (target.more || []).flatMap((ref, at) => {
+      const name = refName(ref);
+      const items = [];
+      if (ref.kind === "file" && ref.target.path) {
+        items.push(Object.freeze({
+          id: `more:${at}:editor`,
+          label: () => `${name} · Open in editor`,
+          available: (viewer, target) => !target.isLine && viewer?.editor === true && !!viewer.editorUrl,
+          run: (_target, viewer, env) => env.open(editorUrl(viewer.editorUrl, ref.target.path, ref.target.line)),
+          hint: () => `Open the current file in your editor${ref.target.line ? ` at line ${ref.target.line}` : ""}`,
+        }));
+      }
+      for (const action of ref.actions) {
+        if (seen.has(action.url)) continue;
+        seen.add(action.url);
+        items.push(Object.freeze({
+          id: `more:${at}:${action.id}`,
+          label: () => `${name} · ${action.label}`,
+          available: (_viewer, target) => !target.isLine,
+          run: (_target, _viewer, env) => env.openLink(action.url),
+          hint: () => action.url,
+        }));
+      }
+      return items;
+    });
+  },
+});
+
 export const REF_ACTIONS = Object.freeze({
   file: Object.freeze([
     LINK,
@@ -171,6 +258,7 @@ export const REF_ACTIONS = Object.freeze({
       run: (target, _viewer, env) => env.show(target),
       hint: () => "Show the row that touched it in the turn",
     }),
+    MORE_REFS,
     Object.freeze({
       id: "copy",
       label: () => "Copy path",
@@ -179,8 +267,9 @@ export const REF_ACTIONS = Object.freeze({
       run: (target, _viewer, env) => env.copy(target.path),
     }),
   ]),
-  // Any other kind (a plugin's issue, commit, …): its link, then its actions.
-  "*": Object.freeze([LINK, URL_ACTIONS]),
+  // Any other kind (a plugin's issue, commit, …): its link, then its
+  // actions, then a row's other refs.
+  "*": Object.freeze([LINK, URL_ACTIONS, MORE_REFS]),
 });
 
 // The targets +viewer+ has for +target+ (refTarget's), in order; none
@@ -201,8 +290,9 @@ const OWNERS = ".activity-row, .bubble.approval";
 // A line of the owner's file: a diff line, or a read row's numbered line.
 const LINES = ".diff-line[data-line], .read-line[data-line]";
 
-// What a click on +el+ points at: {kind, path, id, label, actions, line,
-// owner, el, isLine, href} or null (+id+, +label+ and +actions+ a plugin's
+// What a click on +el+ points at: {kind, path, id, label, actions, more,
+// line, owner, el, isLine, href} or null (+id+, +label+, +actions+ and
+// +more+ (a row's other refs, bindRowRefs) a plugin's
 // ref's, bindRef: the WeakMap is read first). A row title (or an approval card's path) opens its file
 // at the lines the call named (an edit without any at its first changed
 // line); a diff line (or a hunk header) or a read row's numbered line, in
@@ -226,11 +316,12 @@ export function refTarget(el) {
 
 function targetOf(el) {
   const data = REF_DATA.get(el);
-  if (!data) return { kind: el.dataset.refKind, path: el.dataset.refPath || "", line: Number(el.dataset.refLine) || null, id: null, label: null, actions: [] };
+  if (!data) return { kind: el.dataset.refKind, path: el.dataset.refPath || "", line: Number(el.dataset.refLine) || null, id: null, label: null, actions: [], more: [] };
   // Bound data is the whole ref: no fallback to the attributes.
   const { target } = data;
   return {
     kind: data.kind, path: target.path || "", line: Number(target.line) || null, id: target.id ?? null, label: data.label, actions: data.actions,
+    more: data.more,
   };
 }
 
@@ -303,19 +394,24 @@ function lineIn(row, line) {
 // (the turn's steps, its step), its diff (or the read that shows the
 // line), scrolls to the line (else the row) and flashes both. A view that
 // hides its rows its own way (the stage's cloud) opens on the row's
-// ref:reveal event, which bubbles. The row, or null when there is none.
+// ref:reveal event, which bubbles; a view that grows for it first sets the
+// event's detail.until (a promise), and the scroll waits for it. The row,
+// or null when there is none.
 export function showInTurn(target, { behavior = smoothScroll() } = {}) {
   const row = turnRowFor(target);
   if (!row) return null;
   const view = row.ownerDocument.defaultView || globalThis;
-  row.dispatchEvent(new view.CustomEvent("ref:reveal", { bubbles: true }));
+  const reveal = new view.CustomEvent("ref:reveal", { bubbles: true, detail: {} });
+  row.dispatchEvent(reveal);
   const line = target.line ? lineIn(row, target.line) : null;
   const fold = line?.closest("details.activity-diff, details.activity-read") || row.querySelector("details.activity-diff");
   for (let details = (line || fold || row).closest("details"); details; details = details.parentElement?.closest("details")) {
     details.open = true;
   }
   if (fold) fold.open = true;
-  (line || row).scrollIntoView?.({ block: "center", behavior });
+  const scroll = () => (line || row).scrollIntoView?.({ block: "center", behavior });
+  if (reveal.detail?.until) reveal.detail.until.then(scroll);
+  else scroll();
   for (const el of [row, line].filter(Boolean)) flash(el);
   return row;
 }
@@ -365,7 +461,9 @@ export function installRefClicks(root, viewer, {
 } = {}) {
   const env = { open, openLink, show, copy };
   const run = (action, target) => action.run(target, viewer(), env);
-  const items = (actions, target) => actions.map((action) => ({ id: action.id, label: action.label(target), run: () => run(action, target) }));
+  const items = (actions, target) => actions.map((action) => ({
+    id: action.id, label: action.label(target), hint: action.hint?.(target) || "", run: () => run(action, target),
+  }));
   const openMenu = (target, actions, options) => menu.open(target.el, items(actions, target), options);
   // The last pointer's type: a tap opens the menu, a mouse click runs the
   // main target.

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

@@ -1,6 +1,7 @@
 // The page's scope: ?dir=<folder> shows that folder's project (`chi web` in
 // a repo opens it so); no dir shows every session. The hash routes
 // (#/s/<id>, #/sessions) work in either.
+import { html, nothing } from "./vendor/lit-html.js";
 
 // The ?dir= folder in a location.search string, or null.
 export function scopeDir(search) {
@@ -43,3 +44,25 @@ export function cardFolder(workingDirectory, projectName) {
   if (!folder) return "";
   return folder === projectName ? "" : folder;
 }
+
+// The header's scope chip: "<project> · all" in a project view (all links
+// to the same place without ?dir); "all projects" otherwise, with a link
+// back to the project it came from and where a new chat starts on the
+// start page. +scope+: { dir, projectName, projectDir, serverDir, backDir,
+// backName }; +error+: why the ?dir= folder can't be shown; +where+:
+// () => { hash, search } (the page's location, read again at a click: the
+// links follow an open session or the all-sessions view).
+export function scopeTemplate(scope, { error = null, where = () => ({ hash: "", search: "" }) } = {}) {
+  const at = where();
+  const allHref = () => allScopeHref(where().hash, scope.dir, where().search);
+  const all = html`<a class="scope-all" href=${allScopeHref(at.hash, scope.dir, at.search)} title=${"Sessions of every project"} @click=${(e) => { e.currentTarget.href = allHref(); }}>all</a>`;
+  if (error) return html`<span class="scope-name error" title=${error}>folder not found</span>${all}`;
+  if (scope.projectName) return html`<span class="scope-name" title=${`Sessions of ${scope.projectDir}`}>${scope.projectName}</span>${all}`;
+  const dir = scope.dir || scope.serverDir;
+  const backHref = () => projectScopeHref(scope.backDir, where().hash, where().search);
+  const back = scope.backName
+    ? html`<a class="scope-all scope-back" href=${projectScopeHref(scope.backDir, at.hash, at.search)} title=${`Sessions of ${scope.backName} only`} @click=${(e) => { e.currentTarget.href = backHref(); }}>← ${scope.backName}</a>`
+    : nothing;
+  const newChat = dir ? html`<span class="scope-where" title=${`New chats start in ${dir}`}>new chat in<span class="path"><bdi>${dir}</bdi></span></span>` : nothing;
+  return html`<span class="scope-name" title="Sessions of every project">all projects</span>${back}${newChat}`;
+}

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

@@ -22,3 +22,45 @@ export function keepFollowing(el, mutate, thresholdPx = SCROLL_FOLLOW_PX) {
   if (follow) el.scrollTop = el.scrollHeight;
   return result;
 }
+
+// A follow that eases instead of jumping: +el+'s scrollTop goes to +top+
+// over +ms+ (ease-out), +el+ marked data-following meanwhile (a layout
+// watcher reads that as a follow, not a jump). +top+ may be a function,
+// read each frame (a target that moves on: the history's end while its
+// bottom reserve eases). With +reduce+ (prefers-reduced-motion) it jumps.
+// A newer call on the same element takes over. Resolves when it is there.
+export const FOLLOW_MS = 180;
+const easing = new WeakMap();
+export function easeScrollTo(el, top, { ms = FOLLOW_MS, reduce = false, raf = (fn) => requestAnimationFrame(fn), now = () => performance.now() } = {}) {
+  const target = () => (typeof top === "function" ? top() : top);
+  easing.get(el)?.stop();
+  if (reduce || ms <= 0) {
+    el.scrollTop = target();
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    const from = el.scrollTop;
+    const start = now();
+    let done = false;
+    const run = { stop: () => finish() };
+    function finish() {
+      if (done) return;
+      done = true;
+      if (easing.get(el) === run) {
+        easing.delete(el);
+        delete el.dataset.following;
+      }
+      resolve();
+    }
+    easing.set(el, run);
+    el.dataset.following = "";
+    const step = () => {
+      if (done) return;
+      const t = Math.min(1, (now() - start) / ms);
+      el.scrollTop = from + (target() - from) * (1 - (1 - t) ** 3);
+      if (t < 1) raf(step);
+      else finish();
+    };
+    raf(step);
+  });
+}

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

@@ -6,6 +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";
 
 const READ_LIKE = new Set(["read", "memory_read", "web_fetch", "task_get", "task_list", "list_sessions"]);
 const EDITS = new Set(["edit", "write", "memory_write"]);
@@ -150,11 +151,15 @@ const NO_ANSWER = "no answer";
 //            ended (nothing happens now);
 //   trail    the last three finished calls, newest last (a file's title
 //            without its dir; command as for tool);
-//   ticks    one per call: {kind, status, step (the gen's index)}.
-// +pending+: a card waits for the user; +ended+: the turn's end kind;
+//   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.
+// +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;
 // +emptyAnswer+: a completed turn ended with no answer
 // (turn_summary.empty_answer), so it reads "no answer", not "answered".
-export function liveSlots(turn, { narration = "", thinking = "", pending = false, ended = null, emptyAnswer = false } = {}) {
+export function liveSlots(turn, { narration = "", thinking = "", pending = false, blocked = false, ended = null, emptyAnswer = false } = {}) {
   const gens = turn?.gens || [];
   const rows = gens.flatMap((gen, step) => gen.tools.map((row) => ({ row, step })));
   const running = [...rows].reverse().find(({ row }) => row.status === "running")?.row || null;
@@ -182,9 +187,23 @@ export function liveSlots(turn, { narration = "", thinking = "", pending = false
     tool: running ? withTask(withCommand({ name: toolName(running), title: rowTitle(running), kind: toolKind(running.tool) }, running), running) : null,
     trail,
     ticks: rows.map(({ row, step }) => ({ kind: toolKind(row.tool), status: row.status, step })),
+    asking: blocked && !ended ? askingText(turn) : "",
   };
 }
 
+// The stage's frame height (px) while it holds a turn: grow-only, so a
+// content change inside it (the plain flip, an answered card, a short
+// answer) never moves its top edge. +natural+: its content's own height;
+// +held+: the height it holds (null: none yet); +cap+: --stage-max. A lower
+// cap (a phone's keyboard) clamps it at once and the clamp is the new held
+// height: a cap that rises again doesn't bring the old one back, only new
+// content grows it. null: no frame (not holding a turn, or collapsed to
+// its status row): the content's own height.
+export function frameTarget({ natural, held, cap, holding, collapsed }) {
+  if (!holding || collapsed) return null;
+  return Math.min(Math.max(natural, held ?? 0), cap);
+}
+
 // In use: the pointer over the stage, focus or a selection in it, or a
 // touch/wheel/scroll in it within TOUCH_MS.
 export function inUseFrom({ pointerIn, lastTouchMs, focusInside, selectionInside, nowMs }) {