---
phase: 16-frontend-scaffold
plan: 03
type: execute
wave: 2
depends_on: ["16-01", "16-02"]
files_modified: [packages/web/package.json, packages/web/src/lib/trpc.ts, packages/web/src/main.tsx, packages/web/tsconfig.app.json]
autonomous: true
---

<objective>
Wire tRPC React Query client to connect the frontend to the existing backend server.

Purpose: Enable type-safe data fetching from the Codewalkers backend. All subsequent UI screens (dashboard, detail, inbox) will use these tRPC hooks for data.
Output: Working tRPC client with React Query provider, connected to backend via Vite dev proxy.
</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

# Backend server runs at 127.0.0.1:3847, tRPC at /trpc/*
@src/server/index.ts

# AppRouter type from shared package
@packages/shared/src/trpc.ts

# Vite project from Plan 01
@packages/web/vite.config.ts
@packages/web/src/main.tsx
</context>

<tasks>

<task type="auto">
  <name>Task 1: Install tRPC React Query dependencies</name>
  <files>packages/web/package.json, packages/web/tsconfig.app.json</files>
  <action>
1. Install in packages/web:
   - Dependencies: `@trpc/client`, `@trpc/react-query`, `@tanstack/react-query`
   - Add `@codewalk-district/shared` as a workspace dependency: `"@codewalk-district/shared": "*"`

2. Update `packages/web/tsconfig.app.json`:
   - Add project reference to shared package: `"references": [{ "path": "../shared" }]`
   - Ensure paths can resolve `@codewalk-district/shared` (npm workspaces handles this via node_modules symlink)

3. Run `npm install` from root.
  </action>
  <verify>npm ls @trpc/react-query --workspace=packages/web shows installed version.</verify>
  <done>tRPC and React Query packages installed. Shared package linked.</done>
</task>

<task type="auto">
  <name>Task 2: Create tRPC client and provider</name>
  <files>packages/web/src/lib/trpc.ts, packages/web/src/main.tsx</files>
  <action>
1. Create `packages/web/src/lib/trpc.ts`:
   ```typescript
   import { createTRPCReact } from '@trpc/react-query';
   import { httpBatchLink } from '@trpc/client';
   import type { AppRouter } from '@codewalk-district/shared';

   export const trpc = createTRPCReact<AppRouter>();

   export function createTRPCClient() {
     return trpc.createClient({
       links: [
         httpBatchLink({
           // In dev, Vite proxy forwards /trpc to backend
           // In prod, same-origin or configured URL
           url: '/trpc',
         }),
       ],
     });
   }
   ```

2. Update `packages/web/src/main.tsx` to wrap App with providers:
   ```typescript
   import React, { useState } from 'react';
   import ReactDOM from 'react-dom/client';
   import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
   import { trpc, createTRPCClient } from './lib/trpc';
   import App from './App';
   import './index.css';

   function Root() {
     const [queryClient] = useState(() => new QueryClient({
       defaultOptions: {
         queries: {
           refetchOnWindowFocus: false,
           retry: 1,
         },
       },
     }));
     const [trpcClient] = useState(createTRPCClient);

     return (
       <trpc.Provider client={trpcClient} queryClient={queryClient}>
         <QueryClientProvider client={queryClient}>
           <App />
         </QueryClientProvider>
       </trpc.Provider>
     );
   }

   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
       <Root />
     </React.StrictMode>
   );
   ```

3. Update `packages/web/src/App.tsx` to verify tRPC works:
   ```typescript
   import { trpc } from './lib/trpc';

   function App() {
     const health = trpc.health.useQuery();

     return (
       <div className="p-8">
         <h1 className="text-2xl font-bold">Codewalkers</h1>
         <p className="text-muted-foreground mt-2">
           Server: {health.data?.status ?? 'connecting...'}
         </p>
       </div>
     );
   }

   export default App;
   ```

This App component is temporary — Phase 17+ will replace it. It exists to prove the tRPC connection works end-to-end.
  </action>
  <verify>
cd packages/web && npx vite build succeeds (type-checks tRPC client against AppRouter).
  </verify>
  <done>tRPC client created with httpBatchLink. React Query provider wraps app. Build passes with type-safe router inference.</done>
</task>

</tasks>

<verification>
Before declaring plan complete:
- [ ] `cd packages/web && npx vite build` succeeds
- [ ] `trpc.health.useQuery()` type-checks correctly
- [ ] tRPC client configured with `/trpc` URL (proxied by Vite in dev)
- [ ] React Query provider configured with sensible defaults
</verification>

<success_criteria>

- tRPC React Query client wired to AppRouter type
- React Query provider wraps application
- Build passes with full type inference
- Vite proxy configured for /trpc → backend
  </success_criteria>

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