# Dashboard visual directions — static HTML samplers

Three standalone, fully self-contained mocks of the SAME dashboard.
No frameworks, no build step, no external assets — embedded CSS only
(the brand emblem rides inline as a downscaled PNG data URI).
Open directly via `file://`. Each supports light AND dark via
`prefers-color-scheme` (verify by toggling devtools scheme emulation).

- `dashboard-primer.html` — 1 Curated Primer (light-first)
- `dashboard-control.html` — 2 Control Room (dark-first)
- `dashboard-swiss.html` — 3 Swiss Flat (light-first)
- `dashboard-current.html` — 4 Current quieted (theme-faithful)

All four carry IDENTICAL content structure (the `<body>` markup is
byte-identical apart from the sampler number/label), so the comparison
is purely visual.

## Header

Every direction keeps the real app's chrome: the emblem + ClankerSaddle
brand at the app's original `height: 8rem` (with its `-0.2rem`
margin-block trim), and the three nav groups from `main.html` — Work
(Dashboard, Tasks, Goals, Chats), Library (Projects, Rules, Stacks,
Discoveries), Admin (Saddles, Users, Model) — plus the Account menu.
Pure CSS `<details>` dropdowns, no JS. Brand and nav are centre-aligned
on one axis (verified via engine geometry: brand/emblem/nav/summary
mids equal to 0.1px in all three directions). The emblem is embedded
per file as a 256px, 64-colour-quantised PNG data URI (~31 KB base64)
so the samplers stay standalone while rendering crisp at 8rem.

## Content model (per the approved hierarchy)

- Zone 1 (top): the advisor entry box ONLY — heading and description
  sit INSIDE the composer card, above the textarea; model/snapshot
  hint and Start chat below. The front page never shows chat
  transcripts themselves (review decision). A single quiet link to
  the chats list.
- Zone 2 (one small scroll below): "Needs a human" items tiered ABOVE
  queue health — a completion awaiting review, a turn-cap parked task
  to wake, an open question; then running / stuck / queued counts and
  saddle states.
- Zone 3 (ambient, reduced density): notes, latest discoveries,
  active tasks table and activity timeline — ALL sections start
  collapsed, rendered as plain ruled expander rows with NO card
  chrome (no background, no border box, no radius).

Sample data uses the real app's vocabulary: statuses
draft / queued / assigned / working / blocked / review_requested /
suspended / done / failed; saddle states idle / busy / offline;
blocks review / question; turn-cap parks. Task titles reference real
recent fleet work. Sections are deliberately uneven — one saddle
offline, one task with no latest progress, a sparse notes list —
because perfection reads fake.

## Direction 1 — Curated Primer

GitHub/Primer lineage, disciplined, light default. Cards on a sunken
page, 8px grid, 8px radius, tinted status pills, the existing blue as
accent. The natural evolution of today's `app.css`.

:root (light):
```
--surface-sunken #f6f8fa   --surface #ffffff    --surface-inset #eff2f5
--ink #1f2328               --ink-muted #59636e  --ink-faint #6e7681
--line #d1d9e0              --line-soft #e4eaef
--accent #0969da            --accent-surface #ddf4ff
--success #1a7f37           --warning #9a6700    --danger #cf222e
--radius 8px
```
Dark variant: `--surface-sunken #0d1117`, `--surface #151b23`,
`--surface-inset #1c2430`, `--ink #e6edf3`, `--ink-muted #9198a1`,
`--ink-faint #6e7681`, `--line #3d444d`, `--line-soft #262c36`,
`--accent #4493f8`, `--accent-surface #121d2f`, `--success #3fb950`,
`--warning #d29922`, `--danger #f85149`.

Status = tinted pill pairs: working/blocked/queued on yellow tints,
done/progress green tints, failed red tint, review orange tint,
question blue tint, parked/suspended neutral. Type: system-ui 15px.
Shadows: none (1px borders only).

## Direction 2 — Control Room

Dark-first, mono-forward, mission-console restraint. Quiet cold
neutrals; status colour carries the meaning; labels and numerals in
mono. Status reads as small outline capsules in the status hue —
colour IS the signal, fill stays quiet. Light variant is a working
console on white, not an afterthought.

:root (dark, default):
```
--bg #0f1317   --surface #151a20   --raise #1c232b
--ink #c9d4de  --dim #7e8b98       --faint #525e6a
--rule #262e38 --rule-hi #394450
--run #4cc38a  --warn #f5b452  --crit #ef6460  --info #58a6ff
--accent #58a6ff  --radius 4px
--mono ui-monospace …  --sans system-ui …
```
Light variant: `--bg #eef1f4`, `--surface #ffffff`, `--raise #f4f6f8`,
`--ink #1b2530`, `--dim #54626f`, `--faint #75828e`, `--rule #d7dee4`,
`--rule-hi #b4c0ca`, `--run #10735a`, `--warn #8f5b00`,
`--crit #c3362f`, `--info #0a5dc2`.

Status semantics: run=green (running/done/busy), warn=amber
(queued/blocked/review/stuck), crit=red (failed), info=blue
(interactive/question). Type: sans 14px body, mono for labels,
metrics, meta and times. Radius 4px; no shadows; saddle states are
tiny square lamps (filled / outline / dashed).

## Direction 3 — Swiss Flat

Strict grid, typographic hierarchy, one strong accent, no shadows, no
ornament. Structure lines are INK, not grey; the frame is the design.
A hard left rail carries brand + zone labels; metrics are oversized
light numerals (weight 200). Status is typography: weight and colour
in near-black / greys, with red reserved for failure and the accent.

:root (light):
```
--paper #fdfdfb  --ink #111111  --grey-1 #6b6b6b  --grey-2 #82827e
--rule #111111   --rule-thin #d9d9d6
--red #e2231a    --radius 0
--font "Helvetica Neue" …  --mono ui-monospace …
```
Dark variant: `--paper #121212`, `--ink #f0f0ec`, `--grey-1 #a8a8a4`,
`--grey-2 #7c7c78`, `--rule #f0f0ec`, `--rule-thin #2e2e2c`,
`--red #ff4438`.

Status: failed and the single accent share red; everything else is
typographic (bold caps tags, question underlined in ink). Links are
ink with a thin grey underline; red appears on hover and on the
primary button. Radius 0, no shadows, 2px structural rules.

## Direction 4 — Current quieted (theme-faithful)

The control sample: today's theme kept as close as possible — the
same tokens as `app.css` (`#f6f8fa` sunken page, `#ffffff` cards,
`#0969da` accent, `1a7f37/9a6700/cf222e` status, 8px radius, 8px
grid, system-ui 15px), the buttony nav dropdown menus, bordered cards
with tinted pill badges, `details` sections rendered as cards, and the
full-grid bordered tables. Only the LAYOUT is quieted:

- one column at the app's real 64rem (no second sidebar column),
- "Needs a human" as three rows inside ONE card instead of a card
  per item,
- section headings reduced to a single small heading each — no
  stacked h2 + h3 pairs, no explanatory paragraphs between sections,
- ambient sections are plain ruled expanders (the app's
  details-as-cards chrome removed per review),
- the advisor hero is a single card carrying its own heading and
  description, matching `home.html`'s token recipe.

Component styles verified identical to the live `app.css` via
computed-style comparison (radius, shadow, paddings, colours, fonts).
A dark set is included so it honours `prefers-color-scheme` like its
siblings; the light values are the faithful ones.

## Anti-slop checklist (honoured by all four)

No purple-blue gradients, no glassmorphism, no oversized drop
shadows, no marketing hero, no emoji decoration, no fake-perfect
symmetry. Status palettes avoid the blue/purple wash; accent use is
rationed.

## Verification performed

- Files open standalone via `file://` (Chromium 154 headless).
- Light/dark flip verified per file via forced scheme: page
  backgrounds and every status colour change to the intended tokens;
  content extents identical between schemes (no reflow breakage).
- The four `<body>` blocks verified identical modulo sampler label.
- Nav dropdowns verified open (per-direction probe renders); emblem
  verified visible in both schemes in all four directions, rendered
  at the app's original 8rem height; brand/nav vertical alignment
  verified equal via getBoundingClientRect mids.
- Direction 4 verified component-faithful to `app.css` via computed
  styles (radius/shadow/padding/colours/fonts all equal).
- 390px mobile: no horizontal overflow; all zones render.