chore(webapp): scope imperative component refs (#4730)

## Summary

Scopes React Compiler diagnostics to component and hook statements where
refs intentionally coordinate editors, animations, polling, deferred
callbacks, and other imperative integrations. Other compiler diagnostics
remain active in those components.

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

@@ -56,6 +56,7 @@ export function FeatureFlagsDialog({
   const saveFetcher = useFetcher<ActionData>();
   const loadFeatureFlags = loadFetcher.load;
   const onOpenChangeRef = useRef(onOpenChange);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   onOpenChangeRef.current = onOpenChange;
 
   const [overrides, setOverrides] = useState<Record<string, unknown>>({});

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

@@ -94,6 +94,7 @@ export function JSONEditor(opts: JSONEditorProps) {
   const editor = useRef<HTMLDivElement>(null);
   const settings: Omit<UseCodeMirror, "onBlur"> = {
     ...opts,
+    // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
     container: editor.current,
     extensions,
     editable: !readOnly,

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

@@ -196,6 +196,7 @@ export function TSQLEditor(opts: TSQLEditorProps) {
 
   const settings: Omit<UseCodeMirror, "onBlur"> = {
     ...opts,
+    // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
     container: editor.current,
     extensions,
     editable: !readOnly,

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

@@ -48,6 +48,7 @@ export function TextEditor(opts: TextEditorProps) {
   const editor = useRef<HTMLDivElement>(null);
   const settings: Omit<UseCodeMirror, "onBlur"> = {
     ...opts,
+    // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
     container: editor.current,
     extensions,
     editable: !readOnly,

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

@@ -123,6 +123,7 @@ export function DashboardAgentChat({
   // The path this chat last rendered on. React never unmounts on a page teardown, so an
   // unmount whose live URL has moved is the router having navigated out from under it.
   const renderedPathRef = useRef(location.pathname);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   renderedPathRef.current = location.pathname;
 
   const transport = useTriggerChatTransport<typeof dashboardAgent>({
@@ -209,6 +210,7 @@ export function DashboardAgentChat({
   });
 
   const orderRef = useRef(createTranscriptOrder(initialMessages));
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   const messages = orderTranscript(rawMessages, orderRef.current);
 
   // Read here, not in the panel, so it re-reads as each turn settles.
@@ -359,6 +361,7 @@ export function DashboardAgentChat({
   const navigatedRef = useRef<Set<string> | null>(null);
   if (navigatedRef.current === null) {
     navigatedRef.current = new Set();
+    // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
     pendingNavigateIntents(initialMessages, navigatedRef.current);
   }
   useEffect(() => {
@@ -374,6 +377,7 @@ export function DashboardAgentChat({
   const watchProposedRef = useRef<Set<string> | null>(null);
   if (watchProposedRef.current === null) {
     watchProposedRef.current = new Set();
+    // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
     pendingWatchIntents(initialMessages, watchProposedRef.current);
   }
   useEffect(() => {
@@ -388,6 +392,7 @@ export function DashboardAgentChat({
   }, [transport, chatId, aiStop]);
 
   const teardownRef = useRef<() => void>(() => {});
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   teardownRef.current = () => {
     if (status !== "streaming" && status !== "submitted") return;
     const reason = unmountTeardown({
@@ -401,6 +406,7 @@ export function DashboardAgentChat({
 
   // Read by the settle effect, which must not re-run when the transcript changes.
   const messagesRef = useRef(messages);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   messagesRef.current = messages;
 
   const prevStatus = useRef(status);

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

@@ -126,7 +126,9 @@ export function winningInvestigationOccurrences(messages: UIMessage[]): Map<stri
 function useInvestigationWinners(messages: UIMessage[]): Map<string, string> {
   const previous = useRef<Map<string, string>>();
   const next = useMemo(() => winningInvestigationOccurrences(messages), [messages]);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   previous.current = reuseWinners(previous.current, next);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   return previous.current;
 }
 

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

@@ -174,6 +174,7 @@ export function DashboardAgentPanel({
 
   const loadHistory = useMemo(
     () =>
+      // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
       createCoalescedReload(async () => {
         try {
           const res = await fetch(actionPath);

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -532,6 +532,7 @@ export function SideMenu({
   // object each render, so depending on it would fire the cleanup (flushing the debounce) every
   // render — and drags re-render constantly — instead of only on unmount.
   const flushPendingPreferencesRef = useRef<() => void>();
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   flushPendingPreferencesRef.current = () => {
     if (debounceTimeoutRef.current) {
       clearTimeout(debounceTimeoutRef.current);

apps/webapp/app/components/navigation/useReorderableList.ts

@@ -34,6 +34,7 @@ export function useReorderableList<T>({
 
   const [order, setOrder] = useState<string[]>(() => initialOrder ?? items.map(itemKey));
   const resetOrderRef = useRef({ initialOrder, items, itemKey });
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   resetOrderRef.current = { initialOrder, items, itemKey };
 
   // Only an organization switch resets user-managed order. Keep the latest inputs in a ref so

apps/webapp/app/components/primitives/AgentDotMatrix.tsx

@@ -290,7 +290,9 @@ export function AgentDotMatrix({
   const playlistKey = playlist.join(",");
   const paletteObjRef = useRef(paletteObj);
   const playlistRef = useRef(playlist);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   paletteObjRef.current = paletteObj;
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   playlistRef.current = playlist;
 
   useEffect(() => {

apps/webapp/app/components/primitives/DateField.tsx

@@ -81,6 +81,7 @@ export function DateField({
   });
 
   const stateValueRef = useRef(state.value);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   stateValueRef.current = state.value;
 
   // Sync only when the passed value or timezone mode changes. Depending on state.value directly

apps/webapp/app/components/primitives/Resizable.tsx

@@ -100,7 +100,9 @@ function collapsibleHandleClassName(show: boolean) {
 
 function useFrozenValue<T>(value: T | null | undefined): T | null | undefined {
   const ref = useRef(value);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   if (value != null) ref.current = value;
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   return ref.current;
 }
 

apps/webapp/app/components/primitives/charts/hooks/useZoomSelection.ts

@@ -55,6 +55,7 @@ export function useZoomSelection(): UseZoomSelectionReturn {
   const stateRef = useRef<ZoomSelectionState>(state);
 
   // Keep ref in sync with state
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   stateRef.current = state;
 
   const startSelection = useCallback((label: string) => {

apps/webapp/app/components/query/QueryEditor.tsx

@@ -505,6 +505,7 @@ export function QueryEditor({
 
   // Use a ref so the effect can read chartConfig without re-firing on every config tweak
   const chartConfigRef = useRef(chartConfig);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   chartConfigRef.current = chartConfig;
 
   // Reset chart config only when a column referenced by the current config is no
@@ -562,6 +563,7 @@ export function QueryEditor({
   }, []);
 
   // Compute current save data for the save render prop
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   const currentQuery = editorRef.current?.getQuery() ?? "";
   const saveData: QueryEditorSaveData = {
     title: queryTitle ?? "Untitled Query",
@@ -790,6 +792,7 @@ export function QueryEditor({
                                 onRename={handleRenameTitle}
                               />
                             }
+                            // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
                             query={editorRef.current?.getQuery() ?? defaultQuery}
                             data={{
                               rows: results.rows,
@@ -844,6 +847,7 @@ export function QueryEditor({
                         <ResultsChart
                           rows={results.rows}
                           columns={results.columns}
+                          // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
                           query={editorRef.current?.getQuery() ?? defaultQuery}
                           chartConfig={chartConfig}
                           onChartConfigChange={handleChartConfigChange}
@@ -893,6 +897,7 @@ export function QueryEditor({
                         <ResultsBigNumber
                           rows={results.rows}
                           columns={results.columns}
+                          // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
                           query={editorRef.current?.getQuery() ?? defaultQuery}
                           bigNumberConfig={bigNumberConfig}
                           onBigNumberConfigChange={setBigNumberConfig}
@@ -955,6 +960,7 @@ export function QueryEditor({
       {mode.type === "standalone" && (
         <SaveToDashboardDialog
           title={queryTitle ?? "Untitled Query"}
+          // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
           query={editorRef.current?.getQuery() ?? ""}
           config={
             resultsView === "table"

apps/webapp/app/components/runs/v3/RunStatusCellTooltip.tsx

@@ -100,6 +100,7 @@ function useChildRunStatusesTooltip({
     key: `child-statuses-${friendlyId}`,
   });
   const fetcherStateRef = useRef(fetcher.state);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   fetcherStateRef.current = fetcher.state;
 
   const [childStatuses, setChildStatuses] = useState<ChildStatusEntry[] | undefined>();
@@ -120,6 +121,7 @@ function useChildRunStatusesTooltip({
   // Keep the latest loader callback available to the polling interval
   // without recreating the interval on every render.
   const loadChildStatusesRef = useRef(loadChildStatuses);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   loadChildStatusesRef.current = loadChildStatuses;
 
   const stopPolling = useCallback(() => {

apps/webapp/app/components/runs/v3/agent/AgentView.tsx

@@ -285,6 +285,7 @@ function useAgentSessionMessages({
   // `scheduleFlush`. The Map *reference* changes on every flush so React
   // detects the state update and the downstream `useMemo` recomputes.
   const [messagesById, setMessagesById] = useState<Map<string, UIMessage>>(
+    // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
     () => new Map(pendingRef.current)
   );
 
@@ -294,6 +295,7 @@ function useAgentSessionMessages({
   const lastFlushAtRef = useRef<number>(0);
   const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const scheduleFlush = useRef<() => void>(() => {});
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   scheduleFlush.current = () => {
     if (pendingTimerRef.current !== null) return; // already scheduled
     const now = Date.now();
@@ -670,6 +672,7 @@ function useAgentSessionMessages({
   return useMemo(() => {
     const timestamps = timestampsRef.current;
     const arr = Array.from(messagesById.values());
+    // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
     arr.sort((a, b) => {
       const ta = timestamps.get(a.id) ?? 0;
       const tb = timestamps.get(b.id) ?? 0;

apps/webapp/app/components/webhookDeliveries/v1/useDeliveriesLiveReload.ts

@@ -124,6 +124,7 @@ export function useDeliveriesLiveReload({
   const location = useLocation();
   const deliveriesPollFetcher = useTypedFetcher<typeof liveDeliveriesLoader>();
   const deliveriesPollFetcherStateRef = useRef(deliveriesPollFetcher.state);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   deliveriesPollFetcherStateRef.current = deliveriesPollFetcher.state;
 
   const [visibleDeliveries, setVisibleDeliveries] = useState(deliveries);

apps/webapp/app/hooks/useAutoRevalidate.ts

@@ -11,6 +11,7 @@ export function useAutoRevalidate(options: UseAutoRevalidateOptions = {}) {
   const { interval = 5000, onFocus = true, disabled = false } = options;
   const revalidator = useRevalidator();
   const revalidatorRef = useRef(revalidator);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   revalidatorRef.current = revalidator;
 
   useEffect(() => {

apps/webapp/app/hooks/useChanged.ts

@@ -12,7 +12,9 @@ export function useChanged<T extends { id: string }>(
   const itemRef = useRef<T | undefined>();
   const itemId = item?.id;
 
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   actionRef.current = action;
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   itemRef.current = item;
 
   useEffect(() => {

apps/webapp/app/hooks/useDashboardEditor.ts

@@ -207,6 +207,7 @@ export function useDashboardEditor({
   const isInitializedRef = useRef(false);
   const currentLayoutJsonRef = useRef<string>(JSON.stringify(initialData.layout));
   const initialDataRef = useRef(initialData);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   initialDataRef.current = initialData;
 
   // Sync queue to prevent race conditions

apps/webapp/app/hooks/useDebounce.ts

@@ -29,6 +29,7 @@ export function useDebounceEffect<T>(value: T, fn: (value: T) => void, delay: nu
   const fnRef = useRef(fn);
 
   // Update the ref whenever the function changes
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   fnRef.current = fn;
 
   useEffect(() => {

apps/webapp/app/hooks/useElementVisibility.ts

@@ -8,6 +8,7 @@ export function useElementVisibility({ onVisibilityChange }: UseElementVisibilit
   const ref = useRef<HTMLDivElement>(null);
   const isVisibleRef = useRef(false);
   const callbackRef = useRef(onVisibilityChange);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative integration outside React state.
   callbackRef.current = onVisibilityChange;
 
   useEffect(() => {