@adrrr/tarmac 0.3.0 → 0.4.1

package/dist/render.js

@@ -9,6 +9,8 @@
 import { formatDuration } from './config.js';
 import { buildMap, INTERACTIVE, stateOf } from './map.js';
 import { schemaNotice } from './schema.js';
+import { LIMIT_WINDOWS, RESET_HORIZON_MS, readLimits } from './limits.js';
+import { accountLimits, busyOnStaleFleet } from './fleet.js';
 /**
  * The other thing this module renders: the plan a user consents to before install or
  * uninstall touches their settings.json. Everything the decision rests on has to be here —
@@ -147,7 +149,7 @@ export function renderTable({ rows, health }) {
     const head = ['PROJECT', 'STATE', 'CTX', 'AS OF', 'MODEL', 'EFFORT', 'COST', 'UP'];
     const body = rows.map((r) => [
         r.project ?? '—',
-        r.busy === true ? 'busy' : r.busy === false ? 'idle' : `?${r.status ?? ''}`,
+        stateCell(r),
         r.ctxPct === null ? `— ${r.ctxState}` : `${r.ctxPct}%`,
         // The age of the reading, never implied to be "now".
         r.snapshotAgeMs === null ? '—' : ahead(r) ? '— ahead' : `${age(r.snapshotAgeMs)}${r.stale ? ' !' : ''}`,
@@ -200,6 +202,21 @@ export function renderTable({ rows, health }) {
         (warns.length ? '\n' + warns.join('\n') + '\n' : '') +
         `\n${health.sessions} sessions · ${health.busy} busy · ${total}\n`);
 }
+/**
+ * The STATE column, out of the same verdict the page draws from.
+ *
+ * `?` is this column's word for "a status tarmac does not recognise", so it may not lead the
+ * one status tarmac knows by name and now has a state for. The reason follows the word, in
+ * the separator this renderer already uses for two facts on one line — and it is the only
+ * value here that can widen a column: it does so on a fleet that has a session blocked on a
+ * human, which is the fleet you wanted it on.
+ */
+function stateCell(r) {
+    const state = stateOf(r);
+    if (state === 'unknown')
+        return `?${r.status ?? ''}`;
+    return state === 'waiting' && r.waitingFor ? `waiting · ${r.waitingFor}` : state;
+}
 /**
  * A snapshot dated AFTER the clock we are reading it with — a mount whose time runs ahead, an
  * NTP correction between the write and the read. Its age is not a small number, it is not a
@@ -261,16 +278,36 @@ export function renderLive(fleet) {
     if (health.unknownStatus > 0) {
         warnings.push(`${health.unknownStatus} session(s) report a status tarmac does not know — treated as unknown, not idle.`);
     }
-    if (health.stale > 0) {
-        warnings.push(`${health.stale} reading(s) are older than the ${formatDuration(health.staleAfterMs)} freshness threshold — a statusline is only written when its terminal draws a frame, so an idle session's number is "as of" its last one. Set another with --stale-after.`);
+    // NOT "N readings are stale", which used to live here and was on every hour of every day
+    // (#53): a statusline is written when a terminal draws a frame, so a fleet that idles keeps
+    // yesterday's numbers and says so on every poll. The rows and the nodes date each reading
+    // themselves — a page-wide box repeating it is wallpaper, and wallpaper is what teaches a
+    // reader to skip the boxes below. What is left here is the one stale-shaped thing that is
+    // an event: `busyOnStaleFleet` (see fleet.ts for why both halves of it are needed).
+    const stalled = busyOnStaleFleet(rows);
+    if (stalled > 0) {
+        warnings.push(`Every context reading is stale, including ${stalled} session(s) busy right now — a busy session redraws its status line, so its reading should not be older than ${formatDuration(health.staleAfterMs)}. The statusline writer looks stopped rather than the fleet idle: check that the wrapper is still installed and that the snapshot directory is writable.`);
     }
     const skewed = rows.filter(ahead).length;
     if (skewed > 0) {
         warnings.push(`${skewed} reading(s) are dated in the future — ${SKEW}. They are shown undated rather than as brand new.`);
     }
+    // Under the fleet, at a footnote's weight: two facts that are true, worth keeping, and worth
+    // nobody's alarm. The first is the legend for the marks the rows carry — a `!` whose
+    // threshold is invisible is a mark the reader cannot argue with, which is why demoting the
+    // banner above could not take the number with it. The second is a maintainer's line: it
+    // stands for every user of a released tarmac until the next release ships the fixture, so
+    // amber would mean amber forever. Both keep every word they had.
+    const notes = [];
+    // Not under the stall banner, which names the same threshold two lines up: the pair reads as
+    // the alarm followed by its own excuse, and the excuse is the reading the alarm exists to
+    // tell you not to accept.
+    if (health.stale > 0 && stalled === 0) {
+        notes.push(`Readings past the ${formatDuration(health.staleAfterMs)} freshness threshold are dated where they sit — a statusline is only written when its terminal draws a frame, so an idle session's number is "as of" its last one. Set another with --stale-after.`);
+    }
     const schema = schemaNotice(health.schemaGuard);
     if (schema)
-        warnings.push(schema);
+        notes.push(schema);
     // Both views, every time, out of the one reading the page just asked for. The tabs are
     // links and the shell decides which of the two is visible, so a fleet cannot be drawn as a
     // table of one age beside a map of another.
@@ -280,16 +317,98 @@ export function renderLive(fleet) {
     // on screen and read out all the same by anything going through the markup.
     const body = rows.length === 0
         ? empty(health)
-        : `<div class="view view-table"><div class="wrap"><table>
+        : // `aria-describedby` on both views, because demoting the footnote moved it BELOW every
+            // row and every node: a reader going through the markup now meets `! 3h ago` N times
+            // before anything says what threshold put it there. Sighted readers glance down; this
+            // is the same glance for anyone who cannot. The target is rendered whether or not it
+            // has anything in it, so the reference is never dangling.
+            `<div class="view view-table"><div class="wrap"><table aria-describedby="fleet-notes">
       <thead><tr>
         <th>Project</th><th>Session</th><th>State</th><th>Context</th><th>Model</th><th>Effort</th><th>Cost</th><th>Uptime</th>
       </tr></thead>
       <tbody>${rows.map(renderRow).join('')}</tbody>
     </table></div></div>
-<div class="view view-map">${renderMap(fleet)}</div>`;
-    return `<div class="meta">${health.sessions} session${health.sessions === 1 ? '' : 's'} · ${health.busy} busy · ${cost(health)} · ${esc(new Date(health.generatedAt).toISOString())}</div>
+<div class="view view-map" role="group" aria-label="fleet map" aria-describedby="fleet-notes">${renderMap(fleet)}</div>`;
+    return `<div id="limits-src" hidden>${renderLimits(fleet)}</div>
+<div class="meta">${health.sessions} session${health.sessions === 1 ? '' : 's'} · ${health.busy} busy · ${cost(health)} · ${esc(new Date(health.generatedAt).toISOString())}</div>
 ${warnings.map((w) => `<div class="warn">${esc(w)}</div>`).join('')}
-${body}`;
+${body}
+<div id="fleet-notes">${notes.map((n) => `<div class="note">${esc(n)}</div>`).join('')}</div>`;
+}
+/**
+ * The account's two windows, for the page's header.
+ *
+ * They are the one pair of numbers here that is not about a session: every session on the page
+ * spends from the same five-hour and seven-day allowance, so the gauges sit at the top of the
+ * page rather than on a node — and the fleet's own rule decides whose reading counts when the
+ * sessions carry the same number at different ages.
+ *
+ * Rendered into the FRAGMENT as well as into the shell, in a slot the script copies up on every
+ * swap. The header is the shell's — it has to survive a poll, the tabs and a replay — but the
+ * numbers are the fleet's, and the fleet is what the fragment carries. A gauge left in the shell
+ * alone would be as old as the tab.
+ */
+export function renderLimits({ rows, health }) {
+    const account = accountLimits(rows);
+    const gauges = readLimits(account === null ? null : account.rateLimits, health.generatedAt)
+        .map(gauge)
+        .join('');
+    // Dated when the snapshot behind it is past the threshold, exactly as the table dates a stale
+    // context. It matters more here than anywhere else on the page: the percentage is as old as
+    // that snapshot, while the countdown beside it is recomputed on every five-second re-render —
+    // so an undated pair puts a frozen number next to a visibly moving one and lets the reader
+    // assume both are now.
+    //
+    // Once for the two, not once each: both windows come out of the SAME snapshot, and the same
+    // fact said twice is noise. The replay has no equivalent — the ring keeps each reading and
+    // never how old it was, which is why nothing replayed on this page is dated.
+    const stale = account !== null && account.ageMs > health.staleAfterMs;
+    return gauges + (stale ? `<span class="stale">! ${esc(asOfAge(account.ageMs))} ago</span>` : '');
+}
+/**
+ * One window. Four things in a line: which window it is, a bar for the glance, the number that
+ * is authoritative, and how long is left. The bar is `aria-hidden` because it says nothing the
+ * number does not, and the abbreviation is replaced rather than doubled for a reader who hears
+ * the page — "5h" is a label on a screen and a syllable in an ear.
+ */
+function gauge(g) {
+    // No fill, ever, for a window nobody read: an empty bar is what an account at 0% wears, and
+    // "I could not look" must not be able to wear it. The same dotted emptiness as an unmeasured
+    // dial, in the shape a bar has.
+    const rail = g.pct === null
+        ? `<span class="rail unmeasured" aria-hidden="true"></span>`
+        : `<span class="rail" aria-hidden="true"><i style="width:${g.pct}%"></i></span>`;
+    return (`<div class="gauge"><span class="lbl" aria-hidden="true">${g.label}</span><span class="sr">${g.said}</span>` +
+        `${rail}<span class="num">${g.pct === null ? dash() : `${g.pct}%`}</span>` +
+        `<span class="reset">${g.pct === null ? LIMIT_WHY[g.why] : resetWords(g.resetsInMs)}</span></div>`);
+}
+/** Which kind of missing a missing window is, in the two words both surfaces use. */
+const LIMIT_WHY = { absent: 'no reading', drift: 'schema drift' };
+/**
+ * The reset, as a stretch of time rather than as the epoch the payload carries.
+ *
+ * A negative one is not a countdown to be printed with a minus sign: the window rolled over
+ * after the reading that reported it, so the percentage beside these words belongs to a window
+ * that no longer exists. Saying that is the whole point of showing a reset at all.
+ */
+const resetWords = (ms) => ms === null ? `reset ${dash()}` : ms > 0 ? `resets in ${left(ms)}` : `reset was due ${left(-ms)} ago`;
+/**
+ * How long, in the two units that matter at each scale. Deliberately finer than `duration()`
+ * next door, which floors a session's uptime to whole hours: five hours is a window someone
+ * plans the next hour around, and "resets in 2h" said anywhere between 2h00 and 2h59 is the
+ * kind of rounding that makes a reader stop believing the number.
+ */
+function left(ms) {
+    const m = Math.floor(ms / 60000);
+    if (m < 1)
+        return '<1m';
+    if (m < 60)
+        return `${m}m`;
+    const h = Math.floor(m / 60);
+    if (h < 24)
+        return m % 60 === 0 ? `${h}h` : `${h}h ${m % 60}m`;
+    const d = Math.floor(h / 24);
+    return h % 24 === 0 ? `${d}d` : `${d}d ${h % 24}h`;
 }
 /**
  * What to say instead of a fleet. Discovery returning entries we could not identify is not
@@ -346,14 +465,20 @@ function ago(ms) {
     return m < 60 ? `${m}m` : `${Math.round(m / 60)}h`;
 }
 export function renderPage(fleet, view = 'table') {
+    // The header's copy. `renderLive` below renders its own, out of this same fleet and through
+    // this same function — two calls of one pure renderer over one reading, which is what keeps
+    // the pair the reader sees and the pair the script will copy up from being two accounts.
+    const gauges = renderLimits(fleet);
     return `<!doctype html>
 <html lang="en"><head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>tarmac — fleet</title>
 <style>
-  :root { color-scheme: light dark; --fg:#111; --dim:#6b7280; --line:#e5e7eb; --bg:#fff; --warn:#b45309; --warnbg:#fffbeb; --busy:#047857; }
-  @media (prefers-color-scheme: dark) { :root { --fg:#e5e7eb; --dim:#9ca3af; --line:#374151; --bg:#0b0f14; --warn:#fbbf24; --warnbg:#231a06; --busy:#34d399; } }
+  /* --wait is a fourth hue rather than the warning one: a session blocked on a human is not
+     a fault, and painting it amber puts it in the same column as "tarmac cannot read this". */
+  :root { color-scheme: light dark; --fg:#111; --dim:#6b7280; --line:#e5e7eb; --bg:#fff; --warn:#b45309; --warnbg:#fffbeb; --busy:#047857; --wait:#1d4ed8; }
+  @media (prefers-color-scheme: dark) { :root { --fg:#e5e7eb; --dim:#9ca3af; --line:#374151; --bg:#0b0f14; --warn:#fbbf24; --warnbg:#231a06; --busy:#34d399; --wait:#93c5fd; } }
   body { margin:0; padding:2rem 1.25rem; background:var(--bg); color:var(--fg);
          font:14px/1.5 ui-sans-serif,-apple-system,"Segoe UI",sans-serif; }
   header { display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
@@ -364,6 +489,11 @@ export function renderPage(fleet, view = 'table') {
   .warn { background:var(--warnbg); color:var(--warn); border:1px solid currentColor; border-radius:6px;
           padding:.35rem .65rem; margin:.3rem 0; font-size:.8rem; line-height:1.45; }
   .warn:last-of-type { margin-bottom:.9rem; }
+  /* The footnote: same words, none of the weight. Dim, small, below the fleet and with no box
+     around it, because what it carries is true rather than urgent — the threshold that dated a
+     reading, the payload shapes nobody has captured yet. It reads as chrome to someone
+     scanning their sessions and as an answer to someone who came looking for it. */
+  .note { color:var(--dim); font-size:.75rem; line-height:1.5; margin:.9rem 0 0; max-width:95ch; }
   .stale { color:var(--warn); font-weight:600; }
   .wrap { overflow-x:auto; }
   table { border-collapse:collapse; width:100%; min-width:44rem; }
@@ -377,11 +507,14 @@ export function renderPage(fleet, view = 'table') {
   .pill { display:inline-block; font-size:.8rem; font-weight:600; padding:.05rem .5rem;
           border:1px solid currentColor; border-radius:99px; white-space:nowrap; }
   .pill.busy { color:var(--busy); }
+  .pill.waiting { color:var(--wait); }
   .pill.unknown { color:var(--warn); }
   .pill.idle { color:var(--dim); font-weight:400; }
-  /* The weight the sort deserves: busy rows carry an accent and a bold name. */
+  /* Accented states carry their own hue down the row edge. Bold stays on busy alone — it
+     says "working", not "read me first"; waiting's weight is the top of the sort. */
   td:first-child { border-left:3px solid transparent; }
   tr[data-state="busy"] td:first-child { border-left-color:var(--busy); }
+  tr[data-state="waiting"] td:first-child { border-left-color:var(--wait); }
   tr[data-state="unknown"] td:first-child { border-left-color:var(--warn); }
   tr[data-state="busy"] .project { font-weight:700; }
   /* The bar reads a magnitude at a glance; the number beside it is what is authoritative.
@@ -405,6 +538,72 @@ export function renderPage(fleet, view = 'table') {
   body[data-view="table"] .view-map { display:none; }
   body[data-view="map"] .view-table { display:none; }
 
+  /* ── the account's two windows ───────────────────────────────────────────────────────
+     In the header, because a rate limit is the account's and not a node's. Slim on purpose:
+     the fleet is what the page is about, and these two numbers are the weather it flies in.
+     Laid out with flex behind the same :not([hidden]) guard the replay containers carry —
+     the replayed pair ships hidden, and a display in a stylesheet beats the attribute. */
+  .limits:not([hidden]) { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
+  .gauge { display:flex; align-items:baseline; gap:.35rem; font-size:.8rem; }
+  /* Not upper-cased, alone among the small labels on this page: "5H" is not an hour, and a
+     unit that has been shouted reads as a different unit. */
+  .gauge .lbl { color:var(--dim); font-weight:600; letter-spacing:.04em; }
+  .gauge .num { font-variant-numeric:tabular-nums; font-weight:650; }
+  .gauge .reset { color:var(--dim); }
+  /* Same bargain as the row bars: a glance at a magnitude, in the quiet ink of a secondary
+     fact, beside the number that is the authority. Its own class rather than .bar — that one
+     is dropped below 46rem, where a card layout gives every value the name of its column, and
+     these two have no column to be named by. */
+  .gauge .rail { display:inline-block; width:3.5rem; height:.3rem; border-radius:99px;
+          background:var(--line); align-self:center; }
+  .gauge .rail > i { display:block; height:100%; border-radius:99px; background:var(--dim); }
+  /* Nothing was measured — the dotted track of an unmeasured dial, in the shape of a bar. An
+     empty rail is what an account at 0% wears, and the two must not match. */
+  .gauge .rail.unmeasured { background:repeating-linear-gradient(90deg,var(--line) 0 2px,transparent 2px 8px); }
+  /* The live pair goes down with the live fragment: they are about now, and left up they would
+     be the one present-tense number standing over a fleet three hours old. */
+  body.replaying #limits { display:none; }
+  /* The replayed pair leads the past fleet rather than sitting on top of its totals. */
+  #replay-limits { margin-bottom:.2rem; }
+
+  /* ── the scrubber ────────────────────────────────────────────────────────────────────
+     Under the map, and only under the map: the record holds what the MAP draws, so a
+     scrubber over the table would offer a drag onto rows it cannot fill.
+     Everything here lives in the shell for the same reason the tabs do: the /live fragment is
+     swapped into innerHTML every five seconds, and a handle inside it would be dragged back
+     to the present by a poll nobody asked for. */
+  body[data-view="table"] #replay, body[data-view="table"] #replay-view { display:none; }
+  /* One fleet at a time, and the whole fragment rather than only its map: the fragment's
+     header is the LIVE count, cost and timestamp, and hiding the map alone left it sitting
+     directly above the replayed one — two totals of two different moments, the pair dated
+     with the present. The warnings above them are about the present too. The failure banner
+     is in the shell, so a refresh that breaks mid-replay still says so. */
+  body.replaying #live { display:none; }
+  /* Both of these are laid out with flex, and both are hidden by the attribute until a script
+     raises them — so the display is refused to a hidden one explicitly. The hidden attribute
+     is only a UA rule of display:none, and any display a stylesheet gives the same element
+     beats it: unguarded, this page came up announcing a replay nobody had asked for. */
+  .replay:not([hidden]) { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:1rem;
+            padding-top:.7rem; border-top:1px solid var(--line); }
+  .replay button { font:inherit; font-size:.8rem; color:var(--fg); background:transparent;
+            border:1px solid var(--line); border-radius:99px; padding:.15rem .8rem; cursor:pointer; }
+  .replay input[type="range"] { flex:1; min-width:10rem; accent-color:var(--dim); }
+  .replay input[type="range"]:disabled { opacity:.4; }
+  /* The two things the reader has to be able to read while dragging: the minute under the
+     handle, and what the whole range covers. Tabular, so neither jitters as it counts. */
+  #replay-at { font-variant-numeric:tabular-nums; font-weight:600; }
+  .replay .covers { flex-basis:100%; color:var(--dim); font-size:.75rem; }
+  /* The banner wears the warning style on purpose: a page showing a past minute as though it were the
+     fleet is the worst thing this dashboard could do, so it wears the loudest thing it has. */
+  /* Sticky, because the handle is at the bottom of a map that can be taller than the
+     viewport: a reader dragging with the "this is the past" banner scrolled off the top is
+     a reader the banner is not warning. */
+  .replaying-note:not([hidden]) { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
+            position:sticky; top:0; z-index:1; }
+  .replaying-note button { font:inherit; font-size:.75rem; font-weight:600; color:inherit;
+            background:transparent; border:1px solid currentColor; border-radius:99px;
+            padding:.05rem .7rem; cursor:pointer; }
+
   /* ── the map ─────────────────────────────────────────────────────────────────────────
      One node per session. The arc is the context, its weight is how much that reading may
      be believed, and the halo — the only thing on this page that moves — says a frame
@@ -413,6 +612,7 @@ export function renderPage(fleet, view = 'table') {
   .node { border:1px solid var(--line); border-radius:10px; padding:.8rem .85rem .7rem;
           display:flex; flex-direction:column; align-items:center; text-align:center; }
   .node[data-state="busy"] { border-color:color-mix(in srgb, var(--busy) 45%, var(--line)); }
+  .node[data-state="waiting"] { border-color:color-mix(in srgb, var(--wait) 45%, var(--line)); }
   /* An agent is a smaller body in the same system, next to the session it shares a directory
      with — never inside it. Tinted rather than outlined, and hooked, so it reads as the
      session's dependent without a line claiming a parentage the source never published. */
@@ -439,15 +639,28 @@ export function renderPage(fleet, view = 'table') {
      stroke-dasharray, which is what carries the percentage. */
   .node[data-reading="stale"] .arc, .node[data-reading="undated"] .arc {
           stroke:var(--warn); stroke-width:2.5; opacity:.7; }
+  /* A replayed reading. Its EXTENT is what the record vouches for; its age is the one thing
+     the ring never kept, so it may not wear the solid arc that means "as current as a reading
+     gets" — nor the warning hue of a stale one, which would claim the opposite. Between the
+     two: full colour, a shade lighter, and no date underneath it. */
+  .node[data-reading="undatable"] .arc { stroke-width:4; opacity:.85; }
   /* Nothing was measured. Keyed on the measurement and never on the age of the file: a
      solid empty ring is what a session measured at 0% wears, and the two must not match. */
   .track.unmeasured { stroke-dasharray:2 6; stroke-linecap:round; }
   /* Once per arrival, not forever: the fragment is replaced on every poll, so a single run
      per swap is what makes the fleet breathe at the rate its frames actually land. A looping
      animation would say "a frame just arrived" for five seconds after it stopped being true. */
-  .halo { fill:none; stroke:var(--busy); stroke-width:2; opacity:0; transform-origin:50% 50%;
+  /* What the halo says is that a frame landed, and it says it by being there at all. Its
+     COLOUR is free, and it was spending it on a claim: stroked with the busy hue under a lone
+     idle override, it pulsed green over an unrecognised status and — since the fourth state — over
+     a session halted on a human, in the hue of the one thing it is certainly not doing. Same
+     palette as the glyph under the name, off the same four states, so the two channels drawing
+     one node cannot end up disagreeing about it. */
+  .halo { fill:none; stroke:var(--dim); stroke-width:2; opacity:0; transform-origin:50% 50%;
           animation:halo 1.6s ease-out 1; }
-  .node[data-state="idle"] .halo { stroke:var(--dim); }
+  .node[data-state="busy"] .halo { stroke:var(--busy); }
+  .node[data-state="waiting"] .halo { stroke:var(--wait); }
+  .node[data-state="unknown"] .halo { stroke:var(--warn); }
   @keyframes halo { from { opacity:.5; transform:scale(1); } to { opacity:0; transform:scale(1.22); } }
   /* Motion is the one thing here nobody can look away from, so it is the first thing a
      reader who asked for less of it stops getting. The reading is still readable without it. */
@@ -465,8 +678,12 @@ export function renderPage(fleet, view = 'table') {
   .node[data-state="busy"] .who .project { font-weight:700; }
   .shape { font-size:.7rem; color:var(--dim); }
   .node[data-state="busy"] .shape { color:var(--busy); }
+  .node[data-state="waiting"] .shape { color:var(--wait); }
   .node[data-state="unknown"] .shape { color:var(--warn); }
   .sub { color:var(--dim); font-size:.76rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  /* The one caption that is not a footnote: it is why this node is not working, and it sits
+     directly under the name in the state's own hue rather than in the grey of the rest. */
+  .sub.waiting-for { color:var(--wait); font-weight:600; }
   .asof { font-size:.72rem; color:var(--dim); font-variant-numeric:tabular-nums; margin-top:.15rem; }
   .asof.stale { color:var(--warn); font-weight:600; }
   @media (max-width: 30rem) { .map { grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); gap:.6rem; } }
@@ -483,6 +700,7 @@ export function renderPage(fleet, view = 'table') {
     tr { border:1px solid var(--line); border-left-width:3px; border-radius:8px;
          padding:.35rem .7rem; margin-bottom:.6rem; }
     tr[data-state="busy"] { border-left-color:var(--busy); }
+    tr[data-state="waiting"] { border-left-color:var(--wait); }
     tr[data-state="unknown"] { border-left-color:var(--warn); }
     td, td:first-child { border:0; padding:.2rem 0; white-space:normal;
          display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
@@ -503,6 +721,11 @@ export function renderPage(fleet, view = 'table') {
     <a href="/"${view === 'table' ? ' aria-current="page"' : ''}>Table</a>
     <a href="/map"${view === 'map' ? ' aria-current="page"' : ''}>Map</a>
   </nav>
+  <!-- The account's two windows, page-level because that is what they are: a limit belongs to
+       the account every session below is spending from, not to any one of them. Their VALUES
+       come up from the fragment on every poll (the script's limits-src copy), so the header
+       structure can be the shell's without the numbers being as old as the tab. -->
+  <div class="limits" id="limits" role="group" aria-label="account rate limits">${gauges}</div>
   <!-- Not "updated just now". If the script never runs — a policy-injected CSP without
        'unsafe-inline', a script error — that text would stand as a permanent lie, and
        <noscript> would not fire to correct it because JavaScript is enabled. The page's one
@@ -510,12 +733,42 @@ export function renderPage(fleet, view = 'table') {
   <span class="freshness"><span class="pulse" aria-hidden="true"></span><span id="age">updated &mdash;</span></span>
 </header>
 <div class="warn offline" id="offline" hidden>
-  <strong>&#9888; refresh failing</strong> — nothing below has moved since the time in the header.
+  <strong>&#9888; refresh failing</strong> — nothing on this page has moved since the time in the header.
   <span id="why"></span>
 </div>
+<!-- The one claim on this page that could be a lie, so it is the loudest element on it and it
+     carries the minute it is showing. Hidden until a script raises it: with no script there
+     is no replay, and a banner about one would be a warning about nothing. -->
+<!-- role="status" because it appears without a reload and without focus moving: drawn only,
+     it is the page's loudest claim and its most invisible one. -->
+<div class="warn replaying-note" id="replaying" role="status" hidden>
+  <strong>&#9209; replaying <span id="replay-at"></span></strong>
+  <span>&mdash; a reading from the past, not the fleet now.</span>
+  <button type="button" id="to-live">Back to live</button>
+</div>
 <noscript><div class="warn">JavaScript is off, so this page will not refresh itself. Reload it to see the fleet now.</div></noscript>
 <div id="live">${renderLive(fleet)}</div>
-<script>${SCRIPT}</script>
+<!-- Where the past is drawn: the shell's own map, in the place the live one occupies, so
+     that swapping the fragment underneath cannot repaint what the reader is scrubbing. -->
+<div id="replay-view" hidden>
+  <!-- The same pair, for the minute under the reader's hand — and here rather than in the
+       header, where the live pair sits. The banner that says "this is the past" is below the
+       header: an account drawn above it would be the one past number on the page with nothing
+       over it saying so, and the first thing a screen reader reaches, long before the warning.
+       Hidden until a script raises it: with no script there is no replay, and an empty gauge
+       would be a claim about nothing. -->
+  <div class="limits" id="replay-limits" role="group" aria-label="account rate limits, at the minute being replayed" hidden></div>
+  <div class="meta" id="replay-meta"></div>
+  <div class="map" id="replay-map"></div>
+</div>
+<!-- A dead handle is worse than no handle: this is revealed once the record is in hand, and
+     what it says it covers is whatever the record answered with. -->
+<div class="replay" id="replay" hidden>
+  <button type="button" id="play">Play</button>
+  <input type="range" id="scrub" min="0" max="0" step="1" value="0" disabled aria-label="Replay position">
+  <div class="covers" id="covers"></div>
+</div>
+<script>${pageScript(view)}</script>
 </body></html>
 `;
 }
@@ -531,9 +784,15 @@ export function renderPage(fleet, view = 'table') {
  * polled for a reader who is not there. A poll is the only one of the three where the client
  * decides — so a hidden tab simply stops asking, and a waking one asks at once.
  *
- * The page therefore owns exactly two facts: when it last heard from the server, and whether
- * the last attempt failed. Everything a reader interprets is rendered by `renderLive` on the
- * server, where the suite can reach it.
+ * The page therefore owns exactly two facts about the present: when it last heard from the
+ * server, and whether the last attempt failed. Everything a reader interprets about NOW is
+ * rendered by `renderLive` on the server, where the suite can reach it.
+ *
+ * The replay below is the one exception, and it is one the issue asks for: scrubbing a day
+ * has to be a lookup in samples the page already holds, or every pixel of a drag would be a
+ * request and a `claude agents --json` behind it. So a second, smaller renderer lives in the
+ * browser — fed the same three words, the same three glyphs and the same dial geometry as the
+ * server's, by interpolation rather than by copy, and executed by `test/replay-script`.
  */
 export const REFRESH_MS = 5000;
 /**
@@ -542,10 +801,30 @@ export const REFRESH_MS = 5000;
  * on the server side first and arrives with a real reason instead of this generic one.
  */
 const STALL_MS = 20000;
-const SCRIPT = `
+/**
+ * How fast play walks the record — one reading per step, so a serve that has seen ten minutes
+ * plays for a second and a full day for two and a half minutes. It is a step interval and not
+ * a total duration on purpose: the samples are not evenly spaced (a minute the collector
+ * missed is a minute nobody recorded), so a fixed run time would silently speed up over the
+ * gaps and make the day look busier than it was.
+ */
+const PLAY_STEP_MS = 100;
+/**
+ * The same walk for a reader who asked their system for less motion. Play is the one thing
+ * here that moves, and the honest answer to that preference is not to take the feature away —
+ * it is to stop flickering ten frames a second at someone who said that hurts.
+ */
+const PLAY_STEP_CALM_MS = 1000;
+/**
+ * A function, not a constant: it reads the vocabulary and the geometry declared below it, and
+ * it takes the view because only one of the two has a scrubber to feed.
+ */
+function pageScript(view) {
+    return `
 (function () {
   var live = document.getElementById('live'), age = document.getElementById('age');
   var off = document.getElementById('offline'), why = document.getElementById('why');
+  var limits = document.getElementById('limits');
   var last = Date.now(), failing = false, inFlight = false, since = 0, gen = 0;
 
   function ago(ms) {
@@ -607,6 +886,15 @@ const SCRIPT = `
         if (body.trim() === '') throw new Error('The server answered with an empty page.');
         if (!mineStill()) return;
         live.innerHTML = body;
+        // The account's gauges, lifted out of the fragment and into the header where they
+        // belong. Here rather than in the fragment's own place on the page because a limit is
+        // the account's and not a session's; here rather than in the shell alone because the
+        // NUMBERS arrive with the fleet, and a five-hour window that stopped counting down
+        // would be the one thing on this page still claiming to be about now.
+        // Inside the accepted-answer branch on purpose: a body that was refused is a body
+        // nothing is read out of, the account's numbers included.
+        var src = document.getElementById('limits-src');
+        if (src) limits.innerHTML = src.innerHTML;
         last = Date.now();
         failing = false;
       });
@@ -625,15 +913,345 @@ const SCRIPT = `
     });
   }
 
+  // ── the day behind the present ──────────────────────────────────────────────────────
+  //
+  // The record is asked for once, and every drag after that is a lookup in it. The state of
+  // the replay lives here rather than in the fragment for the same reason the tabs do: /live
+  // is swapped wholesale every five seconds, and the reader's hand is not the server's to move.
+
+  var replay = document.getElementById('replay'), scrub = document.getElementById('scrub');
+  var playBtn = document.getElementById('play'), covers = document.getElementById('covers');
+  var rview = document.getElementById('replay-view'), rmap = document.getElementById('replay-map');
+  var rmeta = document.getElementById('replay-meta'), note = document.getElementById('replaying');
+  var rlimits = document.getElementById('replay-limits');
+  var atEl = document.getElementById('replay-at'), toLive = document.getElementById('to-live');
+  var record = null, recordAt = 0, at = -1, replaying = false, playing = null, hgen = 0;
+
+  // The vocabulary and the geometry, handed over rather than written twice: three words for
+  // the three kinds of missing, three glyphs for the three states, one dial radius.
+  var WHY = ${JSON.stringify(CTX_WHY)}, SHAPE = ${JSON.stringify(SHAPE)};
+  var INTERACTIVE = ${JSON.stringify(INTERACTIVE)};
+  var ENT = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+  var R = ${DIAL_R}, C = 2 * Math.PI * R;
+  var STEP = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches
+    ? ${PLAY_STEP_CALM_MS} : ${PLAY_STEP_MS};
+
+  function esc(v) {
+    if (v === null || v === undefined || v === '') return '<span class="dim">—</span>';
+    return String(v).replace(/[&<>"']/g, function (c) { return ENT[c]; });
+  }
+
+  /** A lookup that cannot be answered by Object.prototype. */
+  function own(table, key) {
+    return Object.prototype.hasOwnProperty.call(table, key);
+  }
+
+  function two(n) { return (n < 10 ? '0' : '') + n; }
+  function hhmm(t) { var d = new Date(t); return two(d.getHours()) + ':' + two(d.getMinutes()); }
+
+  // A day-long ring can straddle one midnight, and "09:14 – 08:59" reads as a span running
+  // backwards until the older edge says which day it is.
+  function edge(t, ref) {
+    return hhmm(t) + (new Date(t).getDate() === new Date(ref).getDate() ? '' : ' yesterday');
+  }
+
+  // What the range covers, in the record's own terms. Never "a day": that is the size of the
+  // ring, and a serve ten minutes old has seen ten minutes.
+  function coversText() {
+    var n = record.samples.length;
+    if (n === 0) {
+      // A record empty because every reading FAILED is not a record that has just started, and
+      // this was the one branch that threw that away: ten hours of a collector that could not
+      // run read exactly like a serve thirty seconds old.
+      return record.missed
+        ? 'Nothing recorded — this serve started at ' + hhmm(record.since) + ' and '
+          + record.missed + ' minute' + (record.missed === 1 ? '' : 's') + ' were due and never read.'
+        : 'Nothing recorded yet — this serve started at ' + hhmm(record.since)
+          + ' and takes a reading every ' + Math.round(record.cadence / 1000) + 's.';
+    }
+    var last = record.samples[n - 1].t;
+    return 'Covering ' + edge(record.since, last) + ' – ' + hhmm(last)
+      // Not "when the page loaded": the record is asked for again when a tab that has been
+      // away comes back, so the sentence names the last time this page asked rather than a
+      // moment it may be hours past.
+      + ', as this page last had it — ' + n + ' reading' + (n === 1 ? '' : 's')
+      // A gap that says it is a gap is not a gap. The handle steps through readings, not
+      // through minutes, and a record with holes in it is not a smooth walk.
+      + (record.missed ? ', ' + record.missed + ' minute' + (record.missed === 1 ? '' : 's') + ' with no reading' : '')
+      + '. The record keeps each reading, not how old that reading was, so nothing replayed here is dated.';
+  }
+
+  function ready() {
+    var n = record.samples.length;
+    replay.hidden = false;
+    covers.textContent = coversText();
+    scrub.max = String(n === 0 ? 0 : n - 1);
+    scrub.disabled = n === 0;
+    playBtn.disabled = n === 0;
+  }
+
+  // Revealed, not hidden, when the record cannot be had: a scrubber that silently never
+  // appears is indistinguishable from one this build does not have.
+  function noRecord(said) {
+    replay.hidden = false;
+    scrub.disabled = true;
+    playBtn.disabled = true;
+    covers.textContent = said;
+  }
+
+  function load() {
+    // The same generation guard the fleet poll carries, for the same reason and one more.
+    // The replaying flag is read when the tab regains focus; the answer lands later, and
+    // a reader's hand can arrive in between — so the question is asked AGAIN at the moment of
+    // the swap. Without it the record was replaced under a live scrub: the handle pointing at
+    // one minute, the map drawing another, out of a record that no longer existed.
+    var mine = ++hgen;
+    return fetch('/api/history', { cache: 'no-store' }).then(function (res) {
+      // The same refusal the fragment makes, for the same reason: what comes back is parsed
+      // and drawn into this page, and loopback proves where bytes came from, not who wrote them.
+      if (!res.headers.get('X-Tarmac')) throw new Error('The answer on this port did not come from tarmac.');
+      return res.text().then(function (body) {
+        if (!res.ok) throw new Error(body.split('\\n').filter(Boolean).join(' ').slice(0, 200));
+        var got = JSON.parse(body);
+        if (!got || !got.samples) throw new Error('the record came back in a shape this page does not know');
+        if (mine !== hgen || replaying) return;
+        record = got;
+        recordAt = Date.now();
+        ready();
+      });
+    }).catch(function (e) {
+      if (mine !== hgen) return;
+      // A refresh is not a first load. Failing one is no reason to take away a record the page
+      // is already holding — and saying "the record could not be read" over one the reader is
+      // scrubbing would be false. The fleet poll's own banner already says the server is quiet.
+      if (record !== null) return;
+      noRecord('The record could not be read — ' + String((e && e.message) || e).slice(0, 200));
+    });
+  }
+
+  // One node, out of what the ring holds and nothing more. No name, for any kind of session:
+  // a background session is named after the prompt it was given, and the ring stores none.
+  function nodeOf(x, anchored) {
+    // The map's own rule, in the map's own words: an absent kind is not evidence of an agent,
+    // and a fleet where nothing calls itself interactive is a fleet whose source moved.
+    var role = !anchored || x.kind === null || x.kind === undefined || x.kind === INTERACTIVE ? 'session' : 'agent';
+    // Own keys only. A bare read inherits from Object.prototype, so "constructor" and
+    // "toString" passed this guard and reached the markup below — into an attribute
+    // unescaped, and into the glyph slot as a function body.
+    var state = own(SHAPE, x.state) ? x.state : 'unknown';
+    var pct = typeof x.ctxPct === 'number' ? x.ctxPct : null;
+    // The ring keeps each reading and never how old that reading was, so the arc weight that
+    // says how much a reading may be believed cannot be earned here. It is not the live
+    // default either: this third value is de-weighted in the stylesheet, and never the warning
+    // hue, which would claim the opposite — that the reading is known to be old.
+    return '<article class="node" data-role="' + role + '" data-state="' + state + '" data-reading="undatable">'
+      // No halo, ever. It means a frame landed moments ago, which is never true of a sample.
+      + '<div class="dial"><svg viewBox="0 0 80 80" aria-hidden="true">'
+      + '<circle class="track' + (pct === null ? ' unmeasured' : '') + '" cx="40" cy="40" r="' + R + '"/>'
+      + (pct === null ? '' : arcOf(pct))
+      + '</svg><div class="val">'
+      + (pct === null
+        ? '<span class="why"><b>—</b>' + esc(own(WHY, x.ctxState) ? WHY[x.ctxState] : 'no reading') + '</span>'
+        : '<span class="pct">' + pct + '<i>%</i></span>')
+      + '</div></div>'
+      + '<div class="who"><span class="shape" aria-hidden="true">' + SHAPE[state] + '</span>'
+      + '<span class="sr">' + state + '</span>'
+      + '<span class="project">' + esc(x.project) + '</span></div>'
+      // The one caption the ring can fill. Guarded on the state as well as on the field: a
+      // reason left over beside another state is not a session waiting for anything, and esc()
+      // answers an absent field with a dash, which would caption a node "waiting for —".
+      + (state === 'waiting' && x.waitingFor ? '<div class="sub waiting-for">' + esc(x.waitingFor) + '</div>' : '')
+      + (x.kind === null || x.kind === undefined || x.kind === INTERACTIVE ? '' : '<div class="sub">' + esc(x.kind) + '</div>')
+      + (typeof x.costUsd === 'number' ? '<div class="sub">$' + x.costUsd.toFixed(2) + '</div>' : '')
+      + '</article>';
+  }
+
+  // The server's own arithmetic, off the server's own radius: a fraction of the real
+  // circumference, never pathLength, so a browser that ignores it cannot close every ring
+  // into a full context window.
+  function arcOf(pct) {
+    var filled = (Math.min(100, Math.max(0, pct)) / 100) * C;
+    var r2 = function (n) { return Math.round(n * 100) / 100; };
+    return '<circle class="arc" cx="40" cy="40" r="' + R + '" transform="rotate(-90 40 40)"'
+      + ' stroke-dasharray="' + r2(filled) + ' ' + r2(C - filled) + '"/>';
+  }
+
+  // ── the account, as it stood that minute ────────────────────────────────────────────
+  //
+  // The second thing this page interprets twice, and for the same reason as the dials: a
+  // replay is a lookup in samples the page already holds, and the ring holds the payload's own
+  // rate_limits rather than anything rendered. The vocabulary, the dash and the two windows are
+  // handed over below rather than written again; what is mirrored is the arithmetic, and a
+  // test compares this output with the server's character for character.
+  //
+  // What it counts the reset against is the SAMPLE's own clock, never Date.now(). A reset is a
+  // moment, and "how long is left" is a question about the minute being replayed: at 09:14 the
+  // five-hour window had two hours to run, and it had two hours to run whatever time it is now.
+  // Counted against the present, every reset in the record would read as long overdue the
+  // moment it aged past — a page announcing an account over its limit for a day that ended.
+  var LIMITS = ${JSON.stringify(LIMIT_WINDOWS)}, LIMIT_WHY = ${JSON.stringify(LIMIT_WHY)};
+  var DASH = ${JSON.stringify(dash())};
+
+  function left(ms) {
+    var m = Math.floor(ms / 60000);
+    if (m < 1) return '<1m';
+    if (m < 60) return m + 'm';
+    var h = Math.floor(m / 60);
+    if (h < 24) return m % 60 === 0 ? h + 'h' : h + 'h ' + (m % 60) + 'm';
+    var d = Math.floor(h / 24);
+    return h % 24 === 0 ? d + 'd' : d + 'd ' + (h % 24) + 'h';
+  }
+
+  function gaugesOf(rl, now) {
+    // Anything can be in a sample: rate_limits is a shape someone else versions, and the ring
+    // stored whatever the payload had. None of it may throw in the header of a dashboard.
+    var ok = rl !== null && rl !== undefined && typeof rl === 'object' && !Array.isArray(rl);
+    var html = '';
+    for (var i = 0; i < LIMITS.length; i++) {
+      var w = ok ? rl[LIMITS[i].key] : undefined;
+      var has = w !== null && w !== undefined && typeof w === 'object' && !Array.isArray(w) && 'used_percentage' in w;
+      var v = has ? w.used_percentage : undefined;
+      var pct = has && typeof v === 'number' && Number.isFinite(v) && v >= 0 && v <= 100 ? Math.floor(v) : null;
+      var at = has && typeof w.resets_at === 'number' && Number.isFinite(w.resets_at) ? w.resets_at : null;
+      var ms = at === null ? null : at * 1000 - now;
+      // The server's horizon, off the server's own number: a reset further from the reading than
+      // the longest window can be is not this account's reset, whatever it says.
+      if (ms !== null && Math.abs(ms) > ${RESET_HORIZON_MS}) ms = null;
+      // Presence, never value: a window that is there and null is a number not taken yet, and
+      // one that is gone is a schema that moved. Same discriminant as everywhere else here.
+      // Read off rl and NOT off ok: rate_limits carrying something that is not a pair of
+      // windows — an array, which the snapshot reader lets through — is a schema that moved,
+      // not an account nobody measured. Written as !ok, this said the opposite of the server
+      // about the very same minute.
+      var why = pct !== null ? null : (rl === null || rl === undefined || (has && v === null)) ? 'absent' : 'drift';
+      html += '<div class="gauge"><span class="lbl" aria-hidden="true">' + LIMITS[i].label + '</span>'
+        + '<span class="sr">' + LIMITS[i].said + '</span>'
+        + (pct === null
+          ? '<span class="rail unmeasured" aria-hidden="true"></span>'
+          : '<span class="rail" aria-hidden="true"><i style="width:' + pct + '%"></i></span>')
+        + '<span class="num">' + (pct === null ? DASH : pct + '%') + '</span>'
+        + '<span class="reset">'
+        + (pct === null
+          ? LIMIT_WHY[why]
+          : ms === null
+            ? 'reset ' + DASH
+            : ms > 0 ? 'resets in ' + left(ms) : 'reset was due ' + left(-ms) + ' ago')
+        + '</span></div>';
+    }
+    return html;
+  }
+
+  function nodesOf(s) {
+    var anchored = false, html = '', i;
+    for (i = 0; i < s.sessions.length; i++) if (s.sessions[i].kind === INTERACTIVE) anchored = true;
+    // In the order the sample carries. The live map places an agent beside the session it
+    // shares a directory with; the ring holds no directory, so the past is drawn in the order
+    // the fleet was sorted in rather than in a grouping this page would have to invent.
+    for (i = 0; i < s.sessions.length; i++) html += nodeOf(s.sessions[i], anchored);
+    return html;
+  }
+
+  // The fleet of that minute, counted from that minute. A partial sum is never presented as
+  // the total, the same rule the live header follows.
+  function metaOf(s) {
+    var n = s.sessions.length, busy = 0, cost = 0, reporting = 0;
+    for (var i = 0; i < n; i++) {
+      if (s.sessions[i].state === 'busy') busy++;
+      if (typeof s.sessions[i].costUsd === 'number') { cost += s.sessions[i].costUsd; reporting++; }
+    }
+    return n + ' session' + (n === 1 ? '' : 's') + ' · ' + busy + ' busy · '
+      + (reporting === 0 ? 'cost —'
+        : '$' + cost.toFixed(2) + (reporting < n ? ' (' + reporting + '/' + n + ' reporting cost)' : ''));
+  }
+
+  function draw(i) {
+    var s = record && record.samples[i];
+    if (!s) return;
+    at = i;
+    replaying = true;
+    scrub.value = String(i);
+    // The handle's own value is an index, so a reader who cannot see the banner would be read
+    // "3" while the fleet on screen is three hours old. The minute travels with the handle.
+    scrub.setAttribute('aria-valuetext', hhmm(s.t));
+    atEl.textContent = hhmm(s.t);
+    rmeta.textContent = metaOf(s);
+    rmap.innerHTML = nodesOf(s);
+    // The account of that minute, in the place the live pair occupies — which the body class
+    // has just taken down. One allowance on screen at a time, and it is the one belonging to
+    // the fleet being shown.
+    rlimits.innerHTML = gaugesOf(s.rateLimits, s.t);
+    rlimits.hidden = false;
+    note.hidden = false;
+    rview.hidden = false;
+    document.body.classList.toggle('replaying', true);
+  }
+
+  function stopPlay() {
+    if (playing) { clearInterval(playing); playing = null; }
+    playBtn.textContent = 'Play';
+  }
+
+  // Back to now, in one gesture, with nothing of the past left behind a hidden attribute.
+  // The position is NOT reset: the handle stays where the reader let go of it, so what it
+  // shows and where play would pick up are the same place.
+  function present() {
+    stopPlay();
+    replaying = false;
+    note.hidden = true;
+    rview.hidden = true;
+    rlimits.hidden = true;
+    rlimits.innerHTML = '';
+    rmap.innerHTML = '';
+    scrub.removeAttribute('aria-valuetext');
+    document.body.classList.toggle('replaying', false);
+  }
+
+  function play() {
+    if (playing) { stopPlay(); return; }
+    if (!record || record.samples.length === 0) return;
+    // From the top when there is nothing to resume: a play button that ends where it started
+    // has played nothing.
+    draw(at < 0 || at >= record.samples.length - 1 ? 0 : at);
+    playBtn.textContent = 'Pause';
+    playing = setInterval(function () {
+      // It stops at the end rather than looping back: a day that restarts on its own is a
+      // day whose beginning and end are impossible to tell apart.
+      if (at >= record.samples.length - 1) { stopPlay(); return; }
+      draw(at + 1);
+    }, STEP);
+  }
+
+  scrub.addEventListener('input', function () { stopPlay(); draw(Number(scrub.value)); });
+  playBtn.addEventListener('click', play);
+  toLive.addEventListener('click', present);
+
   setInterval(tick, 1000);
   setInterval(function () { if (!document.hidden) poll(); }, ${REFRESH_MS});
-  document.addEventListener('visibilitychange', function () { if (!document.hidden) poll(); });
+  document.addEventListener('visibilitychange', function () {
+    if (document.hidden) return;
+    poll();
+    // The record was answered once, at load. A tab left alone all afternoon holds a record
+    // that stops where the reader's attention did — so it is asked again on the way back in.
+    // Never while a reader is scrubbing (the record under their hand is not ours to swap, and
+    // the load asks that question again when the answer lands), and never for one younger than
+    // a single slot. A record that could never be read at all is not retried here: it stays
+    // null, the guard holds, and the reader has a sentence saying so rather than a page
+    // quietly trying again forever.
+    if (!replaying && record !== null && Date.now() - recordAt >= record.cadence) load();
+  });
+  // Only where there is a scrubber to feed. The table view hides these controls in CSS, and a
+  // full ring is megabytes of session ids, projects and costs: fetching and parsing it to
+  // write a sentence into an element with display:none is a cost paid on every load of the
+  // page most people open first, for a control they cannot see.
+  if (${view === 'map'}) load();
 })();
 `;
+}
 /**
- * The sort puts busy first, unknown next, idle last. This is where that order is given its
- * weight — an accent down the row and a bold name for the ones that are working, a quiet row
- * for the ones that are not.
+ * The sort puts waiting first — the one row that is work for the reader — then busy, then
+ * unknown, idle last. This is where that order is given its weight — an accent down the row
+ * in the state's own hue, a bold name for the ones that are working, a quiet row for the
+ * ones that are not.
  *
  * The state travels three ways at once: a shape, a word, and an attribute. Colour alone is
  * no signal to a reader who cannot separate two of ours, and `data-state` is what the narrow
@@ -641,7 +1259,7 @@ const SCRIPT = `
  */
 function renderRow(r) {
     const state = stateOf(r);
-    const word = stateWord(state, r);
+    const word = stateLabel(state, r);
     // `data-label` is not decoration: below ~46rem the columns stack, the header row is gone,
     // and a value whose column has no name is a bare "—" that could mean anything.
     // Every cell holds exactly ONE element. Stacked on a phone the label sits left and the
@@ -658,7 +1276,7 @@ function renderRow(r) {
     <td data-label="Uptime" class="num dim"><span class="v">${r.uptimeMs === null ? dash() : esc(duration(r.uptimeMs))}</span></td>
   </tr>`;
 }
-const SHAPE = { busy: '●', unknown: '▲', idle: '○' };
+const SHAPE = { busy: '●', waiting: '◐', unknown: '▲', idle: '○' };
 /**
  * The state in words, for both surfaces — derived from the state the MODEL decided, never
  * from the row a second time. Two expressions for one fact on one element is how a node ends
@@ -668,6 +1286,13 @@ const SHAPE = { busy: '●', unknown: '▲', idle: '○' };
  * of keeping it is that someone reading the page can go and find out what `compacting` means.
  */
 const stateWord = (state, r) => state === 'unknown' ? (r.status ?? 'unknown') : state;
+/**
+ * The same word with the reason attached, for the table — which has one cell per session and
+ * no room for a caption of its own. The map keeps them apart instead: the word is what a
+ * screen reader is handed in place of the glyph, and repeating the reason there would read it
+ * twice, once hidden and once out of the caption below it.
+ */
+const stateLabel = (state, r) => state === 'waiting' && r.waitingFor ? `${stateWord(state, r)} · ${r.waitingFor}` : stateWord(state, r);
 /**
  * Which kind of missing a missing percentage is. One lookup for both surfaces: the table
  * says it beside a dash, the map says it inside an empty dial, and a second copy of these
@@ -697,6 +1322,10 @@ export function renderMap(fleet) {
  * dial is no reading at all, the shape beside the name is the session's state, and the halo
  * says one landed moments ago. The words under them are the same ones the table uses for the
  * same conditions — including the halo's, which would otherwise live only in a drawing.
+ *
+ * One state brings a caption with it. A waiting session is the only one where the shape
+ * leaves a question the source can answer — which human answer it is halted on — and it is
+ * printed directly under the name, not hidden in a title attribute nobody hovers on a phone.
  */
 function renderNode({ row: r, role, state, reading, measured, pulse }) {
     // The model owns "is there a number"; this reads its verdict rather than asking the row a
@@ -722,6 +1351,7 @@ function renderNode({ row: r, role, state, reading, measured, pulse }) {
         ${pulse ? `<span class="sr">a reading just landed</span>` : ''}
       </div>
       <div class="who"><span class="shape" aria-hidden="true">${SHAPE[state]}</span><span class="sr">${esc(stateWord(state, r))}</span><span class="project">${esc(r.project)}</span></div>
+      ${state === 'waiting' && r.waitingFor ? `<div class="sub waiting-for">${esc(r.waitingFor)}</div>` : ''}
       <div class="sub">${esc(r.name)}</div>
       ${r.kind === null || r.kind === INTERACTIVE ? '' : `<div class="sub">${esc(r.kind)}</div>`}
       <div class="sub">${esc(r.model)}${r.effort === null ? '' : ` · ${esc(r.effort)}`}</div>