Codewalkers/.planning/phases/15-frontend-wireframes/15-03-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous

phase	plan	type	wave	depends_on	files_modified	autonomous
15-frontend-wireframes	03	execute	1		docs/wireframes/agent-inbox.md	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.

<execution_context> @/.claude/get-shit-done/workflows/execute-plan.md @/.claude/get-shit-done/templates/summary.md </execution_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

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

<success_criteria>

• Agent inbox wireframe created
• Multi-question Q&A flow visualized
• Answer submission interaction documented
• Filter/sort options specified </success_criteria>

After completion, create `.planning/phases/15-frontend-wireframes/15-03-SUMMARY.md`