Codewalkers/.planning/phases/15-frontend-wireframes/15-02-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous

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

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.

<execution_context> @/.claude/get-shit-done/workflows/execute-plan.md @/.claude/get-shit-done/templates/summary.md </execution_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

Task 1: Create initiative detail wireframe with hierarchical breakdown docs/wireframes/initiative-detail.md 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. File exists at docs/wireframes/initiative-detail.md with hierarchical wireframe Initiative detail wireframe documented with phase/plan/task hierarchy

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

<success_criteria>

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

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