docs(ui): Add UI layout refactor plan and OpenSpec changes

- Update decision-log with UI layout decisions (Feb 18, 2026)
- Update architecture with frontend layout patterns
- Update config.yaml with TDD, documentation, UI standards rules
- Create p00-api-documentation change (Scribe annotations)
- Create p01-ui-foundation change (types, stores, Lucide)
- Create p02-app-layout change (AppLayout, Sidebar, TopBar)
- Create p03-dashboard-enhancement change (PageHeader, StatCard)
- Create p04-content-patterns change (DataTable, FilterBar)
- Create p05-page-migrations change (page migrations)
- Fix E2E auth tests (11/11 passing)
- Add JWT expiry validation to dashboard guard

openspec/config.yaml

@@ -16,7 +16,8 @@ techstack: |
   
   ## Frontend (SvelteKit)
   - **Framework:** SvelteKit (latest) with Svelte 5
-  - **Styling:** Tailwind CSS + DaisyUI
+  - **Styling:** Tailwind CSS 4 + DaisyUI 5
+  - **Icons:** Lucide Svelte (modern icon library)
   - **Charts:** Recharts
   - **Tables:** TanStack Table (React Table for Svelte)
   - **Forms:** Superforms + Zod + SvelteKit Form Actions
@@ -165,6 +166,79 @@ rules:
     - Zero linting errors (Laravel Pint, ESLint, Prettier)
     - API documentation must be up-to-date (Scribe generation)
   
+  # Documentation Standards
+  documentation:
+    - API documentation (Scribe annotations) is MANDATORY for all controllers
+    - Every endpoint must have @group, @authenticated (if protected), @response annotations
+    - Update docs/ when making significant decisions (decision-log.md, architecture.md)
+    - Document new dependencies in both config.yaml techstack AND design.md
+    - UI decisions go in decision-log.md → "UI Layout Decisions" section
+    - Architecture changes go in architecture.md → relevant section
+  
+  # Workflow Loops
+  workflow:
+    - Follow capability-based workflow: Test → Implement → Refactor → Document
+    - Do NOT skip phases - each phase has a specific commit
+    - Run full test suite after EACH implementation commit
+    - Fix failing tests before moving to next scenario
+    - API documentation (Scribe) is generated in Phase 4 (Document)
+    - Loop through scenarios one at a time (not all at once)
+  
+  # UI Standards (70% data-dense, 30% utilitarian)
+  ui_standards:
+    - Use Lucide Svelte for ALL icons (no inline SVGs, no other icon libraries)
+    - DaisyUI-first approach - use DaisyUI components before building custom
+    - Sidebar pattern: Collapsible (expanded ↔ collapsed ↔ hidden)
+    - Global month selector in top bar (affects all views)
+    - Light mode default, dark mode available via toggle
+    - Table density: Use table-compact for data-heavy views
+    - Reference apps: Obsidian (minimal chrome) + Jira (hierarchical sidebar)
+  
+  # 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
+  
+  # Accessibility Requirements
+  accessibility:
+    - Keyboard navigation: Tab through sidebar, Enter/Space to activate
+    - Escape to close mobile drawer
+    - Cmd/Ctrl + \ to toggle sidebar (desktop)
+    - ARIA: aria-expanded on sidebar toggle, aria-current="page" on active nav
+    - Focus trap in mobile drawer
+    - Focus restored on drawer close
+    - All form inputs must have associated labels
+  
+  # Responsive Design
+  responsive:
+    - ≥1280px (xl): Sidebar expanded by default, manual toggle
+    - 1024-1279px (lg): Sidebar collapsed by default, manual toggle
+    - 768-1023px (md): Sidebar hidden, hamburger menu (drawer overlay)
+    - <768px (sm): Sidebar hidden, hamburger menu (drawer overlay)
+    - Mobile drawer: Full-height overlay with backdrop
+    - Close drawer on route change (mobile)
+  
+  # State Management Patterns
+  state_management:
+    - Use Svelte stores for UI state only (not business data)
+    - Business data comes from API (no client-side caching beyond DaisyUI)
+    - Stores: auth, layout, period
+    - localStorage keys: headroom_access_token, headroom_refresh_token, 
+                         headroom_sidebar_state, headroom_theme
+    - Store files go in src/lib/stores/
+  
   proposal:
     - Include clear Goals and Non-Goals sections
     - Reference the 4 personas (Superuser, Manager, Developer, Top Brass)