Files
Codewalkers/docs/wireframes/initiative-detail.md
Lukas May 89db580ca4 docs: Add ASCII wireframe mockups for all frontend pages
Covers: app layout, initiatives list, initiative detail (4 tabs),
agents page, inbox, settings (health + projects), and all dialogs.
2026-03-02 17:28:14 +09:00

5.5 KiB

Initiative Detail (/initiatives/$id)

Detail page for a single initiative with tabbed content areas.

Default State

+============================================================================+
|  CODEWALK DISTRICT                                                         |
|  [*Initiatives*]  [ Agents ]  [ Inbox ]  [ Settings ]                     |
+============================================================================+
|                                                                            |
|  < Back                                                                    |
|                                                                            |
|  Auth System Overhaul    [ACTIVE]  [YOLO]  [git] main  [proj] backend     |
|                                                                            |
|  [ Content ]  [ Plan ]  [*Execution*]  [ Review ]                         |
|  -----------------------------------------------------------------         |
|                                                                            |
|                      <Tab Content Area>                                    |
|                                                                            |
|                                                                            |
|                                                                            |
+============================================================================+

Initiative Header

+------------------------------------------------------------------------+
|  [<]  Initiative Name       [STATUS]  [MODE]  [git] branch  [P] proj  |
+------------------------------------------------------------------------+

Header Elements

  [<]                          Back chevron (navigates to /initiatives)
  Initiative Name              h1, bold
  [ACTIVE]                     StatusBadge (color-coded)
  [YOLO] / [REVIEW]           Execution mode (clickable toggle)
  [git] cw/auth-overhaul      Branch badge (GitBranch icon + name)
  [P] backend                  Project badge(s), one per linked project

Branch Editing (click branch badge)

  [git] [ cw/auth-overhaul______ ] [v] [x]

No Branch Yet

  [<]  Initiative Name  [ACTIVE]  [YOLO]  [+ branch]  [P] proj

Project Editing (click pencil on project badges)

+------------------------------------------------------------------------+
|  [<]  Initiative Name  [ACTIVE]  [YOLO]  [git] branch                 |
|                                                                        |
|  +----------------------------------+                                  |
|  | [x] backend   github.com/...    |                                  |
|  | [ ] frontend  github.com/...    |                                  |
|  | [ ] shared    github.com/...    |                                  |
|  | + Register new project          |                                  |
|  +----------------------------------+                                  |
|  [ Save ]  [ Cancel ]                                                  |
+------------------------------------------------------------------------+

No Projects Yet

  [<]  Initiative Name  [ACTIVE]  [YOLO]  [git] branch  [+ Add projects]

Tab Bar

  [ Content ]  [ Plan ]  [*Execution*]  [ Review ]
  ------------------------------------------------
                          ^^^^^^^^^^
                          active tab (underlined/highlighted)

Tabs set ?tab= URL search param. Default is content.

Loading State

+============================================================================+
|  < Back                                                                    |
|                                                                            |
|  ░░░░░░░░░░░░░░░░░░   ░░░░░░   ░░░░░░   ░░░░░░░░░░░                     |
|                                                                            |
|  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░                    |
|  +--------------------------+  +--------------------------+                |
|  | ░░░░░░░░░░░░░░░░░░░░░░  |  | ░░░░░░░░░░░░░░░░░░░░░░  |               |
|  | ░░░░░░░░░░░░░░          |  | ░░░░░░░░░░░░░░          |               |
|  +--------------------------+  +--------------------------+                |
|                                                                            |
+============================================================================+

Error State

+============================================================================+
|                                                                            |
|                        (!) Error loading initiative                        |
|                        Could not fetch initiative data                     |
|                                                                            |
|                        [ Back to Dashboard ]                               |
|                                                                            |
+============================================================================+

Source

  • packages/web/src/routes/initiatives/$id.tsx
  • packages/web/src/components/InitiativeHeader.tsx