@adrrr/tarmac 0.8.1 → 0.10.0

package/dist/render.js

@@ -8,9 +8,10 @@
 // they are written side by side, and the suite can reach both.
 import { formatDuration } from './config.js';
 import { HISTORY_MAX_BYTES } from './history-store.js';
-import { buildMap, INTERACTIVE, stateOf } from './map.js';
+import { buildMap, stateOf } from './map.js';
+import { INTERACTIVE } from './sessions.js';
 import { HISTORY_CSS, HISTORY_PHONE_CSS, HISTORY_PALETTE, HISTORY_TOUCH_CSS, historyScript, renderHistoryView, } from './history-view.js';
-import { schemaNotice } from './schema.js';
+import { schemaNoteParts, schemaNotice } from './schema.js';
 import { LIMIT_WINDOWS, RESET_HORIZON_MS, readLimits } from './limits.js';
 import { accountLimits, busyOnStaleFleet } from './fleet.js';
 /**
@@ -192,20 +193,28 @@ export function renderTable({ rows, health }) {
         warns.push(`! ${health.snapshotsUnreadable} snapshot file(s) present but unreadable — schema may have moved, check for a newer tarmac`);
     if ((health.snapshotsDuplicates ?? 0) > 0)
         warns.push(`! ${health.snapshotsDuplicates} snapshot file(s) claim a session id another file already claims — the freshest was kept`);
+    // Not folded into the line above: a name that is not a file is a directory somebody put
+    // something in, and sending them to look for a newer tarmac would be advice for the schema.
+    if ((health.snapshotsNotFiles ?? 0) > 0)
+        warns.push(`! ${health.snapshotsNotFiles} name(s) in the snapshot directory are not regular files — stepped over unread, never opened`);
     // Covers both "not allowed to look" and "there is nothing there to look at", so the words
     // have to fit an errno as well as a path that points nowhere.
     if (health.snapshotsError)
         warns.push(`! snapshots unavailable — ${health.snapshotsError}`);
     else if (health.schemaBroken)
         warns.push('! every snapshot drifted — the statusline payload schema moved');
-    else if (health.covered < health.sessions)
-        warns.push(
+    else if (health.covered < health.chainable) {
         // The count travels, for the same reason `unreadable` does one line up: without it
         // this line reads as "run install", and for a session id the wrapper declines to file
-        // that is advice already taken which can never work.
-        health.unfilable > 0
-            ? `! statusline chained on ${health.covered}/${health.sessions} sessions — ${health.unfilable} session(s) with an id tarmac never files`
-            : `! statusline chained on ${health.covered}/${health.sessions} sessions`);
+        // that is advice already taken which can never work. And when the denominator is
+        // smaller than the fleet, the line says who it left out: "1/2 sessions" over a
+        // four-row table is a comparison the reader should not have to resolve alone.
+        const excluded = health.sessions - health.chainable;
+        const counted = `${health.covered}/${health.chainable} sessions${excluded > 0 ? ` (${excluded} agent(s) draw no frame)` : ''}`;
+        warns.push(health.unfilable > 0
+            ? `! statusline chained on ${counted} — ${health.unfilable} session(s) with an id tarmac never files`
+            : `! statusline chained on ${counted}`);
+    }
     if (health.stale > 0)
         warns.push(`! ${health.stale} reading(s) marked "!" are older than ${formatDuration(health.staleAfterMs)} (--stale-after)`);
     const skewed = rows.filter(ahead).length;
@@ -365,6 +374,9 @@ export function renderLive(fleet) {
     if ((health.snapshotsDuplicates ?? 0) > 0) {
         warnings.push(`${health.snapshotsDuplicates} snapshot file(s) claim a session id another file already claims — the freshest reading was kept and the other ignored. Two wrappers may be writing into the same directory.`);
     }
+    if ((health.snapshotsNotFiles ?? 0) > 0) {
+        warnings.push(`${health.snapshotsNotFiles} name(s) in the snapshot directory are not regular files — a directory, a link or a named pipe wearing a snapshot's name is stepped over rather than opened, because reading one can wait for ever. Whatever else is there was read as usual.`);
+    }
     if (health.snapshotsError) {
         // A permission error is ours to report, not the user's to be blamed for.
         warnings.push(`The snapshot directory could not be used — ${health.snapshotsError}. Context readings are unavailable, and this is not an install problem.`);
@@ -372,13 +384,18 @@ export function renderLive(fleet) {
     else if (health.schemaBroken) {
         warnings.push(`Every snapshot drifted — Claude Code's statusline schema has probably moved. Context readings are dead until the payload shape is re-checked.`);
     }
-    else if (health.covered < health.sessions) {
-        const blind = health.sessions - health.covered;
+    else if (health.covered < health.chainable) {
+        const blind = health.chainable - health.covered;
+        // Same naming as the table line: the denominator is the chainable population, and the
+        // rows below list agents as "not chained" too — without the parenthesis the banner and
+        // the rows disagree on how many are missing.
+        const excluded = health.sessions - health.chainable;
+        const counted = `${health.covered}/${health.chainable} sessions${excluded > 0 ? ` (${excluded} agent(s) draw no frame)` : ''}`;
         warnings.push(health.unfilable === 0
-            ? `Statusline chained on ${health.covered}/${health.sessions} sessions — the rest report no context. Run \`tarmac install\` and give them one TUI frame.`
+            ? `Statusline chained on ${counted} — the rest report no context. Run \`tarmac install\` and give them one TUI frame.`
             : health.unfilable >= blind
-                ? `Statusline chained on ${health.covered}/${health.sessions} sessions — the rest carry a session id that is not the UUID tarmac files snapshots under, so no frame will ever produce one. Installing again will not change that.`
-                : `Statusline chained on ${health.covered}/${health.sessions} sessions — ${blind} report no context, and ${health.unfilable} of them will never be filed: the session id is not the UUID tarmac files snapshots under. For the others, run \`tarmac install\` and give them one TUI frame.`);
+                ? `Statusline chained on ${counted} — the rest carry a session id that is not the UUID tarmac files snapshots under, so no frame will ever produce one. Installing again will not change that.`
+                : `Statusline chained on ${counted} — ${blind} report no context, and ${health.unfilable} of them will never be filed: the session id is not the UUID tarmac files snapshots under. For the others, run \`tarmac install\` and give them one TUI frame.`);
     }
     if (health.unknownStatus > 0) {
         warnings.push(`${health.unknownStatus} session(s) report a status tarmac does not know — treated as unknown, not idle.`);
@@ -403,14 +420,25 @@ export function renderLive(fleet) {
     // 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.
+    // Each one in two halves: the fact, printed, and what follows from it behind a disclosure.
+    // Between them they keep every word these notes have ever had — what changed is that the
+    // page no longer ends in four to nine lines of prose a reader did not scroll there for.
     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.`);
+        notes.push({
+            key: 'stale',
+            // The legend for the mark, and the only half of this a reader ever has to be handed: it
+            // is what makes `! 3h ago` on a row something they can argue with.
+            lead: `Readings past the ${formatDuration(health.staleAfterMs)} freshness threshold are dated where they sit.`,
+            // Why that is so, and the flag that moves it. Every word it had; one join that was an
+            // em dash is a full stop.
+            rest: `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);
+    const schema = schemaNoteParts(health.schemaGuard);
     if (schema)
         notes.push(schema);
     // Both views, every time, out of the one reading the page just asked for. The tabs are
@@ -438,7 +466,24 @@ export function renderLive(fleet) {
 <div class="meta">${health.sessions} session${health.sessions === 1 ? '' : 's'} · ${health.busy} busy · ${cost(health)}<span class="stamp"> · ${esc(new Date(health.generatedAt).toISOString())}</span></div>
 ${warnings.map((w) => `<div class="warn">${esc(w)}</div>`).join('')}
 ${body}
-<div id="fleet-notes">${notes.map((n) => `<div class="note">${esc(n)}</div>`).join('')}</div>`;
+<div id="fleet-notes">${notes.map(renderNote).join('')}</div>`;
+}
+/**
+ * A footnote, folded.
+ *
+ * `<details>` and not a script: the page's one honest claim is that it is readable without
+ * JavaScript, and a disclosure the browser owns is open to a keyboard, to a screen reader and
+ * to a find-in-page that reaches inside a closed one. Shut, because open it is the wall of
+ * prose this was written to fold — and the LEAD is outside the fold, so what a reader is
+ * handed by `aria-describedby` is the fact, never a promise that there is one somewhere.
+ *
+ * A note with nothing behind its lead is not a disclosure at all: an empty fold is a control
+ * that answers a press with nothing.
+ */
+function renderNote(n) {
+    return n.rest === ''
+        ? `<div class="note">${esc(n.lead)}</div>`
+        : `<details class="note" id="note-${esc(n.key)}"><summary>${esc(n.lead)}</summary>${esc(n.rest)}</details>`;
 }
 /**
  * The account's two windows, for the page's header.
@@ -576,7 +621,7 @@ function ago(ms) {
     const m = Math.round(s / 60);
     return m < 60 ? `${m}m` : `${Math.round(m / 60)}h`;
 }
-export function renderPage(fleet, view = 'table', { historyEnabled = false } = {}) {
+export function renderPage(fleet, view = 'table', { historyEnabled = false, demo = false } = {}) {
     // 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.
@@ -589,36 +634,169 @@ export function renderPage(fleet, view = 'table', { historyEnabled = false } = {
 <style>
   /* --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; } }
+  /* Two planes, not one. Everything on this page used to be a hairline on the same white:
+     a card inside a berth was two identical rules nested, and nothing was ever ON anything.
+     --bg is now the FLOOR and --surface the panels standing on it, which is the whole of what
+     makes a table read as a panel rather than as a document. The old names all survive, so
+     every rule written against them still resolves. */
+  :root { color-scheme: light dark;
+          --fg:#0f1218; --dim:#5f6875;
+          --bg:#f3f4f6; --surface:#fff; --surface-2:#f7f8fa;
+          /* A hairline is decoration; a control's edge is not. The second is darker and is
+             still under the 3:1 a non-text control would need to be identified by — so no
+             control on this page is identified by its border alone: the active tab keeps its
+             ink and its weight, the scrubber's thumb is ringed in --fg, states keep their hue. */
+          --line:#e2e5ea; --line-strong:#b9c1cb;
+          --warn:#b45309; --warnbg:#fffbeb; --busy:#047857; --wait:#1d4ed8;
+          --shadow-1:0 1px 2px rgba(16,24,40,.06);
+          --shadow-2:0 1px 2px rgba(16,24,40,.06), 0 12px 28px -14px rgba(16,24,40,.22);
+          /* The lit top edge of a raised surface. It is a dark-mode trick and reads as dirt in
+             light, so in light it is nothing — declared all the same, because every rule that
+             wants it lists it unconditionally. */
+          --edge:0 0 0 0 transparent;
+          --r-sm:8px; --r-md:12px; --r-lg:14px; --r-pill:99px;
+          --gutter:1.5rem; --maxw:80rem;
+          /* The face the numbers wear. Values only — a table set in mono is a terminal dump,
+             not an instrument. */
+          --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,"Cascadia Mono","Segoe UI Mono","Roboto Mono",monospace;
+          /* How faint a chart's line goes when another one is being read. Here rather than in
+             the script because it is the one drawing value that differs by theme, and the
+             script has no business asking a browser which theme it is in. */
+          --fade:.72; --fade-iso:.3; }
+  @media (prefers-color-scheme: dark) { :root {
+          --fg:#e6eaf0; --dim:#8b97a6;
+          --bg:#0a0d11; --surface:#12171e; --surface-2:#171d25;
+          --line:#232b35; --line-strong:#454f5e;
+          --warn:#fbbf24; --warnbg:color-mix(in srgb,#fbbf24 10%,#12171e); --busy:#34d399; --wait:#93c5fd;
+          --shadow-1:0 1px 2px rgba(0,0,0,.55);
+          --shadow-2:0 1px 2px rgba(0,0,0,.55), 0 12px 28px -14px rgba(0,0,0,.75);
+          --edge:inset 0 1px 0 rgba(255,255,255,.045);
+          --fade:.6; } }
   /* Eight categorical hues for the history view, kept apart from the four above: those four
      say what a session is DOING, and a chart that borrowed one would be colouring a project
      with the word for busy. */${HISTORY_PALETTE}
-  body { margin:0; padding:2rem 1.25rem; background:var(--bg); color:var(--fg);
+  /* The floor is the html element's, not the body's: the body is now a column with a width, so
+     its own background would stop at the column's edge and leave white gutters. */
+  html { background:var(--bg); }
+  /* A page, not a document. Unbounded, the table spread eight columns over 1440px and the map
+     left 400px of dead white on the right — nothing framed the content, so nothing read as a
+     product. */
+  body { margin-inline:auto; max-width:var(--maxw); padding:1.5rem var(--gutter) 2rem;
+         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; }
-  h1 { font-size:1.1rem; margin:0; letter-spacing:.02em; }
-  .meta { color:var(--dim); font-size:.85rem; }
+  /* The header is a panel like the rest, rather than six unrelated objects on a line. A card
+     and not a full-bleed band: a band stopped at the column's width leaves two cut corners at
+     the top of the page, and a real full-bleed one needs 100vw, which opens a horizontal
+     scrollbar on any OS that draws classic scroll bars. */
+  header { display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; margin:0 0 1rem;
+           background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
+           box-shadow:var(--shadow-1), var(--edge); padding:.6rem .9rem; }
+  /* The wordmark in the face the numbers wear. It was the smallest thing on the page that
+     mattered — 15.4px beside a 20px dial and an amber badge — and mono separates the name of
+     the product from the UI around it for zero bytes and zero claim. */
+  h1 { font-family:var(--mono); font-size:1.05rem; font-weight:600; margin:0; letter-spacing:.02em; }
+  .meta { color:var(--dim); font-size:.85rem; }${demo
+        ? `
+  /* The demo marker. It borrows the warning's hues rather than the dim chrome the tabs use:
+     what it says is not chrome, and a badge a reader's eye files with the furniture is a badge
+     that is not in the screenshot as far as anybody looking at the screenshot is concerned.
+     Shipped only on a demo, so a plain serve is byte-for-byte the page it always was. */
+  /* Filled rather than outlined. It is the one element on this page whose job is to shout, and
+     the page around it got quieter: a hairline pill on the header's own white no longer reads
+     as a stamp. */
+  .demo-tag { background:color-mix(in srgb, var(--warn) 12%, var(--surface)); color:var(--warn); border:1px solid currentColor; border-radius:99px;
+              padding:.05rem .55rem; font-size:.75rem; font-weight:600; letter-spacing:.02em; white-space:nowrap; }`
+        : ''}
   /* Honest, and out of the way of the fleet: three of these stacked at full padding pushed
      the table below the fold on a laptop, which is its own kind of hidden. */
-  .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; }
+  /* One box, worn by whichever line is up. The replay banner and the line saying the page is
+     live take turns in the same place in the flow, so their box is declared once: two rules
+     would only ever have to disagree by a pixel of padding for entering a replay to move the
+     whole page down, which is the jump this pair exists to remove. The minimum is there
+     because only one of the two carries a button, and a button's own line box is taller than
+     a line of this text. */
+  .warn, .live-state { border:1px solid currentColor; border-radius:var(--r-sm);
+          padding:.4rem .7rem; margin:.3rem 0; font-size:.8rem; line-height:1.45; }
+  /* And the floor on the two that take turns, never on the box: put on the shared rule it grew
+     the offline banner and the noscript warning by 5.5px each — a page redrawn to settle an
+     argument between two other elements. It clears the taller of the pair's own contents, which
+     is the banner's button: 12px of text in a line box its padding and border take past 21px,
+     against 18.56px for a line of the live text. */
+  .replaying-note, .live-state { min-height:1.5rem; }
+  /* An accent down the left edge instead of a frame at full intensity. What these say is true
+     and worth keeping — "1 session reports a status tarmac does not know" — and it is not
+     urgent: a full-width amber box above the fleet made the first thing a reader saw a
+     warning about a footnote. The mark stays, the shout goes. */
+  .warn { background:var(--warnbg); color:var(--fg); border:0;
+          border-left:3px solid var(--warn); border-radius:0 var(--r-sm) var(--r-sm) 0; }
+  .warn strong { color:var(--warn); }
   .warn:last-of-type { margin-bottom:.9rem; }
+  /* The live half: the same box with none of the alarm. Grey on nothing, its border spent on
+     holding the size rather than on drawing one — what is normal reads as chrome, and the page
+     raises its voice only for the minute that is not now. */
+  .live-state:not([hidden]) { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
+  .live-state { color:var(--dim); border-color:transparent; }
+  .live-state strong { font-weight:600; }
+  body.replaying .live-state { display:none; }
+  /* On the map and nowhere else, like the scrubber it belongs to: the table and the curves have
+     no replay, so a line telling them apart from one answers a question their reader cannot
+     ask. Written on the body rather than shipped conditionally, so one shell serves all three. */
+  body:not([data-view="map"]) #live-state { display:none; }
   /* 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; }
+  /* 72ch and a rule above it. At 95ch the paragraph ran the width of a 1440px screen, which is
+     past the measure anybody reads at, and the page ended on a grey slab. A hairline and a
+     column make it the footnote it always was. */
+  .note { color:var(--dim); font-size:.75rem; line-height:1.5; margin:1.5rem 0 0; max-width:72ch;
+          border-top:1px solid var(--line); padding-top:.75rem; }
+  /* One rule for the block, not one per note: two paragraphs each with a line over them is a
+     table of contents. */
+  /* The margin between two of them is also the clearance between two tap targets: each summary
+     draws an overlay .45rem above and below itself, so anything under .9rem here has the first
+     note's own bottom edge opening the second. Pinned by test/phone-view. */
+  #fleet-notes .note + .note { border-top:0; padding-top:0; margin-top:.95rem; }
+  .note code { background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:.05rem .3rem; }
+  /* The fold. The fact is the summary and stays on the page; what follows from it is one press
+     away. The marker is the browser's own — a disclosure a reader already knows how to work
+     beats a caret this page would have had to teach. */
+  /* The padding is not decoration: it is the half of the 44px thumb target that can be drawn.
+     Spent on the overlay instead, the overlay reaches so far past the summary that two stacked
+     notes trade taps — the tabs' 7px bug, on a control set in the smallest type here. */
+  .note summary { font-size:.75rem; padding:.4rem 0; cursor:pointer; }
+  .note summary:focus-visible { outline:2px solid var(--wait); outline-offset:2px; border-radius:4px; }
+  details.note[open] summary { margin-bottom:.3rem; }
   /* Two marks, one weight: a reading that has gone cold, and a reading picked out of several
      that were not about the same window. Both say the number beside them may not be what the
      reader takes it for, so neither may end up quieter than the other. */
   .stale, .mixed { color:var(--warn); font-weight:600; }
-  .wrap { overflow-x:auto; }
+  /* The one place on the page that had no panel. overflow hidden is also what clips the 3px
+     state accent on the first cell to the panel's corners. */
+  .wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--line);
+          border-radius:var(--r-lg); box-shadow:var(--shadow-1), var(--edge); }
   table { border-collapse:collapse; width:100%; min-width:44rem; }
-  th { text-align:left; font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
-       color:var(--dim); padding:.4rem .6rem; border-bottom:1px solid var(--line); white-space:nowrap; }
+  /* A shaded head and a row that answers the pointer: the difference between a <table> and a
+     view. The head is the nested surface, one step off the panel it sits in. */
+  th { text-align:left; font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
+       color:var(--dim); padding:.45rem .6rem; background:var(--surface-2);
+       border-bottom:1px solid var(--line); white-space:nowrap; }
+  th:first-child, td:first-child { padding-left:.85rem; }
+  th:last-child, td:last-child { padding-right:.85rem; }
   td { padding:.5rem .6rem; border-bottom:1px solid var(--line); white-space:nowrap; }
+  /* The panel draws the bottom edge; a last row that draws its own puts two lines there. */
+  tbody tr:last-child td { border-bottom:0; }
+  /* Only where there is a pointer to hover with. On a touchscreen :hover sticks to whatever was
+     tapped last, which would leave one row shaded for as long as the reader looks at it. */
+  @media (hover:hover) and (pointer:fine) { tbody tr:hover td { background:var(--surface-2); } }
   td.num { font-variant-numeric:tabular-nums; }
+  /* ── the face of a number ────────────────────────────────────────────────────────────
+     The values, and only the values. Not a project, not a session name, not a model, not a
+     label: a dashboard set entirely in mono is a terminal dump, and the discipline of putting
+     the instrument face on the measurements alone is the whole of what separates the two.
+     .why is deliberately absent — it holds words ("no reading"), not a reading. */
+  .pct, td.num, .gauge .num, .chart-stat, #replay-at, .key .k-val, .asof {
+          font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:0; }
   .dim { color:var(--dim); }
   /* Shape + word + border, so the state survives a reader who cannot tell our two hues
      apart, and a print. */
@@ -642,6 +820,10 @@ export function renderPage(fleet, view = 'table', { historyEnabled = false } = {
   .bar > i { display:block; height:100%; border-radius:99px; background:var(--dim); }
   .empty { color:var(--dim); }
   .freshness { margin-left:auto; color:var(--dim); font-size:.8rem; font-variant-numeric:tabular-nums; }
+  /* A line break in the header, and nothing else: it exists only on a phone, where the six
+     things up there have to be told which two rows they belong to. Off at every other width,
+     where they fit on one. */
+  .hdr-break { display:none; }
   .pulse { display:inline-block; width:.4rem; height:.4rem; border-radius:99px; background:var(--busy); margin-right:.4rem; vertical-align:middle; }
   /* The failing state is carried by the banner's words; the dashed frame only repeats it. */
   body.failing .pulse { background:var(--warn); }
@@ -649,10 +831,15 @@ export function renderPage(fleet, view = 'table', { historyEnabled = false } = {
   .offline strong { white-space:nowrap; }
   /* The tabs, and what they hide. The shell owns the choice — not the fragment — so a poll
      that swaps the fleet underneath cannot put the reader back on a view they left. */
-  nav { display:flex; gap:.15rem; }
+  /* A segmented control: a sunk track with a raised chip on the tab you are reading, rather
+     than three words of which one has a ring round it. The chip is DECORATION — --line-strong
+     and the shadow are both under the 3:1 a border would need to identify a control on its
+     own, so the ink and the weight stay the signal, exactly as before. */
+  nav { display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--line);
+        border-radius:var(--r-pill); padding:2px; }
   nav a { color:var(--dim); text-decoration:none; font-size:.8rem; font-weight:600; text-transform:uppercase;
-          letter-spacing:.06em; padding:.15rem .55rem; border-radius:99px; border:1px solid transparent; }
-  nav a[aria-current="page"] { color:var(--fg); border-color:var(--line); }
+          letter-spacing:.06em; padding:.2rem .6rem; border-radius:var(--r-pill); border:0; }
+  nav a[aria-current="page"] { color:var(--fg); background:var(--surface); box-shadow:var(--shadow-1); }
   /* A finger is not a cursor. Every control on this page is a pill sized for a pointer that
      lands on a single pixel — about 26px of box against the 44 a thumb is asked to hit — and
      the fix cannot be more padding: that would redraw the page for everyone to solve a problem
@@ -670,9 +857,15 @@ export function renderPage(fleet, view = 'table', { historyEnabled = false } = {
      Map, is 50), so a horizontal inset buys nothing — and at .3rem against a .15rem gap between
      the tabs it made their two overlays overlap by 7px, where a tap meant for Table landed on
      Map because Map's pseudo paints later. */
-  nav a, .replay button, .replaying-note button, .hist-range button, .to-now, .key { position:relative; }
+  nav a, .replay button, .replaying-note button, .hist-range button, .to-now, .key,
+  .note summary { position:relative; }
   @media (pointer: coarse) {
     nav a::after, .replay button::after { content:''; position:absolute; inset:-.7rem 0; }
+    /* The footnote's fold is a control like the rest of them. Its inset is the smallest here
+       because two of them can stand one above the other and the margin between them is the
+       whole of their clearance: what 44px needs beyond the summary's own box is bought in
+       padding above, not in overlay. */
+    .note summary::after { content:''; position:absolute; inset:-.45rem 0; }
     .replaying-note button::after { content:''; position:absolute; inset:-.85rem 0; }${HISTORY_TOUCH_CSS}  }
   body[data-view="table"] .view-map { display:none; }
   body[data-view="map"] .view-table { display:none; }
@@ -683,12 +876,17 @@ ${HISTORY_CSS}
      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. */
+  /* Separated from the tabs by a rule rather than by a gap the eye reads as another gap: the
+     header holds two groups that have nothing to do with each other, and a line is the cheapest
+     way to say so. In the header only — the replayed pair below the banner has no neighbour to
+     be divided from. */
   .limits:not([hidden]) { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
+  header .limits:not([hidden]) { padding-left:.9rem; border-left:1px solid var(--line); }
   .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 .num { font-variant-numeric:tabular-nums; font-weight:600; }
   .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
@@ -731,21 +929,79 @@ ${HISTORY_CSS}
      label for the button rather than for the pair, and take width from the slider to do it. */
   .replay .replay-name { flex-basis:100%; font-size:.7rem; font-weight:700; letter-spacing:.07em;
             text-transform:uppercase; color:var(--dim); }
-  .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 one filled button on the whole dashboard, and the only place the page spends maximum
+     contrast: everything else here is a reading, and this is the single thing a reader is
+     invited to press. */
+  .replay button { font:inherit; font-size:.8rem; font-weight:600; color:var(--bg); background:var(--fg);
+            border:1px solid var(--fg); border-radius:var(--r-pill); padding:.2rem .95rem; cursor:pointer; }
+  .replay button:hover:not(:disabled) { opacity:.88; }
+  /* Pressed, and it looks it. The WORD on this button says which of the two it does next —
+     "Pause" while the day walks — which is right and is also the one thing a glance cannot
+     catch: a screenshot of a stopped replay reads exactly like a screenshot of a running one.
+     The attribute carries the other fact, the one that can be painted. */
+  /* Inverted, now that the resting button is the filled one. The pair is what it always was —
+     the WORD says which of the two the next press does, the ATTRIBUTE says which of them is
+     happening, and only the second survives a screenshot — so the two paints simply swapped
+     ends. Stopped is the solid invitation; running is the same button hollowed out. */
+  #play[data-playing="true"] { background:var(--surface); color:var(--fg); border-color:var(--fg); }
+  .replay button:disabled { opacity:.4; cursor:default; }
+  /* The handle. A range input is drawn by the browser until appearance:none hands its two
+     shadow parts over — and what the browser drew was a fat grey groove belonging to no page,
+     on the one control a reader of this view spends the most time touching. Both engines are
+     spelled out because they name the same two parts differently and neither falls back to the
+     other; the values are one pair, so a thumb retuned in one is retuned in both.
+     The rail is the track's own hue, the thumb the page's ink, ringed in the background so it
+     reads as an object ON the rail rather than a lump of it. */
+  /* accent-color goes: it was the last thing on this page a browser drew for us, and on the one
+     screen anybody will screenshot. --p is the share of the range already walked, written by the
+     script on every input and every step of a play — it is what makes the bar FILL as the day
+     runs, which is the whole of the motion in a recording of this view. Firefox has a track
+     part for that and needs no variable; webkit has none, so the fill is a gradient stop. */
+  .replay input[type="range"] { flex:1; min-width:10rem; -webkit-appearance:none; appearance:none;
+            background:transparent; height:1.5rem; margin:0; cursor:pointer; accent-color:auto; }
+  .replay input[type="range"]::-webkit-slider-runnable-track { height:6px; border-radius:var(--r-pill);
+            background:linear-gradient(to right, var(--dim) 0 var(--p,0%), var(--line) var(--p,0%) 100%); }
+  .replay input[type="range"]::-moz-range-track { height:6px; border-radius:var(--r-pill); background:var(--line); }
+  .replay input[type="range"]::-moz-range-progress { height:6px; border-radius:var(--r-pill); background:var(--dim); }
+  /* The margin is what centres a webkit thumb on its track: that engine lays the thumb out from
+     the top of the track box, so half the difference of the two heights is what is owed back.
+     Ringed in --fg rather than filled with it: 18:1 against the page, which is what identifies
+     the handle — the track's own edge is nowhere near the 3:1 a control would need. */
+  .replay input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
+            width:16px; height:16px; margin-top:-5px; border-radius:var(--r-pill);
+            background:var(--surface); border:2px solid var(--fg); box-shadow:var(--shadow-1); cursor:grab; }
+  .replay input[type="range"]::-moz-range-thumb { width:16px; height:16px; border-radius:var(--r-pill);
+            background:var(--surface); border:2px solid var(--fg); box-shadow:var(--shadow-1); cursor:grab; }
+  .replay input[type="range"]:active::-webkit-slider-thumb { cursor:grabbing; }
+  .replay input[type="range"]:active::-moz-range-thumb { cursor:grabbing; }
+  .replay input[type="range"]:disabled { opacity:.45; cursor:default; }
+  /* What appearance:none took away and the page owes back: a control that can be reached by
+     tab and not seen once it is there is a control a keyboard reader loses. The hue is the one
+     this page already spends on "a human is being waited for", which is what a focus ring is. */
+  .replay input[type="range"]:focus-visible, .replay button:focus-visible,
+  .replaying-note button:focus-visible { outline:2px solid var(--wait); outline-offset:2px; }
   /* 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; }
+  /* One line, and the pointer is told there is more behind it. What came off this line is a
+     paragraph of standing prose about the record, which is now the title and a span for a
+     screen reader — moved, never dropped: it is what keeps an ungrouped map from reading as a
+     rendering that broke. */
   .replay .covers { flex-basis:100%; color:var(--dim); font-size:.75rem; }
+  .replay .covers[title] { cursor:help; }
   /* 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. */
+  /* The one box on this page still allowed to shout. The banners above it gave up their frame
+     for a left accent; this one keeps the whole frame, takes the deeper shadow and lifts off
+     the page — because a dashboard showing a past minute as though it were the fleet is the
+     worst thing this product could do. */
   .replaying-note:not([hidden]) { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
-            position:sticky; top:0; z-index:1; }
+            position:sticky; top:0; z-index:1;
+            border:1px solid var(--warn); border-left-width:3px; border-radius:var(--r-sm);
+            box-shadow:var(--shadow-2); }
   .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; }
@@ -764,7 +1020,28 @@ ${HISTORY_CSS}
      flat grid this view was before, which is the honest drawing of what it holds. */
   .map { gap:.9rem; }
   .map.berths { display:flex; flex-wrap:wrap; align-items:flex-start; }
-  .map.flat { display:grid; grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr)); }
+  /* One cell per node, and every cell the same: the replay is the one surface where the fleet
+     changes under a still hand — each position of the handle is another minute, and sessions
+     come and go between two of them. A grid whose rows are the size of what is in them redraws
+     the page at every step of a scrub, which is what made a drag look like a page breaking.
+     The floor has to clear the TALLEST card the record can produce, or it is decoration: a row
+     is minmax(floor,auto), so one node taller than the floor pushes its own row and every row
+     under it — the jump, by the other road. The card that decides it is a waiting session:
+     a dial, a name, a caption clamped to two lines and the two numbers under it, 214px in
+     Chrome. One value at every width: the columns narrow on a phone and the cards do not, so a
+     floor cut to match them would sit under the cards it is supposed to hold up. */
+  /* 14rem and not 13.5: the floor is measured against the tallest card the record can draw,
+     and C5's dial takes that card from 215.9px to 223.9. Left at 13.5 it would clear its own
+     floor and push its row and every row under it at the minute it appears — the jump this
+     grid exists to remove, re-entered by a stroke width. The two are one change. */
+  .map.flat { display:grid; grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));
+          grid-auto-rows:minmax(14rem,auto); }
+  /* And what is in a cell sits in the middle of it. A session card hung from the top left 67px
+     of white under its last line — 31% of the cell — which inside a bordered box reads as a
+     render that failed rather than as air. The agent already had this from #170; the cards
+     were the half that never got it. Where a cell is the height of its own content, which is
+     every card in a berth, the rule changes nothing. */
+  .map.flat .node { justify-content:center; }
   /* The berth: a frame around the nodes read in one directory, and the label is the whole of
      what it claims. Quiet on purpose — a hairline and a caption in the grey the rest of the
      page uses for a heading, because the loud thing on this view is a session's state, and a
@@ -781,7 +1058,13 @@ ${HISTORY_CSS}
           letter-spacing:.06em; color:var(--dim); }
   /* The cards side by side at their own width, wrapping inside the frame when the directory
      holds more of them than the row can take. */
-  .berth-cards { display:flex; flex-wrap:wrap; gap:.6rem; align-items:stretch; }
+  /* flex-start, not stretch. Two cards with captions of different lengths were drawn to one
+     height and the shorter one carried 18.2px of white under its last line — C11.1's problem
+     at berth scale. Each card takes its own height instead. The DIALS stay level, which is the
+     line a reader scans a row along, and that is why a berth is not centred the way a replay
+     cell is: filled cards with a shadow read as two objects of two heights, not as one that
+     failed to fill. */
+  .berth-cards { display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-start; }
   .berth-cards .node { width:10.5rem; }
   /* And the strips docked underneath, full width of the frame, one under the other: a strip is
      a line of text, and a line of text in a column half a card wide is an ellipsis where the
@@ -789,33 +1072,69 @@ ${HISTORY_CSS}
      directory's background work, under the terminals someone is sitting at — and NOT because
      one of those terminals dispatched it, which nothing here knows. */
   .berth-strips { display:flex; flex-direction:column; gap:.4rem; margin-top:.6rem; }
-  .node { border:1px solid var(--line); border-radius:10px; padding:.8rem .85rem .7rem;
+  /* A card standing on the berth's floor rather than a second hairline drawn inside a first.
+     Three planes now — floor, berth, card — where there used to be one white and two identical
+     borders. The berth keeps no fill and no shadow of its own: a shadow inside a shadow reads
+     as neither. */
+  .node { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
+          box-shadow:var(--shadow-1), var(--edge); 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)); }
+  /* A wash of the state's own hue at 4%, under the border that already carries it. It invents
+     no information — same hue, same node, quieter than the edge — and it is what makes "these
+     four are working" readable across a berth without reading a single word. */
+  .node[data-state="busy"] { border-color:color-mix(in srgb, var(--busy) 45%, var(--line));
+          background:color-mix(in srgb, var(--busy) 4%, var(--surface)); }
+  .node[data-state="waiting"] { border-color:color-mix(in srgb, var(--wait) 45%, var(--line));
+          background:color-mix(in srgb, var(--wait) 4%, var(--surface)); }
   /* An agent is not a smaller session — it is a strip. It was a card at three quarters scale,
      which put a dial on a session that has no terminal to draw a statusline frame with: a ring
      that can never fill, captioned with the words of a fault someone could go and repair. The
      honest form is the one the table already speaks in — text on a line, left-aligned, its
      state in the same glyph and in a three-pixel accent down the left edge. */
-  /* align-self, never the grid's own align-items: a strip is half the height of the card
-     beside it and must not be stretched to match, but the CARDS in a row still share one
-     height — telling the grid to stop stretching would have changed every session on the page
-     to make room for this one. Scoped to the flat grid, which is the only place a strip has a
-     card beside it: docked in a berth it is a full-width band, and "start" in that column
-     would shrink it to the width of its own prompt. */
-  .map.flat .node[data-role="agent"] { align-self:start; }
-  .node[data-role="agent"] { align-items:stretch; text-align:left;
-          padding:.5rem .7rem .55rem; border-radius:8px;
-          background:color-mix(in srgb, var(--line) 18%, transparent);
+  /* Behind the scrubber an agent fills its cell like every other node. It kept its own height
+     for as long as the grid's rows did — a strip at half a card, sitting at the top of its
+     row — and that is exactly what made the map dance: an agent appearing between two minutes
+     of a scrub moved every dial under it. The SHAPE stays different, which is the honest part
+     (no dial, no arc that could never fill, its text left-aligned); the CELL is the same. */
+  /* Its text sits in the middle of whatever box it is given, which in the flat grid is the
+     height of a dial: hung from the top of one, two lines of text read as a cell that failed
+     to draw. Docked in a berth the box is the text's own height and this does nothing. */
+  .node[data-role="agent"] { align-items:stretch; justify-content:center; text-align:left;
+          padding:.5rem .7rem .55rem; border-radius:var(--r-sm);
           /* The box goes back to the neutral line the tinted rule above gave it: the accent is
              the channel that carries state here, and a strip outlined in its hue as well was
              the same fact said twice, in two weights, on a shape half the size of a card. */
           border-color:var(--line); border-left-width:3px; border-left-color:var(--dim); }
+  /* The recessed fill belongs to the DOCKED strip, not to the agent. In a berth it is an object
+     nested under the cards and reads as one; behind the scrubber it is a cell beside other
+     cells, and --surface-2 there sinks it in light and lifts it in dark — the same object read
+     two opposite ways depending on the theme. In the grid it takes --surface, the shadow and
+     the 4% state wash like its neighbours, and the SHAPE goes on being what tells it apart. */
+  .berth-strips .node[data-role="agent"] { background:var(--surface-2); box-shadow:none; }
   .node[data-role="agent"][data-state="busy"] { border-left-color:var(--busy); }
   .node[data-role="agent"][data-state="waiting"] { border-left-color:var(--wait); }
   .node[data-role="agent"][data-state="unknown"] { border-left-color:var(--warn); }
   .node[data-role="agent"] .who { margin-top:0; width:100%; }
+  /* A cell is 10.5rem wide, and every caption on it is one nowrap line: cut to that column, a
+     replayed agent at 320px drew its project as "a…" while the word BACKGROUND beside it kept
+     all of its own, and a waiting reason — the one caption this page calls why a node is not
+     working — lost two thirds of itself. The cell has height to spare and no width to give, so
+     they wrap DOWN it instead. Scoped to the flat grid: a strip docked in a berth is a band the
+     width of its frame, and the prompt on it has no length limit — wrapping that one down its
+     berth is the paragraph the ellipsis is there to prevent.
+
+     Two lines, then an ellipsis. Free to wrap as far as it likes, a caption is a card free to
+     grow — and a card taller than the row floor takes its row and every row under it, which is
+     the jump this grid exists to remove, re-entered through the fix for the clipping. A waiting
+     reason has no length limit anywhere in this codebase: the source publishes what it likes
+     and sessions.ts copies it through. */
+  .map.flat .node .sub { white-space:normal; overflow-wrap:anywhere;
+          display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
+  .map.flat .node[data-role="agent"] .who { flex-wrap:wrap; }
+  /* And the label that says an agent is not a terminal stays beside the name it qualifies. The
+     margin that pushes it to the far end of a strip's one line drops it, alone and
+     right-aligned, onto a second line the moment that line is allowed to wrap. */
+  .map.flat .node[data-role="agent"] .kind { margin-left:0; }
   /* A strip's project, which since the berths is the REPLAY's business alone: a live strip
      prints none — the frame around it says the directory — and behind the scrubber there is no
      frame, and the project is the only name the ring kept. The rule stayed when the markup
@@ -828,6 +1147,16 @@ ${HISTORY_CSS}
      want the day it grows one, and unprefixed they would take it. */
   .node .kind { margin-left:auto; font-size:.6rem; font-weight:700; text-transform:uppercase;
           letter-spacing:.08em; color:var(--dim); }
+  /* The reading on a strip, drawn. The bar is the table's own — same track, same fill, same
+     refusal to be coloured by a state or a threshold — and the number beside it is what is
+     authoritative, in the face every other number on this page wears. The word stays: a bar
+     says a magnitude and never which one. */
+  .node .ctx { display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
+  .node .bar { display:inline-block; width:2.75rem; height:.3rem; border-radius:var(--r-pill);
+          background:var(--line); vertical-align:middle; margin-right:0; }
+  .node .bar > i { display:block; height:100%; border-radius:var(--r-pill); background:var(--dim); }
+  .node .ctx-pct { font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600;
+          font-size:.8rem; color:var(--fg); }
   /* The prompt a background session was named after — the strip's own line, now that the berth
      around it carries the directory. One line, clipped: it is a sentence somebody typed, and
      it is the only thing on the strip that has no length limit. */
@@ -836,24 +1165,29 @@ ${HISTORY_CSS}
   /* Said, not shown: the four glyphs differ in silhouette, so a reader who cannot separate
      two hues still has the state — but a screen reader is handed a bullet and nothing else. */
   .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
-  .dial { position:relative; width:5.5rem; height:5.5rem; }
+  /* 6rem. On a post the ring IS the product, and at 5.5 with a 5px stroke it was a progress
+     graphic. Ships WITH the 14rem row floor above — the taller card is what makes that floor
+     necessary. */
+  .dial { position:relative; width:6rem; height:6rem; }
   .dial svg { width:100%; height:100%; display:block; overflow:visible; }
-  .track { fill:none; stroke:var(--line); stroke-width:5; }
+  /* Thicker, and the ring becomes a dial rather than a progress graphic. Purely CSS: the
+     percentage is carried by stroke-dasharray off DIAL_R, which no stroke width touches. */
+  .track { fill:none; stroke:var(--line); stroke-width:6.5; }
   /* Butt caps, not round: a rounded cap adds half a stroke width at each end, which draws a
      1% reading at three times its extent. The prettier cap overstates every small number. */
-  .arc { fill:none; stroke:var(--dim); stroke-width:5; }
+  .arc { fill:none; stroke:var(--dim); stroke-width:6.5; }
   .node[data-state="busy"] .arc { stroke:var(--busy); }
   /* A reading past the freshness threshold is drawn as what it is: thin, faded, and in the
      warning hue — never the solid arc of a live one. Its EXTENT stays true, because the
      number is still the truth of an earlier moment; and a dash pattern here would overwrite
      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; }
+          stroke:var(--warn); stroke-width:3.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; }
+  .node[data-reading="undatable"] .arc { stroke-width:5.5; 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; }
@@ -879,8 +1213,11 @@ ${HISTORY_CSS}
   @media (prefers-reduced-motion: reduce) { .halo { animation:none; opacity:.35; transform:scale(1.18); } }
   .val { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
          font-variant-numeric:tabular-nums; }
-  .pct { font-size:1.25rem; font-weight:650; letter-spacing:-.01em; }
-  .pct i { font-style:normal; font-size:.7em; font-weight:500; color:var(--dim); }
+  /* 650 was a weight the sans had and the system mono faces do not — asked for it, they round
+     back to 400 and the number came out lighter than before. 600 is a weight they carry. The
+     negative tracking goes with the sans it was measured on. */
+  .pct { font-size:1.55rem; font-weight:600; }
+  .pct i { font-style:normal; font-size:.62em; font-weight:500; color:var(--dim); }
   .why { font-size:.68rem; color:var(--dim); line-height:1.2; max-width:4.4rem; }
   .why b { display:block; font-size:1.25rem; font-weight:400; }
   .who { margin-top:.5rem; display:flex; align-items:baseline; gap:.3rem; max-width:100%; }
@@ -900,6 +1237,9 @@ ${HISTORY_CSS}
   .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; }
+  /* The columns narrow here; the row floor does not follow them. A card at 320px is taller than
+     one at 1280, not shorter — its captions have less width and more lines — so a floor cut to
+     the narrow column would sit under every card on the page and hold nothing up. */
   @media (max-width: 30rem) { .map.flat { grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); } .map { gap:.6rem; } }
 
   /* Below this the table stops being a table. What replaces it is the strip described down at
@@ -908,7 +1248,38 @@ ${HISTORY_CSS}
      as nothing at all — and the labels that go are the ones whose value says what it is on its
      own, with the exceptions named where they are given a word back. */
   @media (max-width: 46rem) {
-    body { padding:1.25rem .75rem; }
+    body { padding:.75rem .75rem 1.25rem; }
+    /* ── the header, in two lines ──────────────────────────────────────────────────────
+       Six objects wrapping as they pleased put five rows of chrome — a name, a badge, tabs,
+       two gauges and the age of the reading — above the first session on a 390px screen: the
+       fleet started a third of the way down a page that is about the fleet.
+
+       Three now, and the first two are DECLARED rather than left to the wrap: the name and the
+       tabs, then the account. The break is a real element in the markup between those two
+       groups, zero-height and full-width — NOT "order" on the items around it, which would be
+       this sheet moving two readings past each other to get a line break. Nothing here is
+       reordered: what the page shows is the order the markup is in.
+
+       Three and not two, and the missing one is arithmetic rather than taste. The account's own
+       row is 255px of "5h 62% resets in 59m  7d 43% resets in 4d 11h" and the age of the
+       reading is 92 more, against 346 of usable width: the pair is 7px over, and the reset
+       countdowns are the only words on this page that appear nowhere else — a phone that
+       dropped them would be a phone that cannot tell you when your window opens. So the age
+       takes the third row whole rather than a fact being spent on the second.
+
+       A demo badge takes the width it takes and pushes the tabs down, which is a fourth row on
+       a demo and none on a serve: it is the one element here whose job is to be in the way. */
+    header { gap:.3rem .5rem; padding:.5rem .6rem; margin-bottom:.75rem; }
+    .hdr-break { display:block; flex-basis:100%; height:0; }
+    /* The rule between the two groups is what the break already says at this width. */
+    header .limits:not([hidden]) { gap:.8rem; padding-left:0; border-left:0; }
+    .freshness { font-size:.72rem; }
+    .gauge { font-size:.72rem; }
+    /* The rail goes where the row bar goes, three rules below, and for the same reason: the
+       number beside it is the authority, the bar is a second telling of it, and a phone has no
+       width for the second telling. What it says in words — "62%", "resets in 1h" — is every
+       word it said before. */
+    .gauge .rail { display:none; }
     /* The summary's ISO stamp, spent. It is the widest thing on that line and the header two
        lines above already says the same fact in the words a reader uses — "updated 3s ago",
        counted by the shell whether or not a poll ever lands. Hidden rather than dropped: the
@@ -923,17 +1294,21 @@ ${HISTORY_CSS}
        them. The negative margin gives it the page's own gutters back, so the bar reaches the
        edges of the phone and the rule above it reads as an edge rather than a floating line.
 
-       The sentence under the handle stays. Hiding it for the length of a replay was the obvious
-       way to keep the bar short, and it silently undid a fix this file argues for forty lines
-       into coversText: two of its three parts are standing properties of the RECORD, not the
-       range — nothing replayed here is dated, and the past is drawn ungrouped — and they were
-       put in the reader's view precisely because they had lived "nowhere the reader can see it"
-       and an ungrouped map reads as a rendering that broke. A phone replaying is exactly when a
-       reader is staring at one. The bar is taller for it. */
+       The line under the handle stays. Hiding it for the length of a replay was the obvious way
+       to keep the bar short, and it silently undid the fix coversRange and KEEPS argue for
+       below: two of the things that line says are standing properties of the RECORD, not of the
+       range — nothing replayed here is dated, and the past is drawn ungrouped — and they are in
+       the reader's view precisely because they had lived "nowhere the reader can see it", where
+       an ungrouped map reads as a rendering that broke. A phone replaying is exactly when a
+       reader is staring at one, and a phone has no hover to reach a title with: the two words
+       are on the line itself for that reason, and only their paragraph is behind it. */
     body.replaying .replay:not([hidden]) { position:sticky; bottom:0; z-index:3;
          background:var(--bg); border-top:1px solid var(--line);
          padding:.55rem .75rem .8rem; margin:1rem -.75rem 0; }
-    .wrap { overflow-x:visible; }
+    /* The panel goes with the table. Below this width the rows ARE cards, and a panel around
+       a column of cards is a frame drawn round a frame — the thing the two planes were
+       introduced to stop. */
+    .wrap { overflow-x:visible; background:transparent; border:0; border-radius:0; box-shadow:none; }
     table, tbody { display:block; }
     table { min-width:0; }
     thead { display:none; }
@@ -950,8 +1325,12 @@ ${HISTORY_CSS}
        The cell steps out of the layout entirely, with display:contents, so the row is the flex
        container and every VALUE is one of its items. Anything else puts a box between the row
        and the thing being placed, and the order below would have nothing to order. */
+    /* And the strip becomes the card the desktop panel used to hold: filled, on the floor, with
+       the same hairline and the same shadow as a node on the map. Without the fill it would be
+       the one surface on the page still transparent over grey. */
     tr { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.4rem; row-gap:.05rem;
-         border:1px solid var(--line); border-left-width:3px; border-radius:8px;
+         background:var(--surface); box-shadow:var(--shadow-1), var(--edge);
+         border:1px solid var(--line); border-left-width:3px; border-radius:var(--r-md);
          padding:.5rem .75rem .55rem; margin-bottom:.55rem; }
     /* white-space on the CELL, and not on the row: the desktop rule being undone is
        td { white-space:nowrap }, and an explicit declaration on the cell beats anything the row
@@ -987,11 +1366,6 @@ ${HISTORY_CSS}
        background session named after its prompt, a name with no length limit. Not the exotic
        case: when nothing in the fleet calls itself interactive, every row is drawn as a card. */
     .berth-cards .node { flex:1 1 8.5rem; width:auto; min-width:0; }
-    /* A strip sharing a phone's width with a card is an ellipsis where the prompt was — the
-       one line saying what this agent was told to do is the first thing a narrow column takes
-       away. It spans the row instead, like the cells below it. The berth docks its own strips
-       full width at every size, so what this rule is left covering is the REPLAY's flat grid. */
-    .node[data-role="agent"] { grid-column:1 / -1; }
     /* Line one: who, and in what state. The project leads and carries the weight; the session
        name travels beside it in the page's grey. That order is deliberate and it is a red line
        — a background session is NAMED AFTER ITS PROMPT, and a prompt set as the heading of a
@@ -1072,12 +1446,22 @@ ${HISTORY_CSS}
     td[data-label="Model"] .v:has(.dim)::before { content:'· model '; }
     td[data-label="Effort"] .v:has(.dim)::before { content:'· effort '; }
     td[data-label="Cost"] .v:has(.dim)::before { content:'· cost '; }
+    /* The table's strip only. The map's bar survives this on specificity — ".node .bar" above
+       is 0,2,0 against this rule's 0,1,0, and a media query adds none — so an agent's reading
+       is still drawn on the one screen it was reported missing from. No repeat of it here: a
+       rule that changes nothing is a rule the next reader has to prove harmless. */
     .bar { display:none; }
 ${HISTORY_PHONE_CSS}  }
 </style>
 </head><body data-view="${view}">
 <header>
-  <h1>tarmac</h1>
+  <h1>tarmac</h1>${demo
+        ? `
+  <!-- Beside the title, in the shell, and never quiet. The one thing a screenshot of this page
+       must not be able to do is pass for a real fleet, and the reader who can be misled is not
+       the one running the serve — it is whoever is sent the picture afterwards. -->
+  <span class="demo-tag" role="status">demo data &mdash; an invented fleet</span>`
+        : ''}
   <!-- Links, not buttons: the view survives a reload, a bookmark and a browser with
        JavaScript off — the state of a page whose own noscript banner promises it is still
        readable. Both views are in the fragment below either way, so switching costs the
@@ -1087,6 +1471,11 @@ ${HISTORY_PHONE_CSS}  }
     <a href="/map"${view === 'map' ? ' aria-current="page"' : ''}>Map</a>
     <a href="/history"${view === 'history' ? ' aria-current="page"' : ''}>History</a>
   </nav>
+  <!-- Where the header folds on a phone. An element and not a pseudo, because the alternative
+       is "order" on the two groups around it — this page's sheet may move a control and never
+       a reading, and both of those are readings. Empty, so there is nothing in it for anyone
+       to be read. -->
+  <span class="hdr-break" aria-hidden="true"></span>
   <!-- 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
@@ -1102,6 +1491,22 @@ ${HISTORY_PHONE_CSS}  }
   <strong>&#9888; refresh failing</strong> — nothing on this page has moved since the time in the header.
   <span id="why"></span>
 </div>
+<!-- Which of the two fleets is on screen, said in the place the banner below will stand. The
+     banner used to be inserted into the flow the moment a reader took hold of the handle and
+     removed again when they let go, so the page dropped a line on the way in and rose one on
+     the way out — at the exact moment a reader is comparing two minutes of it. The space is
+     spent either way now, and a page that only speaks up when it is showing the past is a page
+     that says nothing on the way back. Up with the scrubber and for the same reason: with no
+     record there is no second state to be telling this one apart from. -->
+<!-- Served up, unlike the controls below it. It is not one of them: it says the page is showing
+     the fleet now, which is true of a served page before any script runs and true of one where
+     none ever will, and the way BACK from a replay is a button that lives in the banner. Shipped
+     hidden it was the fault this pair exists to remove — the map paints, the record lands a
+     moment later, and a line appears and pushes the whole fleet down. -->
+<div class="live-state" id="live-state">
+  <strong>&#9679; live</strong>
+  <span>&mdash; the fleet as the header dates it.</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. -->
@@ -1133,11 +1538,17 @@ ${HISTORY_PHONE_CSS}  }
   <!-- "Replay", and nothing about how much of the day it holds: the range is the record's to
        state, in the sentence below, which is built around never calling ten minutes a day. -->
   <span class="replay-name">Replay</span>
-  <button type="button" id="play">Play</button>
+  <!-- The word says what the next press does; the attribute says what is happening now, which
+       is the half a stylesheet can paint and a glance can catch. -->
+  <button type="button" id="play" data-playing="false">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>
+  <!-- What the line above could not fit, for a reader who cannot hover a title: the standing
+       properties of the record — nothing replayed is dated, and the past is drawn ungrouped.
+       Its own element rather than a child of the line, which the script rewrites wholesale. -->
+  <span class="sr" id="covers-note"></span>
 </div>
-${view === 'history' ? renderHistoryView({ historyEnabled }) : ''}
+${view === 'history' ? renderHistoryView({ historyEnabled, demo }) : ''}
 <script>${pageScript(view)}</script>${view === 'history' ? `\n<script>${historyScript()}</script>` : ''}
 </body></html>
 `;
@@ -1196,6 +1607,28 @@ function pageScript(view) {
   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;
+  // ── the footnotes, across a swap ────────────────────────────────────────────────────
+  // The folds live in the fragment this script replaces every five seconds, so a reader who
+  // opens one gets about two seconds of it before a new one is built shut — a note less
+  // readable folded than it was as a paragraph, which is the opposite of the change. What was
+  // opened is remembered by id and put back on the other side of every swap.
+  //
+  // Capture, because "toggle" does not bubble: it fires on the <details> and nowhere else, so
+  // a listener on the container only hears it on the way down. Delegated rather than bound to
+  // each note, because the notes are exactly what the swap destroys.
+  var openNotes = {};
+  live.addEventListener('toggle', function (ev) {
+    var t = ev && ev.target;
+    if (!t || !t.id || t.id.indexOf('note-') !== 0) return;
+    if (t.open) openNotes[t.id] = 1; else delete openNotes[t.id];
+  }, true);
+  function reopenNotes() {
+    for (var k in openNotes) {
+      if (!Object.prototype.hasOwnProperty.call(openNotes, k)) continue;
+      var d = document.getElementById(k);
+      if (d) d.open = true;
+    }
+  }
   // How many polls in a row have come back with nothing usable, and when the last of them was.
   // On a phone the page is read on a radio, and one dropped request is a tunnel rather than an
   // outage — the banner frames the table off and says the fleet cannot be read, which is the
@@ -1282,6 +1715,7 @@ function pageScript(view) {
         if (body.trim() === '') throw new Error('The server answered with an empty page.');
         if (!mineStill()) return;
         live.innerHTML = body;
+        reopenNotes();
         // 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
@@ -1327,6 +1761,7 @@ function pageScript(view) {
 
   var replay = document.getElementById('replay'), scrub = document.getElementById('scrub');
   var playBtn = document.getElementById('play'), covers = document.getElementById('covers');
+  var coversNote = document.getElementById('covers-note');
   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');
@@ -1369,50 +1804,86 @@ function pageScript(view) {
     return hhmm(t) + (new Date(t).getUTCDate() === new Date(ref).getUTCDate() ? '' : ' yesterday');
   }
 
-  // What the range covers, in the record's own terms. Never "a day": that is the size of the
+  // What the range covers, in the record's own terms and in ONE line: the span, how many
+  // readings are in it, and how many minutes have none. Never "a day" — that is the size of the
   // ring, and a serve ten minutes old has seen ten minutes.
-  function coversText() {
+  //
+  // One line because this is the line under the hand of whoever is dragging the handle, and it
+  // was three of technical prose. What came off it is below, in KEEPS, and it is MOVED rather
+  // than dropped: the standing properties of the record are the honest part of this feature.
+  function coversRange() {
     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) + ' UTC and '
-          + record.missed + ' minute' + (record.missed === 1 ? '' : 's') + ' were due and never read.'
-        : 'Nothing recorded yet — this serve started at ' + hhmm(record.since) + ' UTC'
-          + ' 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) + ' UTC'
-      // 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')
+    return 'Covering ' + edge(record.since, last) + ' – ' + hhmm(last) + ' UTC · '
+      + 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.'
-      // The other thing the ring does not hold, said where the reader meets it: the argument
-      // for an ungrouped replay was written in the README, the manual, the changelog and a
-      // comment in this sheet, and nowhere the reader can see it. Shown less and told nothing,
-      // a reader reads it as a rendering that broke.
-      //
-      // A standing property of the record, never an event. This line sits in the scrubber's own
-      // block, outside the live fragment and outside the replay one, so it is on the page from
-      // the moment the record lands — and a sentence saying the grouping had gone would be
-      // printed under a live map with the grouping on it.
-      + ' It keeps a project name and never the directory a node was read in, so the past is'
-      + ' drawn ungrouped, in the order the sample carries.';
+      // through minutes, and a record with holes in it is not a smooth walk — which is why this
+      // one clause stayed on the visible line while the paragraph below it went.
+      + (record.missed ? ' · ' + record.missed + ' minute' + (record.missed === 1 ? '' : 's') + ' with no reading' : '')
+      // The two words the paragraph below explains, kept where every reader meets them. A title
+      // has no hover on a touchscreen and no keyboard, and a hidden span is for a screen reader:
+      // moving the whole of it would have left the sighted phone reader — the one this page
+      // argues about, staring at an ungrouped map — with neither half, and an ungrouped map that
+      // says nothing about being ungrouped reads as a rendering that broke.
+      + ' · undated, ungrouped';
+  }
+
+  // The two standing properties of the record, off the line and never out of reach: in the
+  // title for a pointer, and in a span only a screen reader meets. Both are things this page
+  // would otherwise be caught not saying — the ring never kept how old a reading was, and it
+  // never kept the directory a node was read in, so a replayed map is undated and ungrouped.
+  // Shown less and told nothing, a reader reads an ungrouped map as a rendering that broke.
+  var KEEPS = 'The record keeps each reading, not how old that reading was, so nothing replayed'
+    + ' here is dated. It keeps a project name and never the directory a node was read in, so the'
+    + ' past is drawn ungrouped, in the order the sample carries.'
+    // The third of them, and the one that qualifies the range itself rather than what is drawn
+    // from it: the record is asked for again only when a tab that has been away comes back, so
+    // the minute this range ends on is the last one this page ASKED for. A map left open on a
+    // desk all afternoon would otherwise read as a record that stops where the fleet did.
+    + ' The range ends where this page last asked for the record, not at this minute.';
+
+  // The line, and what it could not fit. A message that IS the whole of what there is to say
+  // carries no second copy of itself: a tooltip repeating the line it sits on is how a reader
+  // learns to ignore the next one.
+  function say(line, more) {
+    covers.textContent = line;
+    coversNote.textContent = more;
+    if (more === '') covers.removeAttribute('title');
+    else covers.setAttribute('title', more);
   }
 
+  // What there is to say when there is no range: a message that is the whole of itself, and
+  // carries none of KEEPS — there is nothing replayed for those properties to be true of.
+  //
+  // 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.
+  function emptyText() {
+    return record.missed
+      ? 'Nothing recorded — this serve started at ' + hhmm(record.since) + ' UTC and '
+        + record.missed + ' minute' + (record.missed === 1 ? '' : 's') + ' were due and never read.'
+      : 'Nothing recorded yet — this serve started at ' + hhmm(record.since) + ' UTC'
+        + ' and takes a reading every ' + Math.round(record.cadence / 1000) + 's.';
+  }
+
+  // Nothing here touches the state line, and that is the rule rather than an omission: it is
+  // served up, and it says the page is showing the fleet as the header dates it — true of a
+  // record with a day in it, of one a serve is too young to have taken, and of one that could
+  // not be read at all. Hidden on the empty answer it removed a line the server had already
+  // painted: a serve samples on an interval with no leading call, so every page opened on a
+  // fresh one is answered with an empty sample list for a minute, and the fleet jumped up
+  // 42px, 33ms in.
   function ready() {
     var n = record.samples.length;
     replay.hidden = false;
-    covers.textContent = coversText();
+    say(n === 0 ? emptyText() : coversRange(), n === 0 ? '' : KEEPS);
     scrub.max = String(n === 0 ? 0 : n - 1);
     scrub.disabled = n === 0;
     playBtn.disabled = n === 0;
+    // The record grows by a reading a minute, so the same index is a smaller share of it every
+    // time this runs. Refilled here, or a handle nobody has touched since the last poll draws
+    // the fraction of an hour ago.
+    fill();
   }
 
   // Revealed, not hidden, when the record cannot be had: a scrubber that silently never
@@ -1421,7 +1892,7 @@ function pageScript(view) {
     replay.hidden = false;
     scrub.disabled = true;
     playBtn.disabled = true;
-    covers.textContent = said;
+    say(said, '');
   }
 
   function load() {
@@ -1481,7 +1952,15 @@ function pageScript(view) {
         + '<span class="project">' + esc(x.project) + '</span>'
         + '<span class="kind">' + esc(x.kind) + '</span></div>'
         + (state === 'waiting' && x.waitingFor ? '<div class="sub waiting-for">' + esc(x.waitingFor) + '</div>' : '')
-        + (pct === null ? '' : '<div class="sub">ctx ' + pct + '%</div>')
+        // The same fragment the server writes for a live strip, in the browser's copy of the
+        // renderer: a bar for the magnitude, the number beside it, and the word that says which
+        // quantity the bar is about. Clamped, because the track sits in a fixed box and a fill
+        // wider than it paints over the text next to it.
+        + (pct === null
+          ? ''
+          : '<div class="sub"><span class="ctx">ctx <span class="bar"><i style="width:'
+            + Math.max(0, Math.min(100, pct)) + '%"></i></span>'
+            + '<span class="ctx-pct">' + pct + '%</span></span></div>')
         + (typeof x.costUsd === 'number' ? '<div class="sub">$' + x.costUsd.toFixed(2) + '</div>' : '')
         + '</article>';
     }
@@ -1611,12 +2090,32 @@ function pageScript(view) {
         : '$' + cost.toFixed(2) + (reporting < n ? ' (' + reporting + '/' + n + ' reporting cost)' : ''));
   }
 
+  /**
+   * How much of the record is behind the handle, as the track's own gradient reads it.
+   *
+   * Webkit gives a range input two shadow parts and no third one for the walked half, so the
+   * fill is a stop in the track's background and this is where the stop is. Firefox has
+   * ::-moz-range-progress and needs none of it, which is why the value is a token rather than a
+   * background written from here: one number, two engines, and the sheet decides what each
+   * does with it.
+   *
+   * A record of one reading has a max of 0 and nothing to divide by. Infinity and NaN are both
+   * answers a browser throws the whole gradient away for, leaving a track that never fills for
+   * anybody — so a span of nothing is nought per cent, which is where the handle is.
+   */
+  function fill() {
+    var m = Number(scrub.max);
+    var share = m > 0 ? (Number(scrub.value) / m) * 100 : 0;
+    scrub.style.setProperty('--p', (share >= 0 && share <= 100 ? share : 0).toFixed(2) + '%');
+  }
+
   function draw(i) {
     var s = record && record.samples[i];
     if (!s) return;
     at = i;
     replaying = true;
     scrub.value = String(i);
+    fill();
     // 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.
     var minute = hhmm(s.t) + ' UTC';
@@ -1637,6 +2136,10 @@ function pageScript(view) {
   function stopPlay() {
     if (playing) { clearInterval(playing); playing = null; }
     playBtn.textContent = 'Play';
+    // Both halves, every time: the word for the press that comes next, the attribute for what
+    // is happening now. Set here rather than only where a reader clicks, because the walk also
+    // ends on its own at the last reading.
+    playBtn.setAttribute('data-playing', 'false');
   }
 
   // Back to now, in one gesture, with nothing of the past left behind a hidden attribute.
@@ -1661,6 +2164,7 @@ function pageScript(view) {
     // has played nothing.
     draw(at < 0 || at >= record.samples.length - 1 ? 0 : at);
     playBtn.textContent = 'Pause';
+    playBtn.setAttribute('data-playing', 'true');
     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.
@@ -1845,10 +2349,25 @@ function renderNode({ row: r, role, state, reading, measured, pulse }) {
         // around it and the table a column header over it, and a bare `61%` under a line of prompt
         // reads as how much of the prompt is done. Each part is dropped on its own field being
         // null — a snapshot with no turn behind it has a model in it and no percentage.
-        const published = [pct === null ? null : `ctx ${pct}%`, r.model, r.effort]
+        //
+        // The reading is DRAWN now, in the bar the table's Context column already speaks — a
+        // magnitude at a glance beside the number that is the authority, track in --line and fill
+        // in --dim, coloured by neither the state nor a threshold. What it is not is a small dial:
+        // an arc at that size cannot be read (5% and 15% draw the same silhouette), and a ring on
+        // an agent is the claim #170 removed. A strip stays a line of text, now with 44x5px of
+        // graphic on it.
+        //
+        // Which is why the percentage leaves the escaped list: `published` puts `esc` over every
+        // one of its members, and markup through it would come back as text.
+        const ctx = pct === null
+            ? ''
+            : `<span class="ctx">ctx <span class="bar"><i style="width:${Math.max(0, Math.min(100, pct))}%"></i></span>` +
+                `<span class="ctx-pct">${pct}%</span></span>`;
+        const meta = [r.model, r.effort]
             .filter((v) => v !== null && v !== '')
             .map(esc)
             .join(' · ');
+        const published = ctx === '' ? meta : meta === '' ? ctx : `${ctx} · ${meta}`;
         return `<article class="node" data-role="${role}" data-state="${state}" data-reading="${reading}">
       <div class="who"><span class="shape" aria-hidden="true">${SHAPE[state]}</span><span class="sr">${esc(stateWord(state, r))}</span><span class="prompt">${esc(r.name)}</span><span class="kind">${esc(r.kind)}</span></div>
       ${state === 'waiting' && r.waitingFor ? `<div class="sub waiting-for">${esc(r.waitingFor)}</div>` : ''}