---
phase: 16-frontend-scaffold
plan: 05
type: execute
wave: 3
depends_on: ["16-04"]
files_modified: [packages/web/src/App.tsx]
autonomous: false
---

<objective>
Verify the complete frontend scaffold works end-to-end with the running backend.

Purpose: Confirm that the Vite dev server, tRPC client, TanStack Router, Tailwind, and shadcn/ui all work together before proceeding to build actual UI screens.
Output: Verified working scaffold ready for Phase 17 (Initiative Dashboard).
</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

# All scaffold pieces
@packages/web/src/main.tsx
@packages/web/src/App.tsx
@packages/web/src/router.tsx
@packages/web/src/routes/__root.tsx
@packages/web/src/layouts/AppLayout.tsx
@packages/web/vite.config.ts
</context>

<tasks>

<task type="auto">
  <name>Task 1: Verify build and type-check</name>
  <files>packages/web/src/App.tsx</files>
  <action>
1. Run full build from root: `npm run build` (should build the backend). Then `cd packages/web && npx vite build` (should build frontend).
2. Run TypeScript type-check on shared package: `cd packages/shared && npx tsc --noEmit`
3. Verify no TypeScript errors across the entire project.
4. If any errors, fix them.
  </action>
  <verify>
All three commands succeed with zero errors.
  </verify>
  <done>Full project builds cleanly. No type errors.</done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <what-built>Complete frontend scaffold with Vite + React + tRPC + Tailwind + shadcn/ui + TanStack Router</what-built>
  <how-to-verify>
    1. Start backend: `cw --server` (or however the server starts)
    2. Start frontend: `npm run dev:web`
    3. Visit: http://localhost:5173 (Vite default port)
    4. Verify: Navigation header shows "Codewalkers" with nav tabs
    5. Click "Initiatives" tab → should show dashboard stub
    6. Click "Inbox" tab → should show inbox stub
    7. Verify: Tailwind styling renders (text should be styled, not raw HTML)
    8. Check browser console: No errors
    9. If backend is running: DashboardPage should show "Server: ok" from tRPC health check
  </how-to-verify>
  <resume-signal>Type "approved" or describe issues to fix</resume-signal>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] Full build succeeds (backend + frontend)
- [ ] No TypeScript errors
- [ ] Visual verification passed
</verification>

<success_criteria>

- Complete scaffold builds and runs
- tRPC connection works (health check shows server status)
- Navigation works between all routes
- Tailwind styling renders correctly
- Human verified visual correctness
  </success_criteria>

<output>
After completion, create `.planning/phases/16-frontend-scaffold/16-05-SUMMARY.md`
</output>
