feat(web): MS15 Phase 1 — Design System & App Shell (#451)

Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
2026-02-22 20:57:06 +00:00
parent 9b5c15ca56
commit a5ed260fbd
15 changed files with 2451 additions and 313 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
--- a/docs/scratchpads/ms15-fe-006-mosaic-logo-spinner.md
+++ b/docs/scratchpads/ms15-fe-006-mosaic-logo-spinner.md
@@ -0,0 +1,45 @@
+# MS15-FE-006: MosaicLogo and MosaicSpinner Components
+
+## Task
+
+Create Mosaic logo icon component and spinner wrapper for use as the site-wide loading indicator.
+
+## Files to Create
+
+1. `apps/web/src/components/ui/MosaicLogo.tsx` — 5-element logo icon
+2. `apps/web/src/components/ui/MosaicSpinner.tsx` — spinner wrapper
+
+## Files to Modify
+
+1. `apps/web/src/app/(authenticated)/layout.tsx` — replace loading spinner (isLoading block only)
+
+## Design
+
+- 4 corner squares: blue (TL), purple (TR), teal (BR), amber (BL)
+- 1 center circle: pink
+- CSS vars: --ms-blue-500, --ms-purple-500, --ms-teal-500, --ms-amber-500, --ms-pink-500
+- Animation: linear 360deg rotation
+
+## Props
+
+### MosaicLogo
+
+- size?: number (default 36)
+- spinning?: boolean (default false)
+- spinDuration?: number (default 20) seconds
+- className?: string
+
+### MosaicSpinner
+
+- Wraps MosaicLogo with spinning=true
+- label?: string — optional text label below
+- fullPage?: boolean — center on screen
+
+## Status
+
+- [x] Scratchpad created
+- [ ] MosaicLogo.tsx created
+- [ ] MosaicSpinner.tsx created
+- [ ] layout.tsx updated
+- [ ] Lint clean
+- [ ] Committed and pushed