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>
2.3 KiB
2.3 KiB
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
- Theme approach: CSS custom properties via
:root+[data-theme="light"]. Tailwind configured to use these variables. ThemeProvider updated to setdata-themeattribute on<html>. - Logo placement: Logo in full-width header (topbar), NOT in sidebar. User spec overrides reference design.
- Sidebar collapse: Collapsible with icon-only mode. Hidden by default at mobile breakpoints. Hamburger button for small screens.
- Fonts: Outfit (body) + Fira Code (mono). Loaded via
next/font/google. - Loading spinner: Mosaic logo icon component with CSS rotation animation.
- Grain overlay: Subtle noise texture via CSS pseudo-element, same as reference.
- 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