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.
Merge pull request 'style(web): fix prettier formatting in AuditLogDrawer' (#743 ) from fix/audit-drawer-format into main
2026-03-08 10:30:33 -05:00 · 2026-03-08 01:56:03 +00:00 · 2026-03-07 19:54:08 -06:00 · 2026-03-08 00:44:31 +00:00 · 2026-03-07 18:42:50 -06:00 · 2026-03-07 23:36:55 +00:00
4 changed files with 70 additions and 10 deletions
--- a/apps/orchestrator/src/api/agents/agents.controller.ts
+++ b/apps/orchestrator/src/api/agents/agents.controller.ts
@@ -146,7 +146,7 @@ export class AgentsController {
   * Return recent orchestrator events for non-streaming consumers.
   */
  @Get("events/recent")
-  @Throttle({ status: { limit: 200, ttl: 60000 } })
+  @Throttle({ default: { limit: 1000, ttl: 60000 } })
  getRecentEvents(@Query("limit") limit?: string): {
    events: ReturnType<AgentEventsService["getRecentEvents"]>;
  } {
--- 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>
-            <AuthProvider>{children}</AuthProvider>
-          </ErrorBoundary>
+          <ReactQueryProvider>
+            <ErrorBoundary>
+              <AuthProvider>{children}</AuthProvider>
+            </ErrorBoundary>
+          </ReactQueryProvider>
        </ThemeProvider>
      </body>
    </html>
--- a/apps/web/src/components/mission-control/AuditLogDrawer.tsx
+++ b/apps/web/src/components/mission-control/AuditLogDrawer.tsx
@@ -44,6 +44,25 @@ interface AuditLogResponse {
  total: number;
  page: number;
  pages: number;
+  notice?: string;
+}
+
+function createEmptyAuditLogResponse(page: number, notice?: string): AuditLogResponse {
+  return {
+    items: [],
+    total: 0,
+    page,
+    pages: 0,
+    ...(notice !== undefined ? { notice } : {}),
+  };
+}
+
+function isRateLimitError(error: unknown): boolean {
+  if (!(error instanceof Error)) {
+    return false;
+  }
+
+  return /429|rate limit|too many requests/i.test(error.message);
 }

 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -138,7 +157,15 @@ async function fetchAuditLog(
    params.set("sessionId", normalizedSessionId);
  }

-  return apiGet<AuditLogResponse>(`/api/mission-control/audit-log?${params.toString()}`);
+  try {
+    return await apiGet<AuditLogResponse>(`/api/mission-control/audit-log?${params.toString()}`);
+  } catch (error) {
+    if (isRateLimitError(error)) {
+      return createEmptyAuditLogResponse(page, "Rate limited - retrying...");
+    }
+
+    return createEmptyAuditLogResponse(page);
+  }
 }

 export function AuditLogDrawer({ sessionId, trigger }: AuditLogDrawerProps): React.JSX.Element {
@@ -180,11 +207,10 @@ export function AuditLogDrawer({ sessionId, trigger }: AuditLogDrawerProps): Rea
  const totalItems = auditLogQuery.data?.total ?? 0;
  const totalPages = auditLogQuery.data?.pages ?? 0;
  const items = auditLogQuery.data?.items ?? [];
+  const notice = auditLogQuery.data?.notice;

  const canGoPrevious = page > 1;
  const canGoNext = totalPages > 0 && page < totalPages;
-  const errorMessage =
-    auditLogQuery.error instanceof Error ? auditLogQuery.error.message : "Failed to load audit log";

  return (
    <Sheet open={open} onOpenChange={setOpen}>
@@ -237,10 +263,13 @@ export function AuditLogDrawer({ sessionId, trigger }: AuditLogDrawerProps): Rea
                        Loading audit log...
                      </td>
                    </tr>
-                  ) : auditLogQuery.error ? (
+                  ) : notice ? (
                    <tr>
-                      <td colSpan={5} className="px-3 py-6 text-center text-sm text-red-500">
-                        {errorMessage}
+                      <td
+                        colSpan={5}
+                        className="px-3 py-6 text-center text-sm text-muted-foreground"
+                      >
+                        {notice}
                      </td>
                    </tr>
                  ) : items.length === 0 ? (
--- 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>;
+}
Author	SHA1	Message	Date
Jason Woltje	a0cc6c3ec7	fix(web): add ReactQueryProvider to root layout for Mission Control All checks were successful ci/woodpecker/push/ci Pipeline was successful Details 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
jason.woltje	51d6302401	Merge pull request 'style(web): fix prettier formatting in AuditLogDrawer' (#743 ) from fix/audit-drawer-format into main All checks were successful ci/woodpecker/push/ci Pipeline was successful Details	2026-03-08 01:56:03 +00:00
Jason Woltje	cf490510bf	style(web): fix prettier formatting in AuditLogDrawer All checks were successful ci/woodpecker/push/ci Pipeline was successful Details	2026-03-07 19:54:08 -06:00
jason.woltje	3d91334df7	Merge pull request 'fix(mission-control): increase rate limit for events/recent, add error handling' (#742 ) from fix/mission-control-ratelimit into main Some checks failed ci/woodpecker/push/ci Pipeline failed Details	2026-03-08 00:44:31 +00:00
Jason Woltje	e80b624ca6	fix(mission-control): increase rate limit for events/recent, add error handling Some checks failed ci/woodpecker/push/ci Pipeline failed Details	2026-03-07 18:42:50 -06:00
jason.woltje	65536fcb75	Merge pull request 'fix(orchestrator): add missing module import for OrchestratorApiKeyGuard' (#741 ) from fix/orchestrator-guard-import into main All checks were successful ci/woodpecker/push/ci Pipeline was successful Details	2026-03-07 23:36:55 +00:00