# 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 ``. 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