chore(webapp): scope imperative component refs

Author: carderne

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(() => {