chore(orchestrator): Bootstrap MS15-DashboardShell milestone

- Created PRD.md with full platform requirements and milestone plan - Updated tasks.md with 18 tasks across 4 phases - Created scratchpad for ms15 orchestration - Issues #448, #449, #450 created in Gitea - Milestone: MS15-DashboardShell (0.0.15) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-22 14:28:03 -06:00
parent 9b5c15ca56
commit 2a6d02b46b
3 changed files with 327 additions and 0 deletions
--- a/docs/scratchpads/ms15-dashboard-shell.md
+++ b/docs/scratchpads/ms15-dashboard-shell.md
@@ -0,0 +1,63 @@
+# 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