mosaic/stack
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases 2 Wiki Activity
Files
fix/ms22-missing-authmodule-imports
stack/docs/scratchpads/ms15-dashboard-shell.md
Jason Woltje a5ed260fbd
All checks were successful
ci/woodpecker/push/web Pipeline was successful
Details
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

2.3 KiB
Raw Permalink Blame History

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
Reference in New Issue View Git Blame Copy Permalink