# App Layout

Global shell wrapping all pages. Fixed header with navigation, scrollable content area.

```
+============================================================================+
|  CODEWALK DISTRICT                                                         |
|----------------------------------------------------------------------------|
|  [ Initiatives ]  [ Agents ]  [ Inbox ]  [ Settings ]                     |
+============================================================================+
|                                                                            |
|                        max-w-7xl padded content                            |
|                                                                            |
|                           <Page Outlet>                                    |
|                                                                            |
|                                                                            |
|                                                                            |
|                                                                            |
|                                                                            |
|                                                                            |
|                                                                            |
|                                                                            |
+============================================================================+
```

## Header Bar (56px, sticky, backdrop-blur)

```
+============================================================================+
|  [logo] Codewalkers                                                  |
|                                                                            |
|  [Initiatives]  [Agents]  [Inbox]  [Settings]                             |
|   ^^^^^^^^^^                                                               |
|   bg-muted when active                                                     |
+============================================================================+
```

- Logo links to `/initiatives`
- Active tab gets `bg-muted` highlight
- Tabs are horizontal links below the wordmark

## Error States

### 404 Page
```
+============================================================================+
|  CODEWALK DISTRICT                                                         |
|  [ Initiatives ]  [ Agents ]  [ Inbox ]  [ Settings ]                     |
+============================================================================+
|                                                                            |
|                                                                            |
|                        (!) Page not found                                  |
|                                                                            |
|                     [ Back to Dashboard ]                                  |
|                                                                            |
|                                                                            |
+============================================================================+
```

## Components

- `<Toaster>` (sonner) renders globally for toast notifications (bottom-right)
- `<ErrorBoundary>` wraps the outlet

## Source

- `packages/web/src/layouts/AppLayout.tsx`
- `packages/web/src/routes/__root.tsx`