From 0d5645f9c8764f8c70a91de9049c3cb6a97345fd Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Wed, 4 Feb 2026 18:07:15 +0100
Subject: [PATCH] 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       | 11 ++++++++--
 packages/web/src/lib/trpc.ts   | 17 +++++++++++++++
 packages/web/src/main.tsx      | 38 +++++++++++++++++++++++++++-------
 packages/web/src/vite-env.d.ts |  1 +
 packages/web/tsconfig.app.json |  3 +--
 src/trpc/router.ts             |  2 +-
 6 files changed, 59 insertions(+), 13 deletions(-)
 create mode 100644 packages/web/src/lib/trpc.ts
 create mode 100644 packages/web/src/vite-env.d.ts

diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index c21bdc2..22269a7 100644
--- a/packages/web/src/App.tsx
+++ b/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>
   );
 }
 
diff --git a/packages/web/src/lib/trpc.ts b/packages/web/src/lib/trpc.ts
new file mode 100644
index 0000000..1da1a55
--- /dev/null
+++ b/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',
+      }),
+    ],
+  });
+}
diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
index 12fa35b..c65853f 100644
--- a/packages/web/src/main.tsx
+++ b/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>
 );
diff --git a/packages/web/src/vite-env.d.ts b/packages/web/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/packages/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/web/tsconfig.app.json b/packages/web/tsconfig.app.json
index 6f79627..dd410c1 100644
--- a/packages/web/tsconfig.app.json
+++ b/packages/web/tsconfig.app.json
@@ -21,6 +21,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src"],
-  "references": [{ "path": "../shared" }]
+  "include": ["src"]
 }
diff --git a/src/trpc/router.ts b/src/trpc/router.ts
index f1d8b67..ecfb30e 100644
--- a/src/trpc/router.ts
+++ b/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';
 
 /**