@adrrr/tarmac 0.5.0 → 0.7.0

package/dist/render.js

@@ -137,6 +137,12 @@ export function renderSettings(config, configFile) {
         ['port', String(config.port.value), config.port.source],
         ['snapshots', config.snapshotsDir.value, config.snapshotsDir.source],
     ];
+    // Only when there are any. An empty list is what every other run has, chosen by nobody —
+    // a `(default)` line saying "none" on every serve is noise, and this line has to read as
+    // what it is: the one setting that widened who may read this port.
+    if (config.trustHosts.value.length > 0) {
+        rows.push(['trusted', config.trustHosts.value.join(', '), config.trustHosts.source]);
+    }
     // Only the LABEL column is padded. Padding the values aligned the sources against the
     // snapshots path, which is absolute — pushing the one word that says where a value came
     // from past the edge of an 80-column terminal.
@@ -157,7 +163,7 @@ export function renderTable({ rows, health }) {
         r.effort ?? '—',
         r.costUsd === null ? '—' : `$${r.costUsd.toFixed(2)}`,
         r.uptimeMs === null ? '—' : `${Math.round(r.uptimeMs / 3600000)}h`,
-    ]);
+    ].map(clip));
     const w = head.map((h, i) => Math.max(h.length, ...body.map((r) => r[i].length)));
     const line = (cells) => cells.map((c, i) => c.padEnd(w[i])).join('  ').trimEnd();
     const warns = [];
@@ -192,6 +198,11 @@ export function renderTable({ rows, health }) {
         warns.push(`! ${skewed} reading(s) are dated in the future — ${SKEW}`);
     if (health.unknownStatus > 0)
         warns.push(`! ${health.unknownStatus} session(s) report an unknown status`);
+    const account = accountLimits(rows, health.generatedAt);
+    const gauges = readLimits(account === null ? null : account.rateLimits, health.generatedAt);
+    const split = accountSplit(account, gauges);
+    if (split)
+        warns.push(`! ${split}`);
     // Last, and never instead of anything above: this one is a heads-up, not a fault.
     const schema = schemaNotice(health.schemaGuard);
     if (schema)
@@ -200,7 +211,86 @@ export function renderTable({ rows, health }) {
     return ([line(head), ...body.map(line)].join('\n') +
         '\n' +
         (warns.length ? '\n' + warns.join('\n') + '\n' : '') +
-        `\n${health.sessions} sessions · ${health.busy} busy · ${total}\n`);
+        `\n${health.sessions} sessions · ${health.busy} busy · ${total}\n${accountLine(gauges, account, health)}\n`);
+}
+/**
+ * The account's two windows, under the fleet rather than in a column.
+ *
+ * They are the one pair of numbers in this table that is not about a session: every row above
+ * spends from the same five-hour and seven-day allowance, so a column of them would be the
+ * same two numbers printed once per session. Under the totals, where the other fleet-wide
+ * facts are.
+ *
+ * Dated like every reading here, and always: the AS OF column exists because a percentage is
+ * as old as the frame that wrote it, and this one has no column to be dated by. The `!` is the
+ * same mark, past the same threshold, explained by the same warning above.
+ */
+function accountLine(gauges, account, health) {
+    const windows = gauges
+        .map((g) => `${g.label} ${g.pct === null ? `— ${LIMIT_WHY[g.why]}` : `${g.pct}% ${resetWords(g.resetsInMs, '—')}`}`)
+        .join(' · ');
+    // A reading is dated; no reading is not. The two states read alike in the windows above —
+    // `— no reading` is what a payload with no rate limits and a fleet with no snapshot at all
+    // both come to — and the age is what tells them apart: a snapshot that said nothing carries
+    // the moment it said it, and a fleet nothing was read for has no such moment to print.
+    const as = account === null ? '' : ` · as of ${age(account.ageMs)}${account.ageMs > health.staleAfterMs ? ' !' : ''}`;
+    return `account  ${windows}${as}`;
+}
+/**
+ * What to say when the readings behind that line are not all about the same windows, and
+ * `null` on the ordinary fleet, where they are.
+ *
+ * One warning for both surfaces to be written from: the account is the ONE number here picked
+ * out of several that could have been it, and a picked winner presented as the fleet's account
+ * is exactly what a fleet signed into two logins at once would look like. The count is what the
+ * reader needs in order to go and look; WHY two windows were open at the same time is published
+ * nowhere tarmac reads, so it is not guessed.
+ *
+ * Only windows that are drawn as a number, because this sentence qualifies one: a window the
+ * surface prints as `— schema drift` has nothing for "the freshest is shown" to be true of, and
+ * a warning derived from a field the line under it has just called unreadable is a warning about
+ * the wrong thing. When that leaves nothing to name, there is nothing to say.
+ */
+function accountSplit(account, gauges) {
+    if (account === null || account.apart === 0)
+        return null;
+    const drawn = new Set(gauges.filter((g) => g.pct !== null).map((g) => g.key));
+    const labels = LIMIT_WINDOWS.filter((w) => account.apartWindows.includes(w.key) && drawn.has(w.key)).map((w) => w.label);
+    if (labels.length === 0)
+        return null;
+    const which = `the ${labels.join(' and ')} window${labels.length === 1 ? '' : 's'}`;
+    // Said the long way round on purpose: "1 of 4 readings names" and "2 of 4 readings name" are
+    // two sentences, and a count that has to agree with a verb is a count someone will get wrong.
+    return `${which} ${labels.length === 1 ? 'is' : 'are'} read differently by ${account.apart} of ${account.readings} readings — the freshest is shown`;
+}
+/**
+ * How wide a column may get, `null` for one nothing can stretch.
+ *
+ * Four of the eight carry a string this tool did not choose the length of — a directory
+ * basename, a status word tarmac does not know or the free text a `waiting` session gives, a
+ * model name, an effort — and one long value in any of them used to push every row of the
+ * table past 190 columns, on a terminal that wraps at 80. The caps are picked so that the
+ * worst fleet a source can hand this renderer stays within 120 CODE POINTS a row — display
+ * width is the wider, separate question (#80): a CJK glyph is one point and two columns, and
+ * the width math below counts `.length` like it always has. The page has CSS to wrap with, a
+ * terminal has nothing. The other four are a percentage, an age, a cost and an hour count;
+ * their own magnitude is what bounds them, and no cap here would ever bite.
+ */
+// STATE is the widest of the four because it is two facts on one line: the state, and the
+// reason a `waiting` session gives for being in it. `waiting · permission prompt` — the
+// reason the fleet's own suite is written around — is 27 of these 28 columns.
+const CAPS = [20, 28, null, null, 16, 8, null, null];
+/**
+ * One cell, cut to its column. The ellipsis is spent out of the cap rather than added past
+ * it — a cap a cut cell can exceed is not a cap — and the cut is by code point, because half
+ * a surrogate pair is not a shorter name, it is a broken one.
+ */
+function clip(cell, i) {
+    const cap = CAPS[i];
+    if (cap === null)
+        return cell;
+    const chars = Array.from(cell);
+    return chars.length <= cap ? cell : chars.slice(0, cap - 1).join('') + '…';
 }
 /**
  * The STATE column, out of the same verdict the page draws from.
@@ -330,7 +420,7 @@ export function renderLive(fleet) {
     </table></div></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>
+<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>`;
@@ -349,10 +439,9 @@ ${body}
  * 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('');
+    const account = accountLimits(rows, health.generatedAt);
+    const read = readLimits(account === null ? null : account.rateLimits, health.generatedAt);
+    const gauges = read.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 —
@@ -363,7 +452,15 @@ export function renderLimits({ rows, health }) {
     // 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>` : '');
+    // The other thing that can be wrong with this pair, and the one the age cannot say: the
+    // number was picked out of several readings, and they were not all about the same window.
+    // Beside the number rather than in a box below the fleet, because what it qualifies is the
+    // number — and it says the whole sentence, since a mark whose reason is elsewhere is a mark
+    // the reader cannot argue with.
+    const split = accountSplit(account, read);
+    return (gauges +
+        (stale ? `<span class="stale">! ${esc(asOfAge(account.ageMs))} ago</span>` : '') +
+        (split === null ? '' : `<span class="mixed">! ${esc(split)}</span>`));
 }
 /**
  * One window. Four things in a line: which window it is, a bar for the glance, the number that
@@ -380,7 +477,7 @@ function gauge(g) {
         : `<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>`);
+        `<span class="reset">${g.pct === null ? LIMIT_WHY[g.why] : resetWords(g.resetsInMs, dash())}</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' };
@@ -391,7 +488,7 @@ const LIMIT_WHY = { absent: 'no reading', drift: 'schema drift' };
  * 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`;
+const resetWords = (ms, none) => ms === null ? `reset ${none}` : 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
@@ -494,7 +591,10 @@ export function renderPage(fleet, view = 'table') {
      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; }
+  /* 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; }
   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;
@@ -535,6 +635,28 @@ export function renderPage(fleet, view = 'table') {
   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); }
+  /* 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
+     only a touchscreen has. So the TAPPABLE box grows and the drawn one does not, through an
+     invisible overlay that exists only where the pointer is coarse.
+
+     Two rules rather than one: the inset is what is LEFT to reach 44 once the pill's own line
+     box and padding are counted, and the way out of a replay is set in smaller type than the
+     tabs. Sized as one number for all three, it came out at 41px. The border is NOT part of that
+     sum: the overlay's containing block is the control's padding box, so the border sits inside
+     the rectangle rather than adding to it. Counting it read 45.2px for a target Chrome laid out
+     at 43.2 — the whole feature short of the threshold it exists for, in both rules at once.
+
+     Vertical only. Every control here is already wider than 44px on its own text (the narrowest,
+     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 { position:relative; }
+  @media (pointer: coarse) {
+    nav a::after, .replay button::after { content:''; position:absolute; inset:-.7rem 0; }
+    .replaying-note button::after { content:''; position:absolute; inset:-.85rem 0; }
+  }
   body[data-view="table"] .view-map { display:none; }
   body[data-view="map"] .view-table { display:none; }
 
@@ -585,6 +707,12 @@ export function renderPage(fleet, view = 'table') {
      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); }
+  /* The pair gets a name. A button reading "Play" and a slider under a map, with nothing
+     saying what they move, is a control nobody dares touch — which on a phone is most of what
+     is on screen. Its own line above them, because dropped into the row it would read as a
+     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); }
@@ -687,7 +815,7 @@ export function renderPage(fleet, view = 'table') {
      it is the only thing on the strip that has no length limit. */
   .node .prompt { flex:1; min-width:0; color:var(--dim); font-size:.76rem;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-  /* Said, not shown: the three glyphs differ in silhouette, so a reader who cannot separate
+  /* 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; }
@@ -756,17 +884,75 @@ export function renderPage(fleet, view = 'table') {
   .asof.stale { color:var(--warn); font-weight:600; }
   @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: one card per session, every value keeping the
-     name of the column it came from. Nothing is dropped — a phone that hides the context
-     column would be a phone that renders "not measured" as nothing at all. */
+  /* Below this the table stops being a table. What replaces it is the strip described down at
+     the tr rule: two lines per session rather than one card of eight labelled ones. Nothing is
+     dropped — a phone that hid the context column would be a phone that rendered "not measured"
+     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; }
+    /* 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
+       fragment still carries the exact second for anyone who goes looking for it. */
+    .meta .stamp { display:none; }
+    /* The handle, pinned under the thumb. The scrubber sits at the FOOT of the map and a map on
+       a phone is several screens tall: dragging it means the dials it moves are above the fold,
+       so the reader scrubs blind, lets go, scrolls up to see what changed and scrolls back. Held
+       at the bottom of the viewport, the hand and the thing it is changing are on screen at once.
+
+       Opaque and above what passes under it, or the dials scroll through the slider dragging
+       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. */
+    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; }
-    table, tbody, tr, td { display:block; }
+    table, tbody { display:block; }
     table { min-width:0; }
     thead { display:none; }
-    tr { border:1px solid var(--line); border-left-width:3px; border-radius:8px;
-         padding:.35rem .7rem; margin-bottom:.6rem; }
+    /* The card stops being eight labelled lines and becomes the strip the map already speaks.
+       Eight lines is 234px of phone: two and a half sessions fill the screen, and "is anything
+       waiting on me" costs four screens of scrolling. Two lines instead — who and in what
+       state, then the numbers, "ctx 65% · Opus 5 · medium · $20.79 · up 15h", which is the
+       line a docked agent has always printed on the map next door.
+
+       Nothing is dropped. The labels that go are the ones whose values wear their own name: a
+       "$", "%", a model, a state that is a word. The two that do not get one back below, in
+       the strip's own words rather than as a column heading.
+
+       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. */
+    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;
+         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
+       passes down — display:contents takes the cell out of the layout, not out of the cascade.
+       Put on the row instead, it read correctly and left the project name 128px past the phone. */
+    td { display:contents; white-space:normal; }
+    /* The column names are gone from this width, and there is no pseudo-element hiding them for
+       a screen reader: both ways of trying were measured against Chrome's accessibility tree and
+       neither works. Out of flow (the .sr recipe) the eight labels are read as ONE block after
+       the whole table, detached from every value they name — worse than silence. In flow at zero
+       size they are pruned from the tree entirely, and they still move the strip. What a reader
+       hears is the strip itself: "beacon, beacon-8c, waiting · permission prompt, ctx 65%, Opus
+       5, medium, $20.79, up 15h" — named for five of the eight, and unnamed for the project, the
+       session and the model. The desktop table names all eight in its thead, and so does every
+       JSON surface. Naming them here needs markup, and markup is not what this change is. */
+    /* The line break, as an item: zero-height, full-width, wedged between the state and the
+       first number. Without it the strip is a paragraph that reflows per session, and a column
+       of cards whose second line starts somewhere different each time cannot be scanned. */
+    tr::after { content:''; order:4; flex-basis:100%; height:0; }
     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); }
@@ -788,11 +974,86 @@ export function renderPage(fleet, view = 'table') {
        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; }
-    td, td:first-child { border:0; padding:.2rem 0; white-space:normal;
-         display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
-    td::before { content:attr(data-label); color:var(--dim); font-size:.72rem; font-weight:600;
-         text-transform:uppercase; letter-spacing:.06em; flex:none; }
-    .v { text-align:right; }
+    /* 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
+       card is a dashboard announcing what its agents were told to do, in the largest type on
+       the page. It also has no length limit, so it is the one value here allowed to wrap: the
+       page is content-box at this width and .wrap has given up its overflow-x, so a line
+       that refuses to break takes the whole document sideways.
+
+       The cell above hands back the white-space the desktop table takes; these two need the
+       other half of it, because both can arrive as ONE long token — a project is a directory's
+       basename, a background session's name is a prompt — and normal has nowhere to break a
+       word. min-width:0 for the same reason the berths carry it: a flex item's automatic
+       minimum is its min-content width, which without this is the whole unbroken string. */
+    td[data-label="Project"] .v { order:1; font-weight:600; min-width:0; overflow-wrap:anywhere; }
+    /* The basis is auto and not 0, which is what decides whether the name breaks INSIDE
+       itself. A basis of 0 puts it on the first line however little is left of one: at 390px
+       beside a 40-character project that is 44.6px of column, a session id cut across two
+       lines, the pill dropped alone underneath and a 63px strip standing at 105.7 — on
+       exactly the fleets whose checkout names are long. Its own width is the floor it wraps
+       at instead: beside the project where it fits, on the next line whole where it does not.
+       That floor is a trade, not a free fix: a name longer than one full line keeps a line of
+       its own at EVERY width, where a basis of 0 let it compress back beside the project as
+       the screen widened. The accepted side of #108: never cut a name mid-word, at the price
+       of a taller strip for prompt-named agents.
+       min-width:0 is what still lets it shrink once it is the widest thing on a line of its
+       own, which is the wrap the rule above is written for. */
+    td[data-label="Session"] .v { order:2; flex:1 1 auto; min-width:0; color:var(--dim);
+         white-space:normal; overflow-wrap:anywhere; }
+    /* The third value that can arrive as one unbroken token, and the one the two rules above
+       missed: a waiting reason is FREE TEXT, so "permission prompt: /Users/…/foo.ts" is a path
+       with no space to break at. Wrapping inside the pill (below) breaks a sentence and does
+       nothing for a path — at 320px an 84-character token laid the document out at 483px, 455 of
+       them this cell, which is the scroll bar the fix beside it had just closed. */
+    td[data-label="State"] .v { order:3; min-width:0; overflow-wrap:anywhere; }
+    /* The reason a session is waiting is free text: "permission prompt" fits on a phone and a
+       sentence does not. Held nowrap, the pill is one unbreakable item on that first line,
+       which is the same scroll bar by the other road. It wraps inside its own border instead,
+       and the border stops being a capsule once it has three lines to go round: 99px on a box
+       that tall is an ellipse whose curve crosses the words. Under half a single line's height,
+       the radius is still clamped to a capsule on one line and merely rounded on three. */
+    .pill { white-space:normal; border-radius:.9rem; }
+    /* Line two: the numbers, each wearing a name of its own. "65%" alone under a line of prompt
+       reads as how much of the prompt is done, which is the mistake the map's strip already had
+       to fix; "$20.79" and "Opus 5" say what they are without help. */
+    td[data-label="Context"] .v, td[data-label="Model"] .v, td[data-label="Effort"] .v,
+    td[data-label="Cost"] .v, td[data-label="Uptime"] .v { font-size:.82rem; }
+    td[data-label="Context"] .v { order:5; font-variant-numeric:tabular-nums; font-weight:600; }
+    td[data-label="Context"] .v::before { content:'ctx '; color:var(--dim); font-weight:400; }
+    /* The weight above is for a percentage. A session with no reading renders this same cell as
+       "— not chained", and in the number's weight a missing measurement reads like a
+       measurement — heavier here than the same words are on the desktop table. */
+    td[data-label="Context"] .v .dim { font-weight:400; }
+    /* Same two rules again, and the same argument: a model and an effort are not tarmac's own
+       words. They are model.display_name and the effort out of a statusline payload, copied
+       through verbatim and capped nowhere — a 120-character model laid the document out at
+       814px. The three numbers below stay off this list, and NOT because of where they come
+       from: a cost is copied out of that same payload and guarded even less (1e999 is legal
+       JSON and reaches the cell as $Infinity, where a percentage that shape is refused). It is
+       what they are PRINTED through that bounds them — a percentage clamped to 0..100 and
+       floored, a duration, and a toFixed(2) that goes exponential long before it goes long.
+       None can be a token wider than a phone, and a guard for that is prose that lies. */
+    td[data-label="Model"] .v { order:6; min-width:0; overflow-wrap:anywhere; }
+    td[data-label="Effort"] .v { order:7; color:var(--dim); min-width:0; overflow-wrap:anywhere; }
+    td[data-label="Cost"] .v { order:8; font-variant-numeric:tabular-nums; }
+    td[data-label="Uptime"] .v { order:9; color:var(--dim); font-variant-numeric:tabular-nums; }
+    td[data-label="Model"] .v::before, td[data-label="Effort"] .v::before,
+    td[data-label="Cost"] .v::before { content:'· '; color:var(--dim); font-weight:400; }
+    td[data-label="Uptime"] .v::before { content:'· up '; color:var(--dim); font-weight:400; }
+    /* A dash is not a value that wears its own name, and a session with no snapshot behind it
+       has four of them at once: the percentage, the model, the effort and the cost all come out
+       of one statusline frame, so they go missing together. That is not the corner case — it is
+       every session until the status line has been chained and each one has drawn a frame, the
+       state the page prints a warning about. As a strip it read "ctx — not chained · — · — · —",
+       three anonymous dashes in a row, and the same happens one at a time for a session that
+       reports no cost. Those three get their column word back; the other two already have one.
+       The hook is the markup's own — a missing value is a .dim inside the cell's .v, and a
+       present one never puts one there. */
+    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 '; }
     .bar { display:none; }
   }
 </style>
@@ -850,6 +1111,9 @@ export function renderPage(fleet, view = 'table') {
 <!-- 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>
+  <!-- "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>
   <input type="range" id="scrub" min="0" max="0" step="1" value="0" disabled aria-label="Replay position">
   <div class="covers" id="covers"></div>
@@ -877,7 +1141,7 @@ export function renderPage(fleet, view = 'table') {
  * 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
+ * browser — fed the same three words, the same four 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;
@@ -912,6 +1176,22 @@ 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;
+  // 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
+  // wrong thing to shout five seconds before the next answer lands. It waits for the second
+  // consecutive miss; the age upstairs keeps counting meanwhile, so nothing on the page is
+  // claiming to be fresher than it is.
+  //
+  // Consecutive means in a row IN TIME, which is why the stamp is here. A count cleared only by
+  // a successful poll is not the same rule: a hidden tab issues no polls, so a miss from before
+  // the reader locked their phone sat there for an hour, and the wake-up poll — the likeliest
+  // miss of the session, fired while the radio is still reassociating — found it and raised the
+  // banner over one dropped request. A miss further back than a few poll intervals starts the
+  // count again. The window is bounded at both ends and neither end is arbitrary: below one
+  // poll interval two real misses in a row would never meet, and above five a locked phone
+  // comes back to a miss from minutes ago being called consecutive with this one.
+  var misses = 0, missAt = 0, MISSES_BEFORE_BANNER = 2, MISS_WINDOW_MS = 3 * ${REFRESH_MS};
 
   function ago(ms) {
     // A clock that steps backwards (an NTP correction, a laptop waking) must not produce
@@ -922,8 +1202,18 @@ function pageScript(view) {
     return m < 60 ? m + 'm' : Math.round(m / 60) + 'h';
   }
 
+  // Called for the one failure that is NOT a missed poll: a request the server accepted and
+  // never answered. Twenty seconds of silence from a live connection is not a dropped packet,
+  // so it says so at once, without the second miss the count is there to wait for. It does not
+  // touch the count: a miss cannot take this banner back down, because a miss never assigns the
+  // failing flag anything but true, and only an ANSWER puts it back to false.
   function fail(why_) {
     failing = true;
+    // Retired, not merely dropped. Clearing the in-flight flag without moving the generation
+    // left the abandoned request still ours, so the answer that arrived twenty seconds later was
+    // swapped in and stamped "updated 0s ago" — the freshest label on the page over a fleet read
+    // before the stall was declared. The manual has always said such an answer is discarded.
+    gen += 1;
     why.textContent = why_;
     off.hidden = false;
     document.body.classList.toggle('failing', true);
@@ -983,10 +1273,20 @@ function pageScript(view) {
         if (src) limits.innerHTML = src.innerHTML;
         last = Date.now();
         failing = false;
+        // Consecutive, not cumulative: two blips an hour apart are two blips, and a count that
+        // never went back to zero would turn the second one into a permanent banner.
+        misses = 0;
       });
     }).catch(function (e) {
       if (!mineStill()) return;
-      failing = true;
+      if (Date.now() - missAt > MISS_WINDOW_MS) misses = 0;
+      misses += 1;
+      missAt = Date.now();
+      // Raised here, never lowered here. Only an ANSWER says the server came back, so this
+      // assigns true or nothing at all — derived both ways, the window that starts a fresh count
+      // also cleared the alarm, and a reader who locked their phone for ten minutes while the
+      // server was down unlocked onto a green page over a fleet nobody could read.
+      if (misses >= MISSES_BEFORE_BANNER) failing = true;
       why.textContent = String((e && e.message) || e).slice(0, 200);
     }).then(function () {
       // Not ours to unlock: a request we were given up on must not clear a flag that a newer
@@ -1014,7 +1314,7 @@ function pageScript(view) {
   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.
+  // the three kinds of missing, four glyphs for the four 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;' };
@@ -1033,12 +1333,20 @@ function pageScript(view) {
   }
 
   function two(n) { return (n < 10 ? '0' : '') + n; }
-  function hhmm(t) { var d = new Date(t); return two(d.getHours()) + ':' + two(d.getMinutes()); }
+  // One page, one clock, and it is the one the summary line already dates the fleet on: an ISO
+  // instant in UTC. Spelled on the machine's own clock, these minutes and that stamp are the
+  // same fleet apparently living in two time zones, the first time anything shows both — an
+  // export, a log line, a screenshot with the header in it. Every minute below carries UTC
+  // where a reader meets it, because an unlabelled one reads as the reader's own clock and is
+  // the same lie facing the other way.
+  function hhmm(t) { var d = new Date(t); return two(d.getUTCHours()) + ':' + two(d.getUTCMinutes()); }
 
   // 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.
+  // backwards until the older edge says which day it is. Which midnight is UTC's, like the
+  // minutes it separates: counted otherwise, "yesterday" turns up between two minutes of one
+  // UTC day and goes missing across the midnight it exists for.
   function edge(t, ref) {
-    return hhmm(t) + (new Date(t).getDate() === new Date(ref).getDate() ? '' : ' yesterday');
+    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
@@ -1050,13 +1358,13 @@ function pageScript(view) {
       // 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 '
+        ? '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)
+        : '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)
+    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.
@@ -1291,8 +1599,9 @@ function pageScript(view) {
     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);
+    var minute = hhmm(s.t) + ' UTC';
+    scrub.setAttribute('aria-valuetext', minute);
+    atEl.textContent = minute;
     rmeta.textContent = metaOf(s);
     rmap.innerHTML = nodesOf(s);
     // The account of that minute, in the place the live pair occupies — which the body class
@@ -1379,11 +1688,13 @@ function pageScript(view) {
 function renderRow(r) {
     const state = stateOf(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
-    // value right, and two sibling nodes in one cell get pushed to opposite ends of the card —
-    // which is how "63%" once ended up stranded in the middle of a row, under the wrong label.
+    // `data-label` is not decoration, and no longer only for the reason it was: the header row is
+    // gone below ~46rem, and what the attribute does there is CARRY THE STRIP. The per-column
+    // rules select `td[data-label="…"] .v` for their `order`, for their wrapping, and for the five
+    // `::before` prefixes that are the only column words left at that width — `ctx `, `· up `, and
+    // `· model `/`· effort `/`· cost ` for a value that is a bare dash. One element per cell, since
+    // `td` is `display:contents` there: the `.v` IS the row's flex item, and a second sibling in
+    // one cell would be a second item placed on an `order` of its own.
     return `<tr data-state="${state}">
     <td data-label="Project" class="project"><span class="v">${esc(r.project)}</span></td>
     <td data-label="Session" class="dim"><span class="v">${esc(r.name)}</span></td>