---
phase: 21-polish-integration
plan: 01
type: execute
wave: 1
depends_on: []
files_modified: [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]
autonomous: true
---

<objective>
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.
</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

@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
</context>

<tasks>

<task type="auto">
  <name>Task 1: Add Sonner toast provider and ErrorBoundary component</name>
  <files>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</files>
  <action>
  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 `<Toaster />` component as a sibling to `<AppLayout>` inside the root route component. Also wrap `<Outlet />` (inside AppLayout) with `<ErrorBoundary>` 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.
  </action>
  <verify>
  - `npx tsc --noEmit -p packages/web/tsconfig.app.json` passes
  - `npm run --workspace=packages/web build` succeeds
  </verify>
  <done>ErrorBoundary catches render errors with recovery UI. Toaster provider available app-wide. NotFound page has navigation back to dashboard.</done>
</task>

<task type="auto">
  <name>Task 2: Wire toast notifications into existing mutation flows</name>
  <files>packages/web/src/components/SpawnArchitectDropdown.tsx, packages/web/src/components/ActionMenu.tsx, packages/web/src/components/CreateInitiativeDialog.tsx, packages/web/src/routes/inbox.tsx</files>
  <action>
  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).
  </action>
  <verify>
  - `npx tsc --noEmit -p packages/web/tsconfig.app.json` passes
  - `npm run --workspace=packages/web build` succeeds
  </verify>
  <done>All mutation flows show toast feedback on success/failure. No more silent console.error-only failures.</done>
</task>

</tasks>

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

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

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