smol-symphony 0.2.0 → 0.3.0

package/DESIGN.md

@@ -1,6 +1,6 @@
 ---
 name: smol-symphony
-description: The orchestrator's console. A small dark workshop for dispatching and watching coding agents.
+description: The orchestrator's console. A small dark workshop for dispatching and watching coding agents, laid out as a kanban bench.
 colors:
   surface-inset: "#0c0f15"
   surface-base: "#0f1115"
@@ -12,26 +12,31 @@ colors:
   text-muted: "#9aa4b2"
   text-base: "#dfe2e7"
   text-strong: "#e6ebf2"
-  text-on-accent: "#ffffff"
+  text-on-accent: "#f4f6fb"
   dispatch-blue: "#2a6df4"
+  link-hover: "#9cc0ff"
   running-bg: "#1f3a26"
   running-fg: "#58d68d"
   retrying-bg: "#3a2f1f"
   retrying-fg: "#f0c060"
   idle-bg: "#20242c"
   idle-fg: "#9aa4b2"
+  await-bg: "#1f2a36"
+  await-fg: "#7fb5d4"
+  done-bg: "#1c2a1f"
+  done-fg: "#82c896"
   error-fg: "#ff7676"
   success-fg: "#58d68d"
 typography:
   headline:
     fontFamily: "ui-sans-serif, system-ui, sans-serif"
     fontSize: "1.3rem"
-    fontWeight: 400
-    lineHeight: 1.2
+    fontWeight: 500
+    lineHeight: 1.3
   title:
     fontFamily: "ui-sans-serif, system-ui, sans-serif"
     fontSize: "1rem"
-    fontWeight: 400
+    fontWeight: 500
     lineHeight: 1.3
   body:
     fontFamily: "ui-sans-serif, system-ui, sans-serif"
@@ -43,9 +48,14 @@ typography:
     fontSize: "14px"
     fontWeight: 400
     lineHeight: 1.4
+  colhead:
+    fontFamily: "ui-sans-serif, system-ui, sans-serif"
+    fontSize: "14px"
+    fontWeight: 500
+    lineHeight: 1.4
   pill:
     fontFamily: "ui-sans-serif, system-ui, sans-serif"
-    fontSize: "0.85em"
+    fontSize: "0.78em"
     fontWeight: 400
     lineHeight: 1.4
   data:
@@ -54,14 +64,15 @@ typography:
     fontWeight: 400
     fontFeature: "tabular-nums"
     lineHeight: 1.45
-  th:
-    fontFamily: "ui-sans-serif, system-ui, sans-serif"
-    fontSize: "14px"
-    fontWeight: 500
+  mono:
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+    fontSize: "13px"
+    fontWeight: 400
+    fontFeature: "tabular-nums"
     lineHeight: 1.4
 rounded:
+  xs: "3px"
   sm: "4px"
-  md: "8px"
   pill: "999px"
 spacing:
   "2xs": "0.1rem"
@@ -75,53 +86,96 @@ components:
     backgroundColor: "{colors.dispatch-blue}"
     textColor: "{colors.text-on-accent}"
     rounded: "{rounded.sm}"
-    padding: "0.5rem 1rem"
+    padding: "0.55rem 1.1rem"
     typography: "{typography.body}"
   button-ghost:
     backgroundColor: "{colors.surface-chip}"
     textColor: "{colors.text-base}"
+    border: "1px solid {colors.border-firm}"
     rounded: "{rounded.sm}"
-    padding: "0.3rem 0.7rem"
+    padding: "0.35rem 0.85rem"
     typography: "{typography.body}"
+  button-ghost-sm:
+    backgroundColor: "transparent"
+    textColor: "{colors.text-muted}"
+    border: "1px solid {colors.border-firm}"
+    rounded: "{rounded.xs}"
+    padding: "0.18rem 0.6rem"
+    typography: "{typography.pill}"
+  icon-button:
+    backgroundColor: "{colors.surface-chip}"
+    textColor: "{colors.text-muted}"
+    border: "1px solid {colors.border-firm}"
+    rounded: "{rounded.sm}"
+    size: "22–28px square"
   input:
     backgroundColor: "{colors.surface-inset}"
     textColor: "{colors.text-strong}"
+    border: "1px solid {colors.border-firm}"
     rounded: "{rounded.sm}"
-    padding: "0.4rem 0.6rem"
+    padding: "0.45rem 0.6rem"
+    focusOutline: "1px solid {colors.dispatch-blue}"
     typography: "{typography.body}"
-  card-form:
+  new-issue-panel:
     backgroundColor: "{colors.surface-raised}"
     textColor: "{colors.text-base}"
-    rounded: "{rounded.md}"
-    padding: "1rem"
+    borderLeft: "1px solid {colors.border-firm}"
+    rounded: "0"
+    placement: "fixed, right edge, full height, slides in"
+  header-badge:
+    rounded: "{rounded.pill}"
+    padding: "0.1rem 0.55rem"
+    typography: "{typography.pill}"
+    transform: "uppercase"
+    variants:
+      idle: { backgroundColor: "{colors.idle-bg}", textColor: "{colors.idle-fg}" }
+      working: { backgroundColor: "{colors.running-bg}", textColor: "{colors.running-fg}" }
+      attention: { backgroundColor: "{colors.await-bg}", textColor: "{colors.await-fg}" }
   pill-running:
     backgroundColor: "{colors.running-bg}"
     textColor: "{colors.running-fg}"
     rounded: "{rounded.pill}"
-    padding: "0.1rem 0.5rem"
+    padding: "0.1rem 0.55rem"
     typography: "{typography.pill}"
   pill-retrying:
     backgroundColor: "{colors.retrying-bg}"
     textColor: "{colors.retrying-fg}"
     rounded: "{rounded.pill}"
-    padding: "0.1rem 0.5rem"
+    padding: "0.1rem 0.55rem"
     typography: "{typography.pill}"
   pill-idle:
     backgroundColor: "{colors.idle-bg}"
     textColor: "{colors.idle-fg}"
     rounded: "{rounded.pill}"
-    padding: "0.1rem 0.5rem"
+    padding: "0.1rem 0.55rem"
+    typography: "{typography.pill}"
+  pill-awaiting:
+    backgroundColor: "{colors.await-bg}"
+    textColor: "{colors.await-fg}"
+    rounded: "{rounded.pill}"
+    padding: "0.1rem 0.55rem"
+    typography: "{typography.pill}"
+  pill-done:
+    backgroundColor: "{colors.done-bg}"
+    textColor: "{colors.done-fg}"
+    rounded: "{rounded.pill}"
+    padding: "0.1rem 0.55rem"
     typography: "{typography.pill}"
-  th:
-    backgroundColor: "{colors.surface-base}"
+  kanban-column:
+    headerBorderBottom: "1px solid {colors.border-firm}"
+    nameColor: "{colors.text-muted}"
+    countColor: "{colors.text-dim}"
+    typography: "{typography.colhead}"
+  issue-row:
+    backgroundColor: "transparent"
+    borderBottom: "1px solid {colors.border-soft}"
+    rounded: "{rounded.xs}"
+    awaitTint: "rgba(127, 181, 212, 0.07)"
+    retryStuckTint: "rgba(240, 192, 96, 0.05)"
+  health-field:
     textColor: "{colors.text-muted}"
-    typography: "{typography.th}"
-    padding: "0.4rem 0.6rem"
-  td:
-    backgroundColor: "{colors.surface-base}"
-    textColor: "{colors.text-base}"
-    typography: "{typography.data}"
-    padding: "0.4rem 0.6rem"
+    badColor: "{colors.error-fg}"
+    typography: "{typography.mono}"
 ---
 
 # Design System: smol-symphony
@@ -131,323 +185,490 @@ components:
 **Creative North Star: "The Quiet Workshop"**
 
 A tidy workbench, not a control room. The orchestrator does the real work; this
-surface only shows what is on the bench right now, and gives one place to put
-new work on. Everything you can see is there because the orchestrator actually
-knows it, and nothing is there for atmosphere.
+surface only shows what is on the bench right now, lays it out as a kanban board
+of states, and gives one place to put new work on. Everything you can see is
+there because the orchestrator actually knows it, and nothing is there for
+atmosphere.
 
 The system is dark because the user opens it next to a terminal, against an
 already-dark editor, in the middle of doing other things. It is flat because
 the workshop has no spotlights: depth is conveyed by stacking slightly lighter
 panels on a slightly darker bench, never by glow or lift. Numbers are tabular,
-labels are real field names, and pills mean exactly the three states the
-orchestrator tracks: running, retrying, idle.
+identifiers are monospace, labels are real field names, and every status colour
+encodes one distinct thing the orchestrator tracks.
 
 What this system rejects, drawn from PRODUCT.md: generic SaaS dashboard chrome
-(sidebar nav, gradient metric tiles, identical card grids), Jira-style ITSM
-heaviness (modal-on-modal flows, status pills whose colors don't encode
-distinct state), and AI-product chrome (violet gradients, glassmorphism,
-sparkle iconography). smol-symphony runs AI agents but is not an AI product;
-the agents are infrastructure, not the narrative.
+(sidebar nav, gradient metric tiles, identical card grids, "Welcome back"
+heroes), Jira-style ITSM heaviness (modal-on-modal flows, status pills whose
+colours don't encode distinct state), and AI-product chrome (violet gradients,
+glassmorphism, sparkle iconography). smol-symphony runs AI agents but is not an
+AI product; the agents are infrastructure, not the narrative.
 
 **Key Characteristics:**
 - Dark, cool-blue-leaning neutrals stacked into four tonal layers.
-- One saturated accent (Dispatch Blue) reserved for the single primary verb.
-- Three semantic pill states, each a paired bg + fg color. No fourth state, ever.
-- No shadows. Depth is tonal stacking only.
-- Single sans family. Tabular numerics for any cell that holds a number.
-- Density over whitespace luxury: tables are dense, the form is grid-packed.
+- One saturated brand accent (Dispatch Blue), used for the primary verb and the
+  keyboard-focus ring. No second saturated hue competes with it.
+- Five semantic status pairs (running, retrying, idle, await, done), each a
+  paired bg + fg colour mapped to a real orchestrator state. New states earn a
+  new named pair; colours never get reused for a second meaning.
+- The board is a **kanban**: one column per declared workflow state, each issue
+  a flat row. Transient runtime status (running / retrying / awaiting steering)
+  is overlaid on the row via a pill, a metadata trail, and tint.
+- A sticky **header strip** carries a single tracker-state badge (idle /
+  working / attention), and a dense **system-health line** answers "is this
+  connected?" without a hero.
+- New work is composed in a **slide-in panel** that enters from the right edge.
+  It is the one card-shaped surface; the board stays visible and interactive
+  behind it (non-modal).
+- No shadows. Depth is tonal stacking, plus the one panel that slides in over
+  the bench.
+- Two native font stacks: a system sans for prose, and a system monospace for
+  identifiers, code, paths, and the health line. No web fonts. Tabular numerics
+  on anything that holds a number.
+- Density over whitespace luxury: columns are tight, rows are flat, the health
+  line is a single `key=value` strip.
+- Motion exists only to encode or reveal state (the panel sliding in, a region
+  expanding when it has something to say, a hover affordance) — never as
+  decoration.
 
 ## 2. Colors: The Workshop Bench Palette
 
-A cool-blue-leaning dark stack with one saturated accent and three semantic
-status pairs. Each neutral is tinted toward the accent hue at near-zero
-chroma so no surface reads as pure grey.
+A cool-blue-leaning dark stack with one saturated brand accent and five semantic
+status pairs. Each neutral is tinted toward the accent hue at near-zero chroma
+so no surface reads as pure grey. All values below are the live CSS custom
+properties from the shipping dashboard (`:root` in `src/http.ts`).
 
 ### Primary
-- **Dispatch Blue** (`#2a6df4`, ≈`oklch(55% 0.22 261)`): the verb. Used only on
-  the Create-issue submit button. Nowhere else on the page is this saturated.
-  The button is the one place the user makes the orchestrator do something
-  new; the color marks that action and only that action.
+- **Dispatch Blue** (`#2a6df4`, ≈`oklch(55% 0.22 261)`): the brand accent. It
+  fills the one primary verb — the **create** button in the new-issue panel —
+  and draws the keyboard **focus ring** on every interactive control
+  (`outline … solid var(--accent)`; inputs also take it as a focus
+  border-colour). It is the interaction accent, never a decorative one. Its
+  on-accent text is **`#f4f6fb`**, a near-white tinted toward the brand hue (the
+  old pure-`#fff` button label has been retired — see Don'ts).
+- **Link Hover** (`#9cc0ff`): a lightened Dispatch Blue used for the hover /
+  focus state of identifiers and links (row identifiers, ticker IDs, the
+  steering panel's links, issue-detail body links). The resting state of those
+  links is a neutral text tone; the blue appears only on interaction.
 
 ### Neutral (the bench, four tonal layers)
-- **Inset** (`#0c0f15`, ≈`oklch(16% 0.008 260)`): input field interiors.
-  Deeper than the body so fields read as sunken into the form, not floating.
-- **Bench** (`#0f1115`, ≈`oklch(18% 0.005 260)`): the page body. The default
-  surface; everything else stacks on or beneath this.
-- **Raised Panel** (`#161a22`, ≈`oklch(21% 0.012 260)`): the create-issue form
-  card. One step lighter than the bench, signalling "this is where you put new
+- **Inset** (`#0c0f15`, ≈`oklch(16% 0.008 260)`): input field interiors and code
+  blocks. Deeper than the body so fields read as sunken slots, not floating.
+- **Bench** (`#0f1115`, ≈`oklch(18% 0.005 260)`): the page body, the header
+  strip, the health line, and the ticker. The default surface; everything else
+  stacks on or beneath this.
+- **Raised Panel** (`#161a22`, ≈`oklch(21% 0.012 260)`): the slide-in new-issue
+  panel. One step lighter than the bench, signalling "this is where you put new
   things."
-- **Chip** (`#20242c`, ≈`oklch(27% 0.012 260)`): the refresh button and the
-  idle pill. The most-lifted neutral; reserved for small interactive surfaces
-  and quiet status.
+- **Chip** (`#20242c`, ≈`oklch(27% 0.012 260)`): ghost buttons, the icon buttons
+  (refresh, panel close), and the idle pill. The most-lifted neutral; reserved
+  for small interactive surfaces and quiet status.
 
 ### Border / Rule
-- **Soft Rule** (`#1c2029`, ≈`oklch(25% 0.010 260)`): horizontal table row
-  dividers. Just barely visible; the eye should track columns, not rows.
-- **Firm Rule** (`#2a2e36`, ≈`oklch(31% 0.008 260)`): input borders and the
-  underline beneath section headings. The structural lines.
+- **Soft Rule** (`#1c2029`, ≈`oklch(25% 0.010 260)`): row dividers, and the
+  thin separators under the health line and ticker. Just barely visible.
+- **Firm Rule** (`#2a2e36`, ≈`oklch(31% 0.008 260)`): control borders, the
+  header's bottom edge, the panel's left edge, and column-header underlines.
+  The structural lines.
 
 ### Text (the four-step ramp)
-- **Dim** (`#6b7280`): timestamps, `small.dim` annotations. The lowest reading
-  layer; reachable but not pulling attention.
-- **Muted** (`#9aa4b2`): form labels, table headers, secondary copy.
-- **Base** (`#dfe2e7`): primary body text and table cell contents.
-- **Strong** (`#e6ebf2`): input field text and other content the user is
-  actively typing or editing. One step brighter than base so what you're
-  writing stands out from what you're reading.
-
-### Status (three paired roles)
-Each pill carries both a background and a foreground; they are not
-interchangeable across states. The dark-on-color is what reads at a glance.
-
-- **Running** (`bg #1f3a26`, `fg #58d68d`): active sessions. The orchestrator
-  is currently spending tokens on this issue.
-- **Retrying** (`bg #3a2f1f`, `fg #f0c060`): retry queue. The orchestrator
-  hit a recoverable failure and will dispatch again on backoff.
+- **Dim** (`#6b7280`): timestamps, the row "peek" line, column counts, the
+  totals footer, `.dim` annotations. The lowest reading layer.
+- **Muted** (`#9aa4b2`): labels, column names, the health line, secondary copy.
+- **Base** (`#dfe2e7`): primary body text, row titles, table-less cell content.
+- **Strong** (`#e6ebf2`): text the user is typing (inputs), row identifiers,
+  section and panel titles. One step brighter than base.
+
+### Status (five paired roles)
+Each carries both a background and a foreground; the pair is fixed per state and
+never reused across states. The light-on-dark foreground is what reads at a
+glance. The dashboard uses these as **pills** on rows, as the header **badge**,
+and as faint full-row **tints**; the issue-detail page reuses the same pairs.
+
+- **Running** (`bg #1f3a26`, `fg #58d68d`): a live session. The orchestrator is
+  currently spending tokens on this issue. A *continuation* (the slot-holding
+  resume of a clean handoff, e.g. Review → Todo) deliberately reads as running,
+  not retrying, so a clean handoff never flashes an error colour (issue 146).
+- **Retrying** (`bg #3a2f1f`, `fg #f0c060`): the failure-backoff queue. The
+  orchestrator hit a recoverable failure and will dispatch again on backoff.
+  Only `failure` retries are amber; continuations are not. Amber also tints the
+  name of a holding column and the "N retrying" ticker label.
 - **Idle** (`bg #20242c`, `fg #9aa4b2`): on disk, not running, not retrying.
   Deliberately the same hex as Chip + Muted, because idle is *the absence of
-  status color*.
+  status colour*.
+- **Await** (`bg #1f2a36`, `fg #7fb5d4`): an agent has called
+  `request_human_steering` and is blocked on the operator's reply. A calm blue,
+  not an alarm. Drives the `awaiting` pill, the "attention" header badge, the
+  "N awaiting" ticker label, and a faint blue wash on the awaiting row. The
+  same pair backs the (currently unused) `resuming` pill alias, kept calm-blue
+  for the same reason continuations stay green.
+- **Done** (`bg #1c2a1f`, `fg #82c896`): a terminal state (Done, Cancelled). A
+  muted, settled green — quieter than running. Terminal columns are omitted from
+  the board, so this pair appears mainly on the issue-detail page and on any
+  trailing "undeclared" column.
 
 ### Inline message
-- **Error** (`#ff7676`): the create-form error line. Inline, not a toast, not
-  a modal.
-- **Success** (`#58d68d`): the create-form OK line. Shares the running-fg
-  green by design; success means "the orchestrator now knows about this."
+- **Error** (`#ff7676`, ≈`oklch(70% 0.18 22)`): the panel's error line, a stuck
+  retry's error text, a bad health field (`hf-bad`), the "undeclared" column
+  badge, and the ticker error chip. Inline, never a toast, never a modal.
+- **Success** (`#58d68d`): the panel's OK line. Shares the running-fg green by
+  design; success means "the orchestrator now knows about this."
 
 ### Named Rules
 
-**The One Verb Rule.** Dispatch Blue appears on exactly one element per page:
-the primary action. If a second saturated accent is needed, the design is
-wrong; reach for a status color (running/retrying/idle) or text weight first.
-
-**The Three-Pill Rule.** Status pills encode running, retrying, idle.
-Nothing else. Never invent a fourth pill color for taste; if a fourth state
-emerges from the orchestrator, name it semantically and pair a new bg + fg
-before adding it here.
+**The One-Accent Rule** (was "The One Verb Rule"). There is exactly one
+saturated brand hue: Dispatch Blue. It marks the single primary verb (the create
+button) and the keyboard-focus ring — both are *interaction*, not decoration. If
+a second saturated accent is wanted, the design is wrong; reach for a status
+pair or text weight first. (This rule was once "Dispatch Blue on exactly one
+element per page"; the focus ring legitimately spreads the same hue across every
+control, so the rule is now scoped to "one hue, interaction-only," not "one
+element.")
+
+**The Status-Pair Rule** (replaces "The Three-Pill Rule"). Status colour is a
+closed vocabulary of *named bg + fg pairs*, each mapped to one real orchestrator
+state: running, retrying, idle, await, done. Never invent a colour for taste; if
+a new state emerges, name it semantically and add a new pair here before using
+it. (The original "three pills — running/retrying/idle, no fourth ever" was
+written before the board surfaced awaiting-steering and terminal state; the
+*discipline* — one colour, one true state, no reuse — is unchanged, only the
+count.)
 
 **The Tinted Neutral Rule.** No pure greys. Every neutral leans on the cool
 blue brand axis (hue ≈260) at near-zero chroma (0.005–0.012). Pure `#000` and
-pure `#fff` are prohibited.
+pure `#fff` are prohibited (the create button's label is `#f4f6fb`, not `#fff`).
 
 ## 3. Typography
 
 **Body Font:** `ui-sans-serif, system-ui, sans-serif` (browser native).
-**Display Font:** none. The same family carries every role.
-**Mono / Data Font:** still the same family, with `font-variant-numeric:
-tabular-nums` on every cell that holds a number.
+**Display Font:** none. The sans family carries every prose role.
+**Mono / Data Font:** `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`
+— a real, distinct (still native) monospace stack used for identifiers, code,
+on-disk paths, the tracker root, the health line, and ticker IDs. Any cell that
+holds a number — sans or mono — carries `font-variant-numeric: tabular-nums`.
 
-**Character:** the system font of whatever OS the user is on. No web fonts,
-no FOUT, no loading flash. The console reads like the operating system, not
-like a product. Numbers line up; text doesn't try to be elegant.
+**Character:** the system fonts of whatever OS the user is on. No web fonts, no
+FOUT, no loading flash. The console reads like the operating system, not like a
+product. Identifiers and paths are monospace so they line up and read as
+literal strings; prose stays sans.
 
 ### Hierarchy
 
-The scale is intentionally tight, with one density trick: section titles (h2)
-match body in size and depend on a divider rule plus generous top margin for
-hierarchy, not on type contrast. This keeps the page feeling dense and
-console-like rather than article-like.
-
-- **Headline** (h1, 400, `1.3rem` ≈ 20.8px, lh 1.2): the page title only.
-  Appears once per page (`Symphony — tracker.root = …`).
-- **Title** (h2, 400, `1rem` = 16px, lh 1.3, with a `1px` bottom rule in Firm
-  Rule): section labels (`Create issue`, `Active sessions`, etc.). Same size
-  as a paragraph; the rule beneath does the hierarchy work.
-- **Body** (400, `14px`, lh 1.45): default text, table cells.
-- **Label** (400, `14px`, color Muted): form labels and table headers.
-- **Data** (400, `14px`, `tabular-nums`): every number that appears in a
-  cell. Token counts, attempt numbers, runtime seconds, time-of-day.
-- **TH** (500, `14px`, color Muted): table column headers. Heavier than body
-  by one step (400 → 500), so columns name themselves.
-- **Pill** (400, `0.85em` ≈ 11.9px against 14px body): the three status pills.
-  Smaller than body so pills read as inline metadata, not content.
+The scale is intentionally tight. The dashboard has **no `h1`** — its identity
+is the header strip (`symphony · <workflow> · <tracker.root>`), not a page
+title. The Headline role now lives on the **issue-detail page** (the issue
+title) and the not-found page. Section titles match body size and lean on a
+divider rule plus top margin for hierarchy, keeping the page console-like.
+
+- **Headline** (h1, 500, `1.3rem` ≈ 20.8px, lh 1.3): the issue-detail page title
+  (and the not-found page). Once per page; absent on the dashboard.
+- **Title** (h2, 500, `1rem` = 16px, with a `1px` Firm Rule underline): the
+  detail page's section labels and the slide-in panel's "new issue" heading.
+  Same size as a paragraph; the rule beneath does the hierarchy work.
+- **Body** (400, `14px`, lh 1.45): default text, row titles.
+- **Label** (400, `14px`, colour Muted): form labels in the new-issue panel.
+- **Column header** (500, `14px`, colour Muted): kanban column names. One weight
+  step above body (400 → 500) so columns name themselves; a holding column's
+  name takes the amber (retrying) tone, a terminal/undeclared column's the Dim
+  tone.
+- **Data** (400, `14px`, `tabular-nums`): every number — token counts, attempt
+  numbers, runtime, time-of-day, counts.
+- **Pill** (400, `0.78em` ≈ 10.9px against 14px body): status pills and the
+  header badge. Smaller than body so they read as inline metadata, not content.
+  (The issue-detail page renders its pill slightly larger, `0.82em`.)
+- **Mono** (400, `13px`, `tabular-nums`): identifiers, the tracker root, the
+  health line (`12px`), and `<code>`. The CLI-in-HTML texture.
 
 ### Named Rules
 
-**The System-Font Rule.** No web fonts are loaded, ever. The console must
-look like the user's OS. If a custom face is added later, it has to justify
-the latency cost in writing.
+**The System-Font Rule.** No web fonts are loaded, ever. Both stacks — the sans
+and the monospace — are the user's native OS fonts. The console must look like
+the user's OS. If a custom face is added later, it has to justify the latency
+cost in writing.
 
-**The Tabular-Numbers Rule.** Any cell that contains a number applies
-`font-variant-numeric: tabular-nums`. Token counts, attempt counts,
-timestamps, IDs with digits: all of them. Columns of numbers must line up.
+**The Tabular-Numbers Rule.** Any element that contains a number applies
+`font-variant-numeric: tabular-nums`. Token counts, attempt counts, timestamps,
+identifiers with digits, column counts: all of them. Columns of numbers must
+line up.
 
-**The Same-Size Section-Header Rule.** Section titles (h2) are the same size
-as body. Hierarchy comes from the divider rule beneath and the top margin
-above, not from type scale. This keeps page density high.
+**The Same-Size Section-Header Rule.** Section titles (h2) are the same size as
+body. Hierarchy comes from the divider rule beneath and the margin above, not
+from type scale. This keeps page density high.
 
 ## 4. Elevation
 
-**The system is flat.** No `box-shadow` rule appears anywhere in the
-stylesheet. Depth is conveyed entirely by tonal stacking of the neutrals:
-`surface-inset` (deepest) → `surface-base` (default) → `surface-raised` (form
-card) → `surface-chip` (refresh button, idle pill).
+**The system is flat.** No `box-shadow` rule appears anywhere in the stylesheet.
+Depth is conveyed by tonal stacking of the neutrals: `surface-inset` (deepest) →
+`surface-base` (default) → `surface-raised` (the panel) → `surface-chip` (chips,
+icon buttons, idle pill).
 
-There is no hover lift, no focus glow, no drop shadow on the form card. A
-panel reads as "raised" only because it is one step lighter than the bench
-beneath it.
+The one surface that genuinely sits *above* the bench is the **slide-in
+new-issue panel**: it is a Raised-Panel-coloured `aside` fixed to the right
+edge, separated from the bench by a `1px` Firm Rule on its left and by **motion**
+(it slides in on a 320ms ease), not by a shadow or a glow. There is no hover
+lift and no focus glow anywhere; focus is an outline ring in Dispatch Blue.
 
 ### Named Rules
 
-**The Flat-By-Default Rule.** Surfaces are flat. Shadows are forbidden.
-Depth cues come from the four-step neutral stack and from the divider rules
-under section titles. If a future state needs visible elevation, introduce a
-fifth neutral step before reaching for `box-shadow`.
+**The Flat-By-Default Rule.** Surfaces are flat. Shadows are forbidden. Depth
+cues come from the four-step neutral stack, from the divider rules, and from the
+one panel that translates in from the edge. If a future surface needs visible
+elevation, introduce a fifth neutral step (or lean on the existing slide
+motion) before reaching for `box-shadow`.
+
+**The No-Glow Rule.** Focus, hover, and active states change colour, border, or
+position — never glow. Focus is a crisp Dispatch Blue outline ring.
+Glassmorphism, blur backdrops, and shimmer animations are prohibited (carries
+PRODUCT.md's AI-product-chrome anti-reference).
 
-**The No-Glow Rule.** Focus, hover, and active states change color or
-border, never glow. Glassmorphism, blur backdrops, and shimmer animations
-are prohibited (carries PRODUCT.md's AI-product-chrome anti-reference).
+**The State-Only-Motion Rule.** Motion encodes or reveals state: the panel
+sliding in (it is open or closed), the ticker expanding when it has something to
+say and collapsing to zero height when it doesn't, a hover border easing in as
+an affordance cue, the 2-second poll refreshing. There is no motion that doesn't
+mean something. No animated layout for flourish, no decorative loops, no
+thinking-dots.
 
 ## 5. Components
 
-The doctrine is **crisp and exact**: minimal radius vocabulary (4px for
-controls, 8px for the form card, 999px for pills), 1px borders only where
-structurally necessary, hairline-tight alignment, no decorative motion.
+The doctrine is **crisp and exact**: a minimal radius vocabulary (`3px` for
+rows, `4px` for controls, `999px` for pills and badges), `1px` borders only
+where structurally necessary, hairline-tight alignment, and motion only where it
+encodes state.
+
+### Header strip
+
+A sticky strip across the top of the dashboard, Bench-coloured with a `1px` Firm
+Rule bottom edge. Left to right: the **brand** (`symphony`, weight 600, Strong),
+a Dim `·`, the **workflow** name (Base), the **tracker root** (Mono, Dim,
+ellipsised, takes the free space), the live **tracker-state badge**, and the
+**refresh** icon button.
+
+The **tracker-state badge** is the dashboard's single glance signal, polled
+every 2s. It is a pill that takes one of three states from `trackerStatus()`:
+- **idle** — idle pair (`bg #20242c` / `fg #9aa4b2`): nothing running.
+- **working** — running pair (`bg #1f3a26` / `fg #58d68d`): at least one session
+  is live and nothing needs the operator.
+- **attention** — await pair (`bg #1f2a36` / `fg #7fb5d4`): something is awaiting
+  steering, or a failure-backoff retry is queued. The badge uses the calm await
+  blue (it means "needs your eyes," not "broken"). Continuations never trip it.
+
+The badge text is uppercased and letter-spaced; this is the one place type goes
+uppercase, marking it as a status indicator rather than content.
+
+### System-health line
+
+A dense, single-row `key=value` strip under the header (Bench background, Soft
+Rule below, Mono `12px`, Muted, tabular-nums, wraps on narrow widths). It answers
+the first-run question "is this thing actually connected?" without a hero or a
+metric tile. Each field is a fact the orchestrator already knows from its health
+probe:
+- one `<State>=<adapter>/<model>` field per active state (per-state overrides
+  applied; an inherited model shows `/default`),
+- `image=<short-digest>` (the gondolin image; full ref in the `title`),
+- `cred=ok` / `cred=missing:<adapter>`,
+- `tracker=writable` / `tracker=readonly`,
+- `poll=<HH:MM:SS>` (the last poll time).
+
+Only genuine problems — a missing credential, a read-only tracker — flag in the
+Error colour (`hf-bad`). No new accent, no tiles, no hero. The region rides the
+same 2s poll as everything else.
+
+### Attention ticker
+
+A thin strip below the health line listing what currently needs eyes: pending
+steering replies ("N awaiting", await-blue label) and stuck retries ("N retrying
+· M with error", amber label). Each identifier is a monospace anchor that jumps
+to the issue's row in the board. When nothing needs attention the strip
+collapses to **zero height** (padding and border animate away) so an all-clear
+board shows no empty chrome.
+
+### Board (kanban)
+
+The dominant surface. A horizontally-scrolling grid of columns
+(`grid-auto-flow: column`, min column width `260px`, `1.5rem` gap), **one column
+per declared workflow state in declaration order**. Replaces the old flat
+tables entirely.
+
+- **Active** and **holding** states get a column. **Terminal** states (Done,
+  Cancelled) are deliberately omitted — the glance test is "what's running,
+  what's stuck," which finished work doesn't answer; terminal issues stay
+  reachable via their detail page.
+- **Orphan columns**: an on-disk state directory whose name isn't in the
+  declared `states:` set (e.g. after a workflow rename) gets a trailing column
+  flagged with an Error-coloured `undeclared` badge, so stranded files stay
+  visible rather than silently dropping out.
+
+Each **column** has a header — name (Column-header type; amber if holding, Dim
+if terminal/orphan), a Dim tabular count, and, for active/holding columns, a
+small `+` **add** icon button that opens the new-issue panel pre-set to that
+column — over a body of rows. An empty active column shows a Dim hint, `drop
+into <State>/`.
+
+### Issue row (the flat card)
+
+Each on-disk issue is a flat row in its state's column — **not** a card. It has
+a `1px` Soft Rule bottom divider, a small `3px` radius, and no fill at rest.
+Runtime status is overlaid:
+- **Row head**: the monospace identifier (Strong, links to the detail page), a
+  status **pill** (`awaiting` / `running` / `retrying`, in that priority), and a
+  Muted metadata trail (`turn N · X tok` while running, `attempt N · due
+  HH:MM:SS` while in failure backoff).
+- **Title** (Base), then an optional Dim **peek** of the agent's last message
+  (clamped to two lines while running).
+- A **stuck retry** shows its error text in the Error colour.
+- A **triage** row (holding state, not otherwise busy) shows inline `approve` /
+  `discard` ghost-sm buttons.
+- **Tints, not stripes**: an awaiting row gets a faint blue wash
+  (`rgba(127,181,212,0.07)`), a stuck retry a faint amber wash
+  (`rgba(240,192,96,0.05)`), an orphan row drops to 70% opacity. The whole row
+  tints; there is no colored left-border stripe.
+
+Within a column, rows sort so anything needing attention floats up: awaiting →
+running → retrying → idle.
+
+### Inline steering (on awaiting rows)
+
+When an agent is awaiting steering, its row expands in place (a dashed Firm Rule
+top separator) to show the agent's question (rendered Markdown), an optional
+collapsible recap of the original task and the agent's context, and a reply
+`<textarea>` + send button. Enter sends, Shift+Enter inserts a newline; the
+draft is preserved across the 2s repoll. Steering happens **inline on the row**,
+never in a modal.
+
+### Slide-in new-issue panel (the One Card)
+
+The dashboard's only card-shaped surface. A Raised-Panel `aside` fixed to the
+right edge (`400px`, max `90vw`, full height), separated from the bench by a
+`1px` Firm Rule left edge. It is **non-modal**: it slides in on a 320ms ease when
+the operator presses a column's `+` button (the originating column pre-selects
+the state field), and the board stays fully visible and interactive on the left.
+Esc closes it; a backdrop click does **not** (so an in-progress draft isn't lost
+to a stray click).
+
+It holds the create form: a **column** `<select>`, a **title** input, a
+**description** `<textarea>` (all sunken inputs — Inset background, Strong text,
+Firm Rule border, Dispatch Blue focus ring), an inline status line (`np-msg`:
+Muted, Error, or success-green), and the one **primary** create button
+(Dispatch Blue, `#f4f6fb` label).
+
+### Whole-board empty state (first run)
+
+When the entire tracker holds zero issues, three terse lines sit on the bench
+above the (empty) columns — no hero, no modal, no illustration:
+- a Base lead, `no issues yet — dispatch your first`,
+- a Muted how-to, `press + on a column, or add issues/<FirstActive>/<id>.md`,
+  with the `+` shown as a small keycap (a `1px` Firm-Rule box),
+- a Dim note, `agents pick up <FirstActive> on the next poll`.
+
+It teaches the two first-run affordances once and disappears the instant any
+issue exists.
 
 ### Buttons
 
-Two variants. Both share radius `4px` and the body type role.
+Radius `4px` (`3px` for ghost-sm), body type, no shadow. Hover changes
+border-colour; focus draws a Dispatch Blue outline ring.
 
-- **Primary** (Create issue): background Dispatch Blue (`#2a6df4`), text
-  on-accent (`#ffffff`, see Don'ts), padding `0.5rem 1rem`, no border. Placed
-  inside the form grid as `grid-column: 2; justify-self: start`, so it
-  aligns under the input column rather than spanning the form.
-- **Ghost / Refresh** (next to "Active sessions"): background Chip
-  (`#20242c`), text Base (`#dfe2e7`), 1px Firm Rule border, padding
-  `0.3rem 0.7rem`. Smaller than primary on every axis; used for
-  console-style "refresh now" actions only.
-
-Hover and focus states are presently unstyled. The "crisp and exact"
-philosophy permits adding a `1px` Dispatch Blue focus-visible ring on both
-variants in a future pass; do not add hover lift or color shifts that imply
-elevation.
+- **Primary** (create, in the panel): Dispatch Blue background, `#f4f6fb` label,
+  no border. The one primary verb.
+- **Ghost** (send reply): Chip background, Base text, `1px` Firm Rule border.
+- **Ghost-sm** (triage approve / discard): transparent, Muted text, `1px` Firm
+  Rule border, smaller; the `discard` variant hovers to the Error colour.
+- **Icon buttons** (refresh, column `+`, panel close): square (22–28px),
+  Chip-or-transparent, `1px` Firm Rule border, a single glyph.
 
 ### Inputs
 
-`<input>`, `<select>`, `<textarea>` share one style.
-
-- **Background** Inset (`#0c0f15`), one step *deeper* than the form card.
-  Inputs read as sunken slots, not floating tiles.
-- **Border** `1px solid` Firm Rule (`#2a2e36`).
-- **Text** Strong (`#e6ebf2`) so what is being typed sits one step above
-  surrounding body text.
-- **Radius** `4px`.
-- **Padding** `0.4rem 0.6rem`.
-- **Width** `100%` of the form grid's value column.
-- **Textareas** add `min-height: 80px; resize: vertical`.
-
-Focus state is currently the browser default. Adding a `1px` Dispatch Blue
-focus-visible outline is the obvious next refinement, consistent with the
-philosophy.
-
-### Card (the create-issue form)
-
-The only card-shaped surface in the system. There is exactly one.
+`<input>`, `<select>`, `<textarea>` share one style: **Inset** background (one
+step deeper than the panel, so they read as sunken slots), `1px` Firm Rule
+border, **Strong** text, `4px` radius. Focus replaces the border with Dispatch
+Blue and draws a `1px` Dispatch Blue outline. Textareas resize vertically only.
 
-- **Background** Raised Panel (`#161a22`).
-- **Radius** `8px` (the only place 8px appears).
-- **Padding** `1rem`.
-- **No border, no shadow.**
-- **Layout** `display: grid; grid-template-columns: max-content 1fr; gap:
-  0.5rem 1rem; align-items: center;` so labels (max-content) align with
-  their inputs (1fr) on the same row.
+### Totals footer
 
-This is the workshop's input slot. The 8px corner is intentionally slightly
-softer than the rest of the system; on the next polish pass we may sharpen
-it to 4px or to a `1px` Firm Rule border with no radius. Either move would
-push the system further toward CLI-in-HTML.
-
-### Pills (status chips)
-
-`display: inline-block`, `padding: 0.1rem 0.5rem`, `border-radius: 999px`,
-`font-size: 0.85em`. Three semantic instances, each a paired bg + fg:
-
-- **Running** — bg `#1f3a26`, fg `#58d68d`. Live session.
-- **Retrying** — bg `#3a2f1f`, fg `#f0c060`. Backoff queue.
-- **Idle** — bg `#20242c`, fg `#9aa4b2`. On disk, not active.
-
-No fourth pill exists. If a new orchestrator state appears, the new pill
-gets a named bg + fg pair entered into the colors block and a row added in
-this section. Do not reuse an existing pair for a new meaning.
-
-### Tables
-
-The dominant content shape. Three tables on the page: Active sessions, Retry
-queue, All known issues.
-
-- `width: 100%`, `border-collapse: collapse`.
-- `th, td` padding `0.4rem 0.6rem`, `border-bottom: 1px solid` Soft Rule
-  (`#1c2029`).
-- `th` text-align left, color Muted, weight 500.
-- Every cell inherits `font-variant-numeric: tabular-nums`.
-- No striping. The Soft Rule divider is enough.
-
-### Inline status messages
-
-The form's `.msg` line is `grid-column: 1 / span 2; min-height: 1.2em`. It
-holds three states: neutral (color Muted), error (`#ff7676`), ok (`#58d68d`).
-Always inline, never a toast, never a modal.
+A Dim, tabular `X in · Y out · Z total · runtime` strip pinned to the bottom,
+hidden entirely when there's nothing to total. Numbers only, no chrome.
 
 ### Named Rules
 
-**The One-Card Rule.** The create-issue form is the only card-shaped
-surface. Other sections are unbordered blocks separated by section titles
-and divider rules. Resist adding cards to wrap tables or stats.
-
-**The Inline-Feedback Rule.** Success and error feedback land in the same
-inline `.msg` slot where the form sits. No toast notifications. No modal
-confirmations. The user already saw the issue land in the table below.
-
-**The Sunken-Input Rule.** Inputs are visually deeper than the surface they
-sit on (Inset against Raised Panel). They must not appear to float; if a
-new input style is introduced, it follows this depth rule.
+**The One-Card Rule.** The slide-in new-issue panel is the only card-shaped
+surface in the system. Everything else stands on the bench directly: columns are
+unbordered, rows are flat dividers, the health line and ticker are bare strips.
+Resist wrapping rows, columns, or stats in cards. (Originally the create-issue
+*form card* was the one card; it became this slide-in panel, but the "exactly
+one card" discipline holds.)
+
+**The Non-Modal Composer Rule** (replaces the blanket "no modals / inline-first"
+absolute). New-issue composition is a slide-in `aside`, not a modal: no backdrop
+blocks the board, no scroll lock, Esc closes, and the board keeps polling and
+responding behind it. The brand's anti-modal intent — never a modal-on-modal
+ITSM flow, never a blocking confirmation dialog — is preserved; a non-blocking
+edge panel is the sanctioned exception, and it is the *only* one. Operator
+feedback (steering replies, triage, errors) still lands **inline** on the row or
+in the panel's own status line, never in a toast.
+
+**The Sunken-Input Rule.** Inputs are visually deeper than the surface they sit
+on (Inset against the Raised Panel). They must not appear to float; any new
+input style follows this depth rule.
 
 ## 6. Do's and Don'ts
 
 ### Do:
-- **Do** stack neutrals in four steps (Inset → Bench → Raised Panel → Chip)
-  to convey depth. No shadows.
-- **Do** keep Dispatch Blue (`#2a6df4`) on exactly one element per page: the
-  primary verb. Everywhere else, status colors and text weight do the work.
-- **Do** apply `font-variant-numeric: tabular-nums` to every cell holding a
-  number. Token counts and attempt numbers must align across rows.
-- **Do** name new colors semantically (`surface-chip`, `retrying-fg`), not
-  by hue (`grey-3`, `green-400`). The token name is the contract.
-- **Do** put feedback inline in the `.msg` slot. Errors and successes never
-  leave their grid cell.
-- **Do** keep the type scale tight: h1 1.3rem, h2 1rem (same as body),
-  body 14px, pill 0.85em. Hierarchy through rules and weight, not scale.
-- **Do** keep section titles (h2) the same size as body, separated by a
-  Firm Rule underline and 2rem of top margin.
+- **Do** stack neutrals in four steps (Inset → Bench → Raised Panel → Chip) to
+  convey depth. No shadows.
+- **Do** keep Dispatch Blue (`#2a6df4`) as the single saturated brand hue: the
+  primary verb and the focus ring. Everywhere else, status pairs and text weight
+  do the work.
+- **Do** give every status colour a named bg + fg pair tied to a real
+  orchestrator state (running, retrying, idle, await, done). A new state earns a
+  new pair; colours are never reused for a second meaning.
+- **Do** apply `font-variant-numeric: tabular-nums` to every element holding a
+  number — token counts, attempts, timestamps, counts. They must align.
+- **Do** use the monospace stack for literal strings (identifiers, paths, the
+  health line, code) and the sans stack for prose.
+- **Do** put feedback inline — on the awaiting row, or in the panel's `np-msg`
+  slot. Errors and successes never become toasts.
+- **Do** keep the type scale tight: detail h1 1.3rem, h2 1rem (same as body),
+  body 14px, pill 0.78em. Hierarchy through rules and weight, not scale.
+- **Do** let the board omit terminal columns and tint awaiting/stuck rows — show
+  real state, surface what needs eyes, and let finished work fall away.
 
 ### Don't:
-- **Don't** add a fourth saturated accent. There is one verb color. Status
-  pills carry the only other saturation in the system, and they encode three
-  named states. A fourth pill is a smell.
+- **Don't** add a second saturated accent. There is one brand hue (Dispatch
+  Blue); status pairs carry the only other saturation, and each encodes a named
+  state.
+- **Don't** invent a status colour for taste, or reuse an existing pair for a
+  new meaning. Name the state, add a bg + fg pair, then use it.
 - **Don't** ship a sidebar nav, breadcrumb trail, or a "Welcome back" hero.
-  PRODUCT.md flags this as generic-SaaS-dashboard chrome; the workshop has
-  one room. Add a tab strip only when a second page genuinely exists.
+  PRODUCT.md flags this as generic-SaaS-dashboard chrome; the workshop has one
+  room. (The detail page's `symphony · workflow · id` crumb is navigation back
+  to the board, not a nav chrome shelf.)
 - **Don't** use big-number-with-tiny-label metric tiles. The hero-metric
-  template is explicitly prohibited.
-- **Don't** add violet gradients, glassmorphic blur, sparkle / star icons,
-  or any "AI inside" iconography. smol-symphony runs AI agents but is not an
-  AI product. (PRODUCT.md anti-reference, verbatim.)
-- **Don't** add Jira-style status pills whose colors do not map to distinct
-  orchestrator state. Three pills, three states, three bg + fg pairs. That
-  is the entire vocabulary.
-- **Don't** introduce `box-shadow`. Depth is tonal. If you reach for a
-  shadow, add a fifth neutral step instead.
-- **Don't** use `border-left` greater than `1px` as a colored stripe on
-  rows, cards, or alerts (carries impeccable's absolute ban).
-- **Don't** use `#000` or `#fff` as text or background. The single existing
-  `color: white` on the primary button is a known soft spot to tint toward
-  the brand hue (target ≈`oklch(98% 0.005 260)`) on the next polish pass.
-- **Don't** introduce a web font. The console reads like the OS;
-  `ui-sans-serif, system-ui, sans-serif` is non-negotiable unless an
-  intentional editorial change is being made.
-- **Don't** add modals. Inline-first, always. PRODUCT.md flags
-  modal-on-modal flows as Jira-ITSM heaviness.
-- **Don't** animate layout properties or add motion that doesn't encode
-  state. The 2-second polling refresh is the only "motion" the system has,
-  and that is informational, not decorative.
-- **Don't** wrap content in a generic container. The form is the one card.
-  Tables and stat lines stand on the bench directly.
+  template is explicitly prohibited; the totals footer is a plain text strip,
+  not a tile.
+- **Don't** add violet gradients, glassmorphic blur, sparkle / star icons, or
+  any "AI inside" iconography. smol-symphony runs AI agents but is not an AI
+  product. (PRODUCT.md anti-reference, verbatim.)
+- **Don't** add status pills whose colours don't map to distinct orchestrator
+  state. Five pairs, five real states. Status theater is banned.
+- **Don't** introduce `box-shadow`. Depth is tonal, plus the one panel that
+  slides in. If you reach for a shadow, add a fifth neutral step instead.
+- **Don't** use a `border-left` wider than `1px` as a *saturated status stripe*
+  on rows, cards, or alerts (the Linear/ITSM stripe pattern — impeccable's
+  absolute ban). Row status is a faint full-row tint, not a stripe. (Rendered
+  Markdown blockquotes use a 2px **neutral** Firm-Rule bar; that's typographic
+  quoting, not a status stripe.)
+- **Don't** use `#000` or `#fff` as text or background. The create button's
+  label is `#f4f6fb`, tinted toward the brand hue.
+- **Don't** introduce a web font. Both native stacks
+  (`ui-sans-serif, system-ui, sans-serif` and
+  `ui-monospace, …, monospace`) are non-negotiable unless an intentional
+  editorial change is being made.
+- **Don't** add a modal. The non-modal slide-in composer is the one sanctioned
+  edge panel; everything else is inline. No blocking dialogs, no modal-on-modal
+  ITSM flows, no scroll-locking backdrops.
+- **Don't** add motion that doesn't encode state. The panel slide, the ticker
+  collapse, hover affordances, and the 2s poll all mean something; decorative
+  animation does not belong.
+- **Don't** wrap content in a generic container. The slide-in panel is the one
+  card. Columns, rows, the health line, and the totals strip stand on the bench
+  directly.