feat(layout): finalize p01 and p02 changes

Complete UI foundation and app layout implementation, stabilize container health checks, and archive both OpenSpec changes after verification.

openspec/changes/archive/2026-02-18-p01-ui-foundation/tasks.md

@@ -0,0 +1,86 @@
+# Tasks: UI Foundation
+
+## Phase 1: Install Dependencies
+
+- [x] 1.1 Install Lucide icons: `npm install lucide-svelte`
+- [x] 1.2 Verify installation in package.json
+- [x] 1.3 Test import in a test file: `import { Menu } from 'lucide-svelte'`
+
+## Phase 2: Create Types
+
+- [x] 1.4 Create `src/lib/types/` directory if not exists
+- [x] 1.5 Create `src/lib/types/layout.ts`
+- [x] 1.6 Define `SidebarState` type
+- [x] 1.7 Define `NavItem` interface
+- [x] 1.8 Define `NavSection` interface
+- [x] 1.9 Define `Theme` type
+- [x] 1.10 Export all types
+
+## Phase 3: Create Stores
+
+### Layout Store
+- [x] 1.11 Create `src/lib/stores/layout.ts`
+- [x] 1.12 Implement `sidebarState` writable with localStorage persistence
+- [x] 1.13 Implement `theme` writable with localStorage persistence
+- [x] 1.14 Implement `toggleSidebar()` function
+- [x] 1.15 Implement `setSidebarState()` function
+- [x] 1.16 Implement `toggleTheme()` function
+- [x] 1.17 Implement `setTheme()` function
+- [x] 1.18 Add system preference detection for initial theme
+
+### Period Store
+- [x] 1.19 Create `src/lib/stores/period.ts`
+- [x] 1.20 Implement `selectedPeriod` writable with localStorage persistence
+- [x] 1.21 Create `selectedMonth` derived store
+- [x] 1.22 Create `selectedDate` derived store
+- [x] 1.23 Implement `setPeriod()` function
+- [x] 1.24 Implement `previousMonth()` function
+- [x] 1.25 Implement `nextMonth()` function
+- [x] 1.26 Implement `currentMonth()` function
+
+## Phase 4: Create Navigation Config
+
+- [x] 1.27 Create `src/lib/config/` directory if not exists
+- [x] 1.28 Create `src/lib/config/navigation.ts`
+- [x] 1.29 Define PLANNING section (Dashboard, Team, Projects, Allocations, Actuals)
+- [x] 1.30 Define REPORTS section (Forecast, Utilization, Costs, Variance, Allocation Matrix)
+- [x] 1.31 Define ADMIN section with `roles: ['superuser']`
+- [x] 1.32 Export `navigationSections` array
+
+## Phase 5: Theme System
+
+- [x] 1.33 Update `src/app.css` with theme CSS variables
+- [x] 1.34 Add sidebar width CSS variables
+- [x] 1.35 Add theme color-scheme definitions
+- [x] 1.36 Test theme switching in browser console
+
+## Phase 6: Testing
+
+### Unit Tests
+- [x] 1.37 Write test: layoutStore initializes with default values
+- [x] 1.38 Write test: layoutStore.toggleSidebar cycles through states
+- [x] 1.39 Write test: layoutStore theme toggle works
+- [x] 1.40 Write test: periodStore initializes with current month
+- [x] 1.41 Write test: periodStore.previousMonth decrements correctly
+- [x] 1.42 Write test: periodStore.nextMonth increments correctly
+- [x] 1.43 Write test: navigationSections has correct structure
+
+### Component Tests
+- [x] 1.44 Create test: Lucide icon renders correctly
+
+## Phase 7: Verification
+
+- [x] 1.45 Run `npm run check` - no type errors
+- [x] 1.46 Run `npm run test:unit` - all tests pass
+- [x] 1.47 Verify stores persist to localStorage
+- [x] 1.48 Verify theme applies to document
+
+## Commits
+
+1. `feat(ui): Install lucide-svelte for icon library`
+2. `feat(ui): Add layout types (SidebarState, NavItem, NavSection, Theme)`
+3. `feat(ui): Create layoutStore for sidebar state and theme management`
+4. `feat(ui): Create periodStore for global month/period selection`
+5. `feat(ui): Add navigation configuration for sidebar menu`
+6. `feat(ui): Add CSS variables for theme and layout`
+7. `test(ui): Add unit tests for layout and period stores`

openspec/changes/archive/2026-02-18-p02-app-layout/tasks.md

@@ -0,0 +1,132 @@
+# Tasks: App Layout
+
+## Phase 1: Create Layout Components Directory
+
+- [x] 2.1 Create `src/lib/components/layout/` directory
+
+## Phase 2: Sidebar Components
+
+### SidebarItem
+- [x] 2.2 Create `SidebarItem.svelte`
+- [x] 2.3 Add icon prop (Lucide component)
+- [x] 2.4 Add label prop
+- [x] 2.5 Add href prop
+- [x] 2.6 Add active state styling (current path matching)
+- [x] 2.7 Handle collapsed state (icon only, tooltip on hover)
+- [x] 2.8 Write component test: renders with icon and label
+
+### SidebarSection
+- [x] 2.9 Create `SidebarSection.svelte`
+- [x] 2.10 Add section prop (NavSection type)
+- [x] 2.11 Add expanded prop (for collapsed sidebar)
+- [x] 2.12 Render section title
+- [x] 2.13 Render SidebarItem for each item
+- [x] 2.14 Write component test: renders all items
+
+### Sidebar
+- [x] 2.15 Create `Sidebar.svelte`
+- [x] 2.16 Import and use navigationSections
+- [x] 2.17 Import layoutStore for state
+- [x] 2.18 Implement three visual states (expanded, collapsed, hidden)
+- [x] 2.19 Add toggle button in header
+- [x] 2.20 Add logo/brand in header
+- [x] 2.21 Implement role-based section visibility
+- [x] 2.22 Add dark mode toggle in footer
+- [x] 2.23 Add keyboard shortcut (Cmd/Ctrl + \)
+- [x] 2.24 Implement CSS transitions
+- [x] 2.25 Write component test: toggle state works
+- [x] 2.26 Write component test: role-based visibility
+
+## Phase 3: TopBar Components
+
+### UserMenu
+- [x] 2.27 Create `UserMenu.svelte` (migrate from Navigation.svelte)
+- [x] 2.28 Import authStore for user info
+- [x] 2.29 Add dropdown with user name/avatar
+- [x] 2.30 Add logout action
+- [x] 2.31 Style with DaisyUI dropdown
+
+### MonthSelector
+- [x] 2.32 Create `MonthSelector.svelte`
+- [x] 2.33 Import periodStore
+- [x] 2.34 Display current month (format: Feb 2026)
+- [x] 2.35 Add dropdown with month options (-6 to +6 months)
+- [x] 2.36 Add Previous/Today/Next quick actions
+- [x] 2.37 Style with DaisyUI dropdown
+- [x] 2.38 Write component test: selection updates store
+
+### Breadcrumbs
+- [x] 2.39 Create `Breadcrumbs.svelte`
+- [x] 2.40 Import $page store for current path
+- [x] 2.41 Implement generateBreadcrumbs function
+- [x] 2.42 Render Home icon for root
+- [x] 2.43 Render segments as links
+- [x] 2.44 Style last item as current (no link)
+- [x] 2.45 Write component test: generates correct crumbs
+
+### TopBar
+- [x] 2.46 Create `TopBar.svelte`
+- [x] 2.47 Import Breadcrumbs, MonthSelector, UserMenu
+- [x] 2.48 Add hamburger toggle for mobile
+- [x] 2.49 Implement sticky positioning
+- [x] 2.50 Style with DaisyUI
+- [x] 2.51 Write component test: renders all components
+
+## Phase 4: AppLayout
+
+- [x] 2.52 Create `AppLayout.svelte`
+- [x] 2.53 Import Sidebar, TopBar
+- [x] 2.54 Add slot for page content
+- [x] 2.55 Implement flex layout (sidebar + main content)
+- [x] 2.56 Adjust main content margin based on sidebar state
+- [x] 2.57 Handle responsive behavior (mobile drawer)
+- [x] 2.58 Write component test: renders children
+- [x] 2.59 Write component test: sidebar toggle affects layout
+
+## Phase 5: Route Integration
+
+- [x] 2.60 Update `src/routes/+layout.svelte`
+- [x] 2.61 Add conditional AppLayout wrapper
+- [x] 2.62 Define publicPages array (['/login', '/auth'])
+- [x] 2.63 Test: login page has NO sidebar
+- [x] 2.64 Test: dashboard page has sidebar
+
+## Phase 6: Responsive & Mobile
+
+- [x] 2.65 Test: Sidebar hidden by default on mobile
+- [x] 2.66 Test: Hamburger shows sidebar on mobile
+- [x] 2.67 Test: Sidebar overlays content on mobile (not push)
+- [x] 2.68 Test: Clicking outside closes sidebar on mobile
+- [x] 2.69 Add backdrop overlay for mobile drawer
+
+## Phase 7: E2E Tests
+
+- [x] 2.70 E2E test: Login redirects to dashboard with sidebar
+- [x] 2.71 E2E test: Sidebar toggle works
+- [x] 2.72 E2E test: Theme toggle works
+- [x] 2.73 E2E test: Month selector updates period store
+- [x] 2.74 E2E test: Breadcrumbs reflect current route
+
+## Phase 8: Verification
+
+- [x] 2.75 Run `npm run check` - no type errors
+- [x] 2.76 Run `npm run test:unit` - all component tests pass
+- [x] 2.77 Run `npm run test:e2e` - all E2E tests pass
+- [x] 2.78 Manual test: All breakpoints (320px, 768px, 1024px, 1280px)
+- [x] 2.79 Manual test: Dark mode toggle
+- [x] 2.80 Manual test: Keyboard shortcut (Cmd/Ctrl + \)
+
+## Commits
+
+1. `feat(layout): Create SidebarItem component with active state`
+2. `feat(layout): Create SidebarSection component`
+3. `feat(layout): Create Sidebar with three states and theme toggle`
+4. `feat(layout): Create UserMenu component (migrated from Navigation)`
+5. `feat(layout): Create MonthSelector with period store integration`
+6. `feat(layout): Create Breadcrumbs with auto-generation`
+7. `feat(layout): Create TopBar with all components`
+8. `feat(layout): Create AppLayout wrapper component`
+9. `feat(layout): Integrate AppLayout into root layout`
+10. `feat(layout): Add responsive mobile drawer behavior`
+11. `test(layout): Add component tests for all layout components`
+12. `test(e2e): Add E2E tests for layout functionality`

openspec/changes/p01-ui-foundation/tasks.md

@@ -1,86 +0,0 @@
-# Tasks: UI Foundation
-
-## Phase 1: Install Dependencies
-
-- [ ] 1.1 Install Lucide icons: `npm install lucide-svelte`
-- [ ] 1.2 Verify installation in package.json
-- [ ] 1.3 Test import in a test file: `import { Menu } from 'lucide-svelte'`
-
-## Phase 2: Create Types
-
-- [ ] 1.4 Create `src/lib/types/` directory if not exists
-- [ ] 1.5 Create `src/lib/types/layout.ts`
-- [ ] 1.6 Define `SidebarState` type
-- [ ] 1.7 Define `NavItem` interface
-- [ ] 1.8 Define `NavSection` interface
-- [ ] 1.9 Define `Theme` type
-- [ ] 1.10 Export all types
-
-## Phase 3: Create Stores
-
-### Layout Store
-- [ ] 1.11 Create `src/lib/stores/layout.ts`
-- [ ] 1.12 Implement `sidebarState` writable with localStorage persistence
-- [ ] 1.13 Implement `theme` writable with localStorage persistence
-- [ ] 1.14 Implement `toggleSidebar()` function
-- [ ] 1.15 Implement `setSidebarState()` function
-- [ ] 1.16 Implement `toggleTheme()` function
-- [ ] 1.17 Implement `setTheme()` function
-- [ ] 1.18 Add system preference detection for initial theme
-
-### Period Store
-- [ ] 1.19 Create `src/lib/stores/period.ts`
-- [ ] 1.20 Implement `selectedPeriod` writable with localStorage persistence
-- [ ] 1.21 Create `selectedMonth` derived store
-- [ ] 1.22 Create `selectedDate` derived store
-- [ ] 1.23 Implement `setPeriod()` function
-- [ ] 1.24 Implement `previousMonth()` function
-- [ ] 1.25 Implement `nextMonth()` function
-- [ ] 1.26 Implement `currentMonth()` function
-
-## Phase 4: Create Navigation Config
-
-- [ ] 1.27 Create `src/lib/config/` directory if not exists
-- [ ] 1.28 Create `src/lib/config/navigation.ts`
-- [ ] 1.29 Define PLANNING section (Dashboard, Team, Projects, Allocations, Actuals)
-- [ ] 1.30 Define REPORTS section (Forecast, Utilization, Costs, Variance, Allocation Matrix)
-- [ ] 1.31 Define ADMIN section with `roles: ['superuser']`
-- [ ] 1.32 Export `navigationSections` array
-
-## Phase 5: Theme System
-
-- [ ] 1.33 Update `src/app.css` with theme CSS variables
-- [ ] 1.34 Add sidebar width CSS variables
-- [ ] 1.35 Add theme color-scheme definitions
-- [ ] 1.36 Test theme switching in browser console
-
-## Phase 6: Testing
-
-### Unit Tests
-- [ ] 1.37 Write test: layoutStore initializes with default values
-- [ ] 1.38 Write test: layoutStore.toggleSidebar cycles through states
-- [ ] 1.39 Write test: layoutStore theme toggle works
-- [ ] 1.40 Write test: periodStore initializes with current month
-- [ ] 1.41 Write test: periodStore.previousMonth decrements correctly
-- [ ] 1.42 Write test: periodStore.nextMonth increments correctly
-- [ ] 1.43 Write test: navigationSections has correct structure
-
-### Component Tests
-- [ ] 1.44 Create test: Lucide icon renders correctly
-
-## Phase 7: Verification
-
-- [ ] 1.45 Run `npm run check` - no type errors
-- [ ] 1.46 Run `npm run test:unit` - all tests pass
-- [ ] 1.47 Verify stores persist to localStorage
-- [ ] 1.48 Verify theme applies to document
-
-## Commits
-
-1. `feat(ui): Install lucide-svelte for icon library`
-2. `feat(ui): Add layout types (SidebarState, NavItem, NavSection, Theme)`
-3. `feat(ui): Create layoutStore for sidebar state and theme management`
-4. `feat(ui): Create periodStore for global month/period selection`
-5. `feat(ui): Add navigation configuration for sidebar menu`
-6. `feat(ui): Add CSS variables for theme and layout`
-7. `test(ui): Add unit tests for layout and period stores`

openspec/changes/p02-app-layout/tasks.md

@@ -1,132 +0,0 @@
-# Tasks: App Layout
-
-## Phase 1: Create Layout Components Directory
-
-- [ ] 2.1 Create `src/lib/components/layout/` directory
-
-## Phase 2: Sidebar Components
-
-### SidebarItem
-- [ ] 2.2 Create `SidebarItem.svelte`
-- [ ] 2.3 Add icon prop (Lucide component)
-- [ ] 2.4 Add label prop
-- [ ] 2.5 Add href prop
-- [ ] 2.6 Add active state styling (current path matching)
-- [ ] 2.7 Handle collapsed state (icon only, tooltip on hover)
-- [ ] 2.8 Write component test: renders with icon and label
-
-### SidebarSection
-- [ ] 2.9 Create `SidebarSection.svelte`
-- [ ] 2.10 Add section prop (NavSection type)
-- [ ] 2.11 Add expanded prop (for collapsed sidebar)
-- [ ] 2.12 Render section title
-- [ ] 2.13 Render SidebarItem for each item
-- [ ] 2.14 Write component test: renders all items
-
-### Sidebar
-- [ ] 2.15 Create `Sidebar.svelte`
-- [ ] 2.16 Import and use navigationSections
-- [ ] 2.17 Import layoutStore for state
-- [ ] 2.18 Implement three visual states (expanded, collapsed, hidden)
-- [ ] 2.19 Add toggle button in header
-- [ ] 2.20 Add logo/brand in header
-- [ ] 2.21 Implement role-based section visibility
-- [ ] 2.22 Add dark mode toggle in footer
-- [ ] 2.23 Add keyboard shortcut (Cmd/Ctrl + \)
-- [ ] 2.24 Implement CSS transitions
-- [ ] 2.25 Write component test: toggle state works
-- [ ] 2.26 Write component test: role-based visibility
-
-## Phase 3: TopBar Components
-
-### UserMenu
-- [ ] 2.27 Create `UserMenu.svelte` (migrate from Navigation.svelte)
-- [ ] 2.28 Import authStore for user info
-- [ ] 2.29 Add dropdown with user name/avatar
-- [ ] 2.30 Add logout action
-- [ ] 2.31 Style with DaisyUI dropdown
-
-### MonthSelector
-- [ ] 2.32 Create `MonthSelector.svelte`
-- [ ] 2.33 Import periodStore
-- [ ] 2.34 Display current month (format: Feb 2026)
-- [ ] 2.35 Add dropdown with month options (-6 to +6 months)
-- [ ] 2.36 Add Previous/Today/Next quick actions
-- [ ] 2.37 Style with DaisyUI dropdown
-- [ ] 2.38 Write component test: selection updates store
-
-### Breadcrumbs
-- [ ] 2.39 Create `Breadcrumbs.svelte`
-- [ ] 2.40 Import $page store for current path
-- [ ] 2.41 Implement generateBreadcrumbs function
-- [ ] 2.42 Render Home icon for root
-- [ ] 2.43 Render segments as links
-- [ ] 2.44 Style last item as current (no link)
-- [ ] 2.45 Write component test: generates correct crumbs
-
-### TopBar
-- [ ] 2.46 Create `TopBar.svelte`
-- [ ] 2.47 Import Breadcrumbs, MonthSelector, UserMenu
-- [ ] 2.48 Add hamburger toggle for mobile
-- [ ] 2.49 Implement sticky positioning
-- [ ] 2.50 Style with DaisyUI
-- [ ] 2.51 Write component test: renders all components
-
-## Phase 4: AppLayout
-
-- [ ] 2.52 Create `AppLayout.svelte`
-- [ ] 2.53 Import Sidebar, TopBar
-- [ ] 2.54 Add slot for page content
-- [ ] 2.55 Implement flex layout (sidebar + main content)
-- [ ] 2.56 Adjust main content margin based on sidebar state
-- [ ] 2.57 Handle responsive behavior (mobile drawer)
-- [ ] 2.58 Write component test: renders children
-- [ ] 2.59 Write component test: sidebar toggle affects layout
-
-## Phase 5: Route Integration
-
-- [ ] 2.60 Update `src/routes/+layout.svelte`
-- [ ] 2.61 Add conditional AppLayout wrapper
-- [ ] 2.62 Define publicPages array (['/login', '/auth'])
-- [ ] 2.63 Test: login page has NO sidebar
-- [ ] 2.64 Test: dashboard page has sidebar
-
-## Phase 6: Responsive & Mobile
-
-- [ ] 2.65 Test: Sidebar hidden by default on mobile
-- [ ] 2.66 Test: Hamburger shows sidebar on mobile
-- [ ] 2.67 Test: Sidebar overlays content on mobile (not push)
-- [ ] 2.68 Test: Clicking outside closes sidebar on mobile
-- [ ] 2.69 Add backdrop overlay for mobile drawer
-
-## Phase 7: E2E Tests
-
-- [ ] 2.70 E2E test: Login redirects to dashboard with sidebar
-- [ ] 2.71 E2E test: Sidebar toggle works
-- [ ] 2.72 E2E test: Theme toggle works
-- [ ] 2.73 E2E test: Month selector updates period store
-- [ ] 2.74 E2E test: Breadcrumbs reflect current route
-
-## Phase 8: Verification
-
-- [ ] 2.75 Run `npm run check` - no type errors
-- [ ] 2.76 Run `npm run test:unit` - all component tests pass
-- [ ] 2.77 Run `npm run test:e2e` - all E2E tests pass
-- [ ] 2.78 Manual test: All breakpoints (320px, 768px, 1024px, 1280px)
-- [ ] 2.79 Manual test: Dark mode toggle
-- [ ] 2.80 Manual test: Keyboard shortcut (Cmd/Ctrl + \)
-
-## Commits
-
-1. `feat(layout): Create SidebarItem component with active state`
-2. `feat(layout): Create SidebarSection component`
-3. `feat(layout): Create Sidebar with three states and theme toggle`
-4. `feat(layout): Create UserMenu component (migrated from Navigation)`
-5. `feat(layout): Create MonthSelector with period store integration`
-6. `feat(layout): Create Breadcrumbs with auto-generation`
-7. `feat(layout): Create TopBar with all components`
-8. `feat(layout): Create AppLayout wrapper component`
-9. `feat(layout): Integrate AppLayout into root layout`
-10. `feat(layout): Add responsive mobile drawer behavior`
-11. `test(layout): Add component tests for all layout components`
-12. `test(e2e): Add E2E tests for layout functionality`

openspec/config.yaml

@@ -196,20 +196,17 @@ rules:
   
   # Component Patterns
   component_patterns:
-    layout:
-      - AppLayout.svelte: Main wrapper with sidebar + content area
-      - Sidebar.svelte: Collapsible navigation with sections
-      - TopBar.svelte: Breadcrumbs, month selector, user menu
-      - Breadcrumbs.svelte: Auto-generated from route
-      - PageHeader.svelte: Page title + action buttons slot
-    state:
-      - layoutStore: sidebarState ('expanded'|'collapsed'|'hidden'), theme
-      - periodStore: selectedMonth (global YYYY-MM format)
-      - Persist user preferences to localStorage
-    navigation:
-      - Sections: PLANNING, REPORTS, ADMIN
-      - ADMIN section visible only to superuser role
-      - Active route highlighting required
+    - "layout: AppLayout.svelte -> Main wrapper with sidebar + content area"
+    - "layout: Sidebar.svelte -> Collapsible navigation with sections"
+    - "layout: TopBar.svelte -> Breadcrumbs, month selector, user menu"
+    - "layout: Breadcrumbs.svelte -> Auto-generated from route"
+    - "layout: PageHeader.svelte -> Page title + action buttons slot"
+    - "state: layoutStore -> sidebarState ('expanded'|'collapsed'|'hidden'), theme"
+    - "state: periodStore -> selectedMonth (global YYYY-MM format)"
+    - "state: Persist user preferences to localStorage"
+    - "navigation: Sections -> PLANNING, REPORTS, ADMIN"
+    - "navigation: ADMIN section visible only to superuser role"
+    - "navigation: Active route highlighting required"
   
   # Accessibility Requirements
   accessibility: