tas/Codewalkers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Add ASCII wireframe mockups for all frontend pages

Browse Source 
Covers: app layout, initiatives list, initiative detail (4 tabs),
agents page, inbox, settings (health + projects), and all dialogs.
This commit is contained in:
Lukas May
2026-03-02 17:28:14 +09:00
parent 988160b2b7
commit 89db580ca4
12 changed files with 1778 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
docs/wireframes/app-layout.md Normal file
View File

@@ -0,0 +1,68 @@
# 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] Codewalk District |
| |
| [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`