ParkerM2 · ParkerM2 · Feb 22, 2026 · Feb 22, 2026
diff --git a/.claude/agents/architect.md b/.claude/agents/architect.md
@@ -58,7 +58,7 @@ MODIFY:
   src/shared/ipc/<domain>/schemas.ts   — add Zod schemas
   src/shared/types/<name>.ts           — add type definitions
   src/renderer/app/routes/<domain>.routes.ts — add route
-  src/renderer/app/layouts/Sidebar.tsx  — add nav item
+  src/renderer/app/layouts/sidebar-layouts/shared-nav.ts — add nav item
 ```
 
 ### 3. Data Flow

diff --git a/.claude/agents/codebase-guardian.md b/.claude/agents/codebase-guardian.md
@@ -176,6 +176,7 @@ projects: Project[];        // Should be in React Query
 // CORRECT — UI state in Zustand
 selectedTaskId: string | null;
 sidebarCollapsed: boolean;
+
 ```
 
 **Check:** Read each store file. Flag any server data stored in Zustand.

diff --git a/.claude/agents/fitness-engineer.md b/.claude/agents/fitness-engineer.md
@@ -98,7 +98,7 @@ export interface FitnessService {
 
 ## Design System Awareness
 
-This project has a design system at `src/renderer/shared/components/ui/` (30 primitives), imported via `@ui`. All UI-facing code must use these primitives instead of raw HTML elements. Key exports: Button, Input, Textarea, Label, Badge, Card, Spinner, Dialog, AlertDialog, Select, DropdownMenu, Tooltip, Tabs, Switch, Checkbox, Toast, ScrollArea, Popover, Progress, Slider, Collapsible, PageLayout, Typography, Grid, Stack, Flex, Container, Separator, Form system (FormField, FormInput, etc.).
+This project has a design system at `src/renderer/shared/components/ui/` (30 primitives), imported via `@ui`. All UI-facing code must use these primitives instead of raw HTML elements. Key exports: Button, Input, Textarea, Label, Badge, Card, Spinner, Dialog, AlertDialog, Select, DropdownMenu, Tooltip, Tabs, Switch, Checkbox, Toast, ScrollArea, Popover, Progress, Slider, Collapsible, Sidebar (composable sidebar system), Breadcrumb (composable breadcrumb navigation), PageLayout, Typography, Grid, Stack, Flex, Container, Separator, Form system (FormField, FormInput, etc.).
 
 ## Handoff
 

diff --git a/.claude/agents/hook-engineer.md b/.claude/agents/hook-engineer.md
@@ -236,7 +236,7 @@ Before marking work complete:
 
 ## Design System Awareness
 
-This project has a design system at `src/renderer/shared/components/ui/` (30 primitives), imported via `@ui`. All UI-facing code must use these primitives instead of raw HTML elements. Key exports: Button, Input, Textarea, Label, Badge, Card, Spinner, Dialog, AlertDialog, Select, DropdownMenu, Tooltip, Tabs, Switch, Checkbox, Toast, ScrollArea, Popover, Progress, Slider, Collapsible, PageLayout, Typography, Grid, Stack, Flex, Container, Separator, Form system (FormField, FormInput, etc.).
+This project has a design system at `src/renderer/shared/components/ui/` (30 primitives), imported via `@ui`. All UI-facing code must use these primitives instead of raw HTML elements. Key exports: Button, Input, Textarea, Label, Badge, Card, Spinner, Dialog, AlertDialog, Select, DropdownMenu, Tooltip, Tabs, Switch, Checkbox, Toast, ScrollArea, Popover, Progress, Slider, Collapsible, Sidebar (composable sidebar system), Breadcrumb (composable breadcrumb navigation), PageLayout, Typography, Grid, Stack, Flex, Container, Separator, Form system (FormField, FormInput, etc.).
 
 ## Handoff
 

diff --git a/.claude/agents/router-engineer.md b/.claude/agents/router-engineer.md
@@ -24,7 +24,11 @@ Before modifying routing, read:
    - `communication.routes.ts` — Alerts, briefing
    - `settings.routes.ts` — Settings page
    - `misc.routes.ts` — Insights, changelog, health, screen, fitness
-6. `src/renderer/app/layouts/Sidebar.tsx` — Sidebar navigation
+6. `src/renderer/app/layouts/sidebar-layouts/shared-nav.ts` — Shared nav items (personalItems, developmentItems)
+7. `src/renderer/app/layouts/sidebar-layouts/SidebarLayout*.tsx` — 16 sidebar layout variants
+8. `src/renderer/app/layouts/LayoutWrapper.tsx` — Switches between sidebar layouts
+9. `src/renderer/app/layouts/ContentHeader.tsx` — SidebarTrigger + Breadcrumbs
+10. `src/renderer/app/layouts/AppBreadcrumbs.tsx` — Breadcrumb trail from route staticData
 7. `src/renderer/app/layouts/ProjectTabBar.tsx` — Project tab bar
 8. `src/renderer/app/layouts/RootLayout.tsx` — Root layout wrapper
 9. `src/renderer/app/layouts/TopBar.tsx` — Top bar with CommandBar trigger
@@ -38,7 +42,10 @@ ONLY modify these files:
   src/shared/constants/routes.ts               — Route constants
   src/renderer/app/router.tsx                   — Root route tree assembly
   src/renderer/app/routes/*.ts(x)              — Domain route group files
-  src/renderer/app/layouts/Sidebar.tsx          — Sidebar nav items
+  src/renderer/app/layouts/sidebar-layouts/shared-nav.ts  — Shared nav items (add here)
+  src/renderer/app/layouts/sidebar-layouts/*.tsx — Sidebar layout variants
+  src/renderer/app/layouts/LayoutWrapper.tsx     — Layout switching
+  src/renderer/app/layouts/AppBreadcrumbs.tsx    — Breadcrumbs
   src/renderer/app/layouts/ProjectTabBar.tsx    — Project tabs
   src/renderer/app/layouts/TopBar.tsx           — Top bar
   src/renderer/app/layouts/CommandBar.tsx       — Command palette
@@ -118,7 +125,7 @@ const routeTree = rootRoute.addChildren([
 
 ### Step 3: Add Sidebar Nav Item
 ```typescript
-// src/renderer/app/layouts/Sidebar.tsx
+// src/renderer/app/layouts/sidebar-layouts/shared-nav.ts
 
 import { Calendar } from 'lucide-react';
 
@@ -157,7 +164,7 @@ const plannerRoute = createRoute({
 
 ### Step 3: Add to Sidebar navItems
 ```typescript
-// src/renderer/app/layouts/Sidebar.tsx
+// src/renderer/app/layouts/sidebar-layouts/shared-nav.ts
 
 import { Calendar } from 'lucide-react';
 
@@ -249,7 +256,8 @@ Before marking work complete:
 - [ ] Route constants added to `src/shared/constants/routes.ts`
 - [ ] Route uses constants (not hardcoded strings)
 - [ ] Route added to `routeTree` in `router.tsx`
-- [ ] Sidebar nav item added (if user-facing feature)
+- [ ] Sidebar nav item added to shared-nav.ts (if user-facing feature)
+- [ ] Route has staticData.breadcrumbLabel (for breadcrumb trail)
 - [ ] Navigation calls use `void` operator
 - [ ] Redirect uses `throw redirect()` with eslint-disable comment
 - [ ] Feature imported from barrel export (not internal path)
@@ -260,7 +268,7 @@ Before marking work complete:
 
 ## Design System Awareness
 
-This project has a design system at `src/renderer/shared/components/ui/` (30 primitives), imported via `@ui`. All UI-facing code must use these primitives instead of raw HTML elements. Key exports: Button, Input, Textarea, Label, Badge, Card, Spinner, Dialog, AlertDialog, Select, DropdownMenu, Tooltip, Tabs, Switch, Checkbox, Toast, ScrollArea, Popover, Progress, Slider, Collapsible, PageLayout, Typography, Grid, Stack, Flex, Container, Separator, Form system (FormField, FormInput, etc.).
+This project has a design system at `src/renderer/shared/components/ui/` (30 primitives), imported via `@ui`. All UI-facing code must use these primitives instead of raw HTML elements. Key exports: Button, Input, Textarea, Label, Badge, Card, Spinner, Dialog, AlertDialog, Select, DropdownMenu, Tooltip, Tabs, Switch, Checkbox, Toast, ScrollArea, Popover, Progress, Slider, Collapsible, Sidebar (composable sidebar system), Breadcrumb (composable breadcrumb navigation), PageLayout, Typography, Grid, Stack, Flex, Container, Separator, Form system (FormField, FormInput, etc.).
 
 ## Handoff
 

diff --git a/.claude/agents/store-engineer.md b/.claude/agents/store-engineer.md
@@ -107,28 +107,34 @@ import { create } from 'zustand';
 
 interface LayoutState {
   sidebarCollapsed: boolean;
+  sidebarLayout: SidebarLayoutId;  // Which of 16 sidebar layouts to use
   activeProjectId: string | null;
-  projectTabs: string[];
+  projectTabOrder: string[];
 
   toggleSidebar: () => void;
+  setSidebarCollapsed: (collapsed: boolean) => void;
+  setSidebarLayout: (id: SidebarLayoutId) => void;
   setActiveProject: (id: string | null) => void;
   addProjectTab: (id: string) => void;
   removeProjectTab: (id: string) => void;
 }
 
 export const useLayoutStore = create<LayoutState>()((set) => ({
   sidebarCollapsed: false,
+  sidebarLayout: 'sidebar-07',
   activeProjectId: null,
-  projectTabs: [],
+  projectTabOrder: [],
 
   toggleSidebar: () =>
     set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
+  setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
+  setSidebarLayout: (id) => set({ sidebarLayout: id }),
   setActiveProject: (id) => set({ activeProjectId: id }),
   addProjectTab: (id) =>
     set((state) => ({
-      projectTabs: state.projectTabs.includes(id)
-        ? state.projectTabs
-        : [...state.projectTabs, id],
+      projectTabOrder: state.projectTabOrder.includes(id)
+        ? state.projectTabOrder
+        : [...state.projectTabOrder, id],
     })),
   removeProjectTab: (id) =>
     set((state) => ({
@@ -247,7 +253,7 @@ Before marking work complete:
 
 ## Design System Awareness
 
-This project has a design system at `src/renderer/shared/components/ui/` (30 primitives), imported via `@ui`. All UI-facing code must use these primitives instead of raw HTML elements. Key exports: Button, Input, Textarea, Label, Badge, Card, Spinner, Dialog, AlertDialog, Select, DropdownMenu, Tooltip, Tabs, Switch, Checkbox, Toast, ScrollArea, Popover, Progress, Slider, Collapsible, PageLayout, Typography, Grid, Stack, Flex, Container, Separator, Form system (FormField, FormInput, etc.).
+This project has a design system at `src/renderer/shared/components/ui/` (30 primitives), imported via `@ui`. All UI-facing code must use these primitives instead of raw HTML elements. Key exports: Button, Input, Textarea, Label, Badge, Card, Spinner, Dialog, AlertDialog, Select, DropdownMenu, Tooltip, Tabs, Switch, Checkbox, Toast, ScrollArea, Popover, Progress, Slider, Collapsible, Sidebar (composable sidebar system), Breadcrumb (composable breadcrumb navigation), PageLayout, Typography, Grid, Stack, Flex, Container, Separator, Form system (FormField, FormInput, etc.).
 
 ## Handoff
 

diff --git a/ai-docs/DATA-FLOW.md b/ai-docs/DATA-FLOW.md
@@ -216,8 +216,9 @@ components/
                     |   Shared stores:      |
                     |   layout-store:       |
                     |     sidebarCollapsed  |
+                    |     sidebarLayout     |
                     |     activeProjectId   |
-                    |     projectTabs       |
+                    |     projectTabOrder   |
                     |   theme-store:        |
                     |     mode (light/dark) |
                     |     colorTheme        |
@@ -585,7 +586,7 @@ Toast notification shows success/failure
 User clicks sidebar nav item
   |
   v
-handleNav(path)                            Sidebar.tsx
+handleNav(path)                            SidebarLayoutXX.tsx (via shared-nav.ts)
   |
   v
 navigate({ to: projectViewPath(id, path) })

diff --git a/ai-docs/FEATURES-INDEX.md b/ai-docs/FEATURES-INDEX.md
@@ -42,7 +42,7 @@ Location: `src/renderer/features/`
 | **productivity** | Productivity hub (8 tabs: Overview, Calendar, Spotify, Briefing, Notes, Planner, Alerts, Comms) | ProductivityPage (tabbed), CalendarWidget, SpotifyWidget; embeds BriefingPage, NotesPage, PlannerPage, AlertsPage, CommunicationsPage as tab content | `calendar.*`, `spotify.*`, `briefing.*`, `notes.*`, `planner.*`, `alerts.*` |
 | **projects** | Project management | ProjectListPage, ProjectSettings, WorktreeManager, ProjectEditDialog, GitStatusIndicator (branch name + clean/changed badge in project list) | `projects.*`, `git.status` |
 | **roadmap** | Project roadmap | RoadmapPage, MilestoneCard | `milestones.*` |
-| **settings** | App settings (6-tab layout: Display, Profile, Hub, Integrations, Storage, Advanced) | SettingsPage (tabbed), ProfileFormModal (TanStack Form + Zod + FormSelect), HubSettings (ConnectionForm uses TanStack Form + Zod), OAuthProviderSettings, OAuthConnectionStatus, WebhookSettings (SlackForm + GitHubForm use TanStack Form + Zod), StorageManagementSection, StorageUsageBar, RetentionControl, ColorThemeSection; **Theme Editor** (`components/theme-editor/`, 10 files): ThemeEditorPage, ColorControl, ColorSection, ThemePreview, SavedThemesBar, CssImportDialog, css-parser.ts, css-exporter.ts, token-sections.ts — Route: `/settings/themes` | `settings.*`, `oauth.*`, `dataManagement.*` |
+| **settings** | App settings (6-tab layout: Display, Profile, Hub, Integrations, Storage, Advanced) | SettingsPage (tabbed), LayoutSection (sidebar layout selector with SVG wireframe preview), ProfileFormModal (TanStack Form + Zod + FormSelect), HubSettings (ConnectionForm uses TanStack Form + Zod), OAuthProviderSettings, OAuthConnectionStatus, WebhookSettings (SlackForm + GitHubForm use TanStack Form + Zod), StorageManagementSection, StorageUsageBar, RetentionControl, ColorThemeSection; **Theme Editor** (`components/theme-editor/`, 10 files): ThemeEditorPage, ColorControl, ColorSection, ThemePreview, SavedThemesBar, CssImportDialog, css-parser.ts, css-exporter.ts, token-sections.ts — Route: `/settings/themes` | `settings.*`, `oauth.*`, `dataManagement.*` |
 | **tasks** | Task management (AG-Grid dashboard) | TaskDataGrid (AG-Grid v35 wrapped in `<Card>` from `@ui`; themed via compound `.ag-theme-quartz.ag-theme-claude` CSS class with design-system token overrides via AG-Grid Theming API in `ag-grid-modules.ts`), TaskFiltersToolbar, TaskDetailRow (subtasks use `?? []` fallback for Hub data), TaskStatusBadge, CreateTaskDialog, PlanFeedbackDialog, TaskResultView (status/duration/cost/log summary for completed tasks), CreatePrDialog (GitHub PR creation post-task-completion); **Hooks**: useTaskEvents (→ useAgentEvents + useQaEvents), useAgentMutations (useStartPlanning, useStartExecution, useReplanWithFeedback, useKillAgent, useRestartFromCheckpoint), useQaMutations, QaReportViewer | `hub.tasks.*`, `tasks.*`, `agent.*` (incl. `agent.replanWithFeedback`), `qa.*`, `git.createPr`, `event:agent.orchestrator.*`, `event:qa.*` |
 | **terminals** | Terminal emulator | TerminalGrid, TerminalInstance | `terminals.*` |
 | **briefing** | Daily briefing & suggestions *(accessed via Productivity > Briefing tab)* | BriefingPage, SuggestionCard | `briefing.*` |
@@ -389,14 +389,41 @@ Location: `src/renderer/app/layouts/`
 
 | Layout | Purpose |
 |--------|---------|
-| `RootLayout.tsx` | Root shell: renders TitleBar at top, then `react-resizable-panels` (Group/Panel/Separator) for sidebar + content layout with localStorage persistence. Sidebar panel is collapsible (collapses to 56px, minSize 160px, maxSize 300px) and syncs with layout store. |
+| `RootLayout.tsx` | Root shell: renders TitleBar at top, then `LayoutWrapper` with the selected sidebar layout variant. Layout selection stored in layout store + persisted via settings IPC. |
+| `LayoutWrapper.tsx` | Switches between 16 sidebar layout variants. Lazy-loads `SidebarLayoutXX` components. Wraps content in `SidebarProvider` + `SidebarInset` + `ContentHeader`. |
+| `ContentHeader.tsx` | Shared content header bar: `[SidebarTrigger] \| [Breadcrumbs]`. Renders inside SidebarInset across all layout variants. |
+| `AppBreadcrumbs.tsx` | Breadcrumb trail from TanStack Router `useMatches()`. Reads `staticData.breadcrumbLabel` from route matches. |
 | `TitleBar.tsx` | Custom frameless window title bar (32px). Drag region for window movement, utility buttons (screenshot, health indicator, hub status) separated by vertical divider from minimize/maximize/close window controls. Uses `window.*` IPC channels. |
 | `TitleBarScreenshot.tsx` | Camera icon button that captures the primary screen via `screen.listSources` + `screen.capture` IPC channels and copies PNG to clipboard. Shows checkmark feedback for 1.5s on success. |
-| `Sidebar.tsx` | Navigation sidebar (fills its parent panel, collapse state driven by layout store). Uses `bg-sidebar text-sidebar-foreground` theme variables. |
+| `Sidebar.tsx` | Legacy navigation sidebar (kept for reference). Replaced by `sidebar-layouts/SidebarLayoutXX.tsx` components. |
 | `TopBar.tsx` | Top bar with project tabs + add button |
 | `ProjectTabBar.tsx` | Horizontal tab bar for switching between open projects |
 | `UserMenu.tsx` | Avatar + logout dropdown in sidebar footer |
 
+### Sidebar Layout Variants
+
+Location: `src/renderer/app/layouts/sidebar-layouts/`
+
+| File | Layout | Description |
+|------|--------|-------------|
+| `shared-nav.ts` | — | Shared nav items (`personalItems`, `developmentItems`, `settingsItem`, `addProjectItem`, `NavItem` type) |
+| `SidebarLayout01.tsx` | Grouped | Simple sidebar with labeled section groups |
+| `SidebarLayout02.tsx` | Collapsible Sections | Sidebar with collapsible section groups |
+| `SidebarLayout03.tsx` | Submenus | Sidebar with inline expandable sub-items |
+| `SidebarLayout04.tsx` | Floating | Floating sidebar with `variant="floating"` |
+| `SidebarLayout05.tsx` | Collapsible Submenus | Collapsible sub-items with search input |
+| `SidebarLayout06.tsx` | Dropdown Submenus | Sidebar with dropdown-style sub-items |
+| `SidebarLayout07.tsx` | Icon Collapse | Sidebar that collapses to icons (`collapsible="icon"`) |
+| `SidebarLayout08.tsx` | Inset + Secondary | Inset sidebar with `variant="inset"` |
+| `SidebarLayout09.tsx` | Nested | Wide sidebar with deeply nested collapsible groups |
+| `SidebarLayout10.tsx` | Popover | Floating icon-collapsible sidebar |
+| `SidebarLayout11.tsx` | File Tree | Sidebar with tree hierarchy using SidebarMenuSub |
+| `SidebarLayout12.tsx` | Calendar | Sidebar with date display widget |
+| `SidebarLayout13.tsx` | Dialog | Offcanvas sidebar (`collapsible="offcanvas"`) |
+| `SidebarLayout14.tsx` | Right Side | Right-aligned sidebar (`side="right"`) |
+| `SidebarLayout15.tsx` | Dual | Left + right sidebar layout |
+| `SidebarLayout16.tsx` | Sticky Header | Sidebar with sticky header section |
+
 ---
 
 ## 6.5 Shared UI Components
@@ -453,6 +480,8 @@ All primitives follow the **shadcn/ui pattern**: CVA variants, `data-slot` attri
 | **2: Radix** | Progress | `ui/progress.tsx` | Progress bar with CVA sizes |
 | **2: Radix** | Slider | `ui/slider.tsx` | Slider with track/range/thumb |
 | **2: Radix** | Collapsible | `ui/collapsible.tsx` | Collapsible, CollapsibleTrigger, CollapsibleContent |
+| **2: Sidebar** | Sidebar | `ui/sidebar.tsx` | `SidebarProvider`, `Sidebar`, `SidebarContent`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupAction`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarInset`, `SidebarInput`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSkeleton`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarRail`, `SidebarSeparator`, `SidebarTrigger`, `useSidebar`, `sidebarMenuButtonVariants` — shadcn composable sidebar system, adapted for Electron (no mobile Sheet) |
+| **2: Breadcrumb** | Breadcrumb | `ui/breadcrumb.tsx` | `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis` — composable breadcrumb navigation |
 | **3: Form** | Form System | `ui/form.tsx` | `Form`, `FormField`, `FormInput`, `FormTextarea`, `FormSelect`, `FormCheckbox`, `FormSwitch` — TanStack Form + Zod v4 integration. `Form` and field components exported from `@ui` barrel. Import `useForm` from `@tanstack/react-form` directly. |
 
 ## 6.6 Shared Hooks