moontide-mcp 2.0.2 → 2.2.0

package/page/page-rewrite.js

@@ -0,0 +1,184 @@
+// The one path through which the page itself changes the code: a Mixer move, a part launch, a grid
+// gesture. It runs the guards in a fixed order, writes the new text and checks the write, makes one
+// evaluation and, when that fails, sets the editor back and shows the failed-change banner through the
+// same helper every other failure uses. Each caller keeps its own wording for a refusal and sends its own
+// message to the server; this module only decides whether the text may change and whether it played.
+// No DOM access at import time and every dependency injected, so node:test can import it with fakes.
+
+import { parseTiming } from './change-timing.js';
+
+// The reasons a change is refused before anything is written. A refusal never touches the editor, except
+// write-mismatch, which sets the editor back to the text it had before the write.
+export const PAGE_REWRITE_REFUSALS = Object.freeze(['not-played', 'waiting', 'closed', 'no-parser', 'dirty', 'write-mismatch']);
+
+// The guards, in the order they run. Each one is on unless the request turns it off.
+const GUARD_KEYS = Object.freeze(['played', 'waiting', 'socket', 'parser', 'dirty']);
+
+const WRITES = Object.freeze(['dispatch', 'replace']);
+
+const DEP_FUNCTIONS = Object.freeze([
+  'hasEvaluated',
+  'pending',
+  'playingCode',
+  'socketOpen',
+  'parserReady',
+  'evaluate',
+  'evalError',
+  'revertAndReport',
+  'markPageOrigin',
+  'whenFinished',
+  'markPageOriginAtTakeover',
+]);
+
+function refused(reason) {
+  return Object.freeze({ status: 'refused', reason });
+}
+
+/**
+ * Builds the page's rewrite path around its dependencies:
+ *   editor { code, setCode(text), dispatch(edits) }: the text the user sees; dispatch applies a list of
+ *     { from, to, insert } edits in the coordinates of the text before the write, keeping selection and scroll,
+ *   hasEvaluated() -> true once some code has played, pending() -> the waiting change or null,
+ *   playingCode() -> the code that plays now, socketOpen() -> true while the server socket is open,
+ *   parserReady() -> true when the code parser is loaded,
+ *   evaluate({ code, timing, autostart, flash }) -> promise of the run ({ timing, deferred, ... }); flash true
+ *     evaluates through the editor (it flashes), flash false through the repl directly,
+ *   evalError() -> the evaluation's error or null,
+ *   revertAndReport(error) -> { errorText, line }: sets the editor back to the committed code and shows the banner,
+ *   markPageOrigin() -> the playing code now has no Claude evaluate id,
+ *   whenFinished(record, fn) -> runs fn when the waiting change takes over; never when it is canceled (replaced or stopped),
+ *   markPageOriginAtTakeover() -> the same mark, for the moment a waiting change takes over.
+ */
+export function createPageRewrite(deps) {
+  if (deps === null || typeof deps !== 'object') {
+    throw new Error('Moontide: createPageRewrite needs its dependencies.');
+  }
+  const editor = deps.editor;
+  if (
+    editor === null ||
+    typeof editor !== 'object' ||
+    typeof editor.setCode !== 'function' ||
+    typeof editor.dispatch !== 'function' ||
+    !('code' in editor)
+  ) {
+    throw new Error('Moontide: createPageRewrite needs an editor with code, setCode and dispatch.');
+  }
+  for (const name of DEP_FUNCTIONS) {
+    if (typeof deps[name] !== 'function') {
+      throw new Error(`Moontide: createPageRewrite needs the function ${name}.`);
+    }
+  }
+
+  function readGuards(guards) {
+    const on = {};
+    for (const key of GUARD_KEYS) on[key] = true;
+    if (guards === undefined) return on;
+    if (guards === null || typeof guards !== 'object' || Array.isArray(guards)) {
+      throw new Error('Moontide: the guards of a page rewrite are an object.');
+    }
+    for (const [key, value] of Object.entries(guards)) {
+      if (!GUARD_KEYS.includes(key)) {
+        throw new Error(`Moontide: unknown guard '${key}' in a page rewrite (expected one of ${GUARD_KEYS.join(', ')}).`);
+      }
+      if (typeof value !== 'boolean') {
+        throw new Error(`Moontide: the guard '${key}' of a page rewrite is true or false.`);
+      }
+      on[key] = value;
+    }
+    return on;
+  }
+
+  /**
+   * Applies one change to the code. See the request fields below; resolves one of
+   *   { status: 'played', code, run, edits }  the text that was evaluated; run.deferred is the waiting change
+   *       when the change waits for its line, else null,
+   *   { status: 'unchanged', code }  the build left the text as it was and the request did not ask to evaluate it,
+   *   { status: 'refused', reason }  one of PAGE_REWRITE_REFUSALS; nothing was written,
+   *   { status: 'failed', errorText, line }  the evaluation failed; the editor is already set back and the banner shown.
+   *
+   * Request:
+   *   build(base) -> { code, edits }: the new text; edits is a list of { from, to, insert } in the coordinates of
+   *     base for write 'dispatch' and may be null for write 'replace'. An error it throws reaches the caller as it is.
+   *   base: the text the build starts from and the dirty guard compares with the editor (default: the playing code).
+   *   timing: a parsed timing (default: at once). autostart: only used when flash is false (default true).
+   *   flash: evaluate through the editor, which flashes (default false).
+   *   write: 'dispatch' (default) changes the text by edits and checks the result; 'replace' sets the whole text.
+   *   guards: any of played, waiting, socket, parser, dirty set to false to leave that guard out.
+   *   evaluateUnchanged: also evaluate when the build left the text as it was (default false).
+   */
+  async function apply(request) {
+    if (request === null || typeof request !== 'object' || typeof request.build !== 'function') {
+      throw new Error('Moontide: a page rewrite needs a build function.');
+    }
+    const write = request.write === undefined ? 'dispatch' : request.write;
+    if (!WRITES.includes(write)) {
+      throw new Error(`Moontide: unknown write '${String(request.write)}' in a page rewrite (expected one of ${WRITES.join(', ')}).`);
+    }
+    const guards = readGuards(request.guards);
+    const timing = request.timing === undefined ? parseTiming('now') : request.timing;
+    const autostart = request.autostart === undefined ? true : request.autostart;
+    const flash = request.flash === true;
+    const evaluateUnchanged = request.evaluateUnchanged === true;
+
+    if (guards.played && !deps.hasEvaluated()) return refused('not-played');
+    if (guards.waiting && deps.pending() !== null) return refused('waiting');
+    if (guards.socket && !deps.socketOpen()) return refused('closed');
+    if (guards.parser && !deps.parserReady()) return refused('no-parser');
+    const base = request.base === undefined ? deps.playingCode() : request.base;
+    if (guards.dirty && editor.code !== base) return refused('dirty');
+
+    const built = request.build(base);
+    if (built === null || typeof built !== 'object' || typeof built.code !== 'string') {
+      throw new Error('Moontide: the build of a page rewrite must return { code, edits }.');
+    }
+    const code = built.code;
+    const edits = Array.isArray(built.edits) ? built.edits : null;
+    if (code === base && !evaluateUnchanged) {
+      return Object.freeze({ status: 'unchanged', code });
+    }
+
+    if (write === 'dispatch') {
+      if (edits === null && code !== base) {
+        throw new Error('Moontide: a page rewrite that writes by edits needs an edit list from its build.');
+      }
+      if (edits !== null && edits.length > 0) editor.dispatch(edits);
+      if (editor.code !== code) {
+        editor.setCode(base);
+        return refused('write-mismatch');
+      }
+    } else {
+      editor.setCode(code);
+    }
+
+    let run;
+    try {
+      run = await deps.evaluate({ code, timing, autostart, flash });
+    } catch (err) {
+      // The evaluation itself threw (not a program error, which is read from evalError below): nothing is armed, so the
+      // text written above would sit in the editor as typing that was never evaluated. It is taken back, unless the
+      // person typed over it meanwhile; the error goes on to the caller, marked `restored` when the editor holds the base
+      // text again, so the caller can say the code is as it was.
+      if (code !== base && editor.code === code) editor.setCode(base);
+      if (editor.code === base && err !== null && typeof err === 'object' && Object.isExtensible(err)) err.restored = true;
+      throw err;
+    }
+    if (run === null || typeof run !== 'object') {
+      throw new Error('Moontide: the evaluation of a page rewrite must give back its run.');
+    }
+    const evalError = deps.evalError();
+    if (evalError) {
+      const { errorText, line } = deps.revertAndReport(evalError);
+      return Object.freeze({ status: 'failed', errorText, line });
+    }
+    // A change the page makes by itself has no Claude evaluate id: at once when it plays at once, otherwise at
+    // the moment it takes over (the old code, and its id, keep playing until then).
+    if (run.deferred === null || run.deferred === undefined) {
+      deps.markPageOrigin();
+    } else {
+      deps.whenFinished(run.deferred, deps.markPageOriginAtTakeover);
+    }
+    return Object.freeze({ status: 'played', code, run, edits });
+  }
+
+  return Object.freeze({ apply });
+}

package/page/query-check.js

@@ -80,8 +80,13 @@ export function captureQueryTypes(kept, globals) {
  *   `onReached` when the gate first queries past the line, because the old music that keeps playing must
  *   not have its errors forwarded a second time and the new pattern's first errors must still count.
  *   `getPlayingCode()` gives the code that plays now, for the waiting record.
+ *
+ * `refuse`, when given, is asked first, for every value handed over, before the pattern is checked or installed: when it
+ * returns a text, setPattern throws an Error with that text. This is the one seam where a change can be refused for
+ * something only the finished program knows (the tempo it set) and still fail the evaluation before the new pattern or a
+ * waiting record exists: the scheduler's pattern and any waiting change stay as they were.
  */
-export function installQueryCheck(scheduler, { getTypes, queryErrors, schedulerQueries, takeover, getPlayingCode }) {
+export function installQueryCheck(scheduler, { getTypes, queryErrors, schedulerQueries, takeover, getPlayingCode, refuse }) {
   const originalSetPattern = scheduler.setPattern;
   if (typeof originalSetPattern !== 'function') {
     throw new Error('Moontide: the scheduler of the pinned @strudel/repl 1.3.0 has no setPattern function.');
@@ -103,6 +108,10 @@ export function installQueryCheck(scheduler, { getTypes, queryErrors, schedulerQ
     return result;
   }
   scheduler.setPattern = function (pattern, autostart) {
+    if (typeof refuse === 'function') {
+      const refusal = refuse();
+      if (typeof refusal === 'string') throw new Error(refusal);
+    }
     // The repl's own handling of a value that is not a pattern stays as before (a waiting change is replaced too).
     if (pattern === null || pattern === undefined || typeof pattern.query !== 'function') {
       queryErrors.reset();
@@ -154,8 +163,11 @@ export function installQueryCheck(scheduler, { getTypes, queryErrors, schedulerQ
  * to `onError` as the bundle's log text (`[query] error: <message>`), then return no events as the
  * bundle does. Every other query keeps the bundle's own `queryArc`, whose log the page ignores.
  * `getTypes()` gives { State, TimeSpan }.
+ * `onSchedulerQuery`, when given, is called once on each of the scheduler's own queries, before the query runs (it is the
+ * tempo ramp's way to learn that the scheduler is playing). It is the scheduler's slice that calls it, so a throw is
+ * caught here, logged as one `Moontide:` line and never reaches the scheduler.
  */
-export function createSchedulerQueryScope({ getTypes, onError }) {
+export function createSchedulerQueryScope({ getTypes, onError, onSchedulerQuery }) {
   const wrapped = new WeakSet();
   return {
     wrap(pattern) {
@@ -169,6 +181,13 @@ export function createSchedulerQueryScope({ getTypes, onError }) {
         if (controls === null || typeof controls !== 'object' || typeof controls.cyclist !== 'string') {
           return original.call(this, begin, end, controls);
         }
+        if (typeof onSchedulerQuery === 'function') {
+          try {
+            onSchedulerQuery();
+          } catch (err) {
+            console.error('Moontide: the hook on the scheduler query failed:', err);
+          }
+        }
         const { State, TimeSpan } = getTypes();
         try {
           return this.query(new State(new TimeSpan(begin, end), controls));

package/page/request-status-view.js

@@ -0,0 +1,419 @@
+// The Requests chip in the top bar and the panel under it: one row per request the user sent, with the start of
+// its text, the elapsed time and the words of its state; a row opens to a detail under it, and finished requests
+// move to a folded Recent group. Every text reaches the page through textContent, title and setAttribute, never as
+// markup: a request and Claude's words are untrusted. The view never decides anything: page/request-status.js holds
+// the rows and their rules, page/main.js gives the view the model after every change. No DOM access at import
+// time: main.js calls createRequestStatusView() with its document.
+//
+// The panel is non-modal and pushes nothing: it overlays the page under the bar's right end. It opens by itself
+// when the user sends a request and never moves focus when it does; it folds by itself only when it opened by
+// itself, nothing is in flight and the last finished row has moved to Recent, unless the pointer is over it. Any
+// action of the user (opening it with the chip, opening a detail, putting focus inside) makes it the user's, and
+// then it stays until the user folds it. Esc on the chip or inside the panel folds it and gives focus back to the
+// chip; a click elsewhere does nothing. A text is written only when it changed, so a repeated draw writes nothing
+// and a focused row keeps its focus. Nothing animates.
+
+import { FINISHED_SHOWN_MS, REQUEST_STATUS_COPY, joinLive } from './request-status.js';
+
+/** The elapsed time and a counting phrase step once a second. */
+export const TICK_MS = 1000;
+
+/** The spoken line is written at most once in this long; what arrives in between is joined. */
+export const LIVE_EVERY_MS = 1000;
+
+function fill(template, values) {
+  return template.replace(/\{(\w+)\}/g, (_, key) => String(values[key]));
+}
+
+/**
+ * Creates the view. `document` is the page's document (named so on purpose: every element lookup below reads
+ * `document.getElementById`, the shape test/page-hidden.test.js scans). `now`, `setTimer` and `clearTimer` are the
+ * page's clock. `onOpen` runs right before the panel opens (main.js closes the Session drawer there, because the
+ * two never show together). `onHold(id, held)` says a row is under the pointer, has focus or has its detail open,
+ * so the tracker keeps a finished row where it is. `takeLive()` gives the sentences to speak since the last call;
+ * `getModel()` gives the tracker's model again each second, for the elapsed time.
+ */
+export function createRequestStatusView({
+  document,
+  now = () => Date.now(),
+  setTimer = (fn, ms) => setTimeout(fn, ms),
+  clearTimer = (timer) => clearTimeout(timer),
+  onOpen = () => {},
+  onHold = () => {},
+  takeLive = () => [],
+  getModel = null,
+}) {
+  const toggle = document.getElementById('requests-toggle');
+  const panel = document.getElementById('requests-panel');
+  const live = document.getElementById('requests-live');
+  if (!toggle || !panel || !live) {
+    throw new Error('Moontide: the Requests markup is missing from the page.');
+  }
+  const word = toggle.querySelector('.rq-word');
+  const count = toggle.querySelector('.rq-count');
+  if (!word || !count) {
+    throw new Error('Moontide: the Requests markup is missing from the page.');
+  }
+  // The spoken line is the one live region of the feature: it must be there and speak, so a hidden one is a mistake.
+  if (live.hasAttribute('hidden')) {
+    throw new Error('Moontide: the Requests live region must never be hidden.');
+  }
+
+  word.textContent = REQUEST_STATUS_COPY.chipWord;
+  toggle.setAttribute('title', REQUEST_STATUS_COPY.chipTitle);
+  toggle.setAttribute('aria-controls', 'requests-panel');
+  toggle.setAttribute('aria-expanded', 'false');
+  count.setAttribute('aria-hidden', 'true');
+  panel.setAttribute('aria-label', REQUEST_STATUS_COPY.panelName);
+
+  const list = document.createElement('ul');
+  list.className = 'rq-list';
+  list.setAttribute('role', 'list');
+  panel.appendChild(list);
+
+  const recent = document.createElement('div');
+  recent.className = 'rq-recent';
+  recent.toggleAttribute('hidden', true);
+  const recentHead = document.createElement('button');
+  recentHead.type = 'button';
+  recentHead.className = 'rq-recent-head';
+  recentHead.setAttribute('aria-expanded', 'false');
+  recentHead.setAttribute('aria-controls', 'requests-recent-body');
+  const recentLabel = document.createElement('span');
+  recentLabel.className = 'rq-recent-label';
+  const recentChevron = document.createElement('span');
+  recentChevron.className = 'rq-chevron';
+  recentChevron.setAttribute('aria-hidden', 'true');
+  recentChevron.textContent = REQUEST_STATUS_COPY.recentFolded;
+  recentHead.appendChild(recentLabel);
+  recentHead.appendChild(recentChevron);
+  const recentBody = document.createElement('ul');
+  recentBody.id = 'requests-recent-body';
+  recentBody.className = 'rq-recent-body';
+  recentBody.setAttribute('role', 'list');
+  recentBody.toggleAttribute('hidden', true);
+  recent.appendChild(recentHead);
+  recent.appendChild(recentBody);
+  panel.appendChild(recent);
+
+  // id -> the nodes and the state of that request's row, kept between draws so a focused row keeps its focus.
+  const entries = new Map();
+  let detailCount = 0;
+  // Whether the user (or a send) wants the panel open. It shows only while there is a row to show.
+  let wantOpen = false;
+  // True while the panel is open only because the user sent a request; any action of the user ends it.
+  let autoOpened = false;
+  let pointerInPanel = false;
+  let recentOpen = false;
+  let board = { empty: true, rows: [], recent: [] };
+  let tickTimer = null;
+  let liveTimer = null;
+  let liveQueue = [];
+  let lastLiveAt = null;
+
+  function setText(node, value) {
+    if (node.textContent !== value) node.textContent = value;
+  }
+
+  function setAttr(node, name, value) {
+    if (value === '' || value === null) {
+      if (node.hasAttribute(name)) node.removeAttribute(name);
+    } else if (node.getAttribute(name) !== value) {
+      node.setAttribute(name, value);
+    }
+  }
+
+  // toggleAttribute with a value that is already there writes nothing.
+  function setHidden(node, hidden) {
+    node.toggleAttribute('hidden', hidden);
+  }
+
+  function buildEntry(id) {
+    detailCount += 1;
+    const item = document.createElement('li');
+    item.className = 'rq-item';
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'rq-row';
+    const text = document.createElement('span');
+    text.className = 'rq-text';
+    const time = document.createElement('span');
+    time.className = 'rq-time';
+    const mark = document.createElement('span');
+    mark.className = 'rq-mark';
+    mark.setAttribute('aria-hidden', 'true');
+    const state = document.createElement('span');
+    state.className = 'rq-state';
+    button.appendChild(text);
+    button.appendChild(time);
+    button.appendChild(mark);
+    button.appendChild(state);
+    const detail = document.createElement('div');
+    detail.className = 'rq-detail';
+    detail.id = `requests-detail-${detailCount}`;
+    detail.toggleAttribute('hidden', true);
+    button.setAttribute('aria-controls', detail.id);
+    button.setAttribute('aria-expanded', 'false');
+    item.appendChild(button);
+    item.appendChild(detail);
+    const entry = { id, item, button, text, time, mark, state, detail, open: false, pointer: false, focus: false, held: false, lines: '', row: null };
+    item.addEventListener('pointerenter', () => {
+      entry.pointer = true;
+      reportHold(entry);
+    });
+    item.addEventListener('pointerleave', () => {
+      entry.pointer = false;
+      reportHold(entry);
+    });
+    item.addEventListener('focusin', (event) => {
+      entry.focus = item.contains(event.target);
+      reportHold(entry);
+    });
+    item.addEventListener('focusout', (event) => {
+      entry.focus = event.relatedTarget !== null && event.relatedTarget !== undefined && item.contains(event.relatedTarget);
+      reportHold(entry);
+    });
+    button.addEventListener('click', () => {
+      entry.open = !entry.open;
+      // Opening a detail is the user's own act.
+      autoOpened = false;
+      drawDetail(entry);
+      reportHold(entry);
+    });
+    return entry;
+  }
+
+  /** Tells the tracker when the combined hold of a row (pointer, focus or an open detail) changed. */
+  function reportHold(entry) {
+    const held = entry.pointer || entry.focus || entry.open;
+    if (held !== entry.held) {
+      entry.held = held;
+      onHold(entry.id, held);
+    }
+  }
+
+  function drawDetail(entry) {
+    setAttr(entry.button, 'aria-expanded', String(entry.open));
+    setHidden(entry.detail, !entry.open);
+    if (!entry.open || entry.row === null) return;
+    const key = JSON.stringify(entry.row.detail);
+    if (key === entry.lines) return;
+    entry.lines = key;
+    entry.detail.replaceChildren();
+    for (const line of entry.row.detail) {
+      const paragraph = document.createElement('p');
+      paragraph.className = `rq-${line.kind}`;
+      paragraph.textContent = line.text;
+      entry.detail.appendChild(paragraph);
+    }
+  }
+
+  function drawRow(entry, row) {
+    entry.row = row;
+    setText(entry.text, row.text);
+    setAttr(entry.text, 'title', row.fullText);
+    setText(entry.time, row.time);
+    setAttr(entry.time, 'title', row.timeTitle);
+    // The number of a row in flight changes every second: it is out of the accessible name until the row is finished.
+    setAttr(entry.time, 'aria-hidden', row.finished ? '' : 'true');
+    setAttr(entry.mark, 'data-shape', row.shape);
+    setText(entry.state, row.phrase);
+    setAttr(entry.state, 'title', row.phraseTitle);
+    setAttr(entry.item, 'data-finished', String(row.finished));
+    drawDetail(entry);
+  }
+
+  /** Puts the nodes of `rows` into `container` in order, one stable node per request. */
+  function drawRows(container, rows) {
+    let cursor = container.firstChild;
+    for (const row of rows) {
+      let entry = entries.get(row.id);
+      if (entry === undefined) {
+        entry = buildEntry(row.id);
+        entries.set(row.id, entry);
+      }
+      drawRow(entry, row);
+      if (entry.item === cursor) {
+        cursor = cursor.nextSibling;
+      } else {
+        container.insertBefore(entry.item, cursor);
+      }
+    }
+  }
+
+  function dropGone(wanted) {
+    for (const [id, entry] of entries) {
+      if (wanted.has(id)) continue;
+      entry.item.remove();
+      entries.delete(id);
+    }
+  }
+
+  function showPanel() {
+    return wantOpen && !board.empty;
+  }
+
+  function drawChrome() {
+    toggle.hidden = board.empty;
+    const shown = showPanel();
+    panel.hidden = !shown;
+    setAttr(toggle, 'aria-expanded', String(shown));
+  }
+
+  function drawRecent() {
+    const rows = board.recent ?? [];
+    setHidden(recent, rows.length === 0);
+    setText(recentLabel, fill(REQUEST_STATUS_COPY.recentHead, { n: rows.length }));
+    setAttr(recentHead, 'aria-label', fill(REQUEST_STATUS_COPY.recentName, { n: rows.length }));
+    setAttr(recentHead, 'aria-expanded', String(recentOpen));
+    setText(recentChevron, recentOpen ? REQUEST_STATUS_COPY.recentOpen : REQUEST_STATUS_COPY.recentFolded);
+    setHidden(recentBody, !recentOpen);
+  }
+
+  /** Folds the panel by itself when it opened by itself and nothing keeps it: nothing in flight, no listed row, no pointer over it. */
+  function maybeAutoFold() {
+    if (!autoOpened || !wantOpen || board.empty) return;
+    if ((board.inFlight ?? 0) > 0 || (board.rows ?? []).length > 0) return;
+    if (pointerInPanel) return;
+    wantOpen = false;
+    autoOpened = false;
+    drawChrome();
+  }
+
+  /** Whether a row still needs the clock: in flight, quiet, or finished less than 30 s ago. */
+  function needsClock(model) {
+    return (model.rows ?? []).some((row) => !row.finished || (row.finishedAgo ?? 0) < FINISHED_SHOWN_MS);
+  }
+
+  function onTick() {
+    tickTimer = null;
+    render(getModel === null ? board : getModel());
+  }
+
+  function scheduleTick() {
+    const needed = needsClock(board);
+    if (needed && tickTimer === null) {
+      tickTimer = setTimer(onTick, TICK_MS);
+    } else if (!needed && tickTimer !== null) {
+      clearTimer(tickTimer);
+      tickTimer = null;
+    }
+  }
+
+  function flushLive() {
+    liveTimer = null;
+    if (liveQueue.length === 0) return;
+    live.textContent = joinLive(liveQueue);
+    liveQueue = [];
+    lastLiveAt = now();
+  }
+
+  function scheduleLive() {
+    if (liveTimer !== null || liveQueue.length === 0) return;
+    const wait = lastLiveAt === null ? 0 : Math.max(0, lastLiveAt + LIVE_EVERY_MS - now());
+    if (wait === 0) flushLive();
+    else liveTimer = setTimer(flushLive, wait);
+  }
+
+  /** Draws the model of page/request-status.js: the chip, its count, the rows and the Recent group. */
+  function render(model) {
+    board = model;
+    const flight = model.inFlight ?? 0;
+    setText(count, String(flight));
+    setHidden(count, flight === 0);
+    setAttr(
+      toggle,
+      'aria-label',
+      flight === 0 ? REQUEST_STATUS_COPY.chipNameNone : fill(REQUEST_STATUS_COPY.chipNameFlight, { n: flight }),
+    );
+    setAttr(toggle, 'data-inflight', String(flight > 0));
+    const listed = model.rows ?? [];
+    const kept = model.recent ?? [];
+    dropGone(new Set([...listed, ...kept].map((row) => row.id)));
+    drawRows(list, listed);
+    drawRows(recentBody, kept);
+    drawRecent();
+    drawChrome();
+    maybeAutoFold();
+    const sentences = takeLive();
+    if (sentences.length > 0) {
+      liveQueue.push(...sentences);
+      scheduleLive();
+    }
+    scheduleTick();
+  }
+
+  function open({ byKeyboard = false } = {}) {
+    if (!wantOpen) {
+      onOpen();
+      wantOpen = true;
+    }
+    // Opening by hand is the user's own act, whatever opened it before.
+    autoOpened = false;
+    drawChrome();
+    if (byKeyboard && showPanel()) focusFirst();
+  }
+
+  /** Folds the panel; with `focusChip` focus goes back to the chip (Esc does that), otherwise focus stays where it is. */
+  function close({ focusChip = false } = {}) {
+    if (wantOpen) {
+      wantOpen = false;
+      autoOpened = false;
+      drawChrome();
+    }
+    if (focusChip) toggle.focus();
+  }
+
+  /** The user sent a request: the panel opens by itself and focus stays where it is. */
+  function noteSend() {
+    if (wantOpen) return;
+    onOpen();
+    wantOpen = true;
+    autoOpened = true;
+    drawChrome();
+  }
+
+  function focusFirst() {
+    const first = list.querySelector('.rq-row');
+    if (first) first.focus();
+    else panel.focus();
+  }
+
+  // Keeps focus where it is on a press, so a click does not move it; a keyboard activation (a click event with no
+  // detail) that opens the panel moves focus to its first row.
+  toggle.addEventListener('mousedown', (event) => event.preventDefault());
+  toggle.addEventListener('click', (event) => {
+    if (wantOpen) close();
+    else open({ byKeyboard: event.detail === 0 });
+  });
+
+  recentHead.addEventListener('click', () => {
+    recentOpen = !recentOpen;
+    drawRecent();
+  });
+
+  // Esc folds the panel and gives focus back to the chip; it never reaches a view or the Ask box. With the panel
+  // folded it is left to the page.
+  const onKeydown = (event) => {
+    if (event.key !== 'Escape' || !wantOpen) return;
+    event.preventDefault();
+    event.stopPropagation();
+    close({ focusChip: true });
+  };
+  toggle.addEventListener('keydown', onKeydown);
+  panel.addEventListener('keydown', onKeydown);
+
+  panel.addEventListener('pointerenter', () => {
+    pointerInPanel = true;
+  });
+  panel.addEventListener('pointerleave', () => {
+    pointerInPanel = false;
+    maybeAutoFold();
+  });
+  // Focus inside makes the panel the user's; it never folds by itself under a focused row.
+  panel.addEventListener('focusin', (event) => {
+    if (panel.contains(event.target)) autoOpened = false;
+  });
+
+  return { render, noteSend, open, close, isOpen: () => showPanel() };
+}