@ucsandman/legcli 0.10.0 → 0.12.0

package/src/audit.mjs

@@ -0,0 +1,118 @@
+// audit — one list of who did what on this board, across every terminal and
+// every card, newest first.
+//
+// The ledger already names an actor on every event; until now you could only
+// read that one session or one card at a time, which is no use when the
+// question is "who landed that?" or "who handed my terminal off last night".
+// Nothing new is recorded here: this reads what is already on disk.
+//
+// Owner only (src/server.mjs): the trail names repositories and people.
+import { existsSync, readdirSync, readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { home } from './store.mjs'
+import { listSessions, readEvents as readSessionEvents } from './sessions.mjs'
+import { readEvents as readCardEvents } from './ledger.mjs'
+
+// The types worth a line in an audit: something a person or an agent DID, not
+// the running commentary. A `status` line is commentary; a hand-off is not.
+export const AUDITED = [
+  'handoff', 'handoff_requested', 'handed_off', 'landed', 'land', 'bounced', 'killed',
+  'approved', 'approval_needed', 'reassigned', 'paused', 'resumed', 'taken_over', 'ended', 'done',
+  'failed', 'trust', 'harness', 'worktree', 'station_done', 'leg_started', 'rerun',
+]
+
+export const ACTOR_KINDS = ['human', 'agent', 'leg']
+
+function actorOf(ev) {
+  // a card event carries a structured actor; a session event carries `by`
+  if (ev.actor && typeof ev.actor === 'object') {
+    if (ev.actor.type === 'human') return { kind: 'human', name: String(ev.actor.id ?? 'unknown') }
+    if (ev.actor.type === 'agent') return { kind: 'agent', name: String(ev.actor.adapter ?? 'agent') }
+    return { kind: 'leg', name: 'leg' }
+  }
+  if (ev.by) return { kind: 'human', name: String(ev.by) }
+  return { kind: 'leg', name: 'leg' }
+}
+
+function cardIds() {
+  const root = join(home(), 'cards')
+  if (!existsSync(root)) return []
+  try { return readdirSync(root).filter((d) => existsSync(join(root, d, 'card.json'))) } catch { return [] }
+}
+
+function cardMeta(id) {
+  try { return JSON.parse(readFileSync(join(home(), 'cards', id, 'card.json'), 'utf8')) } catch { return null }
+}
+
+// → { entries: [...], truncated, scanned: { sessions, cards, events } }
+// `scanned` is on the record deliberately: an empty audit from a board that
+// looked at nothing reads exactly like a quiet week, and the two are not the
+// same thing.
+export function auditTrail({ limit = 200, since = null, who = null, kind = null, types = null } = {}) {
+  const sinceMs = since ? Date.parse(since) : null
+  const wanted = Array.isArray(types) && types.length ? new Set(types) : new Set(AUDITED)
+  const rows = []
+  let events = 0
+
+  const sessions = listSessions()
+  for (const s of sessions) {
+    for (const ev of readSessionEvents(s.session_id)) {
+      events++
+      if (!wanted.has(ev.type)) continue
+      const at = Date.parse(ev.ts)
+      if (sinceMs && Number.isFinite(at) && at < sinceMs) continue
+      const actor = actorOf(ev)
+      rows.push({
+        at: ev.ts,
+        who: actor.name,
+        kind: actor.kind,
+        what: ev.type,
+        summary: String(ev.summary ?? ''),
+        where: 'terminal',
+        id: s.session_id,
+        agent: s.agent ?? null,
+        repo: s.repo ?? null,
+        branch: s.branch ?? null,
+      })
+    }
+  }
+
+  const ids = cardIds()
+  for (const id of ids) {
+    const card = cardMeta(id)
+    for (const ev of readCardEvents(id)) {
+      events++
+      if (!wanted.has(ev.type)) continue
+      const at = Date.parse(ev.ts)
+      if (sinceMs && Number.isFinite(at) && at < sinceMs) continue
+      const actor = actorOf(ev)
+      rows.push({
+        at: ev.ts,
+        who: actor.name,
+        kind: actor.kind,
+        what: ev.type,
+        summary: String(ev.summary ?? ''),
+        where: 'card',
+        id,
+        agent: ev.actor?.type === 'agent' ? ev.actor.adapter : null,
+        repo: card?.repo ?? null,
+        branch: card?.branch ?? null,
+      })
+    }
+  }
+
+  let filtered = rows
+  if (who) filtered = filtered.filter((r) => r.who.toLowerCase() === String(who).toLowerCase())
+  if (kind) filtered = filtered.filter((r) => r.kind === kind)
+  filtered.sort((a, b) => (Date.parse(b.at) || 0) - (Date.parse(a.at) || 0))
+  const capped = filtered.slice(0, Math.max(1, Math.min(limit, 1000)))
+
+  return {
+    entries: capped,
+    truncated: filtered.length > capped.length,
+    matched: filtered.length,
+    // L2: a verdict carries the volume it processed
+    scanned: { sessions: sessions.length, cards: ids.length, events },
+    people: [...new Set(rows.filter((r) => r.kind === 'human').map((r) => r.who))].sort(),
+  }
+}

package/src/board/audit.js

@@ -0,0 +1,123 @@
+// Audit trail: who did what, across every terminal and every card on this
+// board. Data: /api/audit, which is owner-only — the trail names repositories
+// and the people on the roster.
+//
+// It loads when the reader asks, never on a board render: the trail reads every
+// session's events and every card's ledger, and that is not work to do on a
+// timer behind a panel nobody has opened. Like the history cell, nothing here
+// arrives over SSE (DESIGN.md rule 3: the live terminals lane is the only live
+// region).
+//
+// `el`, `api`, `getToken`, `ago` and `whenAgo` are copied from sessions.js,
+// which cannot export from its IIFE. The time grammar is sessions.js's: a
+// change to ago() there is a change here in the same commit.
+(function () {
+  'use strict'
+
+  function getToken() { return localStorage.getItem('legToken') || localStorage.getItem('batonToken') || '' }
+  async function api(path, opts = {}) {
+    const headers = { 'Content-Type': 'application/json' }
+    const token = getToken()
+    if (token) headers.Authorization = `Bearer ${token}`
+    const r = await fetch(path, { method: opts.method || 'GET', headers, body: opts.body ? JSON.stringify(opts.body) : undefined })
+    const data = await r.json().catch(() => ({}))
+    if (!r.ok) throw new Error(data.error || `${r.status} ${r.statusText}`)
+    return data
+  }
+  function el(tag, attrs, children) {
+    const n = document.createElement(tag)
+    for (const [k, v] of Object.entries(attrs || {})) { if (v === null || v === undefined) continue; if (k === 'class') n.className = v; else n.setAttribute(k, v) }
+    for (const c of children || []) { if (c === null || c === undefined) continue; n.appendChild(typeof c === 'string' ? document.createTextNode(c) : c) }
+    return n
+  }
+  function ago(ms) {
+    const s = Math.max(0, Math.floor(ms / 1000))
+    if (s < 60) return `${s}s`
+    const m = Math.floor(s / 60)
+    if (m < 60) return `${m}m`
+    const h = Math.floor(m / 60)
+    if (h < 48) return `${h}h${m % 60 ? ` ${m % 60}m` : ''}`
+    const d = Math.floor(h / 24)
+    return `${d}d${h % 24 ? ` ${h % 24}h` : ''}`
+  }
+  function whenAgo(ts) {
+    const t = Date.parse(ts)
+    return Number.isFinite(t) ? `${ago(Date.now() - t)} ago` : ''
+  }
+  function clockAt(ms) {
+    const d = new Date(ms)
+    if (!Number.isFinite(d.getTime())) return ''
+    return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false })
+  }
+
+  const root = document.getElementById('audit')
+  if (!root) return
+  const whoSel = document.getElementById('audit-who')
+  const kindSel = document.getElementById('audit-kind')
+  const loadBtn = document.getElementById('audit-load')
+  const meta = document.getElementById('audit-meta')
+  const list = document.getElementById('audit-list')
+  let knownPeople = null
+
+  // A guest or an operator never sees this panel; the fieldset stays hidden
+  // until /api/audit answers, so a 403 leaves nothing on the page to click.
+  async function reveal() {
+    try {
+      const r = await api('/api/audit?limit=1')
+      root.hidden = false
+      knownPeople = r.people || []
+      fillPeople()
+    } catch { root.hidden = true }
+  }
+
+  function fillPeople() {
+    if (!knownPeople) return
+    const current = whoSel.value
+    while (whoSel.options.length > 1) whoSel.remove(1)
+    for (const p of knownPeople) whoSel.appendChild(el('option', { value: p }, [p]))
+    whoSel.value = current
+  }
+
+  function row(e) {
+    const line = el('div', { class: 'audit-row' })
+    line.appendChild(el('span', { class: 'audit-when', title: e.at }, [clockAt(Date.parse(e.at))]))
+    line.appendChild(el('span', { class: `chip chip-id-${e.kind === 'human' ? 'human' : (e.agent || 'leg')}` }, [e.who]))
+    line.appendChild(el('span', { class: 'audit-what' }, [e.what.replace(/_/g, ' ')]))
+    line.appendChild(el('span', { class: 'audit-summary' }, [e.summary || '']))
+    const where = e.where === 'card' ? `card ${e.id}` : `terminal ${String(e.id).split('-').pop()}`
+    line.appendChild(el('span', { class: 'chip' }, [where]))
+    if (e.repo) line.appendChild(el('span', { class: 'chip' }, [String(e.repo).split(/[\\/]/).pop() + (e.branch ? `@${e.branch}` : '')]))
+    line.appendChild(el('span', { class: 'audit-ago' }, [whenAgo(e.at)]))
+    return line
+  }
+
+  async function load() {
+    loadBtn.disabled = true
+    meta.textContent = 'reading every terminal and every card…'
+    list.replaceChildren()
+    try {
+      const q = new URLSearchParams({ limit: '200' })
+      if (whoSel.value) q.set('who', whoSel.value)
+      if (kindSel.value) q.set('kind', kindSel.value)
+      const r = await api(`/api/audit?${q}`)
+      knownPeople = r.people || knownPeople
+      fillPeople()
+      // L2: the verdict carries the volume it processed, so an empty trail from
+      // a board that looked at nothing does not read like a quiet week.
+      const scanned = `${r.scanned.sessions} terminal${r.scanned.sessions === 1 ? '' : 's'} and ${r.scanned.cards} card${r.scanned.cards === 1 ? '' : 's'}, ${r.scanned.events} events read`
+      meta.textContent = r.entries.length
+        ? `${r.matched} action${r.matched === 1 ? '' : 's'}${r.truncated ? `, newest ${r.entries.length} shown` : ''} — ${scanned}`
+        : `nothing matched — ${scanned}`
+      for (const e of r.entries) list.appendChild(row(e))
+    } catch (err) {
+      meta.textContent = err.message
+    } finally {
+      loadBtn.disabled = false
+    }
+  }
+
+  loadBtn.addEventListener('click', load)
+  whoSel.addEventListener('change', load)
+  kindSel.addEventListener('change', load)
+  reveal()
+})()

package/src/board/board.css

@@ -205,11 +205,56 @@ code { font-family: var(--mono); font-size: 0.94em; }
 .sched-status { color: var(--text-3); }
 
 /* ---- the verdict: the largest thing on the board is a sentence ---------- */
-.verdict { padding-block: 56px 56px; }
+/* 40/24 rather than 56/56, and a 17px sub rather than 21px: the verdict stays
+   the largest thing on the page and costs about 180px instead of 335, which is
+   what put the first terminal row a thousand pixels down. The 26ch measure is
+   the character budget's other half: 300 sampled sentences per length still
+   fit two 56.16px lines at 60 characters there, and sessions.js holds every
+   branch at 56. */
+.verdict { padding-block: 40px 24px; }
 .verdict h1 { font-size: var(--t-4); font-weight: var(--w-head); line-height: 1.08; letter-spacing: -.028em; max-width: 26ch; text-wrap: balance; }
-.verdict p { margin-top: 16px; font-size: var(--t-2); line-height: 1.5; color: var(--text-2); max-width: 54ch; text-wrap: pretty; }
+.verdict p { margin-top: 8px; font-size: var(--t-1); line-height: 1.5; color: var(--text-2); max-width: 54ch; text-wrap: pretty; }
 .verdict p:empty { display: none; }
 
+/* ---- the capacity strip: one band, one token per login ------------------ */
+/* The binding bucket and nothing else. The instrument is 120x6: enough to see
+   a login crossing its reserve at a glance, too small to compete with the
+   sentence above it. */
+.capacity { margin-bottom: 4px; }
+/* the strip itself never wraps: the disclosure keeps the strip's own line at
+   the right (A.2) and the tokens wrap inside their own box, so four logins
+   that need two rows of tokens cost no third line for one button. */
+.capacity-strip { display: flex; align-items: center; gap: 12px 32px; flex-wrap: nowrap; min-height: 44px; font-size: var(--t-0); }
+.cap-tokens { display: flex; align-items: center; gap: 12px 32px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
+.cap-token { display: inline-flex; align-items: center; gap: 10px; min-height: 24px; }
+.cap-name { font-weight: var(--w-head); color: var(--text-2); }
+.cap-name.id-claude { color: var(--id-claude); }
+.cap-name.id-codex { color: var(--id-codex); }
+.cap-name.id-agy { color: var(--id-agy); }
+.cap-name.id-grok { color: var(--id-grok); }
+.cap-name.id-copilot { color: var(--id-copilot); }
+.cap-name.id-fake { color: var(--id-fake); }
+.cap-track { position: relative; flex: none; width: 120px; height: 6px; background: var(--track); border-radius: 999px; box-shadow: var(--sink); overflow: hidden; }
+.cap-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--calm); }
+.cap-figure { color: var(--text-2); white-space: nowrap; }
+/* a login at its wall is the one place a word IS the failure, so it may carry
+   the colour; a percentage never does, the track carries that */
+.cap-figure.is-out { color: var(--danger-text); }
+.cap-figure--none { color: var(--text-3); }
+.cap-open { margin-left: auto; flex: none; }
+.capacity-drawer { margin-top: 16px; }
+
+/* the model rail on a panel head inside the drawer: a measured percentage, or
+   a wall in words, never one printed as the other */
+.model-rail { display: inline-flex; align-items: baseline; gap: 14px; flex-wrap: wrap; font-size: var(--t--1); color: var(--text-3); }
+.model-chip { white-space: nowrap; }
+.model-chip.is-out { color: var(--danger-text); }
+/* an open model this login has a live terminal on is a control: pressing it
+   puts that rung at the top of the terminal's ladder. The one the terminal is
+   already on, and a walled one, stay text: there is nothing to press. */
+.model-chip--pick { font-size: var(--t--1); min-height: 28px; }
+.model-chip.is-current { color: var(--text-2); }
+
 /* ---- panel: a raised object, not a drawn rectangle ---------------------- */
 .panel { position: relative; background: var(--e2); border: 1px solid var(--edge); border-radius: var(--r-panel); padding: 32px; box-shadow: var(--lift); }
 .panel--lit { box-shadow: var(--lift-hi); }
@@ -252,7 +297,7 @@ code { font-family: var(--mono); font-size: 0.94em; }
 .reading-sub--lead { margin-top: 22px; }
 
 /* ---- section heads ------------------------------------------------------ */
-.section-head { padding-block: 56px 20px; }
+.section-head { padding-block: 32px 16px; }
 .section-head h2 { font-size: var(--t-2); font-weight: var(--w-head); letter-spacing: -.012em; }
 .section-head .region-meta { margin-top: 8px; font-size: var(--t-0); color: var(--text-3); }
 .section-head--quiet { padding-block: 56px 16px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
@@ -274,6 +319,28 @@ code { font-family: var(--mono); font-size: 0.94em; }
 .term-clock { flex: none; display: flex; align-items: baseline; justify-content: flex-end; gap: 14px; font-size: var(--t--1); color: var(--text-3); white-space: nowrap; }
 .term-register { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; font-size: var(--t--1); color: var(--text-3); }
 .term-where { color: var(--text-2); }
+/* the register's data tokens (A.4 rows 7 to 9). They are one line with the
+   status word, in the register's own muted tone: what changed and how long it
+   has been quiet are observations, not demands. The model token is the one
+   fact here a reader looks for by name, so it takes the identity colour and
+   the mono face the other machine strings on this page use. */
+.term-dirty, .term-ahead, .term-quiet { color: var(--text-3); }
+.term-model { font-family: var(--mono); }
+/* the files line and the row's capacity phrase share one line, the phrase at
+   the right (A.2). The phrase is per MODEL, which is a fact about this row;
+   the region head carries the share clause for the login. */
+.term-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
+.term-meta .files { flex: 1 1 24ch; min-width: 0; }
+/* the phrase wraps rather than pushing the row sideways: with a forecast it is
+   `about 2h 40m of fable left, from 9 samples over 4h`, two and a half times
+   the percentage form, and a nowrap run that long overflows the 400px board. */
+.term-capacity { margin-top: 10px; flex: none; display: inline-flex; align-items: baseline; gap: 10px; font-size: var(--t--1); color: var(--text-3); }
+/* the climb is a link beside the figure that explains it, never a fifth button
+   in the 2x2 grid, which is the shipped shape */
+.term-climb { font-size: var(--t--1); }
+/* the keyboard ring: a row the keys act on, marked on the edge the eye scans
+   down rather than by a fill that would compete with is-urgent */
+.term.is-focused { box-shadow: inset 3px 0 0 var(--focus); }
 .term-when { color: var(--text-3); min-width: 6ch; text-align: right; }
 .term-id { color: var(--text-3); min-width: 4ch; text-align: right; font-family: var(--mono); }
 .term-actions { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 272px; }
@@ -391,6 +458,21 @@ code { font-family: var(--mono); font-size: 0.94em; }
 .history-filters { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; margin: 4px 0 18px; max-width: 64ch; }
 .history-filters label { font-size: var(--t-0); font-weight: var(--w-head); color: var(--text-2); }
 .history-filters label:has(input[type="checkbox"]) { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-weight: var(--w-text); }
+/* Audit trail (Settings). Same grammar as the history rows: a flat list with
+   hairline separators, the time on the left, the actor as a chip. */
+.audit { border: 0; padding: 0; margin: 22px 0 0; }
+.audit legend { font-size: var(--t-0); font-weight: var(--w-head); color: var(--text-2); padding: 0; }
+.audit-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 10px 0 14px; }
+.audit-filters label { font-size: var(--t-0); font-weight: var(--w-head); color: var(--text-2); }
+.audit-list { display: block; }
+.audit-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding: 10px 0; font-size: var(--t-0); }
+.audit-row + .audit-row { border-top: 1px solid var(--line); }
+.audit-when { color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 12ch; }
+.audit-what { font-weight: var(--w-head); }
+.audit-summary { color: var(--text-2); flex: 1 1 46ch; min-width: 0; overflow-wrap: anywhere; }
+.audit-ago { color: var(--text-3); margin-left: auto; }
+@media (max-width: 640px) { .audit-ago { margin-left: 0; } }
+
 .history-list { display: block; }
 .history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: baseline; padding: 12px 0; font-size: var(--t-0); }
 .history-row + .history-row, .history-row + .history-detail, .history-detail + .history-row { border-top: 1px solid var(--line); }
@@ -487,8 +569,26 @@ code { font-family: var(--mono); font-size: 0.94em; }
 /* ---- chain rail, order rows, confirm ------------------------------------ */
 .chain-rail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--t-0); color: var(--text-3); }
 .cap-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: var(--t-0); color: var(--text-3); margin-top: 8px; }
-.order-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: var(--t-0); }
-.order-row-name { flex: 1 1 auto; }
+/* the ladder editor: one rung per row, numbered, with its when, its cost word
+   and three buttons. The name takes the free space so every row's controls line
+   up in one column whatever the rung is called. */
+.ladder-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: var(--t-0); flex-wrap: wrap; }
+.ladder-num { flex: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
+.ladder-name { flex: 1 1 12ch; min-width: 10ch; }
+.ladder-rule { flex: 0 0 auto; width: 22ch; display: flex; align-items: center; gap: 8px; }
+.ladder-cost { flex: none; font-size: var(--t--1); color: var(--text-3); }
+/* the cost word is a column of its own so the three buttons line up down the
+   list whatever a rung costs */
+.ladder-costcol { width: 12ch; }
+.ladder-when { flex: none; min-height: 36px; font-size: var(--t--1); }
+.ladder-pct { flex: none; width: 7ch; min-height: 36px; font-size: var(--t--1); }
+/* a stored 0 or 100 is shown as it is and says what it does: the editor never
+   rewrites a number nobody chose. It wraps the rule cell rather than widening
+   it, so the columns beside it do not move. */
+.ladder-flag { flex: 1 0 100%; font-size: var(--t--1); }
+.ladder-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0 2px; font-size: var(--t-0); border-top: 1px solid var(--line); }
+.ladder-policy { display: grid; gap: 8px; margin-top: 18px; border: 0; padding: 0; }
+.ladder-policy legend { font-size: var(--t-0); font-weight: var(--w-head); color: var(--text-2); padding: 0; }
 /* the label on each agent row in the New card dialog */
 .fallback-row-title { font-size: var(--t-0); font-weight: var(--w-head); color: var(--text-2); }
 .confirm-row { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--e4); border-radius: var(--r-control); padding: 12px 14px; font-size: var(--t-0); }
@@ -522,6 +622,22 @@ input[type="text"], input[type="password"], textarea, select { font: inherit; fo
 input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
 fieldset { border: 1px solid var(--edge); border-radius: var(--r-well); padding: 18px; display: grid; gap: 12px; }
 legend { font-size: var(--t-0); font-weight: var(--w-head); color: var(--text-2); padding-inline: 6px; }
+
+/* the two notification toggles (spec E). A checkbox and its sentence on one
+   line, with the help text under it in the field colour the rest of Settings
+   uses; a disabled toggle carries its reason in that help text, never in a
+   tooltip, because the reason is the whole point of the disabled state. */
+.notify .field-help { margin-top: -4px; }
+.notify-toggle { display: flex; align-items: baseline; gap: 10px; font-size: var(--t-0); font-weight: var(--w-head); color: var(--text-2); }
+.notify-toggle input[disabled] { cursor: not-allowed; }
+.notify-toggle:has(input[disabled]) { color: var(--text-3); }
+
+/* the keyboard map: a small panel over the page, opened by ? and closed by ?
+   or Escape. Every row names a key and the button that key presses. */
+.keymap { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 380px; background: var(--e2); border: 1px solid var(--edge); border-radius: var(--r-panel); box-shadow: var(--lift-hi); padding: 22px; }
+.keymap-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin-bottom: 18px; font-size: var(--t-0); }
+.keymap-key { font-family: var(--mono); color: var(--text); white-space: nowrap; }
+.keymap-what { color: var(--text-2); }
 .form-row { display: grid; gap: 8px; margin-top: 18px; }
 .form-error { background: var(--e1); border-left: 3px solid var(--danger); border-radius: var(--r-control); padding: 12px 14px; font-size: var(--t-0); color: var(--danger-text); }
 .advanced-options { margin-top: 22px; }
@@ -550,9 +666,18 @@ dialog::backdrop { background: rgba(0,0,0,.6); }
    =========================================================================== */
 @media (max-width: 760px) {
   .wrap { --t-4: 2rem; --t-3: 1.75rem; --t-2: 1.1875rem; --t--1: 0.9375rem; }
-  .verdict { padding-block: 36px 32px; }
+  .verdict { padding-block: 32px 20px; }
   .verdict h1 { max-width: none; letter-spacing: -.02em; }
-  .verdict p { margin-top: 16px; }
+  .verdict p { margin-top: 12px; }
+  /* the tracks go and the tokens stack, one login per 24px line: at this width
+     120px of instrument costs the percentage its own line, and the percentage
+     with its state word carries the whole fact on its own */
+  .capacity-strip { display: block; }
+  .cap-tokens { display: block; }
+  .cap-token { display: flex; min-height: 24px; gap: 8px; }
+  .cap-track { display: none; }
+  .cap-figure { margin-left: auto; }
+  .cap-open { margin-left: 0; margin-top: 12px; }
   .panel { padding: 22px; border-radius: 14px; }
   .logins-pair { grid-template-columns: 1fr; }
   .gauge { gap: 14px; flex-wrap: wrap; }
@@ -564,8 +689,8 @@ dialog::backdrop { background: rgba(0,0,0,.6); }
   .gauge--noread::after { width: 68px; }
   .gauge-block + .gauge-block { margin-top: 22px; }
   code { font-size: 1em; }
-  .section-head { padding-block: 40px 16px; }
-  .section-head--quiet { padding-block: 40px 16px; }
+  .section-head { padding-block: 24px 16px; }
+  .section-head--quiet { padding-block: 24px 16px; }
   .term { padding: 22px; }
   .term-row { flex-direction: column; align-items: stretch; gap: 14px; }
   .term-clock { order: -1; width: auto; justify-content: flex-end; gap: 14px; }