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

<objective>
Create markdown wireframe for the Initiative Dashboard screen.

Purpose: Document the primary entry point UI showing all initiatives with their status, progress, and quick actions.
Output: docs/wireframes/initiative-dashboard.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

Key entities to visualize:
- Initiative: id, title, status (draft/review/approved/in_progress/completed/rejected)
- Phase: number, name, status, task counts
- Progress bar: phases_completed / phases_total
</context>

<tasks>

<task type="auto">
  <name>Task 1: Create wireframes directory and initiative dashboard wireframe</name>
  <files>docs/wireframes/initiative-dashboard.md</files>
  <action>
Create docs/wireframes/ directory structure.

Create initiative-dashboard.md with:
1. ASCII wireframe showing:
   - Header with app name and navigation
   - Initiative list with columns: Title, Status, Progress, Phases, Actions
   - Status badges (draft=gray, in_progress=blue, completed=green)
   - Progress bar visualization (████░░░░ 50%)
   - Quick actions: View, Spawn Architect, Delete
   - Empty state when no initiatives exist
   - "New Initiative" button

2. Component specifications:
   - InitiativeCard: props (initiative), displays summary row
   - ProgressBar: props (completed, total), visual bar
   - StatusBadge: props (status), color-coded badge
   - ActionMenu: props (initiativeId), dropdown with actions

3. Interaction notes:
   - Click row → navigate to initiative detail
   - Click "Spawn Architect" → opens modal for mode selection (discuss/breakdown)
   - Click "New Initiative" → navigates to create form

Use markdown with code blocks for ASCII art. Keep it simple, monospace-friendly.
  </action>
  <verify>File exists at docs/wireframes/initiative-dashboard.md with ASCII wireframe and specs</verify>
  <done>Initiative dashboard wireframe documented with all required sections</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] docs/wireframes/initiative-dashboard.md exists
- [ ] Wireframe shows initiative list layout
- [ ] Component specifications defined
- [ ] Interaction notes included
</verification>

<success_criteria>

- Initiative dashboard wireframe created
- ASCII art is readable in any text editor
- Component props documented
- Interaction behaviors specified
</success_criteria>

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