chore: enforce exhaustive React hook dependencies

Author: carderne

.oxlintrc.json

@@ -45,7 +45,7 @@
     "typescript/consistent-type-imports": "error",
     "import/no-duplicates": "error",
     "import/namespace": "off",
-    "react/exhaustive-deps": "off",
+    "react/exhaustive-deps": "error",
     "react/rules-of-hooks": "off",
     "guard-for-in": "error",
     "symbol-description": "error",

apps/webapp/app/assets/icons/AnimatedHourglassIcon.tsx

@@ -12,7 +12,7 @@ export function AnimatedHourglassIcon({
   const [scope, animate] = useAnimate();
 
   useEffect(() => {
-    animate(
+    const controls = animate(
       [
         [scope.current, { rotate: 0 }, { duration: 0.7 }],
         [scope.current, { rotate: 180 }, { duration: 0.3 }],
@@ -21,7 +21,9 @@ export function AnimatedHourglassIcon({
       ],
       { repeat: Infinity, delay }
     );
-  }, []);
+
+    return () => controls.stop();
+  }, [animate, delay, scope]);
 
   return <HourglassIcon ref={scope} className={className} />;
 }

apps/webapp/app/components/AskAI.tsx

@@ -76,7 +76,7 @@ function useAskAIState() {
       next.delete(ASK_AI_DEEP_LINK_PARAM);
       setSearchParams(next);
     }
-  }, [searchParams, openAskAI]);
+  }, [searchParams, setSearchParams, openAskAI]);
 
   return { isOpen, setIsOpen, initialQuery, openAskAI, closeAskAI };
 }

apps/webapp/app/components/DevPresence.tsx

@@ -80,7 +80,7 @@ export function DevPresenceProvider({ children, enabled = true }: DevPresencePro
   // Calculate isConnected and memoize the context value
   const contextValue = useMemo(() => {
     return { isConnected };
-  }, [isConnected, enabled]);
+  }, [isConnected]);
 
   return <DevPresenceContext.Provider value={contextValue}>{children}</DevPresenceContext.Provider>;
 }

apps/webapp/app/components/Feedback.tsx

@@ -70,7 +70,7 @@ export function Feedback({
     ) {
       setOpen(false);
     }
-  }, [navigation.formAction, navigation.state, form.allErrors]);
+  }, [navigation.formAction, navigation.state, form.allErrors, setOpen]);
 
   // Handle URL param functionality
   useEffect(() => {
@@ -83,7 +83,7 @@ export function Feedback({
       next.delete("feedbackPanel");
       setSearchParams(next);
     }
-  }, [searchParams]);
+  }, [searchParams, setOpen, setSearchParams]);
 
   // Reset the topic to the default once the dialog closes, so reopening always starts fresh. The
   // dialog is now persistently mounted (hosted outside the popover), so without this it would keep

apps/webapp/app/components/admin/FeatureFlagsDialog.tsx

@@ -1,5 +1,5 @@
 import { useFetcher } from "@remix-run/react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import stableStringify from "json-stable-stringify";
 import {
   Dialog,
@@ -54,6 +54,9 @@ export function FeatureFlagsDialog({
 }: FeatureFlagsDialogProps) {
   const loadFetcher = useFetcher<LoaderData>();
   const saveFetcher = useFetcher<ActionData>();
+  const loadFeatureFlags = loadFetcher.load;
+  const onOpenChangeRef = useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
 
   const [overrides, setOverrides] = useState<Record<string, unknown>>({});
   const [initialOverrides, setInitialOverrides] = useState<Record<string, unknown>>({});
@@ -67,9 +70,9 @@ export function FeatureFlagsDialog({
       setSaveError(null);
       setOverrides({});
       setInitialOverrides({});
-      loadFetcher.load(`/admin/api/v2/orgs/${orgId}/feature-flags`);
+      loadFeatureFlags(`/admin/api/v2/orgs/${orgId}/feature-flags`);
     }
-  }, [open, orgId]);
+  }, [loadFeatureFlags, open, orgId]);
 
   useEffect(() => {
     if (loadFetcher.data) {
@@ -81,7 +84,7 @@ export function FeatureFlagsDialog({
 
   useEffect(() => {
     if (saveFetcher.data?.success) {
-      onOpenChange(false);
+      onOpenChangeRef.current(false);
     } else if (saveFetcher.data?.error) {
       setSaveError(saveFetcher.data.error);
     }

apps/webapp/app/components/admin/debugRun.tsx

@@ -45,10 +45,11 @@ function DebugRunDialog({ friendlyId }: { friendlyId: string }) {
 function DebugRunContent({ friendlyId }: { friendlyId: string }) {
   const fetcher = useTypedFetcher<typeof loader>();
   const isLoading = fetcher.state === "loading";
+  const load = fetcher.load;
 
   useEffect(() => {
-    fetcher.load(`/resources/taskruns/${friendlyId}/debug`);
-  }, [friendlyId]);
+    load(`/resources/taskruns/${friendlyId}/debug`);
+  }, [friendlyId, load]);
 
   return (
     <>

apps/webapp/app/components/code/AIQueryInput.tsx

@@ -65,6 +65,39 @@ export function AIQueryInput({
     }
   }, [mode, canEdit]);
 
+  const processStreamEvent = useCallback(
+    (event: StreamEventType) => {
+      switch (event.type) {
+        case "thinking":
+          setThinking((prev) => prev + event.content);
+          break;
+        case "tool_call":
+          // Tool calls are handled silently — no UI text needed
+          break;
+        case "time_filter":
+          // Apply time filter immediately when the AI sets it
+          onTimeFilterChange?.(event.filter);
+          break;
+        case "result":
+          if (event.success) {
+            // Apply time filter if included in result (backup in case time_filter event was missed)
+            if (event.timeFilter) {
+              onTimeFilterChange?.(event.timeFilter);
+            }
+            onQueryGenerated(event.query);
+            setPrompt("");
+            setLastResult("success");
+            // Keep thinking visible to show what happened
+          } else {
+            setError(event.error);
+            setLastResult("error");
+          }
+          break;
+      }
+    },
+    [onQueryGenerated, onTimeFilterChange]
+  );
+
   const submitQuery = useCallback(
     async (queryPrompt: string, submitMode: AIQueryMode = mode) => {
       if (!queryPrompt.trim() || isLoading) return;
@@ -158,40 +191,7 @@ export function AIQueryInput({
         setIsLoading(false);
       }
     },
-    [isLoading, resourcePath, mode, getCurrentQuery]
-  );
-
-  const processStreamEvent = useCallback(
-    (event: StreamEventType) => {
-      switch (event.type) {
-        case "thinking":
-          setThinking((prev) => prev + event.content);
-          break;
-        case "tool_call":
-          // Tool calls are handled silently — no UI text needed
-          break;
-        case "time_filter":
-          // Apply time filter immediately when the AI sets it
-          onTimeFilterChange?.(event.filter);
-          break;
-        case "result":
-          if (event.success) {
-            // Apply time filter if included in result (backup in case time_filter event was missed)
-            if (event.timeFilter) {
-              onTimeFilterChange?.(event.timeFilter);
-            }
-            onQueryGenerated(event.query);
-            setPrompt("");
-            setLastResult("success");
-            // Keep thinking visible to show what happened
-          } else {
-            setError(event.error);
-            setLastResult("error");
-          }
-          break;
-      }
-    },
-    [onQueryGenerated, onTimeFilterChange]
+    [getCurrentQuery, isLoading, mode, processStreamEvent, resourcePath]
   );
 
   const handleSubmit = useCallback(

apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx

@@ -281,7 +281,7 @@ export function DashboardAgent({
       cancelled = true;
       stop();
     };
-  }, [hasAccess, watching, actionPath, setPanelOpen, openChat]);
+  }, [hasAccess, watching, actionPath, setPanelOpen, openChat, rememberToasted]);
 
   // Zeroes the wake dot right away; the poll restores the truth if another chat has one. The
   // work count is not touched here: the panel derives it from the chat list.

apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx

@@ -476,6 +476,7 @@ export function DashboardAgentPanel({
     watchCard.requestId,
     active?.chatId,
     actionPath,
+    organization.id,
     claimChatSlot,
     loadHistory,
   ]);