Codewalkers/.planning/phases/19-agent-inbox/19-04-PLAN.md

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

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

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.

<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

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

Task 1: Wire inbox page with data fetching, detail panel, and answer submission packages/web/src/routes/inbox.tsx 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. npx tsc --noEmit -p packages/web/tsconfig.app.json && cd packages/web && npx vite build - 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

Task 2: Full build verification and integration check packages/web/src/routes/inbox.tsx 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. npm run build (root) succeeds with zero errors - All TypeScript checks pass - Monorepo build succeeds - Frontend bundles without errors - /inbox route properly registered

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

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

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