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

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

phase	plan	type	wave	depends_on	files_modified	autonomous
21-polish-integration	01	execute	1		packages/web/src/components/ui/sonner.tsx packages/web/src/components/ErrorBoundary.tsx packages/web/src/main.tsx packages/web/src/routes/__root.tsx packages/web/package.json	true

Add global error boundary and toast notification system to the frontend.

Purpose: Right now render errors crash the app with a white screen, and mutations succeed/fail with no user feedback (SpawnArchitectDropdown, ActionMenu use console.error only). This plan adds the two foundational UX patterns everything else depends on. Output: ErrorBoundary wrapping the app, Sonner toast provider, and toast utility ready for use.

<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/main.tsx @packages/web/src/routes/__root.tsx @packages/web/src/layouts/AppLayout.tsx @packages/web/src/components/SpawnArchitectDropdown.tsx @packages/web/src/components/ActionMenu.tsx @packages/web/src/components/CreateInitiativeDialog.tsx

Task 1: Add Sonner toast provider and ErrorBoundary component packages/web/src/components/ErrorBoundary.tsx, packages/web/src/components/ui/sonner.tsx, packages/web/src/main.tsx, packages/web/src/routes/__root.tsx, packages/web/package.json 1. Install sonner: `npm install --workspace=packages/web sonner` 2. Create `packages/web/src/components/ui/sonner.tsx` — thin wrapper exporting Toaster component from sonner, styled to match the app's shadcn theme (use `richColors` prop, `position="bottom-right"`). 3. Create `packages/web/src/components/ErrorBoundary.tsx` — React class component with `componentDidCatch`. Render a centered error card with: red AlertCircle icon, "Something went wrong" heading, error.message in muted text, and a "Reload" button that calls `window.location.reload()`. Style with existing Tailwind classes matching the app's error patterns (see InitiativeDetailPage error state for reference). 4. In `packages/web/src/routes/__root.tsx` — add the `` component as a sibling to `` inside the root route component. Also wrap `` (inside AppLayout) with `` so route-level render errors are caught without destroying the nav shell. Import both from their respective paths. 5. Update the `notFoundComponent` in __root.tsx to include a "Back to Dashboard" Link button (from @tanstack/react-router) pointing to /initiatives. - `npx tsc --noEmit -p packages/web/tsconfig.app.json` passes - `npm run --workspace=packages/web build` succeeds ErrorBoundary catches render errors with recovery UI. Toaster provider available app-wide. NotFound page has navigation back to dashboard. Task 2: Wire toast notifications into existing mutation flows packages/web/src/components/SpawnArchitectDropdown.tsx, packages/web/src/components/ActionMenu.tsx, packages/web/src/components/CreateInitiativeDialog.tsx, packages/web/src/routes/inbox.tsx 1. In `SpawnArchitectDropdown.tsx`: Replace `console.error` in onError with `toast.error('Failed to spawn architect')`. Add `toast.success('Architect spawned')` in onSuccess. Import `toast` from `sonner`. 2. In `ActionMenu.tsx`: Replace `console.error` in handleArchive's catch/error with `toast.error('Failed to archive initiative')`. Add success toast on archive complete. 3. In `CreateInitiativeDialog.tsx`: Add `toast.success('Initiative created')` in the mutation's onSuccess callback (after dialog closes). Add `toast.error(...)` in onError if not already showing inline error. 4. In `inbox.tsx`: Add `toast.success('Answer submitted')` to resumeAgentMutation.onSuccess. Add `toast.error('Failed to submit answer')` to onError. Same pattern for respondToMessageMutation.

Import toast from sonner in each file. Keep it minimal — one success and one error toast per mutation. Do NOT add toasts for query failures (those already have inline error states).

• npx tsc --noEmit -p packages/web/tsconfig.app.json passes
• npm run --workspace=packages/web build succeeds All mutation flows show toast feedback on success/failure. No more silent console.error-only failures.

Before declaring plan complete: - [ ] `npx tsc --noEmit -p packages/web/tsconfig.app.json` passes - [ ] `npm run --workspace=packages/web build` succeeds - [ ] ErrorBoundary component exists and is wired into root route - [ ] Toaster component rendered in root route - [ ] All mutation callbacks use toast instead of console.error

<success_criteria>

• All tasks completed
• All verification checks pass
• No TypeScript errors introduced
• ErrorBoundary catches render errors with recovery UI
• Toast notifications appear for all mutation success/failure flows </success_criteria>

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