478a7f18e9
14 files in docs/wireframes/v2/ addressing 13 UX gaps from v1: - Theme spec with indigo brand, status tokens, terminal/diff tokens, dark mode, Geist typography, 6px radius, layered shadows - Wireframes for all pages with loading/error/empty states - Shared component specs (SaveIndicator, EmptyState, ErrorState, CommandPalette, ThemeToggle)
13 KiB
13 KiB
Dialogs (v2)
All modal/dialog overlays used throughout the application. v2 adds consistent loading and error states to all mutation-backed dialogs.
Source: packages/web/src/components/CreateInitiativeDialog.tsx, packages/web/src/components/RegisterProjectDialog.tsx, packages/web/src/components/RefineSpawnDialog.tsx, packages/web/src/components/TaskDetailModal.tsx, packages/web/src/components/editor/DeleteSubpageDialog.tsx
v1 -> v2 Changes
| Aspect | v1 | v2 |
|---|---|---|
| Create Initiative: Branch field | Present (optional text input) | REMOVED (auto-generated on first execution dispatch) |
| All dialogs: submit loading | Some had it, inconsistent | All show [spinner] <verb>ing... on submit button |
| All dialogs: submit error | Some had it, inconsistent | All show red error text below buttons |
Create Initiative Dialog
Trigger: "New Initiative" button on /initiatives
Default state
+----------------------------------------------------------+
| Create Initiative [x] |
| |
| Name * |
| [Auth System Overhaul___________________________] |
| |
| Execution Mode |
| [ Review v ] |
| |
| 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 ] |
+----------------------------------------------------------+
Note: Branch field has been removed. Branches are now auto-generated
(cw/<slugified-name>) on first execution task dispatch. See auto-branch
system in architecture docs.
Submitting state
+----------------------------------------------------------+
| Create Initiative [x] |
| |
| Name * |
| [Auth System Overhaul___________________________] |
| |
| Execution Mode |
| [ Review v ] |
| |
| Projects |
| +----------------------------------------------------+ |
| | [x] backend github.com/org/backend-api | |
| | [ ] frontend github.com/org/frontend-app | |
| +----------------------------------------------------+ |
| |
| [ Cancel ] [ [spinner] Creating... ] |
+----------------------------------------------------------+
[ Create ]button replaced with[ [spinner] Creating... ]- Button is
disabledduring mutation [ Cancel ]remains enabled but closing the dialog is prevented
Error state
+----------------------------------------------------------+
| Create Initiative [x] |
| |
| Name * |
| [Auth System Overhaul___________________________] |
| |
| Execution Mode |
| [ Review v ] |
| |
| Projects |
| +----------------------------------------------------+ |
| | [x] backend github.com/org/backend-api | |
| +----------------------------------------------------+ |
| |
| Failed to create initiative. |
| [ Cancel ] [ Create ] |
+----------------------------------------------------------+
- Error text:
text-sm text-destructive, centered above the footer buttons - Cleared on next submit attempt
Fields:
- Name (required text input,
autoFocus) - Execution Mode (select: Review per Phase / 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
Default state
+----------------------------------------------------------+
| Register Project [x] |
| |
| Project Name * |
| [backend-api_______________________________________] |
| |
| Repository URL * |
| [https://github.com/org/backend-api________________] |
| |
| Default Branch |
| [main______________________________________________] |
| |
| [ Cancel ] [ Register ] |
+----------------------------------------------------------+
Submitting state
| [ Cancel ] [ [spinner] Registering... ] |
Error state
| Failed to register project. |
| [ 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" button after agent crash
Default state
+----------------------------------------------------------+
| Refine Content [x] |
| |
| Instructions (optional) |
| +----------------------------------------------------+ |
| | Focus on the authentication flow section. | |
| | Add more detail about the OAuth providers we | |
| | need to support. | |
| | | |
| +----------------------------------------------------+ |
| |
| [ Cancel ] [ Start ] |
+----------------------------------------------------------+
Submitting state
| [ Cancel ] [ [spinner] Starting... ] |
Error state
| Failed to start agent. |
| [ Cancel ] [ Start ] |
Fields:
- Instructions (optional textarea, free-form guidance for the agent, 3 rows)
Source: packages/web/src/components/RefineSpawnDialog.tsx
Task Detail Modal
Trigger: Click any task row in Plan tab or Execution tab
Default state
+----------------------------------------------------------+
| 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 ] |
+----------------------------------------------------------+
Queue in progress
| [ [spinner] Queuing... ] [ Stop Task ] |
Stop in progress
| [ Queue Task ] [ [spinner] Stopping... ] |
Error state
| Failed to queue task. Try again. |
| [ Queue Task ] [ Stop Task ] |
Fields (read-only):
- 2-column metadata grid: Status (with badge), Priority, Phase, Type, Agent
- Description text
- Dependencies list (with StatusDot per dependency)
- Blocks list (dependents with StatusDot)
Actions:
[ Queue Task ]--variant="outline" size="sm", disabled if already running/queued or dependencies incomplete[ Stop Task ]--variant="destructive" size="sm", 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
Default state
+----------------------------------------------------------+
| Delete Subpage? [x] |
| |
| You removed a link to "Token Rotation". Do you |
| want to delete the subpage as well? |
| |
| [ Keep Subpage ] [ Delete ] |
+----------------------------------------------------------+
Delete in progress
| [ Keep Subpage ] [ [spinner] Deleting... ] |
Error state
| Failed to delete subpage. |
| [ Keep Subpage ] [ Delete ] |
Fields: None (confirmation dialog only)
Actions:
[ Keep Subpage ]--variant="outline", closes dialog without deleting[ Delete ]--variant="destructive", deletes the subpage and its content
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?" |
| Stop agent (from inbox) | Inbox detail [ Stop Agent ] button |
"Stop this agent? It will not be able to resume." |
Note: All window.confirm() dialogs are synchronous browser dialogs. They do not
receive the v2 loading/error treatment since the mutation fires only after confirmation.
Shared Patterns Across All Dialogs
Submit button loading state
v1: [ Create ]
v2: [ [spinner] Creating... ]
[spinner]isLoader2from Lucide withanimate-spin h-4 w-4 mr-2- Button text changes to present participle: "Create" -> "Creating...", "Register" -> "Registering...", "Start" -> "Starting...", "Delete" -> "Deleting..."
- Button is
disabledduring mutation
Error text placement
+----------------------------------------------------------+
| ...form fields... |
| |
| <error message text> |
| [ Cancel ] [ Submit ] |
+----------------------------------------------------------+
- Error text:
text-sm text-destructive - Positioned between form content and footer buttons
- Cleared automatically when the user initiates a new submit
Source (shared)
packages/web/src/components/ProjectPicker.tsxpackages/web/src/components/ui/dialog.tsxpackages/web/src/components/ui/button.tsx