---
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>