@adrrr/tarmac 0.4.1 → 0.6.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); }
@@ -607,23 +735,87 @@ export function renderPage(fleet, view = 'table') {
   /* ── the map ─────────────────────────────────────────────────────────────────────────
      One node per session. The arc is the context, its weight is how much that reading may
      be believed, and the halo — the only thing on this page that moves — says a frame
-     landed moments ago. */
-  .map { display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr)); }
+     landed moments ago. A background agent is drawn with none of the three — there is no
+     terminal behind it to draw a statusline frame with — and is a strip instead, docked
+     under the cards of its berth, printing as text whatever its snapshot did publish.
+
+     Two layouts, each named, because the two surfaces know different things. The live map
+     groups by working directory (the berths below); the replay behind the scrubber keeps a
+     project name and never the directory it was read in, and a basename is not a directory —
+     a frame drawn on it would group two checkouts of one repository into one. So it stays the
+     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)); }
+  /* 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
+     frame that competed with it would be a box drawn around a fact nobody asked about.
+
+     min-width:0 because a berth is a flex ITEM, and a flex item's automatic minimum size is
+     its min-content width — here the widest strip docked in it, whose prompt is one nowrap
+     line with no length limit. At auto the frame simply grows to fit the prompt: the
+     ellipsis on the strip still resolves, against a column that is never narrower than its own
+     text, so nothing is ever clipped and the page scrolls sideways instead. The flat grid gave
+     the strip a column to be cut to by being a grid; the frame has to say so. */
+  .berth { min-width:0; border:1px solid var(--line); border-radius:12px; padding:.6rem .7rem .7rem; }
+  .berth-label { margin:0 0 .5rem; font-size:.72rem; font-weight:600; text-transform:uppercase;
+          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; }
+  .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
+     prompt was. Below the cards rather than among them because that is what it is — the
+     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;
           display:flex; flex-direction:column; align-items:center; text-align:center; }
   .node[data-state="busy"] { border-color:color-mix(in srgb, var(--busy) 45%, var(--line)); }
   .node[data-state="waiting"] { border-color:color-mix(in srgb, var(--wait) 45%, var(--line)); }
-  /* An agent is a smaller body in the same system, next to the session it shares a directory
-     with — never inside it. Tinted rather than outlined, and hooked, so it reads as the
-     session's dependent without a line claiming a parentage the source never published. */
-  .node[data-role="agent"] { padding-top:.55rem; border-color:transparent;
-          background:color-mix(in srgb, var(--line) 22%, transparent); }
-  .node[data-role="agent"] .dial { width:3.6rem; height:3.6rem; }
-  .node[data-role="agent"] .pct { font-size:.95rem; }
-  .node[data-role="agent"] .why { font-size:.6rem; max-width:3.4rem; }
-  .node[data-role="agent"] .why b { font-size:1rem; }
-  .node[data-role="agent"] .project { font-weight:400; }
-  /* Said, not shown: the three glyphs differ in silhouette, so a reader who cannot separate
+  /* 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);
+          /* 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); }
+  .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 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
+     that used to need it went, or that name would sit at the body's own size, a size and a
+     half larger than the line it is on, on the one surface this suite renders no markup for. */
+  .node[data-role="agent"] .project { font-weight:600; font-size:.8rem; }
+  /* What the node calls itself, at the end of its line: an agent's line already reads as a
+     sentence, and the kind is the word that says it is not a terminal. This one and the prompt
+     below it are scoped to a node like every other rule here: both are words a table cell could
+     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 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. */
+  .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 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; }
@@ -674,8 +866,12 @@ export function renderPage(fleet, view = 'table') {
   .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%; }
-  .who .project { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-  .node[data-state="busy"] .who .project { font-weight:700; }
+  /* Two fields in one slot, and they are not the same fact. A live card names the SESSION —
+     the berth above it says the directory, and two sessions in one checkout are told apart by
+     nothing else. A replayed card has only the project: the ring never kept a name, for any
+     kind of session, so there is no berth behind the scrubber and no name to put in front. */
+  .who .name, .who .project { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .node[data-state="busy"] .who .name, .node[data-state="busy"] .who .project { font-weight:700; }
   .shape { font-size:.7rem; color:var(--dim); }
   .node[data-state="busy"] .shape { color:var(--busy); }
   .node[data-state="waiting"] .shape { color:var(--wait); }
@@ -686,27 +882,166 @@ export function renderPage(fleet, view = 'table') {
   .sub.waiting-for { color:var(--wait); font-weight:600; }
   .asof { font-size:.72rem; color:var(--dim); font-variant-numeric:tabular-nums; margin-top:.15rem; }
   .asof.stale { color:var(--warn); font-weight:600; }
-  @media (max-width: 30rem) { .map { grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); gap:.6rem; } }
+  @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); }
-    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; }
+    /* The frames stop sharing a row, and the cards inside one stop being a fixed column so two
+       of them still fit across a phone. The berth keeps its hairline: a border around a card
+       inside a border around a directory is two hairlines, which is not the weight worth
+       spending a claim on — and dropping the frame here would drop the claim with it. */
+    .berth { width:100%; padding:.5rem .55rem .6rem; }
+    .berth-cards { gap:.5rem; }
+    /* min-width:0 for the reason the berth carries it, and here it is the width that was doing
+       the capping: a card's automatic minimum is its min-content width unless a specified size
+       suggests otherwise, and dropping the fixed column to auto drops that suggestion. A card
+       is then as wide as the name on it, and .who .name is one nowrap line — with a
+       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
+       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; }
+    td[data-label="Session"] .v { order:2; flex:1 1 0; 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>
@@ -759,11 +1094,14 @@ export function renderPage(fleet, view = 'table') {
        would be a claim about nothing. -->
   <div class="limits" id="replay-limits" role="group" aria-label="account rate limits, at the minute being replayed" hidden></div>
   <div class="meta" id="replay-meta"></div>
-  <div class="map" id="replay-map"></div>
+  <div class="map flat" id="replay-map"></div>
 </div>
 <!-- A dead handle is worse than no handle: this is revealed once the record is in hand, and
      what it says it covers is whatever the record answered with. -->
 <div class="replay" id="replay" hidden>
+  <!-- "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>
@@ -791,7 +1129,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;
@@ -826,6 +1164,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
@@ -836,8 +1190,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);
@@ -897,10 +1261,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
@@ -928,7 +1302,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;' };
@@ -978,7 +1352,18 @@ function pageScript(view) {
       // 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 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.';
   }
 
   function ready() {
@@ -1040,6 +1425,26 @@ function pageScript(view) {
     // unescaped, and into the glyph slot as a function body.
     var state = own(SHAPE, x.state) ? x.state : 'unknown';
     var pct = typeof x.ctxPct === 'number' ? x.ctxPct : null;
+    // The live view's rule about agents, in the copy of it that ships to the browser: a strip,
+    // never a dial. A replay drawing agents as rings while the page one draws them as strips
+    // would read as two kinds of thing — and the ring is the surface that can LEAST fill a
+    // gauge, since it keeps a reading and never the terminal that produced it. No prompt line:
+    // a background session is named after the prompt it was given, and the record stores no
+    // names. What it does hold for one is a percentage and what it cost — printed like
+    // anywhere else, the percentage labelled as the live strip labels it, since neither a ring
+    // nor a column header is here to say which quantity it is. No model and no effort: a
+    // sample is not a snapshot, and the record was never given either.
+    if (role === 'agent') {
+      return '<article class="node" data-role="agent" data-state="' + state + '" data-reading="undatable">'
+        + '<div class="who"><span class="shape" aria-hidden="true">' + SHAPE[state] + '</span>'
+        + '<span class="sr">' + state + '</span>'
+        + '<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>')
+        + (typeof x.costUsd === 'number' ? '<div class="sub">$' + x.costUsd.toFixed(2) + '</div>' : '')
+        + '</article>';
+    }
     // The ring keeps each reading and never how old that reading was, so the arc weight that
     // says how much a reading may be believed cannot be earned here. It is not the live
     // default either: this third value is de-weighted in the stylesheet, and never the warning
@@ -1144,9 +1549,11 @@ function pageScript(view) {
   function nodesOf(s) {
     var anchored = false, html = '', i;
     for (i = 0; i < s.sessions.length; i++) if (s.sessions[i].kind === INTERACTIVE) anchored = true;
-    // In the order the sample carries. The live map places an agent beside the session it
-    // shares a directory with; the ring holds no directory, so the past is drawn in the order
-    // the fleet was sorted in rather than in a grouping this page would have to invent.
+    // In the order the sample carries, flat. The live map frames its nodes by working
+    // directory; the ring holds a project name and never the directory it was read in, and a
+    // basename is not a directory — a frame drawn on it would put two checkouts of one
+    // repository behind one label. So the past keeps the order the fleet was sorted in, rather
+    // than a grouping this page would have to invent a key for.
     for (i = 0; i < s.sessions.length; i++) html += nodeOf(s.sessions[i], anchored);
     return html;
   }
@@ -1260,11 +1667,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>
@@ -1300,21 +1709,45 @@ const stateLabel = (state, r) => state === 'waiting' && r.waitingFor ? `${stateW
  */
 const CTX_WHY = { fresh: 'no turn yet', drift: 'schema drift', absent: 'not chained' };
 /**
- * The map: one node per session, laid out as a grid rather than a graph. An empty fleet is not
- * its business — `renderLive` says that once, above both views, rather than letting each of
- * them render the same sentence and hide one of the two.
+ * The map: one node per session, grouped into berths rather than laid out as a graph. An empty
+ * fleet is not its business — `renderLive` says that once, above both views, rather than
+ * letting each of them render the same sentence and hide one of the two.
  *
  * There are no edges because the sources publish no relationship between two sessions — the
- * one thing they do carry is the working directory, and that is expressed by putting an
- * agent NEXT to the session it shares a directory with, never by drawing a line that would
- * claim more than the data says.
+ * one thing they do carry is the working directory, and that is what a berth is drawn around.
+ * A frame is the cheapest way to say "these were read in one place" and the hardest to
+ * misread as a line between two of them.
  *
  * Everything a reader interprets is decided in `map.ts` and rendered here, on the server,
  * for the same reason the table is: the rules that keep a reading honest are tested, and a
  * copy of them re-derived in browser JavaScript would sit where this suite cannot reach.
  */
 export function renderMap(fleet) {
-    return `<div class="map">${buildMap(fleet).nodes.map(renderNode).join('')}</div>`;
+    return `<div class="map berths">${buildMap(fleet).berths.map(renderBerth).join('')}</div>`;
+}
+/**
+ * One berth: a frame, a label, the cards of the directory, and the strips docked under them.
+ *
+ * The label is the WHOLE of what the frame claims — these nodes were read in this directory.
+ * Nothing in here says which node dispatched which, because `claude agents --json` publishes
+ * no such field: no order, no position and no line inside the frame means "parent of". The day
+ * that relation is published it is drawn between nodes already sitting side by side, and this
+ * function is where it would go — inside a berth, without moving one.
+ *
+ * Named for the reader who is handed no border at all: the frame is a group with the project
+ * for its name, and the heading says the same word for one navigating by headings. Each half
+ * is drawn only if it has something in it, so an orphan agent's berth is a frame with a strip
+ * in it rather than a frame with an empty row above one.
+ *
+ * `role="group"` explicitly, which is what a named `<section>` would NOT be: that is a region,
+ * a landmark, and one per working directory turns a busy machine into a page of landmarks all
+ * named after a basename — several of them possibly the same basename, since two checkouts of
+ * `atlas` are two berths with one label. The name is what this frame is worth to a screen
+ * reader; a place in the landmark index is not, and `group` is the idiom the page already uses
+ * for every other named box on it.
+ */
+function renderBerth({ label, sessions, agents }) {
+    return `<section class="berth" role="group" aria-label="${esc(label)}"><h2 class="berth-label">${esc(label)}</h2>${sessions.length === 0 ? '' : `<div class="berth-cards">${sessions.map(renderNode).join('')}</div>`}${agents.length === 0 ? '' : `<div class="berth-strips">${agents.map(renderNode).join('')}</div>`}</section>`;
 }
 /**
  * One node. Five facts, in five channels that do not depend on colour alone: the arc is how
@@ -1326,6 +1759,11 @@ export function renderMap(fleet) {
  * One state brings a caption with it. A waiting session is the only one where the shape
  * leaves a question the source can answer — which human answer it is halted on — and it is
  * printed directly under the name, not hidden in a title attribute nobody hovers on a phone.
+ *
+ * Two shapes, and the split is what a node HAS rather than what it is worth: a session has a
+ * terminal, so the dial and its four facts are drawn for it. A background agent has no
+ * terminal to draw a frame with, and gets the strip below — same data attributes, same glyph,
+ * same words to a screen reader, and whatever its snapshot published, as text on one line.
  */
 function renderNode({ row: r, role, state, reading, measured, pulse }) {
     // The model owns "is there a number"; this reads its verdict rather than asking the row a
@@ -1341,18 +1779,50 @@ function renderNode({ row: r, role, state, reading, measured, pulse }) {
         : reading === 'undated'
             ? `<div class="asof stale">! undated</div>`
             : '';
-    // An agent carries its own project, like every other node. Placement is not a promise —
-    // the grid wraps where the viewport says, and the fleet's sort can hand the same agent a
-    // different neighbour on the next poll — so nothing here points at the node beside it.
+    // The strip. What it dropped was the dial, never the reading: the ring on an agent could
+    // never fill — there is no terminal here to draw a statusline frame with — and the middle of
+    // it read "not chained", the vocabulary of a repairable fault ("run `tarmac install`") said
+    // about a session no install can ever cover. So no gauge, no dash, no reason where the
+    // source published nothing, and the three fields it does publish about an agent in text: its
+    // state, the kind it calls itself, and the prompt it was named after.
+    //
+    // Nor a halo: it is a ring drawn inside the dial, and this shape has neither. What it says —
+    // a reading landed seconds ago — is the one claim on this page nobody can look away from,
+    // and it is not the fact a strip exists to carry.
+    //
+    // Nor the project: the berth around this strip says the directory once, for every node in
+    // it, and a strip that repeated it would print `harbor` four times inside one frame. What
+    // the line spends itself on instead is what tells two agents in one berth apart — the prompt
+    // it was named after, and the kind it calls itself. Nothing here points at a node beside it:
+    // sharing a frame is sharing a directory, and that is all it has ever been.
+    if (role === 'agent') {
+        // The rule for the rest: the strip prints what that session's snapshot published, and
+        // nothing where nothing was published. The percentage, the model and the effort come out
+        // of one file — `buildFleet` reads all three off the same object — so an agent the join
+        // found a payload for shows all of them, on one line, beside the reading's age when it is
+        // one nobody should take for current. The number carries its own label: a card has a ring
+        // 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]
+            .filter((v) => v !== null && v !== '')
+            .map(esc)
+            .join(' · ');
+        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>` : ''}
+      ${published === '' ? '' : `<div class="sub">${published}</div>`}
+      ${asOf}
+    </article>`;
+    }
     return `<article class="node" data-role="${role}" data-state="${state}" data-reading="${reading}">
       <div class="dial">
         <svg viewBox="0 0 80 80" aria-hidden="true">${pulse ? `<circle class="halo" cx="40" cy="40" r="${DIAL_R}"/>` : ''}<circle class="track${measured ? '' : ' unmeasured'}" cx="40" cy="40" r="${DIAL_R}"/>${pct === null ? '' : arc(pct)}</svg>
         <div class="val">${value}</div>
         ${pulse ? `<span class="sr">a reading just landed</span>` : ''}
       </div>
-      <div class="who"><span class="shape" aria-hidden="true">${SHAPE[state]}</span><span class="sr">${esc(stateWord(state, r))}</span><span class="project">${esc(r.project)}</span></div>
+      <div class="who"><span class="shape" aria-hidden="true">${SHAPE[state]}</span><span class="sr">${esc(stateWord(state, r))}</span><span class="name">${esc(r.name)}</span></div>
       ${state === 'waiting' && r.waitingFor ? `<div class="sub waiting-for">${esc(r.waitingFor)}</div>` : ''}
-      <div class="sub">${esc(r.name)}</div>
       ${r.kind === null || r.kind === INTERACTIVE ? '' : `<div class="sub">${esc(r.kind)}</div>`}
       <div class="sub">${esc(r.model)}${r.effort === null ? '' : ` · ${esc(r.effort)}`}</div>
       ${asOf}