@ucsandman/legcli 0.11.0 → 0.12.0

package/src/audit.mjs

@@ -17,7 +17,7 @@ import { readEvents as readCardEvents } from './ledger.mjs'
 // 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', 'ended', 'done',
+  'approved', 'approval_needed', 'reassigned', 'paused', 'resumed', 'taken_over', 'ended', 'done',
   'failed', 'trust', 'harness', 'worktree', 'station_done', 'leg_started', 'rerun',
 ]
 

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; }
@@ -502,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); }
@@ -537,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; }
@@ -565,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; }
@@ -579,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; }