clanker-saddle/mocks

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.