# Execution Tab (`?tab=execution`)

Horizontally scrollable kanban-style pipeline graph. Columns represent dependency levels computed via topological sort.

## Default State

```
+============================================================================+
|  < Back                                                                    |
|  Auth System Overhaul    [ACTIVE]  [YOLO]  [git] main  [P] backend       |
|  [ Content ]  [ Plan ]  [*Execution*]  [ Review ]                        |
+============================================================================+
|                                                                            |
|  <-- horizontally scrollable pipeline graph -->                            |
|                                                                            |
|  +----------+         +----------+         +----------+                    |
|  | Level 0  |  -----> | Level 1  |  -----> | Level 2  |                   |
|  +----------+         +----------+         +----------+                    |
|                                                                            |
|  +---------+          +---------+          +---------+                     |
|  | Phase 1 |   --->   | Phase 2 |   --->   | Phase 4 |                    |
|  | DB Schm |   |      | OAuth   |   |      | Testing |                    |
|  | [DONE]  |   |      | [READY] |   |      | [PEND]  |                    |
|  |---------|   |      |---------|   |      |---------|                     |
|  | * task1 |   |      | * task1 |   |      | * task1 |                    |
|  | * task2 |   |      | * task2 |   |      | * task2 |                    |
|  | * task3 |   |      | * task3 |   |      |         |                    |
|  +---------+   |      +---------+   |      +---------+                     |
|                |                    |                                       |
|                |      +---------+   |                                      |
|                |      | Phase 3 |   |                                      |
|                --->   | UI Comp |---                                       |
|                       | [PEND]  |                                          |
|                       |---------|                                          |
|                       | * task1 |                                          |
|                       | * task2 |                                          |
|                       +---------+                                          |
|                                                                            |
+============================================================================+
```

## Pipeline Stage Column

```
+-----------+
|  Level N  |    <-- column header
+-----------+
|           |
| +-------+ |
| | Phase | |    <-- PipelinePhaseGroup cards stacked vertically
| +-------+ |
|           |
| +-------+ |
| | Phase | |
| +-------+ |
|           |
+-----------+
```

## Pipeline Phase Group

```
+-----------------------------------------+
|  * Phase 2: OAuth Flow  [READY]  [play] |    <-- status dot + name + queue btn
|-----------------------------------------|
|  [play] Set up OAuth routes   [PENDING] |    <-- hover reveals play button
|  [play] Implement PKCE flow   [PENDING] |
|  [ .. ] Google provider       [RUNNING] |    <-- running = no play button
|  [    ] GitHub provider       [BLOCKED] |    <-- blocked = no play button
|  [play] Microsoft provider    [PENDING] |
+-----------------------------------------+
```

- Phase header: `StatusDot` + phase name + `StatusBadge` + queue button (plays icon)
- Task rows: play button (hover-visible) + task name + `StatusBadge`
- Queue button on phase header queues all eligible tasks
- Queue button on task queues individual task
- Clicking a task opens `<TaskDetailModal>`

## Connector Arrows

```
  +--------+                    +--------+
  | Phase  |  ----[>]------>   | Phase  |
  +--------+                    +--------+

  horizontal line + triangle arrow between columns
```

## Empty State (no phases)

Same as Plan tab empty state:

```
+============================================================================+
|                                                                            |
|                    No phases yet                                           |
|                                                                            |
|         [spinner] Planning phases...                                       |
|            -- or --                                                        |
|         [sparkles Plan Phases]  or  [ Add Phase ]                          |
|                                                                            |
+============================================================================+
```

## Source

- `packages/web/src/components/pipeline/PipelineTab.tsx`
- `packages/web/src/components/pipeline/PipelineStageColumn.tsx`
- `packages/web/src/components/pipeline/PipelinePhaseGroup.tsx`
- `packages/web/src/components/pipeline/PipelineTaskCard.tsx`