fix(web): add ReactQueryProvider to root layout for Mission Control

Mission Control components (AuditLogDrawer, GlobalAgentRoster, PanelControls) use @tanstack/react-query hooks but no QueryClientProvider existed in the layout tree. This caused a crash: 'No QueryClient set, use QueryClientProvider'. Added ReactQueryProvider wrapper in apps/web/src/providers/ and wired it into the root layout above ErrorBoundary/AuthProvider so all routes have access.
2026-03-08 10:30:33 -05:00
2 changed files with 34 additions and 3 deletions
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { Outfit, Fira_Code } from "next/font/google";
 import { AuthProvider } from "@/lib/auth/auth-context";
 import { ErrorBoundary } from "@/components/error-boundary";
 import { ThemeProvider } from "@/providers/ThemeProvider";
 import { ReactQueryProvider } from "@/providers/ReactQueryProvider";
 import "./globals.css";
 export const dynamic = "force-dynamic";
@@ -56,9 +57,11 @@ export default function RootLayout({ children }: { children: ReactNode }): React
      </head>
      <body>
        <ThemeProvider>
-          <ErrorBoundary>
+          <ReactQueryProvider>
-            <AuthProvider>{children}</AuthProvider>
+            <ErrorBoundary>
-          </ErrorBoundary>
+              <AuthProvider>{children}</AuthProvider>
            </ErrorBoundary>
          </ReactQueryProvider>
        </ThemeProvider>
      </body>
    </html>
--- a/apps/web/src/providers/ReactQueryProvider.tsx
+++ b/apps/web/src/providers/ReactQueryProvider.tsx
@@ -0,0 +1,28 @@
 "use client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useState, type ReactNode } from "react";
 interface ReactQueryProviderProps {
  children: ReactNode;
 }
 export function ReactQueryProvider({ children }: ReactQueryProviderProps): React.JSX.Element {
  // Create a stable QueryClient per component mount (one per app session)
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            // Don't refetch on window focus in a dashboard context
            refetchOnWindowFocus: false,
            // Stale time of 30s — short enough for live data, avoids hammering
            staleTime: 30_000,
            retry: 1,
          },
        },
      })
  );
  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
 }