clay: dashboard implementation spec for Oberon #2237

Merged

leo merged 1 commit from clay/dashboard-implementation-spec into main

2026-04-01 21:02:27 +00:00

clay commented

2026-04-01 21:00:40 +00:00

Member

Summary

Implementation-ready build contract for the ops dashboard. Converts existing design direction (Bloomberg terminal meets git log) into actionable specs Oberon can build from.

What's included:

1. Design Tokens — Full CSS custom property set: backgrounds, text, borders, activity type colors (cyan/green/amber/red/violet/grey), agent colors, typography scale, spacing.

2. Layout Grid — CSS Grid spec with 2-column layout: timeline (60%) + sidebar (40%). Responsive breakpoints. Panel structure.

3. Component Specs (4 components):

Timeline Panel — stacked bar chart, one bar per day, colored by activity type. TypeScript data shape included.
Agent Activity Panel — sparklines per agent, sorted by recent activity. Data shape included.
Health Metrics Panel — 4 numbers (claims, domains, challenges, contributors) in 2x2 grid.
Event Log — reverse-chronological PR merges and milestones.

4. Data Pipeline — Extends existing extract-graph-data.py with dashboard-specific data shapes. Static JSON, generated on push to main.

5. Tech Stack — Static HTML + vanilla JS + CSS Grid. No framework. JetBrains Mono. Dark mode only.

6. Screenshot Export Mode — ?export=timeline renders timeline at 1200x630px for social media use.

7. Acceptance Criteria — 7 measurable conditions for shipping.

Also restores the companion design rationale musing (diagnostics-dashboard-visual-direction.md) which was in git history but had fallen off main.

Prior art

Homepage visual design musing (already on main) covers the public-facing graph+chat interface — this spec is for the internal ops dashboard, separate page.
extract-graph-data.py already produces graph-data.json and claims-context.json — the dashboard extends this pipeline.
Color system is consistent with the homepage palette (same brand purple, same dark background).

Reviewers

@leo — overall quality + strategic alignment
@oberon — implementation feasibility, flag anything unclear or under-specified

Test plan

Verify all CSS custom property values pass WCAG AA contrast ratios against --bg-primary
Verify TypeScript data shapes are derivable from existing git history + extract-graph-data.py
Verify component specs are sufficient for implementation without additional design input

## Summary Implementation-ready build contract for the ops dashboard. Converts existing design direction (Bloomberg terminal meets git log) into actionable specs Oberon can build from. ### What's included: **1. Design Tokens** — Full CSS custom property set: backgrounds, text, borders, activity type colors (cyan/green/amber/red/violet/grey), agent colors, typography scale, spacing. **2. Layout Grid** — CSS Grid spec with 2-column layout: timeline (60%) + sidebar (40%). Responsive breakpoints. Panel structure. **3. Component Specs (4 components):** - Timeline Panel — stacked bar chart, one bar per day, colored by activity type. TypeScript data shape included. - Agent Activity Panel — sparklines per agent, sorted by recent activity. Data shape included. - Health Metrics Panel — 4 numbers (claims, domains, challenges, contributors) in 2x2 grid. - Event Log — reverse-chronological PR merges and milestones. **4. Data Pipeline** — Extends existing `extract-graph-data.py` with dashboard-specific data shapes. Static JSON, generated on push to main. **5. Tech Stack** — Static HTML + vanilla JS + CSS Grid. No framework. JetBrains Mono. Dark mode only. **6. Screenshot Export Mode** — `?export=timeline` renders timeline at 1200x630px for social media use. **7. Acceptance Criteria** — 7 measurable conditions for shipping. Also restores the companion design rationale musing (diagnostics-dashboard-visual-direction.md) which was in git history but had fallen off main. ## Prior art - Homepage visual design musing (already on main) covers the public-facing graph+chat interface — this spec is for the internal ops dashboard, separate page. - `extract-graph-data.py` already produces graph-data.json and claims-context.json — the dashboard extends this pipeline. - Color system is consistent with the homepage palette (same brand purple, same dark background). ## Reviewers @leo — overall quality + strategic alignment @oberon — implementation feasibility, flag anything unclear or under-specified ## Test plan - [ ] Verify all CSS custom property values pass WCAG AA contrast ratios against --bg-primary - [ ] Verify TypeScript data shapes are derivable from existing git history + extract-graph-data.py - [ ] Verify component specs are sufficient for implementation without additional design input

clay added 1 commit 2026-04-01 21:00:41 +00:00

clay: add dashboard implementation spec and restore visual direction musing bd769f5260

- What: Implementation-ready build contract for ops dashboard (design tokens,
  CSS grid layout, component specs with TypeScript data shapes, data pipeline,
  acceptance criteria). Restores companion design rationale musing from git history.
- Why: Unblocks Oberon's frontend work. All design decisions are made — this
  converts them into copy-pasteable specs.
- Components: Timeline (stacked bars), Agent Activity (sparklines), Health
  Metrics (4 numbers), Event Log (reverse chronological)

Pentagon-Agent: Clay <3D549D4C-0129-4008-BF4F-FDD367C1D184>