@ucsandman/legcli 0.15.1 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## 0.16.0 (2026-09-19)
+
+The board reads as one product: a polish pass inside the 2026-09-15
+direction, a new mark, and a first-run screen.
+
+- **One colour rule, kept everywhere.** Login names in the capacity strip,
+  the rung in a terminal row's register and the rungs in the ladder editor are
+  text beside an identity dot; the colour no longer lands on the word. A
+  warning sentence is amber only on a row that is waiting on you. The accent
+  blue appears on Land when it can run and on Start once a task is typed, and
+  nowhere else. The capacity strip is an aligned table (dot, name, track,
+  figure) instead of a ragged sentence.
+- **Terminal rows.** The prompt is clamped to two lines (Details holds the
+  rest), the clock sits over one quiet row of buttons, a Land that cannot run
+  is not drawn (its reason is said once above the panel), and End is quiet at
+  rest. The register moved up to 15px and the scaffolding floor from 13 to
+  14px. A row whose state changed since the last render is lit for 1.4 s, the
+  one motion the rows own; rows carry a faint hover. Narrow rows lost 264px of
+  empty height each: a `flex-basis: 24ch` meant for the row direction had been
+  applied as height once the row stacked. The 420px horizontal overflow is
+  gone.
+- **One control language.** The background entry is the terminals panel's
+  footer, its choices quiet chips inside the sentence. Ledger cells share one
+  anatomy with their verbs (View, Browse, New card) on one baseline; Settings
+  is a row in the same grammar; disclosures carry a CSS chevron instead of a
+  typed `>`; the Floor and Board links are buttons.
+- **The verdict is a link.** When the sentence names a terminal, pressing it
+  scrolls to that row and focuses its prompt.
+- **First run.** A board with no terminal shows one lit panel: `leg claude`,
+  `leg codex` and `leg agy` each with a Copy, and one line on what appears
+  with the first turn.
+- **The floor.** An empty station is one line, heading beside sentence, so
+  seven empty stations are seven lines rather than seven screens.
+- **The mark.** A tile with the L cut as hip, knee and foot replaces the 🦿
+  emoji on the board, the floor, the favicon, the tab badge and the site.
+  The emoji rendered as whichever system emoji font the machine had.
+- **Docs.** Nine screenshots retaken against this build; DESIGN.md and the
+  board guide describe the new row and strip; the OG image carries the mark.
+
 ## 0.15.1 (2026-09-19)
 
 Your own Claude Code status line comes back.

package/README.md

@@ -11,7 +11,7 @@
 
 *Claude hits the five-hour wall. The terminal reads `handing off to codex`, and codex carries on there. Nothing is retyped. ([the full 53-second run](https://legcli.com/#handoff))*
 
-![The Leg board at 1280px: a headline naming the terminal that has waited on you longest; under it a capacity strip with claude at 63 percent of its fable week, codex back on Saturday, agy with no figure and grok with no reading, and a button that opens the login panels; then four terminal rows, each with its status, repo and branch, uncommitted and unpushed counts, agent and model, the prompt, the one thing worth knowing and four buttons; then a Background panel of live cards and a one-line field for starting another; then counts for finished terminals, what landed, conversations and finished cards](https://legcli.com/img/docs/terminals-1280.png)
+![The Leg board at 1280px: a headline naming the terminal that has waited on you longest; under it a capacity strip with claude at 63 percent of its fable week, codex back on Saturday, agy with no figure and grok with no reading, and a button that opens the login panels; then four terminal rows, each with its status, repo and branch, uncommitted and unpushed counts, agent and model, the prompt, the one thing worth knowing and its buttons; then the one-line field for starting a background task, joined to the panel; then counts for finished terminals, what landed, conversations and finished cards](https://legcli.com/img/docs/terminals-1280.png)
 
 You keep using your coding agents exactly as you do today, in any terminal,
 from your own config directory: Leg adds its hooks in a separate per-session
@@ -420,8 +420,10 @@ with nothing in it says so with its counts.
   first, each row with the short sha, the subject, a `repo@branch` chip, and
   when plus who. A commit a Land put there says `landed by <agent> (<id tail>)`.
 - **Buttons**, in a fixed order that never reflows: Land, Hand off now,
-  Details, End. Once a session has ended, Remove and Remove record take End's
-  place. Details opens an expansion in flow under the panel.
+  Details, End, under the clock at the right of the row. Land is drawn only
+  when it can run; its reason is said once above the panel. Once a session has
+  ended, Remove and Remove record take End's place. Details opens an expansion
+  in flow under the panel.
   **Hand off now** takes the first open rung of the ladder. To name the
   destination instead, open Details and use **Hand off now to**, which lists
   every rung with its model, whether it keeps the conversation, and the reason

package/docs/ERRORS.md

@@ -3,6 +3,28 @@
 What broke, why, and what fixed it. One entry per failure, newest first. A first
 occurrence has to be written down or a repeat is never countable.
 
+## 2026-09-19: eleven versions reached npm and none reached the GitHub releases page
+
+**Fixed by making the publish job create the tag and the GitHub release itself,
+from the version's CHANGELOG.md section, and by backfilling v0.7.0 to v0.15.1.**
+
+The releases page stopped at v0.6.0 (2026-09-15, the pre-rename name) while npm went on to
+0.15.1. Releases 0.2.0 to 0.6.0 had been made by hand with `gh release create`,
+batched on 09-11 and 09-15; once `publish-npm` in `.github/workflows/ci.yml`
+took over the npm side on 09-14, nothing tagged or drafted anything, and no
+check noticed, because a green publish job and a stale releases page look the
+same from the terminal. Wes found it on the page. The rule that holds is a
+mechanism, not a note: the publish job now runs `scripts/release-notes.mjs`
+and `gh release create v<version>` in the same job as `npm publish` (the job
+has `contents: write` for that one step), and `scripts/npm-publish-gate.mjs`
+refuses a version with no `## <version>` section in CHANGELOG.md, so a
+release nobody wrote up never reaches npm either. `test/release-notes.test.mjs`
+pins the extraction. The backfilled tags point at the commit each npm version
+was published from (`npm view @ucsandman/legcli time` matched against
+`git log --first-parent --before`), not at the `[RELEASE]` commit, since three
+of those needed a follow-up fix before the gate let them through. 0.6.1 and
+0.8.1 have CHANGELOG sections but never reached npm, so they have no release.
+
 ## 2026-09-18: 0.14.0 pushed, CI green everywhere, and npm still served 0.13.1
 
 **Fixed by putting the `repository` block back into the lockfile root
@@ -687,3 +709,20 @@ it), and check whether a board was listening on 4747 at the time.
 - **The lesson that generalises.** A seeded board is safe to look at and not
   safe to click: any row that names a path that exists is a live control on
   that path. Seed paths must be realistic in shape and impossible in fact.
+
+## A width became 264px of height on every narrow row (2026-09-19)
+
+- **What happened.** `.term-row > .term-body { flex-basis: 24ch }` gave the
+  prompt column a starting width on the wide board. Under 760px the row
+  stacks (`flex-direction: column`), the same declaration became a starting
+  HEIGHT, and every terminal row carried about 264px of empty space under its
+  last line. It shipped in 0.13.0 and survived three review passes because
+  each one eyeballed the 400px screenshot instead of measuring it.
+- **Fix.** `flex-basis: auto` inside the narrow block. Narrow rows on the
+  seeded board went from 549/467/442/442 to 426/365/330/266.
+- **The lesson that generalises.** A flex-basis is axis-relative; any rule
+  that sets one on a container whose direction flips at a breakpoint needs
+  the opposite value in that breakpoint. And the shot script's per-row
+  heights found it in one run when three visual reviews had not: the polish
+  loop is `_shot.mjs` numbers first, picture second (`.design/board-v5/`,
+  local only).

package/docs/board-guide.md

@@ -14,24 +14,23 @@ The visual system, and why it is what it is, is `DESIGN.md` at the repo root.
 ## Screenshots
 
 `docs/screenshots/` (listed here so you know what exists before you look for
-one). Nine were retaken on 2026-09-17 against this build, on a board seeded by
-`scripts/seed-wes-board.mjs` plus `scripts/seed-fake-cards.mjs --count 1
---finished 10 --live 3`; the rest are from the 2026-09-15 sweep and are noted
-below:
+one). Nine were retaken on 2026-09-19 against the polish pass (0.16.0), on a
+board seeded by `scripts/seed-wes-board.mjs`; the rest are from the 2026-09-17
+and 2026-09-15 sweeps and are noted below:
 
 ```
-terminals-1280.png        the whole board at 1280 px (2026-09-17)
-board-400px.png           the same board at 400 px (2026-09-17)
-capacity-drawer-1280.png  the strip with Capacity and models open (2026-09-17)
-board-details-open.png    a terminal row with its expansion open (2026-09-17)
-board-handoff.png         one row waiting on you, with the question (2026-09-17)
+terminals-1280.png        the whole board at 1280 px (2026-09-19)
+board-400px.png           the same board at 400 px (2026-09-19)
+capacity-drawer-1280.png  the strip with Capacity and models open (2026-09-19)
+board-details-open.png    a terminal row with its expansion open (2026-09-19)
+board-handoff.png         one row waiting on you, with the question (2026-09-19)
 background-1280.png       the Background panel and the one-line entry (2026-09-17)
-settings-ladder-1280.png  the ladder editor in Settings (2026-09-17)
-board-empty.png           no background tasks at all
+settings-ladder-1280.png  the ladder editor in Settings (2026-09-19)
+board-empty.png           the first-run panel: no terminal yet, three commands with Copy (2026-09-19)
 board-running.png         one card running its first agent (2026-09-17)
 board-drawer.png          that card expanded: where, runs, take over, timeline (2026-09-17)
 board-done.png            the card finished, on the agent that finished it
-floor.png                 /floor with nothing queued
+floor.png                 /floor with nothing queued, every station one line (2026-09-19)
 floor-landing.png         /floor with every lane full
 floor-final-1280.png      /floor after a card finished
 floor-final-400.png       the same at 400 px
@@ -42,18 +41,20 @@ demo-2-limit-hit.png       limit hit, bundle written, the row waiting on you
 demo-3-handoff-bundle.png  the row expanded: bundle path, run signal, timeline
 demo-4-codex-running.png   leg 2 running on fake-codex
 demo-5-done.png            done, both legs on the chain
+new-card-dialog.png        More settings: the task and who runs it (2026-09-19)
 ```
 
 The five `demo-*.png` are one run of the sequence in [DEMO.md](DEMO.md), all at
 1280 px.
 
-**Still stale, as of 2026-09-17:** `share-owner-1280.png`,
-`share-guest-1280.png`, `board-empty.png`, `board-done.png` and the five
-`demo-*.png` show the old top of the board (a 56px verdict over a column of
-login panels) rather than the capacity strip and its drawer, and the card shots
-among them predate the Background panel. Their terminal rows and their floor
-are still accurate. Retake them with the commands below rather than trusting
-the top band of any of those pictures.
+**Still stale, as of 2026-09-19:** `share-owner-1280.png`,
+`share-guest-1280.png`, `board-done.png`, `background-1280.png`,
+`board-running.png`, `board-drawer.png`, `floor-landing.png`, the two
+`floor-final-*.png` and the five `demo-*.png` predate the 0.16.0 polish pass:
+their rows still show the 2x2 button grid, coloured login words and the old
+mark, and the oldest of them show the pre-strip top of the board. What each
+one documents is still true. Retake them with the commands below rather than
+trusting the chrome in any of those pictures.
 
 To retake one, seed a board with the shape a real one has and drive it to the
 state the shot needs:
@@ -174,7 +175,7 @@ reset, the source, any wall and the age of the reading, the same sentence the
 gauges carry. A login with no percentage is not a `meter` at all, because
 `aria-valuenow` would have to be a number nobody measured.
 
-**`Capacity and models >`**, at the end of the strip, opens a drawer holding
+**`Capacity and models`**, the disclosure at the end of the strip, opens a drawer holding
 the login panels unchanged, plus a rail of model chips on each panel head:
 `fable 63%` for a measured bucket, `fable out until 9:14 PM` for a model at its
 wall, and a bare model name where Leg has a name but no figure. A percentage is
@@ -307,16 +308,18 @@ been at it, and what you can do about it.
   stops and fable continues from the bundle.`, or `from the conversation` when
   that rung is one a `--resume` keeps. Confirming posts the hand-off with the
   model on it; a rung that walled between the draw and the press comes back as
-  the server's own 409 sentence in the row. It is a link and not a fifth button:
-  the 2x2 grid is the shipped shape and does not reflow.
+  the server's own 409 sentence in the row. It is a link and not a fourth button:
+  the button row is the shipped shape and does not reflow.
 - **The clock**: elapsed since the session started (`4h 24m`), and the session's
   short id. The id used to print as `claude-7f3a` immediately after the word
   `claude`; the prefix is the agent name twice and it is gone.
-- **The buttons**, in a fixed 2x2 grid so every row's controls sit in the same
-  place: Land, Hand off now, Details, End. Land is the primary action only when
-  it can actually run, when it is blocked the accent moves to Hand off now,
-  because a disabled control should not wear the one accent colour in the
-  design. When Land is disabled its reason is printed, never left in a tooltip.
+- **The buttons**, one row under the clock at the right, so every row's
+  controls sit in the same place: Land, Hand off now, Details, End. Land is
+  drawn only when it can actually run, and then it is the one primary button
+  on the board; when it cannot, the row does not draw it and its reason is
+  printed once above the panel, never left in a tooltip. Hand off now, Details
+  and End are quiet controls: the accent means "this can land" and nothing
+  else.
 
 **A terminal waiting on a human says so, and the tab says it too.** Claude
 Code's Notification hook writes `waiting` on the record when it puts up a
@@ -417,7 +420,8 @@ one off.`, because two waiters on one terminal is the failure to avoid.
 ### Terminal buttons
 
 The order is fixed, Land, Hand off now, Details, End, and it never reflows by
-availability: a button that does not apply is omitted, never moved.
+availability: a button that does not apply is omitted, never moved. A Land that
+cannot run is omitted too, with its reason hoisted above the panel.
 
 | button | shown when | what it does |
 |--------|------------|--------------|
@@ -555,7 +559,7 @@ raised surface here would compete with the terminals that are live. Each is a
 heading, a line of detail and a button that opens the detail below the row.
 
 - **N finished**, the terminals that have ended or been lost, `4 lost, 2 ended,
-  in leg, costclaw, declick`. **View all N** opens them as full rows. On a real
+  in leg, costclaw, declick`. **View** opens them as full rows. On a real
   board after a day's work this is most of the list, which is exactly why it is a
   count and not the list.
 - **N landed**, what has landed on trunk across every repo the board can see,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucsandman/legcli",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "Usage-limit monitor and automatic handoff for Claude Code, Codex, agy and Grok. Type leg claude|codex|agy|grok and get the same interactive agent with a board alongside, auto-approve on by default, usage tracking per agent and account, a live context handoff bundle, and at the limit the next agent continuing in the same terminal. 14-day free trial, then $79 once, 30-day money-back guarantee.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",

package/scripts/npm-publish-gate.mjs

@@ -7,6 +7,7 @@
 import { appendFileSync, readFileSync } from 'node:fs'
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
+import { releaseSection } from './release-notes.mjs'
 
 const root = join(dirname(fileURLToPath(import.meta.url)), '..')
 const EXPECTED_REPOSITORY = 'https://github.com/ucsandman/legcli.git'
@@ -103,6 +104,9 @@ try {
   if (alias.repository?.url !== EXPECTED_REPOSITORY) {
     fail('alias package repository metadata does not match the npm trusted publisher binding')
   }
+  // The GitHub release ci.yml creates after the publish is this section, so a
+  // version nobody wrote up in CHANGELOG.md never reaches npm either.
+  releaseSection(readFileSync(join(root, 'CHANGELOG.md'), 'utf8'), pkg.version)
 
   const primaryPublished = await registryStatus(pkg.name, pkg.version)
   const aliasPublished = await registryStatus(alias.name, alias.version)

package/scripts/release-notes.mjs

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+// release-notes — the CHANGELOG.md section for one version, for the GitHub
+// release CI creates right after it publishes that version to npm.
+//
+//   node scripts/release-notes.mjs 0.15.1           the section body (no heading)
+//   node scripts/release-notes.mjs 0.15.1 --title   "Leg 0.15.1: <first sentence>"
+//
+// Exits 1 with a sentence when CHANGELOG.md has no `## <version> (` heading, so
+// the publish gate refuses a version nobody wrote up.
+import { readFileSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..')
+
+export function releaseSection(changelog, version) {
+  const lines = changelog.split(/\r?\n/)
+  const heading = new RegExp(`^## ${version.replace(/\./g, '\\.')}(\\s|$)`)
+  const start = lines.findIndex((l) => heading.test(l))
+  if (start === -1) throw new Error(`CHANGELOG.md has no "## ${version}" section; write the release up before publishing it`)
+  let end = lines.findIndex((l, i) => i > start && /^## /.test(l))
+  if (end === -1) end = lines.length
+  const body = lines.slice(start + 1, end).join('\n').trim()
+  if (!body) throw new Error(`CHANGELOG.md's "## ${version}" section is empty`)
+  return body
+}
+
+// "Leg <version>: <the section's first sentence, one line, no trailing stop>",
+// capped so the release list stays readable. Older sections open with a
+// bullet instead of a summary paragraph; the bullet's first sentence serves.
+export function releaseTitle(changelog, version, { product = 'Leg', max = 100 } = {}) {
+  const body = releaseSection(changelog, version)
+  const paragraph = body.split(/\n\s*\n/)[0].replace(/^[-*]\s+/, '').replace(/\*\*|`/g, '').replace(/\s+/g, ' ').trim()
+  const first = (paragraph.match(/^.*?[.!?](?=\s|$)/) ?? [paragraph])[0].replace(/[.!?:;,]$/, '')
+  let title = `${product} ${version}: ${first}`
+  if (title.length > max) title = title.slice(0, max - 1).replace(/\s+\S*$/, '') + '…'
+  return title
+}
+
+if (process.argv[1] && fileURLToPath(import.meta.url) === process.argv[1]) {
+  const args = process.argv.slice(2)
+  const version = args.find((a) => !a.startsWith('--'))
+  if (!version) { console.error('usage: node scripts/release-notes.mjs <version> [--title]'); process.exit(2) }
+  try {
+    const changelog = readFileSync(join(root, 'CHANGELOG.md'), 'utf8')
+    process.stdout.write((args.includes('--title') ? releaseTitle(changelog, version) : releaseSection(changelog, version)) + '\n')
+  } catch (e) {
+    console.error(e.message)
+    process.exit(1)
+  }
+}

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.1'
+  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.1'
+  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>

package/src/board/sessions.js

@@ -50,6 +50,7 @@
   const alsoOpen = new Set()
   const actionNotes = new Map()
   const lastTone = new Map()
+  const rowShape = new Map()
   const defaultEditor = { ladder: null, climb_back: 'next-handoff', may_spend: false, reserve: {}, dirty: false, saving: false, status: '', statusClass: '' }
 
   // localStorage THROWS rather than answering null in a browser with site data
@@ -635,6 +636,19 @@
   // `card 3e1c`: the tail of the card id, which is how a card is named on its
   // own row and out loud.
   function cardName(id) { return `card ${String(id).split('-').filter(Boolean).slice(-1)[0] || id}` }
+  // the terminal the verdict is about when a human is blocked: the one that
+  // has waited longest. verdictLines prints it; verdictTarget names its row.
+  function blockedOf(live) {
+    return live
+      .filter((s) => notifyWait(s) && s.waiting.type !== 'quota_auto_resume' && Number.isFinite(Date.parse(s.waiting.since)))
+      .sort((x, y) => Date.parse(x.waiting.since) - Date.parse(y.waiting.since))[0]
+  }
+  function verdictTarget(list, sessions) {
+    const accounts = (list || []).filter((a) => a && a.agent && !a.loading)
+    if (!accounts.length) return null
+    const b = blockedOf((sessions || []).filter((s) => s.active))
+    return b ? b.session_id : null
+  }
   function verdictLines(list, sessions, cards) {
     const accounts = (list || []).filter((a) => a && a.agent && !a.loading)
     if (!accounts.length) return { line: 'Reading the logins.', sub: '' }
@@ -668,9 +682,7 @@
     // the TYPE is checked and never the presence of `since`. `quota_auto_resume`
     // is left out here too: nobody asked the human anything, Claude Code is
     // holding its own turn, and the row says so in its own sentence.
-    const blocked = live
-      .filter((s) => notifyWait(s) && s.waiting.type !== 'quota_auto_resume' && Number.isFinite(Date.parse(s.waiting.since)))
-      .sort((x, y) => Date.parse(x.waiting.since) - Date.parse(y.waiting.since))[0]
+    const blocked = blockedOf(live)
     if (blocked) {
       const who = rowName(blocked)
       const waited = spoken(Date.now() - Date.parse(blocked.waiting.since))
@@ -881,7 +893,23 @@
     const { line, sub } = verdictLines(list, view ? view.sessions : [], view ? view.cards_waiting : null)
     const h1 = document.getElementById('verdict-line')
     const p = document.getElementById('verdict-sub')
-    if (h1) h1.textContent = line
+    const target = verdictTarget(list, view ? view.sessions : [])
+    if (h1) {
+      // the sentence names a row, so the sentence is the way to that row: a
+      // button in the h1's own clothes that scrolls to the row and hands it the
+      // keyboard (the prompt is the row's first control)
+      if (target && typeof h1.replaceChildren === 'function') {
+        const link = el('button', { type: 'button', class: 'verdict-link', title: 'go to this terminal' }, [line])
+        link.addEventListener('click', () => {
+          const row = document.querySelector(`#session-grid .term[data-session-id="${target}"]`)
+          if (!row) return
+          if (typeof row.scrollIntoView === 'function') row.scrollIntoView({ block: 'center', behavior: 'smooth' })
+          const first = row.querySelector('.panel-prompt, .btn')
+          if (first && typeof first.focus === 'function') first.focus({ preventScroll: true })
+        })
+        h1.replaceChildren(link)
+      } else h1.textContent = line
+    }
     if (p) p.textContent = sub
     // the strip is the only usage on screen until the reader opens the drawer
     capacityStrip(list)
@@ -1717,7 +1745,14 @@
     const urgent = needsYou(s, notes)
     // the article is named so the accessibility tree does not hand the reader
     // three identical triples of Land / Hand off now / Details / End
-    const term = el('article', { class: `term${urgent ? ' is-urgent' : ''}`, 'data-session-id': s.session_id, 'aria-label': `${s.agent} ${tail(s.session_id)}` })
+    // what the row says, in one string: when it differs from the last render
+    // the row is lit for a moment (board.css .term.is-changed), the one answer
+    // the board gives to what moved while the reader was away
+    const shape = `${s.status}|${urgent}|${notes[0] ? notes[0].cat : ''}|${promptText(s.task)}`
+    const was = rowShape.get(s.session_id)
+    rowShape.set(s.session_id, shape)
+    const changed = was !== undefined && was !== shape
+    const term = el('article', { class: `term${urgent ? ' is-urgent' : ''}${changed ? ' is-changed' : ''}`, 'data-session-id': s.session_id, 'aria-label': `${s.agent} ${tail(s.session_id)}` })
     const row = el('div', { class: 'term-row' })
     const body = el('div', { class: 'term-body' })
 
@@ -1733,7 +1768,7 @@
     // which model actually answered, and whether it has gone quiet. The model
     // token is the agent and the model it resolved to, never a default.
     for (const t of registerTokens(s)) {
-      if (t.kind === 'model') register.appendChild(el('span', { class: `term-model chip-id-${idOf(s.agent)}` }, [t.text]))
+      if (t.kind === 'model') register.appendChild(el('span', { class: `term-model chip-id-${idOf(s.agent)}` }, [el('span', { class: `dot id-${idOf(s.agent)}`, 'aria-hidden': 'true' }), t.text]))
       else register.appendChild(el('span', { class: `term-${t.kind}` }, [t.text]))
     }
     if (s.account !== 'default') register.appendChild(el('span', { class: 'chip' }, [s.account]))
@@ -1822,8 +1857,11 @@
     row.appendChild(body)
 
     // elapsed and the short id, right-aligned and small: the two facts you scan
-    // down the column rather than read
-    row.appendChild(el('div', { class: 'term-clock' }, [
+    // down the column rather than read. They sit over the actions in one side
+    // column (board.css .term-side); the narrow breakpoint dissolves it.
+    const side = el('div', { class: 'term-side' })
+    row.appendChild(side)
+    side.appendChild(el('div', { class: 'term-clock' }, [
       el('span', { class: 'term-when elapsed', 'data-elapsed-from': String(Date.parse(s.started_at) || 0), 'data-elapsed-format': 'compact', title: `started ${new Date(s.started_at).toLocaleString()}` }, [ago(s.elapsed_ms)]),
       // the tail is `codex-99ab`, printed immediately after the word `codex`:
       // the prefix is the agent name twice, and it is the half that squeezed
@@ -1859,7 +1897,7 @@
         q.addEventListener('click', () => act(s.session_id, 'request-handoff', q))
         actions.appendChild(q)
       }
-      row.appendChild(actions)
+      side.appendChild(actions)
       term.appendChild(row)
       return term
     }
@@ -1924,7 +1962,7 @@
       actions.appendChild(land)
     }
     if (s.active) {
-      const h = el('button', { type: 'button', class: `btn ${blocker ? 'btn-primary' : 'btn-secondary'}`, title: 'save the bundle, stop this agent, start the next option in the same terminal', 'data-focus-key': `handoff:${s.session_id}` }, ['Hand off now'])
+      const h = el('button', { type: 'button', class: 'btn btn-secondary', title: 'save the bundle, stop this agent, start the next option in the same terminal', 'data-focus-key': `handoff:${s.session_id}` }, ['Hand off now'])
       // the same confirm row End and the picker already use. This stops the
       // current turn of a working agent, and the `h` key presses this button:
       // an action that costs a turn asks first, whichever hand pressed it.
@@ -1961,7 +1999,7 @@
       no.addEventListener('click', () => act(s.session_id, `requests/${encodeURIComponent(r.by)}/dismiss`, no))
       actions.append(ok, no)
     }
-    row.appendChild(actions)
+    side.appendChild(actions)
     term.appendChild(row)
 
     // Why can't I land expander or fallback blocker message
@@ -2573,7 +2611,7 @@
   // favicon are the only surface a browser gives a tab nobody is looking at.
   // favicon.svg itself is never touched; the dot is a variant drawn inline.
   const FAVICON = '/favicon.svg'
-  const FAVICON_DOT = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">\u{1F9BF}</text><circle cx="78" cy="22" r="20" fill="#E64343"/></svg>')}`
+  const FAVICON_DOT = `data:image/svg+xml,${encodeURIComponent('<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"/><circle cx="19" cy="5" r="5" fill="#E64343"/></svg>')}`
   function titleBadge(n) {
     const title = n > 0 ? `(${n}) Leg` : 'Leg'
     if (document.title !== title) document.title = title
@@ -2792,7 +2830,7 @@
     const repos = [...new Set(finished.map((s) => s.repo_name).filter(Boolean))]
     if (repos.length) meta.textContent += `, in ${repos.slice(0, 3).join(', ')}${repos.length > 3 ? ` and ${repos.length - 3} more` : ''}`
     const btn = el('button', { type: 'button', class: 'btn btn-secondary', 'aria-expanded': finishedOpen ? 'true' : 'false', 'aria-controls': 'finished-drawer', 'data-focus-key': 'finished-toggle' },
-      [finishedOpen ? `Hide the ${finished.length}` : `View all ${finished.length}`])
+      [finishedOpen ? 'Hide' : 'View'])
     btn.addEventListener('click', () => { finishedOpen = !finishedOpen; renderSessions(view) })
     slot.appendChild(btn)
     panel.hidden = !finishedOpen
@@ -2842,6 +2880,9 @@
     orderDivergedAt = same ? 0 : (orderDivergedAt || Date.now())
     const empty = document.querySelector('.region-terminals .empty-line')
     if (empty) empty.hidden = list.some((s) => s.active || needsYou(s, notesOf.get(s.session_id) || []))
+    // the first-run panel is the same fact in a lit panel (index.html #first-run)
+    const firstRun = document.getElementById('first-run')
+    if (firstRun) firstRun.hidden = list.length > 0
 
     // A terminal that has ended or been lost is history, and history does not
     // belong in the panel that shows what is live. It moves to the ledger.
@@ -2999,7 +3040,7 @@
   // depends on it. board-updates.test.mjs uses the same pattern in board.js.
   if (typeof module !== 'undefined') {
     module.exports = {
-      verdictLines, VERDICT_CH, SUB_CH, WARN_PCT, bindingOf, capFigure, capToken, shareClause, headline,
+      verdictLines, verdictTarget, VERDICT_CH, SUB_CH, WARN_PCT, bindingOf, capFigure, capToken, shareClause, headline,
       rankedNotes, needsYou, registerTokens, capacityPhrase, capacityNote, waitingNote, notifyWait, resetWait,
       KEY_BUTTONS, KEY_MOVES,
       // D14: the ring is state, not a pure function, so test/board-keyboard

package/src/board/strip.js

@@ -140,7 +140,7 @@
     const drawer = document.getElementById('capacity-drawer')
     if (btn) {
       btn.setAttribute('aria-expanded', capacityOpen ? 'true' : 'false')
-      btn.textContent = capacityOpen ? 'Hide capacity and models' : 'Capacity and models >'
+      btn.textContent = capacityOpen ? 'Hide capacity and models' : 'Capacity and models'
     }
     if (drawer) drawer.hidden = !capacityOpen
   }