feat(16-03): wire tRPC React Query client with providers

Create tRPC client with httpBatchLink targeting /trpc (Vite proxy).
Wrap app in trpc.Provider and QueryClientProvider with sensible
defaults. Add health check query to App.tsx for connection
verification. Add vite-env.d.ts for CSS module types. Remove
unused Plan import from backend router.

packages/web/src/App.tsx

@@ -1,8 +1,15 @@
-import { cn } from "@/lib/utils";
+import { trpc } from './lib/trpc';
 
 function App() {
+  const health = trpc.health.useQuery();
+
   return (
-    <div className={cn("text-2xl font-bold p-8")}>Codewalk District</div>
+    <div className="p-8">
+      <h1 className="text-2xl font-bold">Codewalk District</h1>
+      <p className="text-muted-foreground mt-2">
+        Server: {health.data?.status ?? 'connecting...'}
+      </p>
+    </div>
   );
 }
 

packages/web/src/lib/trpc.ts

@@ -0,0 +1,17 @@
+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',
+      }),
+    ],
+  });
+}

packages/web/src/main.tsx

@@ -1,10 +1,32 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "./index.css";
-import App from "./App";
+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';
 
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
+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>
 );

packages/web/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/web/tsconfig.app.json

@@ -21,6 +21,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src"],
-  "references": [{ "path": "../shared" }]
+  "include": ["src"]
 }

src/trpc/router.ts

@@ -16,7 +16,7 @@ import type { PhaseRepository } from '../db/repositories/phase-repository.js';
 import type { PlanRepository } from '../db/repositories/plan-repository.js';
 import type { DispatchManager, PhaseDispatchManager } from '../dispatch/types.js';
 import type { CoordinationManager } from '../coordination/types.js';
-import type { Phase, Plan, Task } from '../db/schema.js';
+import type { Phase, Task } from '../db/schema.js';
 import { buildDiscussPrompt, buildBreakdownPrompt, buildDecomposePrompt } from '../agent/prompts.js';
 
 /**