@ucsandman/legcli 0.11.0 → 0.13.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,10 +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 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); }
+/* 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; }
 .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); }
 .actions { display: flex; gap: 10px; flex-wrap: wrap; }
 
@@ -537,6 +620,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 +664,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 +687,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; }
@@ -606,3 +714,87 @@ dialog::backdrop { background: rgba(0,0,0,.6); }
   * { transition: none !important; }
   .btn:active { transform: none; }
 }
+
+/* ---- appended 2026-09-18: the timeline's repeat count -------------------- */
+/* A run of identical status lines collapses to one line carrying ×N
+   (collapseEvents in sessions.js). The count is a quantity beside a sentence,
+   not part of it, so it is muted and set in the tabular face the rest of the
+   board counts in. */
+.timeline-count { margin-left: 8px; color: var(--text-3); font-variant-numeric: tabular-nums; font-size: var(--t--1); }
+/* ---- end of the 2026-09-18 block ---------------------------------------- */
+
+/* ---- appended 2026-09-18: the new card dialog's two columns -------------- */
+/* The dialog asks two questions and they are read in parallel, not in series:
+   WHAT the work is on the left, WHO runs it on the right. One column under
+   900px, because at a phone's width two columns of selects is one column of
+   selects with half the room. The dialog itself widens only where there are
+   two columns to hold; under the breakpoint the base `dialog` rule still caps
+   it at the viewport. */
+.dialog-cols { display: grid; gap: 4px 28px; }
+.dialog-col { min-width: 0; }
+/* the second label inside one .form-row: the path under the repo picker. It is
+   a label, not a heading, so it is quieter than the field's own. */
+.sub-label { font-weight: var(--w-text); color: var(--text-3); }
+.form-row .sub-label { font-size: var(--t--1); }
+
+/* One rung of "Who runs it": a number, a provider, a model, its permissions,
+   its limits, and the three buttons that move or remove it. It wraps rather
+   than scrolls, so a narrow dialog stacks the controls of one row instead of
+   hiding them off the right edge. Separated from the row above by --line, the
+   only rule allowed inside a panel. */
+.chain-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; font-size: var(--t-0); }
+.chain-row + .chain-row { border-top: 1px solid var(--line); }
+.chain-num { flex: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
+.chain-row select { flex: 0 1 auto; min-width: 0; max-width: 100%; font-size: var(--t--1); }
+.chain-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t--1); color: var(--text-3); }
+.chain-turns { flex: none; width: 11ch; font-size: var(--t--1); }
+.chain-fake { flex: none; width: 16ch; font-size: var(--t--1); }
+.chain-row .btn { font-size: var(--t--1); }
+/* the three row buttons sit apart from the row's fields: wrapped onto a line
+   of their own, `max turns` beside Up/Down/Remove read as one group and the
+   number looked like it belonged to the buttons. */
+.chain-row .btn:first-of-type { margin-left: auto; }
+
+/* A dialog taller than the window has to scroll itself, or Create card is off
+   the bottom of the screen with no way to reach it. Both widths did exactly
+   that: 960px of dialog in a 900px window. */
+dialog { max-height: calc(100vh - 40px); overflow-y: auto; }
+
+@media (min-width: 900px) {
+  #new-card-dialog { max-width: 980px; }
+  .dialog-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+}
+/* ---- end of the 2026-09-18 dialog block --------------------------------- */
+
+/* ---- the floor, 2026-09-18: stations instead of tables ------------------ */
+/* The entry row is the first thing under the strip and the only control on the
+   page that starts work, so it sits on the raised surface the rows sit on
+   rather than in the page's own ground. The board's copy is inside the
+   Background panel and inherits its surface; this one has none to inherit. */
+.floor-entry { margin-top: 20px; background: var(--e2); border: 1px solid var(--edge); border-radius: var(--r-well); padding: 20px 24px; }
+.floor-entry .confirm-row { margin-top: 0; }
+.floor-entry .confirm-row input[type="text"] { flex: 1 1 320px; min-width: 0; }
+.floor-entry .field-help { margin-top: 10px; }
+/* the count belongs to the heading it is in, one step quieter than the word */
+.region-count { margin-left: 10px; font-size: var(--t-0); font-weight: var(--w-text); color: var(--text-3); font-variant-numeric: tabular-nums; }
+/* the keyboard ring on a card row, the same 3px edge mark the terminal rows
+   carry (`.term.is-focused`) rather than a fill */
+.row.is-focused { box-shadow: inset 3px 0 0 var(--focus); }
+
+@media (max-width: 760px) {
+  /* R4 is a 272px block in a fixed second column: under about 390px of content
+     width that column alone is wider than the row, and both pages scrolled
+     sideways. One column, with the clock and the buttons under the sentence. */
+  .row { grid-template-columns: minmax(0, 1fr); padding: 22px; }
+  .r4 { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; }
+  .r4 .row-actions { width: 100%; }
+  .floor-entry { padding: 18px; }
+  .floor-entry .confirm-row { align-items: stretch; flex-direction: column; }
+  .floor-entry .confirm-row input[type="text"] { flex: 1 1 auto; }
+}
+
+/* The heading over a GROUP of controls, not over one: "Who runs it" names the
+   whole chain-rows group through aria-labelledby, so it cannot be a <label> --
+   a label with no control focuses nothing when it is clicked, which is the one
+   thing a label promises. Same face as the row labels beside it. */
+.form-row .form-label { font-size: var(--t-0); font-weight: var(--w-head); color: var(--text-2); }