mosaic/stack
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

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

Merged
jason.woltje merged 6 commits from feat/ms15-design-system into main 2026-02-22 20:57:06 +00:00
Conversation 0 Commits 6 Files Changed 15 +2451 -313
jason.woltje commented 2026-02-22 20:56:43 +00:00
Owner
Copy Link

Summary

  • MS15-FE-001: Design token system overhaul — replaced RGB-triplet tokens with Mosaic hex-based CSS custom properties (dark-first, light via ), added Outfit + Fira Code fonts
  • MS15-FE-002: App shell grid layout — CSS Grid with sidebar + full-width header + main content area
  • MS15-FE-003: Full sidebar component — 4 nav groups (Overview, Workspace, Operations, System), collapsible with icon-only mode, user card footer with avatar/initials, SidebarContext for state management
  • MS15-FE-004: Full header/topbar — Mosaic logo, breadcrumb, search bar, system status indicator, terminal toggle, notification bell, theme toggle, user avatar dropdown with sign-out
  • MS15-FE-005: Responsive layout — mobile sidebar overlay with backdrop, hamburger button, matchMedia breakpoint detection (mobile < 768px, tablet 768-1023px, desktop >= 1024px)
  • MS15-FE-006: Mosaic logo loading spinner — site-wide MosaicLogo + MosaicSpinner components with rotation animation

QA Evidence

  • Lint: 0 errors, 0 warnings
  • TypeScript: 0 errors
  • Build: passes clean

Test plan

  • Verify dark theme renders correctly (default)
  • Verify light theme toggle works
  • Verify sidebar navigation links work
  • Verify sidebar collapse/expand toggle
  • Verify mobile hamburger opens sidebar overlay
  • Verify mobile backdrop click closes sidebar
  • Verify user avatar dropdown opens/closes
  • Verify sign out works from dropdown
  • Verify loading spinner shows on auth check

Closes #448

🤖 Generated with Claude Code

## Summary - **MS15-FE-001**: Design token system overhaul — replaced RGB-triplet tokens with Mosaic hex-based CSS custom properties (dark-first, light via ), added Outfit + Fira Code fonts - **MS15-FE-002**: App shell grid layout — CSS Grid with sidebar + full-width header + main content area - **MS15-FE-003**: Full sidebar component — 4 nav groups (Overview, Workspace, Operations, System), collapsible with icon-only mode, user card footer with avatar/initials, SidebarContext for state management - **MS15-FE-004**: Full header/topbar — Mosaic logo, breadcrumb, search bar, system status indicator, terminal toggle, notification bell, theme toggle, user avatar dropdown with sign-out - **MS15-FE-005**: Responsive layout — mobile sidebar overlay with backdrop, hamburger button, matchMedia breakpoint detection (mobile < 768px, tablet 768-1023px, desktop >= 1024px) - **MS15-FE-006**: Mosaic logo loading spinner — site-wide MosaicLogo + MosaicSpinner components with rotation animation ## QA Evidence - Lint: 0 errors, 0 warnings - TypeScript: 0 errors - Build: passes clean ## Test plan - [ ] Verify dark theme renders correctly (default) - [ ] Verify light theme toggle works - [ ] Verify sidebar navigation links work - [ ] Verify sidebar collapse/expand toggle - [ ] Verify mobile hamburger opens sidebar overlay - [ ] Verify mobile backdrop click closes sidebar - [ ] Verify user avatar dropdown opens/closes - [ ] Verify sign out works from dropdown - [ ] Verify loading spinner shows on auth check Closes #448 🤖 Generated with [Claude Code](https://claude.com/claude-code)
jason.woltje added 6 commits 2026-02-22 20:56:43 +00:00
chore(orchestrator): Bootstrap MS15-DashboardShell milestone 2a6d02b46b 
- 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>
feat(web): add MosaicLogo and MosaicSpinner components (MS15-FE-006)
All checks were successful
ci/woodpecker/push/web Pipeline was successful
Details
e615fa80a5 
- Add MosaicLogo component with 5-element Mosaic brand icon (4 corner
  squares + center circle), using CSS custom properties for theme-aware
  colors and optional rotation animation
- Add MosaicSpinner wrapper that enables spinning and supports optional
  label and full-page overlay modes
- Replace generic CSS spinner in authenticated layout loading state with
  MosaicSpinner for consistent brand identity

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
chore(orchestrator): update tasks.md — MS15-FE-001, FE-002, FE-006 done 709348f07c 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
feat(web): implement full sidebar and header components (MS15-FE-003, MS15-FE-004)
All checks were successful
ci/woodpecker/push/web Pipeline was successful
Details
04f99183f9 
Sidebar: collapsible with icon-only mode, 4 nav groups (Overview, Workspace,
Operations, System), SVG icons matching reference, badges, user card footer
with avatar/initials, SidebarContext for collapse state.

Header: search bar, system status indicator, terminal toggle, notification
bell with badge, user avatar dropdown with Profile/Settings/Sign Out,
breadcrumb navigation. Removes standalone LogoutButton.

Layout updated to wrap with SidebarProvider, dynamic --sidebar-w on collapse.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
feat(web): add responsive layout with mobile sidebar overlay (MS15-FE-005)
All checks were successful
ci/woodpecker/push/web Pipeline was successful
Details
28620b2d70 
Mobile (< 768px): sidebar hidden, hamburger button in header, sidebar
slides in as fixed overlay with backdrop.

Tablet (768-1023px): sidebar toggleable via hamburger, pushes content.

Desktop (>= 1024px): sidebar always visible, no hamburger button.

SidebarContext extended with mobileOpen state and isMobile detection
via matchMedia listener.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
chore(orchestrator): update tasks.md — Phase 1 complete (FE-003, FE-004, FE-005, QA-001) 8802e5b4fd 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
jason.woltje merged commit a5ed260fbd into main 2026-02-22 20:57:06 +00:00
jason.woltje deleted branch feat/ms15-design-system 2026-02-22 20:57:07 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
ai
AI/LLM integration
 api
Backend/API work
 api
auth
Authentication
 database
database
Database/schema work
 devops
Docker/deployment
 docs
Documentation
 frontend
graph
knowledge-module
migration
Data migration
 orchestrator
Orchestrator service (apps/orchestrator/)
 p0
Critical priority
 p1
High priority
 p2
Medium priority
 p3
Low priority
 performance
Performance work
 phase-1
phase-2
phase-3
phase-4
phase-5
plugin
MoltBot plugin work
 search
security
Security-related
 setup
Initial setup
 testing
Testing/QA
 web
Frontend work
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
jason.woltje
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: mosaic/stack#451
Delete Branch "feat/ms15-design-system"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?