Jason Woltje
a5ed260fbd
All checks were successful
ci/woodpecker/push/web Pipeline was successful
Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
64 lines
2.3 KiB
Markdown
64 lines
2.3 KiB
Markdown
# MS15 — Dashboard Shell & Design System
|
|
|
|
## Objective
|
|
|
|
Implement the dashboard.html reference design across the Mosaic Stack web app. Establish the design token system, app shell layout, shared components, and dashboard page.
|
|
|
|
## Design Reference
|
|
|
|
`/home/jwoltje/src/mosaic-stack-website/docs/designs/round-5/claude/01/dashboard.html`
|
|
|
|
## Key Architectural Decisions
|
|
|
|
1. **Theme approach**: CSS custom properties via `:root` + `[data-theme="light"]`. Tailwind configured to use these variables. ThemeProvider updated to set `data-theme` attribute on `<html>`.
|
|
2. **Logo placement**: Logo in full-width header (topbar), NOT in sidebar. User spec overrides reference design.
|
|
3. **Sidebar collapse**: Collapsible with icon-only mode. Hidden by default at mobile breakpoints. Hamburger button for small screens.
|
|
4. **Fonts**: Outfit (body) + Fira Code (mono). Loaded via `next/font/google`.
|
|
5. **Loading spinner**: Mosaic logo icon component with CSS rotation animation.
|
|
6. **Grain overlay**: Subtle noise texture via CSS pseudo-element, same as reference.
|
|
7. **Per-phase branches**: `feat/ms15-design-system`, `feat/ms15-shared-components`, `feat/ms15-dashboard-page`.
|
|
|
|
## Phases
|
|
|
|
### Phase 1: Foundation (Design System & App Shell)
|
|
|
|
- MS15-FE-001: Design token system overhaul
|
|
- MS15-FE-002: App shell grid layout
|
|
- MS15-FE-003: Sidebar component
|
|
- MS15-FE-004: Topbar/Header component
|
|
- MS15-FE-005: Responsive breakpoints
|
|
- MS15-FE-006: Loading spinner (Mosaic logo)
|
|
|
|
### Phase 2: Shared Components
|
|
|
|
- MS15-UI-001: packages/ui token alignment
|
|
- MS15-UI-002: Card, Badge, Button, Dot updates
|
|
- MS15-UI-003: MetricsStrip, ProgressBar, FilterTabs
|
|
- MS15-UI-004: SectionHeader, Table, LogLine
|
|
- MS15-UI-005: Terminal panel component
|
|
|
|
### Phase 3: Dashboard Page
|
|
|
|
- MS15-DASH-001: Metrics strip
|
|
- MS15-DASH-002: Active Orchestrator Sessions
|
|
- MS15-DASH-003: Quick Actions
|
|
- MS15-DASH-004: Activity Feed
|
|
- MS15-DASH-005: Token Budget
|
|
|
|
### Phase 4: Quality
|
|
|
|
- MS15-QA-001: Baseline tests
|
|
- MS15-QA-002: Situational tests
|
|
- MS15-DOC-001: Documentation
|
|
|
|
## Progress Log
|
|
|
|
- Session started: 2026-02-22
|
|
- Status: Bootstrap phase
|
|
|
|
## Risks
|
|
|
|
- Large surface area: globals.css change affects all existing pages
|
|
- packages/ui color system mismatch requires careful migration
|
|
- Existing pages (login, auth) may need adjustment after token changes
|