chore(webapp): scope imperative route refs

Author: carderne

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx

@@ -243,6 +243,7 @@ export default function Page() {
   const usefulLinksPanelRef = useRef<PanelHandle>(null);
   const fetcher = useFetcher();
   const fetcherRef = useRef(fetcher);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative route integration outside React state.
   fetcherRef.current = fetcher;
 
   const toggleUsefulLinks = useCallback((show: boolean) => {

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.playground.$agentParam/route.tsx

@@ -207,6 +207,7 @@ function PlaygroundChat() {
     activeConversation?.clientData ? JSON.stringify(activeConversation.clientData, null, 2) : "{}"
   );
   const clientDataJsonRef = useRef(clientDataJson);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative route integration outside React state.
   clientDataJsonRef.current = clientDataJson;
   const [machine, setMachine] = useState<string | undefined>(undefined);
   const [tags, setTags] = useState<string[]>([]);
@@ -267,12 +268,14 @@ function PlaygroundChat() {
   // silently ignored on the first send. Mirror the `clientDataJsonRef`
   // pattern so the transport always calls the latest `startSession`.
   const startSessionRef = useRef(startSession);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative route integration outside React state.
   startSessionRef.current = startSession;
 
   // Create TriggerChatTransport directly (not via useTriggerChatTransport hook
   // to avoid React version mismatch between SDK and webapp)
   const transportRef = useRef<TriggerChatTransport | null>(null);
   if (transportRef.current === null) {
+    // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative route integration outside React state.
     transportRef.current = new TriggerChatTransport({
       task: agent.slug,
       // The Remix action is idempotent on `(env, externalId)` and
@@ -301,6 +304,7 @@ function PlaygroundChat() {
         : {}),
     });
   }
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative route integration outside React state.
   const transport = transportRef.current;
 
   // Keep the transport's `defaultMetadata` in sync with the JSON editor.
@@ -351,6 +355,7 @@ function PlaygroundChat() {
   );
 
   // useChat from AI SDK — handles message accumulation, streaming, stop
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative route integration outside React state.
   const { messages, sendMessage, stop, status, error } = useChat({
     id: chatId,
     messages: initialMessages,
@@ -391,6 +396,7 @@ function PlaygroundChat() {
     inputRef.current?.focus();
   }, [isEmpty]);
 
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative route integration outside React state.
   const session = transport.getSession(chatId);
 
   /* oxlint-disable react/react-compiler -- The transport and chat ID are stable for this component's lifetime. */
@@ -1171,6 +1177,7 @@ function usePlaygroundPendingMessages({
     [status, transport, chatId, sendMessage, metadata]
   );
 
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative route integration outside React state.
   const pending: PendingMessageEntry[] = pendingMsgs.map((m) => ({
     id: m.id,
     text: m.parts[0]?.text ?? "",

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/useRunsLiveReload.ts

@@ -165,6 +165,7 @@ export function useRunsLiveReload({
   const location = useLocation();
   const runsPollFetcher = useTypedFetcher<typeof liveRunsLoader>();
   const runsPollFetcherStateRef = useRef(runsPollFetcher.state);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative route integration outside React state.
   runsPollFetcherStateRef.current = runsPollFetcher.state;
 
   const [visibleRuns, setVisibleRuns] = useState(runs);

apps/webapp/app/routes/resources.metric.tsx

@@ -207,6 +207,7 @@ export function MetricWidget({
   // Track the latest props so the submit callback always uses fresh values
   // without needing to be recreated (which would cause useInterval to re-register listeners).
   const propsRef = useRef(props);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative route integration outside React state.
   propsRef.current = props;
 
   // Track visibility so we only fetch for on-screen widgets.
@@ -265,6 +266,7 @@ export function MetricWidget({
       });
   }, [isVisibleRef]);
   /* oxlint-enable react/react-compiler */
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative route integration outside React state.
   submitRef.current = submit;
 
   // Clean up on unmount

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.$waitpointFriendlyId.complete/route.tsx

@@ -371,6 +371,7 @@ function CompleteManualWaitpointForm({ waitpoint }: { waitpoint: { id: string }
         <div className="max-h-[70vh] min-h-40 overflow-y-auto bg-background-deep scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
           <JSONEditor
             autoFocus
+            // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative route integration outside React state.
             defaultValue={currentJson.current}
             readOnly={false}
             basicSetup

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new.natural-language.tsx

@@ -59,6 +59,7 @@ export function AIGeneratedCronField({ onSuccess }: AIGeneratedCronFieldProps) {
   const fetcher = useFetcher<typeof action>();
   const [text, setText] = useState<string>("");
   const onSuccessRef = useRef(onSuccess);
+  // oxlint-disable-next-line react/react-compiler -- This ref intentionally coordinates an imperative route integration outside React state.
   onSuccessRef.current = onSuccess;
   const organization = useOrganization();
   const project = useProject();