---
phase: 21-polish-integration
plan: 06
type: execute
wave: 3
depends_on: ["21-04", "21-05"]
files_modified: []
autonomous: false
---

<objective>
Full integration smoke test — verify all screens, navigation flows, and error states work end-to-end.

Purpose: This is the final verification before shipping v2.0. All prior plans in Phase 21 added error handling, loading states, navigation, and performance improvements. This plan verifies everything works together.
Output: Verified frontend ready to ship.
</objective>

<execution_context>
@~/.claude/get-shit-done/workflows/execute-plan.md
@~/.claude/get-shit-done/templates/summary.md
@~/.claude/get-shit-done/references/checkpoints.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
</context>

<tasks>

<task type="auto">
  <name>Task 1: Run full build verification</name>
  <files></files>
  <action>
  1. Run `npx tsc --noEmit` (backend) — must pass
  2. Run `npx tsc --noEmit -p packages/web/tsconfig.app.json` (frontend) — must pass
  3. Run `npm run --workspace=packages/web build` — must succeed
  4. Run `npm test` — all existing tests must still pass
  5. Check for any console warnings in the build output beyond expected ones
  6. Verify no `console.error` calls remain in component files (should all be replaced by toast): `grep -r "console.error" packages/web/src/`
  </action>
  <verify>All commands return 0 exit code. No console.error in component source files.</verify>
  <done>Full build pipeline passes. No regressions.</done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <what-built>Complete frontend with error handling, loading skeletons, cross-screen navigation, toast notifications, and code splitting</what-built>
  <how-to-verify>
    1. Start backend: `npm run dev` (or `node dist/cli.js --server` if applicable)
    2. Start frontend: `npm run --workspace=packages/web dev`
    3. Visit: http://localhost:5173/initiatives

    **Dashboard screen:**
    - Verify skeleton loading cards appear briefly before data loads
    - Create a new initiative → toast appears "Initiative created"
    - Verify only Initiatives and Inbox nav items in header (no disabled stubs)
    - Click an initiative card → navigates to detail page

    **Detail screen:**
    - Verify skeleton layout appears during loading
    - Verify phases and tasks render correctly
    - Verify "Back to Dashboard" navigation works
    - If tasks have agents, verify agent name is a clickable link

    **Inbox screen:**
    - Verify skeleton loading rows appear during loading
    - If agents exist with questions, select one → detail panel shows
    - On mobile viewport (resize to <1024px): verify detail panel becomes full-width with back button
    - Navigate back → list view returns

    **Error handling:**
    - Stop the backend server while frontend is running
    - Verify "Live updates disconnected" toast appears (sticky)
    - Verify pages still show cached data (no crash)
    - Restart backend → verify pages resume working

    **404:**
    - Visit http://localhost:5173/nonexistent
    - Verify "Page not found" with "Back to Dashboard" button
  </how-to-verify>
  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] Full build passes (TypeScript, Vite build, tests)
- [ ] Human verified all screens work
- [ ] Error handling and loading states confirmed
</verification>

<success_criteria>

- All tasks completed
- Human approved the integration test
- No regressions
- Frontend ready to ship as v2.0
  </success_criteria>

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