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
This commit is contained in:
Lukas May
91
.planning/phases/15-frontend-wireframes/15-01-PLAN.md
Normal file
91
.planning/phases/15-frontend-wireframes/15-01-PLAN.md
Normal file
@@ -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>
|
||||||
114
.planning/phases/15-frontend-wireframes/15-02-PLAN.md
Normal file
114
.planning/phases/15-frontend-wireframes/15-02-PLAN.md
Normal file
@@ -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>
|
||||||
137
.planning/phases/15-frontend-wireframes/15-03-PLAN.md
Normal file
137
.planning/phases/15-frontend-wireframes/15-03-PLAN.md
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user