docs(15): create phase plans

Phase 15: Frontend Wireframes - 3 plans in 1 wave (all parallel) - Plan 01: Initiative Dashboard wireframe - Plan 02: Initiative Detail wireframe (phase/task hierarchy) - Plan 03: Agent Inbox wireframe (Q&A flow) - Ready for execution
2026-02-02 14:54:23 +01:00
parent 8d6e2e4607
commit 736852376b
3 changed files with 342 additions and 0 deletions
--- a/.planning/phases/15-frontend-wireframes/15-01-PLAN.md
+++ b/.planning/phases/15-frontend-wireframes/15-01-PLAN.md
@@ -0,0 +1,91 @@
+---
+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>
--- a/.planning/phases/15-frontend-wireframes/15-02-PLAN.md
+++ b/.planning/phases/15-frontend-wireframes/15-02-PLAN.md
@@ -0,0 +1,114 @@
+---
+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>
--- a/.planning/phases/15-frontend-wireframes/15-03-PLAN.md
+++ b/.planning/phases/15-frontend-wireframes/15-03-PLAN.md
@@ -0,0 +1,137 @@
+---
+phase: 15-frontend-wireframes
+plan: 03
+type: execute
+wave: 1
+depends_on: []
+files_modified: [docs/wireframes/agent-inbox.md]
+autonomous: true
+---
+
+<objective>
+Create markdown wireframe for the Agent Inbox screen.
+
+Purpose: Document the message queue UI where users see questions from agents and respond to them.
+Output: docs/wireframes/agent-inbox.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
+
+Key entities from message schema:
+- Message: id, sender (agent/user), recipient, content, requiresResponse, parentMessageId
+- Question format: { id, question, options?, multiSelect? }
+- Agent: name, status (waiting_for_input), taskId, worktreeId
+
+Multi-question schema from v1.2:
+- Agents can return array of questions
+- Each question has unique ID for answer correlation
+- Options can be single-select or multi-select
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Create agent inbox wireframe</name>
+  <files>docs/wireframes/agent-inbox.md</files>
+  <action>
+Create agent-inbox.md with:
+
+1. ASCII wireframe showing:
+   - Header: "Agent Inbox" with unread count badge
+   - Message list with sender, preview, timestamp:
+     ```
+     ┌─────────────────────────────────────────────────────────────┐
+     │ Agent Inbox (3)                                    [Refresh] │
+     ├─────────────────────────────────────────────────────────────┤
+     │ ● gastown (waiting)                              2 min ago  │
+     │   "Which auth provider should we use? I need to decide..."  │
+     ├─────────────────────────────────────────────────────────────┤
+     │ ● chinatown (waiting)                            5 min ago  │
+     │   "I found 3 potential issues with the migration..."        │
+     ├─────────────────────────────────────────────────────────────┤
+     │ ○ yaletown (done)                               15 min ago  │
+     │   "Task completed: Created user schema"                     │
+     └─────────────────────────────────────────────────────────────┘
+     ```
+
+   - Message detail panel (expanded view):
+     ```
+     ┌─────────────────────────────────────────────────────────────┐
+     │ gastown → You                              2 minutes ago    │
+     │ Task: Implement auth middleware                             │
+     │ Worktree: .cw-worktrees/gastown                            │
+     ├─────────────────────────────────────────────────────────────┤
+     │ Q1: Which authentication provider should we use?            │
+     │                                                             │
+     │   ○ Supabase Auth - Built-in with our DB                   │
+     │   ○ Clerk - Beautiful pre-built UI                         │
+     │   ○ NextAuth.js - Self-hosted, maximum control             │
+     │   ○ Other: [________________]                              │
+     │                                                             │
+     │ Q2: Should we implement refresh token rotation?             │
+     │                                                             │
+     │   ○ Yes - More secure                                       │
+     │   ○ No - Simpler implementation                            │
+     │                                                             │
+     │                              [Cancel]  [Send Answers]       │
+     └─────────────────────────────────────────────────────────────┘
+     ```
+
+   - Multi-select question variant (checkboxes instead of radio)
+   - Free-text answer option ("Other" field)
+   - Notification/completion messages (no response needed)
+   - Empty state: "No pending messages"
+
+2. Component specifications:
+   - InboxList: props (messages[]), filterable by status
+   - MessageCard: props (message), shows preview + metadata
+   - MessageDetail: props (message), full question display
+   - QuestionForm: props (questions[]), renders all questions
+   - OptionGroup: props (options[], multiSelect), radio/checkbox group
+   - FreeTextInput: props (placeholder), for "Other" answers
+
+3. Interaction notes:
+   - Click message → expands detail panel
+   - Select answers → enables "Send Answers" button
+   - Send Answers → calls agent resume with answers, closes detail
+   - Completed messages can be dismissed/archived
+   - Real-time updates when agents send new messages
+
+4. Filter/sort options:
+   - Filter: All, Waiting, Completed
+   - Sort: Newest first (default), Oldest first
+  </action>
+  <verify>File exists at docs/wireframes/agent-inbox.md with inbox and detail wireframes</verify>
+  <done>Agent inbox wireframe documented with message list and detail views</done>
+</task>
+
+</tasks>
+
+<verification>
+Before declaring plan complete:
+- [ ] docs/wireframes/agent-inbox.md exists
+- [ ] Message list wireframe included
+- [ ] Question detail panel wireframe included
+- [ ] Multi-question format supported
+- [ ] Component specifications defined
+</verification>
+
+<success_criteria>
+
+- Agent inbox wireframe created
+- Multi-question Q&A flow visualized
+- Answer submission interaction documented
+- Filter/sort options specified
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/15-frontend-wireframes/15-03-SUMMARY.md`
+</output>