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)
359 lines
13 KiB
Markdown
359 lines
13 KiB
Markdown
# 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 `disabled` during 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]` is `Loader2` from Lucide with `animate-spin h-4 w-4 mr-2`
|
|
- Button text changes to present participle: "Create" -> "Creating...", "Register" -> "Registering...", "Start" -> "Starting...", "Delete" -> "Deleting..."
|
|
- Button is `disabled` during 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.tsx`
|
|
- `packages/web/src/components/ui/dialog.tsx`
|
|
- `packages/web/src/components/ui/button.tsx`
|