Codewalkers/.planning/phases/21-polish-integration/21-03-PLAN.md

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

phase	plan	type	wave	depends_on	files_modified	autonomous
21-polish-integration	03	execute	1		packages/web/src/layouts/AppLayout.tsx packages/web/src/routes/inbox.tsx packages/web/src/routes/initiatives/$id.tsx packages/web/src/components/InboxList.tsx packages/web/src/components/InitiativeHeader.tsx packages/web/src/components/TaskRow.tsx	true

Add cross-screen navigation links and fix mobile responsive layout gaps.

Purpose: Pages are currently isolated — the inbox doesn't link to initiatives, the detail page doesn't link to inbox, and there's no way for users to navigate between related resources. Additionally, the detail panel on inbox and initiative detail pages is completely hidden on mobile with no way to access it. Output: Cross-screen navigation between related resources and responsive mobile access to detail panels.

<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

@packages/web/src/layouts/AppLayout.tsx @packages/web/src/routes/inbox.tsx @packages/web/src/routes/initiatives/$id.tsx @packages/web/src/components/InboxList.tsx @packages/web/src/components/InitiativeHeader.tsx @packages/web/src/components/TaskRow.tsx

Task 1: Add cross-screen navigation links packages/web/src/layouts/AppLayout.tsx, packages/web/src/components/TaskRow.tsx, packages/web/src/routes/inbox.tsx 1. In `AppLayout.tsx`: - Remove the three disabled nav items (Agents, Tasks, Settings). They're stubs that will never be implemented in v2.0 — they create false promises and visual clutter. Keep only Initiatives and Inbox.

2. In TaskRow.tsx:

   • If the task has a non-null agentName prop, make it a clickable link. Use <Link to="/inbox"> from @tanstack/react-router. Style as text-primary hover:underline (clickable look). This lets users jump from a task's agent assignment to the inbox to see agent questions.

3. In inbox.tsx:

   • In the detail panel header, where it shows Task: {selectedAgent.taskId}, make the taskId a link. If taskId is available, link to /initiatives (since we don't have a direct task→initiative mapping on the frontend, link to the dashboard — the user can find it from there). Use <Link> with text-primary hover:underline styling.
   • Below the agent name header, add a small "View in context →" Link to /initiatives when the agent has a taskId.

• npx tsc --noEmit -p packages/web/tsconfig.app.json passes
• npm run --workspace=packages/web build succeeds Users can navigate between inbox and initiative detail via contextual links. Disabled nav stubs removed.

Task 2: Fix mobile responsive layout for detail panels packages/web/src/routes/inbox.tsx, packages/web/src/routes/initiatives/$id.tsx 1. In `inbox.tsx`: - The empty detail panel placeholder has `hidden lg:flex` — correct (hide on mobile when nothing selected). - When a detail panel IS showing (selectedAgent is truthy), it currently displays in the grid but the grid only becomes 2-column at `lg:`. On mobile, the list and detail stack vertically which is fine. - Add a "← Back to list" button at the top of the detail panel that only shows on mobile (`lg:hidden`). When clicked, set selectedAgentId to null to return to the list view. - On mobile when an agent IS selected, hide the InboxList with `hidden lg:block` on the list column, and show only the detail panel as full-width. This creates a drill-down pattern on mobile.

2. In initiatives/$id.tsx:
   • The right column (ProgressPanel + DecisionList) currently stacks below phases on mobile, which is acceptable.
   • The TaskDetailModal already uses Dialog which is responsive.
   • No changes needed for detail page — its layout already works on mobile (single-column stacking).

• npx tsc --noEmit -p packages/web/tsconfig.app.json passes
• npm run --workspace=packages/web build succeeds Inbox detail panel accessible on mobile via drill-down pattern. Back button returns to list view.

Before declaring plan complete: - [ ] `npx tsc --noEmit -p packages/web/tsconfig.app.json` passes - [ ] `npm run --workspace=packages/web build` succeeds - [ ] Disabled nav items removed from AppLayout - [ ] TaskRow agent names are clickable links to inbox - [ ] Inbox detail panel works on mobile with back button

<success_criteria>

• All tasks completed
• All verification checks pass
• Cross-screen navigation present between inbox and initiative detail
• Mobile users can access inbox detail panel </success_criteria>

After completion, create `.planning/phases/21-polish-integration/21-03-SUMMARY.md`