moontide-mcp 2.1.0 → 2.4.0

package/page/played-buffer.js

@@ -0,0 +1,208 @@
+// The notes played on a MIDI keyboard, kept in memory as notes with a start and an end in music cycles. Pure: no DOM, no window, no
+// timer and no clock at import or at any call, so node:test and page/main.js import it the same way. Every call is given the cycle
+// it happened at; this module never reads a clock and never sends anything. Which bytes are a note is decided here too, so the
+// listener can drop everything else before it reads any clock.
+//
+// The buffer keeps a window: the 8 whole cycles that end with the current one, so everything it holds fits on the roll (whose longest motif
+// is 8 cycles) and its edges sit on the music's cycle lines. `snapshot(now)` is what "record that" and, later, a request to Claude read:
+// `{ start, cycles, notes }` where `start` is the window's first cycle, `cycles` its length (8) and each note
+// `{ pitch, velocity, start, end, run, held }` in cycles from the window's start, in the order played, a note that began before the window cut at
+// 0 and a note still held closed at `now` (`held` is true for it, so the live view can keep growing it). `run` says which run of the music the note was placed in: the cycle axis's whole-number offset
+// (the axis cycle minus the music's own cycle count) or null for a note placed by the tempo; equal runs mean one run of the music.
+
+import { MAX_CYCLES } from './scratch-model.js';
+
+/** How many whole cycles the buffer keeps: the roll's longest motif. */
+export const BUFFER_CYCLES = MAX_CYCLES;
+/** The most notes the buffer keeps, so a stuck key or a flood never grows memory without bound. */
+export const MAX_BUFFER_NOTES = 2000;
+
+const NOTE_OFF_STATUS = 0x80;
+const NOTE_ON_STATUS = 0x90;
+
+function isDataByte(value) {
+  return Number.isInteger(value) && value >= 0 && value <= 127;
+}
+
+/**
+ * Reads the bytes of one MIDI message. Gives `{ kind, pitch, velocity, channel }` for a three-byte note-on (status 0x90 to 0x9F) or
+ * note-off (0x80 to 0x8F) whose two data bytes are whole numbers from 0 to 127: `kind` is 'on' or 'off', `channel` 1 to 16, and a note-on
+ * with velocity 0 is an off, as the MIDI standard says. Everything else gives null: clock (0xF8), active sensing (0xFE), controllers
+ * (the sustain pedal), pitch bend, aftertouch, system exclusive, and data that is short, long or not bytes. Those are ignored on purpose:
+ * the phrase form of a motif cannot say them.
+ */
+export function parseNoteMessage(data) {
+  if (data === null || typeof data !== 'object' || data.length !== 3) return null;
+  const [status, pitch, velocity] = [data[0], data[1], data[2]];
+  if (!Number.isInteger(status) || status < NOTE_OFF_STATUS || status > 0x9f) return null;
+  if (!isDataByte(pitch) || !isDataByte(velocity)) return null;
+  const channel = (status & 0x0f) + 1;
+  const isOn = status >= NOTE_ON_STATUS && velocity > 0;
+  return { kind: isOn ? 'on' : 'off', pitch, velocity, channel };
+}
+
+function checkCycle(cycle) {
+  if (typeof cycle !== 'number' || !Number.isFinite(cycle)) throw new Error(`Moontide: a played note needs a finite cycle, got ${String(cycle)}`);
+}
+
+function checkPitch(pitch) {
+  if (!isDataByte(pitch)) throw new Error(`Moontide: a played note needs a whole pitch from 0 to 127, got ${String(pitch)}`);
+}
+
+/**
+ * The played notes, in play order. A note is `{ pitch, velocity, start, end, run }` with the cycles of its start and end and the velocity as the
+ * keyboard sent it (1 to 127); `end` is null while the key is held; `run` is the axis offset the note was placed at (a whole number)
+ * or null when it was placed by the tempo. `noteOn(cycle, pitch, velocity, run)` (run left out is null) starts a note (a second on of a held
+ * pitch ends the first at that cycle) and gives `{ kept: true }`, or `{ kept: false, full: true }` when 2000 notes are kept already;
+ * `noteOff(cycle, pitch)` ends the held note of that pitch (an off for a pitch that is not held does nothing); `closeAll(cycle)` ends every
+ * held note there. `count(now)` is how many notes the window holds (`now` is the current cycle; left out, the latest cycle any call gave),
+ * `notes()` a copy of them, `snapshot(now)` the window as described above (the buffer is left as it was) and `clear()` empties it.
+ * Every call that takes a cycle drops the notes that ended before the window's start, judged against the latest cycle any call has given,
+ * so a note stamped a little late never moves the window back. A held note is never dropped.
+ */
+export function createPlayedBuffer() {
+  let kept = [];
+  let latest = -Infinity;
+  const heldOf = (pitch) => kept.find((note) => note.pitch === pitch && note.end === null);
+  const windowEnd = (at) => Math.floor(at) + 1;
+  const outside = (note, windowStart) => note.end !== null && note.end <= windowStart && note.start < windowStart;
+
+  // Learns the cycle of a call and drops what has left the window.
+  function advance(cycle) {
+    if (cycle > latest) latest = cycle;
+    if (!Number.isFinite(latest)) return;
+    const windowStart = windowEnd(latest) - BUFFER_CYCLES;
+    if (kept.some((note) => outside(note, windowStart))) kept = kept.filter((note) => !outside(note, windowStart));
+  }
+
+  function noteOn(cycle, pitch, velocity, run = null) {
+    checkCycle(cycle);
+    checkPitch(pitch);
+    if (run !== null && !Number.isInteger(run)) throw new Error(`Moontide: a played note needs a run that is null or a whole number, got ${String(run)}`);
+    if (!Number.isInteger(velocity) || velocity < 1 || velocity > 127) throw new Error(`Moontide: a played note needs a velocity from 1 to 127, got ${String(velocity)}`);
+    advance(cycle);
+    if (kept.length >= MAX_BUFFER_NOTES) return { kept: false, full: true };
+    const held = heldOf(pitch);
+    if (held !== undefined) held.end = Math.max(cycle, held.start);
+    kept.push({ pitch, velocity, start: cycle, end: null, run });
+    return { kept: true };
+  }
+
+  function noteOff(cycle, pitch) {
+    checkCycle(cycle);
+    checkPitch(pitch);
+    advance(cycle);
+    const held = heldOf(pitch);
+    if (held !== undefined) held.end = Math.max(cycle, held.start);
+  }
+
+  function closeAll(cycle) {
+    checkCycle(cycle);
+    advance(cycle);
+    for (const note of kept) if (note.end === null) note.end = Math.max(cycle, note.start);
+  }
+
+  function count(now = latest) {
+    if (now !== latest) checkCycle(now);
+    advance(now);
+    return kept.length;
+  }
+
+  function snapshot(now) {
+    checkCycle(now);
+    const at = Math.max(latest, now);
+    const windowStart = windowEnd(at) - BUFFER_CYCLES;
+    const notes = kept
+      .filter((note) => !outside(note, windowStart))
+      .map((note) => {
+        const start = Math.max(0, note.start - windowStart);
+        const end = Math.max(start, (note.end === null ? Math.max(now, note.start) : note.end) - windowStart);
+        return { pitch: note.pitch, velocity: note.velocity, start, end, run: note.run, held: note.end === null };
+      });
+    return { start: windowStart, cycles: BUFFER_CYCLES, notes };
+  }
+
+  return {
+    noteOn,
+    noteOff,
+    closeAll,
+    count,
+    snapshot,
+    clear: () => {
+      kept = [];
+      latest = -Infinity;
+    },
+    notes: () => kept.map((note) => ({ ...note })),
+  };
+}
+
+function isLine(lines) {
+  if (lines === null || typeof lines !== 'object') return false;
+  const { a, b } = lines;
+  for (const anchor of [a, b]) {
+    if (anchor === null || typeof anchor !== 'object' || !Number.isFinite(anchor.c) || !Number.isFinite(anchor.t)) return false;
+  }
+  return a.t !== b.t;
+}
+
+const cycleOnLine = (line, h) => line.a.c + ((h - line.a.t) * (line.b.c - line.a.c)) / (line.b.t - line.a.t);
+
+/**
+ * One cycle axis for the buffer. The page clock gives cycle lines only for a music that plays, yet the buffer must keep the last cycles
+ * by the tempo while the music is stopped. The axis uses the page clock's own lines while the music plays and runs on by the
+ * scheduler's tempo otherwise, and in both cases hands the same kind of two anchors to the placement code (checkStamp, then
+ * cycleAtStamp). It never goes back: notes already kept keep their order. While the music plays its whole cycles stay whole cycles of
+ * the axis, because a Play moves the axis forward to the next whole cycle: the axis cycle equals the music's own cycle count plus the
+ * offset (the count the code's patterns are queried at), and the offset changes only when the music restarts. Notes played before a Play are older cycles of the same axis;
+ * their place against the new music has no meaning, because they were played against no music.
+ *
+ * Pure: it reads no clock and keeps no timer; every read is handed its moment. `at(h, { music, cps, playing })` takes `h`, the handler's
+ * clock in milliseconds (performance.now() time), `music`, the page clock's two cycle lines `{ a: { c, t }, b: { c, t } }` or null,
+ * `cps`, the scheduler's cycles per second, and `playing`, whether the music plays. It gives `{ anchors: { a, b }, source, now }`:
+ * `source` is 'music' or 'free' (the tempo), `now` the axis cycle at `h` on those anchors, and `offset`, the whole number added to the music's line
+ * (null when `source` is 'free'); the whole answer is null when there are no lines and no tempo above 0 (nothing changes then).
+ *
+ * With usable lines the axis is the music's line plus a whole-number offset. The offset stays, except when the line reads more than half a
+ * cycle below the last cycle (the scheduler restarted unseen, as when the tab was hidden): it then grows by whole cycles; a smaller step
+ * back is clock jitter and changes nothing. While the music plays and the lines are briefly missing, the last line is kept, so a gap
+ * never costs a cycle. A line from before a Stop is never reused: a Play whose clock is still warming up stays on the tempo.
+ */
+export function createCycleAxis() {
+  let mode = null; // null before the first read, then 'music' or 'free'
+  let offset = 0;
+  let line = null; // the line in use, in axis cycles: the music's plus the offset, or the tempo's from its origin
+  let freeCps = 0;
+  let last = null; // the axis cycle of the latest read
+
+  function answer(h, source) {
+    last = cycleOnLine(line, h);
+    return { anchors: { a: { ...line.a }, b: { ...line.b } }, source, now: last, offset: source === 'music' ? offset : null };
+  }
+
+  function at(h, { music, cps, playing }) {
+    if (!Number.isFinite(h)) throw new Error(`Moontide: the cycle axis needs a finite moment, got ${String(h)}`);
+    if (isLine(music)) {
+      const raw = cycleOnLine(music, h);
+      if (mode !== 'music') offset = line === null ? 0 : Math.ceil(cycleOnLine(line, h) - raw);
+      else if (raw + offset < last - 0.5) offset = Math.ceil(last - raw);
+      mode = 'music';
+      line = { a: { c: music.a.c + offset, t: music.a.t }, b: { c: music.b.c + offset, t: music.b.t } };
+      return answer(h, 'music');
+    }
+    if (playing === true && mode === 'music') return answer(h, 'music');
+    if (Number.isFinite(cps) && cps > 0) {
+      if (mode === 'free' && cps === freeCps) return answer(h, 'free');
+      const period = 1000 / cps;
+      const c = line === null ? 0 : cycleOnLine(line, h);
+      if (Number.isFinite(period) && period > 0 && Number.isFinite(c) && h + period !== h) {
+        mode = 'free';
+        freeCps = cps;
+        line = { a: { c, t: h }, b: { c: c + 1, t: h + period } };
+        return answer(h, 'free');
+      }
+    }
+    return null;
+  }
+
+  return { at };
+}

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() };
+}