# Plan Tab (`?tab=plan`) Two-column layout: phase sidebar (260px) + phase detail panel. ## Default State (phases exist, one selected) ``` +============================================================================+ | < Back | | Auth System Overhaul [ACTIVE] [YOLO] [git] main [P] backend | | [ Content ] [*Plan*] [ Execution ] [ Review ] | +============================================================================+ | | | | PHASES [+][detail] Phase 2: Implement OAuth [READY] [...] | | | | | +--------+ | +--------------------------------------------------------+ | | | 1. DB | | | | | | | Schema | | | Implement the OAuth 2.0 authorization code flow | | | | [DONE] | | | with PKCE extension for public clients. | | | | 3/3 | | | | | | +--------+ | | Support Google, GitHub, and Microsoft as identity | | | +--------+ | | providers with configurable scopes. | | | | 2. OAuth| | | | | | | Flow | | +--------------------------------------------------------+ | | |*[READY]*| | | | | 0 tasks| | Dependencies | | | dep: 1 | | [+ Add dependency v] | | +--------+ | * Phase 1: DB Schema [DONE] [x] | | +--------+ | | | | 3. UI | | Tasks (0/5) | | | [PEND] | | ├── Set up OAuth routes [PENDING] [x] | | | 5 tasks| | ├── Implement PKCE flow [PENDING] [x] | | | dep:1,2| | ├── Google provider adapter [RUNNING] agent-1 [x] | | +--------+ | ├── GitHub provider adapter [BLOCKED] [x] | | | | blocked by: Google provider adapter | | 260px | └── Microsoft provider adapter [PENDING] [x] | | | | +============================================================================+ ``` ## Phase Sidebar ``` +------------+ | PHASES [+][sparkles] <-- [+] adds phase, [sparkles] details all phases | | | +--------+ | | | 1 | | Phase number | | DB | | Phase name (truncated) | | Schema | | | | [DONE] | | StatusBadge (small) | | 3/3 | | "X/Y tasks" count | +--------+ | | +--------+ | | |*2 *| | * = active/selected (left blue border + accent bg) | | OAuth | | | | Flow | | | |[READY] | | | | 0 tasks| | "Needs decomposition" if 0 tasks | | dep: 1 | | "depends on: Phase X" (if dependencies) | +--------+ | | | | [New phase name___] <-- inline input when adding | | +------------+ ``` ## Phase Actions (sidebar header) ``` PHASES [Detailing (2)] [+] [Detail All] ^^^^^^^^^^^^^^ ^^^^^^^^^^^ spinner when agents sparkles icon are detailing disabled if no eligible phases ``` ## Phase Detail Panel ### Header ``` +------------------------------------------------------------------------+ | Phase 2: Implement OAuth Flow [READY] [git] branch [...] | | | | | branch badge v | +--------+ | | Delete | | | Phase | | +--------+ +------------------------------------------------------------------------+ ``` - Phase name is editable (click to toggle inline input) - `[...]` dropdown: Delete Phase ### When No Tasks and No Agent Running ``` +------------------------------------------------------------------------+ | Phase 2: Implement OAuth Flow [READY] [ Detail Tasks ] | +------------------------------------------------------------------------+ ``` ### Detailing In Progress ``` +------------------------------------------------------------------------+ | Phase 2: Implement OAuth Flow [READY] [spinner] Detailing | +------------------------------------------------------------------------+ ``` ### Pending Review Banner ``` +------------------------------------------------------------------------+ | [!] This phase is pending review. Go to the Review tab to review. | +------------------------------------------------------------------------+ ``` ### Phase Content Editor ``` +------------------------------------------------------------------------+ | Implement the OAuth 2.0 authorization code flow with PKCE | | extension for public clients. | | | | Support Google, GitHub, and Microsoft as identity providers | | with configurable scopes. | +------------------------------------------------------------------------+ ``` Tiptap editor, auto-saves via `usePhaseAutoSave`. ### Dependencies Section ``` Dependencies [+ Add dependency v] <-- dropdown of other phases * Phase 1: DB Schema [DONE] [x] <-- status dot + remove button * Phase 4: Testing [PENDING] [x] ``` ### ChangeSet Banner (after detail agent completes) ``` +------------------------------------------------------------------------+ | [v] 5 tasks created [>] expand | | | | + task "Set up OAuth routes" | | + task "Implement PKCE flow" | | + task "Google provider adapter" | | + task "GitHub provider adapter" | | + task "Microsoft provider adapter" | | | | [ Revert ] [ Dismiss ] | +------------------------------------------------------------------------+ ``` ### Tasks Section ``` Tasks (3/5) ├── Set up OAuth routes [PENDING] [x] ├── Implement PKCE flow [PENDING] [x] ├── Google provider adapter [RUNNING] agent: blue-fox-7 [x] ├── GitHub provider adapter [BLOCKED] [x] | blocked by: Google provider adapter └── Microsoft provider adapter [PENDING] [x] ``` - Tree connectors: `├──` for middle items, `└──` for last - Agent name links to `/inbox` when assigned - Delete `[x]` appears on hover (Shift+click bypasses confirm) - `` shown below blocked tasks - Clicking a task row opens `` ## Empty State (no phases) ``` +============================================================================+ | | | | PHASES [+] | | | | No phases yet | | | | | | [spinner] Planning phases... | | | -- or -- | | | [sparkles Plan Phases] or [ Add Phase ] | | | | +============================================================================+ ``` ## Task Detail Modal (overlay) ``` +----------------------------------------------------------+ | Set up OAuth routes [x] | | | | Status [PENDING] | Priority normal | | Phase 2. OAuth Flow | Type execute | | Agent (none) | | | | | Description | | Create Express routes for /auth/login, /auth/callback, | | and /auth/logout with proper middleware chain. | | | | Dependencies | | * DB Schema Migration [DONE] | | | | Blocks | | * GitHub provider adapter [BLOCKED] | | | | [ Queue Task ] [ Stop Task ] | +----------------------------------------------------------+ ``` ## Source - `packages/web/src/components/ExecutionTab.tsx` - `packages/web/src/components/execution/PhaseSidebarItem.tsx` - `packages/web/src/components/execution/PhaseDetailPanel.tsx` - `packages/web/src/components/execution/PhaseActions.tsx` - `packages/web/src/components/execution/PlanSection.tsx` - `packages/web/src/components/TaskRow.tsx` - `packages/web/src/components/TaskDetailModal.tsx`