# 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] 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/`) 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... | | | | | | [ 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`