---
phase: 19-agent-inbox
plan: 04
type: execute
wave: 2
depends_on: ["19-01", "19-02", "19-03"]
files_modified: [packages/web/src/routes/inbox.tsx]
autonomous: true
---

<objective>
Wire the inbox page with tRPC data fetching, message detail panel, and answer submission.

Purpose: Assemble all Phase 19 components into the working inbox route. Connects InboxList + QuestionForm to backend via tRPC, handles the full answer submission flow (submit answers → resume agent), and shows notification messages.

Output: Fully functional Agent Inbox page at /inbox route.
</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

@.planning/phases/19-agent-inbox/19-01-SUMMARY.md
@.planning/phases/19-agent-inbox/19-02-SUMMARY.md
@.planning/phases/19-agent-inbox/19-03-SUMMARY.md

@docs/wireframes/agent-inbox.md
@packages/web/src/routes/inbox.tsx
@packages/web/src/routes/initiatives/$id.tsx
@packages/web/src/lib/trpc.ts
@packages/web/src/components/InboxList.tsx
@packages/web/src/components/QuestionForm.tsx
@packages/web/src/components/MessageCard.tsx
</context>

<tasks>

<task type="auto">
  <name>Task 1: Wire inbox page with data fetching, detail panel, and answer submission</name>
  <files>packages/web/src/routes/inbox.tsx</files>
  <action>
Replace the stub inbox page with the full implementation. The page has two sections:
1. **Left/main area**: InboxList showing agents with messages
2. **Detail panel**: appears when an agent is selected, showing message detail + question form

**Data fetching:**
- `trpc.listWaitingAgents.useQuery({})` — get agents in waiting_for_input status
- `trpc.listMessages.useQuery({})` — get all user-addressed messages
- When agent selected: `trpc.getAgentQuestions.useQuery({ id: selectedAgentId }, { enabled: !!selectedAgentId })` — get structured question data

**Page state:**
- `selectedAgentId: string | null` — which agent's detail is shown
- Track loading/error states for each query

**Message Detail section** (inline in this file, not a separate component — it's page-specific):
- Header: agent name, relative timestamp, task info (use agent.taskId to show task reference)
- If agent has pending questions: render QuestionForm with the structured questions
- If message is notification (requiresResponse=false): show content with "Dismiss" button

**Answer submission flow:**
1. User fills QuestionForm and clicks "Send Answers"
2. Call `trpc.resumeAgent.useMutation()` with `{ id: selectedAgentId, answers }`
3. On success: invalidate listWaitingAgents and listMessages queries, clear selectedAgentId
4. On error: show error message

**Notification handling:**
- For messages with `requiresResponse: false` (type='info'), show content text
- "Dismiss" button: call `trpc.respondToMessage.useMutation()` to mark as responded, then invalidate queries

**Layout:**
- Use responsive grid similar to initiative detail: `lg:grid-cols-[1fr_400px]`
- InboxList on left, detail panel on right (or stacked on mobile)
- Loading states: skeleton or spinner matching existing patterns from initiatives pages
- Error states: simple error text matching existing patterns

Follow patterns established in `initiatives/$id.tsx` for query management, loading states, and mutation/invalidation flow.
  </action>
  <verify>npx tsc --noEmit -p packages/web/tsconfig.app.json && cd packages/web && npx vite build</verify>
  <done>
    - Inbox page fetches agents and messages via tRPC
    - Selecting an agent shows detail panel with questions
    - Answer submission calls resumeAgent and refreshes data
    - Notification messages can be dismissed
    - Loading and error states handled
  </done>
</task>

<task type="auto">
  <name>Task 2: Full build verification and integration check</name>
  <files>packages/web/src/routes/inbox.tsx</files>
  <action>
Run full build verification:
1. `npx tsc --noEmit` in root — all TypeScript checks pass
2. `npm run build` in root — full monorepo build succeeds
3. `cd packages/web && npx vite build` — frontend bundle builds
4. Verify route is registered in routeTree.gen.ts for /inbox
5. Verify no unused imports or type errors

Fix any issues found during verification.
  </action>
  <verify>npm run build (root) succeeds with zero errors</verify>
  <done>
    - All TypeScript checks pass
    - Monorepo build succeeds
    - Frontend bundles without errors
    - /inbox route properly registered
  </done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `npx tsc --noEmit` passes in root
- [ ] `npm run build` succeeds in root
- [ ] `npx vite build` succeeds in packages/web
- [ ] /inbox route registered in routeTree.gen.ts
- [ ] No TypeScript errors or warnings
</verification>

<success_criteria>

- Inbox page shows list of waiting agents with their messages
- Selecting an agent shows structured question form
- Answer submission calls resumeAgent and refreshes the list
- Notification messages display content and can be dismissed
- Loading and error states work correctly
- All builds pass
  </success_criteria>

<output>
After completion, create `.planning/phases/19-agent-inbox/19-04-SUMMARY.md`
</output>
