736852376b
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
138 lines
6.3 KiB
Markdown
138 lines
6.3 KiB
Markdown
---
|
|
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>
|