# Initiative Detail Wireframe

The Initiative Detail screen shows the hierarchical breakdown of an initiative into phases and tasks. It provides visibility into progress, dependencies, and agent assignments.

## ASCII Wireframe

```
+--------------------------------------------------------------------------------+
|  <- Back to Dashboard            INITIATIVE DETAIL                    [Actions]|
+--------------------------------------------------------------------------------+
|                                                                                 |
|  +--------------------------------------------------------------------------+  |
|  | # User Authentication System                                    [ACTIVE] |  |
|  | Created: 2026-01-15  |  Updated: 2026-02-01  |  By: user                 |  |
|  +--------------------------------------------------------------------------+  |
|                                                                                 |
|  +---------------------------+  +--------------------------------------------+  |
|  |     PROGRESS              |  |  KEY DECISIONS                             |  |
|  |                           |  |                                            |  |
|  |  [==========------] 67%   |  |  v Authentication Method                   |  |
|  |                           |  |    JWT with httpOnly cookies               |  |
|  |  Phases: 2/3 complete     |  |    Reason: XSS protection, refresh tokens  |  |
|  |  Tasks: 18/27 complete    |  |                                            |  |
|  |                           |  |  v Token Expiry                            |  |
|  +---------------------------+  |    15min access / 7d refresh               |  |
|                                 |    Reason: Balance security & UX           |  |
|                                 |                                            |  |
|                                 |  > Session Storage (collapsed)             |  |
|                                 |  > Password Policy (collapsed)             |  |
|                                 +--------------------------------------------+  |
|                                                                                 |
|  +---------------------------------------------------------------------------+ |
|  |  PHASES                                                      [Queue All]  | |
|  +---------------------------------------------------------------------------+ |
|                                                                                 |
|  v Phase 1: Core Infrastructure ------------------------------------ COMPLETE  |
|    |                                                                           |
|    |-- Task: Initialize repository --------------------------------- DONE     |
|    |-- Task: Configure TypeScript ---------------------------------- DONE     |
|    |-- Task: Setup build pipeline ---------------------------------- DONE     |
|    |-- Task: Create bin entry -------------------------------------- DONE     |
|    |-- Task: Add commander integration ----------------------------- DONE     |
|    |-- Task: Create ProcessManager --------------------------------- DONE     |
|    |-- Task: Implement graceful shutdown --------------------------- DONE     |
|    +-- Task: Add signal handlers ----------------------------------- DONE     |
|                                                                                 |
|  v Phase 2: Data Layer ----------------------------------------- IN PROGRESS  |
|    |                                                                           |
|    |-- Task: Create schema ----------------------------------------- DONE     |
|    |-- Task: Run migrations --------------- [gastown] --------- IN PROGRESS  |
|    |-- Task: User repository -------------------- [blocked] ------- PENDING   |
|    |       ^ blocked by: Run migrations                                       |
|    |-- Task: Task repository -------------------- [blocked] ------- PENDING   |
|    |       ^ blocked by: Run migrations                                       |
|    +-- Task: Init repository -------------------- [blocked] ------- PENDING   |
|            ^ blocked by: User repository, Task repository                     |
|                                                                                 |
|  > Phase 3: Git Integration (0/6 tasks) ----------------------------- PENDING  |
|    ^ blocked by: Phase 2                                                       |
|                                                                                 |
+----------------------------------------------------------------------------------+

Legend:
  v  = Expanded section (click to collapse)
  >  = Collapsed section (click to expand)
  ^  = Dependency indicator

Status Indicators:
  DONE / COMPLETE  = Task/phase finished
  IN PROGRESS      = Currently being worked on
  PENDING          = Not yet started
  BLOCKED          = Has unresolved dependencies
  [agent-name]     = Agent assigned to task
```

## Expanded View: Task with Agent

```
+-- Task: Run migrations -------------------------------------------- IN PROGRESS
|
|   Assigned to: gastown                    Started: 2026-02-01 14:30
|   Worktree: ~/.cw-worktrees/gastown       Duration: 12m 34s
|
|   +------------------------------------------------------------------+
|   | Last output (3 min ago):                                         |
|   | > Running migration 003_add_sessions...                          |
|   | > Creating index on sessions.user_id...                          |
|   +------------------------------------------------------------------+
|
|   [View Logs]  [View Worktree]  [Stop Agent]
```

## Expanded View: Blocked Task with Dependencies

```
+-- Task: Init repository --------------------------------------------- PENDING
|
|   ^ Blocked by:
|   |   Task: User repository (PENDING)
|   |   Task: Task repository (PENDING)
|
|   Dependencies must complete before this task can start.
|
|   [Spawn Agent]  (disabled - blocked)
```

## Component Specifications

### PhaseAccordion

Container for a phase that can be expanded/collapsed to show its tasks.

**Props:**
| Prop | Type | Description |
|------|------|-------------|
| `phase` | `Phase` | Phase entity with status, number, name |
| `tasks` | `Task[]` | Tasks belonging to this phase |
| `expanded` | `boolean` | Whether section is expanded |
| `onToggle` | `() => void` | Toggle expand/collapse |

**Behavior:**
- Default: First incomplete phase expanded, completed phases collapsed
- Click header to toggle expand/collapse
- Shows phase status badge (COMPLETE, IN PROGRESS, PENDING, BLOCKED)
- Shows task count: `(completed/total tasks)`
- Shows dependency indicator if blocked by another phase

### TaskRow

Single task row with status, assignment, and actions.

**Props:**
| Prop | Type | Description |
|------|------|-------------|
| `task` | `Task` | Task entity with title, status, assigned_to |
| `depth` | `number` | Nesting depth for indentation |
| `isLast` | `boolean` | Whether this is last sibling (affects connector) |

**Behavior:**
- Click row opens TaskDetailModal
- Shows agent name inline if assigned: `[agent-name]`
- Shows status: DONE, IN PROGRESS, PENDING, BLOCKED
- Pending tasks show "Spawn Agent" on hover
- Tree connectors: `|--` for siblings, `+--` for last item

### DependencyIndicator

Shows what's blocking a task or phase.

**Props:**
| Prop | Type | Description |
|------|------|-------------|
| `blockedBy` | `Dependency[]` | Array of blocking items |
| `type` | `'task' \| 'phase'` | What level this dependency is at |

**Behavior:**
- Renders `^` symbol with hover tooltip
- Clicking shows full dependency path
- Format: `blocked by: {task/phase name}`

### DecisionList

Collapsible list of key decisions made for this initiative.

**Props:**
| Prop | Type | Description |
|------|------|-------------|
| `decisions` | `Decision[]` | Array of {topic, decision, reason} |
| `maxVisible` | `number` | How many to show before "show more" |

**Behavior:**
- Each decision is collapsible (topic visible, details expand)
- `v` prefix for expanded, `>` for collapsed
- Shows topic as header, decision and reason as details

### ProgressPanel

Shows overall progress metrics for the initiative.

**Props:**
| Prop | Type | Description |
|------|------|-------------|
| `phasesComplete` | `number` | Completed phases count |
| `phasesTotal` | `number` | Total phases |
| `tasksComplete` | `number` | Completed tasks count |
| `tasksTotal` | `number` | Total tasks |

**Behavior:**
- Progress bar shows percentage based on tasks
- Breakdown by phase and task counts

## Interaction Notes

### Click Actions

| Element | Action |
|---------|--------|
| Phase header | Expand/collapse phase |
| Task row | Opens TaskDetailModal |
| Agent name `[gastown]` | Navigates to agent detail view |
| "Spawn Agent" button | Opens agent spawn dialog for this task |
| "Queue Phase" button | Dispatches all pending tasks in phase to queue |
| "Queue All" button | Dispatches all pending tasks across all phases |
| Back button | Returns to Initiative Dashboard |
| Decision topic | Expand/collapse decision details |

### TaskDetailModal

When clicking a task row, a modal opens with:

```
+------------------------------------------------------+
|  Task: Run migrations                            [X] |
+------------------------------------------------------+
|                                                      |
|  Status: IN PROGRESS          Priority: Normal       |
|  Phase: Data Layer            Started: 14:30         |
|  Assigned: gastown                                   |
|                                                      |
|  Description:                                        |
|  Run database migrations for user and session        |
|  tables. Verify indexes created correctly.           |
|                                                      |
|  Dependencies:                                       |
|  - Task: Create schema (DONE)                        |
|                                                      |
|  Blocks:                                             |
|  - Task: User repository                             |
|  - Task: Task repository                             |
|                                                      |
|  [View Agent Logs]  [Stop Task]  [Mark Complete]     |
+------------------------------------------------------+
```

### Agent Spawn Dialog

When clicking "Spawn Agent" on a pending task:

```
+------------------------------------------------------+
|  Spawn Agent for Task                            [X] |
+------------------------------------------------------+
|                                                      |
|  Task: User repository                               |
|  Phase: Data Layer                                   |
|                                                      |
|  Agent name: [auto-generated: yaletown]              |
|  Mode: [Execute v]                                   |
|                                                      |
|  The agent will:                                     |
|  1. Create isolated git worktree                     |
|  2. Execute the task                                 |
|  3. Report completion or questions                   |
|                                                      |
|  [Cancel]                            [Spawn Agent]   |
+------------------------------------------------------+
```

## Status Colors

| Status | Color | Meaning |
|--------|-------|---------|
| COMPLETE / DONE | Green | Work finished |
| IN PROGRESS / ACTIVE | Blue | Currently being worked |
| PENDING | Gray | Not yet started |
| BLOCKED | Orange | Has unresolved dependencies |

## Responsive Considerations

- On narrow screens, collapse the KEY DECISIONS panel
- Phase tree maintains full width for readability
- Task rows truncate long titles with ellipsis
- Agent names link to agent detail in all views

---
*Wireframe for: Initiative Detail Screen*
*Part of: Codewalkers Frontend Design*
