# 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
