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

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

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

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.

<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

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

Task 1: Create wireframes directory and initiative dashboard wireframe docs/wireframes/initiative-dashboard.md 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. File exists at docs/wireframes/initiative-dashboard.md with ASCII wireframe and specs Initiative dashboard wireframe documented with all required sections

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

<success_criteria>

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

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