@ucsandman/legcli 0.15.0 → 0.16.0

package/src/board/board.css

@@ -135,7 +135,7 @@
 
   /* type scale. Fixed rem, range 13 to 52. The old board ran 13 to 21, which
      is why it read as a spreadsheet */
-  --t--1: 0.8125rem;     /* 13px the row register and the scaffolding strip */
+  --t--1: 0.875rem;      /* 14px the row register and the scaffolding strip */
   --t-0: 0.9375rem;      /* 15px labels, meta, controls, the narrow floor */
   --t-1: 1.0625rem;      /* 17px prompts, panel heads, body default */
   --t-2: 1.3125rem;      /* 21px section heads, secondary readings */
@@ -191,13 +191,21 @@ code { font-family: var(--mono); font-size: 0.94em; }
 .banner { background: var(--e1); border-bottom: 1px solid var(--edge); color: var(--text-2); font-size: var(--t-0); padding: 10px clamp(20px, 4vw, 40px); padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
 
 .masthead { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 28px 24px; }
-.brand { font-size: var(--t-1); font-weight: var(--w-head); letter-spacing: -.01em; }
-.brand-glyph { display: inline-block; margin-right: 4px; }
-.masthead-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: var(--t-0); color: var(--text-3); }
-.floor-link { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
-.floor-link:hover { color: var(--text); border-bottom-color: var(--text-2); }
-
-.sse-status { display: inline-flex; align-items: center; gap: 8px; }
+.brand { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-1); font-weight: var(--w-head); letter-spacing: -.01em; }
+/* the mark: a tile with the L cut as hip, knee and foot. Inline SVG in the
+   markup, currentColor, so it is one shape on the board, the floor, the
+   favicon and the site */
+.brand-glyph { display: inline-flex; width: 22px; height: 22px; color: var(--text); }
+.brand-glyph svg { width: 22px; height: 22px; display: block; }
+.masthead-right { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; font-size: var(--t-0); color: var(--text-3); }
+/* connection and scheduler are one status cluster, read as one phrase */
+.masthead-status { display: inline-flex; align-items: center; gap: 10px; color: var(--text-3); }
+.masthead-status .sched-status:not(:empty)::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 999px; background: var(--line-strong); margin: 0 10px 3px 0; vertical-align: middle; }
+/* the other page is a control, in the same clothes as every other quiet control */
+.floor-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--control-edge); border-radius: var(--r-control); background: var(--e3); color: var(--text); font-weight: var(--w-head); text-decoration: none; transition: background-color 150ms var(--ease), border-color 150ms var(--ease); }
+.floor-link:hover { background: var(--e4); border-color: #7D828A; color: var(--text); }
+
+.sse-status { display: inline-flex; align-items: center; gap: 8px; flex-direction: row-reverse; }
 .sse-word { color: var(--text-3); }
 .sse-rule { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); flex: none; }
 .sse-rule.is-connecting { background: var(--warn); }
@@ -224,24 +232,21 @@ code { font-family: var(--mono); font-size: 0.94em; }
 /* 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; }
+/* the tokens are a small aligned table, dot, name, track, figure, so four
+   logins read as four rows of one instrument and not a ragged sentence. The
+   name is text: identity is the dot and the fill, never the colour of a word */
+.capacity-strip { display: flex; align-items: flex-start; gap: 12px 32px; flex-wrap: nowrap; min-height: 44px; font-size: var(--t-0); }
+.cap-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px 40px; flex: 1 1 auto; min-width: 0; }
+.cap-token { display: grid; grid-template-columns: 8px 7ch 120px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 28px; }
 .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; }
+.cap-figure { color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
 /* 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; }
+.cap-figure--none { color: var(--text-3); grid-column: 3 / -1; }
+.cap-open { margin-left: auto; flex: none; margin-top: -4px; }
 .capacity-drawer { margin-top: 16px; }
 
 /* the model rail on a panel head inside the drawer: a measured percentage, or
@@ -297,12 +302,12 @@ code { font-family: var(--mono); font-size: 0.94em; }
 .reading-sub--lead { margin-top: 22px; }
 
 /* ---- section heads ------------------------------------------------------ */
-.section-head { padding-block: 32px 16px; }
+.section-head { padding-block: 40px 14px; }
 .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 .region-meta { margin-top: 8px; font-size: var(--t-0); color: var(--text-2); }
 .section-head--quiet { padding-block: 56px 16px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
 .section-head--quiet .region-meta { margin-top: 0; }
-.hoisted { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-0); }
+.hoisted { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-0); }
 .hoisted-note { color: var(--text-2); }
 .hoisted-note.tone-warn { color: var(--warn-text); }
 .hoisted-note.tone-danger { color: var(--danger-text); }
@@ -310,44 +315,59 @@ code { font-family: var(--mono); font-size: 0.94em; }
 
 /* ---- terminals: rows inside one panel, separated by the only rule left --- */
 .terms { padding: 4px 0; }
-.term { padding: 26px 32px; }
+.term { padding: 22px 28px; transition: background-color 150ms var(--ease); }
 .term + .term { border-top: 1px solid var(--line); }
-.term.is-urgent { background: linear-gradient(to right, rgba(230,67,67,.07), transparent 40%); }
-.term-row { display: flex; align-items: center; gap: 28px; }
+.term:hover { background: rgba(255,255,255,.015); }
+/* a row whose state just changed is lit for a moment, then settles: the one
+   motion on the board, and it answers what moved while the reader was away */
+.term.is-changed { animation: settle 1400ms var(--ease) 1; }
+@keyframes settle { 0% { background-color: rgba(92,145,255,.14); } 100% { background-color: transparent; } }
+.term-row { display: flex; align-items: flex-start; gap: 32px; }
 .term-body { flex: 1 1 auto; min-width: 0; }
 .term-row > .term-body { flex-basis: 24ch; }
 .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-register { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: var(--t-0); 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); }
+.term-dirty, .term-ahead, .term-quiet { color: var(--text-3); font-size: var(--t--1); }
+/* the rung is a dot in the agent's colour beside its name in text, the same
+   grammar as the capacity strip; the chip-id class stays for the tests and the
+   dot, the colour no longer lands on the word */
+.term-model { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); }
+.term-model .dot { width: 7px; height: 7px; }
 /* 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; }
+.term-meta { display: flex; align-items: baseline; justify-content: flex-start; gap: 6px 24px; flex-wrap: wrap; margin-top: 6px; }
+.term-meta .files { flex: 0 1 auto; 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); }
+.term-capacity { margin-top: 4px; flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: baseline; flex-wrap: wrap; 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-when { color: var(--text-3); 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; }
-.term-actions .btn { white-space: nowrap; width: 100%; }
-/* a row with one or three controls keeps the grid honest rather than stretching
-   the odd one across both columns */
-.term-actions .btn:only-child { grid-column: 1 / -1; }
+/* the clock over the actions, both right-aligned, in one side column */
+.term-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
+.term-clock { font-family: var(--mono); gap: 10px; }
+.term-actions { flex: none; display: flex; justify-content: flex-end; gap: 8px; }
+.term-actions .btn { white-space: nowrap; }
+/* a control that cannot run is not drawn: its reason is hoisted to the region
+   head (the blocker paragraph stays in the DOM for aria-describedby) */
+.term-actions .btn:disabled { display: none; }
+/* End and Remove are quiet at rest; the colour comes on hover, and the
+   confirm row is where the decision is made */
+.term-actions .btn-danger { color: var(--text-2); }
+.term-actions .btn-danger:hover { color: var(--danger-text); }
 
 .state { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: var(--w-head); }
 .mark { width: 8px; height: 8px; border-radius: 999px; flex: none; background: var(--text-3); }
@@ -360,16 +380,22 @@ code { font-family: var(--mono); font-size: 0.94em; }
 }
 @keyframes breathe { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
 
-.term-prompt { margin-top: 14px; font-size: var(--t-1); line-height: 1.45; max-width: 62ch; color: var(--text); }
+.term-prompt { margin-top: 10px; font-size: var(--t-1); line-height: 1.45; max-width: 62ch; color: var(--text); }
 .term-prompt--empty { color: var(--text-3); }
-.panel-prompt { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; margin-top: 14px; font-size: var(--t-1); line-height: 1.45; max-width: 62ch; color: var(--text); cursor: pointer; }
+/* two lines of the prompt, then the expansion: a pasted brief is read in
+   Details, not in the list */
+.panel-prompt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 100%; text-align: left; background: none; border: 0; padding: 0; margin-top: 10px; font-size: var(--t-1); line-height: 1.45; max-width: 64ch; color: var(--text); cursor: pointer; }
+.panel-prompt[aria-expanded="true"] { -webkit-line-clamp: unset; }
 .panel-prompt:hover { color: var(--accent-hi); }
 
-.sentence { margin-top: 10px; font-size: var(--t-0); color: var(--text-2); max-width: 64ch; }
+.sentence { margin-top: 8px; font-size: var(--t-0); color: var(--text-2); max-width: 64ch; }
 .sentence.tone-warn { color: var(--warn-text); }
 .sentence.tone-danger { color: var(--danger-text); }
 .sentence.tone-ok { color: var(--ok-text); }
 .sentence.tone-muted { color: var(--text-3); }
+/* a warning sentence carries its colour only on the row that needs a person;
+   on a running row it is an observation, and an observation is not amber */
+.term:not(.is-urgent) .sentence.tone-warn { color: var(--text-2); }
 .files { margin-top: 10px; font-size: var(--t--1); color: var(--text-3); }
 .file { color: var(--text-3); }
 .file.is-overlap { color: var(--warn-text); }
@@ -440,11 +466,15 @@ code { font-family: var(--mono); font-size: 0.94em; }
 .drawer-msg-when { font-size: var(--t--1); color: var(--text-3); font-family: var(--mono); }
 
 /* ---- ledger: on the ground, unpanelled --------------------------------- */
-.ledger { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding-top: 32px; border-top: 1px solid var(--edge); }
-.ledger-cell h3 { font-size: var(--t-2); font-weight: var(--w-head); letter-spacing: -.012em; }
-.ledger-cell .region-meta { margin-top: 6px; font-size: var(--t-0); color: var(--text-3); }
-.ledger-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
-.ledger-cell .empty-line { margin-top: 12px; font-size: var(--t-0); color: var(--text-3); }
+/* four cells of one anatomy: a count, a line of meta, and the verb on one
+   baseline whatever the meta's length */
+.ledger { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 40px; padding-top: 32px; border-top: 1px solid var(--edge); }
+.ledger-cell { display: flex; flex-direction: column; }
+.ledger-cell h3 { font-size: var(--t-2); font-weight: var(--w-head); letter-spacing: -.012em; line-height: 1.2; }
+.ledger-cell .region-meta { margin-top: 6px; font-size: var(--t-0); color: var(--text-3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
+.ledger-cell .region-meta:empty { display: none; }
+.ledger-actions { margin-top: auto; padding-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
+.ledger-cell .empty-line { margin-top: 6px; font-size: var(--t-0); color: var(--text-3); }
 
 .list { margin-top: 20px; }
 .list li { padding: 14px 0; font-size: var(--t-0); }
@@ -528,7 +558,9 @@ code { font-family: var(--mono); font-size: 0.94em; }
 .row-meta { font-size: var(--t-0); color: var(--text-3); display: flex; gap: 14px; flex-wrap: wrap; }
 .row-actions { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
 /* the demoted-notes disclosure in a terminal row */
-.also { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--t-0); color: var(--text-3); }
+.also { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--t--1); color: var(--text-3); }
+.term .also { margin-top: 2px; min-height: 28px; font-weight: var(--w-text); text-decoration-color: var(--line-strong); }
+.term .also:hover { color: var(--text-2); }
 .status-word { font-weight: var(--w-head); color: var(--text-2); }
 .elapsed { font-family: var(--mono); color: var(--text-3); }
 .where { color: var(--text-2); }
@@ -671,10 +703,10 @@ dialog::backdrop { background: rgba(0,0,0,.6); }
      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-tokens { grid-template-columns: 1fr; }
+  .cap-token { grid-template-columns: 8px 7ch minmax(0, 1fr); }
   .cap-track { display: none; }
-  .cap-figure { margin-left: auto; }
+  .cap-figure { grid-column: 3; text-align: right; }
   .cap-open { margin-left: 0; margin-top: 12px; }
   .panel { padding: 22px; border-radius: 14px; }
   .logins-pair { grid-template-columns: 1fr; }
@@ -689,16 +721,26 @@ dialog::backdrop { background: rgba(0,0,0,.6); }
   code { font-size: 1em; }
   .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; }
+  .term { padding: 20px; }
+  .term-row { flex-direction: column; align-items: stretch; gap: 12px; }
+  /* the 24ch basis is a width in the row direction; stacked, it became 264px
+     of empty height under every row */
+  .term-row > .term-body { flex-basis: auto; }
+  /* the side column dissolves: the clock goes above the register and the
+     actions below the body, both in the row's own flow */
+  .term-side { display: contents; }
+  .term-clock { order: -1; width: auto; justify-content: flex-end; gap: 10px; }
+  .term-actions { order: 1; justify-content: flex-start; flex-wrap: wrap; }
   .term-id { min-width: 0; }
-  .term-actions { width: auto; justify-content: flex-start; }
-  .term-actions .btn { flex: 1 1 auto; }
   .term-register { gap: 10px 14px; }
   .kv { grid-template-columns: 1fr; gap: 4px 0; }
   .kv-val + .kv-key { margin-top: 12px; }
   .ledger { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
+  .region-settings .section-head--quiet .disclosure { margin-left: 0; }
+  #card-entry { padding: 18px 20px; }
+  #card-entry .entry-opts .btn-text { margin-left: 0; }
+  .region-floor.is-empty { grid-template-columns: 1fr; gap: 6px; }
+  .first-run { padding: 22px; }
   .history-row { grid-template-columns: 1fr; }
   .history-filters { grid-template-columns: 1fr; }
   .line { grid-template-columns: 1fr auto; gap: 6px 14px; }
@@ -711,6 +753,7 @@ dialog::backdrop { background: rgba(0,0,0,.6); }
 
 @media (prefers-reduced-motion: reduce) {
   .mark.state-active { animation: none; }
+  .term.is-changed { animation: none; }
   * { transition: none !important; }
   .btn:active { transform: none; }
 }
@@ -772,6 +815,7 @@ dialog { max-height: calc(100vh - 40px); overflow-y: auto; }
    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 { background: none; padding: 0; }
 .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; }
@@ -798,3 +842,81 @@ dialog { max-height: calc(100vh - 40px); overflow-y: auto; }
    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); }
+
+/* ---- 2026-09-19: the polish pass (.design/board-v5) --------------------- */
+/* A disclosure says where it opens with a chevron drawn here, not a typed > */
+.disclosure::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 150ms var(--ease); }
+.disclosure[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
+
+/* The verdict names a row; the sentence is the way to that row. A button in
+   the h1's own clothes: no underline, the accent only on hover and focus. */
+.verdict-link { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-wrap: inherit; }
+.verdict-link:hover { color: var(--accent-hi); }
+
+/* The background entry: on the board it is the terminals panel's own footer
+   (a sibling, joined to the panel above it); under the Background panel, and
+   on the floor, it is a well of its own. Its choices are quiet chips inside
+   the sentence, and More settings stays the one text link. */
+#card-entry { margin-top: 12px; background: var(--e1); border: 1px solid var(--edge); border-top-color: var(--line); border-radius: var(--r-well); padding: 20px 28px 18px; box-shadow: var(--sink); }
+/* entry.js parks the entry right after the Terminals section; when the panel
+   above it has rows the two join into one object, and an empty panel is not
+   drawn at all */
+#session-grid:empty { display: none; }
+.region-terminals:has(#session-grid:not(:empty)):has(+ #card-entry:not([hidden])) #session-grid { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+.region-terminals:has(#session-grid:not(:empty)) + #card-entry { border-radius: 0 0 var(--r-panel) var(--r-panel); margin-top: -1px; }
+#background #card-entry { margin-top: 14px; }
+#card-entry .confirm-row { margin: 0; background: none; padding: 0; gap: 12px; }
+#card-entry .confirm-row > span:first-child { font-weight: var(--w-head); color: var(--text-2); }
+#card-entry .confirm-row input[type="text"] { flex: 1 1 280px; min-width: 0; background: var(--e0); }
+#card-entry .confirm-row .field-help { flex: 1 0 100%; margin: 0; }
+#card-entry .entry-opts { margin-top: 12px; display: flex; align-items: center; gap: 8px 6px; flex-wrap: wrap; font-size: var(--t-0); color: var(--text-3); }
+#card-entry .entry-opts .btn-sm { min-height: 30px; font-weight: var(--w-text); color: var(--text-2); background: var(--e2); border-color: var(--edge-hi); }
+#card-entry .entry-opts .btn-sm:hover { color: var(--text); background: var(--e3); }
+#card-entry .entry-opts .btn-text { min-height: 30px; }
+#card-entry .entry-opts select { font-size: var(--t--1); min-height: 30px; padding: 4px 8px; }
+
+/* First run. A board with no terminal is the first thing a new reader sees,
+   so it is one lit panel with the three commands and a Copy each, not a grey
+   sentence. sessions.js hides it the moment a terminal is live. */
+.first-run { margin-top: 0; padding: 28px 32px; }
+.first-run h3 { font-size: var(--t-2); font-weight: var(--w-head); letter-spacing: -.012em; }
+.first-run p { margin-top: 8px; font-size: var(--t-0); color: var(--text-2); max-width: 56ch; }
+.first-run-cmds { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
+.first-run-cmd { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--e0); border: 1px solid var(--edge); border-radius: var(--r-control); padding: 10px 10px 10px 16px; }
+.first-run-cmd code { font-size: var(--t-0); color: var(--text); }
+.first-run-cmd .dot { margin-right: 10px; }
+.first-run-note { margin-top: 16px; font-size: var(--t--1); color: var(--text-3); }
+
+/* Settings is the last ledger row, not a stray sentence with a button */
+.region-settings .section-head--quiet { margin-top: 40px; padding-block: 24px 0; border-top: 1px solid var(--edge); align-items: center; }
+.region-settings .section-head--quiet h2 { font-size: var(--t-2); }
+.region-settings .section-head--quiet .region-meta { flex: 1 1 auto; }
+.region-settings .section-head--quiet .disclosure { margin-left: auto; }
+
+/* The floor: an empty station is one line, heading and sentence side by side,
+   so seven empty stations are seven lines and not seven screens. A station
+   with rows keeps its full section. floor.js sets is-empty. */
+.region-floor.is-empty { display: grid; grid-template-columns: 16ch minmax(0, 1fr); gap: 8px 24px; align-items: baseline; padding: 18px 0; margin-top: 0; border-top: 1px solid var(--edge); }
+.region-floor.is-empty .section-head { padding: 0; display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
+.region-floor.is-empty .section-head h2 { font-size: var(--t-1); white-space: nowrap; }
+.region-floor.is-empty .section-head--quiet .btn { margin-left: 4px; min-height: 30px; }
+.region-floor.is-empty .region-meta:empty, .region-floor.is-empty .card-list:empty, .region-floor.is-empty .ftable { display: none; }
+.region-floor.is-empty .empty-line { margin: 0; color: var(--text-3); }
+.region-floor:not(.is-empty) + .region-floor.is-empty { margin-top: 24px; }
+.masthead-left { font-size: var(--t-0); }
+/* ---- end of the 2026-09-19 block ---------------------------------------- */
+
+/* ---- 2026-09-19, second pass: what the rendered seed showed ------------- */
+/* the rung word and the ladder's rung names are text: the chip-id class was
+   winning on order, and the identity dot beside each one already says who */
+.term-model[class*="chip-id-"], .ladder-name[class*="chip-id-"] { color: var(--text-2); }
+/* the cards cell's verb sits on the baseline the other cells share, whatever
+   order its markup arrives in */
+.ledger-cell .ledger-actions { order: 9; }
+/* a number field wears the same clothes as a text field */
+input[type="number"] { font: inherit; font-size: var(--t-0); color: var(--text); background: var(--e0); border: 1px solid var(--control-edge); border-radius: var(--r-control); padding: 9px 12px; min-height: 36px; width: 7ch; }
+/* a finished row has no Land, so its land blocker is read by nothing on screen */
+#finished-list .blocker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+/* the entry's help line sits after Start on the same row */
+#card-entry .confirm-row .field-help { flex: 0 1 auto; }
+/* ---- end of the second pass ----------------------------------------------- */

package/src/board/board.js

@@ -68,7 +68,7 @@
   // release lands on disk under a board that was started before it: the page
   // then draws controls the process has no routes for (an empty agent select,
   // no buckets). test/files-version.test.mjs pins this to package.json.
-  const FILES_VERSION = '0.15.0'
+  const FILES_VERSION = '0.16.0'
   const TIMELINE_CAP = 12
   // mirrors LOOPBACK in src/auth.mjs; state.bind is "<host>:<port>" and an IPv6
   // host arrives bracketed
@@ -1744,7 +1744,10 @@
     initSettings()
     initNewCardDialog()
     document.getElementById('new-card-btn').addEventListener('click', () => openNewCardDialog())
-    document.getElementById('empty-new-card-btn').addEventListener('click', () => openNewCardDialog())
+    // first run: each command has a Copy, the same clipboard path the drawer uses
+    for (const b of document.querySelectorAll('#first-run [data-copy]')) {
+      b.addEventListener('click', () => { copyToClipboard(b.getAttribute('data-copy')); b.textContent = 'Copied'; setTimeout(() => { b.textContent = 'Copy' }, 1400) })
+    }
     document.getElementById('drawer-close').addEventListener('click', () => collapseRow())
     document.addEventListener('keydown', (e) => {
       if (e.key !== 'Escape') return

package/src/board/entry.js

@@ -234,7 +234,7 @@
     }
 
     function nounButton(text, key) {
-      return el('button', { type: 'button', class: 'btn btn-text', onclick: () => { entryState.editing = key; renderEntryLine() } }, [text])
+      return el('button', { type: 'button', class: 'btn btn-secondary btn-sm entry-noun', onclick: () => { entryState.editing = key; renderEntryLine() } }, [text])
     }
 
     function renderEntryLine() {
@@ -262,7 +262,7 @@
       // flex row with a gap on the raised surface, which is exactly this line.
       box.appendChild(el('div', { class: 'confirm-row' }, [el('span', {}, ['Run in the background:']), task, start, reason]))
 
-      const line = el('p', { class: 'field-help' })
+      const line = el('p', { class: 'field-help entry-opts' })
       line.appendChild(document.createTextNode('in '))
       if (entryState.editing === 'repo') {
         line.appendChild(nounSelect(knownRepos().map((r) => ({ value: r.path, label: r.name })), repo ? repo.path : '', (v) => { entryState.repo = knownRepos().find((r) => r.path === v) || null }))
@@ -297,13 +297,13 @@
         // the sentence names the legs Start posts, models and all
         line.appendChild(nounButton(ladderSentence(entryChain()), 'ladder'))
       }
-      line.appendChild(document.createTextNode(', '))
+      line.appendChild(document.createTextNode(' '))
       if (entryState.editing === 'pipeline') {
         line.appendChild(nounSelect(Object.keys(PIPELINE_WORDS).map((v) => ({ value: v, label: PIPELINE_WORDS[v] })), entryState.pipeline, (v) => { entryState.pipeline = v }))
       } else {
         line.appendChild(nounButton(PIPELINE_WORDS[entryState.pipeline] || 'build only', 'pipeline'))
       }
-      line.appendChild(document.createTextNode('.  '))
+      line.appendChild(document.createTextNode(' '))
       line.appendChild(el('button', { type: 'button', class: 'btn btn-text', onclick: () => onMoreSettings(entryState) }, ['More settings']))
       box.appendChild(line)
     }

package/src/board/favicon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🦿</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="6" fill="#F3F4F7"/><path d="M8 5.5v8.5l4 4h5" stroke="#0E1012" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>

package/src/board/floor.html

@@ -11,7 +11,7 @@
 
 <header class="masthead wrap">
   <div class="masthead-left">
-    <h1 class="brand"><span class="brand-glyph" aria-hidden="true">🦿</span> Leg floor</h1>
+    <h1 class="brand"><span class="brand-glyph" aria-hidden="true"><svg viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="6" fill="currentColor"/><path d="M8 5.5v8.5l4 4h5" stroke="#0E1012" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></span> Leg floor</h1>
     <!-- the connection state sits second, immediately after the brand, the same
          place it sits on the board: the two bars are read as one bar. -->
     <div class="sse-status" role="status">
@@ -43,7 +43,7 @@
   <section class="capacity" aria-label="Capacity by login">
     <div class="capacity-strip">
       <div class="cap-tokens" id="capacity-tokens"></div>
-      <button type="button" class="btn btn-secondary disclosure cap-open" id="capacity-toggle" aria-expanded="false" aria-controls="capacity-drawer">Capacity and models &gt;</button>
+      <button type="button" class="btn btn-secondary disclosure cap-open" id="capacity-toggle" aria-expanded="false" aria-controls="capacity-drawer">Capacity and models</button>
     </div>
     <div class="drawer capacity-drawer" id="capacity-drawer" hidden>
       <section class="logins" id="floor-accounts" aria-label="Logins"></section>

package/src/board/floor.js

@@ -50,7 +50,7 @@
   // name. test/board-updates.test.mjs pins `state.stopped` in this file by
   // source text, which is why the module object keeps the name.
   // pinned to package.json by test/files-version.test.mjs; see board.js FILES_VERSION
-  const FILES_VERSION = '0.15.0'
+  const FILES_VERSION = '0.16.0'
   const state = { es: null, retryMs: 1000, timers: [], stopped: false, sseRequest: 0, floorRequest: 0, trunkRequest: 0, headRequest: 0, cardsRequest: 0, lastReadingAt: null, bind: (typeof location !== 'undefined' && location.host) || '127.0.0.1:4747', pendingFloor: null, pendingCards: null, cards: new Map(), blockers: new Map(), doneOpen: false, ringId: null, scheduler: {}, trunkOff: false }
 
   // What the entry row reads on every render: the terminals (for the repo it
@@ -443,6 +443,8 @@
     const table = body.parentElement
     const section = table && table.parentElement
     if (section) { const old = section.querySelector('.empty-line'); if (old) old.remove() }
+    // an empty station is one line (board.css .region-floor.is-empty)
+    if (section && section.classList) section.classList.toggle('is-empty', !list.length)
     const thead = table && table.querySelector('thead')
     if (!list.length) {
       if (thead) thead.hidden = true
@@ -747,6 +749,7 @@
     const count = document.getElementById(station.count)
     if (count) count.textContent = String(cards.length)
     if (section && section.querySelector) { const old = section.querySelector('.empty-line'); if (old && old.remove) old.remove() }
+    if (section && section.classList) section.classList.toggle('is-empty', !cards.length)
     if (!cards.length) {
       box.textContent = ''
       box.signature = ''

package/src/board/history.js

@@ -304,7 +304,7 @@
       ? `${byAgent}${filtered ? `; ${state.total} match the filters` : ''}${state.refreshedAt ? `; looked ${whenAgo(state.refreshedAt)}` : ''}`
       : 'Leg looks in the Claude Code, Codex, Grok, Antigravity and Copilot homes on this machine, and its own sessions.'
     const btn = el('button', { type: 'button', class: 'btn btn-secondary', 'aria-expanded': state.open ? 'true' : 'false', 'aria-controls': 'history-drawer', 'data-focus-key': 'history-toggle' },
-      [state.open ? 'Hide conversations' : (all ? `Browse ${all}` : 'Browse')])
+      [state.open ? 'Hide' : 'Browse'])
     btn.addEventListener('click', () => { state.open = !state.open; if (state.open && state.worktrees === null) loadWorktrees(); render() })
     slot.appendChild(btn)
     panel.hidden = !state.open

package/src/board/index.html

@@ -18,13 +18,15 @@
 <div class="wrap">
 
   <header class="masthead">
-    <p class="brand"><span class="brand-glyph" aria-hidden="true">🦿</span> Leg</p>
+    <p class="brand"><span class="brand-glyph" aria-hidden="true"><svg viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="6" fill="currentColor"/><path d="M8 5.5v8.5l4 4h5" stroke="#0E1012" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></span> Leg</p>
     <div class="masthead-right">
-      <div class="sse-status" role="status">
-        <span class="sse-word" id="sse-text">connecting</span>
-        <span class="sse-rule is-connecting" id="sse-dot" aria-hidden="true"></span>
+      <div class="masthead-status">
+        <div class="sse-status" role="status">
+          <span class="sse-word" id="sse-text">connecting</span>
+          <span class="sse-rule is-connecting" id="sse-dot" aria-hidden="true"></span>
+        </div>
+        <div class="sched-status" id="sched-status"></div>
       </div>
-      <div class="sched-status" id="sched-status"></div>
       <a class="floor-link" href="/floor">Floor</a>
     </div>
   </header>
@@ -46,7 +48,7 @@
   <section class="capacity" aria-label="Capacity by login">
     <div class="capacity-strip">
       <div class="cap-tokens" id="capacity-tokens"></div>
-      <button type="button" class="btn btn-secondary disclosure cap-open" id="capacity-toggle" aria-expanded="false" aria-controls="capacity-drawer">Capacity and models &gt;</button>
+      <button type="button" class="btn btn-secondary disclosure cap-open" id="capacity-toggle" aria-expanded="false" aria-controls="capacity-drawer">Capacity and models</button>
     </div>
     <div class="drawer capacity-drawer" id="capacity-drawer" hidden>
       <section class="logins" id="accounts" aria-label="Logins"></section>
@@ -67,7 +69,19 @@
       <span class="chip" id="whoami" hidden></span>
     </div>
     <div class="panel terms" id="session-grid"></div>
-    <p class="empty-line" hidden>No terminal is running. Start one in any repo: <code>leg claude</code>, <code>leg codex</code> or <code>leg agy</code>. It appears here within a second of the agent's first turn.</p>
+    <!-- first run: the board with no terminal is the first screen a new reader
+         sees, so it is a lit panel with the commands and a Copy each. sessions.js
+         hides it the moment a terminal is live; board.js wires Copy. -->
+    <div class="panel panel--lit first-run" id="first-run" hidden>
+      <h3>No terminal is running</h3>
+      <p>Start one in any repo with the same command you use today, and Leg runs it with the board alongside. It appears here within a second of the agent's first turn.</p>
+      <div class="first-run-cmds">
+        <div class="first-run-cmd"><span><span class="dot id-claude" aria-hidden="true"></span><code>leg claude</code></span><button type="button" class="btn btn-secondary btn-sm" data-copy="leg claude" aria-label="Copy leg claude">Copy</button></div>
+        <div class="first-run-cmd"><span><span class="dot id-codex" aria-hidden="true"></span><code>leg codex</code></span><button type="button" class="btn btn-secondary btn-sm" data-copy="leg codex" aria-label="Copy leg codex">Copy</button></div>
+        <div class="first-run-cmd"><span><span class="dot id-agy" aria-hidden="true"></span><code>leg agy</code></span><button type="button" class="btn btn-secondary btn-sm" data-copy="leg agy" aria-label="Copy leg agy">Copy</button></div>
+      </div>
+      <p class="first-run-note">Usage per login, the handoff ladder and the context bundle all start with the first terminal.</p>
+    </div>
   </section>
 
   <!-- C.1: a card is a terminal you are not sitting at. Live cards are rows
@@ -118,7 +132,7 @@
       <div class="ledger-actions">
         <button type="button" class="btn btn-secondary" id="new-card-btn">New card</button>
       </div>
-      <p class="empty-line" id="empty-state" hidden>A card runs an agent headless in its own worktree. <button type="button" class="btn btn-text" id="empty-new-card-btn">New card</button> queues one.</p>
+      <p class="empty-line" id="empty-state" hidden>A card runs an agent headless in its own worktree.</p>
     </div>
 
   </section>