Files
Codewalkers/docs/wireframes/dialogs.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

7.4 KiB

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