# Plan Tab (v2) ### Route: `/initiatives/$id` (Plan tab) ### Source: `packages/web/src/components/ExecutionTab.tsx`, `packages/web/src/components/execution/` --- ## v1 -> v2 Changes | Aspect | v1 | v2 | |--------|----|----| | Save indicator | None on phase description editor | `` component (same as Content tab) | | Empty state (no agent) | Single "No phases yet" with both spinner and buttons shown contextually | Split: dedicated "No phases yet" empty state with action buttons | | Empty state (agent running) | Spinner + "Planning phases..." inline with buttons | Dedicated "Planning in progress..." state, NO action buttons | | Pending review | Banner only on individual phase detail | Additional top-level banner when proposals exist initiative-wide | --- ## Default State (phases exist, one selected) ``` +=============================================================================+ | Phases [+] | Phase: OAuth Implementation | | --------------------------+ [✓] Saved | | +------------------------+| ------------------------------------------------| | | 1. Auth Setup || Description: | | | [DONE] 3/3 || Implement OAuth 2.0 authorization code flow | | +------------------------+| with PKCE extension for public clients. | | +------------------------+| | | |*2. OAuth Flow *|| Support Google, GitHub, and Microsoft as | | | [READY] 0 tasks || identity providers with configurable scopes. | | | dep: 1 || | | +------------------------+| Dependencies | | +------------------------+| [+ Add dependency v] | | | 3. UI Components || * Phase 1: Auth Setup [DONE] [x] | | | [PENDING] 5 tasks || | | | dep: 1, 2 || Tasks (0/5) [+ Add Task] | | +------------------------+| ├── Set up OAuth routes * [DONE] | | | ├── Implement PKCE flow * [RUNNING] | | | │ agent: blue-fox-7 | | 260px | ├── Google provider [PENDING] [x] | | | ├── GitHub provider [BLOCKED] [x] | | | │ blocked by: Google provider | | | └── Microsoft provider [PENDING] [x] | | | | +=============================================================================+ ``` - Phase sidebar: 260px, `border-right` - Selected phase: left blue border + `bg-accent` background - `[+]` in header triggers `handleStartAdd` (inline input at bottom of list) - `[✓] Saved` shows after phase description auto-save completes - Task `[x]` delete buttons appear on hover; Shift+click bypasses confirm dialog --- ## Phase Sidebar Cards ``` +------------------------+ | 1. Auth Setup | Phase number + name (truncated) | [DONE] 3/3 | StatusBadge (small) + "complete/total tasks" +------------------------+ +------------------------+ |*2. OAuth Flow *| * = selected (border-l-2 border-primary bg-accent) | [READY] 0 tasks | "0 tasks" when no tasks decomposed yet | dep: 1 | dependency indicator +------------------------+ +------------------------+ | 3. UI Components | | [PENDING] 5 tasks | | dep: 1, 2 | multiple dependency shorthand +------------------------+ ``` --- ## Phase Actions (sidebar header) ``` Phases [Detailing (2)] [+] [Detail All] ^^^^^^^^^^^^^^ ^^^^^^^^^^^ spinner + count sparkles icon when detail agents disabled when no are active eligible phases ``` - `[Detailing (N)]` spinner badge shows when N detail agents are running - `[Detail All]` spawns detail agents for all phases with 0 tasks - `[+]` opens inline input for new phase name --- ## Save Indicator on Phase Description Same `` component as Content tab, positioned top-right of phase detail header. ### Saving ``` Phase: OAuth Implementation [spinner] Saving... ``` ### Saved ``` Phase: OAuth Implementation [✓] Saved ``` ### Failed ``` Phase: OAuth Implementation [!] Failed [retry] ``` --- ## Empty State -- No Phases (no agent running) ``` +=============================================================================+ | Phases | | | --------------------------+ | | (empty) | +------------------------------------------+ | | | | | | | | | [layers icon] | | | | | No phases yet | | | | | | | | | | Add a phase to start planning, | | | | | or let an agent plan for you. | | | | | | | | | | [sparkles Plan with Agent] [+ Add Phase] | | | | | | | | +------------------------------------------+ | | | | +=============================================================================+ ``` - Centered `EmptyState` card in the detail panel area - `[layers icon]` -- Lucide `Layers` icon, `text-muted-foreground`, 48px - Two action buttons side by side: - `[sparkles Plan with Agent]` -- primary variant, calls `planSpawn.spawn()` - `[+ Add Phase]` -- outline variant, calls `onAddPhase()` for inline input - Only shown when: `phasesLoaded && phases.length === 0 && !isPlanRunning` --- ## Empty State -- Planning in Progress (agent running) ``` +=============================================================================+ | Phases | | | --------------------------+ | | (empty) | +------------------------------------------+ | | | | | | | | | [spinner] | | | | | Planning in progress... | | | | | | | | | | Agent is analyzing the initiative | | | | | and creating phases. | | | | | | | | | +------------------------------------------+ | | | | +=============================================================================+ ``` - `[spinner]` -- `Loader2` with `animate-spin`, 32px, `text-primary` - "Planning in progress..." -- `text-base font-medium` - Subtext -- `text-sm text-muted-foreground` - NO action buttons -- prevents user from adding phases while agent works - Shown when: `phasesLoaded && phases.length === 0 && isPlanRunning` --- ## Pending Review Banner (top-level) ``` +=============================================================================+ | +---------------------------------------------------------------------+ | | | [sparkles] Agent has proposals ready for review [Go to Review ->] | | | +---------------------------------------------------------------------+ | | Phases [+] | Phase: OAuth Implementation | | --------------------------+ [✓] Saved | | ... | ... | +=============================================================================+ ``` - Full-width banner above the sidebar+detail grid - `[sparkles]` -- Lucide `Sparkles` icon, `text-amber-500` - Background: `bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800` - `[Go to Review ->]` -- text button that navigates to `?tab=review` - Shown when: proposals with `status === 'pending'` exist for this initiative - Query: `trpc.listProposals.useQuery({ initiativeId, status: 'pending' })` --- ## Phase Detail Header ``` +------------------------------------------------------------------------+ | Phase 2: OAuth Implementation [READY] [git] branch [...] | | | | | | branch badge v | | +--------+ | | Delete | | | Phase | | +--------+ +------------------------------------------------------------------------+ ``` - Phase name is inline-editable (click to toggle input) - `[...]` dropdown: Delete Phase (Shift+click bypasses confirm) - `[git] branch` badge shows initiative branch when set --- ## Detailing In Progress (per-phase) ``` +------------------------------------------------------------------------+ | Phase 2: OAuth Implementation [READY] [spinner] Detailing | +------------------------------------------------------------------------+ ``` - Shown in phase detail header when a detail agent is active for this phase - `[spinner]` -- `Loader2` with `animate-spin` --- ## Per-Phase Pending Review Banner ``` +------------------------------------------------------------------------+ | [!] This phase is pending review. Go to the Review tab to review. | +------------------------------------------------------------------------+ ``` - Shown below phase header when phase-specific proposals are pending - `[!]` -- `AlertCircle` icon, `text-amber-500` - Distinct from top-level banner (this is phase-scoped) --- ## Task Detail Modal (overlay) ``` +----------------------------------------------------------+ | Set up OAuth routes [x] | | | | Status [PENDING] | Category execute | | Phase 2. OAuth Flow | Priority normal | | 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 ] | +----------------------------------------------------------+ ``` - Opened by clicking any task row - `[x]` close button top-right - `[ Queue Task ]` dispatches the task; `[ Stop Task ]` kills the running agent - Shared component via `` in `ExecutionContext` --- ## Source - `packages/web/src/components/ExecutionTab.tsx` (Plan tab = ExecutionTab with sidebar+detail layout) - `packages/web/src/components/execution/PlanSection.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/TaskModal.tsx` - `packages/web/src/components/TaskRow.tsx` - `packages/web/src/hooks/useAutoSave.ts`