diff --git a/.planning/phases/15-frontend-wireframes/15-01-PLAN.md b/.planning/phases/15-frontend-wireframes/15-01-PLAN.md new file mode 100644 index 0000000..940ff95 --- /dev/null +++ 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 +--- + + +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. + + + +@~/.claude/get-shit-done/workflows/execute-plan.md +@~/.claude/get-shit-done/templates/summary.md + + + +@.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 + + + + +- Initiative dashboard wireframe created +- ASCII art is readable in any text editor +- Component props documented +- Interaction behaviors specified + + + +After completion, create `.planning/phases/15-frontend-wireframes/15-01-SUMMARY.md` + diff --git a/.planning/phases/15-frontend-wireframes/15-02-PLAN.md b/.planning/phases/15-frontend-wireframes/15-02-PLAN.md new file mode 100644 index 0000000..16088cb --- /dev/null +++ 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 +--- + + +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. + + + +@~/.claude/get-shit-done/workflows/execute-plan.md +@~/.claude/get-shit-done/templates/summary.md + + + +@.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 + + + + +- Initiative detail wireframe created +- Hierarchy (phase → plan → task) clearly shown +- Status indicators defined +- Dependency visualization included + + + +After completion, create `.planning/phases/15-frontend-wireframes/15-02-SUMMARY.md` + diff --git a/.planning/phases/15-frontend-wireframes/15-03-PLAN.md b/.planning/phases/15-frontend-wireframes/15-03-PLAN.md new file mode 100644 index 0000000..f44bb93 --- /dev/null +++ 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 +--- + + +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. + + + +@~/.claude/get-shit-done/workflows/execute-plan.md +@~/.claude/get-shit-done/templates/summary.md + + + +@.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 + + + + + + Task 1: Create agent inbox wireframe + docs/wireframes/agent-inbox.md + +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 + + File exists at docs/wireframes/agent-inbox.md with inbox and detail wireframes + Agent inbox wireframe documented with message list and detail views + + + + + +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 + + + + +- Agent inbox wireframe created +- Multi-question Q&A flow visualized +- Answer submission interaction documented +- Filter/sort options specified + + + +After completion, create `.planning/phases/15-frontend-wireframes/15-03-SUMMARY.md` +