81814ac213
Phase 21: Polish & Integration - 6 plans in 3 waves - 3 parallel (Wave 1), 2 parallel (Wave 2), 1 sequential (Wave 3) - Ready for execution
96 lines
5.2 KiB
Markdown
96 lines
5.2 KiB
Markdown
---
|
|
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>
|