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

111
docs/wireframes/execution-tab.md Normal file
View File

@@ -0,0 +1,111 @@
# Execution Tab (`?tab=execution`)
Horizontally scrollable kanban-style pipeline graph. Columns represent dependency levels computed via topological sort.
## Default State
```
+============================================================================+
| < Back |
| Auth System Overhaul [ACTIVE] [YOLO] [git] main [P] backend |
| [ Content ] [ Plan ] [*Execution*] [ Review ] |
+============================================================================+
| |
| <-- horizontally scrollable pipeline graph --> |
| |
| +----------+ +----------+ +----------+ |
| | Level 0 | -----> | Level 1 | -----> | Level 2 | |
| +----------+ +----------+ +----------+ |
| |
| +---------+ +---------+ +---------+ |
| | Phase 1 | ---> | Phase 2 | ---> | Phase 4 | |
| | DB Schm | | | OAuth | | | Testing | |
| | [DONE] | | | [READY] | | | [PEND] | |
| |---------| | |---------| | |---------| |
| | * task1 | | | * task1 | | | * task1 | |
| | * task2 | | | * task2 | | | * task2 | |
| | * task3 | | | * task3 | | | | |
| +---------+ | +---------+ | +---------+ |
| | | |
| | +---------+ | |
| | | Phase 3 | | |
| ---> | UI Comp |--- |
| | [PEND] | |
| |---------| |
| | * task1 | |
| | * task2 | |
| +---------+ |
| |
+============================================================================+
```
## Pipeline Stage Column
```
+-----------+
| Level N | <-- column header
+-----------+
| |
| +-------+ |
| | Phase | | <-- PipelinePhaseGroup cards stacked vertically
| +-------+ |
| |
| +-------+ |
| | Phase | |
| +-------+ |
| |
+-----------+
```
## Pipeline Phase Group
```
+-----------------------------------------+
| * Phase 2: OAuth Flow [READY] [play] | <-- status dot + name + queue btn
|-----------------------------------------|
| [play] Set up OAuth routes [PENDING] | <-- hover reveals play button
| [play] Implement PKCE flow [PENDING] |
| [ .. ] Google provider [RUNNING] | <-- running = no play button
| [ ] GitHub provider [BLOCKED] | <-- blocked = no play button
| [play] Microsoft provider [PENDING] |
+-----------------------------------------+
```
- Phase header: `StatusDot` + phase name + `StatusBadge` + queue button (plays icon)
- Task rows: play button (hover-visible) + task name + `StatusBadge`
- Queue button on phase header queues all eligible tasks
- Queue button on task queues individual task
- Clicking a task opens `<TaskDetailModal>`
## Connector Arrows
```
+--------+ +--------+
| Phase | ----[>]------> | Phase |
+--------+ +--------+
horizontal line + triangle arrow between columns
```
## Empty State (no phases)
Same as Plan tab empty state:
```
+============================================================================+
| |
| No phases yet |
| |
| [spinner] Planning phases... |
| -- or -- |
| [sparkles Plan Phases] or [ Add Phase ] |
| |
+============================================================================+
```
## Source
- `packages/web/src/components/pipeline/PipelineTab.tsx`
- `packages/web/src/components/pipeline/PipelineStageColumn.tsx`
- `packages/web/src/components/pipeline/PipelinePhaseGroup.tsx`
- `packages/web/src/components/pipeline/PipelineTaskCard.tsx`