diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx
index da9d265d2..18527fcc4 100644
--- a/apps/web/src/app.tsx
+++ b/apps/web/src/app.tsx
@@ -7,7 +7,7 @@ import { Button, EmptyState } from "@corbits/react-ui";
 import { WorkbenchLoadingState } from "@/chat";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { BoldIconProvider, WarningCircle } from "@/lib/icons";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 
 import { AuthScreen } from "./auth-screen";
 import { BenchProvider } from "./bench-context";
@@ -18,32 +18,13 @@ import { NotFoundPage } from "./pages/not-found-page";
 import { OnboardingPage } from "./pages/onboarding-page";
 import { ProvisioningErrorPage } from "./pages/provisioning-error-page";
 import { createAppQueryClient } from "./query-client";
+import { Redirect } from "./redirect";
 import { APP_ROUTES, LOGIN_PATH, matchesRoute, ONBOARDING_PATH } from "./routes";
 import type { SessionState, SessionUser } from "./session";
 import { AppShell } from "./shell/app-shell";
 import { ComposerInsertionProvider } from "./shell/composer-insertion";
 import { ShellChromeProvider } from "./shell/shell-chrome-provider";
 
-/** Any signed-out request for a path other than `/login` itself bounces
- * there with `?next=` so a successful sign-in returns to where the visitor
- * meant to go — the URL is the source of truth for "where was I headed",
- * not an implicit conditional swap in `App`. */
-function LoginRedirect({ path, navigate }: { readonly path: string; readonly navigate: Navigate }) {
-  useEffect(() => {
-    navigate(buildLoginRedirect(path));
-  }, [path, navigate]);
-  return null;
-}
-
-/** An already-authed visit to `/login` (a stale tab, a bookmark) bounces
- * home rather than showing the sign-in form to someone already signed in. */
-function LoginBounceHome({ navigate }: { readonly navigate: Navigate }) {
-  useEffect(() => {
-    navigate("/");
-  }, [navigate]);
-  return null;
-}
-
 /**
  * Onboarding renders above the shell entirely — no rail, no col2, no bench
  * dock, nothing that implies a workbench already exists. An account the
@@ -150,8 +131,10 @@ export function App({
           </div>
         );
       case "signed-out":
+        // The URL is the source of truth for "where was I headed": a
+        // signed-out request for another path carries `?next=` to login.
         if (path !== LOGIN_PATH) {
-          return <LoginRedirect path={path} navigate={navigate} />;
+          return <Redirect to={buildLoginRedirect(path)} from={path} navigate={navigate} />;
         }
         return <AuthScreen onSignedIn={onSignedIn} />;
       case "error":
@@ -170,8 +153,10 @@ export function App({
           </div>
         );
       case "signed-in":
+        // An already-authed visit to `/login` (a stale tab, a bookmark)
+        // bounces home rather than showing the sign-in form again.
         if (path === LOGIN_PATH) {
-          return <LoginBounceHome navigate={navigate} />;
+          return <Redirect to="/" from={path} navigate={navigate} />;
         }
         if (path === ONBOARDING_PATH) {
           return <OnboardingGate navigate={navigate} user={session.user} />;
diff --git a/apps/web/src/auth/dither-background.tsx b/apps/web/src/auth/dither-background.tsx
index 4db66d63a..d05deb457 100644
--- a/apps/web/src/auth/dither-background.tsx
+++ b/apps/web/src/auth/dither-background.tsx
@@ -1,5 +1,3 @@
-import { useEffect, useRef } from "react";
-
 // 8x8 ordered Bayer threshold matrix (same as the corbits dither shader).
 // prettier-ignore
 const BAYER = [
@@ -39,10 +37,9 @@ const ASSET = "/images/hero-dither.png"; // same-origin source image
  * static frame, re-evaluated when the OS setting toggles).
  */
 export function DitherBackground({ className }: { className?: string }) {
-  const ref = useRef<HTMLCanvasElement>(null);
-
-  useEffect(() => {
-    const canvas = ref.current;
+  // The animation belongs to the canvas element, so it starts and stops with
+  // it: a ref callback with a cleanup, never an effect reaching for a ref.
+  const attach = (canvas: HTMLCanvasElement | null) => {
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
@@ -254,11 +251,11 @@ export function DitherBackground({ className }: { className?: string }) {
       document.removeEventListener("visibilitychange", onVisibility);
       window.removeEventListener("pointermove", onMove);
     };
-  }, []);
+  };
 
   return (
     <canvas
-      ref={ref}
+      ref={attach}
       aria-hidden
       className={className}
       style={{
diff --git a/apps/web/src/auth/quote-card.tsx b/apps/web/src/auth/quote-card.tsx
index 4a5faa05e..7071938ad 100644
--- a/apps/web/src/auth/quote-card.tsx
+++ b/apps/web/src/auth/quote-card.tsx
@@ -1,5 +1,5 @@
 import { type } from "arktype";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 export const QuoteSchema = type({
   quote: "string",
@@ -54,16 +54,18 @@ function nextIndex(): number {
  * localStorage) — it does not cycle while the page is open.
  */
 export function QuoteCard() {
-  const [index] = useState(nextIndex);
-
-  useEffect(() => {
+  // Picked and persisted once, as the card mounts — the rotation advances
+  // per page load, never while the page is open.
+  const [index] = useState(() => {
+    const next = nextIndex();
     try {
-      localStorage.setItem(STORAGE_KEY, String(index));
+      localStorage.setItem(STORAGE_KEY, String(next));
     } catch {
       // localStorage unavailable (private mode / blocked) — rotation just
       // restarts from the first quote next load.
     }
-  }, [index]);
+    return next;
+  });
 
   const current = QUOTES[index % QUOTES.length];
   if (current === undefined) return null;
diff --git a/apps/web/src/bench-context.tsx b/apps/web/src/bench-context.tsx
index e4605fe5b..b0be365a3 100644
--- a/apps/web/src/bench-context.tsx
+++ b/apps/web/src/bench-context.tsx
@@ -6,7 +6,7 @@
 
 import { isRawIdentifier } from "@/bench";
 import { useQueryClient } from "@tanstack/react-query";
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 import type { ReactNode } from "react";
 
 import type { APIQuery } from "@/lib/api-query";
@@ -84,12 +84,12 @@ export function BenchProvider({ children }: { readonly children: ReactNode }) {
   const resolved =
     memberships.kind === "ready" ? resolveSelection(memberships.data.data, stored) : undefined;
 
-  useEffect(() => {
-    if (resolved !== undefined && resolved.tenantId !== stored) {
-      writeStoredTenantId(resolved.tenantId);
-      setStored(resolved.tenantId);
-    }
-  }, [resolved, stored]);
+  // The resolved bench is the stored one: written during render so no
+  // consumer reads a selection the store disagrees with.
+  if (resolved !== undefined && resolved.tenantId !== stored) {
+    writeStoredTenantId(resolved.tenantId);
+    setStored(resolved.tenantId);
+  }
 
   const value = useMemo<BenchState>(
     () => ({
diff --git a/apps/web/src/chat/blocks/approve-block.tsx b/apps/web/src/chat/blocks/approve-block.tsx
index 20e1e2498..2ea790544 100644
--- a/apps/web/src/chat/blocks/approve-block.tsx
+++ b/apps/web/src/chat/blocks/approve-block.tsx
@@ -13,7 +13,8 @@
 
 import { Button, toast } from "@corbits/react-ui";
 import type { ApproveBlockData } from "../wire/blocks";
-import { useEffect, useState } from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
 
 import { CHAT_STRINGS } from "../strings";
 import { BlockCard } from "./block-card";
@@ -119,78 +120,90 @@ export function ApproveBlockView({
   readonly data: ApproveBlockData;
   readonly actions?: ApprovalActions;
 }) {
-  const [live, setLive] = useState<ApprovalStatusQuery>({ kind: "loading" });
-  const [deciding, setDeciding] = useState<DecisionInFlight>(null);
   const [decisionError, setDecisionError] = useState<string | null>(null);
   const [resolvedElsewhere, setResolvedElsewhere] = useState(false);
-  const [allowingStanding, setAllowingStanding] = useState(false);
 
-  useEffect(() => {
-    if (actions === undefined) return;
-    let cancelled = false;
-    setLive({ kind: "loading" });
-    setResolvedElsewhere(false);
-    actions.getStatus(data.approvalId).then((result) => {
-      if (!cancelled) setLive(result);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [actions, data.approvalId]);
+  const status = useQuery<ApprovalStatusQuery>({
+    queryKey: ["approval-status", data.approvalId],
+    queryFn: () =>
+      actions === undefined
+        ? Promise.resolve<ApprovalStatusQuery>({ kind: "loading" })
+        : actions.getStatus(data.approvalId),
+    enabled: actions !== undefined,
+  });
+  const live: ApprovalStatusQuery = status.data ?? { kind: "loading" };
+
+  // Never trust a decision response (or a local guess) over the platform's
+  // own state — every outcome, success or failure alike, re-reads the
+  // status above and renders only what comes back.
+  const decideMutation = useMutation({
+    mutationFn: (kind: "approve" | "reject") => {
+      if (actions === undefined) throw new Error("approval actions unavailable");
+      const call = kind === "approve" ? actions.approve : actions.reject;
+      return call(data.approvalId);
+    },
+    onSuccess: (result, kind) => {
+      if (result.kind === "resolved") {
+        setResolvedElsewhere(false);
+        toast(
+          kind === "approve"
+            ? CHAT_STRINGS.blockApproveStatusApproved
+            : CHAT_STRINGS.blockApproveStatusRejected,
+        );
+      } else if (result.kind === "conflict") {
+        // Someone/something else resolved this first. There is nothing to
+        // retry — the refreshed terminal status speaks, with a calmer note
+        // than a bare error.
+        setResolvedElsewhere(true);
+      } else {
+        setResolvedElsewhere(false);
+        setDecisionError(
+          result.kind === "forbidden"
+            ? CHAT_STRINGS.blockApproveActionForbidden
+            : CHAT_STRINGS.blockApproveActionError,
+        );
+      }
+    },
+    onSettled: () => {
+      void status.refetch();
+    },
+  });
+
+  const allowStandingMutation = useMutation({
+    mutationFn: () => {
+      if (actions?.allowStanding === undefined) {
+        throw new Error("standing approval unavailable");
+      }
+      return actions.allowStanding(data.approvalId);
+    },
+    onSuccess: (result) => {
+      if (result.kind === "resolved") {
+        toast(CHAT_STRINGS.blockApproveStatusApproved);
+      } else if (result.kind !== "conflict") {
+        setDecisionError(
+          result.kind === "forbidden"
+            ? CHAT_STRINGS.blockApproveActionForbidden
+            : CHAT_STRINGS.blockApproveActionError,
+        );
+      }
+    },
+    onSettled: () => {
+      void status.refetch();
+    },
+  });
+
+  const deciding: DecisionInFlight = decideMutation.isPending ? decideMutation.variables : null;
+  const allowingStanding = allowStandingMutation.isPending;
 
   function decide(kind: "approve" | "reject") {
     if (actions === undefined) return;
-    setDeciding(kind);
     setDecisionError(null);
-    const call = kind === "approve" ? actions.approve : actions.reject;
-    call(data.approvalId)
-      .then((result) => {
-        if (result.kind === "resolved") {
-          setResolvedElsewhere(false);
-          toast(
-            kind === "approve"
-              ? CHAT_STRINGS.blockApproveStatusApproved
-              : CHAT_STRINGS.blockApproveStatusRejected,
-          );
-        } else if (result.kind === "conflict") {
-          // Someone/something else resolved this first. There is nothing
-          // to retry -- re-sync below and let the refreshed terminal
-          // status speak, with a calmer note than a bare error.
-          setResolvedElsewhere(true);
-        } else {
-          setResolvedElsewhere(false);
-          setDecisionError(
-            result.kind === "forbidden"
-              ? CHAT_STRINGS.blockApproveActionForbidden
-              : CHAT_STRINGS.blockApproveActionError,
-          );
-        }
-        // Never trust the decision response (or a local guess) over the
-        // platform's own state -- re-read it after every outcome, success
-        // or failure alike, and render only what comes back.
-        return actions.getStatus(data.approvalId).then(setLive);
-      })
-      .finally(() => setDeciding(null));
+    decideMutation.mutate(kind);
   }
 
   function allowStanding() {
     if (actions?.allowStanding === undefined) return;
-    setAllowingStanding(true);
-    actions
-      .allowStanding(data.approvalId)
-      .then((result) => {
-        if (result.kind === "resolved") {
-          toast(CHAT_STRINGS.blockApproveStatusApproved);
-        } else if (result.kind !== "conflict") {
-          setDecisionError(
-            result.kind === "forbidden"
-              ? CHAT_STRINGS.blockApproveActionForbidden
-              : CHAT_STRINGS.blockApproveActionError,
-          );
-        }
-        return actions.getStatus(data.approvalId).then(setLive);
-      })
-      .finally(() => setAllowingStanding(false));
+    allowStandingMutation.mutate();
   }
 
   const view = deriveApproveCardView({
diff --git a/apps/web/src/chat/blocks/connect-service-block-container.tsx b/apps/web/src/chat/blocks/connect-service-block-container.tsx
index 25d64bc1c..0be54bf0e 100644
--- a/apps/web/src/chat/blocks/connect-service-block-container.tsx
+++ b/apps/web/src/chat/blocks/connect-service-block-container.tsx
@@ -7,7 +7,8 @@
 // disconnected key-paste-free framing with a disabled-by-inaction
 // connect that goes nowhere, matching the "no port, no feature"
 // fallback every other block uses.
-import { useEffect, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
 import type { ConnectServiceBlockData } from "../wire/blocks";
 
 import type { ConnectServiceActions, ConnectServiceQuery } from "./connect-service-actions";
@@ -20,24 +21,29 @@ export function ConnectServiceBlockContainer({
   readonly data: ConnectServiceBlockData;
   readonly actions?: ConnectServiceActions;
 }) {
-  const [query, setQuery] = useState<ConnectServiceQuery>({ kind: "loading" });
+  const queryClient = useQueryClient();
+  // Keyed by connector, not by message: the connection is the tenant's, so
+  // every card for the same service shares one read.
+  const queryKey = ["connect-state", data.connectorId] as const;
+  const live = useQuery<ConnectServiceQuery>({
+    queryKey,
+    queryFn: () =>
+      actions === undefined
+        ? Promise.resolve<ConnectServiceQuery>({ kind: "loading" })
+        : actions.getConnectState(data.connectorId),
+    enabled: actions !== undefined,
+  });
+  const query: ConnectServiceQuery = live.data ?? { kind: "loading" };
 
+  // The live fold is a subscription, so it writes into the cache the read
+  // above already owns rather than keeping a second copy beside it.
   useEffect(() => {
     if (actions === undefined) return;
-    let cancelled = false;
-
-    function applyQuery(result: ConnectServiceQuery) {
-      if (cancelled) return;
-      setQuery(result);
-    }
-
-    void actions.getConnectState(data.connectorId).then(applyQuery);
-    const unsubscribe = actions.subscribeConnectState(data.connectorId, applyQuery);
-    return () => {
-      cancelled = true;
-      unsubscribe();
-    };
-  }, [actions, data.connectorId]);
+    return actions.subscribeConnectState(data.connectorId, (result) => {
+      queryClient.setQueryData(queryKey, result);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- queryKey is derived from connectorId
+  }, [actions, data.connectorId, queryClient]);
 
   if (query.kind === "connected") {
     return <ConnectServiceBlockView kind="connected" displayName={data.displayName} />;
diff --git a/apps/web/src/chat/turn-activity.tsx b/apps/web/src/chat/turn-activity.tsx
index a6f379c77..1c380ecfa 100644
--- a/apps/web/src/chat/turn-activity.tsx
+++ b/apps/web/src/chat/turn-activity.tsx
@@ -338,9 +338,13 @@ export function useTurnActivity(
 } {
   const [activity, setActivity] = useState<TurnActivityState>(null);
 
-  useEffect(() => {
+  // Another workbench's activity must never show for a frame, so the reset
+  // happens during render rather than after the paint that would leak it.
+  const [activityFor, setActivityFor] = useState(workbenchId);
+  if (activityFor !== workbenchId) {
+    setActivityFor(workbenchId);
     setActivity(null);
-  }, [workbenchId]);
+  }
 
   // Reset (clear + re-arm) on every event that actually changes the
   // activity object — an ignored event never resets the clock, since
diff --git a/apps/web/src/command-palette-provider.tsx b/apps/web/src/command-palette-provider.tsx
index e74631fc2..86f4c1c09 100644
--- a/apps/web/src/command-palette-provider.tsx
+++ b/apps/web/src/command-palette-provider.tsx
@@ -84,9 +84,13 @@ export function CommandPaletteProvider({
     [selectedTenantId],
   );
 
-  useEffect(() => {
+  // Recents are per bench: loaded during render when the store changes, so
+  // the palette never opens on the previous bench's entries.
+  const [recentsFor, setRecentsFor] = useState(recentsStore);
+  if (recentsFor !== recentsStore) {
+    setRecentsFor(recentsStore);
     setRecents(recentsStore?.load() ?? []);
-  }, [recentsStore]);
+  }
 
   const pushRecent = useCallback(
     (entry: RecentEntry) => {
@@ -252,14 +256,14 @@ export function CommandPaletteProvider({
   // content it was not opened from; a bench switch closes it too, dropping a
   // query whose results belonged to the bench being left. A tenant resolving
   // for the first time (null → a real bench, at boot) is not a switch.
-  const searchScope = useRef({ path, tenantId: selectedTenantId });
-  useEffect(() => {
-    const previous = searchScope.current;
-    const routeChanged = previous.path !== path;
-    const benchSwitched = previous.tenantId !== null && previous.tenantId !== selectedTenantId;
-    searchScope.current = { path, tenantId: selectedTenantId };
+  const [searchScope, setSearchScope] = useState({ path, tenantId: selectedTenantId });
+  if (searchScope.path !== path || searchScope.tenantId !== selectedTenantId) {
+    const benchSwitched =
+      searchScope.tenantId !== null && searchScope.tenantId !== selectedTenantId;
+    const routeChanged = searchScope.path !== path;
+    setSearchScope({ path, tenantId: selectedTenantId });
     if (routeChanged || benchSwitched) setCommandPaletteOpen(false);
-  }, [path, selectedTenantId]);
+  }
 
   const pageItems = useMemo<readonly PaletteResultItem[]>(
     () =>
diff --git a/apps/web/src/command-palette/use-entity-search.ts b/apps/web/src/command-palette/use-entity-search.ts
index c06a283fb..e307435b4 100644
--- a/apps/web/src/command-palette/use-entity-search.ts
+++ b/apps/web/src/command-palette/use-entity-search.ts
@@ -1,3 +1,4 @@
+import { useQuery } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 
 import { searchEntities } from "./entity-search";
@@ -57,14 +58,8 @@ export function useEntitySearch({
 }: UseEntitySearchOptions): UseEntitySearchResult {
   const [debouncedQuery, setDebouncedQuery] = useState("");
   const [offset, setOffset] = useState(0);
-  const [fetched, setFetched] = useState<ReadonlyMap<string, readonly SearchableEntity[]> | null>(
-    null,
-  );
-  const [fetching, setFetching] = useState(false);
-  const [error, setError] = useState(false);
-  const fetchToken = useRef(0);
-  // Hold the latest fetchers without making the fetch effect depend on
-  // their identity — callers (and tests) are free to hand in fresh arrow
+  // Hold the latest fetchers without making the search depend on their
+  // identity — callers (and tests) are free to hand in fresh arrow
   // functions each render without restarting the search or looping.
   const fetchersRef = useRef(sources);
   fetchersRef.current = sources;
@@ -84,37 +79,27 @@ export function useEntitySearch({
     return () => clearTimeout(timer);
   }, [query, enabled, debounceMs]);
 
-  useEffect(() => {
-    if (debouncedQuery.trim().length === 0) {
-      setFetched(null);
-      setFetching(false);
-      setError(false);
-      return;
-    }
-    const token = ++fetchToken.current;
-    setFetching(true);
-    setError(false);
-    const current = fetchersRef.current;
-    void Promise.all(current.map((source) => source.fetch()))
-      .then((results) => {
-        if (token !== fetchToken.current) return;
-        const map = new Map<string, readonly SearchableEntity[]>();
-        for (let i = 0; i < current.length; i++) {
-          const source = current[i];
-          if (!source) continue;
-          map.set(source.category, results[i] ?? []);
-        }
-        setFetched(map);
-        setFetching(false);
-      })
-      .catch(() => {
-        if (token !== fetchToken.current) return;
-        setError(true);
-        setFetching(false);
-      });
-  }, [debouncedQuery]);
+  // One fetch per committed search, cached across pages of it. A failure in
+  // any source surfaces as `error` rather than a partial result set.
+  const search = useQuery({
+    queryKey: ["entity-search", debouncedQuery],
+    enabled: debouncedQuery.trim().length > 0,
+    queryFn: async (): Promise<ReadonlyMap<string, readonly SearchableEntity[]>> => {
+      const current = fetchersRef.current;
+      const results = await Promise.all(current.map((source) => source.fetch()));
+      const map = new Map<string, readonly SearchableEntity[]>();
+      for (let i = 0; i < current.length; i++) {
+        const source = current[i];
+        if (!source) continue;
+        map.set(source.category, results[i] ?? []);
+      }
+      return map;
+    },
+  });
 
-  const loading = pending || fetching;
+  const fetched = debouncedQuery.trim().length === 0 ? null : (search.data ?? null);
+  const error = search.isError;
+  const loading = pending || (debouncedQuery.trim().length > 0 && search.isFetching);
 
   if (fetched === null || debouncedQuery.trim().length === 0) {
     // Nothing is fetched yet, so there is no next page to load — a no-op
diff --git a/apps/web/src/library/artifact-text-editor.tsx b/apps/web/src/library/artifact-text-editor.tsx
index 4c4a774ff..f8c0818b4 100644
--- a/apps/web/src/library/artifact-text-editor.tsx
+++ b/apps/web/src/library/artifact-text-editor.tsx
@@ -8,7 +8,7 @@
 // This is a plain controlled textarea, debounced-saved through `onSave`
 // (the host wires that to the artifacts HTTP route's PUT). Single-user
 // editing only; no live co-viewer cursors, no shared doc, no awareness.
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
 import { formatSaveStateLine, type ArtifactSaveState } from "./save-state";
 
@@ -42,16 +42,14 @@ export function ArtifactTextEditor({
   const [value, setValue] = useState(content);
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  useEffect(
-    () => () => {
-      if (saveTimerRef.current !== null) clearTimeout(saveTimerRef.current);
-    },
-    [],
-  );
-
   return (
     <div className="shell-artifact-text-editor">
       <textarea
+        // The pending debounced save dies with the textarea — a ref cleanup
+        // rather than an effect that exists only to unmount.
+        ref={() => () => {
+          if (saveTimerRef.current !== null) clearTimeout(saveTimerRef.current);
+        }}
         className="shell-artifact-text-editor-body"
         value={value}
         readOnly={readOnly}
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 58f61df7d..d02525e6d 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -3,7 +3,7 @@ import "./app.css";
 import "./tailwind.css";
 
 import { ThemeProvider, Toaster, toast } from "@corbits/react-ui";
-import { StrictMode, useCallback, useEffect, useState } from "react";
+import { StrictMode, useCallback, useEffect, useState, useSyncExternalStore } from "react";
 import { createRoot } from "react-dom/client";
 
 import { getLogger } from "@/lib/client-log";
@@ -11,6 +11,7 @@ import { AppErrorBoundary } from "./app-error-boundary";
 import { App } from "./app";
 import { validatedNextPath } from "./login-next";
 import { triggerFirstLoginProvisioning } from "./onboarding";
+import { getPath, navigateTo, subscribeToPath } from "./router-store";
 import { ONBOARDING_PATH } from "./routes";
 import { fetchSession, signOut } from "./session";
 import type { SessionState, SessionUser } from "./session";
@@ -18,20 +19,10 @@ import type { SessionState, SessionUser } from "./session";
 const log = getLogger("web.session");
 
 function Root() {
-  const [path, setPath] = useState(window.location.pathname);
-  useEffect(() => {
-    const handlePopState = () => setPath(window.location.pathname);
-    window.addEventListener("popstate", handlePopState);
-    return () => window.removeEventListener("popstate", handlePopState);
-  }, []);
-  const navigate = useCallback((to: string) => {
-    window.history.pushState(null, "", to);
-    // `path` state is pathname-only (every comparison against it —
-    // `matchesRoute`, `LOGIN_PATH`, `ONBOARDING_PATH` — expects a bare
-    // path); a query string like `/login?next=...` still lands on the
-    // URL bar via `pushState` above, just not in this state.
-    setPath(new URL(to, window.location.origin).pathname);
-  }, []);
+  // History lives outside React (`./router-store`), so the path is a
+  // subscription, not an effect that starts listening after first paint.
+  const path = useSyncExternalStore(subscribeToPath, getPath);
+  const navigate = navigateTo;
 
   const [session, setSession] = useState<SessionState>({ kind: "loading" });
   const probe = useCallback(() => {
diff --git a/apps/web/src/pages/home-page.tsx b/apps/web/src/pages/home-page.tsx
index f539c008d..92f1402d8 100644
--- a/apps/web/src/pages/home-page.tsx
+++ b/apps/web/src/pages/home-page.tsx
@@ -5,7 +5,6 @@
 import { Button, EmptyState, PageShell } from "@corbits/react-ui";
 import { WarningCircle } from "@/lib/icons";
 import { useQuery } from "@tanstack/react-query";
-import { useEffect } from "react";
 
 import { WorkbenchLoadingState } from "@/chat";
 import { listChats } from "@/chat/threads-api";
@@ -13,6 +12,7 @@ import { listChats } from "@/chat/threads-api";
 import { useBench } from "../bench-context";
 import { chatKeys, chatPath, NEW_CHAT_PATH } from "../chat-path";
 import { useNavigate } from "../navigation";
+import { Redirect } from "../redirect";
 
 export function HomeRoute() {
   const navigate = useNavigate();
@@ -23,12 +23,6 @@ export function HomeRoute() {
     queryFn: () => listChats(selectedTenantId ?? ""),
   });
 
-  const newest = chats.data?.[0];
-  useEffect(() => {
-    if (chats.data === undefined) return;
-    navigate(newest === undefined ? NEW_CHAT_PATH : chatPath(newest.id));
-  }, [chats.data, newest, navigate]);
-
   if (memberships.kind === "error" || chats.isError) {
     const cause: unknown = chats.error;
     const message =
@@ -53,6 +47,12 @@ export function HomeRoute() {
     );
   }
 
+  if (chats.data !== undefined) {
+    const newest = chats.data[0];
+    const to = newest === undefined ? NEW_CHAT_PATH : chatPath(newest.id);
+    return <Redirect to={to} from="/" navigate={navigate} />;
+  }
+
   return (
     <div className="page-fill shell-route-loading">
       <WorkbenchLoadingState delayMs={0} />
diff --git a/apps/web/src/pages/legacy-settings-redirects.tsx b/apps/web/src/pages/legacy-settings-redirects.tsx
deleted file mode 100644
index 164ad4d53..000000000
--- a/apps/web/src/pages/legacy-settings-redirects.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-// Old links that must still land somewhere real. Agents and Skills were
-// Settings sections for a stretch (: `/settings/agents[/:id]`,
-// `/settings/skills[/:id]`); / moved both back out to their
-// own rail destinations, so any deep link into the old Settings home now
-// bounces to the new one, preserving a deep-linked id. Library was renamed
-// Files, then Artifacts, moving off `/library` and `/files` in turn — both
-// old prefixes bounce to `/artifacts` the same way.
-
-import { useEffect } from "react";
-
-function legacyRedirectTarget(path: string, oldPrefix: string, newPrefix: string): string {
-  if (path === oldPrefix) return newPrefix;
-  if (path.startsWith(`${oldPrefix}/`)) {
-    return `${newPrefix}/${path.slice(oldPrefix.length + 1)}`;
-  }
-  return newPrefix;
-}
-
-export function LegacyRedirect({
-  path,
-  navigate,
-  oldPrefix,
-  newPrefix,
-}: {
-  readonly path: string;
-  readonly navigate: (to: string) => void;
-  readonly oldPrefix: string;
-  readonly newPrefix: string;
-}) {
-  useEffect(() => {
-    navigate(legacyRedirectTarget(path, oldPrefix, newPrefix));
-  }, [path, navigate, oldPrefix, newPrefix]);
-  return null;
-}
-
-export function LegacySettingsAgentsRedirect({
-  path,
-  navigate,
-}: {
-  readonly path: string;
-  readonly navigate: (to: string) => void;
-}) {
-  return (
-    <LegacyRedirect
-      path={path}
-      navigate={navigate}
-      oldPrefix="/settings/agents"
-      newPrefix="/agents"
-    />
-  );
-}
-
-export function LegacySettingsSkillsRedirect({
-  path,
-  navigate,
-}: {
-  readonly path: string;
-  readonly navigate: (to: string) => void;
-}) {
-  return (
-    <LegacyRedirect
-      path={path}
-      navigate={navigate}
-      oldPrefix="/settings/skills"
-      newPrefix="/skills"
-    />
-  );
-}
-
-export function LegacyLibraryRedirect({
-  path,
-  navigate,
-}: {
-  readonly path: string;
-  readonly navigate: (to: string) => void;
-}) {
-  return (
-    <LegacyRedirect path={path} navigate={navigate} oldPrefix="/library" newPrefix="/artifacts" />
-  );
-}
diff --git a/apps/web/src/pages/library-page.tsx b/apps/web/src/pages/library-page.tsx
index 81613ae1e..44e436c45 100644
--- a/apps/web/src/pages/library-page.tsx
+++ b/apps/web/src/pages/library-page.tsx
@@ -369,9 +369,11 @@ export function LibraryPage({
   // — so a selection made in one view has nothing to anchor to in the
   // other. Clearing on view change is simpler than teaching the card view
   // its own checkboxes for a selection UI it doesn't otherwise need.
-  useEffect(() => {
+  const [selectionViewMode, setSelectionViewMode] = useState(viewMode);
+  if (selectionViewMode !== viewMode) {
+    setSelectionViewMode(viewMode);
     selection.clear();
-  }, [viewMode, selection.clear]);
+  }
 
   const openPicker = useCallback(() => {
     if (uploading === true) return;
@@ -620,9 +622,11 @@ export function LibraryRoute({ path }: { readonly path: string }) {
   // existed.
   const deepLinkedArtifactId = libraryArtifactIdFromPath(path);
   const [selectedId, setSelectedId] = useState<string | null>(deepLinkedArtifactId);
-  useEffect(() => {
+  const [appliedDeepLink, setAppliedDeepLink] = useState(deepLinkedArtifactId);
+  if (appliedDeepLink !== deepLinkedArtifactId) {
+    setAppliedDeepLink(deepLinkedArtifactId);
     if (deepLinkedArtifactId !== null) setSelectedId(deepLinkedArtifactId);
-  }, [deepLinkedArtifactId]);
+  }
   const kindSegment = deepLinkedArtifactId === null ? libraryKindSegmentFromPath(path) : "";
 
   // Artifacts' workbench-first lens: the workbench the person just
@@ -654,14 +658,14 @@ export function LibraryRoute({ path }: { readonly path: string }) {
       : `/api/tenants/${scopeTenantId}/artifacts/${encodeURIComponent(selectedId)}`;
   const detail = useAPIQuery(detailPath, ArtifactDetailSchema);
 
-  // Drop selection when the filtered list no longer contains the id.
-  useEffect(() => {
-    if (selectedId === null || page.kind !== "ready") return;
+  // A selection the filtered list no longer contains is dropped during
+  // render, so the detail pane never paints for a row that is not there.
+  if (selectedId !== null && page.kind === "ready") {
     const stillThere = mapArtifactListToSummaries(page.data.artifacts)
       .filter((row) => artifactMatchesLibraryKindSegment(row, kindSegment))
       .some((row) => row.id === selectedId);
     if (!stillThere) setSelectedId(null);
-  }, [page, selectedId, kindSegment]);
+  }
 
   if (selectedTenantId === null) {
     return (
diff --git a/apps/web/src/pages/settings-page.tsx b/apps/web/src/pages/settings-page.tsx
index feb04ddf5..60cedc178 100644
--- a/apps/web/src/pages/settings-page.tsx
+++ b/apps/web/src/pages/settings-page.tsx
@@ -9,10 +9,10 @@
 
 import { flattenSettingsSections, resolveActiveSection, SettingsShell } from "@/settings";
 import { PageShell } from "@corbits/react-ui";
-import { useEffect } from "react";
 
 import { useBench } from "../bench-context";
 import { useSignOut } from "../navigation";
+import { Redirect } from "../redirect";
 import {
   SETTINGS_PATH_PREFIX,
   settingsEntityIdFromPath,
@@ -58,17 +58,15 @@ export function SettingsRoute({
 
   // Bare /settings, and an unknown or gate-denied /settings/:section, both
   // correct to the first allowed section's own URL — never a fallback
-  // rendered under a URL the section nav disagrees with. Depends on
-  // `activeSectionId` (a primitive), not `activeSection` (a fresh object
-  // every render, since `resolveSettingsSectionGroups` isn't memoized) —
-  // otherwise an unrelated re-render (e.g. BenchProvider persisting the
-  // resolved tenant id) would refire this and double-navigate.
-  useEffect(() => {
-    if (activeSectionId === null) return;
-    if (requestedId !== null && requestedSectionExists) return;
-    if (requestedId !== null && !accessSettled) return;
-    navigate(`${SETTINGS_PATH_PREFIX}/${activeSectionId}`);
-  }, [requestedId, requestedSectionExists, accessSettled, activeSectionId, navigate]);
+  // rendered under a URL the section nav disagrees with.
+  if (
+    activeSectionId !== null &&
+    (requestedId === null || (!requestedSectionExists && accessSettled))
+  ) {
+    return (
+      <Redirect to={`${SETTINGS_PATH_PREFIX}/${activeSectionId}`} from={path} navigate={navigate} />
+    );
+  }
 
   return (
     <div className="flex h-full min-h-0 flex-col">
diff --git a/apps/web/src/pages/skill-detail-page.tsx b/apps/web/src/pages/skill-detail-page.tsx
index 91bbfce76..03accecb7 100644
--- a/apps/web/src/pages/skill-detail-page.tsx
+++ b/apps/web/src/pages/skill-detail-page.tsx
@@ -17,7 +17,10 @@ import { PageShell, RichEmptyState, Section, formatRelativeTime } from "@corbits
 import { Lightning } from "@/lib/icons";
 import { WorkbenchLoadingState } from "@/chat";
 import { ApiQueryError, describeApiError } from "@/lib/api-query";
-import { useCallback, useEffect, useState, type ReactNode } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, type ReactNode } from "react";
+
+import { tenantKeys } from "../query-client";
 
 import { useBench } from "../bench-context";
 import { SKILLS_PATH_PREFIX, skillIdFromPath } from "../path-ids";
@@ -44,32 +47,28 @@ export function SkillDetailPage({
   readonly name: string;
   readonly now?: number;
 }) {
-  const [state, setState] = useState<PageState>({ status: "loading" });
+  const queryClient = useQueryClient();
+  const queryKey = [...tenantKeys.skills(tenantId ?? "none"), name] as const;
+  const detail = useQuery({
+    queryKey,
+    queryFn: async () => (await loadSkill(tenantId ?? "", name)).skill,
+    enabled: tenantId !== null,
+  });
+
+  // The failure is the page state — missing and error render distinct
+  // honest copy, so neither is reported beyond what the reader already sees.
+  const state: PageState = detail.isError
+    ? statusOf(detail.error) === 404
+      ? { status: "missing" }
+      : { status: "error", message: describeApiError(detail.error, "loading this skill") }
+    : detail.data === undefined
+      ? { status: "loading" }
+      : { status: "ready", skill: detail.data };
 
   const read = useCallback(async (): Promise<void> => {
-    if (tenantId === null) return;
-    setState({ status: "loading" });
-    try {
-      const { skill } = await loadSkill(tenantId, name);
-      setState({ status: "ready", skill });
-    } catch (cause) {
-      // report-error-ignore: the failure is the page state — missing vs
-      // error renders distinct honest copy, so there is nothing to report
-      // beyond what the user already sees.
-      setState(
-        statusOf(cause) === 404
-          ? { status: "missing" }
-          : {
-              status: "error",
-              message: describeApiError(cause, "loading this skill"),
-            },
-      );
-    }
-  }, [tenantId, name]);
-
-  useEffect(() => {
-    void read();
-  }, [read]);
+    await queryClient.invalidateQueries({ queryKey });
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- queryKey is derived from tenantId + name
+  }, [queryClient, tenantId, name]);
 
   const crumbs = [{ label: "Skills", href: SKILLS_PATH_PREFIX }, { label: name }];
 
diff --git a/apps/web/src/pages/skills-page.tsx b/apps/web/src/pages/skills-page.tsx
index 3c96555d3..0f0cdeeb7 100644
--- a/apps/web/src/pages/skills-page.tsx
+++ b/apps/web/src/pages/skills-page.tsx
@@ -29,8 +29,11 @@ import {
 } from "@corbits/react-ui";
 import { Lightning, Plus } from "@/lib/icons";
 import { WorkbenchLoadingState } from "@/chat";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useState, type ReactNode } from "react";
 
+import { tenantKeys } from "../query-client";
+
 import { rowActivationProps } from "../activatable-row";
 import { consumePendingNewSkill } from "../command-palette-actions";
 import { createSkill, listSkills, type SkillSummary } from "../skills-api";
@@ -67,28 +70,26 @@ export function SkillsPage({
   readonly tenantId: string | null;
   readonly navigate?: (to: string) => void;
 }) {
-  const [state, setState] = useState<RegistryState>({ status: "loading" });
+  const queryClient = useQueryClient();
   const [query, setQuery] = useState("");
-  const [createOpen, setCreateOpen] = useState(false);
+  // The "New skill" hop from elsewhere is consumed once, as the page mounts.
+  const [createOpen, setCreateOpen] = useState(() => consumePendingNewSkill());
+
+  const registry = useQuery({
+    queryKey: tenantKeys.skills(tenantId ?? "none"),
+    queryFn: () => (tenantId === null ? Promise.resolve([]) : listSkills(tenantId)),
+    enabled: tenantId !== null,
+  });
+  const state: RegistryState = registry.isError
+    ? { status: "error", message: messageOf(registry.error) }
+    : registry.data === undefined
+      ? { status: "loading" }
+      : { status: "ready", skills: registry.data };
 
   const reload = useCallback(async () => {
     if (tenantId === null) return;
-    setState({ status: "loading" });
-    try {
-      const skills = await listSkills(tenantId);
-      setState({ status: "ready", skills });
-    } catch (cause) {
-      setState({ status: "error", message: messageOf(cause) });
-    }
-  }, [tenantId]);
-
-  useEffect(() => {
-    void reload();
-  }, [reload]);
-
-  useEffect(() => {
-    if (consumePendingNewSkill()) setCreateOpen(true);
-  }, []);
+    await queryClient.invalidateQueries({ queryKey: tenantKeys.skills(tenantId) });
+  }, [queryClient, tenantId]);
 
   useEffect(() => {
     const onCreate = () => setCreateOpen(true);
diff --git a/apps/web/src/query-client.ts b/apps/web/src/query-client.ts
index 0bb5e98fd..32d1552e8 100644
--- a/apps/web/src/query-client.ts
+++ b/apps/web/src/query-client.ts
@@ -99,6 +99,10 @@ export const tenantKeys = {
   // `invalidateQueries({ queryKey: tenantKeys.artifacts(tenantId) })` after
   // an upload covers both the list and the kind-nav counts.
   artifactCounts: (tenantId: string) => ["tenant", tenantId, "artifacts", "counts"] as const,
+  credentials: (tenantId: string) => ["tenant", tenantId, "credentials"] as const,
+  principals: (tenantId: string) => ["tenant", tenantId, "principals"] as const,
+  roles: (tenantId: string) => ["tenant", tenantId, "roles"] as const,
+  grants: (tenantId: string) => ["tenant", tenantId, "grants"] as const,
   /** Settings section-nav gating (People/Roles/Grants/Credentials). Keyed
    * so col2's nav band and the settings stage — mounted in separate
    * subtrees — share one cached probe instead of each firing its own. */
diff --git a/apps/web/src/redirect.tsx b/apps/web/src/redirect.tsx
new file mode 100644
index 000000000..c9dddd480
--- /dev/null
+++ b/apps/web/src/redirect.tsx
@@ -0,0 +1,28 @@
+// A screen that only exists to forward. The hop happens during render, not
+// from an effect, so the route it leaves never paints a frame of its own —
+// the router store publishes the new path on a microtask, so nothing is
+// updated mid-render.
+
+import { useRef } from "react";
+
+import type { Navigate } from "./navigation";
+
+/** Scheduled from render on a microtask, and at most once per target: the
+ * hop leaves this render alone (nothing is updated mid-render) yet still
+ * lands before the browser paints the route it is leaving. */
+export function Redirect({
+  to,
+  from,
+  navigate,
+}: {
+  readonly to: string;
+  readonly from: string;
+  readonly navigate: Navigate;
+}) {
+  const sent = useRef<string | null>(null);
+  if (sent.current !== to && from !== new URL(to, window.location.origin).pathname) {
+    sent.current = to;
+    queueMicrotask(() => navigate(to));
+  }
+  return null;
+}
diff --git a/apps/web/src/router-store.ts b/apps/web/src/router-store.ts
new file mode 100644
index 000000000..12e1ed477
--- /dev/null
+++ b/apps/web/src/router-store.ts
@@ -0,0 +1,63 @@
+// The browser history as an external store: the path lives outside React,
+// so the shell subscribes with `useSyncExternalStore` instead of an effect
+// that registers a `popstate` listener after the first paint. Retired paths
+// are canonicalized here, before any screen mounts — a bookmark to
+// `/files/a1` becomes `/artifacts/a1` in the URL bar and in the store, and
+// no route entry exists just to bounce it.
+
+import { redirectTargetFor } from "./routes";
+
+function canonicalPath(pathname: string): string {
+  return redirectTargetFor(pathname) ?? pathname;
+}
+
+const listeners = new Set<() => void>();
+
+let currentPath = canonicalPath(window.location.pathname);
+if (currentPath !== window.location.pathname) {
+  window.history.replaceState(null, "", currentPath);
+}
+
+function setPath(next: string): void {
+  if (next === currentPath) return;
+  currentPath = next;
+  // Published on a microtask so a render-phase `navigateTo` (a forwarding
+  // route resolving its target) never updates a subscriber mid-render.
+  queueMicrotask(() => {
+    for (const listener of listeners) listener();
+  });
+}
+
+window.addEventListener("popstate", () => {
+  const canonical = canonicalPath(window.location.pathname);
+  if (canonical !== window.location.pathname) {
+    window.history.replaceState(null, "", canonical);
+  }
+  setPath(canonical);
+});
+
+export function subscribeToPath(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function getPath(): string {
+  return currentPath;
+}
+
+/**
+ * Push a new entry and publish the new path. The store keeps the pathname
+ * only — every comparison against it (`matchesRoute`, `LOGIN_PATH`,
+ * `ONBOARDING_PATH`) expects a bare path — while a query string like
+ * `/login?next=...` still reaches the URL bar.
+ */
+export function navigateTo(to: string): void {
+  const url = new URL(to, window.location.origin);
+  const canonical = canonicalPath(url.pathname);
+  // A hop to the path already showing is a no-op, which is what makes a
+  // render-phase `navigate` safe to run twice (StrictMode, a re-render):
+  // it can never stack duplicate history entries.
+  if (canonical === currentPath) return;
+  window.history.pushState(null, "", canonical === url.pathname ? to : canonical);
+  setPath(canonical);
+}
diff --git a/apps/web/src/routes.tsx b/apps/web/src/routes.tsx
index 4fe5dc09f..0d789de02 100644
--- a/apps/web/src/routes.tsx
+++ b/apps/web/src/routes.tsx
@@ -8,16 +8,12 @@
 // open her conversation) for a bench with a workbench already, or the
 // guided first-workbench describe screen for a bench with none — never a
 // Home dashboard.
-// Approvals has no page — the Activity band owns them. Agents
-// and Skills are their own rail destinations again — they spent
-// a stretch as Settings sections and `/settings/agents[/:id]` /
-// `/settings/skills[/:id]` stay routable only as redirects back here, so
-// old links and bookmarks still land somewhere real. Library was renamed
-// Files, then Workbench renamed Routines to Workflows and Files to
-// Artifacts — `/routines` and `/files` (and the older `/library`) all
-// redirect to their current homes. Inbox is gone too (tasks + approvals
-// don't flow into workbenches); `/inbox` stays routable only as a
-// redirect to `/`.
+// Approvals has no page — the Activity band owns them. Agents and Skills
+// are their own rail destinations again. Every path this app has retired
+// along the way (`/settings/agents`, `/routines`, `/files`, `/library`,
+// `/inbox`, `/mission-control`) lives in `RETIRED_PREFIXES` below, which
+// the router resolves before a screen mounts — never a route entry whose
+// only job is to bounce.
 
 import {
   ChatCircle,
@@ -31,7 +27,7 @@ import {
 } from "@/lib/icons";
 import { CHAT_STRINGS } from "@/chat";
 import type { Slug } from "@/lib/slug";
-import { lazy, useEffect, type ReactElement, type ReactNode } from "react";
+import { lazy, type ReactElement, type ReactNode } from "react";
 
 import {
   AGENTS_PATH_PREFIX,
@@ -42,12 +38,6 @@ import {
 } from "./path-ids";
 import { WORKBENCH_PATH_PREFIX, isWorkbenchPath } from "./workbench-path";
 import { CHATS_PATH_PREFIX, isChatPath } from "./chat-path";
-import {
-  LegacyRedirect,
-  LegacyLibraryRedirect,
-  LegacySettingsAgentsRedirect,
-  LegacySettingsSkillsRedirect,
-} from "./pages/legacy-settings-redirects";
 
 // Each signed-in page is a dynamic import so Vite emits one chunk per
 // screen. Static imports here pulled chat-ui, artifact-ui, settings-ui,
@@ -204,15 +194,10 @@ export function matchesRoute(routePath: string, path: string): boolean {
   }
   if (
     routePath === "/workflows" ||
-    routePath === "/routines" ||
-    routePath === "/library" ||
     routePath === "/artifacts" ||
-    routePath === "/files" ||
     routePath === "/insights" ||
     routePath === "/agents" ||
     routePath === "/skills" ||
-    routePath === "/settings/agents" ||
-    routePath === "/settings/skills" ||
     routePath === SETTINGS_PATH
   ) {
     return path === routePath || path.startsWith(`${routePath}/`);
@@ -220,12 +205,29 @@ export function matchesRoute(routePath: string, path: string): boolean {
   return routePath === path;
 }
 
-/** Bounces old `/inbox` links and bookmarks home (: the Inbox page
- * is gone — tasks and approvals don't flow into a workbench). */
-function InboxRedirect({ navigate }: { readonly navigate: (to: string) => void }) {
-  useEffect(() => {
-    navigate("/");
-  }, [navigate]);
+/** Every retired path prefix and where it lives now. Resolved by the router
+ * before a screen mounts, so a bookmark never renders a page just to bounce
+ * off it. */
+const RETIRED_PREFIXES: readonly (readonly [string, string])[] = [
+  ["/mission-control", "/"],
+  ["/inbox", "/"],
+  ["/routines", "/workflows"],
+  ["/files", "/artifacts"],
+  ["/library", "/artifacts"],
+  ["/settings/agents", "/agents"],
+  ["/settings/skills", "/skills"],
+];
+
+/** The current home for a retired path, `null` for a path that is still its
+ * own. A deep-linked id is carried across (`/files/a1` → `/artifacts/a1`). */
+export function redirectTargetFor(path: string): string | null {
+  for (const [oldPrefix, newPrefix] of RETIRED_PREFIXES) {
+    if (path === oldPrefix) return newPrefix;
+    if (path.startsWith(`${oldPrefix}/`)) {
+      const rest = path.slice(oldPrefix.length + 1);
+      return newPrefix === "/" ? "/" : `${newPrefix}/${rest}`;
+    }
+  }
   return null;
 }
 
@@ -237,16 +239,6 @@ export const APP_ROUTES: readonly AppRoute[] = [
     render: () => <HomeRoute />,
     hasStageTopBar: false,
   },
-  {
-    // Mission Control is gone — pending approvals and activity live in the
-    // workbench view now; old links and bookmarks bounce home.
-    path: "/mission-control",
-    label: "Mission Control",
-    icon: <ChatCircle />,
-    render: (path: string, navigate: (to: string) => void) => (
-      <LegacyRedirect path={path} navigate={navigate} oldPrefix="/mission-control" newPrefix="/" />
-    ),
-  },
   {
     path: NEW_WORKBENCH_PATH,
     label: CHAT_STRINGS.newWorkbenchAction,
@@ -267,14 +259,6 @@ export const APP_ROUTES: readonly AppRoute[] = [
     icon: <ChatCircle />,
     render: (path: string) => <WorkbenchRoomRoute path={path} />,
   },
-  {
-    path: "/inbox",
-    label: "Inbox",
-    icon: <ChatCircle />,
-    render: (_path: string, navigate: (to: string) => void) => (
-      <InboxRedirect navigate={navigate} />
-    ),
-  },
   {
     // Detail routes come before their roster: the roster prefix matches
     // everything beneath it, so the more specific slug route has to be
@@ -290,20 +274,6 @@ export const APP_ROUTES: readonly AppRoute[] = [
     icon: <FlowArrow />,
     render: () => <WorkflowsRoute />,
   },
-  {
-    // Old `/routines` links and bookmarks (its rename) land here.
-    path: "/routines",
-    label: "Workflows",
-    icon: <FlowArrow />,
-    render: (path: string, navigate: (to: string) => void) => (
-      <LegacyRedirect
-        path={path}
-        navigate={navigate}
-        oldPrefix="/routines"
-        newPrefix="/workflows"
-      />
-    ),
-  },
   {
     // The renamed, remounted Library page — "Library" stays out
     // of user-facing copy, but the underlying artifact machinery
@@ -313,24 +283,6 @@ export const APP_ROUTES: readonly AppRoute[] = [
     icon: <FolderOpen />,
     render: (path: string) => <ArtifactsRoute path={path} />,
   },
-  {
-    // Old `/files` links and bookmarks (its rename) land here.
-    path: "/files",
-    label: "Artifacts",
-    icon: <FolderOpen />,
-    render: (path: string, navigate: (to: string) => void) => (
-      <LegacyRedirect path={path} navigate={navigate} oldPrefix="/files" newPrefix="/artifacts" />
-    ),
-  },
-  {
-    // Old `/library` links and bookmarks (its rename) land here.
-    path: "/library",
-    label: "Artifacts",
-    icon: <FolderOpen />,
-    render: (path: string, navigate: (to: string) => void) => (
-      <LegacyLibraryRedirect path={path} navigate={navigate} />
-    ),
-  },
   {
     path: AGENT_DETAIL_PATH,
     label: "Agent",
@@ -347,16 +299,6 @@ export const APP_ROUTES: readonly AppRoute[] = [
       <AgentsRoute path={path} navigate={navigate} />
     ),
   },
-  {
-    // Agents spent through as a Settings section — this
-    // entry keeps old `/settings/agents[/:id]` links routable.
-    path: "/settings/agents",
-    label: "Agents",
-    icon: <Robot />,
-    render: (path: string, navigate: (to: string) => void) => (
-      <LegacySettingsAgentsRedirect path={path} navigate={navigate} />
-    ),
-  },
   {
     path: SKILL_DETAIL_PATH,
     label: "Skill",
@@ -369,16 +311,6 @@ export const APP_ROUTES: readonly AppRoute[] = [
     icon: <Lightning />,
     render: (_path: string, navigate: (to: string) => void) => <SkillsRoute navigate={navigate} />,
   },
-  {
-    // Skills spent through as a Settings section — this
-    // entry keeps old `/settings/skills[/:id]` links routable.
-    path: "/settings/skills",
-    label: "Skills",
-    icon: <Lightning />,
-    render: (path: string, navigate: (to: string) => void) => (
-      <LegacySettingsSkillsRedirect path={path} navigate={navigate} />
-    ),
-  },
   {
     path: "/tools",
     label: "Tools",
diff --git a/apps/web/src/settings/access.ts b/apps/web/src/settings/access.ts
index 9ef2479e9..5f48f8e2d 100644
--- a/apps/web/src/settings/access.ts
+++ b/apps/web/src/settings/access.ts
@@ -9,8 +9,6 @@
 // together made the gated nav vanish as if the principal were
 // unauthorized.
 
-import { useEffect, useState } from "react";
-
 import { evaluate } from "./tenancy-api";
 
 export type SectionAccess = "loading" | "allowed" | "denied" | "error";
@@ -47,45 +45,3 @@ export function coalesceSectionAccess(previous: SectionAccess, next: SectionAcce
   }
   return next;
 }
-
-function useResourceAccess(
-  tenantId: string | null,
-  principalId: string | null,
-  resource: string,
-): SectionAccess {
-  const [access, setAccess] = useState<SectionAccess>("loading");
-
-  useEffect(() => {
-    if (tenantId === null || principalId === null) {
-      setAccess("loading");
-      return;
-    }
-    let cancelled = false;
-    setAccess("loading");
-    void probeSectionAccess(tenantId, principalId, resource).then((next) => {
-      if (!cancelled) setAccess(next);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [tenantId, principalId, resource]);
-
-  return access;
-}
-
-/** One probe per section, run in parallel — a section stays out of the nav
- * until its probe resolves `allowed`, so a slow probe reads as "not shown
- * yet", never as a visible-but-disabled tab. A failed probe is `error`,
- * not `denied`: the registry withholds the section but marks the group so
- * a host can show a couldn't-check state instead of looking unauthorized. */
-export function useTenancyAccess(
-  tenantId: string | null,
-  principalId: string | null,
-): TenancyAccess {
-  return {
-    people: useResourceAccess(tenantId, principalId, "principal"),
-    roles: useResourceAccess(tenantId, principalId, "role"),
-    grants: useResourceAccess(tenantId, principalId, "grant"),
-    credentials: useResourceAccess(tenantId, principalId, "credential"),
-  };
-}
diff --git a/apps/web/src/settings/account-section.tsx b/apps/web/src/settings/account-section.tsx
index c1315934d..7ce720376 100644
--- a/apps/web/src/settings/account-section.tsx
+++ b/apps/web/src/settings/account-section.tsx
@@ -18,10 +18,9 @@ import {
 } from "@corbits/react-ui";
 import { Select } from "@corbits/react-ui/ui/select";
 import { ChatCircleDots, Copy, SignOut } from "@/lib/icons";
-import { useCallback, useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 
-import type { APIQuery } from "@/lib/api-query";
-import { QueryView, UnauthenticatedError, describeQueryError } from "@/lib/api-query";
+import { QueryView, toAPIQuery } from "@/lib/api-query";
 import { resolveAvatarFill } from "@/chat";
 import webPackage from "../../package.json";
 import { getAccount, type Account } from "./api";
@@ -32,33 +31,7 @@ import { SETTINGS_STRINGS } from "./strings";
 const FEEDBACK_URL = `${webPackage.repository.url}/issues`;
 
 export function AccountSection({ onSignOut }: { readonly onSignOut?: () => void }) {
-  const [query, setQuery] = useState<APIQuery<Account>>({ kind: "loading" });
-
-  const load = useCallback(() => {
-    setQuery({ kind: "loading" });
-    let cancelled = false;
-    getAccount()
-      .then((account) => {
-        if (!cancelled) setQuery({ kind: "ready", data: account });
-      })
-      .catch((cause: unknown) => {
-        if (cancelled) return;
-        if (cause instanceof UnauthenticatedError) {
-          setQuery({ kind: "unauthenticated" });
-          return;
-        }
-        setQuery({
-          kind: "error",
-          message: describeQueryError(cause),
-          retry: load,
-        });
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  useEffect(() => load(), [load]);
+  const query = toAPIQuery<Account>(useQuery({ queryKey: ["me", "account"], queryFn: getAccount }));
 
   return (
     <>
diff --git a/apps/web/src/settings/credentials-section.tsx b/apps/web/src/settings/credentials-section.tsx
index 25f4e945f..1073f4777 100644
--- a/apps/web/src/settings/credentials-section.tsx
+++ b/apps/web/src/settings/credentials-section.tsx
@@ -26,10 +26,11 @@ import {
   TableRow,
 } from "@corbits/react-ui";
 import type { CredentialType } from "@intx/types";
-import { useEffect, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
 
-import type { APIQuery } from "@/lib/api-query";
-import { QueryView, UnauthenticatedError, describeQueryError } from "@/lib/api-query";
+import { QueryView, toAPIQuery } from "@/lib/api-query";
+import { tenantKeys } from "@/query-client";
 import {
   createCredential,
   createProvider,
@@ -42,41 +43,39 @@ import {
 } from "./credentials-api";
 import { SETTINGS_STRINGS } from "./strings";
 
+type CredentialsData = {
+  readonly credentials: readonly Credential[];
+  readonly providers: readonly Provider[];
+};
+
 export function CredentialsSection({ tenantId }: { readonly tenantId: string | null }) {
-  const [query, setQuery] = useState<APIQuery<readonly Credential[]>>({ kind: "loading" });
-  const [reloadKey, setReloadKey] = useState(0);
+  const queryClient = useQueryClient();
   const [createOpen, setCreateOpen] = useState(false);
   const [creating, setCreating] = useState(false);
   const [createError, setCreateError] = useState<string | null>(null);
   const [rowError, setRowError] = useState<string | null>(null);
-  const [providers, setProviders] = useState<readonly Provider[]>([]);
 
-  function reload() {
-    setReloadKey((value) => value + 1);
-  }
+  // Credentials and their providers load together: creating one needs the
+  // provider row for the typed name, so a split read would race the form.
+  const result = useQuery<CredentialsData>({
+    queryKey: tenantKeys.credentials(tenantId ?? "none"),
+    queryFn: async (): Promise<CredentialsData> => {
+      if (tenantId === null) return { credentials: [], providers: [] };
+      const [credentials, providers] = await Promise.all([
+        listCredentials(tenantId),
+        listProviders(tenantId),
+      ]);
+      return { credentials, providers };
+    },
+    enabled: tenantId !== null,
+  });
+  const query = toAPIQuery(result);
+  const providers = result.data?.providers ?? [];
 
-  useEffect(() => {
+  function reload() {
     if (tenantId === null) return;
-    let cancelled = false;
-    setQuery({ kind: "loading" });
-    Promise.all([listCredentials(tenantId), listProviders(tenantId)])
-      .then(([credentials, providerRows]) => {
-        if (cancelled) return;
-        setProviders(providerRows);
-        setQuery({ kind: "ready", data: credentials });
-      })
-      .catch((cause: unknown) => {
-        if (cancelled) return;
-        if (cause instanceof UnauthenticatedError) {
-          setQuery({ kind: "unauthenticated" });
-          return;
-        }
-        setQuery({ kind: "error", message: describeQueryError(cause), retry: reload });
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [tenantId, reloadKey]);
+    void queryClient.invalidateQueries({ queryKey: tenantKeys.credentials(tenantId) });
+  }
 
   if (tenantId === null) {
     return (
@@ -114,7 +113,7 @@ export function CredentialsSection({ tenantId }: { readonly tenantId: string | n
 
   return (
     <QueryView query={query} label={SETTINGS_STRINGS.credentialsLoadError}>
-      {(credentials) => (
+      {({ credentials }) => (
         <SettingsPanel
           title={SETTINGS_STRINGS.credentialsSectionTitle}
           description={SETTINGS_STRINGS.credentialsSectionDescription}
diff --git a/apps/web/src/settings/grants-section.tsx b/apps/web/src/settings/grants-section.tsx
index 28fde53be..8804d8c1c 100644
--- a/apps/web/src/settings/grants-section.tsx
+++ b/apps/web/src/settings/grants-section.tsx
@@ -28,10 +28,11 @@ import {
 } from "@corbits/react-ui";
 import { grantEffects, grantOrigins } from "@intx/types";
 import type { GrantEffect, GrantOrigin } from "@intx/types";
-import { useEffect, useMemo, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
 
-import type { APIQuery } from "@/lib/api-query";
-import { QueryView, UnauthenticatedError, describeQueryError } from "@/lib/api-query";
+import { QueryView, toAPIQuery } from "@/lib/api-query";
+import { tenantKeys } from "@/query-client";
 import { PRINCIPAL_KIND_LABEL, PRINCIPAL_KIND_ORDER, principalLabel } from "./identity";
 import { expiryIsoFromPreset, expiryLabelFromPreset, grantPreviewSentence } from "./grant-preview";
 import { KindCards } from "./kind-cards";
@@ -85,44 +86,35 @@ type GrantsData = {
 
 export function GrantsSection({ tenantId }: { readonly tenantId: string | null }) {
   const [filters, setFilters] = useState<GrantFilters>({});
-  const [query, setQuery] = useState<APIQuery<GrantsData>>({
-    kind: "loading",
-  });
-  const [reloadKey, setReloadKey] = useState(0);
+  const queryClient = useQueryClient();
   const [createOpen, setCreateOpen] = useState(false);
   const [creating, setCreating] = useState(false);
   const [createError, setCreateError] = useState<string | null>(null);
   const [rowError, setRowError] = useState<string | null>(null);
+  // Filters are part of the key, so narrowing refetches instead of the list
+  // silently keeping the previous filter's rows.
   const filtersKey = JSON.stringify(filters);
 
-  function reload() {
-    setReloadKey((value) => value + 1);
-  }
+  const query = toAPIQuery<GrantsData>(
+    useQuery({
+      queryKey: [...tenantKeys.grants(tenantId ?? "none"), filtersKey],
+      queryFn: async (): Promise<GrantsData> => {
+        if (tenantId === null) return { grants: [], roles: [], principals: [] };
+        const [grants, roles, principals] = await Promise.all([
+          listGrants(tenantId, filters),
+          listRoles(tenantId),
+          listPrincipals(tenantId),
+        ]);
+        return { grants, roles, principals };
+      },
+      enabled: tenantId !== null,
+    }),
+  );
 
-  useEffect(() => {
+  function reload() {
     if (tenantId === null) return;
-    let cancelled = false;
-    setQuery({ kind: "loading" });
-    Promise.all([listGrants(tenantId, filters), listRoles(tenantId), listPrincipals(tenantId)])
-      .then(([grants, roles, principals]) => {
-        if (!cancelled) setQuery({ kind: "ready", data: { grants, roles, principals } });
-      })
-      .catch((cause: unknown) => {
-        if (cancelled) return;
-        if (cause instanceof UnauthenticatedError) {
-          setQuery({ kind: "unauthenticated" });
-          return;
-        }
-        setQuery({
-          kind: "error",
-          message: describeQueryError(cause),
-          retry: reload,
-        });
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [tenantId, reloadKey, filtersKey]);
+    void queryClient.invalidateQueries({ queryKey: tenantKeys.grants(tenantId) });
+  }
 
   if (tenantId === null) {
     return (
diff --git a/apps/web/src/settings/index.ts b/apps/web/src/settings/index.ts
index d60f2d365..fd325b8a8 100644
--- a/apps/web/src/settings/index.ts
+++ b/apps/web/src/settings/index.ts
@@ -28,7 +28,7 @@ export type { PrincipalLabel } from "./identity";
 export { GRANT_RESOURCES, GRANT_ACTIONS } from "./resource-vocabulary";
 export type { GrantResource, GrantAction } from "./resource-vocabulary";
 
-export { useTenancyAccess, probeSectionAccess, coalesceSectionAccess } from "./access";
+export { probeSectionAccess, coalesceSectionAccess } from "./access";
 export type { SectionAccess, TenancyAccess } from "./access";
 
 export {
diff --git a/apps/web/src/settings/people-section.tsx b/apps/web/src/settings/people-section.tsx
index e47f27fc3..1b05c869e 100644
--- a/apps/web/src/settings/people-section.tsx
+++ b/apps/web/src/settings/people-section.tsx
@@ -20,10 +20,11 @@ import {
   TableHeader,
   TableRow,
 } from "@corbits/react-ui";
-import { useEffect, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
 
-import type { APIQuery } from "@/lib/api-query";
-import { QueryView, UnauthenticatedError, describeQueryError } from "@/lib/api-query";
+import { QueryView, toAPIQuery } from "@/lib/api-query";
+import { tenantKeys } from "@/query-client";
 import { reportError } from "@corbits/error-sink";
 import { PRINCIPAL_KIND_LABEL, principalLabel } from "./identity";
 
@@ -59,47 +60,30 @@ type PeopleData = {
 };
 
 export function PeopleSection({ tenantId }: { readonly tenantId: string | null }) {
-  const [query, setQuery] = useState<APIQuery<PeopleData>>({
-    kind: "loading",
-  });
-  const [reloadKey, setReloadKey] = useState(0);
+  const queryClient = useQueryClient();
   const [rowError, setRowError] = useState<string | null>(null);
 
-  function reload() {
-    setReloadKey((value) => value + 1);
-  }
+  // People are the user-kind principals; the role picker needs this tenant's
+  // roles alongside them, so both read under one key every write invalidates.
+  const query = toAPIQuery<PeopleData>(
+    useQuery({
+      queryKey: tenantKeys.principals(tenantId ?? "none"),
+      queryFn: async (): Promise<PeopleData> => {
+        if (tenantId === null) return { people: [], roles: [] };
+        const [principals, roles] = await Promise.all([
+          listPrincipals(tenantId),
+          listRoles(tenantId),
+        ]);
+        return { people: principals.filter((p) => p.kind === "user"), roles };
+      },
+      enabled: tenantId !== null,
+    }),
+  );
 
-  useEffect(() => {
+  function reload() {
     if (tenantId === null) return;
-    let cancelled = false;
-    setQuery({ kind: "loading" });
-    Promise.all([listPrincipals(tenantId), listRoles(tenantId)])
-      .then(([principals, roles]) => {
-        if (!cancelled)
-          setQuery({
-            kind: "ready",
-            data: {
-              people: principals.filter((p) => p.kind === "user"),
-              roles,
-            },
-          });
-      })
-      .catch((cause: unknown) => {
-        if (cancelled) return;
-        if (cause instanceof UnauthenticatedError) {
-          setQuery({ kind: "unauthenticated" });
-          return;
-        }
-        setQuery({
-          kind: "error",
-          message: describeQueryError(cause),
-          retry: reload,
-        });
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [tenantId, reloadKey]);
+    void queryClient.invalidateQueries({ queryKey: tenantKeys.principals(tenantId) });
+  }
 
   if (tenantId === null) {
     return (
diff --git a/apps/web/src/settings/roles-section.tsx b/apps/web/src/settings/roles-section.tsx
index 67a7b0126..d9b24a453 100644
--- a/apps/web/src/settings/roles-section.tsx
+++ b/apps/web/src/settings/roles-section.tsx
@@ -24,10 +24,11 @@ import {
   TableHeader,
   TableRow,
 } from "@corbits/react-ui";
-import { useEffect, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
 
-import type { APIQuery } from "@/lib/api-query";
-import { QueryView, UnauthenticatedError, describeQueryError } from "@/lib/api-query";
+import { QueryView, toAPIQuery } from "@/lib/api-query";
+import { tenantKeys } from "@/query-client";
 import { principalLabel } from "./identity";
 import { SETTINGS_STRINGS } from "./strings";
 import {
@@ -48,41 +49,33 @@ type RolesData = {
 };
 
 export function RolesSection({ tenantId }: { readonly tenantId: string | null }) {
-  const [query, setQuery] = useState<APIQuery<RolesData>>({ kind: "loading" });
-  const [reloadKey, setReloadKey] = useState(0);
+  const queryClient = useQueryClient();
   const [createOpen, setCreateOpen] = useState(false);
   const [creating, setCreating] = useState(false);
   const [createError, setCreateError] = useState<string | null>(null);
   const [rowError, setRowError] = useState<string | null>(null);
 
-  function reload() {
-    setReloadKey((value) => value + 1);
-  }
+  // Roles and principals read together: the assignment table needs both, and
+  // every write below invalidates this one key.
+  const query = toAPIQuery<RolesData>(
+    useQuery({
+      queryKey: tenantKeys.roles(tenantId ?? "none"),
+      queryFn: async (): Promise<RolesData> => {
+        if (tenantId === null) return { roles: [], principals: [] };
+        const [roles, principals] = await Promise.all([
+          listRoles(tenantId),
+          listPrincipals(tenantId),
+        ]);
+        return { roles, principals };
+      },
+      enabled: tenantId !== null,
+    }),
+  );
 
-  useEffect(() => {
+  function reload() {
     if (tenantId === null) return;
-    let cancelled = false;
-    setQuery({ kind: "loading" });
-    Promise.all([listRoles(tenantId), listPrincipals(tenantId)])
-      .then(([roles, principals]) => {
-        if (!cancelled) setQuery({ kind: "ready", data: { roles, principals } });
-      })
-      .catch((cause: unknown) => {
-        if (cancelled) return;
-        if (cause instanceof UnauthenticatedError) {
-          setQuery({ kind: "unauthenticated" });
-          return;
-        }
-        setQuery({
-          kind: "error",
-          message: describeQueryError(cause),
-          retry: reload,
-        });
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [tenantId, reloadKey]);
+    void queryClient.invalidateQueries({ queryKey: tenantKeys.roles(tenantId) });
+  }
 
   if (tenantId === null) {
     return (
diff --git a/apps/web/src/shell/app-shell.tsx b/apps/web/src/shell/app-shell.tsx
index eb3309ab8..0ee4d5251 100644
--- a/apps/web/src/shell/app-shell.tsx
+++ b/apps/web/src/shell/app-shell.tsx
@@ -11,7 +11,7 @@
 // and this component only reads it through the same hooks page code
 // already uses.
 
-import { lazy, Suspense, useEffect, useRef, useState, type ReactNode } from "react";
+import { lazy, Suspense, useRef, useState, type ReactNode, type RefObject } from "react";
 import type { ArtifactSaveState } from "@/library";
 
 import { WorkbenchLoadingState } from "@/chat";
@@ -23,7 +23,6 @@ import { saveArtifactContent } from "./library-artifacts";
 import { APP_ROUTES, matchesRoute } from "../routes";
 import type { SessionUser } from "../session";
 import { StageTopBar } from "./stage-top-bar";
-import { useScrollReset } from "@/shell/layout";
 import {
   useCanvasColumnArtifact,
   useCanvasColumnAvailable,
@@ -55,6 +54,24 @@ function routeLabel(path: string): string {
   return route?.label ?? "Workbench";
 }
 
+/** Route changes must not inherit the previous page's scroll position. Keyed
+ * on the path, so it remounts per route and resets the scroll container as
+ * its ref attaches. */
+function ScrollToTop({
+  containerRef,
+}: {
+  readonly containerRef: RefObject<HTMLDivElement | null>;
+}) {
+  return (
+    <span
+      hidden
+      ref={() => {
+        if (containerRef.current !== null) containerRef.current.scrollTop = 0;
+      }}
+    />
+  );
+}
+
 export function AppShell({
   path,
   user,
@@ -75,51 +92,46 @@ export function AppShell({
   const canvasFocus = useCanvasColumnFocus();
   const { selectedTenantId: tenantId } = useBench();
 
-  // A text-kind artifact's save state (: single-user editing, no
-  // co-edit presence). Resets to a fresh state the moment the open
-  // artifact changes so a stale "Saved · v3" from a previous artifact can
-  // never leak into a newly opened one.
-  const [artifactSaveState, setArtifactSaveState] = useState<ArtifactSaveState>({
-    kind: "read-only",
-  });
-  const artifactSaveStateForId = useRef<string | null>(null);
-  useEffect(() => {
-    if (canvasArtifact === null || canvasArtifact.rendererKind !== "doc") {
-      artifactSaveStateForId.current = null;
-      setArtifactSaveState({ kind: "read-only" });
-      return;
-    }
-    if (artifactSaveStateForId.current === canvasArtifact.id) return;
-    artifactSaveStateForId.current = canvasArtifact.id;
-    setArtifactSaveState(
-      canvasArtifact.canEdit === true ? { kind: "unsaved" } : { kind: "read-only" },
-    );
-  }, [canvasArtifact]);
+  // A text-kind artifact's save state (single-user editing, no co-edit
+  // presence), carried with the id it belongs to: state for any other id is
+  // ignored during render, so a stale "Saved · v3" can never leak into a
+  // newly opened artifact and nothing has to be reset when one changes.
+  const [savedFor, setSavedFor] = useState<{
+    readonly id: string;
+    readonly state: ArtifactSaveState;
+  } | null>(null);
+  const editableArtifact =
+    canvasArtifact !== null && canvasArtifact.rendererKind === "doc" ? canvasArtifact : null;
+  const artifactSaveState: ArtifactSaveState =
+    editableArtifact === null
+      ? { kind: "read-only" }
+      : savedFor?.id === editableArtifact.id
+        ? savedFor.state
+        : editableArtifact.canEdit === true
+          ? { kind: "unsaved" }
+          : { kind: "read-only" };
 
   const saveArtifact = (content: string) => {
-    if (tenantId === null || canvasArtifact === null) return;
-    const artifactId = canvasArtifact.id;
-    setArtifactSaveState({ kind: "saving" });
+    if (tenantId === null || editableArtifact === null) return;
+    const artifactId = editableArtifact.id;
+    const keepIfCurrent = (state: ArtifactSaveState) => {
+      setSavedFor((previous) =>
+        previous === null || previous.id === artifactId ? { id: artifactId, state } : previous,
+      );
+    };
+    setSavedFor({ id: artifactId, state: { kind: "saving" } });
     void saveArtifactContent(tenantId, artifactId, content).then(
       (saved) => {
-        if (artifactSaveStateForId.current !== artifactId) return;
-        setArtifactSaveState({
-          kind: "saved",
-          version: saved.version,
-          savedAt: Date.now(),
-        });
+        keepIfCurrent({ kind: "saved", version: saved.version, savedAt: Date.now() });
       },
       () => {
-        if (artifactSaveStateForId.current !== artifactId) return;
-        setArtifactSaveState({ kind: "unsaved" });
+        keepIfCurrent({ kind: "unsaved" });
       },
     );
   };
   const closeCanvas = useCloseCanvas();
   const toggleCanvasFocus = useToggleCanvasFocus();
   const mainRef = useRef<HTMLDivElement>(null);
-  // Route changes must not inherit the previous page's scroll position.
-  useScrollReset(mainRef, path);
   const pendingCount = usePendingApprovalCount(tenantId);
   const pendingChip =
     pendingCount === null
@@ -135,6 +147,7 @@ export function AppShell({
     <div className="shell-frame">
       <Sidebar path={path} onNavigate={navigate} />
       <div className="shell-main" ref={mainRef}>
+        <ScrollToTop key={path} containerRef={mainRef} />
         <div className="shell-main-content">
           {routeHasNoStageTopBar(path) ? (
             <StageTopBar
diff --git a/apps/web/src/shell/layout/index.ts b/apps/web/src/shell/layout/index.ts
index ad3a55a2f..b660214f1 100644
--- a/apps/web/src/shell/layout/index.ts
+++ b/apps/web/src/shell/layout/index.ts
@@ -33,7 +33,5 @@ export {
 } from "./canvas-column-state";
 export type { CanvasColumnState } from "./canvas-column-state";
 
-export { useScrollReset } from "./use-scroll-reset";
-
 export { createPendingDialogRequest } from "./pending-dialog-request";
 export type { PendingDialogRequest } from "./pending-dialog-request";
diff --git a/apps/web/src/shell/layout/use-scroll-reset.ts b/apps/web/src/shell/layout/use-scroll-reset.ts
deleted file mode 100644
index 6ffc6d636..000000000
--- a/apps/web/src/shell/layout/use-scroll-reset.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// Scroll position is per-route state, not global: landing on a new page
-// should start at the top instead of inheriting however far the previous
-// page was scrolled. This resets the main pane's own scroll container to
-// the top whenever the route changes. Extracted as its own hook so the
-// behaviour is unit-testable without mounting the whole shell.
-
-import { useEffect, type RefObject } from "react";
-
-/** Scrolls `ref` back to the top whenever `dep` changes. No-op while the
- * ref is unattached. */
-export function useScrollReset<T extends Element>(ref: RefObject<T | null>, dep: unknown): void {
-  useEffect(() => {
-    if (ref.current !== null) ref.current.scrollTop = 0;
-    // `ref` is a stable identity; `dep` is what actually triggers a reset.
-  }, [dep]);
-}
diff --git a/apps/web/src/shell/layout/use-shell-layout.ts b/apps/web/src/shell/layout/use-shell-layout.ts
index e64bce673..2223b1c7a 100644
--- a/apps/web/src/shell/layout/use-shell-layout.ts
+++ b/apps/web/src/shell/layout/use-shell-layout.ts
@@ -7,7 +7,7 @@
 // `window`, so it sees the initial "expanded" assumption — which is what a
 // server-rendered shell should assume before it has a viewport to measure.
 
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 
 import {
   NARROW_MAX_WIDTH,
@@ -19,21 +19,32 @@ import {
 const NARROW_QUERY = `(max-width: ${NARROW_MAX_WIDTH - 1}px)`;
 const COMPACT_QUERY = `(max-width: ${COMPACT_MAX_WIDTH - 1}px)`;
 
-export function useShellLayoutMode(): ShellLayoutMode {
-  const [mode, setMode] = useState<ShellLayoutMode>("expanded");
+function subscribe(onChange: () => void): () => void {
+  const narrow = window.matchMedia(NARROW_QUERY);
+  const compact = window.matchMedia(COMPACT_QUERY);
+  narrow.addEventListener("change", onChange);
+  compact.addEventListener("change", onChange);
+  return () => {
+    narrow.removeEventListener("change", onChange);
+    compact.removeEventListener("change", onChange);
+  };
+}
+
+// The snapshot is the mode string itself, so repeated reads compare equal
+// and never loop — a fresh object here would re-render forever.
+function getSnapshot(): ShellLayoutMode {
+  return shellLayoutModeFromMatches(
+    window.matchMedia(NARROW_QUERY).matches,
+    window.matchMedia(COMPACT_QUERY).matches,
+  );
+}
 
-  useEffect(() => {
-    const narrow = window.matchMedia(NARROW_QUERY);
-    const compact = window.matchMedia(COMPACT_QUERY);
-    const sync = () => setMode(shellLayoutModeFromMatches(narrow.matches, compact.matches));
-    sync();
-    narrow.addEventListener("change", sync);
-    compact.addEventListener("change", sync);
-    return () => {
-      narrow.removeEventListener("change", sync);
-      compact.removeEventListener("change", sync);
-    };
-  }, []);
+/** A viewport-less render (the route tests) gets the same "expanded"
+ * assumption a server-rendered shell should make before it can measure. */
+function getServerSnapshot(): ShellLayoutMode {
+  return "expanded";
+}
 
-  return mode;
+export function useShellLayoutMode(): ShellLayoutMode {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
diff --git a/apps/web/src/shell/shell-chrome-provider.tsx b/apps/web/src/shell/shell-chrome-provider.tsx
index feaefba6c..e53660245 100644
--- a/apps/web/src/shell/shell-chrome-provider.tsx
+++ b/apps/web/src/shell/shell-chrome-provider.tsx
@@ -8,7 +8,7 @@
 // plus the shell-only read (`useCanvasColumnOpen`) it needs for its own
 // render.
 
-import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { useCallback, useState, type ReactNode } from "react";
 
 import type { ProfileSubject } from "@/chat";
 import {
@@ -59,42 +59,33 @@ export function ShellChromeProvider({
     initialCanvasColumnState<ProfileSubject, CanvasArtifactContent, RoutinePanelSubject>,
   );
 
-  // Tracks the last workbench scope we applied so a real switch (A→B) can
-  // drop canvas state without treating the initial null→ready resolve as a
-  // switch.
-  const previousTenantIdRef = useRef<string | null>(selectedTenantId);
-  const previousRoutePrefixRef = useRef(inAppRoutePrefix(path));
+  // The last scope and rail surface we applied, adjusted during render
+  // rather than from an effect — the canvas must never paint a frame
+  // holding another workbench's content. The initial null→ready tenant
+  // resolve is not a switch.
+  const [appliedTenantId, setAppliedTenantId] = useState<string | null>(selectedTenantId);
+  const routePrefix = inAppRoutePrefix(path);
+  const [appliedRoutePrefix, setAppliedRoutePrefix] = useState(routePrefix);
 
-  // A switch clears auxiliary canvas content and leaves any conversation
-  // deep link so the stage does not keep a foreign conversation under the
-  // new scope.
-  useEffect(() => {
-    const previousTenantId = previousTenantIdRef.current;
-    if (
-      previousTenantId !== null &&
-      selectedTenantId !== null &&
-      previousTenantId !== selectedTenantId
-    ) {
-      previousTenantIdRef.current = selectedTenantId;
+  if (appliedTenantId !== selectedTenantId) {
+    setAppliedTenantId(selectedTenantId);
+    setAppliedRoutePrefix(routePrefix);
+    if (appliedTenantId !== null && selectedTenantId !== null) {
+      // A switch drops auxiliary canvas content and leaves any conversation
+      // deep link, so the stage never keeps a foreign conversation.
       setCanvasState(clearCanvasForTenantSwitch());
       if (isWorkbenchPath(path) && workbenchIdFromPath(path) !== null) {
-        navigate(workbenchPath(null));
+        // On a microtask so the hop never updates the router mid-render.
+        queueMicrotask(() => navigate(workbenchPath(null)));
       }
-      return;
     }
-    previousTenantIdRef.current = selectedTenantId;
-  }, [path, selectedTenantId, navigate]);
-
-  // Leaving a rail surface dismisses auxiliary canvas content so a compact
-  // viewport that hid the column cannot resurrect it when the shell expands
-  // again. Nested detail and query-only changes share a prefix and keep the
-  // pane.
-  useEffect(() => {
-    const nextPrefix = inAppRoutePrefix(path);
-    if (previousRoutePrefixRef.current === nextPrefix) return;
-    previousRoutePrefixRef.current = nextPrefix;
+  } else if (appliedRoutePrefix !== routePrefix) {
+    // Leaving a rail surface dismisses auxiliary canvas content so a compact
+    // viewport that hid the column cannot resurrect it when the shell
+    // expands again. Nested detail and query-only changes share a prefix.
+    setAppliedRoutePrefix(routePrefix);
     setCanvasState((state) => closeCanvasContent(state));
-  }, [path]);
+  }
 
   const openProfile = useCallback((subject: ProfileSubject) => {
     setCanvasState((state) => openProfileInCanvas(state, subject));
diff --git a/apps/web/src/shell/stage-search.tsx b/apps/web/src/shell/stage-search.tsx
index f3790d393..b733d5684 100644
--- a/apps/web/src/shell/stage-search.tsx
+++ b/apps/web/src/shell/stage-search.tsx
@@ -16,7 +16,7 @@
 // transition duration under `prefers-reduced-motion`.
 
 import { MagnifyingGlass } from "@/lib/icons";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
 export type StageSearchProps = {
   /** Accessible name for both the button and the input, and the default
@@ -30,18 +30,18 @@ export type StageSearchProps = {
 
 export function StageSearch({ label, value, onChange, placeholder }: StageSearchProps) {
   const [open, setOpen] = useState(value.length > 0);
-  const wasOpen = useRef(open);
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
+  // Set only by the button, so a prefilled filter expands the bar without
+  // stealing focus from whatever the page opened with.
+  const openedByClick = useRef(false);
   // A query the page already carries in (a prefilled filter) keeps the bar
   // expanded even before anyone has focused it.
   const expanded = open || value.length > 0;
 
-  useEffect(() => {
-    if (open) inputRef.current?.focus();
-    if (wasOpen.current && !open) buttonRef.current?.focus();
-    wasOpen.current = open;
-  }, [open]);
+  function collapse() {
+    setOpen(false);
+    buttonRef.current?.focus();
+  }
 
   return (
     <div className="stage-search" data-testid="stage-search" data-expanded={expanded}>
@@ -51,13 +51,20 @@ export function StageSearch({ label, value, onChange, placeholder }: StageSearch
         className="stage-search-button"
         aria-label={label}
         aria-expanded={expanded}
-        onClick={() => setOpen(true)}
+        onClick={() => {
+          openedByClick.current = true;
+          setOpen(true);
+        }}
       >
         <MagnifyingGlass aria-hidden="true" />
       </button>
       {expanded ? (
         <input
-          ref={inputRef}
+          ref={(node) => {
+            if (node === null || !openedByClick.current) return;
+            openedByClick.current = false;
+            node.focus();
+          }}
           type="search"
           className="stage-search-input"
           aria-label={label}
@@ -71,7 +78,7 @@ export function StageSearch({ label, value, onChange, placeholder }: StageSearch
             if (event.key !== "Escape") return;
             event.stopPropagation();
             if (value.length > 0) onChange("");
-            else setOpen(false);
+            else collapse();
           }}
         />
       ) : null}