# 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)
- `<DependencyIndicator>` shown below blocked tasks
- Clicking a task row opens `<TaskDetailModal>`

## 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`
