---
phase: 15-frontend-wireframes
plan: 02
type: execute
wave: 1
depends_on: []
files_modified: [docs/wireframes/initiative-detail.md]
autonomous: true
---

<objective>
Create markdown wireframe for the Initiative Detail screen showing phase/task breakdown.

Purpose: Document the hierarchical view of initiative → phase → plan → task with dependencies and status.
Output: docs/wireframes/initiative-detail.md with ASCII wireframe and component specifications.
</objective>

<execution_context>
@~/.claude/get-shit-done/workflows/execute-plan.md
@~/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md

@docs/initiatives.md
@docs/tasks.md

Key entities to visualize:
- Initiative: title, status, description, decisions made
- Phase: number, name, status, dependencies
- Plan: number, name, tasks count, wave
- Task: title, status, assigned_to (agent name), dependencies
- Dependency graph visualization
</context>

<tasks>

<task type="auto">
  <name>Task 1: Create initiative detail wireframe with hierarchical breakdown</name>
  <files>docs/wireframes/initiative-detail.md</files>
  <action>
Create initiative-detail.md with:

1. ASCII wireframe showing:
   - Header: Initiative title, status badge, back button
   - Progress section: Overall progress bar, phases completed count
   - Decisions panel: Collapsible list of key decisions made
   - Phase list (expandable/collapsible):
     ```
     ▼ Phase 1: Core Infrastructure ✓
       ├─ Plan 01: Project Foundation (3/3 tasks) ✓
       ├─ Plan 02: CLI Entry Point (2/2 tasks) ✓
       └─ Plan 03: Process Management (3/3 tasks) ✓

     ▼ Phase 2: Data Layer [IN PROGRESS]
       ├─ Plan 01: Database Setup (1/2 tasks) ●
       │    ├─ Task: Create schema ✓
       │    └─ Task: Run migrations [gastown] ●
       └─ Plan 02: Repository Layer (0/3 tasks) ○
            ├─ Task: User repository ○
            ├─ Task: Task repository ○
            └─ Task: Init repository ○ [blocked by Plan 01]

     ▶ Phase 3: Git Integration (0/2 plans) ○
     ```
   - Status indicators: ✓ complete, ● in_progress, ○ pending, ⚠ blocked
   - Agent assignment shown inline with task
   - Dependency arrows/indicators for blocked tasks

2. Component specifications:
   - PhaseAccordion: props (phase), expandable phase container
   - PlanTree: props (plan), nested task list
   - TaskRow: props (task), inline status and assignment
   - DependencyIndicator: props (blockedBy), shows what's blocking
   - DecisionList: props (decisions[]), collapsible decisions

3. Interaction notes:
   - Click phase → expand/collapse
   - Click task → opens task detail modal
   - Click agent name → navigates to agent detail
   - "Spawn Agent" button on pending tasks without assignment
   - "Queue Phase" button to dispatch all pending tasks in phase

Use tree-style ASCII for hierarchy. Show clear parent-child relationships.
  </action>
  <verify>File exists at docs/wireframes/initiative-detail.md with hierarchical wireframe</verify>
  <done>Initiative detail wireframe documented with phase/plan/task hierarchy</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] docs/wireframes/initiative-detail.md exists
- [ ] Wireframe shows expandable phase hierarchy
- [ ] Task dependencies visualized
- [ ] Agent assignments shown
- [ ] Component specifications defined
</verification>

<success_criteria>

- Initiative detail wireframe created
- Hierarchy (phase → plan → task) clearly shown
- Status indicators defined
- Dependency visualization included
</success_criteria>

<output>
After completion, create `.planning/phases/15-frontend-wireframes/15-02-SUMMARY.md`
</output>