diff --git a/apps/loopover-ui/eslint.config.ts b/apps/loopover-ui/eslint.config.ts
index 7bd4696c88..4a12a6bb72 100644
--- a/apps/loopover-ui/eslint.config.ts
+++ b/apps/loopover-ui/eslint.config.ts
@@ -21,15 +21,16 @@ export default tseslint.config(
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      // #8608: eslint-plugin-react-hooks 5 -> 7 (forced by the eslint 10 security chain, GHSA-mh99-v99m-4gvg)
-      // introduced these React-Compiler-era rules, which flag 24 pre-existing files. Fixing setState-in-effect
-      // patterns is real UI refactoring with behaviour risk -- not something to smuggle into a dependency
-      // bump -- so exactly the NEW rules are demoted to warn, keeping every rule that existed in v5 at error.
-      // Follow-up (promote back to error file-by-file): see the issue this comment cites.
+      // #8608 demoted the four React-Compiler-era rules that arrived with eslint-plugin-react-hooks 5 -> 7
+      // because they flagged 24 pre-existing files. #9588 fixed them: purity, refs and static-components are
+      // now clean and back at error, where the recommended preset puts them.
+      //
+      // set-state-in-effect stays at warn for ONE remaining site: docs-toc reads its headings out of the
+      // rendered DOM. Sourcing them from the compiled MDX `toc` instead is the real fix, but the component
+      // lives in the docs LAYOUT while that data lives in the child route -- and it also serves docs pages
+      // that are not MDX at all and so have no compiled toc. That is its own change, tracked in #9872;
+      // every other call site in this app is already clean.
       "react-hooks/set-state-in-effect": "warn",
-      "react-hooks/purity": "warn",
-      "react-hooks/refs": "warn",
-      "react-hooks/static-components": "warn",
       "no-restricted-imports": [
         "error",
         {
diff --git a/apps/loopover-ui/src/components/site/animated-terminal.tsx b/apps/loopover-ui/src/components/site/animated-terminal.tsx
index 3f637d9a6b..2cdb29f686 100644
--- a/apps/loopover-ui/src/components/site/animated-terminal.tsx
+++ b/apps/loopover-ui/src/components/site/animated-terminal.tsx
@@ -63,26 +63,30 @@ export function AnimatedTerminal({
 }) {
   const reduce = useReducedMotion();
   const [sceneIdx, setSceneIdx] = useState(0);
-  const [typed, setTyped] = useState("");
-  const [showOutput, setShowOutput] = useState(false);
+  // The typing progress belongs to ONE scene, so it is stored under that scene's key (#9588). Advancing
+  // the scene therefore resets the animation by derivation -- progress recorded for a previous scene can
+  // never be read -- instead of two setState calls at the top of the effect. Reduced motion needs no
+  // state at all: the finished frame is the pure value.
+  const [progress, setProgress] = useState({ scene: 0, typed: "", showOutput: false });
 
   const scene = scenes[sceneIdx];
+  const current =
+    progress.scene === sceneIdx ? progress : { scene: sceneIdx, typed: "", showOutput: false };
+  const typed = reduce ? scene.prompt : current.typed;
+  const showOutput = reduce ? true : current.showOutput;
 
   useEffect(() => {
-    if (reduce) {
-      setTyped(scene.prompt);
-      setShowOutput(true);
-      return;
-    }
-    setTyped("");
-    setShowOutput(false);
+    if (reduce) return;
     let i = 0;
     const type = window.setInterval(() => {
       i += 1;
-      setTyped(scene.prompt.slice(0, i));
+      setProgress({ scene: sceneIdx, typed: scene.prompt.slice(0, i), showOutput: false });
       if (i >= scene.prompt.length) {
         window.clearInterval(type);
-        window.setTimeout(() => setShowOutput(true), 220);
+        window.setTimeout(
+          () => setProgress({ scene: sceneIdx, typed: scene.prompt, showOutput: true }),
+          220,
+        );
       }
     }, TYPE_SPEED);
     return () => window.clearInterval(type);
diff --git a/apps/loopover-ui/src/components/site/api-progress-bar.tsx b/apps/loopover-ui/src/components/site/api-progress-bar.tsx
index ae5688c8b7..9f8291ec34 100644
--- a/apps/loopover-ui/src/components/site/api-progress-bar.tsx
+++ b/apps/loopover-ui/src/components/site/api-progress-bar.tsx
@@ -11,11 +11,20 @@ export function ApiProgressBar() {
   const active = inFlight > 0 || status === "loading";
   const [visible, setVisible] = useState(false);
 
+  // Becoming active shows the bar IMMEDIATELY, adjusted during render rather than from an effect (#9588):
+  // React's documented pattern for reacting to a changed input, and it renders the bar in the same commit
+  // that saw the change instead of a frame later.
+  const [wasActive, setWasActive] = useState(active);
+  if (wasActive !== active) {
+    setWasActive(active);
+    if (active) setVisible(true);
+  }
+
+  // Only the trailing fade-out is a timer, and its setState runs in the timer callback -- not synchronously
+  // in the effect body. The bar lingers 240ms after the last request settles so a burst of quick calls does
+  // not strobe it.
   useEffect(() => {
-    if (active) {
-      setVisible(true);
-      return;
-    }
+    if (active) return;
     const t = window.setTimeout(() => setVisible(false), 240);
     return () => clearTimeout(t);
   }, [active]);
diff --git a/apps/loopover-ui/src/components/site/api-status-banner.tsx b/apps/loopover-ui/src/components/site/api-status-banner.tsx
index 9088f31783..f30af03fc7 100644
--- a/apps/loopover-ui/src/components/site/api-status-banner.tsx
+++ b/apps/loopover-ui/src/components/site/api-status-banner.tsx
@@ -43,12 +43,9 @@ export function ApiStatusBanner() {
   const visibleKey = severity ? `${connection}:${status}` : null;
   const dismissed = visibleKey !== null && dismissedKey === visibleKey;
 
-  // If status changes to a new failure mode, un-dismiss.
-  useEffect(() => {
-    if (visibleKey && dismissedKey && dismissedKey !== visibleKey) {
-      setDismissedKey(null);
-    }
-  }, [visibleKey, dismissedKey]);
+  // A new failure mode un-dismisses the banner by DERIVATION: `dismissed` above compares the stored key
+  // against the current one, so a stale key already reads as not-dismissed (#9588). The effect that used to
+  // null it out changed no rendered output -- it only scrubbed state nothing consulted.
 
   if (!severity || dismissed) return null;
 
diff --git a/apps/loopover-ui/src/components/site/api/try-it.tsx b/apps/loopover-ui/src/components/site/api/try-it.tsx
index a7551ea8b0..6cefb3bf67 100644
--- a/apps/loopover-ui/src/components/site/api/try-it.tsx
+++ b/apps/loopover-ui/src/components/site/api/try-it.tsx
@@ -55,7 +55,11 @@ export function TryIt({ op, server }: { op: OpenApiOperation; server: string })
         : "API timing out — actions paused"
       : null;
 
-  const [token, setToken] = useState("");
+  // Read once, lazily: localStorage is only touched on the client, and this component is keyed on the
+  // operation so a switch remounts it and re-reads rather than needing an effect to reset (#9588).
+  const [token, setToken] = useState(() =>
+    typeof window === "undefined" ? "" : readStoredSessionToken(window.localStorage),
+  );
   const [show, setShow] = useState(false);
   const [pathParams, setPathParams] = useState<Record<string, string>>({});
   const [queryParams, setQueryParams] = useState<Record<string, string>>({});
@@ -65,14 +69,6 @@ export function TryIt({ op, server }: { op: OpenApiOperation; server: string })
   const [error, setError] = useState<string | null>(null);
   const runRef = useRef<() => Promise<void>>(() => Promise.resolve());
 
-  useEffect(() => {
-    setToken(readStoredSessionToken(localStorage));
-    setResult(null);
-    setError(null);
-    setPathParams({});
-    setQueryParams({});
-  }, [op.id]);
-
   const saveToken = (v: string) => {
     setToken(v);
     if (v) {
diff --git a/apps/loopover-ui/src/components/site/app-panels/activation-preview.test.tsx b/apps/loopover-ui/src/components/site/app-panels/activation-preview.test.tsx
index 7bbabfbe4b..276cd63fee 100644
--- a/apps/loopover-ui/src/components/site/app-panels/activation-preview.test.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/activation-preview.test.tsx
@@ -1,4 +1,5 @@
-import { render, screen, fireEvent, waitFor, within } from "@testing-library/react";
+import { screen, fireEvent, waitFor, within } from "@testing-library/react";
+import { renderWithQueryClient as render } from "@/lib/test-query-client";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 // Mock the API layer so the component never touches the network.
diff --git a/apps/loopover-ui/src/components/site/app-panels/activation-preview.tsx b/apps/loopover-ui/src/components/site/app-panels/activation-preview.tsx
index 49e805f2c0..6533c5e07a 100644
--- a/apps/loopover-ui/src/components/site/app-panels/activation-preview.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/activation-preview.tsx
@@ -1,5 +1,6 @@
 import { CheckCircle2 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 
 import { StatusPill, type Status } from "@/components/site/control-primitives";
 import { TableScroll } from "@/components/site/data-table";
@@ -58,49 +59,34 @@ function repoApiBase(repoFullName: string): string | null {
 export function ActivationPreview({ reviewability }: { reviewability: Array<{ pr: string }> }) {
   const repoOptions = useMemo(() => extractPreviewRepoOptions(reviewability), [reviewability]);
   const [repoFullName, setRepoFullName] = useState(repoOptions[0] ?? "");
-  const [preview, setPreview] = useState<ActivationPreviewResponse | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [loadError, setLoadError] = useState<string | null>(null);
-
   const base = repoApiBase(repoFullName);
   const hasRepos = repoOptions.length > 0;
 
-  const load = useCallback(
-    async (opts?: { cancelled?: () => boolean }) => {
-      const isCancelled = opts?.cancelled ?? (() => false);
-      const apiBase = repoApiBase(repoFullName);
-      if (!apiBase) {
-        setPreview(null);
-        setLoadError(null);
-        return;
-      }
-      setLoadError(null);
-      setLoading(true);
-      const result = await apiFetch<ActivationPreviewResponse>(`${apiBase}/activation-preview`, {
+  // react-query rather than a hand-rolled load effect (#9588): keying on the repo is what drops a
+  // response that a newer repo selection has already superseded, which the `cancelled` callback this
+  // replaces did by hand. Options are pinned to match the previous behaviour exactly -- one attempt, no
+  // refetch on focus, nothing cached across mounts.
+  const query = useQuery({
+    queryKey: ["activation-preview", base],
+    enabled: base !== null && base !== "",
+    retry: false,
+    refetchOnWindowFocus: false,
+    gcTime: 0,
+    queryFn: async () => {
+      const result = await apiFetch<ActivationPreviewResponse>(`${base}/activation-preview`, {
         label: "Activation preview",
         credentials: "include",
         silentStatus: true,
       });
-      // Ignore responses after a newer repoFullName keyed a fresh load (#7784).
-      if (isCancelled()) return;
-      if (result.ok) {
-        setPreview(result.data);
-      } else {
-        setPreview(null);
-        setLoadError(result.message);
-      }
-      setLoading(false);
+      if (!result.ok) throw new Error(result.message);
+      return result.data;
     },
-    [repoFullName],
-  );
+  });
 
-  useEffect(() => {
-    let cancelled = false;
-    void load({ cancelled: () => cancelled });
-    return () => {
-      cancelled = true;
-    };
-  }, [load]);
+  const preview = query.data ?? null;
+  const loading = query.isFetching;
+  const loadError = query.isError ? query.error.message : null;
+  const load = () => void query.refetch();
 
   return (
     <section
diff --git a/apps/loopover-ui/src/components/site/app-panels/ai-review-settings.test.tsx b/apps/loopover-ui/src/components/site/app-panels/ai-review-settings.test.tsx
index 7083bcbb89..ac2960d31a 100644
--- a/apps/loopover-ui/src/components/site/app-panels/ai-review-settings.test.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/ai-review-settings.test.tsx
@@ -1,4 +1,5 @@
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { screen, fireEvent, waitFor } from "@testing-library/react";
+import { renderWithQueryClient as render } from "@/lib/test-query-client";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 // Mock the API layer so the component never touches the network.
diff --git a/apps/loopover-ui/src/components/site/app-panels/ai-review-settings.tsx b/apps/loopover-ui/src/components/site/app-panels/ai-review-settings.tsx
index 51d579edfd..2fa2e025fd 100644
--- a/apps/loopover-ui/src/components/site/app-panels/ai-review-settings.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/ai-review-settings.tsx
@@ -1,5 +1,6 @@
 import { KeyRound, Loader2, Save, Trash2 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { StatusPill } from "@/components/site/control-primitives";
 import { apiFetch } from "@/lib/api/request";
 import { getApiOrigin } from "@/lib/api/origin";
@@ -55,52 +56,55 @@ export function AiReviewSettings({ reviewability }: { reviewability: Array<{ pr:
   const [keyInput, setKeyInput] = useState("");
   const [keyStatus, setKeyStatus] = useState<AiKeyStatus | null>(null);
   const [busy, setBusy] = useState(false);
-  const [loading, setLoading] = useState(false);
   const [message, setMessage] = useState<Message | null>(null);
 
   const base = repoApiBase(repoFullName);
   const hasRepos = repoOptions.length > 0;
 
-  const load = useCallback(
-    async (opts?: { cancelled?: () => boolean }) => {
-      const isCancelled = opts?.cancelled ?? (() => false);
-      const apiBase = repoApiBase(repoFullName);
-      if (!apiBase) return;
-      setMessage(null);
-      setLoading(true);
+  // react-query rather than a hand-rolled load effect (#9588): keying on the repo drops a response a newer
+  // selection has already superseded, which the `cancelled` callback this replaces did by hand. Options are
+  // pinned to the previous behaviour -- one attempt, no focus refetch, nothing cached across mounts.
+  const query = useQuery({
+    queryKey: ["ai-review-settings", base],
+    enabled: base !== null && base !== "",
+    retry: false,
+    refetchOnWindowFocus: false,
+    gcTime: 0,
+    queryFn: async () => {
       const [settings, key] = await Promise.all([
-        apiFetch<RepoSettingsResponse>(`${apiBase}/settings`, {
+        apiFetch<RepoSettingsResponse>(`${base}/settings`, {
           label: "AI review settings",
           credentials: "include",
           silentStatus: true,
         }),
-        apiFetch<AiKeyStatus>(`${apiBase}/ai-key`, {
+        apiFetch<AiKeyStatus>(`${base}/ai-key`, {
           label: "AI key status",
           credentials: "include",
           silentStatus: true,
         }),
       ]);
-      // Ignore responses after a newer repoFullName keyed a fresh load (#7784).
-      if (isCancelled()) return;
-      if (settings.ok) {
-        setMode(settings.data.aiReviewMode ?? "off");
-        setByok(settings.data.aiReviewByok ?? false);
-        setProvider(settings.data.aiReviewProvider ?? "anthropic");
-        setModel(settings.data.aiReviewModel ?? "");
-      }
-      setKeyStatus(key.ok ? key.data : null);
-      setLoading(false);
+      return { settings: settings.ok ? settings.data : null, key: key.ok ? key.data : null };
     },
-    [repoFullName],
-  );
+  });
+
+  const loading = query.isFetching;
+  const load = () => void query.refetch();
 
-  useEffect(() => {
-    let cancelled = false;
-    void load({ cancelled: () => cancelled });
-    return () => {
-      cancelled = true;
-    };
-  }, [load]);
+  // Seed the editable fields from whatever the last response carried. Adjusted during render (React's
+  // documented pattern) and gated on `dataUpdatedAt`, so a fresh response re-seeds but a user's own edits
+  // survive every re-render in between.
+  const [seededAt, setSeededAt] = useState<number | null>(null);
+  if (query.data && seededAt !== query.dataUpdatedAt) {
+    setSeededAt(query.dataUpdatedAt);
+    const settings = query.data.settings;
+    if (settings) {
+      setMode(settings.aiReviewMode ?? "off");
+      setByok(settings.aiReviewByok ?? false);
+      setProvider(settings.aiReviewProvider ?? "anthropic");
+      setModel(settings.aiReviewModel ?? "");
+    }
+    setKeyStatus(query.data.key);
+  }
 
   async function saveKey() {
     if (!base) return;
diff --git a/apps/loopover-ui/src/components/site/app-panels/ams-miner-cohort-card.test.tsx b/apps/loopover-ui/src/components/site/app-panels/ams-miner-cohort-card.test.tsx
index 621b2aa536..3003e3490c 100644
--- a/apps/loopover-ui/src/components/site/app-panels/ams-miner-cohort-card.test.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/ams-miner-cohort-card.test.tsx
@@ -1,4 +1,5 @@
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { screen, fireEvent, waitFor } from "@testing-library/react";
+import { renderWithQueryClient as render } from "@/lib/test-query-client";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 // Mock the API layer so the component never touches the network.
diff --git a/apps/loopover-ui/src/components/site/app-panels/ams-miner-cohort-card.tsx b/apps/loopover-ui/src/components/site/app-panels/ams-miner-cohort-card.tsx
index 798da07c81..7fcf79667e 100644
--- a/apps/loopover-ui/src/components/site/app-panels/ams-miner-cohort-card.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/ams-miner-cohort-card.tsx
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useState } from "react";
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 
 import { StateBoundary } from "@/components/site/state-views";
 import { apiFetch } from "@/lib/api/request";
@@ -91,49 +92,33 @@ function CohortColumn({ title, metrics }: { title: string; metrics: AmsMinerCoho
 export function AmsMinerCohortCard({ reviewability }: { reviewability: Array<{ pr: string }> }) {
   const repoOptions = extractPreviewRepoOptions(reviewability);
   const [repoFullName, setRepoFullName] = useState(repoOptions[0] ?? "");
-  const [comparison, setComparison] = useState<AmsMinerCohortComparison | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [loadError, setLoadError] = useState<string | null>(null);
-
   const base = repoApiBase(repoFullName);
   const hasRepos = repoOptions.length > 0;
 
-  const load = useCallback(
-    async (opts?: { cancelled?: () => boolean }) => {
-      const isCancelled = opts?.cancelled ?? (() => false);
-      const apiBase = repoApiBase(repoFullName);
-      if (!apiBase) {
-        setComparison(null);
-        setLoadError(null);
-        return;
-      }
-      setLoadError(null);
-      setLoading(true);
-      const result = await apiFetch<AmsMinerCohortComparison>(`${apiBase}/ams-miner-cohort`, {
+  // react-query rather than a hand-rolled load effect (#9588): the query key drops a response a newer repo
+  // selection has already superseded, which the `cancelled` callback this replaces did by hand. Options are
+  // pinned to the previous behaviour -- one attempt, no focus refetch, nothing cached across mounts.
+  const query = useQuery({
+    queryKey: ["ams-miner-cohort", base],
+    enabled: base !== null && base !== "",
+    retry: false,
+    refetchOnWindowFocus: false,
+    gcTime: 0,
+    queryFn: async () => {
+      const result = await apiFetch<AmsMinerCohortComparison>(`${base}/ams-miner-cohort`, {
         label: "AMS miner cohort comparison",
         credentials: "include",
         silentStatus: true,
       });
-      // Ignore responses after a newer repoFullName keyed a fresh load (#7784).
-      if (isCancelled()) return;
-      if (result.ok) {
-        setComparison(result.data);
-      } else {
-        setComparison(null);
-        setLoadError(result.message);
-      }
-      setLoading(false);
+      if (!result.ok) throw new Error(result.message);
+      return result.data;
     },
-    [repoFullName],
-  );
+  });
 
-  useEffect(() => {
-    let cancelled = false;
-    void load({ cancelled: () => cancelled });
-    return () => {
-      cancelled = true;
-    };
-  }, [load]);
+  const comparison = query.data ?? null;
+  const loading = query.isFetching;
+  const loadError = query.isError ? query.error.message : null;
+  const load = () => void query.refetch();
 
   return (
     <section
diff --git a/apps/loopover-ui/src/components/site/app-panels/chat-qa-panel.tsx b/apps/loopover-ui/src/components/site/app-panels/chat-qa-panel.tsx
index e0d52ee192..085af3d69d 100644
--- a/apps/loopover-ui/src/components/site/app-panels/chat-qa-panel.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/chat-qa-panel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useMemo, useState, type ReactNode } from "react";
 import { MessageCircle, RefreshCw, Send } from "lucide-react";
 
 import { StatusPill, type Status } from "@/components/site/control-primitives";
@@ -29,16 +29,16 @@ type ReviewabilityRow = { pr: string; title: string; chatQaEnabled: boolean };
  */
 export function ChatQaPanel({ reviewability }: { reviewability: ReviewabilityRow[] }) {
   const eligible = useMemo(() => reviewability.filter((row) => row.chatQaEnabled), [reviewability]);
-  const [selectedPr, setSelectedPr] = useState(eligible[0]?.pr ?? "");
+  // The chosen PR, or the first eligible one when nothing is chosen yet. DERIVED (#9588) rather than
+  // back-filled by an effect: the list arrives asynchronously, and the effect used to leave one render
+  // showing an empty select before correcting itself.
+  const [chosenPr, setChosenPr] = useState("");
+  const selectedPr = chosenPr || (eligible[0]?.pr ?? "");
   const [question, setQuestion] = useState("");
   const [result, setResult] = useState<ChatQaResult | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
 
-  useEffect(() => {
-    if (!selectedPr && eligible[0]) setSelectedPr(eligible[0].pr);
-  }, [selectedPr, eligible]);
-
   if (eligible.length === 0) return null;
 
   async function ask() {
@@ -98,7 +98,7 @@ export function ChatQaPanel({ reviewability }: { reviewability: ReviewabilityRow
           <select
             value={selectedPr}
             onChange={(event) => {
-              setSelectedPr(event.target.value);
+              setChosenPr(event.target.value);
               setResult(null);
               setError(null);
             }}
diff --git a/apps/loopover-ui/src/components/site/app-panels/commands-panel.tsx b/apps/loopover-ui/src/components/site/app-panels/commands-panel.tsx
index 44c4774ee1..560d822459 100644
--- a/apps/loopover-ui/src/components/site/app-panels/commands-panel.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/commands-panel.tsx
@@ -35,7 +35,12 @@ export function CommandsPanel() {
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [repoFullName, setRepoFullName] = useState("");
   const [pullNumber, setPullNumber] = useState("");
-  const [preview, setPreview] = useState<CommandPreviewResponse | null>(null);
+  // The preview is keyed by the exact inputs it was fetched for, so clearing it when they change is a
+  // DERIVATION rather than a synchronous write at the top of the effect (#9588). This also drops a stale
+  // in-flight response on the floor for free: it lands under the old key and can never be shown.
+  const [fetched, setFetched] = useState<{ key: string; preview: CommandPreviewResponse } | null>(
+    null,
+  );
   const selected =
     commands.status === "ready"
       ? (commands.data.commands.find((command) => command.id === selectedId) ??
@@ -47,8 +52,15 @@ export function CommandsPanel() {
     Number.isInteger(parsedPullNumber) &&
     parsedPullNumber > 0;
 
+  const previewKey = JSON.stringify([
+    selected?.id ?? null,
+    repoFullName.trim(),
+    parsedPullNumber,
+    validContext,
+  ]);
+  const preview = fetched !== null && fetched.key === previewKey ? fetched.preview : null;
+
   useEffect(() => {
-    setPreview(null);
     if (!selected || !validContext) return;
     let active = true;
     const origin = getApiOrigin().replace(/\/$/, "");
@@ -64,12 +76,12 @@ export function CommandsPanel() {
       }),
       silentStatus: true,
     }).then((result) => {
-      if (active && result.ok) setPreview(result.data);
+      if (active && result.ok) setFetched({ key: previewKey, preview: result.data });
     });
     return () => {
       active = false;
     };
-  }, [parsedPullNumber, repoFullName, selected, validContext]);
+  }, [parsedPullNumber, previewKey, repoFullName, selected, validContext]);
 
   return (
     <StateBoundary
diff --git a/apps/loopover-ui/src/components/site/app-panels/maintainer-panel-federated-benchmark.test.tsx b/apps/loopover-ui/src/components/site/app-panels/maintainer-panel-federated-benchmark.test.tsx
index 06adb307c9..e340f404fd 100644
--- a/apps/loopover-ui/src/components/site/app-panels/maintainer-panel-federated-benchmark.test.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/maintainer-panel-federated-benchmark.test.tsx
@@ -1,4 +1,5 @@
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
+import { renderWithQueryClient as render } from "@/lib/test-query-client";
 import { describe, expect, it, vi } from "vitest";
 
 // A maintainer session + a path-aware data hook: the dashboard call resolves with a minimal payload; every
diff --git a/apps/loopover-ui/src/components/site/app-panels/maintainer-panel-slop.test.tsx b/apps/loopover-ui/src/components/site/app-panels/maintainer-panel-slop.test.tsx
index 6ae559b594..8b84201570 100644
--- a/apps/loopover-ui/src/components/site/app-panels/maintainer-panel-slop.test.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/maintainer-panel-slop.test.tsx
@@ -1,4 +1,5 @@
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
+import { renderWithQueryClient as render } from "@/lib/test-query-client";
 import { describe, expect, it, vi } from "vitest";
 
 // A maintainer session + a path-aware data hook: the dashboard call resolves with reviewability rows (one
diff --git a/apps/loopover-ui/src/components/site/app-panels/maintainer-panel.test.tsx b/apps/loopover-ui/src/components/site/app-panels/maintainer-panel.test.tsx
index 6d751d6e0f..eb717022d4 100644
--- a/apps/loopover-ui/src/components/site/app-panels/maintainer-panel.test.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/maintainer-panel.test.tsx
@@ -1,4 +1,5 @@
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
+import { renderWithQueryClient as render } from "@/lib/test-query-client";
 import { describe, expect, it, vi } from "vitest";
 
 // Control the session role + stub the data hook so the dashboard branch never hits the network.
diff --git a/apps/loopover-ui/src/components/site/app-panels/maintainer-panel.tsx b/apps/loopover-ui/src/components/site/app-panels/maintainer-panel.tsx
index 21f8262bff..cbaf93bc22 100644
--- a/apps/loopover-ui/src/components/site/app-panels/maintainer-panel.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/maintainer-panel.tsx
@@ -510,20 +510,19 @@ function SurfacePreview({
   const [busy, setBusy] = useState(false);
   const repoParts = splitRepoFullName(form.repoFullName);
 
-  useEffect(() => {
-    if (!form.repoFullName && repoOptions[0]) {
-      setForm((current) => ({ ...current, repoFullName: repoOptions[0] }));
-    }
-  }, [form.repoFullName, repoOptions]);
-
-  useEffect(() => {
-    if (!initialRepoFullName) return;
+  // Seed the repo field from the panel's target, or the first available option when it has none, and
+  // re-seed whenever that target changes. Adjusted during render -- React's documented pattern for
+  // reacting to a changed input -- rather than from two effects (#9588), so the field is populated on the
+  // render that first sees the options instead of a frame later. `appliedSeed` is what keeps a user's own
+  // edit from being overwritten: once a seed has been applied, only a NEW seed replaces it.
+  const seedRepo = initialRepoFullName || repoOptions[0] || "";
+  const [appliedSeed, setAppliedSeed] = useState<string | null>(null);
+  if (seedRepo && appliedSeed !== seedRepo && (!form.repoFullName || initialRepoFullName)) {
+    setAppliedSeed(seedRepo);
     setForm((current) =>
-      current.repoFullName === initialRepoFullName
-        ? current
-        : { ...current, repoFullName: initialRepoFullName },
+      current.repoFullName === seedRepo ? current : { ...current, repoFullName: seedRepo },
     );
-  }, [initialRepoFullName]);
+  }
 
   async function runPreview(nextForm = form) {
     const target = splitRepoFullName(nextForm.repoFullName);
diff --git a/apps/loopover-ui/src/components/site/app-panels/maintainer-settings.test.tsx b/apps/loopover-ui/src/components/site/app-panels/maintainer-settings.test.tsx
index e0e0385e8d..bd7b15a4a1 100644
--- a/apps/loopover-ui/src/components/site/app-panels/maintainer-settings.test.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/maintainer-settings.test.tsx
@@ -1,4 +1,5 @@
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
+import { renderWithQueryClient as render } from "@/lib/test-query-client";
 import { describe, expect, it, vi } from "vitest";
 
 // Mock the API layer so the settings + focus-manifest loads resolve without a network.
diff --git a/apps/loopover-ui/src/components/site/app-panels/maintainer-settings.tsx b/apps/loopover-ui/src/components/site/app-panels/maintainer-settings.tsx
index be2f5fc6e1..d412f27716 100644
--- a/apps/loopover-ui/src/components/site/app-panels/maintainer-settings.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/maintainer-settings.tsx
@@ -1,5 +1,6 @@
 import { FileCog, Loader2, Save } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 
 import { apiFetch } from "@/lib/api/request";
 import { getApiOrigin } from "@/lib/api/origin";
@@ -138,50 +139,49 @@ export function MaintainerSettings({ reviewability }: { reviewability: Array<{ p
   const repoOptions = useMemo(() => extractPreviewRepoOptions(reviewability), [reviewability]);
   const [repoFullName, setRepoFullName] = useState(repoOptions[0] ?? "");
   const [settings, setSettings] = useState<MaintainerSettings | null>(null);
-  const [loading, setLoading] = useState(false);
   const [busy, setBusy] = useState(false);
   const [message, setMessage] = useState<Message | null>(null);
 
   const base = repoApiBase(repoFullName);
   const hasRepos = repoOptions.length > 0;
 
-  const load = useCallback(
-    async (opts?: { cancelled?: () => boolean }) => {
-      const isCancelled = opts?.cancelled ?? (() => false);
-      const apiBase = repoApiBase(repoFullName);
-      if (!apiBase) return;
-      setMessage(null);
-      setLoading(true);
-      const result = await apiFetch<MaintainerSettings>(`${apiBase}/settings`, {
+  // react-query rather than a hand-rolled load effect (#9588): the query key drops a response a newer repo
+  // selection has superseded, which the `cancelled` callback this replaces did by hand. Options are pinned
+  // to the previous behaviour -- one attempt, no focus refetch, nothing cached across mounts.
+  const query = useQuery({
+    queryKey: ["maintainer-settings", base],
+    enabled: base !== null && base !== "",
+    retry: false,
+    refetchOnWindowFocus: false,
+    gcTime: 0,
+    queryFn: async () => {
+      const result = await apiFetch<MaintainerSettings>(`${base}/settings`, {
         label: "Repository settings",
         credentials: "include",
         silentStatus: true,
       });
-      // Ignore responses after a newer repoFullName keyed a fresh load (#7784).
-      if (isCancelled()) return;
+      if (!result.ok) throw new Error(result.message);
       // Default the agent-layer fields defensively so the editor renders even against an older response shape.
-      setSettings(
-        result.ok
-          ? {
-              ...result.data,
-              autonomy: result.data.autonomy ?? {},
-              agentPaused: result.data.agentPaused ?? false,
-              agentDryRun: result.data.agentDryRun ?? false,
-            }
-          : null,
-      );
-      setLoading(false);
+      return {
+        ...result.data,
+        autonomy: result.data.autonomy ?? {},
+        agentPaused: result.data.agentPaused ?? false,
+        agentDryRun: result.data.agentDryRun ?? false,
+      };
     },
-    [repoFullName],
-  );
-
-  useEffect(() => {
-    let cancelled = false;
-    void load({ cancelled: () => cancelled });
-    return () => {
-      cancelled = true;
-    };
-  }, [load]);
+  });
+
+  const loading = query.isFetching;
+  const load = () => void query.refetch();
+
+  // The editor mutates `settings`, so it stays state -- seeded from each new response and gated on
+  // dataUpdatedAt, applied during render (React's documented pattern). A fresh response re-seeds the
+  // editor; a maintainer's in-progress edits survive every re-render in between.
+  const [seededAt, setSeededAt] = useState<number | null>(null);
+  if (query.data && seededAt !== query.dataUpdatedAt) {
+    setSeededAt(query.dataUpdatedAt);
+    setSettings(query.data);
+  }
 
   function setField<K extends keyof MaintainerSettings>(key: K, value: MaintainerSettings[K]) {
     setSettings((current) => (current ? { ...current, [key]: value } : current));
@@ -526,36 +526,37 @@ type FocusManifestResponse = { manifest: unknown };
  */
 function FocusManifestEditor({ base }: { base: string | null }) {
   const [text, setText] = useState("");
-  const [loading, setLoading] = useState(false);
   const [busy, setBusy] = useState(false);
   const [message, setMessage] = useState<Message | null>(null);
 
-  const load = useCallback(
-    async (opts?: { cancelled?: () => boolean }) => {
-      const isCancelled = opts?.cancelled ?? (() => false);
-      if (!base) return;
-      setLoading(true);
-      setMessage(null);
+  // react-query rather than a hand-rolled load effect (#9588); the query key does the supersession the
+  // `cancelled` callback did by hand. Pinned to the previous behaviour -- one attempt, no focus refetch.
+  const query = useQuery({
+    queryKey: ["focus-manifest", base],
+    enabled: base !== null && base !== "",
+    retry: false,
+    refetchOnWindowFocus: false,
+    gcTime: 0,
+    queryFn: async () => {
       const result = await apiFetch<FocusManifestResponse>(`${base}/focus-manifest`, {
         label: "Focus manifest",
         credentials: "include",
         silentStatus: true,
       });
-      // Ignore responses after a newer base keyed a fresh load (#7784).
-      if (isCancelled()) return;
-      setText(result.ok ? JSON.stringify(result.data.manifest, null, 2) : "");
-      setLoading(false);
+      // A failed read renders as an empty editor, exactly as before -- not as an error surface.
+      return result.ok ? JSON.stringify(result.data.manifest, null, 2) : "";
     },
-    [base],
-  );
+  });
+
+  const loading = query.isFetching;
+  const load = () => void query.refetch();
 
-  useEffect(() => {
-    let cancelled = false;
-    void load({ cancelled: () => cancelled });
-    return () => {
-      cancelled = true;
-    };
-  }, [load]);
+  // The textarea is edited, so its content stays state -- re-seeded only when a NEW response arrives.
+  const [seededAt, setSeededAt] = useState<number | null>(null);
+  if (query.data !== undefined && seededAt !== query.dataUpdatedAt) {
+    setSeededAt(query.dataUpdatedAt);
+    setText(query.data);
+  }
 
   async function save() {
     if (!base) return;
diff --git a/apps/loopover-ui/src/components/site/app-panels/onboarding-preview-card.test.tsx b/apps/loopover-ui/src/components/site/app-panels/onboarding-preview-card.test.tsx
index 5e4f41282a..78dcab8d76 100644
--- a/apps/loopover-ui/src/components/site/app-panels/onboarding-preview-card.test.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/onboarding-preview-card.test.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithQueryClient as render } from "@/lib/test-query-client";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const { apiFetch } = vi.hoisted(() => ({ apiFetch: vi.fn() }));
diff --git a/apps/loopover-ui/src/components/site/app-panels/onboarding-preview-card.tsx b/apps/loopover-ui/src/components/site/app-panels/onboarding-preview-card.tsx
index 7469670984..ac3fbc9af6 100644
--- a/apps/loopover-ui/src/components/site/app-panels/onboarding-preview-card.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/onboarding-preview-card.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { X } from "lucide-react";
 
 import { StateBoundary } from "@/components/site/state-views";
@@ -57,48 +57,43 @@ export function OnboardingPreviewCard({ reviewability }: { reviewability: Review
     LEGACY_DISMISS_KEY,
   );
   const target = reviewability[0] ?? null;
-  const [preview, setPreview] = useState<SettingsPreviewResponse | null>(null);
-  const [loading, setLoading] = useState(Boolean(target));
-  const [error, setError] = useState<string | null>(null);
+  // react-query rather than a hand-rolled load effect (#9588). The unparseable-target case is a DERIVED
+  // error rather than a fetch that never happens: it depends only on the target, so it needs no request and
+  // no state. Options are pinned to the previous behaviour -- one attempt, no focus refetch, no cache.
+  const form = target ? reviewabilityRowToForm(target) : null;
+  const repoParts = form ? splitRepoFullName(form.repoFullName) : null;
+  const unparseable = target !== undefined && target !== null && (!form || !repoParts);
 
-  const load = useCallback(async () => {
-    if (!target) {
-      setPreview(null);
-      setError(null);
-      return;
-    }
-    const form = reviewabilityRowToForm(target);
-    const repoParts = form ? splitRepoFullName(form.repoFullName) : null;
-    if (!form || !repoParts) {
-      setPreview(null);
-      setError(`Couldn't parse a repository from ${target.pr}.`);
-      return;
-    }
-    setLoading(true);
-    setError(null);
-    const result = await apiFetch<SettingsPreviewResponse>(
-      `${getApiOrigin().replace(/\/$/, "")}/v1/repos/${encodeURIComponent(repoParts.owner)}/${encodeURIComponent(repoParts.repo)}/settings-preview`,
-      {
-        method: "POST",
-        label: "Onboarding preview",
-        credentials: "include",
-        headers: { Accept: "application/json", "Content-Type": "application/json" },
-        body: JSON.stringify(buildSettingsPreviewRequest(form)),
-      },
-    );
-    setLoading(false);
-    if (result.ok) {
-      setPreview(result.data);
-    } else {
-      setPreview(null);
-      setError(result.message);
-    }
-  }, [target]);
+  const query = useQuery({
+    queryKey: ["onboarding-preview", repoParts?.owner ?? null, repoParts?.repo ?? null],
+    enabled: hydrated && !state.dismissed && form !== null && repoParts !== null,
+    retry: false,
+    refetchOnWindowFocus: false,
+    gcTime: 0,
+    queryFn: async () => {
+      const result = await apiFetch<SettingsPreviewResponse>(
+        `${getApiOrigin().replace(/\/$/, "")}/v1/repos/${encodeURIComponent(repoParts!.owner)}/${encodeURIComponent(repoParts!.repo)}/settings-preview`,
+        {
+          method: "POST",
+          label: "Onboarding preview",
+          credentials: "include",
+          headers: { Accept: "application/json", "Content-Type": "application/json" },
+          body: JSON.stringify(buildSettingsPreviewRequest(form!)),
+        },
+      );
+      if (!result.ok) throw new Error(result.message);
+      return result.data;
+    },
+  });
 
-  useEffect(() => {
-    if (!hydrated || state.dismissed) return;
-    void load();
-  }, [load, hydrated, state.dismissed]);
+  const preview = query.data ?? null;
+  const loading = query.isFetching;
+  const error = unparseable
+    ? `Couldn't parse a repository from ${target?.pr}.`
+    : query.isError
+      ? query.error.message
+      : null;
+  const load = () => void query.refetch();
 
   if (!hydrated || state.dismissed) return null;
 
diff --git a/apps/loopover-ui/src/components/site/app-panels/playground-panel.test.tsx b/apps/loopover-ui/src/components/site/app-panels/playground-panel.test.tsx
index e885680fef..533c45a4c5 100644
--- a/apps/loopover-ui/src/components/site/app-panels/playground-panel.test.tsx
+++ b/apps/loopover-ui/src/components/site/app-panels/playground-panel.test.tsx
@@ -1,4 +1,5 @@
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
+import { renderWithQueryClient as render } from "@/lib/test-query-client";
 import { describe, expect, it, vi } from "vitest";
 
 // Keep the panel off the network — useSession()/live runs both go through apiFetch.
diff --git a/apps/loopover-ui/src/components/site/app-shell.tsx b/apps/loopover-ui/src/components/site/app-shell.tsx
index 2a2fc7ed80..e29dca9236 100644
--- a/apps/loopover-ui/src/components/site/app-shell.tsx
+++ b/apps/loopover-ui/src/components/site/app-shell.tsx
@@ -14,7 +14,7 @@ import {
   Workflow,
 } from "lucide-react";
 import type { ComponentType } from "react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useSyncExternalStore } from "react";
 
 import { PREVIEW_SESSION_ALLOWED, useSession } from "@/lib/api/session";
 import { describeApiStatus, pingHealth, useApiStatus } from "@/lib/api/status";
@@ -34,6 +34,24 @@ import {
   SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { LoopOverMark } from "./mark";
+
+/** The sidebar's persisted open/closed state, read straight from its cookie. A primitive snapshot, so it
+ *  is referentially stable for `useSyncExternalStore` by construction. Defaults to open when unset. */
+function readSidebarCookie(): boolean | undefined {
+  const match = document.cookie.match(/(?:^|; )sidebar_state=([^;]+)/);
+  return match ? match[1] === "true" : true;
+}
+
+/** No cookie exists during server render or the hydration pass; `undefined` is what the gate below keys on. */
+function readNoSidebarCookie(): boolean | undefined {
+  return undefined;
+}
+
+/** The cookie is written by the sidebar itself and never changes underneath this component, so there is
+ *  nothing to subscribe to -- the same posture the mount effect this replaces already had. */
+function subscribeToSidebarCookie(): () => void {
+  return () => {};
+}
 import { StatusPill, type Status } from "./control-primitives";
 import { LoadingState } from "./state-views";
 import { cn } from "@/lib/utils";
@@ -103,12 +121,15 @@ export function AppShell() {
   const loc = useLocation();
   const navigate = useNavigate();
   const routerState = useRouterState();
-  const [sidebarOpen, setSidebarOpen] = useState<boolean | undefined>(undefined);
-
-  useEffect(() => {
-    const m = document.cookie.match(/(?:^|; )sidebar_state=([^;]+)/);
-    setSidebarOpen(m ? m[1] === "true" : true);
-  }, []);
+  // The sidebar's persisted state lives in a cookie -- an external store, so it is READ as one (#9588)
+  // rather than copied into state by a mount effect. The server snapshot stays `undefined`, which is what
+  // the hydration gate below already keys on, so the rendered output is unchanged; the difference is that
+  // the real value is available on the first client render instead of one cascading render later.
+  const sidebarOpen = useSyncExternalStore(
+    subscribeToSidebarCookie,
+    readSidebarCookie,
+    readNoSidebarCookie,
+  );
 
   // Preview deploys: when this is a preview build (VITE_PREVIEW) and the URL carries `?preview=1`, start
   // the synthetic demo session automatically once hydration confirms there's no real session. This lets the
diff --git a/apps/loopover-ui/src/components/site/audit-feed.test.tsx b/apps/loopover-ui/src/components/site/audit-feed.test.tsx
index 202777866d..98c1ab357d 100644
--- a/apps/loopover-ui/src/components/site/audit-feed.test.tsx
+++ b/apps/loopover-ui/src/components/site/audit-feed.test.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { renderWithQueryClient as render } from "@/lib/test-query-client";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const { apiFetch } = vi.hoisted(() => ({ apiFetch: vi.fn() }));
diff --git a/apps/loopover-ui/src/components/site/audit-feed.tsx b/apps/loopover-ui/src/components/site/audit-feed.tsx
index 1aae17c8f1..85df11f6cc 100644
--- a/apps/loopover-ui/src/components/site/audit-feed.tsx
+++ b/apps/loopover-ui/src/components/site/audit-feed.tsx
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { ExternalLink } from "lucide-react";
 
 import {
@@ -40,7 +41,6 @@ export function AuditFeed({ enabled = true }: AuditFeedProps) {
   const [repoFullName, setRepoFullName] = useState("");
   const [sinceInput, setSinceInput] = useState("");
   const [sinceIso, setSinceIso] = useState("");
-  const [status, setStatus] = useState<"loading" | "ready" | "error">("loading");
   const [error, setError] = useState<string | null>(null);
   const [data, setData] = useState<SkippedPrAuditExport | null>(null);
   const [loadingMore, setLoadingMore] = useState(false);
@@ -59,44 +59,54 @@ export function AuditFeed({ enabled = true }: AuditFeedProps) {
     [reason, repoFullName, sinceIso],
   );
 
-  const load = useCallback(async () => {
-    if (!enabled) {
-      setStatus("error");
-      setError("This audit feed is unavailable for your current role.");
-      setData(null);
-      return;
-    }
-    const generation = ++requestGenerationRef.current;
+  // The FIRST page comes from react-query (#9588). Later pages are appended by `loadMore` below, so the
+  // rendered list stays state -- seeded from each new first-page response, gated on dataUpdatedAt and
+  // applied during render, which is also what resets pagination when the filters change.
+  const query = useQuery({
+    queryKey: ["skipped-pr-audit", filterPath],
+    enabled,
+    retry: false,
+    refetchOnWindowFocus: false,
+    gcTime: 0,
+    queryFn: async () => {
+      const origin = getApiOrigin().replace(/\/$/, "");
+      const result = await apiFetch<SkippedPrAuditExport>(`${origin}${filterPath}`, {
+        label: "Skipped PR audit",
+        credentials: "include",
+        headers: { Accept: "application/json" },
+      });
+      if (!result.ok) throw new Error(result.message);
+      const normalized = normalizeSkippedPrAuditExport(result.data);
+      if (!normalized)
+        throw new Error("The skipped PR audit endpoint returned an unexpected response.");
+      return normalized;
+    },
+  });
+
+  const [seededAt, setSeededAt] = useState<number | null>(null);
+  if (query.data && seededAt !== query.dataUpdatedAt) {
+    setSeededAt(query.dataUpdatedAt);
+    setData(query.data);
     setLoadingMore(false);
-    setStatus("loading");
     setError(null);
-    const origin = getApiOrigin().replace(/\/$/, "");
-    const result = await apiFetch<SkippedPrAuditExport>(`${origin}${filterPath}`, {
-      label: "Skipped PR audit",
-      credentials: "include",
-      headers: { Accept: "application/json" },
-    });
-    if (generation !== requestGenerationRef.current) return;
-    if (result.ok) {
-      const normalized = normalizeSkippedPrAuditExport(result.data);
-      if (!normalized) {
-        setData(null);
-        setError("The skipped PR audit endpoint returned an unexpected response.");
-        setStatus("error");
-        return;
-      }
-      setData(normalized);
-      setStatus("ready");
-      return;
-    }
-    setData(null);
-    setError(result.message);
-    setStatus("error");
-  }, [enabled, filterPath]);
+  }
 
+  // Invalidate any in-flight `loadMore` whenever the filters change or a fresh first page lands, so a
+  // late page cannot append itself onto a list it no longer belongs to. A ref WRITE, and therefore an
+  // effect rather than the render-time seed above -- refs may not be touched during render (#9588).
   useEffect(() => {
-    void load();
-  }, [load]);
+    requestGenerationRef.current += 1;
+  }, [filterPath, query.dataUpdatedAt]);
+
+  // A role that cannot read this feed is a DERIVED error, not a fetch that never happens.
+  const status: "loading" | "ready" | "error" =
+    !enabled || query.isError ? "error" : data !== null ? "ready" : "loading";
+  const errorMessage = !enabled
+    ? "This audit feed is unavailable for your current role."
+    : query.isError
+      ? query.error.message
+      : error;
+  const load = () => void query.refetch();
 
   const applyFilters = () => {
     setSinceIso(normalizeSinceInput(sinceInput));
@@ -168,7 +178,7 @@ export function AuditFeed({ enabled = true }: AuditFeedProps) {
     return (
       <ErrorState
         title="Couldn't load skip audit"
-        description={error ?? "The skipped PR audit endpoint did not respond."}
+        description={errorMessage ?? "The skipped PR audit endpoint did not respond."}
         onRetry={() => void load()}
       />
     );
@@ -291,7 +301,7 @@ export function AuditFeed({ enabled = true }: AuditFeedProps) {
             {loadingMore ? "Loading…" : "Load more"}
           </StateActionButton>
         ) : null}
-        {error ? <p className="text-token-xs text-destructive">{error}</p> : null}
+        {errorMessage ? <p className="text-token-xs text-destructive">{errorMessage}</p> : null}
         <StateActionButton onClick={() => void load()}>Refresh</StateActionButton>
       </div>
     </div>
diff --git a/apps/loopover-ui/src/components/site/command-palette.tsx b/apps/loopover-ui/src/components/site/command-palette.tsx
index 4f2c63878c..6d6791a616 100644
--- a/apps/loopover-ui/src/components/site/command-palette.tsx
+++ b/apps/loopover-ui/src/components/site/command-palette.tsx
@@ -94,11 +94,16 @@ export function CommandPalette({ items = DEFAULT_ITEMS }: { items?: PaletteItem[
     return items.filter((i) => `${i.label} ${i.group ?? ""}`.toLowerCase().includes(term));
   }, [q, items]);
 
-  // The highlighted result resets whenever the filtered set changes or the palette re-opens, so a
-  // stale index from a previous, longer list can never point past the current end.
-  useEffect(() => {
+  // The highlighted result resets whenever the filtered set changes or the palette re-opens, so a stale
+  // index from a previous, longer list can never point past the current end. Adjusted during render
+  // (React's documented pattern for reacting to changed inputs) rather than from an effect (#9588): the
+  // reset lands in the same commit as the new list, so no frame ever renders the old index against it.
+  const resetKey = `${open}:${filtered.length}:${filtered.map((i) => i.to).join("\u0000")}`;
+  const [highlightResetKey, setHighlightResetKey] = useState(resetKey);
+  if (highlightResetKey !== resetKey) {
+    setHighlightResetKey(resetKey);
     setHighlightedIndex(0);
-  }, [filtered, open]);
+  }
 
   function selectItem(item: PaletteItem | undefined) {
     if (!item) return;
diff --git a/apps/loopover-ui/src/components/site/dead-letter-queue-panel.test.tsx b/apps/loopover-ui/src/components/site/dead-letter-queue-panel.test.tsx
index b56e60a277..22e2079271 100644
--- a/apps/loopover-ui/src/components/site/dead-letter-queue-panel.test.tsx
+++ b/apps/loopover-ui/src/components/site/dead-letter-queue-panel.test.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { renderWithQueryClient as render } from "@/lib/test-query-client";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const { apiFetch } = vi.hoisted(() => ({ apiFetch: vi.fn() }));
diff --git a/apps/loopover-ui/src/components/site/docs-toc.tsx b/apps/loopover-ui/src/components/site/docs-toc.tsx
index f7f68927a4..64831b17cb 100644
--- a/apps/loopover-ui/src/components/site/docs-toc.tsx
+++ b/apps/loopover-ui/src/components/site/docs-toc.tsx
@@ -9,6 +9,9 @@ interface Heading {
   level: 2 | 3;
 }
 
+/** A stable empty list, so a route with no headings does not hand the renderer a fresh array each time. */
+const EMPTY_HEADINGS: readonly Heading[] = Object.freeze([]);
+
 /** localStorage so the rail recalls the last section across full reloads and tabs. */
 const STORE_PREFIX = "docs-toc:v2:";
 
@@ -18,17 +21,24 @@ const STORE_PREFIX = "docs-toc:v2:";
  * if missing, and tracks the active section via IntersectionObserver.
  */
 export function DocsToc() {
-  const [items, setItems] = useState<Heading[]>([]);
-  const [active, setActive] = useState<string>("");
+  // Both the headings and the active id belong to ONE route, so both are stored under that route's path
+  // (#9588). Navigating therefore clears them by derivation -- a previous route's headings can never be
+  // read, and aria-current can never linger on one -- instead of two setState calls at the top of the
+  // effect below. The effect still runs: reading the rendered DOM and subscribing an IntersectionObserver
+  // is external-system work, which is exactly what an effect is for.
+  const [toc, setToc] = useState<{ path: string; items: readonly Heading[]; active: string }>({
+    path: "",
+    items: [],
+    active: "",
+  });
   const location = useLocation();
   const storageKey = `${STORE_PREFIX}${location.pathname}`;
 
-  useEffect(() => {
-    // Reset visible active when the path changes so aria-current never lingers
-    // on a heading from the previous route.
-    setActive("");
-    setItems([]);
+  const forThisPath = toc.path === location.pathname ? toc : null;
+  const items = forThisPath?.items ?? EMPTY_HEADINGS;
+  const active = forThisPath?.active ?? "";
 
+  useEffect(() => {
     const article = document.querySelector("article.prose-docs");
     if (!article) return;
     const nodes = Array.from(article.querySelectorAll<HTMLHeadingElement>("h2, h3"));
@@ -49,15 +59,17 @@ export function DocsToc() {
         level: (node.tagName === "H2" ? 2 : 3) as 2 | 3,
       };
     });
-    setItems(headings);
+    let activeId = "";
 
+    // No headings: nothing to record. The derived read above already yields an empty list for a path
+    // this state does not cover, which is exactly the "no TOC on this route" case.
     if (headings.length === 0) return;
 
     // Restore last-active section for this route (display only — does not scroll the page).
     // localStorage persists across full reloads and new tabs.
     try {
       const saved = window.localStorage.getItem(storageKey);
-      if (saved && headings.some((h) => h.id === saved)) setActive(saved);
+      if (saved && headings.some((h) => h.id === saved)) activeId = saved;
     } catch {
       /* noop */
     }
@@ -69,7 +81,11 @@ export function DocsToc() {
           .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
         if (visible[0]) {
           const id = visible[0].target.id;
-          setActive(id);
+          setToc((current) =>
+            current.active === id && current.path === location.pathname
+              ? current
+              : { path: location.pathname, items: headings, active: id },
+          );
           try {
             window.localStorage.setItem(storageKey, id);
           } catch {
@@ -79,9 +95,10 @@ export function DocsToc() {
       },
       { rootMargin: "-80px 0px -65% 0px", threshold: [0, 1] },
     );
+    setToc({ path: location.pathname, items: headings, active: activeId });
     nodes.forEach((n) => observer.observe(n));
     return () => observer.disconnect();
-  }, [storageKey]);
+  }, [storageKey, location.pathname]);
 
   if (items.length < 2) return null;
 
@@ -99,7 +116,7 @@ export function DocsToc() {
                 href={`#${h.id}`}
                 aria-current={isActive ? "location" : undefined}
                 onClick={() => {
-                  setActive(h.id);
+                  setToc({ path: location.pathname, items, active: h.id });
                   try {
                     window.localStorage.setItem(storageKey, h.id);
                   } catch {
diff --git a/apps/loopover-ui/src/components/site/github-stats-chip.tsx b/apps/loopover-ui/src/components/site/github-stats-chip.tsx
index 8afe12855b..5652d74cd3 100644
--- a/apps/loopover-ui/src/components/site/github-stats-chip.tsx
+++ b/apps/loopover-ui/src/components/site/github-stats-chip.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Github, Star, GitFork, RefreshCw } from "lucide-react";
 import { toast } from "sonner";
@@ -20,11 +20,47 @@ function finiteCount(value: unknown): number {
   return typeof value === "number" && Number.isFinite(value) && value >= 0 ? Math.trunc(value) : 0;
 }
 
-function readCache(): Cached | null {
+/** `mounted` as an external store: it never changes after hydration, so the subscription is a no-op and
+ *  the two snapshots carry the whole signal. */
+const subscribeToHydration = () => () => {};
+const isHydrated = () => true;
+const isNotHydrated = () => false;
+
+/** sessionStorage is not observable and is only written by this chip, so there is nothing to subscribe to.
+ *  The snapshot is memoized on the raw string so `useSyncExternalStore` sees a stable object between
+ *  changes -- re-parsing per call would return a fresh object every render and loop forever. */
+const subscribeToStatsCache = () => () => {};
+let cachedStatsRaw: string | null = null;
+let cachedStatsValue: Cached | null = null;
+
+function readCachedStats(): Cached | null {
+  const raw = readCacheRaw();
+  if (raw !== cachedStatsRaw) {
+    cachedStatsRaw = raw;
+    cachedStatsValue = readCache();
+  }
+  return cachedStatsValue;
+}
+
+function readNoCachedStats(): Cached | null {
+  return null;
+}
+
+/** The cache's raw string, which is what the memo above compares -- a primitive, so it is a sound
+ *  identity for "has the cache changed". Disabled storage reads as absent. */
+function readCacheRaw(): string | null {
   if (typeof window === "undefined") return null;
   try {
-    const raw = window.sessionStorage.getItem(CACHE_KEY);
-    if (!raw) return null;
+    return window.sessionStorage.getItem(CACHE_KEY);
+  } catch {
+    return null;
+  }
+}
+
+function readCache(): Cached | null {
+  const raw = readCacheRaw();
+  if (!raw) return null;
+  try {
     const parsed = JSON.parse(raw) as Cached;
     return parsed?.stats ? parsed : null;
   } catch {
@@ -79,13 +115,13 @@ async function fetchRepo(): Promise<RepoStats> {
 const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
 
 export function GithubStatsChip({ className }: { className?: string }) {
-  // Avoid SSR/CSR mismatch: only read sessionStorage after mount.
-  const [mounted, setMounted] = useState(false);
-  const [cached, setCached] = useState<Cached | null>(null);
-  useEffect(() => {
-    setCached(readCache());
-    setMounted(true);
-  }, []);
+  // Avoid SSR/CSR mismatch: sessionStorage is only readable after mount. Both facts are read as external
+  // stores (#9588) rather than copied into state by a mount effect -- sessionStorage IS one, and "have we
+  // hydrated yet" is exactly the server-snapshot-vs-client-snapshot distinction useSyncExternalStore
+  // exists to express. The cached stats are therefore available on the first client render, so the chip
+  // seeds react-query below without a cascading render in between.
+  const mounted = useSyncExternalStore(subscribeToHydration, isHydrated, isNotHydrated);
+  const cached = useSyncExternalStore(subscribeToStatsCache, readCachedStats, readNoCachedStats);
 
   const { data, isError, isFetching, isLoading, refetch } = useQuery({
     queryKey: ["gh-repo", REPO],
diff --git a/apps/loopover-ui/src/components/site/proof-of-power-stats.tsx b/apps/loopover-ui/src/components/site/proof-of-power-stats.tsx
index 3415083c71..8ef0ef84f8 100644
--- a/apps/loopover-ui/src/components/site/proof-of-power-stats.tsx
+++ b/apps/loopover-ui/src/components/site/proof-of-power-stats.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 
@@ -31,20 +31,52 @@ async function fetchPublicStats(): Promise<PublicStats | null> {
   return result.data;
 }
 
+/**
+ * Whether a count-up may animate at all: motion is not suppressed, rAF exists, and the tab is visible.
+ *
+ * Read as an external store (#9588) rather than sampled inside the effect, because both inputs genuinely
+ * ARE subscribable -- a `matchMedia` change list and `visibilitychange`. That is what lets the
+ * no-animation case be DERIVED below instead of written to state synchronously from an effect body.
+ */
+const MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+
+function subscribeToMotionAllowed(onChange: () => void): () => void {
+  const media = window.matchMedia?.(MOTION_QUERY);
+  media?.addEventListener("change", onChange);
+  document.addEventListener("visibilitychange", onChange);
+  return () => {
+    media?.removeEventListener("change", onChange);
+    document.removeEventListener("visibilitychange", onChange);
+  };
+}
+
+function motionAllowed(): boolean {
+  if (typeof window === "undefined" || typeof requestAnimationFrame === "undefined") return false;
+  if (window.matchMedia?.(MOTION_QUERY)?.matches) return false;
+  return typeof document === "undefined" || document.visibilityState === "visible";
+}
+
+/** No animation during server render -- the value is simply the target. */
+function motionAllowedOnServer(): boolean {
+  return false;
+}
+
 /** Count up to `target` once on mount (and on later increases), honoring prefers-reduced-motion. */
 function useCountUp(target: number, durationMs = 900): number {
-  const [value, setValue] = useState(0);
+  const canAnimate = useSyncExternalStore(
+    subscribeToMotionAllowed,
+    motionAllowed,
+    motionAllowedOnServer,
+  );
+  const shouldAnimate = canAnimate && target > 0;
+  const [progress, setProgress] = useState(0);
   const fromRef = useRef(0);
+
   useEffect(() => {
-    const reduce =
-      typeof window !== "undefined" &&
-      window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
-    const canAnimate =
-      typeof requestAnimationFrame !== "undefined" &&
-      (typeof document === "undefined" || document.visibilityState === "visible");
-    if (reduce || target <= 0 || !canAnimate) {
+    // Not animating: the value IS the target, derived at the return below. Only the ref still needs
+    // updating, so a later increase counts up from where this one landed rather than from zero.
+    if (!shouldAnimate) {
       fromRef.current = target;
-      setValue(target);
       return;
     }
     const from = fromRef.current;
@@ -53,23 +85,24 @@ function useCountUp(target: number, durationMs = 900): number {
     const tick = (t: number) => {
       const p = Math.min(1, (t - start) / durationMs);
       const eased = 1 - Math.pow(1 - p, 3);
-      setValue(Math.round(from + (target - from) * eased));
+      setProgress(Math.round(from + (target - from) * eased));
       if (p < 1) raf = requestAnimationFrame(tick);
       else fromRef.current = target;
     };
     raf = requestAnimationFrame(tick);
-    // Safety net: rAF is throttled/never fires in a background tab, which would freeze the count at 0. Guarantee
+    // Safety net: rAF is throttled/never fires in a background tab, which would freeze the count. Guarantee
     // the real number lands regardless after the animation window.
     const settle = window.setTimeout(() => {
       fromRef.current = target;
-      setValue(target);
+      setProgress(target);
     }, durationMs + 250);
     return () => {
       cancelAnimationFrame(raf);
       window.clearTimeout(settle);
     };
-  }, [target, durationMs]);
-  return value;
+  }, [target, durationMs, shouldAnimate]);
+
+  return shouldAnimate ? progress : target;
 }
 
 function Num({ value }: { value: number }) {
diff --git a/apps/loopover-ui/src/components/site/state-views.tsx b/apps/loopover-ui/src/components/site/state-views.tsx
index c142ba9c9c..7446949960 100644
--- a/apps/loopover-ui/src/components/site/state-views.tsx
+++ b/apps/loopover-ui/src/components/site/state-views.tsx
@@ -26,11 +26,14 @@ export function StateBoundary(props: ComponentProps<typeof UiKitStateBoundary>)
 
 export function usePreviewDataState(label: string, delay = 220) {
   const [version, setVersion] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
+  // `isLoading` is DERIVED from which version has finished settling (#9588), rather than written to `true`
+  // synchronously at the top of the effect. Bumping `version` therefore re-enters the loading state on the
+  // very same render that requested the refresh, with no cascading second render to correct it.
+  const [settledVersion, setSettledVersion] = useState(-1);
+  const isLoading = settledVersion !== version;
 
   useEffect(() => {
-    setIsLoading(true);
-    const timer = window.setTimeout(() => setIsLoading(false), delay);
+    const timer = window.setTimeout(() => setSettledVersion(version), delay);
     return () => window.clearTimeout(timer);
   }, [delay, version]);
 
diff --git a/apps/loopover-ui/src/lib/analytics-window.test.ts b/apps/loopover-ui/src/lib/analytics-window.test.ts
index afa600bd7e..ca266bafdc 100644
--- a/apps/loopover-ui/src/lib/analytics-window.test.ts
+++ b/apps/loopover-ui/src/lib/analytics-window.test.ts
@@ -1,4 +1,5 @@
-import { renderHook, waitFor } from "@testing-library/react";
+import { waitFor } from "@testing-library/react";
+import { renderHookWithQueryClient as renderHook } from "@/lib/test-query-client";
 import { describe, expect, it, vi } from "vitest";
 
 import {
diff --git a/apps/loopover-ui/src/lib/api/request.ts b/apps/loopover-ui/src/lib/api/request.ts
index 098a285abd..786ca8e987 100644
--- a/apps/loopover-ui/src/lib/api/request.ts
+++ b/apps/loopover-ui/src/lib/api/request.ts
@@ -1,4 +1,4 @@
-import { createElement, useEffect, useState } from "react";
+import { createElement, useSyncExternalStore } from "react";
 import { toast } from "sonner";
 
 import {
@@ -220,6 +220,35 @@ function runRetryWithProgress(
     });
 }
 
+// A 250ms clock as an external store (#9588). Reading `Date.now()` during render is impure, and the
+// setState-in-effect tick it replaces is exactly the pattern these rules exist to remove.
+//
+// The snapshot is CACHED rather than read per call: `useSyncExternalStore` requires a stable snapshot
+// between notifications, and a bare `() => Date.now()` returns a new value every single call, which
+// re-renders forever. One shared interval serves every mounted countdown and stops with the last one.
+let clockNow = Date.now();
+let clockTimer: number | null = null;
+const clockListeners = new Set<() => void>();
+
+function subscribeToClock(onChange: () => void): () => void {
+  clockListeners.add(onChange);
+  if (clockTimer === null) {
+    clockTimer = window.setInterval(() => {
+      clockNow = Date.now();
+      for (const listener of clockListeners) listener();
+    }, 250);
+  }
+  return () => {
+    clockListeners.delete(onChange);
+    if (clockListeners.size === 0 && clockTimer !== null) {
+      window.clearInterval(clockTimer);
+      clockTimer = null;
+    }
+  };
+}
+
+const getClockNow = () => clockNow;
+
 function RetryCountdown({
   label,
   startedAt,
@@ -229,11 +258,7 @@ function RetryCountdown({
   startedAt: number;
   timeoutMs: number;
 }) {
-  const [now, setNow] = useState(Date.now());
-  useEffect(() => {
-    const i = window.setInterval(() => setNow(Date.now()), 250);
-    return () => window.clearInterval(i);
-  }, []);
+  const now = useSyncExternalStore(subscribeToClock, getClockNow, getClockNow);
   const elapsed = Math.min(now - startedAt, timeoutMs);
   const remaining = Math.max(0, Math.ceil((timeoutMs - elapsed) / 1000));
   const pct = Math.min(100, Math.round((elapsed / timeoutMs) * 100));
diff --git a/apps/loopover-ui/src/lib/api/session.test.ts b/apps/loopover-ui/src/lib/api/session.test.ts
index d670e6ada6..f0ec3d2603 100644
--- a/apps/loopover-ui/src/lib/api/session.test.ts
+++ b/apps/loopover-ui/src/lib/api/session.test.ts
@@ -1,4 +1,5 @@
-import { act, renderHook, waitFor } from "@testing-library/react";
+import { act, waitFor } from "@testing-library/react";
+import { renderHookWithQueryClient as renderHook } from "@/lib/test-query-client";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const { apiFetch } = vi.hoisted(() => ({ apiFetch: vi.fn() }));
diff --git a/apps/loopover-ui/src/lib/api/session.ts b/apps/loopover-ui/src/lib/api/session.ts
index 384b9c2e17..22d2a83c97 100644
--- a/apps/loopover-ui/src/lib/api/session.ts
+++ b/apps/loopover-ui/src/lib/api/session.ts
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { toast } from "sonner";
 
 import { apiFetch } from "./request";
@@ -84,8 +85,10 @@ export function useSession() {
     return next;
   }, []);
 
+  // Subscribing to an external event is what effects are FOR, so this one stays -- what moved out of it is
+  // the mount-time fetch, which now runs as a react-query query (#9588). The listener only re-triggers that
+  // query; it sets no state of its own, and the query owns the request's lifecycle.
   useEffect(() => {
-    void refresh();
     const onChange = () => {
       void refresh();
     };
@@ -93,6 +96,21 @@ export function useSession() {
     return () => window.removeEventListener(SESSION_CHANGED_EVENT, onChange);
   }, [refresh]);
 
+  // The initial read. Its result is written into the same state the event listener and the sign-in/out
+  // paths write, so every consumer keeps seeing one session value from one place.
+  useQuery({
+    queryKey: ["browser-session"],
+    retry: false,
+    refetchOnWindowFocus: false,
+    gcTime: 0,
+    queryFn: async () => {
+      await refresh();
+      // The value lives in state above; react-query only owns WHEN this runs, so the payload it caches
+      // would be a second copy of the truth. Returning null keeps it from becoming one.
+      return null;
+    },
+  });
+
   const signIn = () => {
     setAuth({ status: "starting" });
     const origin = getApiOrigin().replace(/\/$/, "");
diff --git a/apps/loopover-ui/src/lib/api/use-api-resource.test.ts b/apps/loopover-ui/src/lib/api/use-api-resource.test.ts
index 296cca77f3..0b106fe800 100644
--- a/apps/loopover-ui/src/lib/api/use-api-resource.test.ts
+++ b/apps/loopover-ui/src/lib/api/use-api-resource.test.ts
@@ -1,4 +1,6 @@
-import { renderHook, waitFor } from "@testing-library/react";
+import { renderHook as renderHookBare, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createElement, type ReactNode } from "react";
 import { describe, expect, it, vi } from "vitest";
 
 const { apiFetch } = vi.hoisted(() => ({ apiFetch: vi.fn() }));
@@ -9,6 +11,17 @@ vi.mock("@/lib/api/origin", () => ({ getApiOrigin: () => "https://api.test" }));
 
 import { useApiResource } from "@/lib/api/use-api-resource";
 
+/** The hook reads through react-query, so it needs the same client the app provides at its root. A fresh
+ *  client per test keeps one case's cache from answering the next one's request. */
+function renderHook<T, P>(callback: (props: P) => T, options?: { initialProps?: P }) {
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false, gcTime: 0 } } });
+  return renderHookBare(callback, {
+    ...options,
+    wrapper: ({ children }: { children: ReactNode }) =>
+      createElement(QueryClientProvider, { client }, children),
+  });
+}
+
 describe("useApiResource loadedAt (#2219)", () => {
   it("stamps loadedAt when a load succeeds, so headers can show 'last refresh'", async () => {
     apiFetch.mockResolvedValue({ ok: true, data: { rows: [] }, status: 200, durationMs: 5 });
diff --git a/apps/loopover-ui/src/lib/api/use-api-resource.ts b/apps/loopover-ui/src/lib/api/use-api-resource.ts
index 3061ead78e..420f1a251c 100644
--- a/apps/loopover-ui/src/lib/api/use-api-resource.ts
+++ b/apps/loopover-ui/src/lib/api/use-api-resource.ts
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
 
 import { getApiOrigin } from "./origin";
 import { apiFetch, type ApiFailureKind } from "./request";
@@ -20,6 +21,47 @@ type UseApiResourceOptions = {
   enabled?: boolean;
 };
 
+/** The synthetic sentinel a disabled resource reports. Frozen at module scope so every disabled resource
+ *  returns the same object rather than a fresh one per render. */
+const DISABLED_STATE: ResourceState<never> = Object.freeze({
+  status: "error",
+  data: null,
+  error: "disabled",
+  loadedAt: null,
+});
+
+const LOADING_STATE: ResourceState<never> = Object.freeze({
+  status: "loading",
+  data: null,
+  error: null,
+  loadedAt: null,
+});
+
+/** Carries `apiFetch`'s structured failure through react-query's error channel, which only speaks throws. */
+class ApiResourceError extends Error {
+  constructor(
+    message: string,
+    readonly kind: ApiFailureKind,
+    readonly httpStatus: number | undefined,
+  ) {
+    super(message);
+    this.name = "ApiResourceError";
+  }
+}
+
+/**
+ * Reads one API resource into the loading/ready/error shape every panel in this app renders.
+ *
+ * Backed by react-query (#9588) rather than a hand-rolled effect + state machine. The app already runs a
+ * QueryClient at the root, so this removes the second, parallel data layer -- and with it the effect that
+ * called setState on mount, the manual request-id guard against out-of-order responses, and the bespoke
+ * reload plumbing, all of which the library does correctly by keying on the request.
+ *
+ * The three options below are set EXPLICITLY, not inherited: react-query's defaults retry three times and
+ * refetch on window focus, neither of which this hook did. Pinning them means adopting the library changes
+ * no observable behaviour at any of its call sites; loosening them is a deliberate per-surface decision,
+ * not a side effect of this refactor.
+ */
 export function useApiResource<T>(
   path: string,
   label: string,
@@ -27,57 +69,45 @@ export function useApiResource<T>(
   options: UseApiResourceOptions = {},
 ) {
   const enabled = options.enabled ?? true;
-  const [state, setState] = useState<ResourceState<T>>({
-    status: "loading",
-    data: null,
-    error: null,
-    loadedAt: null,
-  });
-
-  const requestIdRef = useRef(0);
 
-  const load = useCallback(async () => {
-    // Guard against out-of-order responses (#7785): when `path` changes (pagination offsets, free-text repo input,
-    // window selection) a new load starts while an older apiFetch is still in flight. Tag each load and, after the
-    // await, drop the result if a newer load has since superseded it — otherwise a stale page's response resolves
-    // last and silently overwrites the current one while the surrounding UI reflects the newer request.
-    const requestId = requestIdRef.current + 1;
-    requestIdRef.current = requestId;
-    if (!enabled) {
-      setState({ status: "error", data: null, error: "disabled", loadedAt: null });
-      return;
-    }
-    setState({ status: "loading", data: null, error: null, loadedAt: null });
-    const headers: Record<string, string> = { Accept: "application/json" };
-    if (token) headers.Authorization = `Bearer ${token}`;
-    const result = await apiFetch<T>(`${getApiOrigin().replace(/\/$/, "")}${path}`, {
-      label,
-      headers,
-      credentials: "include",
-    });
-    // A newer load superseded this one (the path changed mid-flight); drop this stale response entirely.
-    if (requestId !== requestIdRef.current) return;
-    if (result.ok) {
-      setState({ status: "ready", data: result.data, error: null, loadedAt: Date.now() });
-    } else {
-      setState({
-        status: "error",
-        data: null,
-        error: result.message,
-        errorKind: result.kind,
-        errorStatus: result.status,
-        loadedAt: null,
+  const query = useQuery<T, ApiResourceError>({
+    queryKey: ["api-resource", path, label, token ?? null],
+    enabled,
+    retry: false,
+    refetchOnWindowFocus: false,
+    gcTime: 0,
+    queryFn: async () => {
+      const headers: Record<string, string> = { Accept: "application/json" };
+      if (token) headers.Authorization = `Bearer ${token}`;
+      const result = await apiFetch<T>(`${getApiOrigin().replace(/\/$/, "")}${path}`, {
+        label,
+        headers,
+        credentials: "include",
       });
-    }
-  }, [enabled, label, path, token]);
+      if (!result.ok) throw new ApiResourceError(result.message, result.kind, result.status);
+      return result.data;
+    },
+  });
+
+  const reload = useCallback(async () => {
+    await query.refetch();
+  }, [query]);
 
-  useEffect(() => {
-    if (!enabled) {
-      setState({ status: "error", data: null, error: "disabled", loadedAt: null });
-      return;
-    }
-    void load();
-  }, [enabled, load]);
+  // Every branch is DERIVED from the query -- nothing is written into state from an effect (#9588).
+  const state: ResourceState<T> = !enabled
+    ? (DISABLED_STATE as ResourceState<T>)
+    : query.isSuccess
+      ? { status: "ready", data: query.data, error: null, loadedAt: query.dataUpdatedAt }
+      : query.isError
+        ? {
+            status: "error",
+            data: null,
+            error: query.error.message,
+            errorKind: query.error.kind,
+            errorStatus: query.error.httpStatus,
+            loadedAt: null,
+          }
+        : (LOADING_STATE as ResourceState<T>);
 
-  return { ...state, reload: load };
+  return { ...state, reload };
 }
diff --git a/apps/loopover-ui/src/lib/docs-client-loader.tsx b/apps/loopover-ui/src/lib/docs-client-loader.tsx
index 2cf861c2f2..e8a8626d55 100644
--- a/apps/loopover-ui/src/lib/docs-client-loader.tsx
+++ b/apps/loopover-ui/src/lib/docs-client-loader.tsx
@@ -10,7 +10,11 @@ import { docsMdxComponents } from "@/lib/docs-mdx-components";
 // docs-source.ts -- never the live MDX component itself -- then this client loader turns that
 // path into the actual rendered content on both sides.
 export const docsClientLoader = browserCollections.docs.createClientLoader({
-  component({ default: MDXContent }, _props: Record<string, never>) {
+  // No props: that leaves the loader's `Props` as `undefined`, which is what makes `useContent(path)`
+  // callable without a props argument (#9588). `useContent` returns react NODES, where `getComponent`
+  // returns a component -- and minting a component inside a render is what react-hooks/static-components
+  // rejects, since a fresh identity each render remounts the whole subtree.
+  component({ default: MDXContent }) {
     return <MDXContent components={docsMdxComponents} />;
   },
 });
diff --git a/apps/loopover-ui/src/lib/test-query-client.tsx b/apps/loopover-ui/src/lib/test-query-client.tsx
new file mode 100644
index 0000000000..3f84be192d
--- /dev/null
+++ b/apps/loopover-ui/src/lib/test-query-client.tsx
@@ -0,0 +1,38 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+
+/**
+ * Test helpers that supply the same react-query context the app provides at its root (#9588).
+ *
+ * `useApiResource` reads through react-query, so anything rendering a panel that uses it needs a client.
+ * One helper rather than a wrapper per test file: several files had already grown their own copy, and a
+ * shared one is what keeps the client's TEST defaults (no retries, no cross-test cache) consistent —
+ * a retrying client turns an asserted error state into a timeout, and a shared cache lets one case's
+ * response answer the next case's request.
+ */
+function createTestQueryClient(): QueryClient {
+  return new QueryClient({
+    defaultOptions: { queries: { retry: false, gcTime: 0, staleTime: 0 } },
+  });
+}
+
+/** Render `ui` inside a fresh client. */
+export function renderWithQueryClient(ui: ReactNode): ReturnType<typeof render> {
+  const client = createTestQueryClient();
+  return render(<QueryClientProvider client={client}>{ui}</QueryClientProvider>);
+}
+
+/** `renderHook` inside a fresh client, preserving `initialProps` so rerender-driven tests still work. */
+export function renderHookWithQueryClient<TResult, TProps>(
+  callback: (props: TProps) => TResult,
+  options?: { initialProps?: TProps },
+): ReturnType<typeof renderHook<TResult, TProps>> {
+  const client = createTestQueryClient();
+  return renderHook(callback, {
+    ...options,
+    wrapper: ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    ),
+  });
+}
diff --git a/apps/loopover-ui/src/lib/use-local-storage.ts b/apps/loopover-ui/src/lib/use-local-storage.ts
index e3c8136463..ddc5a06361 100644
--- a/apps/loopover-ui/src/lib/use-local-storage.ts
+++ b/apps/loopover-ui/src/lib/use-local-storage.ts
@@ -1,70 +1,151 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
 
 /**
- * Tiny SSR-safe localStorage hook. Reads once on mount; writes are persisted
- * synchronously and broadcast via a `storage` event for other tabs.
+ * One hook instance's view of a localStorage key, as a subscribable cell.
  *
- * `legacyKey`, when given, is read as a one-time fallback if `key` is absent
- * (a rebrand key-rename migration) -- the value found there is written
- * forward to `key` immediately so every later read hits the new key
- * directly. The legacy key is left in place, unremoved.
+ * The cell's snapshot is the RAW STRING, never the parsed value: a string is a primitive, so the
+ * snapshot is referentially stable by construction -- which is exactly what `useSyncExternalStore`
+ * demands (a fresh `JSON.parse` per snapshot read would re-render forever). Parsing happens once
+ * per change, in the hook.
  */
-export function useLocalStorage<T>(key: string, initial: T, legacyKey?: string) {
-  const [value, setValue] = useState<T>(initial);
-  const [hydrated, setHydrated] = useState(false);
-  // Call sites often pass a fresh `[]` / `{...}` literal each render; keep the
-  // listener keyed only on `key`/`legacyKey` and read the latest initial via ref.
-  const initialRef = useRef(initial);
-  initialRef.current = initial;
+type StorageCell = {
+  subscribe: (onChange: () => void) => () => void;
+  getRaw: () => string | null;
+  /** Same-tab write: persist, update the cell, notify. `storage` never fires in the writing tab. */
+  write: (raw: string) => void;
+  /** Re-read localStorage into the cell and notify, after the legacy migration writes forward. */
+  refresh: () => void;
+};
 
-  useEffect(() => {
+function createStorageCell(key: string, legacyKey: string | undefined): StorageCell {
+  const listeners = new Set<() => void>();
+  let raw: string | null = null;
+  let loaded = false;
+
+  /** Reads the new key, falling back to the legacy one so the value is right even before the
+   *  migration effect has written it forward. Disabled storage (private mode) reads as absent. */
+  const read = (): string | null => {
     try {
-      const raw = window.localStorage.getItem(key);
-      if (raw !== null) {
-        setValue(JSON.parse(raw) as T);
-      } else if (legacyKey) {
-        const legacyRaw = window.localStorage.getItem(legacyKey);
-        if (legacyRaw !== null) {
-          setValue(JSON.parse(legacyRaw) as T);
-          window.localStorage.setItem(key, legacyRaw);
-        }
-      }
+      const own = window.localStorage.getItem(key);
+      if (own !== null) return own;
+      return legacyKey === undefined ? null : window.localStorage.getItem(legacyKey);
     } catch {
-      /* ignore */
+      return null;
     }
-    setHydrated(true);
+  };
+
+  const set = (next: string | null): void => {
+    if (loaded && next === raw) return;
+    raw = next;
+    loaded = true;
+    for (const listener of listeners) listener();
+  };
 
-    // Cross-tab sync: the browser fires `storage` only in *other* same-origin tabs
-    // (never the tab that wrote). Same-tab writes already update state via `update()`.
-    const onStorage = (event: StorageEvent) => {
-      if (event.key !== key && (!legacyKey || event.key !== legacyKey)) return;
-      if (event.newValue === null) {
-        setValue(initialRef.current);
-        return;
+  return {
+    getRaw: () => {
+      if (!loaded) {
+        raw = read();
+        loaded = true;
       }
+      return raw;
+    },
+    subscribe: (onChange) => {
+      listeners.add(onChange);
+      // Cross-tab sync: the browser fires `storage` only in *other* same-origin tabs (never the tab
+      // that wrote). The event's own payload is used rather than a re-read -- the writing tab has
+      // already persisted it, so the payload IS the value, and using it avoids a read-back race.
+      const onStorage = (event: StorageEvent) => {
+        if (event.key !== key && (legacyKey === undefined || event.key !== legacyKey)) return;
+        set(event.newValue);
+      };
+      window.addEventListener("storage", onStorage);
+      return () => {
+        listeners.delete(onChange);
+        window.removeEventListener("storage", onStorage);
+      };
+    },
+    write: (next) => {
       try {
-        setValue(JSON.parse(event.newValue) as T);
+        window.localStorage.setItem(key, next);
       } catch {
-        /* ignore */
+        /* ignore quota */
       }
-    };
-    window.addEventListener("storage", onStorage);
-    return () => window.removeEventListener("storage", onStorage);
-  }, [key, legacyKey]);
+      set(next);
+    },
+    refresh: () => set(read()),
+  };
+}
+
+/** Server render (and the hydration pass) sees no storage at all, so every key reads as absent. */
+const getServerRaw = (): string | null => null;
+
+/** `hydrated` as an external store rather than a `setState` in an effect: it never changes after
+ *  mount, so the subscription is a no-op and the two snapshots carry the whole signal. */
+const subscribeToHydration = () => () => {};
+const isHydrated = () => true;
+const isNotHydrated = () => false;
+
+/** An absent key, or one holding something that is not JSON, both read as the initial value. */
+function parseRaw<T>(raw: string | null, fallback: T): T {
+  if (raw === null) return fallback;
+  try {
+    return JSON.parse(raw) as T;
+  } catch {
+    return fallback;
+  }
+}
+
+/**
+ * Tiny SSR-safe localStorage hook. Reads synchronously through `useSyncExternalStore`; writes are
+ * persisted immediately and broadcast via a `storage` event for other tabs.
+ *
+ * `legacyKey`, when given, is read as a one-time fallback if `key` is absent (a rebrand key-rename
+ * migration) -- the value found there is written forward to `key` immediately so every later read
+ * hits the new key directly. The legacy key is left in place, unremoved.
+ *
+ * Built on `useSyncExternalStore` rather than `useState` plus a mount effect (#9588). localStorage
+ * IS an external store, and subscribing to it directly removes both the mount-time
+ * `setState`-in-effect and the render-phase ref write the old shape needed -- and, incidentally,
+ * the first-paint flash of the initial value, since the stored value is now available on the very
+ * first client render rather than one effect later.
+ */
+export function useLocalStorage<T>(key: string, initial: T, legacyKey?: string) {
+  // The fallback for an absent or unparseable value, captured once. Call sites often pass a fresh
+  // `[]` / `{...}` literal each render, and holding the FIRST one is what keeps the identity of the
+  // returned value stable across renders. A `useState` initializer rather than a ref: React
+  // guarantees it runs exactly once, and reading a ref during render is itself disallowed.
+  const [initialValue] = useState(() => initial);
+
+  const cell = useMemo(() => createStorageCell(key, legacyKey), [key, legacyKey]);
+
+  const raw = useSyncExternalStore(cell.subscribe, cell.getRaw, getServerRaw);
+  const hydrated = useSyncExternalStore(subscribeToHydration, isHydrated, isNotHydrated);
+
+  const value = useMemo(() => parseRaw(raw, initialValue), [raw, initialValue]);
+
+  // The one-time forward migration. A write is a side effect, so it lives here rather than in the
+  // cell's read path; that read path's own legacy fallback means the value is already correct
+  // whether or not this has run yet.
+  useEffect(() => {
+    if (legacyKey === undefined) return;
+    try {
+      if (window.localStorage.getItem(key) !== null) return;
+      const legacyRaw = window.localStorage.getItem(legacyKey);
+      if (legacyRaw === null) return;
+      window.localStorage.setItem(key, legacyRaw);
+      cell.refresh();
+    } catch {
+      /* ignore */
+    }
+  }, [cell, key, legacyKey]);
 
   const update = useCallback(
     (next: T | ((prev: T) => T)) => {
-      setValue((prev) => {
-        const resolved = typeof next === "function" ? (next as (p: T) => T)(prev) : next;
-        try {
-          window.localStorage.setItem(key, JSON.stringify(resolved));
-        } catch {
-          /* ignore quota */
-        }
-        return resolved;
-      });
+      const previous = parseRaw(cell.getRaw(), initialValue);
+      const resolved = typeof next === "function" ? (next as (p: T) => T)(previous) : next;
+      cell.write(JSON.stringify(resolved));
     },
-    [key],
+    [cell, initialValue],
   );
 
   return [value, update, hydrated] as const;
diff --git a/apps/loopover-ui/src/routes/api.$op.tsx b/apps/loopover-ui/src/routes/api.$op.tsx
index eb3df06aec..f649a85752 100644
--- a/apps/loopover-ui/src/routes/api.$op.tsx
+++ b/apps/loopover-ui/src/routes/api.$op.tsx
@@ -355,7 +355,10 @@ function OperationPage() {
           <div className="mb-2 font-mono text-token-2xs uppercase tracking-wider text-muted-foreground">
             Try it
           </div>
-          <TryIt op={op} server={server} />
+          {/* Keyed on the operation so switching endpoints RESETS this panel's state (#9588). React's
+              documented way to reset state on an input change -- the effect it replaces cleared five
+              fields by hand and would silently miss any field added later. */}
+          <TryIt key={op.id} op={op} server={server} />
         </div>
 
         {!op.requiresAuth && (
diff --git a/apps/loopover-ui/src/routes/app.index.test.tsx b/apps/loopover-ui/src/routes/app.index.test.tsx
index c25f58f856..6f5a2bd4e8 100644
--- a/apps/loopover-ui/src/routes/app.index.test.tsx
+++ b/apps/loopover-ui/src/routes/app.index.test.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithQueryClient as render } from "@/lib/test-query-client";
 import { describe, expect, it, vi } from "vitest";
 import type { ReactNode } from "react";
 
diff --git a/apps/loopover-ui/src/routes/docs.$slug.tsx b/apps/loopover-ui/src/routes/docs.$slug.tsx
index ac613ae80b..ab293ad8d3 100644
--- a/apps/loopover-ui/src/routes/docs.$slug.tsx
+++ b/apps/loopover-ui/src/routes/docs.$slug.tsx
@@ -42,12 +42,10 @@ export const Route = createFileRoute("/docs/$slug")({
 
 function DocsSlugPage() {
   const { path, title, description, eyebrow } = Route.useLoaderData();
-  const Content = docsClientLoader.getComponent(path);
+  const content = docsClientLoader.useContent(path);
   return (
     <DocsPage eyebrow={eyebrow} title={title} description={description}>
-      <Suspense fallback={<LoadingState />}>
-        <Content />
-      </Suspense>
+      <Suspense fallback={<LoadingState />}>{content}</Suspense>
     </DocsPage>
   );
 }