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

186
docs/wireframes/dialogs.md Normal file
View File

@@ -0,0 +1,186 @@
# Dialogs
All modal/dialog overlays used throughout the application.
---
## Create Initiative Dialog
**Trigger**: "New Initiative" button on `/initiatives`
```
+----------------------------------------------------------+
| Create Initiative [x] |
| |
| Name * |
| [Auth System Overhaul___________________________] |
| |
| Branch (optional) |
| [cw/auth-overhaul_______________________________] |
| |
| Execution Mode |
| [ Review v ] |
| +--------------------+ |
| | Review | <-- confirm before merging |
| | YOLO | <-- auto-merge, no review |
| +--------------------+ |
| |
| Projects |
| +----------------------------------------------------+ |
| | [x] backend github.com/org/backend-api | |
| | [ ] frontend github.com/org/frontend-app | |
| | [ ] shared github.com/org/shared-lib | |
| | + Register new project | |
| +----------------------------------------------------+ |
| |
| [ Cancel ] [ Create ] |
+----------------------------------------------------------+
```
**Fields**:
- Name (required text input)
- Branch (optional text input)
- Execution Mode (select: Review / YOLO)
- Projects (ProjectPicker: checkbox list + register link)
**Source**: `packages/web/src/components/CreateInitiativeDialog.tsx`
---
## Register Project Dialog
**Trigger**: "Register Project" button on `/settings/projects` or "+ Register new project" in ProjectPicker
```
+----------------------------------------------------------+
| Register Project [x] |
| |
| Project Name * |
| [backend-api_______________________________________] |
| |
| Repository URL * |
| [https://github.com/org/backend-api________________] |
| |
| Default Branch |
| [main______________________________________________] |
| |
| [ Cancel ] [ Register ] |
+----------------------------------------------------------+
```
**Fields**:
- Project Name (required, unique)
- Repository URL (required, unique, git repo URL)
- Default Branch (text input, defaults to "main")
**Source**: `packages/web/src/components/RegisterProjectDialog.tsx`
---
## Refine Spawn Dialog
**Trigger**: "Refine with Agent" button in Content tab or "Retry" after crash
```
+----------------------------------------------------------+
| Refine Content [x] |
| |
| Instructions (optional) |
| +----------------------------------------------------+ |
| | Focus on the authentication flow section. | |
| | Add more detail about the OAuth providers we | |
| | need to support. | |
| | | |
| +----------------------------------------------------+ |
| |
| [ Cancel ] [ Start ] |
+----------------------------------------------------------+
```
**Fields**:
- Instructions (optional textarea, free-form guidance for the agent)
**Source**: `packages/web/src/components/editor/RefineSpawnDialog.tsx`
---
## Task Detail Modal
**Trigger**: Click any task row in Plan tab or Execution tab
```
+----------------------------------------------------------+
| Implement PKCE Flow [x] |
| |
| +------------------------+-------------------------+ |
| | Status [IN_PROGRESS]| Priority normal | |
| | Phase 2. OAuth Flow| Type execute | |
| | Agent blue-fox-7 | |
| +------------------------+-------------------------+ |
| |
| Description |
| Implement the OAuth 2.0 PKCE extension for public |
| clients. Generate code verifier/challenge pair, |
| include in authorization request, and validate |
| during token exchange. |
| |
| Dependencies |
| * Set up OAuth routes [DONE] |
| |
| Blocks |
| * GitHub provider adapter [BLOCKED] |
| * Microsoft provider adapter [PENDING] |
| |
| [ Queue Task ] [ Stop Task ] |
+----------------------------------------------------------+
```
**Fields** (read-only):
- 2-column metadata grid: Status, Priority, Phase, Type, Agent
- Description text
- Dependencies list (with StatusDot per dep)
- Blocks list (dependents)
**Actions**:
- Queue Task (disabled if already running/queued)
- Stop Task (disabled if not running)
**Source**: `packages/web/src/components/TaskDetailModal.tsx`
---
## Delete Subpage Dialog
**Trigger**: Auto-triggered when a page link is deleted in the Tiptap editor
```
+----------------------------------------------------------+
| Delete Subpage? [x] |
| |
| You removed a link to "Token Rotation". Do you |
| want to delete the subpage as well? |
| |
| [ Keep Subpage ] [ Delete ] |
+----------------------------------------------------------+
```
**Source**: `packages/web/src/components/editor/DeleteSubpageDialog.tsx`
---
## Confirmation Dialogs (window.confirm)
Used for destructive actions throughout the app. All support **Shift+click to bypass**.
| Action | Trigger Location | Message |
|--------|-----------------|---------|
| Delete initiative | Initiative card `...` menu | "Delete this initiative?" |
| Archive initiative | Initiative card `...` menu | "Archive this initiative?" |
| Delete phase | Phase detail `...` menu | "Delete this phase?" |
| Delete task | Task row `[x]` button | "Delete this task?" |
| Delete project | Project card trash button | "Delete this project?" |
| Delete agent | Agent actions menu | "Delete this agent?" |
## Source (shared)
- `packages/web/src/components/ProjectPicker.tsx`