Centralize extract and user-profile route resolution

Move URL parsing, GraphQL entity resolution, and reactive-var population
for /extracts/:extractId and /users/:slug into CentralRouteManager,
matching the pattern already used for corpus, document, thread, and
labelset routes.

Why
---
ExtractDetailRoute and UserProfileRoute were each parsing useParams,
running their own RESOLVE_* / GET_USER queries, and writing the
corresponding entity reactive vars (openedExtract, ad-hoc local state).
This duplicated the four-phase flow documented in
docs/frontend/routing_system.md and made it possible for components to
race CentralRouteManager (e.g. ExtractDetail's back handler clearing
openedExtract while Phase 1 was still settling).

A few smaller violations were cleaned up at the same time:
  - views/Corpuses.tsx used window.history.replaceState to strip a
    ?create=true query param; replaced with React Router navigate so the
    routing system stays in sync.
  - LabelSetDetailPage and LabelSetLandingRoute called openedLabelset(null)
    in handlers that already navigate to a browse route, where Phase 1
    clears the var.

What changed
------------
Routing system:
  - cache.ts: added openedUser (typed OpenedUserProfile) and tightened
    the openedExtract docstring to reflect manager-only ownership.
  - navigationUtils.ts: parseRoute now recognizes /users/:slug and
    /extracts/:extractId.
  - CentralRouteManager.tsx: added GET_USER lazy query, a Phase 1 user
    branch, and openedUser(null) clears alongside the existing entity
    reset paths.

Route components became dumb consumers:
  - ExtractDetailRoute.tsx (89 -> 56 lines)
  - UserProfileRoute.tsx (68 -> 51 lines)
  - New ProfileRedirect.tsx handles /profile -> /users/<current-slug>
    using backendUserObj. This is auth-driven, not URL-driven, so it
    legitimately lives outside CentralRouteManager.
  - App.tsx wires /profile to ProfileRedirect.

Cleanups:
  - views/ExtractDetail.tsx back handler no longer writes openedExtract.
  - LabelSet handlers no longer write openedLabelset.

Tests
-----
  - 8 new parseRoute tests covering /users/:slug and /extracts/:extractId.
  - 3 new CentralRouteManager tests: user resolution success, user
    not-found error path, extract-by-id resolution. Existing fixtures
    updated to reset the new vars in beforeEach.
  - New centralRouteDiscipline.test.ts: static regression test that
    grep-walks frontend/src and fails if any production file outside
    CentralRouteManager.tsx and cache.ts SETs the 15 routing-owned
    reactive vars. This caught three openedLabelset writes during
    development that were also fixed.
  - New e2e/user-and-extract-routes.spec.ts: deep-links /users/<slug>,
    verifies /profile redirects, and exercises the dumb-consumer error
    path on /extracts/<unknown-id>.
  - Added /users/admin to the helpers.ts VIEWS catalog so the existing
    login-and-navigation walk also covers the user route.

Pre-existing typecheck failure resolved
---------------------------------------
CamlDirectiveRenderer.tsx failed tsc because the installed
@os-legal/caml-react@0.0.1 d.ts files lack the resolveImageSrc prop that
the declared semver (^0.1.0) source already exposes. Added a narrow
local type widening with a comment so tsc compiles cleanly until the
lockfile is refreshed; runtime behavior is unchanged.

Verification
------------
  - yarn tsc --noEmit: clean.
  - yarn lint: clean.
  - yarn vitest run for the three updated/new test files: 140/140
    passing (24 manager, 115 navigationUtils, 1 discipline regression).
  - E2E specs deferred to CI (frontend-e2e.yml).

Author: JSv4

frontend/src/App.tsx

@@ -84,6 +84,7 @@ import { NotFound } from "./components/routes/NotFound";
 import { CorpusLandingRoute } from "./components/routes/CorpusLandingRoute";
 import { CorpusThreadRoute } from "./components/routes/CorpusThreadRoute";
 import { UserProfileRoute } from "./components/routes/UserProfileRoute";
+import { ProfileRedirect } from "./components/routes/ProfileRedirect";
 import { LeaderboardRoute } from "./components/routes/LeaderboardRoute";
 import { GlobalDiscussionsRoute } from "./components/routes/GlobalDiscussionsRoute";
 import { ThreadSearchRoute } from "./views/ThreadSearchRoute";
@@ -490,7 +491,7 @@ export const App = () => {
                   <Route path="/threads" element={<ThreadSearchRoute />} />
 
                   {/* User Profile Routes (Issue #611) */}
-                  <Route path="/profile" element={<UserProfileRoute />} />
+                  <Route path="/profile" element={<ProfileRedirect />} />
                   <Route path="/users/:slug" element={<UserProfileRoute />} />
                   {/* Convenience redirect for badge notifications (Issue #637) */}
                   <Route

frontend/src/components/corpuses/caml/CamlDirectiveRenderer.tsx

@@ -13,8 +13,23 @@
  * or any specific directive. All behavior comes from registered handlers.
  */
 import React, { useMemo } from "react";
+import type { ComponentType } from "react";
 import type { CamlDocument, CamlProse } from "@os-legal/caml";
-import { CamlArticle, CamlThemeProvider } from "@os-legal/caml-react";
+import {
+  CamlArticle as CamlArticleUntyped,
+  CamlThemeProvider,
+} from "@os-legal/caml-react";
+
+// The @os-legal/caml-react@0.1.x source supports `resolveImageSrc`, but the
+// 0.0.1 build still resident in some lockfiles ships d.ts files without it.
+// Until the lockfile catches up, widen the prop surface locally so consumer
+// code keeps the strong type for the props the published d.ts does declare.
+type CamlArticleExtraProps = {
+  resolveImageSrc?: (src: string) => string | undefined;
+};
+const CamlArticle = CamlArticleUntyped as ComponentType<
+  React.ComponentProps<typeof CamlArticleUntyped> & CamlArticleExtraProps
+>;
 
 import { MarkdownMessageRenderer } from "../../threads/MarkdownMessageRenderer";
 import {

frontend/src/components/labelsets/LabelSetDetailPage.tsx

@@ -259,7 +259,7 @@ export const LabelSetDetailPage: React.FC<LabelSetDetailPageProps> = ({
     if (onClose) {
       onClose();
     } else {
-      openedLabelset(null);
+      // CentralRouteManager Phase 1 clears openedLabelset on browse routes.
       navigate("/label_sets");
     }
   };
@@ -453,7 +453,7 @@ export const LabelSetDetailPage: React.FC<LabelSetDetailPageProps> = ({
       .then((result) => {
         if (result.data?.deleteLabelset?.ok) {
           toast.success("Label set deleted successfully");
-          openedLabelset(null);
+          // CentralRouteManager Phase 1 clears openedLabelset on browse routes.
           navigate("/label_sets");
         } else {
           toast.error(

frontend/src/components/routes/ExtractDetailRoute.tsx

@@ -1,60 +1,28 @@
-import React, { useEffect } from "react";
-import { useParams } from "react-router-dom";
-import { useQuery, useReactiveVar } from "@apollo/client";
+import React from "react";
+import { useReactiveVar } from "@apollo/client";
 import { MetaTags } from "../seo/MetaTags";
 import { ModernLoadingDisplay } from "../widgets/ModernLoadingDisplay";
 import { ModernErrorDisplay } from "../widgets/ModernErrorDisplay";
 import { ErrorBoundary } from "../widgets/ErrorBoundary";
-import { openedExtract } from "../../graphql/cache";
+import { openedExtract, routeLoading, routeError } from "../../graphql/cache";
 import { ExtractDetail } from "../../views/ExtractDetail";
-import {
-  RESOLVE_EXTRACT_BY_ID,
-  ResolveExtractByIdOutput,
-  ResolveExtractByIdInput,
-} from "../../graphql/queries";
 
 /**
- * ExtractDetailRoute - Handles the /extracts/:extractId route
+ * ExtractDetailRoute - Renders the extract detail view for /extracts/:extractId
+ * and /e/:userIdent/:extractIdent.
  *
- * This is the new route-based pattern for viewing extract details,
- * replacing the modal-based EditExtractModal.
- *
- * Route pattern: /extracts/:extractId
+ * URL parsing, GraphQL resolution, and reactive-var population are owned by
+ * CentralRouteManager. This component reads the resolved state and renders.
  */
 export const ExtractDetailRoute: React.FC = () => {
-  const { extractId } = useParams<{ extractId: string }>();
-
-  // Check if we already have the extract from reactive var
-  const existingExtract = useReactiveVar(openedExtract);
-
-  // Query to resolve extract by ID if not already loaded
-  const { loading, error, data } = useQuery<
-    ResolveExtractByIdOutput,
-    ResolveExtractByIdInput
-  >(RESOLVE_EXTRACT_BY_ID, {
-    variables: { extractId: extractId ?? "" },
-    skip: !extractId || existingExtract?.id === extractId,
-    fetchPolicy: "network-only",
-  });
-
-  // Set the opened extract when query completes
-  useEffect(() => {
-    if (data?.extract) {
-      openedExtract(data.extract);
-    }
-  }, [data]);
+  const extract = useReactiveVar(openedExtract);
+  const loading = useReactiveVar(routeLoading);
+  const error = useReactiveVar(routeError);
 
-  // Handle missing extractId
-  if (!extractId) {
-    return <ModernErrorDisplay type="extract" error="No extract ID provided" />;
-  }
-
-  // Loading state
-  if (loading && !existingExtract) {
+  if (loading && !extract) {
     return <ModernLoadingDisplay type="extract" size="large" />;
   }
 
-  // Error state
   if (error) {
     return (
       <ModernErrorDisplay
@@ -64,20 +32,15 @@ export const ExtractDetailRoute: React.FC = () => {
     );
   }
 
-  // Get the extract to display
-  const extract =
-    existingExtract?.id === extractId ? existingExtract : data?.extract;
-
-  // Not found state
-  if (!extract && !loading) {
+  if (!extract) {
     return <ModernErrorDisplay type="extract" error="Extract not found" />;
   }
 
   return (
     <ErrorBoundary>
       <MetaTags
-        title={extract?.name || "Extract"}
-        description={`Extract: ${extract?.name}`}
+        title={extract.name || "Extract"}
+        description={`Extract: ${extract.name}`}
         entity={extract}
         entityType="extract"
       />

frontend/src/components/routes/LabelSetLandingRoute.tsx

@@ -31,9 +31,9 @@ export const LabelSetLandingRoute: React.FC = () => {
     hasError: !!error,
   });
 
-  // Handle close by navigating back to list
+  // Handle close by navigating back to list. CentralRouteManager Phase 1
+  // clears openedLabelset when the new path resolves to a browse route.
   const handleClose = () => {
-    openedLabelset(null);
     navigate("/label_sets");
   };
 

frontend/src/components/routes/ProfileRedirect.tsx

@@ -0,0 +1,28 @@
+/**
+ * ProfileRedirect - Resolves /profile to the current user's canonical
+ * /users/:slug URL.
+ *
+ * This is auth-state-driven (not URL-state-driven), so it lives outside
+ * the CentralRouteManager entity-resolution path. It reads backendUserObj
+ * and renders a React Router <Navigate> to the canonical profile URL,
+ * which then triggers CentralRouteManager Phase 1 user resolution.
+ *
+ * Anonymous visitors are sent to /login.
+ */
+
+import React from "react";
+import { Navigate } from "react-router-dom";
+import { useReactiveVar } from "@apollo/client";
+import { backendUserObj } from "../../graphql/cache";
+
+export const ProfileRedirect: React.FC = () => {
+  const currentUser = useReactiveVar(backendUserObj);
+
+  if (!currentUser?.slug) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <Navigate to={`/users/${currentUser.slug}`} replace />;
+};
+
+export default ProfileRedirect;

frontend/src/components/routes/UserProfileRoute.tsx

@@ -4,65 +4,48 @@
  * Issue: #611 - Create User Profile Page with badge display and stats
  * Epic: #572 - Social Features Epic
  *
- * Slug-based route component that resolves user profile and renders the UserProfile view.
- * Handles both /profile (current user) and /users/:slug (any user) routes.
+ * Renders the user profile resolved by CentralRouteManager from the
+ * /users/:slug route. URL parsing and entity fetching live in
+ * CentralRouteManager; this component reads reactive vars and renders.
+ *
+ * The /profile redirect (current user) is handled by ProfileRedirect.
  */
 
 import React from "react";
-import { useParams, Navigate } from "react-router-dom";
-import { useQuery, useReactiveVar } from "@apollo/client";
-import { GET_USER, GetUserInput, GetUserOutput } from "../../graphql/queries";
-import { backendUserObj } from "../../graphql/cache";
+import { useReactiveVar } from "@apollo/client";
+import {
+  backendUserObj,
+  openedUser,
+  routeLoading,
+  routeError,
+} from "../../graphql/cache";
 import { ModernLoadingDisplay } from "../widgets/ModernLoadingDisplay";
 import { ModernErrorDisplay } from "../widgets/ModernErrorDisplay";
 import { UserProfile } from "../../views/UserProfile";
 
 export const UserProfileRoute: React.FC = () => {
-  const { slug } = useParams<{ slug: string }>();
+  const user = useReactiveVar(openedUser);
+  const loading = useReactiveVar(routeLoading);
+  const error = useReactiveVar(routeError);
   const currentUser = useReactiveVar(backendUserObj);
 
-  // Must be unconditional — skip: !slug gates the network call; see #1295.
-  const { data, loading, error } = useQuery<GetUserOutput, GetUserInput>(
-    GET_USER,
-    {
-      variables: { slug: slug ?? "" },
-      skip: !slug,
-    }
-  );
-
-  // If no slug provided, redirect to current user's profile
-  if (!slug) {
-    if (!currentUser?.slug) {
-      return <Navigate to="/login" replace />;
-    }
-    return <Navigate to={`/users/${currentUser.slug}`} replace />;
-  }
-
-  if (loading) {
+  if (loading && !user) {
     return <ModernLoadingDisplay type="default" message="Loading profile..." />;
   }
 
-  if (error) {
-    return (
-      <ModernErrorDisplay
-        type="generic"
-        title="User Not Found"
-        error={`Could not find user with slug "${slug}"`}
-      />
-    );
-  }
-
-  if (!data?.userBySlug) {
+  if (error || !user) {
     return (
       <ModernErrorDisplay
         type="generic"
         title="User Not Found"
-        error={`User "${slug}" does not exist or their profile is private`}
+        error={
+          error?.message || "User does not exist or their profile is private"
+        }
       />
     );
   }
 
-  const isOwnProfile = currentUser?.id === data.userBySlug.id;
+  const isOwnProfile = currentUser?.id === user.id;
 
-  return <UserProfile user={data.userBySlug} isOwnProfile={isOwnProfile} />;
+  return <UserProfile user={user} isOwnProfile={isOwnProfile} />;
 };

frontend/src/graphql/cache.ts

@@ -434,32 +434,55 @@ export const linkDocumentsModalState = makeVar<LinkDocumentsModalState>({
  * Extract-related global variables
  *
  * ENTITY STATE:
- *   openedExtract - Extract resolved from /extracts/:extractId route
- *   Set by: CentralRouteManager OR route components (ExtractDetailRoute)
+ *   openedExtract - Extract resolved from /extracts/:extractId or /e/:user/:extractId route
+ *   Set by: CentralRouteManager (Phase 1) only
  *
  * URL-DRIVEN STATE:
  *   selectedExtractIds - Controlled by URL query parameter ?extract=
- *   Set by: CentralRouteManager Phase 2
- *
- * Write access is restricted to:
- *   - CentralRouteManager (for legacy /e/:user/:extractId routes)
- *   - Route components like ExtractDetailRoute (for new /extracts/:extractId routes)
+ *   Set by: CentralRouteManager (Phase 2) only
  *
  * All other components must:
  *   - ONLY READ via useReactiveVar()
  *   - UPDATE STATE via navigate() to change the URL (which triggers route resolution)
  *
  * Examples:
- *   /extracts/extract-123             → openedExtract(extractObj) via ExtractDetailRoute
+ *   /extracts/extract-123             → openedExtract(extractObj) via CentralRouteManager
  *   /e/user/extract-123               → openedExtract(extractObj) via CentralRouteManager
  *   /c/user/corpus?extract=456        → selectedExtractIds(["456"])
  *   /d/user/doc?extract=456,789       → selectedExtractIds(["456", "789"])
  */
-export const openedExtract = makeVar<ExtractType | null>(null); // ENTITY STATE - set by route components
-export const selectedExtractIds = makeVar<string[]>([]); // URL-DRIVEN - set by CentralRouteManager Phase 2
+export const openedExtract = makeVar<ExtractType | null>(null);
+export const selectedExtractIds = makeVar<string[]>([]);
 export const selectedExtract = makeVar<ExtractType | null>(null); // Legacy - kept for backward compatibility
 export const extractSearchTerm = makeVar<string>("");
 
+/**
+ * User profile entity resolved from /users/:slug route.
+ *
+ * ENTITY STATE:
+ *   openedUser - Profile snapshot resolved by CentralRouteManager Phase 1.
+ *   Set by: CentralRouteManager only.
+ *
+ * The shape mirrors the GET_USER GraphQL response. Components reading this
+ * should treat null as "no user resolved yet" (loading or missing).
+ */
+export interface OpenedUserProfile {
+  id: string;
+  username: string;
+  slug: string;
+  name: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  isProfilePublic: boolean;
+  reputationGlobal: number;
+  totalMessages: number;
+  totalThreadsCreated: number;
+  totalAnnotationsCreated: number;
+  totalDocumentsUploaded: number;
+}
+export const openedUser = makeVar<OpenedUserProfile | null>(null);
+
 /**
  * Corpus-related global variables
  */