@gogitcms/editor 0.23.0

package/app/src/App.tsx

@@ -0,0 +1,2665 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Pressable, View } from "react-native";
+import { ApolloProvider, useMutation, useQuery, useSubscription, useApolloClient } from "@apollo/client";
+import {
+  ThemeProvider,
+  Screen,
+  TopBar,
+  Text,
+  Input,
+  Button,
+  IconButton,
+  Icon,
+  Avatar,
+  ThemeToggle,
+  ContentBrowser,
+  ContentBrowserSkeleton,
+  BranchImportingScreen,
+  BranchImportFailedScreen,
+  ChangeRequestSummary,
+  NotificationList,
+  useTheme,
+  useThemeMode,
+  type CmsNavSection,
+  type CmsEntry,
+  type OpenTab,
+  type NotificationItem,
+} from "@gogitcms/design-system";
+import { createMarkdownRenderField } from "@gogitcms/markdown-editor";
+import {
+  PluginScreenHost,
+  createPluginRenderField,
+  parsePluginNavKey,
+  pluginNavKey,
+  usePluginRegistry,
+  type PluginDocument,
+  type PluginTabSpec,
+} from "@gogitcms/plugin-sdk";
+import { pluginRegistry } from "./plugins";
+import {
+  DraftBus,
+  PluginDocumentActions,
+  PluginTabBody,
+  pluginTabId,
+  type PluginTabRef,
+} from "./previewHost";
+import { useDocCollab, type DocCollab } from "@gogitcms/realtime";
+import { client, setAuthToken, getAuthToken } from "./apollo";
+import { config, analyticsConfig } from "./config";
+import { AnalyticsEvent, AnalyticsProvider, useAnalytics, useIdentify } from "@gogitcms/analytics";
+import { beginAuthorize, beginLogout, beginGitHub, brokeredToken, handleCallback, requestMagicLink, redeemMagicLink, isSignedOut, clearSignedOut } from "./auth";
+import { useNavigation, useRoute, StackActions } from "@react-navigation/native";
+import { NavigationRoot, RootStack, EMPTY_SELECTION, browserUrl, type BrowserParams, type CmsSelection } from "./navigation";
+import { isMediaNavKey, MEDIA_NAV_KEY } from "@gogitcms/design-system";
+import { LOGIN, WORKSPACES, REPOSITORIES, COLLECTIONS, DOCUMENTS, DOCUMENT_COUNT, DOCUMENT, ME, NOTIFICATIONS, MARK_NOTIFICATIONS_READ, UPDATE_DOCUMENT, CREATE_DOCUMENT, DELETE_DOCUMENTS, RENAME_DOCUMENT, MOVE_DOCUMENTS, BRANCH_CHANGE_SUMMARY, BRANCH_CHANGES, BRANCH_CHANGE, BRANCH_MEDIA_CHANGES, CREATE_BRANCH, APPLY_CHANGES, MERGE_RUN_PROGRESS, RESOLVE_MERGE_CONFLICT, OPEN_CHANGE_REQUEST, CHANGE_REQUEST, CHANGE_REQUEST_FOR_BRANCH, CREATE_CHANGE_REQUEST, BRANCH_IMPORT, BRANCH_IMPORT_PROGRESS } from "./queries";
+import type { EntryField, FacetField, DocFilter, SegmentItem, BranchRef, ProjectRef, DocumentChange, FieldChange, FieldChangeKind, MergeProgress, FieldConflict as FieldConflictT } from "@gogitcms/design-system";
+import { useMediaApi } from "./media";
+
+// How many documents to fetch per page of the (server-paginated) entry list.
+const PAGE_SIZE = 50;
+
+type Branch = {
+  id: string;
+  name: string;
+  protected: boolean;
+  // True when this branch carries projects the viewer can edit AND projects they
+  // cannot: merging it would publish content they were never allowed to touch,
+  // so it has to go through review. See docs/projects.md §9.2.
+  requiresChangeRequest?: boolean;
+  // The projects on this branch the viewer may edit.
+  writableProjects?: string[];
+};
+type Workspace = { id: string; name: string; slug: string };
+type Project = { name: string; label: string; orphaned: boolean };
+type Repository = { id: string; owner: string; name: string; branches: Branch[]; defaultBranch: string; projects?: Project[] };
+
+// Resolve which project to open, and whether the choice is the user's to make.
+//
+// Three inputs, in precedence order:
+//   1. config.project — a self-hosted editor pinned to one project. It wins over
+//      the URL: a locked deployment must not be steerable by editing an address.
+//   2. the URL's `projects/{name}` segment.
+//   3. the repository's only project, which is every repository without a
+//      manifest — and is why an editor that has never seen a manifest shows no
+//      project affordance at all.
+//
+// An orphaned project (on no branch) is still openable by name: it has content
+// in the database, and hiding the only route to it would strand that content.
+function resolveProject(repo: Repository | undefined, urlName?: string) {
+  const projects = (repo?.projects ?? []).filter((p) => !p.orphaned);
+  const sole = projects.length === 1 ? projects[0] : undefined;
+  const locked = config.project;
+
+  if (locked !== undefined) {
+    const match = (repo?.projects ?? []).find((p) => p.name === locked);
+    // A lock naming a project this repository doesn't have is a configuration
+    // error, not a reason to silently show another project's content.
+    return { name: locked, project: match, projects, sole, locked: true, missing: !match };
+  }
+  const name = urlName ?? sole?.name;
+  const match = name === undefined ? undefined : (repo?.projects ?? []).find((p) => p.name === name);
+  return { name, project: match, projects, sole, locked: false, missing: name !== undefined && !match };
+}
+
+// One changed document, from the branchChanges query.
+type BranchChange = {
+  status: "A" | "M" | "D" | "R";
+  collection: string;
+  path: string;
+  previousPath?: string | null;
+  label: string;
+  added: number;
+  removed: number;
+  documentId?: string | null;
+};
+// One field conflict on a merge run, from the merge API.
+type MergeConflictT = {
+  id: string;
+  path: string;
+  collection: string;
+  field: string;
+  isBody: boolean;
+  before?: unknown;
+  after?: unknown;
+  resolution?: string | null;
+};
+type ChangeSummary = {
+  // The project this collection belongs to. Two projects on one branch may both
+  // declare a "pages" collection, so a row is only identified by the pair — and
+  // the changes sidebar groups on this when a branch spans more than one.
+  project: string;
+  collection: string;
+  label?: string | null;
+  singleton: boolean;
+  count: number;
+  // "content" | "media". Media is not a content model, so it is keyed off this
+  // rather than off the collection name, which a real model could collide with.
+  kind: string;
+};
+
+// One branch's version of a changed media file; null on the side it doesn't
+// exist (an addition has no before, a deletion no after).
+type MediaSide = {
+  size: number;
+  mimeType: string;
+  kind: string;
+  width?: number | null;
+  height?: number | null;
+  pending: boolean;
+  // Short-lived authorized read URL; null when this deployment has no object
+  // store. A deleted file has one only on its `before` side.
+  url?: string | null;
+};
+type MediaChange = {
+  status: "A" | "M" | "D" | "R";
+  set: string;
+  path: string;
+  previousPath?: string | null;
+  before?: MediaSide | null;
+  after?: MediaSide | null;
+};
+
+// Human-readable file size, for the media change detail.
+const formatSize = (bytes: number): string => {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let n = bytes / 1024;
+  let i = 0;
+  while (n >= 1024 && i < units.length - 1) {
+    n /= 1024;
+    i++;
+  }
+  return `${n < 10 ? n.toFixed(1) : Math.round(n)} ${units[i]}`;
+};
+
+// A media file has no fields to diff, so its "before/after" is the file's own
+// properties. Presenting them through the same DocumentChange shape lets the
+// changes detail pane render an asset without a second component — and these
+// really are what changed about the file.
+const mediaChangeToDocument = (c: MediaChange): DocumentChange => {
+  // A side that doesn't exist is not a side that changed. An added file has no
+  // "before", so every property is `added` — rendering it as a change would put
+  // a red removed row against a value that never existed.
+  const kindFor = (before: string | undefined, after: string | undefined): FieldChangeKind => {
+    if (!c.before) return "added";
+    if (!c.after) return "removed";
+    return before === after ? "unchanged" : "changed";
+  };
+  const row = (name: string, label: string, pick: (s: MediaSide) => string): FieldChange => {
+    const before = c.before ? pick(c.before) : undefined;
+    const after = c.after ? pick(c.after) : undefined;
+    return { name, label, kind: kindFor(before, after), before, after };
+  };
+  return {
+    path: c.path,
+    previousPath: c.previousPath ?? undefined,
+    status: c.status,
+    label: c.path.split("/").pop() ?? c.path,
+    // A binary file has no line diff; the preview and metadata are the story.
+    added: 0,
+    removed: 0,
+    // The asset itself. `afterUrl` is absent for a deletion, which is what stops
+    // the pane previewing a file this branch removed.
+    preview: {
+      kind: c.after?.kind ?? c.before?.kind,
+      beforeUrl: c.before?.url,
+      afterUrl: c.after?.url,
+    },
+    fields: [
+      row("type", "Type", (s) => s.mimeType),
+      row("size", "Size", (s) => formatSize(s.size)),
+      row("dimensions", "Dimensions", (s) => (s.width && s.height ? `${s.width} × ${s.height}` : "—")),
+    ],
+  };
+};
+type FieldVariantDef = { name: string; label?: string | null; fields: FieldDef[] };
+type FieldDef = {
+  name: string; label?: string | null; type: string; required: boolean;
+  component?: string | null; source?: string | null; format?: string | null; flavor?: string | null;
+  media?: string | null; storeAs?: string | null;
+  of?: string | null; fields?: FieldDef[] | null; variants?: FieldVariantDef[] | null;
+  pattern?: string | null; enumValues?: string[] | null; discriminator?: string | null;
+  min?: number | null; max?: number | null; minItems?: number | null; maxItems?: number | null;
+};
+type Collection = {
+  name: string; label?: string | null; path: string; singleton: boolean; documentCount: number;
+  filename?: string | null; canCreate: boolean; canUpdate: boolean; canDelete: boolean; fields: FieldDef[];
+};
+type DocumentT = { id: string; path: string; label: string; fields: Record<string, unknown> | null; body?: string | null };
+// An open desktop tab: a document id + the collection it belongs to.
+// An open desktop column. `plugin` set → the column renders a plugin route
+// instead of a document, and `id` is the synthetic plugin tab id rather than a
+// document id. Both kinds share one list so ordering, drag-reorder and close
+// stay a single implementation.
+type TabRef = { id: string; collection: string; plugin?: PluginTabRef };
+
+// The collection `label` is a Handlebars template ({{title}}) for document
+// titles, not a display name — the sidebar/headers use a capitalized name.
+const titleCase = (s: string) =>
+  s.replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+
+// globBase returns a collection glob's wildcard-free base directory (e.g.
+// "pages/**/*.md" → "pages"), the folder-tree root the content browser strips
+// from each document path when drilling into a hierarchical collection.
+const globBase = (glob: string): string => {
+  const base: string[] = [];
+  for (const seg of glob.split("/")) {
+    if (/[*?[{]/.test(seg)) break;
+    base.push(seg);
+  }
+  return base.join("/");
+};
+
+// A document's `path` is its full repo path, which begins with the collection
+// glob's base directory (e.g. "pages/foo.yaml" for "pages/**/*.yaml"). The URL
+// already carries the collection as its own segment, so the item path is stored
+// relative to that base — otherwise the base repeats (".../pages/pages/foo.yaml").
+// toRelItemPath strips the base for the URL; toFullPath rejoins it for matching
+// against a document's full path. (globBase is "" when the glob has no static
+// base, in which case both are no-ops.)
+const toRelItemPath = (collectionGlob: string, fullPath: string): string => {
+  const base = globBase(collectionGlob);
+  return base && fullPath.startsWith(base + "/") ? fullPath.slice(base.length + 1) : fullPath;
+};
+const toFullPath = (collectionGlob: string, relPath: string): string => {
+  const base = globBase(collectionGlob);
+  return base && relPath ? `${base}/${relPath}` : relPath;
+};
+
+// toEntryField maps a collection FieldDef + a value into the design-system's
+// EntryField, carrying every validation constraint. Both the edit form (entries)
+// and the create form (createFields) use it, so their rules can't drift apart.
+const toEntryField = (f: FieldDef, value: unknown): EntryField => ({
+  name: f.name,
+  label: f.label ?? undefined,
+  type: f.type,
+  component: f.component ?? undefined,
+  source: f.source ?? undefined,
+  format: f.format ?? undefined,
+  flavor: f.flavor ?? undefined,
+  media: f.media ?? undefined,
+  storeAs: f.storeAs ?? undefined,
+  of: f.of ?? undefined,
+  discriminator: f.discriminator ?? undefined,
+  // Nested object/array children and mixed-list variants carry no value of their
+  // own — the parent's value holds the nested data; children only supply defs.
+  fields: f.fields ? f.fields.map((c) => toEntryField(c, undefined)) : undefined,
+  variants: f.variants
+    ? f.variants.map((v) => ({ name: v.name, label: v.label ?? undefined, fields: v.fields.map((c) => toEntryField(c, undefined)) }))
+    : undefined,
+  value,
+  required: f.required,
+  pattern: f.pattern ?? undefined,
+  enumValues: f.enumValues ?? undefined,
+  min: f.min ?? undefined,
+  max: f.max ?? undefined,
+  minItems: f.minItems ?? undefined,
+  maxItems: f.maxItems ?? undefined,
+});
+
+// Choices-first sign-in matching the dashboard: the landing shows magic-link,
+// GitHub, and "Continue with Email"; the latter reveals the email/password form
+// with a Back button. Magic-link reveals an email field, then a code field.
+function Login({ onDone }: { onDone: (token: string) => void }) {
+  const t = useTheme();
+  const [mode, setMode] = useState<"choices" | "email" | "magic-link">("choices");
+  // "" rather than undefined: these back controlled <Input>s, and an undefined
+  // value makes React treat the field as uncontrolled until the first keystroke.
+  // The `if (!email)` guards below read an empty string the same way.
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [sent, setSent] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [login, { loading }] = useMutation(LOGIN, {
+    onCompleted: (data) => onDone(data.login.accessToken),
+    onError: () => setError("Login failed — check your credentials."),
+  });
+
+  function backToChoices() {
+    setMode("choices"); setSent(false); setError("");
+  }
+
+  async function onSendMagicLink() {
+    if (!email) return;
+    setError(""); setBusy(true);
+    try {
+      await requestMagicLink(email);
+      setSent(true);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not send the sign-in link.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function onVerifyCode() {
+    if (!code) return;
+    setError(""); setBusy(true);
+    try {
+      onDone(await redeemMagicLink(code.trim()));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Invalid or expired code.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Screen center testID="login-screen">
+      <View style={{ width: "100%", maxWidth: 360, alignSelf: "center", gap: t.space(4) }}>
+        <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
+          <Text variant="mono" weight="semibold">Go·Git CMS</Text>
+          <ThemeToggle size="sm" />
+        </View>
+        <Text variant="h2">Sign in</Text>
+
+        {mode === "choices" ? (
+          <>
+            <Button title="Email me a sign-in link" variant="primary" fullWidth onPress={() => setMode("magic-link")} testID="login-magic-link" />
+            <Button title="Continue with GitHub" variant="default" fullWidth onPress={beginGitHub} testID="login-github" />
+            <Button title="Continue with Email" variant="default" fullWidth onPress={() => setMode("email")} testID="login-continue-email" />
+          </>
+        ) : mode === "email" ? (
+          <>
+            <Input label="Email" value={email} onChangeText={setEmail} placeholder="Enter your email" testID="login-email" />
+            <Input label="Password" value={password} onChangeText={setPassword} placeholder="Enter your password" secureTextEntry testID="login-password" />
+            {error ? <Text variant="sm" color={t.color.diffDelFg} testID="login-error">{error}</Text> : null}
+            <Button
+              title={loading ? "Signing in…" : "Sign in"}
+              variant="primary"
+              fullWidth
+              onPress={() => { setError(""); login({ variables: { email, password } }); }}
+              testID="login-submit"
+            />
+            <Button title="Back" variant="ghost" fullWidth onPress={backToChoices} testID="login-back" />
+          </>
+        ) : (
+          <>
+            {!sent ? (
+              <>
+                <Input label="Email" value={email} onChangeText={setEmail} placeholder="Enter your email" testID="login-email" />
+                <Button title={busy ? "Sending…" : "Email me a sign-in link"} variant="primary" fullWidth onPress={onSendMagicLink} testID="login-send-magic-link" />
+              </>
+            ) : (
+              <>
+                <Text variant="sm" color="secondary">We emailed a code to {email}. Enter it below.</Text>
+                <Input label="Sign-in code" value={code} onChangeText={setCode} placeholder="Enter the code" testID="login-magic-code" />
+                <Button title={busy ? "Verifying…" : "Verify code"} variant="primary" fullWidth onPress={onVerifyCode} testID="login-verify-code" />
+              </>
+            )}
+            {error ? <Text variant="sm" color={t.color.diffDelFg} testID="login-error">{error}</Text> : null}
+            <Button title="Back" variant="ghost" fullWidth onPress={backToChoices} testID="login-back" />
+          </>
+        )}
+      </View>
+    </Screen>
+  );
+}
+
+// initialsOf builds a 1–2 letter monogram for the workspace avatar in the topbar.
+function initialsOf(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
+// WorkspaceSlot is the topbar's left affordance. It renders inside TopBar's dark
+// ThemeScope, so useTheme here resolves to the dark chrome palette (keeping the
+// chevron legible). With a workspace it shows the monogram + name and, when
+// onChangeWorkspace is given, is tappable to switch; without one it shows the
+// "no workspace selected" state at the root of the selection flow.
+function WorkspaceSlot({
+  workspaceName,
+  onChangeWorkspace,
+}: {
+  workspaceName?: string;
+  onChangeWorkspace?: () => void;
+}) {
+  const t = useTheme();
+  if (!workspaceName) {
+    return <Text variant="body" color="tertiary" testID="topbar-no-workspace">No workspace selected</Text>;
+  }
+  return (
+    <Pressable
+      onPress={onChangeWorkspace}
+      disabled={!onChangeWorkspace}
+      style={{ flexDirection: "row", alignItems: "center", gap: 8 }}
+      testID="topbar-workspace"
+    >
+      <Avatar initials={initialsOf(workspaceName)} size={24} />
+      <Text variant="body" weight="semibold" numberOfLines={1}>{workspaceName}</Text>
+      {onChangeWorkspace ? <Icon name="chevronDown" size={12} color={t.color.textTertiary} /> : null}
+    </Pressable>
+  );
+}
+
+// EditorTopBar is the persistent editor chrome for the workspace → repository →
+// branch selection screens, so the current workspace and sign-out are always
+// reachable — not only once a repository is open (where ContentBrowser renders
+// its own equivalent bar). It reuses the shared dark TopBar for visual parity.
+function EditorTopBar({
+  workspaceName,
+  onChangeWorkspace,
+  onSignOut,
+}: {
+  workspaceName?: string;
+  onChangeWorkspace?: () => void;
+  onSignOut: () => void;
+}) {
+  return (
+    <TopBar
+      left={<WorkspaceSlot workspaceName={workspaceName} onChangeWorkspace={onChangeWorkspace} />}
+      right={
+        <>
+          <ThemeToggle size="sm" />
+          <IconButton name="logOut" onPress={onSignOut} size="sm" label="Sign out" testID="topbar-signout" />
+          <Avatar initials="ED" size={28} />
+        </>
+      }
+    />
+  );
+}
+
+function WorkspacePicker({
+  workspaces,
+  loading,
+  error,
+  onPick,
+  onSignOut,
+}: {
+  workspaces: Workspace[];
+  loading: boolean;
+  error: boolean;
+  onPick: (workspace: Workspace) => void;
+  onSignOut: () => void;
+}) {
+  const t = useTheme();
+  return (
+    <View style={{ flex: 1 }}>
+      <EditorTopBar onSignOut={onSignOut} />
+      <Screen center testID="workspace-picker">
+      <View style={{ width: "100%", maxWidth: 520, alignSelf: "center", gap: t.space(4) }}>
+        <Text variant="h2">Choose a workspace</Text>
+        {loading ? <Text color="secondary">Loading workspaces…</Text> : null}
+        {error ? <Text color={t.color.diffDelFg}>Could not load workspaces.</Text> : null}
+        {!loading && workspaces.length === 0 ? (
+          <Text color="secondary">You don’t belong to any workspaces yet.</Text>
+        ) : null}
+        {workspaces.map((w) => (
+          <Button
+            key={w.id}
+            title={w.name}
+            fullWidth
+            onPress={() => onPick(w)}
+            testID={`workspace-${w.slug}`}
+          />
+        ))}
+      </View>
+      </Screen>
+    </View>
+  );
+}
+
+function RepoPicker({
+  repos,
+  loading,
+  error,
+  onPick,
+  onSignOut,
+  workspaceName,
+  onChangeWorkspace,
+}: {
+  repos: Repository[];
+  loading: boolean;
+  error: boolean;
+  onPick: (repo: Repository, branch: Branch) => void;
+  onSignOut: () => void;
+  workspaceName?: string;
+  onChangeWorkspace?: () => void;
+}) {
+  const t = useTheme();
+  // Two-step: pick a repository, then a branch within it. The selected repo is
+  // local state — the branch is never serialized into the URL.
+  const [selected, setSelected] = useState<Repository | null>(null);
+
+  // Keep the selection valid as repos load/refresh (match by id).
+  const current = selected ? repos.find((r) => r.id === selected.id) ?? null : null;
+
+  return (
+    <View style={{ flex: 1 }}>
+      <EditorTopBar workspaceName={workspaceName} onChangeWorkspace={onChangeWorkspace} onSignOut={onSignOut} />
+      {current ? (
+        <Screen center testID="repo-picker">
+          <View style={{ width: "100%", maxWidth: 520, alignSelf: "center", gap: t.space(4) }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+              <IconButton name="chevronLeft" onPress={() => setSelected(null)} label="Back to repositories" />
+              <Text variant="h2" style={{ flex: 1 }}>Choose a branch</Text>
+            </View>
+            <Text variant="mono" color="secondary">{current.owner}/{current.name}</Text>
+            {current.branches.length === 0 ? (
+              <Text variant="sm" color="tertiary">No branches imported for this repository.</Text>
+            ) : (
+              current.branches.map((b) => (
+                <Button key={b.id} title={b.name} fullWidth onPress={() => onPick(current, b)} testID={`branch-${b.id}`} />
+              ))
+            )}
+          </View>
+        </Screen>
+      ) : (
+        <Screen center testID="repo-picker">
+          <View style={{ width: "100%", maxWidth: 520, alignSelf: "center", gap: t.space(4) }}>
+            <Text variant="h2">Choose a repository</Text>
+            {loading ? <Text color="secondary">Loading repositories…</Text> : null}
+            {error ? <Text color={t.color.diffDelFg}>Could not load repositories.</Text> : null}
+            {!loading && repos.length === 0 ? (
+              <Text color="secondary">No repositories connected to your workspaces yet.</Text>
+            ) : null}
+            {repos.map((r) => (
+              <Button
+                key={r.id}
+                title={`${r.owner}/${r.name}`}
+                fullWidth
+                onPress={() => setSelected(r)}
+                testID={`repo-${r.id}`}
+              />
+            ))}
+          </View>
+        </Screen>
+      )}
+    </View>
+  );
+}
+
+// Maps a GraphQL notification row to the design-system NotificationItem shape.
+type GqlNotification = { id: string; title: string; body?: string | null; level: string; read: boolean; createdAt: string; authorName?: string | null; authorEmail?: string | null };
+const toNotificationItem = (n: GqlNotification): NotificationItem => ({
+  id: n.id,
+  title: n.title,
+  body: n.body ?? undefined,
+  level: n.level === "error" ? "error" : "info",
+  read: n.read,
+  createdAt: n.createdAt,
+  author: n.authorName || n.authorEmail || undefined,
+});
+
+// NotificationsScreen shows every notification for the repository context, opened
+// from the bell's "Read more".
+function NotificationsScreen({ items, onBack }: { items: NotificationItem[]; onBack: () => void }) {
+  const t = useTheme();
+  return (
+    <Screen padded={false} testID="notifications-screen">
+      <View
+        style={{
+          height: 48, flexDirection: "row", alignItems: "center", gap: t.space(2),
+          paddingHorizontal: t.space(3), borderBottomWidth: 1, borderBottomColor: t.color.borderSubtle,
+        }}
+      >
+        <IconButton name="chevronLeft" onPress={onBack} size="sm" label="Back" />
+        <Text variant="h3" weight="semibold">Notifications</Text>
+      </View>
+      <NotificationList notifications={items} />
+    </Screen>
+  );
+}
+
+// TabDoc lazily loads one open tab's full document by id — its own loading cycle,
+// independent of the active collection's list — and lifts the result to CmsView.
+// It renders nothing; one is mounted per open tab.
+// collabWsBase resolves the collaboration WebSocket endpoint, e.g.
+// "wss://host/collab/ws". A deployment that runs the `collab` command as its own
+// process sets COLLAB_URL to that process's origin; otherwise the socket lives
+// on the API origin (or this page's, when the API is same-origin), which is what
+// the single-process server serves.
+function collabWsBase(): string {
+  // Local mode is single-user and mounts no collab endpoint. Returning "" makes
+  // useDocCollab's `enabled` false, so no provider is constructed and no socket
+  // is opened — a connection that could only ever fail is worse than none.
+  if (config.local) return "";
+  const base = config.collabUrl || config.apiUrl;
+  if (base) return base.replace(/^http/i, "ws").replace(/\/$/, "") + "/collab/ws";
+  if (typeof window === "undefined") return "";
+  const proto = window.location.protocol === "https:" ? "wss" : "ws";
+  return `${proto}://${window.location.host}/collab/ws`;
+}
+
+type CollabUser = { id: string; name: string };
+
+// TabDoc lazily loads one open tab's full document by id and, when a user
+// identity is known, owns that document's live collaboration session — both are
+// lifted to CmsView. It renders nothing; one is mounted per open tab.
+function TabDoc({
+  repositoryId,
+  id,
+  user,
+  onLoaded,
+  onCollab,
+}: {
+  repositoryId: string;
+  id: string;
+  user: CollabUser | null;
+  onLoaded: (id: string, doc: DocumentT) => void;
+  onCollab: (id: string, collab: DocCollab | null) => void;
+}) {
+  const { data } = useQuery(DOCUMENT, { variables: { repositoryId, id } });
+  const doc = data?.document as DocumentT | null | undefined;
+  useEffect(() => {
+    if (doc) onLoaded(id, doc);
+  }, [doc, id, onLoaded]);
+
+  const collab = useDocCollab({
+    wsBase: collabWsBase(),
+    room: `${repositoryId}_${id}`,
+    user,
+    getToken: getAuthToken,
+  });
+  useEffect(() => {
+    onCollab(id, collab);
+    return () => onCollab(id, null);
+  }, [id, collab, onCollab]);
+  return null;
+}
+
+function CmsView({
+  repo,
+  branch,
+  defaultBranchId,
+  projectName,
+  projects,
+  soleProjectName,
+  projectLocked,
+  importing,
+  onSignOut,
+}: {
+  repo: Repository;
+  branch: Branch;
+  // The branch every other branch's changes are compared against. It is also
+  // what keeps the URL clean: navigation omits the branch segment when the
+  // current branch is this one.
+  defaultBranchId?: string;
+  // Which project's content this view shows. Undefined for a repository whose
+  // projects have not loaded, and for local mode; every content query passes it
+  // through, and the server applies the same defaulting rule when it is absent.
+  projectName?: string;
+  // The repository's non-orphaned projects, for the picker. One (or none) hides
+  // the picker entirely — a repository without a manifest should look exactly as
+  // it did before projects existed.
+  projects?: Project[];
+  // The sole project's name, which navigation uses to omit the URL segment.
+  soleProjectName?: string;
+  // True when cms.config.js pins this deployment to one project: the picker is
+  // not rendered and the choice is not the user's.
+  projectLocked?: boolean;
+  // An import is running over this branch's already-imported content. The bell
+  // spins for the duration; nothing else changes, because what is on screen is
+  // real until the import replaces it. (A branch's FIRST import never reaches
+  // here — BrowserScreen holds a full-screen state instead of mounting this.)
+  importing?: boolean;
+  onSignOut: () => void;
+}) {
+  const { mode } = useThemeMode();
+  // Re-renders as plugins finish loading, which re-evaluates the render-field
+  // chain (and, below, the plugin sidebar/user-menu contributions).
+  const pluginVersion = usePluginRegistry(pluginRegistry);
+  // plugin:* components resolve from the registry; everything else falls
+  // through to the markdown body editor and then the built-in controls.
+  // pluginVersion is a dependency because the chain reads registry state that
+  // the version invalidates, not because it appears in the factory.
+  const renderField = useMemo(
+    () => createPluginRenderField(pluginRegistry, createMarkdownRenderField({ theme: mode })),
+    [mode, pluginVersion]
+  );
+  // The media data seam handed to the design system. Undefined when the server
+  // has no object store configured, which renders media fields read-only.
+  const media = useMediaApi(repo.id, branch.id, projectName);
+  const navigation = useNavigation<any>();
+  const route = useRoute();
+  const params = route.params as BrowserParams;
+  // Selection changes keep the current repo/branch fixed and only vary the CMS
+  // portion of the route. Callers may pass a partial selection; the rest resets.
+  // The surface is deliberately carried forward rather than reset — selecting a
+  // collection while looking at Changes should stay on Changes.
+  // The focused editor column as of the last committed render. focusedTabId is
+  // computed far below (it needs the open-tab state), so it is mirrored here to
+  // be readable from a navigation handler.
+  const focusedTabIdRef = useRef<string | null>(null);
+  // The column a URL-driven open should take over. Snapshotted when the
+  // navigation is issued, because a document opened by URL only becomes a tab
+  // once its id resolves — several renders later, by which point the focus has
+  // already moved onto that very document and can no longer name what it
+  // replaced. Consumed (and cleared) where the tab materializes.
+  const reuseTabIdRef = useRef<string | null>(null);
+  const go = (sel: Partial<CmsSelection>) => {
+    reuseTabIdRef.current = focusedTabIdRef.current;
+    navigation.navigate("Browser", {
+      workspaceId: params.workspaceId, repositoryId: repo.id, branchId: branch.id, defaultBranchId, projectName, soleProjectName,
+      // The comparison target rides along with the surface — selecting a change
+      // must not silently retarget the comparison back to the default branch.
+      targetBranchId: params.targetBranchId,
+      ...EMPTY_SELECTION, surface: params.surface, ...sel,
+    });
+  };
+  // The changes surface: a read-only comparison of this branch against the
+  // repository's default branch. It shares the collection/path route shape with
+  // the editor, so a document is addressable on both.
+  const changesMode = params.surface === "changes";
+  // The comparison target: the URL's target when set, else the repository
+  // default. Kept as an id (undefined means "default", which the server also
+  // interprets), and validated below only for display.
+  const targetBranchId = params.targetBranchId ?? defaultBranchId;
+  // On the default branch there is nothing to compare against, so the segment is
+  // offered but disabled rather than leading to a permanently empty screen. When
+  // a non-default target is chosen, "source == target" is the empty case instead.
+  // Locally the comparison is the working tree against HEAD rather than one
+  // branch against another, so the single-branch case is a real comparison, not
+  // an empty one. (Apply stays hidden — see onApplyChanges below.)
+  const onDefaultBranch = config.local ? false : !targetBranchId || branch.id === targetBranchId;
+  const [showAllNotifications, setShowAllNotifications] = useState(false);
+
+  // Notifications for this repository context. Polls so the bell reflects new
+  // import/export outcomes without a manual refresh.
+  const { data: notifData, refetch: refetchNotifs } = useQuery(NOTIFICATIONS, {
+    variables: { repositoryId: repo.id, limit: 50 },
+    pollInterval: 30000,
+  });
+  const [markAllRead] = useMutation(MARK_NOTIFICATIONS_READ, {
+    variables: { repositoryId: repo.id },
+  });
+  const notifications: NotificationItem[] = (notifData?.notifications ?? []).map(toNotificationItem);
+  const unreadNotifications: number = notifData?.unreadNotificationCount ?? 0;
+  const { data: colData } = useQuery(COLLECTIONS, {
+    // `project` is undefined for a single-project repository, where the server
+    // applies the same defaulting rule — so the request is byte-identical to
+    // what it was before projects existed.
+    variables: { repositoryId: repo.id, branchId: branch.id, project: projectName ?? null },
+  });
+  const collections: Collection[] = colData?.collections ?? [];
+
+  // ---- changes surface data ------------------------------------------------
+  // All three are skipped entirely on the Edit surface and on the default
+  // branch, so the editor's request profile is unchanged by this feature.
+  // A null target lets the server fall back to the default branch, so an
+  // unretargeted comparison sends exactly what it always did.
+  const changesVars = { repositoryId: repo.id, branchId: branch.id, targetBranchId: params.targetBranchId ?? null };
+  const skipChanges = !changesMode || onDefaultBranch;
+  const { data: summaryData } = useQuery(BRANCH_CHANGE_SUMMARY, {
+    variables: changesVars,
+    skip: skipChanges,
+  });
+  const changeSummary: ChangeSummary[] = summaryData?.branchChangeSummary ?? [];
+  // Media changes come from their own query: an asset has no fields to diff, so
+  // folding it into branchChanges would mean rows where half the type is null.
+  const { data: mediaChangeData } = useQuery(BRANCH_MEDIA_CHANGES, {
+    variables: changesVars,
+    skip: skipChanges,
+  });
+  const mediaChanges: MediaChange[] = mediaChangeData?.branchMediaChanges ?? [];
+
+  // Resolve the active collection + selected document path from the URL params.
+  // A configure route carries only the singleton's file path, so we resolve its
+  // collection by matching that path once collections have loaded.
+  let activeNavKey = "";
+  let selectedPath = "";
+  if (params.plugin) {
+    // A plugin screen occupies the nav slot under its sidebar link's key; no
+    // collection resolves from it, so every document query below is skipped.
+    activeNavKey = pluginNavKey(params.plugin.id, params.plugin.path);
+  } else if (params.configure) {
+    selectedPath = params.itemPath;
+    activeNavKey = collections.find((c) => c.singleton && c.path === selectedPath)?.name ?? "";
+  } else if (params.collection) {
+    activeNavKey = params.collection;
+    if (isMediaNavKey(activeNavKey)) {
+      // A media path is a plain repository path — there is no collection glob to
+      // rejoin it against, so it is carried in the URL whole.
+      selectedPath = params.itemPath;
+    } else {
+      // params.itemPath is stored relative to the collection's glob base; rejoin
+      // it so it matches the document's full repo path below.
+      const col = collections.find((c) => c.name === activeNavKey) ?? null;
+      selectedPath = col && params.itemPath ? toFullPath(col.path, params.itemPath) : "";
+    }
+  }
+  const active = collections.find((c) => c.name === activeNavKey) ?? null;
+  // Media occupies the same nav slot (and URL segment) as a collection but has
+  // no documents, so every document query is skipped for it.
+  const mediaShowing = isMediaNavKey(activeNavKey);
+  // On Changes that nav key lists the changed assets instead of opening the
+  // media browser, so a media URL has one shape on both surfaces.
+  const mediaChangesShowing = changesMode && mediaShowing;
+
+  // The changed documents in the selected collection, and the selected one's
+  // field-level diff. Both are keyed by path, not document id: a deletion has no
+  // document on this branch, so a path is the only identity every change has.
+  const { data: changesData } = useQuery(BRANCH_CHANGES, {
+    variables: { ...changesVars, collection: activeNavKey || null },
+    skip: skipChanges || !activeNavKey || mediaChangesShowing,
+  });
+  const branchChanges: BranchChange[] = changesData?.branchChanges ?? [];
+  const { data: changeData, loading: loadingChange } = useQuery(BRANCH_CHANGE, {
+    variables: { ...changesVars, path: selectedPath },
+    // A media path is not a document; its diff comes from the media change list.
+    skip: skipChanges || !selectedPath || mediaChangesShowing,
+  });
+  // A selected media asset resolves from the already-loaded media change list —
+  // it needs no detail query, because a file's whole diff is its metadata.
+  const selectedMediaChange = mediaChangesShowing
+    ? mediaChanges.find((c) => c.path === selectedPath)
+    : undefined;
+  const selectedChange: DocumentChange | undefined = selectedMediaChange
+    ? mediaChangeToDocument(selectedMediaChange)
+    : changeData?.branchChange
+    ? {
+        ...changeData.branchChange,
+        previousPath: changeData.branchChange.previousPath ?? undefined,
+        fields: (changeData.branchChange.fields ?? []).map(
+          (f: { name: string; label?: string | null; kind: string; before?: unknown; after?: unknown }) => ({
+            name: f.name,
+            label: f.label ?? undefined,
+            kind: f.kind as DocumentChange["fields"][number]["kind"],
+            before: f.before,
+            after: f.after,
+          }),
+        ),
+      }
+    : undefined;
+
+  // ---- apply changes (merge source → target) -------------------------------
+  // The modal opens on a confirmation step (applyOpen, no run yet), then — once
+  // the user confirms — on the run's live progress. Merging pushes to origin and
+  // deletes the source branch, so the confirmation is not skippable.
+  const [applyOpen, setApplyOpen] = useState(false);
+  // Whether a merge attempt has been started for the current modal opening. The
+  // modal shows its confirmation step until this is true, then the run's live
+  // progress. It resets to false each time the modal opens, so re-opening after
+  // resolving conflicts starts at "confirm" rather than showing the previous
+  // attempt's stale conflicted state.
+  const [applyStarted, setApplyStarted] = useState(false);
+  const [applyRunId, setApplyRunId] = useState<string | null>(null);
+  // The authoritative run for display. Updated from three sources so they can't
+  // disagree: the apply mutation (initial), the progress subscription (step +
+  // status transitions), and the resolve mutation (a conflict's resolution,
+  // which changes no status/step so the subscription never re-emits for it).
+  const [applyRun, setApplyRun] = useState<any>(null);
+  const [applyChangesMut] = useMutation(APPLY_CHANGES);
+  useSubscription(MERGE_RUN_PROGRESS, {
+    variables: { id: applyRunId },
+    skip: !applyRunId,
+    onData: ({ data }) => {
+      const run = data.data?.mergeRunProgress;
+      if (run) setApplyRun(run);
+    },
+  });
+  const liveRun = applyRun;
+
+  // Conflicts belong to a conflicted run for THIS source→target pair, whether the
+  // run is live (just applied) or was left conflicted from a prior attempt. They
+  // key the red per-field treatment in the detail and gate the Apply button.
+  const conflictRun = liveRun && liveRun.status === "conflicted" ? liveRun : null;
+  const conflicts: MergeConflictT[] = conflictRun?.conflicts ?? [];
+  const hasUnresolvedConflicts = conflicts.some((c) => !c.resolution);
+  // Unresolved conflicts drive the sidebar counts and the list-row highlight, so
+  // the user can see which collections and which documents still need attention.
+  const unresolvedConflicts = conflicts.filter((c) => !c.resolution);
+  const conflictedPaths = new Set(unresolvedConflicts.map((c) => c.path));
+  const conflictsByCollection = new Map<string, number>();
+  for (const c of unresolvedConflicts) {
+    conflictsByCollection.set(c.collection, (conflictsByCollection.get(c.collection) ?? 0) + 1);
+  }
+
+  // The modal reflects the run's live state, including "conflicted" (the modal
+  // has its own conflicted panel with a "Review conflicts" action). Undefined
+  // only before a run exists — which the modal renders as its confirmation step.
+  const applyProgress: MergeProgress | undefined = applyStarted && liveRun
+    ? {
+        status: liveRun.status,
+        step: liveRun.step,
+        sourceBranch: liveRun.sourceBranch,
+        targetBranch: liveRun.targetBranch,
+        commit: liveRun.commit,
+        filesChanged: liveRun.filesChanged,
+        added: liveRun.added,
+        removed: liveRun.removed,
+        error: liveRun.error,
+        escalationFiles: liveRun.escalationFiles ?? [],
+      }
+    : undefined;
+
+  // The Apply button opens the confirmation step; the actual merge doesn't start
+  // until the user confirms. Reset applyStarted so re-opening after resolving
+  // conflicts shows the confirm step, not the previous attempt's conflicted panel.
+  const onApplyChanges = () => { setApplyStarted(false); setApplyOpen(true); };
+  const onConfirmApply = async () => {
+    if (!targetBranchId) return;
+    setApplyStarted(true);
+    try {
+      const res = await applyChangesMut({
+        variables: { repositoryId: repo.id, sourceBranchId: branch.id, targetBranchId },
+      });
+      const run = res.data?.applyChanges;
+      if (run) {
+        // Seed the modal as running so it shows the checklist immediately. The
+        // mutation returns the run's state at creation time — which, for a
+        // resumed conflicted run, is still "conflicted" until the background job
+        // flips it to running. The subscription then delivers the real
+        // transitions (comparing → merging → pushing → succeeded/conflicted).
+        setApplyRun({ ...run, status: "running", step: "comparing" });
+        setApplyRunId(run.id);
+      }
+    } catch (e: any) {
+      // Surface as a failed-looking modal so the user isn't left guessing.
+      setApplyRun({
+        id: "error", status: "failed", step: "comparing",
+        sourceBranch: branch.name, targetBranch: repo.branches.find((b) => b.id === targetBranchId)?.name ?? "",
+        error: e?.graphQLErrors?.[0]?.message || e?.message || "Couldn’t apply changes.",
+        conflicts: [],
+      });
+    }
+  };
+  // Cancel/dismiss. Keeps the run (and its conflicts) so the inline red field
+  // treatment persists after the modal closes; a fresh apply or success clears it.
+  const closeApply = () => { setApplyOpen(false); setApplyStarted(false); };
+  // On success the source branch is gone and the target holds the merge; drop
+  // into Edit on the target and refresh the branch list.
+  const doneApply = () => {
+    const targetId = liveRun?.targetBranch;
+    // The merge is done — tear the run down (source is gone) before leaving.
+    setApplyOpen(false);
+    setApplyStarted(false);
+    setApplyRunId(null);
+    setApplyRun(null);
+    void apollo.refetchQueries({ include: [REPOSITORIES] });
+    navigation.navigate("Browser", {
+      workspaceId: params.workspaceId, repositoryId: repo.id, branchId: targetBranchId, defaultBranchId, projectName, soleProjectName,
+      ...EMPTY_SELECTION,
+    });
+    void targetId;
+  };
+
+  // Review conflicts: close the modal and let the inline red field treatment in
+  // the detail take over. The run id is kept so its conflicts stay live.
+  const reviewConflicts = () => setApplyOpen(false);
+  // Conflicts for the currently-selected document, mapped to the design system's
+  // shape (before = target/HEAD, after = source).
+  const selectedConflicts: FieldConflictT[] = conflicts
+    .filter((c) => c.path === selectedPath)
+    .map((c) => ({
+      id: c.id,
+      field: c.field,
+      isBody: c.isBody,
+      before: c.before,
+      after: c.after,
+      resolution: (c.resolution as FieldConflictT["resolution"]) ?? null,
+    }));
+
+  const [resolveConflictMut] = useMutation(RESOLVE_MERGE_CONFLICT);
+  const onResolveConflict = async (conflict: FieldConflictT, choice: string, override?: unknown) => {
+    if (!conflictRun) return;
+    const res = await resolveConflictMut({
+      variables: { runId: conflictRun.id, conflictId: conflict.id, choice, override: override ?? null },
+    });
+    // The subscription won't re-emit (status/step unchanged), so apply the
+    // returned run — which carries the updated conflict resolutions — directly.
+    if (res.data?.resolveMergeConflict) setApplyRun(res.data.resolveMergeConflict);
+  };
+
+  // ---- change requests (developer escalation) ------------------------------
+  const changeRequestMode = params.surface === "changeRequest";
+  // Is a change request already open for this source→target? Gates the Apply
+  // button's "view change request" behavior. Skipped off the changes surfaces or
+  // on the default branch (where merging isn't offered).
+  const { data: openCRData } = useQuery(OPEN_CHANGE_REQUEST, {
+    variables: { repositoryId: repo.id, sourceBranchId: branch.id, targetBranchId },
+    // Change requests need a remote; local mode has none, so this never runs.
+    skip: config.local || (!changesMode && !changeRequestMode) || onDefaultBranch || !targetBranchId,
+    fetchPolicy: "cache-and-network",
+  });
+  const openCR = openCRData?.openChangeRequest ?? null;
+  const changeRequestOpen = !!openCR;
+  // The shareable link is the CMS change-request summary page (not the raw GitHub
+  // PR): it carries the developer instructions and links out to GitHub itself.
+  // Always a valid route; the modal only surfaces it when a change request is open.
+  const changeRequestSummaryUrl = browserUrl({
+    workspaceId: params.workspaceId, repositoryId: repo.id, branchId: branch.id, defaultBranchId, projectName, soleProjectName,
+    targetBranchId: params.targetBranchId,
+    ...EMPTY_SELECTION,
+    surface: "changeRequest",
+  });
+
+  // The escalation (needs_review) → change request flow. Navigating to the
+  // summary surface after creation drops the developer on the PR details.
+  const [creatingChangeRequest, setCreatingChangeRequest] = useState(false);
+  const [createChangeRequestMut] = useMutation(CREATE_CHANGE_REQUEST);
+  const goToChangeRequest = () => {
+    setApplyOpen(false);
+    navigation.navigate("Browser", {
+      workspaceId: params.workspaceId, repositoryId: repo.id, branchId: branch.id, defaultBranchId, projectName, soleProjectName,
+      targetBranchId: params.targetBranchId,
+      ...EMPTY_SELECTION,
+      surface: "changeRequest",
+    });
+  };
+  const onCreateChangeRequest = async (explanation: string) => {
+    if (!applyRunId) return;
+    setCreatingChangeRequest(true);
+    try {
+      // Refetch the exact open-CR queries (by variables) and wait for them, so the
+      // branch immediately reads as frozen/locked and the shareable link is ready
+      // — without this the lock only appeared after a full reload.
+      await createChangeRequestMut({
+        variables: { runId: applyRunId, explanation },
+        awaitRefetchQueries: true,
+        refetchQueries: [
+          { query: OPEN_CHANGE_REQUEST, variables: { repositoryId: repo.id, sourceBranchId: branch.id, targetBranchId } },
+          { query: CHANGE_REQUEST_FOR_BRANCH, variables: { repositoryId: repo.id, branchId: branch.id } },
+        ],
+      });
+      // Rather than navigating away, drop the needs_review progress so the modal
+      // falls back to its "a change request is already open" panel with the link.
+      setApplyStarted(false);
+    } catch (e: any) {
+      setApplyRun((prev: any) => ({
+        ...(prev ?? {}), status: "failed", step: "comparing",
+        error: e?.graphQLErrors?.[0]?.message || e?.message || "Couldn’t open the change request.",
+      }));
+    } finally {
+      setCreatingChangeRequest(false);
+    }
+  };
+
+  // Freeze: is the current branch the source of an open change request (any
+  // target)? If so the CMS blocks edits to it, so the reset on a rejected PR
+  // never loses work. Skipped on the default branch, which is never a CR source.
+  const { data: frozenData } = useQuery(CHANGE_REQUEST_FOR_BRANCH, {
+    variables: { repositoryId: repo.id, branchId: branch.id },
+    skip: branch.id === defaultBranchId,
+    fetchPolicy: "cache-and-network",
+  });
+  const frozenCR = frozenData?.changeRequestForBranch ?? null;
+  const branchFrozen = !!frozenCR;
+  // The frozen-branch banner's "Learn more" opens the apply modal, which — with a
+  // change request open — shows its explanatory panel and the shareable link.
+  const openChangeRequestModal = () => { setApplyStarted(false); setApplyOpen(true); };
+
+  // The summary page resolves its change request from the branch (frozenCR),
+  // which works from any surface; openCR (target-specific) is the fallback.
+  const summaryCR = frozenCR ?? openCR;
+  // Live change-request detail for the summary page (description + comments).
+  const { data: crDetailData } = useQuery(CHANGE_REQUEST, {
+    variables: { id: summaryCR?.id },
+    skip: !changeRequestMode || !summaryCR?.id,
+    fetchPolicy: "cache-and-network",
+  });
+  const changeRequestDetail = crDetailData?.changeRequest ?? summaryCR;
+
+  const analytics = useAnalytics();
+
+  // View events are derived from the resolved route rather than from click
+  // handlers, so a deep link, a browser back/forward and a tab activation all
+  // count the same as a click — they are the same thing to the user.
+  //
+  // Nothing fires until collections have loaded: a configure route resolves its
+  // collection by matching the path against them, so firing earlier would emit
+  // one event with an unresolved collection and a second once it resolved. The
+  // ref then collapses re-renders of the same view into a single event.
+  const lastViewRef = useRef("");
+  useEffect(() => {
+    if (!analytics.enabled || collections.length === 0) return;
+
+    let event: typeof AnalyticsEvent.CollectionViewed
+      | typeof AnalyticsEvent.CollectionItemViewed
+      | typeof AnalyticsEvent.ConfigurationItemViewed;
+    if (params.configure) {
+      if (!selectedPath) return;
+      event = AnalyticsEvent.ConfigurationItemViewed;
+    } else if (!activeNavKey) {
+      return; // no collection selected — nothing is being viewed
+    } else {
+      event = selectedPath ? AnalyticsEvent.CollectionItemViewed : AnalyticsEvent.CollectionViewed;
+    }
+
+    // The document path is the customer's content (file names routinely say
+    // what the content is), so it identifies the view here but is never sent.
+    const key = `${event}|${activeNavKey}|${selectedPath}`;
+    if (key === lastViewRef.current) return;
+    lastViewRef.current = key;
+
+    analytics.capture(event, {
+      collection: activeNavKey || null,
+      singleton: !!active?.singleton,
+    });
+  }, [analytics, collections.length, params.configure, activeNavKey, selectedPath, active?.singleton]);
+
+  // A `**`-globbed collection is browsed as a folder tree (built client-side from
+  // the whole set), so it can't be server-paginated — load it in full. A flat
+  // collection loads one page at a time and fetches more on scroll.
+  const hierarchicalActive = !!active && !active.singleton && active.path.includes("**");
+
+  // ---- collection search + faceted filters ---------------------------------
+  // `search` matches the title; `appliedFilters` are the faceted conditions the
+  // list is currently narrowed by. Both reset when the collection changes.
+  const [search, setSearch] = useState("");
+  const [appliedFilters, setAppliedFilters] = useState<DocFilter[]>([]);
+  useEffect(() => { setSearch(""); setAppliedFilters([]); }, [activeNavKey]);
+  const trimmedSearch = search.trim();
+  const searchActive = trimmedSearch !== "" || appliedFilters.length > 0;
+  const searchVars = {
+    search: trimmedSearch || null,
+    filters: appliedFilters.length ? appliedFilters : null,
+  };
+  // A search flattens results across folders, so a hierarchical collection is
+  // paginated (not tree-browsed) while a search is active.
+  const paginate = !hierarchicalActive || searchActive;
+
+  const { data: docData, refetch: refetchDocs, fetchMore: fetchMoreDocs } = useQuery(DOCUMENTS, {
+    variables: {
+      repositoryId: repo.id,
+      branchId: branch.id,
+      project: projectName ?? null,
+      collection: activeNavKey,
+      // null → the server returns the whole (unsearched) collection for the tree.
+      limit: paginate ? PAGE_SIZE : null,
+      offset: 0,
+      ...searchVars,
+    },
+    // The changes surface never lists documents — its list comes from
+    // branchChanges — so the editor's paging queries stay off there entirely.
+    // A plugin screen's nav key names no collection, so it never queries either.
+    skip: !activeNavKey || mediaShowing || changesMode || !!params.plugin,
+  });
+  const documents: DocumentT[] = docData?.documents ?? [];
+
+  // When a search/filter is active the matching total comes from documentCount
+  // (not the collection's full count), so pagination stops at the right place.
+  const { data: countData } = useQuery(DOCUMENT_COUNT, {
+    variables: { repositoryId: repo.id, branchId: branch.id, project: projectName ?? null, collection: activeNavKey, ...searchVars },
+    skip: !activeNavKey || mediaShowing || changesMode || !searchActive || !!params.plugin,
+  });
+  const total = searchActive ? (countData?.documentCount ?? 0) : (active?.documentCount ?? 0);
+
+  // Server-side pagination for the flat entry list: more pages exist while we've
+  // loaded fewer than the matching total. fetchMore appends the next offset
+  // window; the Apollo `documents` field policy concatenates it (per search).
+  const hasMoreEntries = !!active && paginate && documents.length < total;
+  const [loadingMoreEntries, setLoadingMoreEntries] = useState(false);
+  const onLoadMoreEntries = useCallback(() => {
+    if (loadingMoreEntries || !hasMoreEntries) return;
+    setLoadingMoreEntries(true);
+    void fetchMoreDocs({ variables: { offset: documents.length, limit: PAGE_SIZE } })
+      .finally(() => setLoadingMoreEntries(false));
+  }, [loadingMoreEntries, hasMoreEntries, documents.length, fetchMoreDocs]);
+
+  // After a mutation changes the set (create/delete/rename/move) the accumulated
+  // pages are stale — drop every cached `documents` window and refetch the first
+  // page fresh so the list can't show deleted rows or a wrong order.
+  const apollo = useApolloClient();
+  const reloadDocs = useCallback(async () => {
+    apollo.cache.evict({ id: "ROOT_QUERY", fieldName: "documents" });
+    apollo.cache.gc();
+    await refetchDocs();
+  }, [apollo, refetchDocs]);
+
+  // Deep-link resolution vs. pagination: the selected doc's id (and thus its open
+  // tab) is looked up by matching selectedPath in the loaded pages. If a cold deep
+  // link points past the first page, keep pulling pages until it appears (bounded
+  // by the collection size, and only while a selection is still unresolved).
+  useEffect(() => {
+    if (!activeNavKey || !selectedPath || searchActive) return;
+    if (documents.some((d) => d.path === selectedPath)) return; // resolved
+    if (hasMoreEntries && !loadingMoreEntries) onLoadMoreEntries();
+  }, [activeNavKey, selectedPath, documents, hasMoreEntries, loadingMoreEntries, onLoadMoreEntries, searchActive]);
+
+  // ---- search callbacks handed to ContentBrowser ---------------------------
+  // The header search input pushes its (debounced) text here; the advanced panel
+  // pushes/clears the applied filter set; onCountMatches powers its optimistic
+  // "Show N results" for a draft (not-yet-applied) filter set.
+  const onSearchChange = useCallback((q: string) => setSearch(q), []);
+  const onApplyFilters = useCallback(
+    (f: DocFilter[]) => {
+      setAppliedFilters(f);
+      // Only an applied, non-empty filter set is a search; clearing is not.
+      // Field names are schema metadata and safe to send — the values the user
+      // typed are their content and are not.
+      if (f.length) {
+        analytics.capture(AnalyticsEvent.AdvancedSearchExecuted, {
+          collection: activeNavKey || null,
+          filter_count: f.length,
+          fields: f.map((x) => x.field).sort().join(","),
+          ops: f.map((x) => x.op).sort().join(","),
+        });
+      }
+    },
+    [analytics, activeNavKey],
+  );
+
+  // A settled query, not a keystroke: the header input is already debounced, but
+  // it still emits per character, and one event per letter typed would be both
+  // noise and a way to reconstruct the query. Only the length is reported.
+  //
+  // The ref keeps one search to one event. Applying a filter re-runs this effect
+  // (with_filters changes) while the query is untouched, which would otherwise
+  // report the same search a second time and inflate the count. Clearing the
+  // query resets it, so searching the same term again does count again.
+  const lastSearchRef = useRef("");
+  useEffect(() => {
+    if (!analytics.enabled) return;
+    if (!trimmedSearch) {
+      lastSearchRef.current = "";
+      return;
+    }
+    const key = `${activeNavKey}|${trimmedSearch}`;
+    if (key === lastSearchRef.current) return;
+    const id = setTimeout(() => {
+      lastSearchRef.current = key;
+      analytics.capture(AnalyticsEvent.BasicSearchExecuted, {
+        collection: activeNavKey || null,
+        query_length: trimmedSearch.length,
+        with_filters: appliedFilters.length > 0,
+      });
+    }, 800);
+    return () => clearTimeout(id);
+  }, [analytics, trimmedSearch, activeNavKey, appliedFilters.length]);
+  const onClearSearch = useCallback(() => { setSearch(""); setAppliedFilters([]); }, []);
+  const onCountMatches = useCallback(
+    async (params: { query: string; filters: DocFilter[] }) => {
+      const res = await apollo.query({
+        query: DOCUMENT_COUNT,
+        variables: {
+          repositoryId: repo.id,
+          branchId: branch.id,
+          collection: activeNavKey,
+          search: params.query.trim() || null,
+          filters: params.filters.length ? params.filters : null,
+        },
+        fetchPolicy: "network-only",
+      });
+      return (res.data?.documentCount ?? 0) as number;
+    },
+    [apollo, repo.id, branch.id, activeNavKey],
+  );
+  // Filterable fields for the faceted panel: the collection's schema fields minus
+  // the body (a large text blob, not a facet). The DS renders a control per type.
+  const facetFields: FacetField[] = active
+    ? active.fields
+        .filter((f) => f.component !== "body" && f.source !== "body")
+        .map((f) => ({
+          name: f.name,
+          label: f.label ?? undefined,
+          type: f.type,
+          enumValues: f.enumValues ?? undefined,
+          component: f.component ?? undefined,
+        }))
+    : [];
+
+  // ---- open editor tabs (host-owned; each loads its own document) ----------
+  // Ephemeral set of open desktop columns as {id, collection}. Persists across
+  // collection switches — a tab owns its data by id, not via the active list.
+  const [openTabs, setOpenTabs] = useState<TabRef[]>([]);
+  // Full documents loaded per open tab (lazy, keyed by id), lifted from TabDoc.
+  const [loaded, setLoaded] = useState<Record<string, DocumentT>>({});
+
+  // The selected document id for the detail pane: match the route's file path
+  // against the active collection's loaded pages, then against any open tab's
+  // loaded document — a tab from another collection resolves only here, since
+  // its path never appears in the active list — or fall back to a singleton's
+  // sole document.
+  // On the changes surface an entry IS a path, so the route's path is the id
+  // directly — there is no document to resolve it against.
+  const selectedId: string | null = changesMode
+    ? selectedPath || null
+    : documents.find((d) => d.path === selectedPath)?.id ??
+      (selectedPath
+        ? openTabs.find((t: TabRef) => !t.plugin && loaded[t.id]?.path === selectedPath)?.id ?? null
+        : null) ??
+      (active?.singleton && documents.length === 1 ? documents[0].id : null);
+
+  // The focused column. The URL names it whenever it points at a document; when
+  // a route change drops the item segment (switching collections, opening media
+  // or a plugin screen, toggling surfaces), the last focused column keeps its
+  // focus — those navigations leave the column set unchanged, so they must
+  // leave its focus unchanged too. The create pane is the exception: it takes
+  // the focus itself, so no document column should read as active under it.
+  const [lastFocusedTabId, setLastFocusedTabId] = useState<string | null>(null);
+  useEffect(() => {
+    if (!changesMode && selectedId) setLastFocusedTabId(selectedId);
+  }, [selectedId, changesMode]);
+  const focusedTabId: string | null =
+    !changesMode && !selectedId && !params.create && openTabs.some((t: TabRef) => t.id === lastFocusedTabId)
+      ? lastFocusedTabId
+      : selectedId;
+  useEffect(() => {
+    focusedTabIdRef.current = focusedTabId;
+  }, [focusedTabId]);
+  const handleLoaded = useCallback(
+    (id: string, doc: DocumentT) =>
+      setLoaded((prev: Record<string, DocumentT>) => (prev[id] === doc ? prev : { ...prev, [id]: doc })),
+    [],
+  );
+  // Fans in-flight edits out to whichever plugin tabs are watching a document.
+  // One per browser instance, never recreated — a new bus would silently drop
+  // every existing subscription.
+  const draftBus = useRef(new DraftBus()).current;
+
+  // Current user identity for collaborative presence (email local-part as label).
+  const { data: meData } = useQuery(ME);
+  const collabUser: CollabUser | null = useMemo(() => {
+    const me = meData?.me as { id: string; email: string } | undefined;
+    if (!me) return null;
+    return { id: me.id, name: me.email.split("@")[0] || me.email };
+  }, [meData]);
+  // Live collaboration session per open tab (keyed by document id), lifted from
+  // TabDoc so the built CmsEntry can bind its text fields to the shared CRDT.
+  const [collabById, setCollabById] = useState<Record<string, DocCollab>>({});
+  const handleCollab = useCallback((id: string, collab: DocCollab | null) => {
+    setCollabById((prev: Record<string, DocCollab>) => {
+      if (collab) {
+        if (prev[id] === collab) return prev;
+        return { ...prev, [id]: collab };
+      }
+      if (!(id in prev)) return prev;
+      const next = { ...prev };
+      delete next[id];
+      return next;
+    });
+  }, []);
+  // The URL-selected document always materializes as a tab.
+  useEffect(() => {
+    // The changes surface has no editor tabs — its selection is a diff, not an
+    // open document — so a selection there must not materialize a column.
+    if (!selectedId || !activeNavKey || changesMode) return;
+    // Read before the updater runs (it runs on the *next* render) and clear, so
+    // a selection that arrives without a navigation — a deep link, a restored
+    // route — never takes over a column on a stale snapshot.
+    const reuse = reuseTabIdRef.current;
+    reuseTabIdRef.current = null;
+    setOpenTabs((prev: TabRef[]) => {
+      if (prev.some((t) => t.id === selectedId)) return prev;
+      const tab: TabRef = { id: selectedId, collection: activeNavKey };
+      // Take over the column the navigation moved away from, exactly as a plain
+      // list click does. Without this a singleton — which is opened straight
+      // from the sidebar, with no list click to route through onOpenEntry —
+      // stacks a fresh column on every open. A plugin column is never taken
+      // over, and with nothing focused the tab is appended.
+      const idx = prev.findIndex((t) => t.id === reuse && !t.plugin);
+      if (idx === -1) return [...prev, tab];
+      const next = [...prev];
+      next[idx] = tab;
+      return next;
+    });
+  }, [selectedId, activeNavKey, changesMode]);
+  // buildEntry joins a loaded document with its collection's field defs into the
+  // design-system CmsEntry (schema fields + body), matching the old list mapping.
+  const buildEntry = (doc: DocumentT, collectionName: string): CmsEntry => {
+    const col = collections.find((c) => c.name === collectionName);
+    return {
+      id: doc.id,
+      path: doc.path,
+      title: doc.label,
+      body: doc.body ?? "",
+      fields: col
+        ? col.fields.map((f) => toEntryField(f, f.source === "body" ? (doc.body ?? "") : doc.fields?.[f.name]))
+        : undefined,
+      collab: collabById[doc.id],
+    };
+  };
+  // The plugin-facing view of a loaded document: the full frontmatter map plus
+  // the body kept separate, and the name of the field the body is exposed as so
+  // a consumer can patch the right key without re-deriving it from the schema.
+  const toPluginDoc = useCallback(
+    (doc: DocumentT, collectionName: string): PluginDocument => {
+      const col = collections.find((c) => c.name === collectionName);
+      return {
+        id: doc.id,
+        collection: collectionName,
+        path: doc.path,
+        fields: doc.fields ?? {},
+        body: doc.body ?? undefined,
+        bodyField: col?.fields.find((f) => f.source === "body")?.name,
+      };
+    },
+    [collections],
+  );
+
+  // Open one of a plugin's routes as a column. Re-opening the same tab id
+  // activates the existing column instead of stacking a second one.
+  const openPluginTab = useCallback(
+    (pluginId: string, spec: PluginTabSpec, documentId: string | null) => {
+      const id = pluginTabId(pluginId, spec);
+      setOpenTabs((prev: TabRef[]) => {
+        const plugin: PluginTabRef = {
+          pluginId,
+          route: spec.route,
+          title: spec.title,
+          params: spec.params,
+          documentId,
+        };
+        const at = prev.findIndex((t) => t.id === id);
+        if (at !== -1) {
+          const next = [...prev];
+          next[at] = { ...next[at], plugin };
+          return next;
+        }
+        // Placed immediately after the document it was opened from, so a
+        // preview appears beside its document rather than at the far right of a
+        // wide column set where the user would have to go looking for it.
+        const anchor = documentId ? prev.findIndex((t) => t.id === documentId) : -1;
+        const tab: TabRef = { id, collection: "", plugin };
+        if (anchor === -1) return [...prev, tab];
+        return [...prev.slice(0, anchor + 1), tab, ...prev.slice(anchor + 1)];
+      });
+    },
+    [],
+  );
+  const closePluginTab = useCallback(
+    (id: string) => setOpenTabs((prev: TabRef[]) => prev.filter((t) => t.id !== id)),
+    [],
+  );
+
+  // Open a document in the editor by id — the inverse direction, for a plugin
+  // reporting a click in whatever it renders (click-to-edit from a preview).
+  //
+  // The implementation reads a lot of per-render state, but the exposed callback
+  // must keep a stable identity: it is a memo dependency of every plugin tab
+  // body, and a fresh function each render would re-run the plugin's effects
+  // (for a preview plugin, reloading its iframe) on every keystroke.
+  const openDocumentImpl = useRef<(id: string, field?: string) => void>(() => {});
+  openDocumentImpl.current = (id: string) => {
+    const doc = loaded[id] ?? documents.find((d) => d.id === id);
+    if (!doc) return;
+    const collectionName =
+      openTabs.find((t: TabRef) => t.id === id && !t.plugin)?.collection ?? activeNavKey;
+    const col = collections.find((c) => c.name === collectionName) ?? null;
+    if (!col) return;
+    if (col.singleton) go({ configure: true, collection: "", itemPath: doc.path });
+    else go({ configure: false, collection: collectionName, itemPath: toRelItemPath(col.path, doc.path) });
+  };
+  const openDocumentById = useCallback((id: string, field?: string) => {
+    openDocumentImpl.current(id, field);
+  }, []);
+
+  // goToTab points the URL (and thus the active collection) at a tab's document.
+  const goToTab = (tab: TabRef) => {
+    // A plugin column has no document, so there is no URL to point at — the
+    // selection stays where it was and the click is just a focus change.
+    if (tab.plugin) return;
+    const col = collections.find((c) => c.name === tab.collection) ?? null;
+    const path = loaded[tab.id]?.path;
+    if (col?.singleton) go({ configure: true, collection: "", itemPath: path ?? col.path });
+    else go({ configure: false, collection: tab.collection, itemPath: col && path ? toRelItemPath(col.path, path) : "" });
+  };
+
+  // URL-writing selection handlers handed to ContentBrowser.
+  const onSelectNav = (key: string) => {
+    // `go({})` rather than go(EMPTY_SELECTION): the latter's surface:"edit" would
+    // win the spread and silently kick you off the Changes surface.
+    if (!key) return go({});
+    // A plugin sidebar link: plugin screens live on the edit surface only, so
+    // the surface is written rather than carried.
+    const pluginKey = parsePluginNavKey(key);
+    if (pluginKey) return go({ surface: "edit", plugin: { id: pluginKey.id, path: pluginKey.path } });
+    const c = collections.find((col) => col.name === key);
+    if (c?.singleton) go({ configure: true, collection: "", itemPath: c.path });
+    else go({ configure: false, collection: key, itemPath: "" });
+  };
+  const onSelectEntry = (entry: CmsEntry | null) => {
+    if (changesMode) {
+      // A change's id IS its full repo path. For a document the URL stores it
+      // relative to the collection's glob base, exactly as the editor does; a
+      // media path has no glob to strip, so it goes in whole.
+      go({
+        collection: activeNavKey,
+        itemPath: mediaChangesShowing
+          ? entry?.path ?? ""
+          : entry && active
+          ? toRelItemPath(active.path, entry.path)
+          : "",
+      });
+      return;
+    }
+    if (active?.singleton) {
+      // A singleton is its item; back and select both address the same path.
+      go({ configure: true, collection: "", itemPath: entry?.path ?? active.path });
+    } else {
+      go({ configure: false, collection: activeNavKey, itemPath: entry && active ? toRelItemPath(active.path, entry.path) : "" });
+    }
+  };
+
+  // Open a document from the list. Plain click reuses the active column (a preview
+  // tab); shift/⌘-click (newColumn) opens a new one. An already-open doc is just
+  // re-selected. Either way the URL follows the opened document.
+  const onOpenEntry = (entry: CmsEntry, opts: { newColumn: boolean }) => {
+    // Decided before the state update, not inside it: the updater is called
+    // again on a StrictMode double-invoke, which would double-count.
+    if (!openTabs.some((t: TabRef) => t.id === entry.id)) {
+      analytics.capture(AnalyticsEvent.TabOpened, {
+        collection: activeNavKey || null,
+        new_column: opts.newColumn,
+        open_tabs: openTabs.length + 1,
+      });
+    }
+    setOpenTabs((prev: TabRef[]) => {
+      if (prev.some((t) => t.id === entry.id)) return prev; // already open → just select
+      const tab: TabRef = { id: entry.id, collection: activeNavKey };
+      if (opts.newColumn) return [...prev, tab];
+      // Reuse the focused column only when it holds a document. Replacing a
+      // plugin column here would close a preview the user opened, from a click
+      // in the content list that has nothing to do with it.
+      const idx = prev.findIndex((t) => t.id === focusedTabId && !t.plugin);
+      if (idx === -1) return [...prev, tab];
+      const next = [...prev];
+      next[idx] = tab; // replace the active column's slot (preview tab)
+      return next;
+    });
+    onSelectEntry(entry);
+  };
+  const onActivateTab = (tab: OpenTab) => goToTab(tab);
+  // Reorder the open columns to match the drag result (orderedIds is the full
+  // open-tab id set in its new left-to-right order).
+  const onReorderTabs = (orderedIds: string[]) =>
+    setOpenTabs((prev: TabRef[]) => {
+      const byId = new Map(prev.map((t) => [t.id, t] as const));
+      const next = orderedIds.map((id) => byId.get(id)).filter((t): t is TabRef => !!t);
+      return next.length === prev.length ? next : prev;
+    });
+  // Close a column; if it was active, follow a neighbor (or clear the selection).
+  const onCloseTab = (id: string) => {
+    const idx = openTabs.findIndex((t: TabRef) => t.id === id);
+    const next = openTabs.filter((t: TabRef) => t.id !== id);
+    if (idx !== -1) {
+      analytics.capture(AnalyticsEvent.TabClosed, {
+        collection: openTabs[idx].collection || null,
+        open_tabs: next.length,
+        was_active: id === focusedTabId,
+      });
+    }
+    setOpenTabs(next);
+    if (id === selectedId) {
+      const nb = next[idx] ?? next[idx - 1] ?? null;
+      if (nb) goToTab(nb);
+      else go({ configure: false, collection: activeNavKey, itemPath: "" });
+    } else if (id === focusedTabId) {
+      // The focused column closed while the URL points elsewhere: focus follows
+      // a neighbor without navigating — there is no selection to move.
+      const nb = next[idx] ?? next[idx - 1] ?? null;
+      setLastFocusedTabId(nb ? nb.id : null);
+    }
+  };
+
+  // Save: merge the edited (schema) fields into the document's full field map —
+  // preserving frontmatter keys the schema doesn't surface — and persist via the
+  // updateDocument mutation. Apollo normalizes the returned Document by id, so
+  // the list/detail reflect the save without a refetch.
+  //
+  // Called when the author presses Save, not on every keystroke: edits live as a
+  // local draft in the editor until then (see useDocumentDraft in the design
+  // system). This handler is unchanged by that — it was always "persist this
+  // change" — but the cadence it runs at is now one save per deliberate action
+  // rather than one per typing pause, which is what keeps a git-backed history
+  // readable.
+  const [updateDocument] = useMutation(UPDATE_DOCUMENT);
+  const onSaveEntry = async (change: { id: string; fields: Record<string, unknown>; body: string | null }) => {
+    // Merge against the tab's loaded full field map (not the active-collection
+    // list, which is now display-only) so cross-collection saves preserve keys.
+    const doc = loaded[change.id];
+    const merged = { ...(doc?.fields ?? {}), ...change.fields };
+    try {
+      await updateDocument({
+        variables: { repositoryId: repo.id, id: change.id, fields: merged, body: change.body },
+      });
+    } catch (e: any) {
+      // Rethrow the server's message so the editor's autosave surfaces it.
+      throw new Error(e?.graphQLErrors?.[0]?.message || e?.message || "Couldn’t save your changes.");
+    }
+  };
+
+  // Create: split the form values into a body-source field (if any) + frontmatter
+  // fields, persist, then route to the new document's edit URL.
+  const [createDocument] = useMutation(CREATE_DOCUMENT);
+  const onSubmitCreate = async (values: Record<string, unknown>) => {
+    if (!active) return;
+    const fields: Record<string, unknown> = {};
+    let body: string | null = null;
+    for (const f of active.fields) {
+      if (f.source === "body") body = values[f.name] == null ? null : String(values[f.name]);
+      else fields[f.name] = values[f.name];
+    }
+    let created: DocumentT | undefined;
+    try {
+      const res = await createDocument({
+        variables: { repositoryId: repo.id, branchId: branch.id, project: projectName ?? null, collection: active.name, fields, body },
+      });
+      created = res.data?.createDocument as DocumentT | undefined;
+    } catch (e: any) {
+      // Surface the server's message so CreateForm can show it (throwing here
+      // lets the form render a dismissable alert instead of failing silently).
+      const message = e?.graphQLErrors?.[0]?.message || e?.message || "Couldn’t create the document.";
+      throw new Error(message);
+    }
+    await reloadDocs();
+    // Seed the loaded cache with the created doc so its new tab opens without a
+    // loading flash, then redirect to its edit route (which appends the tab).
+    if (created) setLoaded((prev: Record<string, DocumentT>) => ({ ...prev, [created!.id]: created! }));
+    go({ configure: false, collection: active.name, itemPath: created?.path ? toRelItemPath(active.path, created.path) : "" });
+  };
+
+  // Delete: remove documents, refresh the list, and drop any now-stale selection.
+  const [deleteDocuments] = useMutation(DELETE_DOCUMENTS);
+  const removeDocuments = async (ids: string[]) => {
+    if (ids.length === 0) return;
+    await deleteDocuments({ variables: { repositoryId: repo.id, ids } });
+    // Close any open tabs for the deleted docs and drop their loaded data.
+    setOpenTabs((prev: TabRef[]) => prev.filter((t) => !ids.includes(t.id)));
+    setLoaded((prev: Record<string, DocumentT>) => {
+      const n = { ...prev };
+      for (const id of ids) delete n[id];
+      return n;
+    });
+    await reloadDocs();
+    if (selectedId && ids.includes(selectedId)) {
+      go({ configure: false, collection: activeNavKey, itemPath: "" });
+    }
+  };
+  const onDeleteEntry = (entry: CmsEntry) => removeDocuments([entry.id]);
+  const onBulkDelete = (ids: string[]) => removeDocuments(ids);
+
+  // Rename/move: change a document's path, then follow it to its new URL. The
+  // server derives the new path from the collection's glob. Errors are rethrown
+  // (clean message) so the prompt dialog surfaces them.
+  const [renameDocument] = useMutation(RENAME_DOCUMENT);
+  const relocate = async (id: string, vars: { filename?: string; folder?: string }) => {
+    // Resolve the document's own collection (it may be a tab from another one).
+    const tab = openTabs.find((t: TabRef) => t.id === id);
+    const col = collections.find((c) => c.name === (tab?.collection ?? activeNavKey)) ?? active;
+    let newPath: string | undefined;
+    try {
+      const res = await renameDocument({ variables: { repositoryId: repo.id, id, ...vars } });
+      newPath = (res.data?.renameDocument as DocumentT | undefined)?.path;
+    } catch (e: any) {
+      throw new Error(e?.graphQLErrors?.[0]?.message || e?.message || "Couldn’t rename the document.");
+    }
+    await reloadDocs();
+    go({ configure: false, collection: col?.name ?? activeNavKey, itemPath: newPath && col ? toRelItemPath(col.path, newPath) : "" });
+  };
+  const onRename = (entry: CmsEntry, filename: string) => relocate(entry.id, { filename });
+  const onMove = (entry: CmsEntry, folder: string) => relocate(entry.id, { folder });
+
+  // Bulk move: the DS supplies the affected document ids (folders expanded), the
+  // folder they currently sit under (sourceFolder), and the target. The server
+  // re-parents each, preserving structure. Errors surface in the DS prompt.
+  const [moveDocuments] = useMutation(MOVE_DOCUMENTS);
+  const onBulkMove = async (ids: string[], sourceFolder: string, targetFolder: string) => {
+    try {
+      await moveDocuments({ variables: { repositoryId: repo.id, ids, sourceFolder, targetFolder } });
+    } catch (e: any) {
+      throw new Error(e?.graphQLErrors?.[0]?.message || e?.message || "Couldn’t move the documents.");
+    }
+    await reloadDocs();
+  };
+
+  // Empty field set for the create form (values default per control in the DS).
+  const createFields: EntryField[] = active
+    ? active.fields.map((f) => toEntryField(f, f.source === "body" ? "" : undefined))
+    : [];
+
+  // ── The changes sidebar ────────────────────────────────────────────────────
+  //
+  // A branch usually carries one project, and then this renders exactly what it
+  // always did: Changed content, Changed configuration, Media.
+  //
+  // When it carries SEVERAL, the list groups by project first. That is not
+  // decoration — a merge takes the whole branch, so the reviewer is publishing
+  // every project on it whether or not they were looking at all of them, and a
+  // flat list actively hides that. It also disambiguates: two projects may both
+  // have a "pages" collection, and one undifferentiated "Pages 3" row would be
+  // describing content the reader cannot see.
+  const changedProjects = Array.from(new Set(changeSummary.map((s) => s.project)));
+  const branchSpansProjects = changedProjects.length > 1;
+
+  const changeItem = (s: ChangeSummary) => ({
+    key: s.collection,
+    label: titleCase(s.collection),
+    icon: s.kind === "media" ? ("image" as const) : s.singleton ? ("settings" as const) : ("newspaper" as const),
+    count: s.count,
+    conflicts: s.kind === "media" ? undefined : conflictsByCollection.get(s.collection),
+  });
+  const mediaItem = (s: ChangeSummary) => ({
+    key: MEDIA_NAV_KEY, label: "Media", icon: "image" as const, count: s.count,
+  });
+
+  const projectLabelFor = (name: string) =>
+    projects?.find((p) => p.name === name)?.label || name || repo.name;
+
+  const changeSections: CmsNavSection[] = branchSpansProjects
+    ? changedProjects.map((name) => ({
+        title: projectLabelFor(name),
+        items: changeSummary
+          .filter((s) => s.project === name)
+          .map((s) => (s.kind === "media" ? mediaItem(s) : changeItem(s))),
+      })).filter((s) => s.items.length > 0)
+    : [
+        {
+          title: "Changed content",
+          items: changeSummary.filter((s) => !s.singleton && s.kind !== "media").map(changeItem),
+        },
+        {
+          title: "Changed configuration",
+          items: changeSummary.filter((s) => s.singleton && s.kind !== "media").map(changeItem),
+        },
+        {
+          // Untitled, so it renders as a standalone button — the same treatment
+          // the editor gives Media. Present only when assets actually changed.
+          title: "",
+          items: changeSummary.filter((s) => s.kind === "media").map(mediaItem),
+        },
+      ].filter((s) => s.items.length > 0);
+
+  // The confirm step's one-line summary.
+  //
+  // When the branch spans projects it NAMES them. This is the §9.1 disclosure,
+  // and the confirm step is where it belongs: merging takes the whole branch, so
+  // the moment someone is about to publish another project's work is the moment
+  // to say so — not a banner they scrolled past on the way here.
+  const totalChanges = changeSummary.reduce((n, s) => n + s.count, 0);
+  const applySummaryText = changeSummary.length
+    ? `${totalChanges} change${totalChanges === 1 ? "" : "s"} across ` +
+      `${changeSummary.length} ${changeSummary.length === 1 ? "collection" : "collections"}` +
+      (branchSpansProjects
+        ? ` in ${changedProjects.length} projects — ${changedProjects.map(projectLabelFor).join(", ")}. ` +
+          (branch.requiresChangeRequest
+            // They cannot publish all of it, so say what pressing Apply actually
+            // does rather than letting them expect a merge that will not happen.
+            ? `You can't publish every project here, so this opens a change request for review.`
+            : `Merging publishes all of them.`)
+        : "")
+    : undefined;
+
+  // Collections (globbed paths) are Content; singletons (fixed paths) are Configure.
+  // The changes surface splits the same way over only what actually changed, and
+  // counts changes rather than documents.
+  const sections: CmsNavSection[] = changesMode
+    ? changeSections
+    : [
+        {
+          title: "Content",
+          items: collections.filter((c) => !c.singleton).map((c) => ({
+            key: c.name,
+            label: titleCase(c.name),
+            icon: "newspaper" as const,
+            count: c.documentCount,
+          })),
+        },
+        {
+          title: "Configure",
+          items: collections.filter((c) => c.singleton).map((c) => ({
+            key: c.name,
+            label: titleCase(c.name),
+            icon: "settings" as const,
+          })),
+        },
+        // Plugin-contributed links, grouped by their declared section title
+        // (default "Plugins"), keyed so onSelectNav can route them.
+        ...pluginRegistry.sidebar().reduce<CmsNavSection[]>((acc, link) => {
+          const item = {
+            key: pluginNavKey(link.pluginId, link.to),
+            label: link.label,
+            icon: link.icon ?? ("braces" as const),
+          };
+          const section = acc.find((s) => s.title === link.section);
+          if (section) section.items.push(item);
+          else acc.push({ title: link.section, items: [item] });
+          return acc;
+        }, []),
+      ].filter((s) => s.items.length > 0);
+
+  // The content list needs only display fields; a document's full fields/body are
+  // loaded per open tab. An entry whose document is loaded carries the full data
+  // (so the mobile detail + any active-collection column render it); otherwise it
+  // is marked `loading` until its document arrives.
+  //
+  // On the changes surface the rows are changes, not documents: identified by
+  // path (a deletion has no document on this branch) and carrying the git status
+  // + line counts the design system's entry row already knows how to render.
+  const entries: CmsEntry[] = mediaChangesShowing
+    ? // A binary file has no line counts, so the row carries only its status —
+      // DiffStat renders nothing for 0/0, which is the honest result.
+      mediaChanges.map((c) => ({
+        id: c.path,
+        path: c.path,
+        title: c.path.split("/").pop() ?? c.path,
+        body: "",
+        status: c.status,
+      }))
+    : changesMode
+    ? branchChanges.map((c) => ({
+        id: c.path,
+        path: c.path,
+        title: c.label,
+        body: "",
+        status: c.status,
+        added: c.added,
+        removed: c.removed,
+        conflicted: conflictedPaths.has(c.path),
+      }))
+    : active
+    ? documents.map((d) => {
+        const full = loaded[d.id];
+        return full
+          ? buildEntry(full, activeNavKey)
+          : { id: d.id, path: d.path, title: d.label, body: "", loading: true };
+      })
+    : [];
+
+  // Desktop columns: the open tabs with their loaded data + per-tab collection
+  // context (a tab may belong to a collection other than the active one).
+  const dsTabs: OpenTab[] = openTabs.map((t: TabRef) => {
+    if (t.plugin) {
+      const p = t.plugin;
+      const anchor = p.documentId ? loaded[p.documentId] : undefined;
+      const anchorCollection = p.documentId
+        ? openTabs.find((x: TabRef) => x.id === p.documentId)?.collection ?? ""
+        : "";
+      return {
+        id: t.id,
+        collection: "",
+        title: p.title,
+        content: (
+          <PluginTabBody
+            registry={pluginRegistry}
+            tabId={t.id}
+            tab={p}
+            bus={draftBus}
+            initialDocument={anchor ? toPluginDoc(anchor, anchorCollection) : null}
+            workspaceId={params.workspaceId}
+            repositoryId={repo.id}
+            branchId={branch.id}
+            gitRef={branch.name}
+            apiUrl={config.apiUrl}
+            navigate={(to) => go({ surface: "edit", plugin: { id: p.pluginId, path: to } })}
+            openDocument={openDocumentById}
+            close={() => closePluginTab(t.id)}
+          />
+        ),
+      };
+    }
+    const col = collections.find((c) => c.name === t.collection) ?? null;
+    const doc = loaded[t.id];
+    return {
+      id: t.id,
+      collection: t.collection,
+      entry: doc ? buildEntry(doc, t.collection) : undefined,
+      loading: !doc,
+      readOnly: col ? !col.canUpdate : undefined,
+      canDelete: col ? col.canDelete : undefined,
+      canRename: col ? col.canUpdate && !col.singleton : false,
+      canMove: col ? col.canUpdate && !col.singleton : false,
+      collectionPath: col?.path,
+    };
+  });
+
+  // Surface switcher. Structure is deliberately absent for now — content-model
+  // editing doesn't exist yet, and an empty tab is worse than no tab.
+  const segments: SegmentItem[] = [
+    { key: "edit", label: "Edit" },
+    { key: "changes", label: "Changes", disabled: onDefaultBranch },
+  ];
+  const onSelectSegment = (key: string) => {
+    // Switching surfaces keeps the collection but drops the document: the same
+    // path is addressable on both, but a document open for editing is rarely the
+    // one you want to review, and a stale path would land on an empty pane.
+    navigation.navigate("Browser", {
+      workspaceId: params.workspaceId, repositoryId: repo.id, branchId: branch.id, defaultBranchId, projectName, soleProjectName,
+      ...EMPTY_SELECTION,
+      surface: key === "changes" ? "changes" : "edit",
+      // Keep the chosen comparison target when entering Changes.
+      targetBranchId: params.targetBranchId,
+      collection: activeNavKey,
+    });
+  };
+
+  const branches: BranchRef[] = repo.branches.map((b) => ({ id: b.id, name: b.name, protected: b.protected }));
+  const onSelectBranch = (next: BranchRef) => {
+    // A branch switch resets the selection: collections, documents and changes
+    // are all per-branch, so carrying a path across would usually 404. The
+    // target is dropped too — a target only means something against a specific
+    // source, and keeping a now-unrelated one could make source==target.
+    navigation.navigate("Browser", {
+      workspaceId: params.workspaceId, repositoryId: repo.id, branchId: next.id, defaultBranchId, projectName, soleProjectName,
+      ...EMPTY_SELECTION,
+      // Changes on the default branch is empty by definition — land on Edit.
+      surface: next.id === defaultBranchId ? "edit" : params.surface,
+    });
+  };
+  // Switch project. The whole selection resets: collections, documents and open
+  // tabs all belong to the project being left, and carrying a path across would
+  // address content that does not exist in the one being entered.
+  //
+  // The branch is kept. Projects share the repository's branches, so staying on
+  // the same one is what the user means — and if the new project has no config
+  // there, the collection list is empty, which is the honest answer rather than
+  // an error.
+  const onSelectProject = (next: ProjectRef) => {
+    navigation.navigate("Browser", {
+      workspaceId: params.workspaceId, repositoryId: repo.id, branchId: branch.id, defaultBranchId,
+      projectName: next.name, soleProjectName,
+      ...EMPTY_SELECTION,
+      surface: params.surface,
+    });
+  };
+  // Retarget the comparison, keeping the source branch and the Changes surface.
+  // The selection resets: the whole change set is recomputed against the new
+  // base, so a previously-selected path may no longer be a change.
+  const onSelectTarget = (next: BranchRef) => {
+    navigation.navigate("Browser", {
+      workspaceId: params.workspaceId, repositoryId: repo.id, branchId: branch.id, defaultBranchId, projectName, soleProjectName,
+      ...EMPTY_SELECTION,
+      surface: "changes",
+      targetBranchId: next.id,
+    });
+  };
+
+  const [createBranch] = useMutation(CREATE_BRANCH);
+  const onCreateBranch = async (name: string) => {
+    let created: Branch | undefined;
+    try {
+      const res = await createBranch({
+        variables: { repositoryId: repo.id, fromBranchId: branch.id, name },
+      });
+      created = res.data?.createBranch as Branch | undefined;
+    } catch (e: any) {
+      // Rethrow the server's message so the branch menu's inline form shows it.
+      throw new Error(e?.graphQLErrors?.[0]?.message || e?.message || "Couldn’t create the branch.");
+    }
+    // The repository list caches its branches; refetch so the new one appears in
+    // the switcher, then navigate onto it.
+    await apollo.refetchQueries({ include: [REPOSITORIES] });
+    if (created) {
+      navigation.navigate("Browser", {
+        workspaceId: params.workspaceId, repositoryId: repo.id, branchId: created.id, defaultBranchId, projectName, soleProjectName,
+        ...EMPTY_SELECTION,
+      });
+    }
+  };
+
+  if (showAllNotifications) {
+    return <NotificationsScreen items={notifications} onBack={() => setShowAllNotifications(false)} />;
+  }
+
+  // The change-request summary is its own page, not part of the three-pane
+  // browser. Back returns to the changes view for this source→target.
+  //
+  // Tested against params.surface rather than the changeRequestMode alias so the
+  // early return also narrows it to what ContentBrowser accepts below.
+  if (params.surface === "changeRequest") {
+    const backToChanges = () =>
+      navigation.navigate("Browser", {
+        workspaceId: params.workspaceId, repositoryId: repo.id, branchId: branch.id, defaultBranchId, projectName, soleProjectName,
+        targetBranchId: params.targetBranchId,
+        ...EMPTY_SELECTION,
+        surface: "changes",
+      });
+    return (
+      <Screen>
+        {changeRequestDetail ? (
+          <ChangeRequestSummary
+            data={changeRequestDetail}
+            cloneUrl={`https://github.com/${repo.owner}/${repo.name}.git`}
+            onBack={backToChanges}
+          />
+        ) : (
+          <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: 24 }}>
+            <Text variant="body" color="tertiary">No open change request for this branch.</Text>
+          </View>
+        )}
+      </Screen>
+    );
+  }
+
+  return (
+    <>
+      {/* One invisible loader per open tab — each fetches its own document.
+          Suppressed on the changes surface, which opens no documents. */}
+      {(changesMode ? [] : openTabs).filter((t: TabRef) => !t.plugin).map((tab: TabRef) => (
+        <TabDoc
+          key={tab.id}
+          repositoryId={repo.id}
+          id={tab.id}
+          user={collabUser}
+          onLoaded={handleLoaded}
+          onCollab={handleCollab}
+        />
+      ))}
+      <ContentBrowser
+      workspace={{
+        name: `${repo.owner}/${repo.name}`,
+        initials: repo.owner.slice(0, 2).toUpperCase(),
+        branch: branch.name,
+        changed: 0,
+      }}
+      // Surface switching + branch selection, both in the top bar.
+      surface={params.surface}
+      segments={segments}
+      onSelectSegment={onSelectSegment}
+      branches={branches}
+      defaultBranch={repo.defaultBranch}
+      // The picker renders nothing below two projects, so a repository without a
+      // manifest shows no new affordance at all. Hidden in local mode, which
+      // serves exactly one project by design.
+      projects={config.local ? undefined : projects?.map((p) => ({ name: p.name, label: p.label }))}
+      currentProject={projectName}
+      onSelectProject={config.local || projectLocked ? undefined : onSelectProject}
+      projectLocked={projectLocked}
+      onSelectBranch={config.local ? undefined : onSelectBranch}
+      onCreateBranch={config.local ? undefined : onCreateBranch}
+      // Source → target selector: only on the changes surface, where a target is
+      // meaningful. The name is resolved from the id (default when unset).
+      // Undefined in local mode: the comparison is against the last commit, not
+      // against another branch, so naming a branch here would claim something
+      // untrue. There is likewise no target to pick.
+      targetBranch={config.local ? undefined : changesMode ? repo.branches.find((b) => b.id === targetBranchId)?.name : (branchFrozen ? frozenCR?.targetBranch : undefined)}
+      onSelectTarget={config.local ? undefined : onSelectTarget}
+      // Apply changes (merge). Enabled when there are changes and no unresolved
+      // conflicts; the modal is driven by the run's live state.
+      onApplyChanges={changesMode && !onDefaultBranch && !config.local ? onApplyChanges : undefined}
+      // Left enabled even when the branch spans projects the user cannot all
+      // edit. Applying WORKS for them: the run stops before writing anything and
+      // lands in needs_review, which is where the existing change-request flow
+      // takes over — the same destination a code conflict reaches. Disabling it
+      // was the earlier design and was a dead end, since opening a change request
+      // requires a run to open it from. What changes is only the expectation,
+      // which applySummary states before they commit.
+      canApplyChanges={changeSummary.length > 0 && !hasUnresolvedConflicts}
+      applyOpen={applyOpen}
+      applySummary={applySummaryText}
+      applyProgress={applyProgress}
+      applyConflictCount={conflicts.filter((c) => !c.resolution).length}
+      onConfirmApply={onConfirmApply}
+      onReviewConflicts={reviewConflicts}
+      onCloseApply={closeApply}
+      onDoneApply={doneApply}
+      // Developer escalation: an open change request swaps the confirm step for a
+      // "view change request" link; a needs_review run collects an explanation.
+      changeRequestOpen={changeRequestOpen || branchFrozen}
+      changeRequestUrl={changeRequestSummaryUrl}
+      creatingChangeRequest={creatingChangeRequest}
+      onCreateChangeRequest={onCreateChangeRequest}
+      onViewChangeRequest={goToChangeRequest}
+      selectedChange={selectedChange}
+      selectedConflicts={selectedConflicts}
+      onResolveConflict={onResolveConflict}
+      loadingChange={loadingChange}
+      sections={sections}
+      activeNavKey={activeNavKey}
+      onSelectNav={onSelectNav}
+      entries={entries}
+      // Server-side pagination of the flat entry list: the FlatList requests the
+      // next page as it nears the end; totalEntries drives the header count.
+      totalEntries={total}
+      hasMoreEntries={hasMoreEntries}
+      loadingMoreEntries={loadingMoreEntries}
+      onLoadMoreEntries={onLoadMoreEntries}
+      // Title search + faceted filters (server-side). Enabled for real collections
+      // (not singletons). onCountMatches powers the panel's optimistic count.
+      searchable={!changesMode && !!active && !active.singleton}
+      facetFields={facetFields}
+      onSearchChange={onSearchChange}
+      onApplyFilters={onApplyFilters}
+      onClearSearch={onClearSearch}
+      onCountMatches={onCountMatches}
+      selectedEntryId={selectedId}
+      onSelectEntry={onSelectEntry}
+      // Host-controlled desktop tabs: each column loads its own document, and the
+      // set persists across collection switches.
+      openTabs={dsTabs}
+      activeTabId={focusedTabId}
+      onOpenEntry={onOpenEntry}
+      onActivateTab={onActivateTab}
+      onCloseTab={onCloseTab}
+      onReorderTabs={onReorderTabs}
+      userInitials="ED"
+      onSignOut={onSignOut}
+      // Plugin-contributed user-menu items: a `to` link navigates into the
+      // plugin's screen; an action link runs the plugin's own handler.
+      userMenuItems={pluginRegistry.userMenu().map((link) => ({
+        label: link.label,
+        icon: link.icon,
+        onSelect:
+          link.onSelect ??
+          (() => go({ surface: "edit", plugin: { id: link.pluginId, path: link.to ?? "" } })),
+      }))}
+      // A plugin route replaces the content panes with the plugin's screen; the
+      // sidebar (and its highlight, via the plugin nav key) stays.
+      contentSlot={
+        params.plugin ? (
+          <PluginScreenHost
+            registry={pluginRegistry}
+            pluginId={params.plugin.id}
+            path={params.plugin.path}
+            workspaceId={params.workspaceId}
+            repositoryId={repo.id}
+            branchId={branch.id}
+            apiUrl={config.apiUrl}
+            navigate={(to) => go({ surface: "edit", plugin: { id: params.plugin!.id, path: to } })}
+          />
+        ) : undefined
+      }
+      contentTitle={params.plugin ? params.plugin.id : undefined}
+      entriesEmpty={changesMode ? "No changes on this branch" : "Choose a collection"}
+      // Plugin toolbar buttons on an open document, and the in-flight draft
+      // channel those buttons' tabs subscribe to. Both are inert on the changes
+      // surface, where a "document" is a diff rather than something editable.
+      documentActions={
+        changesMode
+          ? undefined
+          : (entry) => {
+              const tab = openTabs.find((t: TabRef) => t.id === entry.id && !t.plugin);
+              const doc = loaded[entry.id];
+              if (!tab || !doc) return null;
+              return (
+                <PluginDocumentActions
+                  registry={pluginRegistry}
+                  document={toPluginDoc(doc, tab.collection)}
+                  context={{
+                    workspaceId: params.workspaceId,
+                    repositoryId: repo.id,
+                    branchId: branch.id,
+                    ref: branch.name,
+                    apiUrl: config.apiUrl,
+                    openTab: (pluginId, spec) => openPluginTab(pluginId, spec, entry.id),
+                    openDocument: openDocumentById,
+                  }}
+                />
+              );
+            }
+      }
+      onEntryDraft={
+        changesMode
+          ? undefined
+          : (draft) => {
+              const tab = openTabs.find((t: TabRef) => t.id === draft.id && !t.plugin);
+              const doc = loaded[draft.id];
+              if (!tab || !doc) return;
+              const col = collections.find((c) => c.name === tab.collection);
+              draftBus.publish({
+                id: draft.id,
+                collection: tab.collection,
+                path: doc.path,
+                // The draft's fields are the schema's; merge over the document's
+                // full map so frontmatter keys the schema does not surface still
+                // reach a preview, exactly as onSaveEntry merges them for a save.
+                fields: { ...(doc.fields ?? {}), ...draft.fields },
+                body: draft.body ?? undefined,
+                bodyField: col?.fields.find((f) => f.source === "body")?.name,
+              });
+            }
+      }
+      renderField={renderField}
+      media={media}
+      // Nothing on the changes surface is editable; nor is a frozen branch (one
+      // handed to a developer in an open change request).
+      onSaveEntry={changesMode || branchFrozen ? undefined : onSaveEntry}
+      // CRUD wiring driven by the active collection's effective permissions, and
+      // fully disabled while the branch is frozen in a change request.
+      readOnly={changesMode || branchFrozen || (!!active && !active.canUpdate)}
+      canCreate={!changesMode && !branchFrozen && !!active?.canCreate}
+      onStartCreate={() => active && go({ configure: false, collection: active.name, itemPath: "", create: true })}
+      creating={!!params.create && !!active}
+      createFields={createFields}
+      onSubmitCreate={onSubmitCreate}
+      onCancelCreate={() => active && go({ configure: false, collection: active.name, itemPath: "" })}
+      canDelete={!changesMode && !branchFrozen && !!active?.canDelete}
+      // Frozen-branch read-only banner (below the top bar). "Learn more" opens the
+      // modal, which surfaces the shareable change-request link.
+      readOnlyNotice={branchFrozen ? "This branch is in an open change request and is read-only until it merges or is rejected." : undefined}
+      readOnlyNoticeActionLabel="Learn more"
+      onReadOnlyNoticeAction={branchFrozen ? openChangeRequestModal : undefined}
+      onDeleteEntry={onDeleteEntry}
+      selectable={!changesMode && !!active?.canDelete && !active?.singleton}
+      onBulkDelete={onBulkDelete}
+      // Rename/move (path changes). Gated in the DS by canUpdate (readOnly) and,
+      // for move, by whether the collection glob is hierarchical (collectionPath).
+      onRename={!changesMode && active && active.canUpdate && !active.singleton ? onRename : undefined}
+      onMove={!changesMode && active && active.canUpdate && !active.singleton ? onMove : undefined}
+      onBulkMove={!changesMode && active && active.canUpdate && !active.singleton ? onBulkMove : undefined}
+      collectionPath={active?.path}
+      // A `**`-globbed collection spans nested folders — browse it as a folder
+      // drill-down rooted at the glob's wildcard-free base directory.
+      hierarchical={hierarchicalActive && !searchActive}
+      rootPath={active ? globBase(active.path) : ""}
+      notifications={notifications}
+      unreadNotifications={unreadNotifications}
+      importing={importing}
+      onOpenNotifications={() => {
+        // Mark the context read on open, then refresh so the dot clears.
+        void markAllRead().then(() => refetchNotifs());
+      }}
+      onViewAllNotifications={() => setShowAllNotifications(true)}
+      />
+    </>
+  );
+}
+
+// Resolve which branch to open for a repo: an explicit choice, else the
+// conventional default (main/master), else the first branch. Branch isn't part
+// of the URL, so a fresh deep link to a repo lands on its default branch.
+function pickBranch(repo: Repository | undefined, branchId?: string): Branch | undefined {
+  if (!repo) return undefined;
+  if (branchId) return repo.branches.find((b) => b.id === branchId);
+  return (
+    repo.branches.find((b) => b.name === "main") ??
+    repo.branches.find((b) => b.name === "master") ??
+    repo.branches[0]
+  );
+}
+
+// The WorkspacePicker route (/app). Redirects straight into a workspace when one
+// is pinned by config or the user belongs to exactly one; otherwise it shows the
+// list so the user can choose which workspace to enter.
+function WorkspacePickerScreen({ workspaces, loading, error, onSignOut }: { workspaces: Workspace[]; loading: boolean; error: boolean; onSignOut: () => void }) {
+  const navigation = useNavigation<any>();
+  const autoId = config.workspaceId ?? (!loading && workspaces.length === 1 ? workspaces[0].id : undefined);
+  useEffect(() => {
+    if (autoId) navigation.dispatch(StackActions.replace("RepoPicker", { workspaceId: autoId }));
+  }, [autoId, navigation]);
+  // Hold the app-shell skeleton while resolving or redirecting so the picker
+  // doesn't flash before an auto-selected workspace takes over.
+  if (loading || autoId) return <ContentBrowserSkeleton />;
+  return (
+    <WorkspacePicker
+      workspaces={workspaces}
+      loading={loading}
+      error={error}
+      onPick={(w) => navigation.navigate("RepoPicker", { workspaceId: w.id })}
+      onSignOut={onSignOut}
+    />
+  );
+}
+
+// The RepoPicker route (/app/{ws}). Loads the chosen workspace's repositories;
+// choosing a repo+branch pushes the Browser route, which the URL now reflects.
+function RepoPickerScreen({ workspaces, onSignOut }: { workspaces: Workspace[]; onSignOut: () => void }) {
+  const navigation = useNavigation<any>();
+  const route = useRoute();
+  const { workspaceId } = route.params as { workspaceId: string };
+  // The active workspace's name for the topbar affordance. A pinned workspace
+  // (config.workspaceId) skips the WORKSPACES query, so fall back to a neutral
+  // label and drop the "change workspace" action — there's nothing to switch to.
+  const workspaceName = workspaces.find((w) => w.id === workspaceId)?.name ?? "Workspace";
+  const onChangeWorkspace = config.workspaceId ? undefined : () => navigation.navigate("WorkspacePicker");
+  const { data, loading, error } = useQuery(REPOSITORIES, { variables: { workspaceId } });
+  const repos: Repository[] = data?.repositories ?? [];
+  // When a repository is pinned by config, only offer that one.
+  const scoped = config.repositoryId ? repos.filter((r) => r.id === config.repositoryId) : repos;
+  // A pinned repository skips the picker entirely: redirect straight into it on
+  // its default branch once it has loaded, mirroring the workspace pin above.
+  const pinned = config.repositoryId ? scoped[0] : undefined;
+  const pinnedBranch = pickBranch(pinned);
+  useEffect(() => {
+    if (pinned && pinnedBranch) {
+      navigation.dispatch(
+        StackActions.replace("Browser", {
+          workspaceId,
+          repositoryId: pinned.id,
+          branchId: pinnedBranch.id,
+          ...EMPTY_SELECTION,
+        }),
+      );
+    }
+  }, [pinned, pinnedBranch, workspaceId, navigation]);
+  // Hold the app-shell skeleton while the pinned repo resolves/redirects so the
+  // picker never flashes before the auto-selection takes over.
+  if (config.repositoryId && (loading || (pinned && pinnedBranch))) return <ContentBrowserSkeleton />;
+  return (
+    <RepoPicker
+      repos={scoped}
+      loading={loading}
+      error={!!error}
+      onPick={(repo, branch) => navigation.navigate("Browser", { workspaceId, repositoryId: repo.id, branchId: branch.id, ...EMPTY_SELECTION })}
+      onSignOut={onSignOut}
+      workspaceName={workspaceName}
+      onChangeWorkspace={onChangeWorkspace}
+    />
+  );
+}
+
+// A terminal configuration error, shown instead of the editor.
+//
+// Reserved for a deployment misconfiguration the user cannot fix from inside the
+// app — currently only a cms.config.js PROJECT lock naming a project that does
+// not exist. It fails loudly on purpose: the precedent in this codebase is that
+// a typo in cms.config.mjs is a startup error, because a locked editor quietly
+// showing a different project's content is worse than one that will not open.
+function ConfigError({ title, detail, hint }: { title: string; detail: string; hint?: string }) {
+  return (
+    <Screen>
+      <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: 24, gap: 8 }}>
+        <Text variant="body" weight="semibold">{title}</Text>
+        <Text variant="sm" color="secondary" style={{ textAlign: "center" }}>{detail}</Text>
+        {hint ? <Text variant="monoSm" color="tertiary" style={{ textAlign: "center" }}>{hint}</Text> : null}
+      </View>
+    </Screen>
+  );
+}
+
+// One branch's import state, as the editor needs it: the query answers on load,
+// the subscription keeps answering for the rest of the session. Live data wins
+// whenever it exists — BranchImport is not a normalized cache entity (it has no
+// id), so a subscription push cannot update the query's cached field on its own.
+//
+// `unknown` is the state before either has answered. It is worth a name because
+// the editor must not paint anything until it clears: an empty editor and a
+// first-import-in-progress look identical, and guessing wrong shows the user a
+// repository that appears to have no content.
+type BranchImportState = {
+  status: string;
+  running: boolean;
+  imported: boolean;
+  error?: string | null;
+  errorCode?: string | null;
+};
+
+function useBranchImport(repositoryId?: string, branchId?: string) {
+  const apollo = useApolloClient();
+  const skip = !repositoryId || !branchId;
+  const variables = { repositoryId, branchId };
+  // cache-and-network so a revisit paints from cache immediately and still
+  // corrects itself — the first paint of every editor load waits on this answer.
+  const { data, loading, refetch } = useQuery(BRANCH_IMPORT, {
+    variables,
+    skip,
+    fetchPolicy: "cache-and-network",
+  });
+  const [live, setLive] = useState<BranchImportState | null>(null);
+  // Tracks the previous render's `running`, to spot the moment an import lands.
+  const wasRunning = useRef(false);
+  // A branch switch invalidates the previous branch's live state; without this
+  // the new branch would inherit it until the new subscription's first emission.
+  // Declared before the landing effect below so it resets first, and the new
+  // branch is never credited with the old one's in-flight import.
+  useEffect(() => { setLive(null); wasRunning.current = false; }, [repositoryId, branchId]);
+  useSubscription(BRANCH_IMPORT_PROGRESS, {
+    variables,
+    // Not in local mode: the working copy is never imported, so the stream has
+    // nothing to say — and the local server's WebSocket transport can't carry
+    // its session token anyway, so subscribing would only fail on a loop.
+    skip: skip || config.local,
+    onData: ({ data: payload }) => {
+      const next = payload.data?.branchImportProgress;
+      if (next) setLive(next);
+    },
+  });
+
+  const state: BranchImportState | null = live ?? data?.branchImport ?? null;
+
+  // An import that just landed replaced the content behind every open query, so
+  // re-read them. When this fires for a FIRST import the editor is not mounted
+  // yet and the only active query is the repository list — which is exactly the
+  // one that has to be re-read, since the branch's projects arrive with the
+  // import.
+  useEffect(() => {
+    if (!state) return;
+    if (wasRunning.current && !state.running) void apollo.refetchQueries({ include: "active" });
+    wasRunning.current = state.running;
+  }, [state?.running, apollo]);
+
+  const firstImport = !!state && !state.imported;
+  return {
+    // Nothing has answered yet. Distinct from "no import run exists", which is a
+    // real answer (status "none") and lets the editor open.
+    unknown: !skip && !state,
+    // The first import of this branch is in flight: no content exists yet, so
+    // the editor has nothing to render.
+    firstImportRunning: firstImport && state.running,
+    // The first import failed. Nothing was ever imported, so there is no content
+    // to fall back on.
+    firstImportFailed: firstImport && state.status === "failed",
+    // A re-import over content that is already on screen. The editor stays
+    // usable; only the bell changes.
+    importing: !!state && state.running && state.imported,
+    error: state?.error ?? undefined,
+    errorCode: state?.errorCode ?? undefined,
+    rechecking: loading,
+    recheck: () => { void refetch(); },
+  };
+}
+
+// The Browser route (/app/{ws}/repositories/{repo}[/…]). Resolves the repo +
+// branch within the route's workspace, then hands off to CmsView.
+function BrowserScreen({ onSignOut, workspaces }: { onSignOut: () => void; workspaces: Workspace[] }) {
+  const navigation = useNavigation<any>();
+  const route = useRoute();
+  const { workspaceId, repositoryId, branchId, projectName } = route.params as BrowserParams;
+  const { data, loading } = useQuery(REPOSITORIES, { variables: { workspaceId } });
+  const repos: Repository[] = data?.repositories ?? [];
+  const repo = repos.find((r) => r.id === repositoryId);
+  const branch = pickBranch(repo, branchId);
+  const project = resolveProject(repo, projectName);
+  // Resolved from the repository's provider default branch. It is the base the
+  // changes surface compares against, and the branch whose id navigation.tsx
+  // omits from the URL — so pre-existing links stay unchanged.
+  const defaultBranchId = repo?.branches.find((b) => b.name === repo.defaultBranch)?.id;
+  // Where this branch stands with importing. The URL usually carries the branch
+  // id, so this fires on the first render alongside the repository list rather
+  // than waiting for it — only a link to a repository root (no branch in the
+  // path) has to resolve the default branch first.
+  const branchImport = useBranchImport(repositoryId, branchId ?? branch?.id);
+  // Repositories still loading: hold the app-shell skeleton (the dashboard opens
+  // editors straight at a repo URL) rather than flashing a not-found state.
+  if (loading && !repo) return <ContentBrowserSkeleton />;
+  // Stale/unknown repo link: fall back to the picker so the user can recover.
+  if (!repo || !branch) {
+    const workspaceName = workspaces.find((w) => w.id === workspaceId)?.name ?? "Workspace";
+    const onChangeWorkspace = config.workspaceId ? undefined : () => navigation.navigate("WorkspacePicker");
+    return (
+      <RepoPicker
+        repos={repos}
+        loading={false}
+        error={false}
+        onPick={(r, b) => navigation.navigate("Browser", { workspaceId, repositoryId: r.id, branchId: b.id, ...EMPTY_SELECTION })}
+        onSignOut={onSignOut}
+        workspaceName={workspaceName}
+        onChangeWorkspace={onChangeWorkspace}
+      />
+    );
+  }
+  // A cms.config.js PROJECT naming a project this repository does not have is a
+  // startup error, matching the precedent that a typo in cms.config.mjs fails
+  // loudly rather than producing a silently degraded editor. Showing another
+  // project's content would defeat the point of locking.
+  if (project.locked && project.missing) {
+    return (
+      <ConfigError
+        title="This editor is locked to a project that does not exist"
+        detail={`cms.config.js names PROJECT "${config.project}", but ${repo.owner}/${repo.name} has no such project.`}
+        hint={(repo.projects ?? []).length > 0
+          ? `It has: ${(repo.projects ?? []).map((p) => p.name || "(unnamed)").join(", ")}.`
+          : "It has no imported projects yet."}
+      />
+    );
+  }
+  // ---- the first-import gate ------------------------------------------------
+  // A branch whose content has never been imported cannot be edited, and an
+  // empty editor would say something false about the repository. Hold the whole
+  // screen until the import lands (the subscription ends this by itself), or say
+  // why it never will.
+  //
+  // The unknown case holds the same skeleton the app already shows while the
+  // repository list loads. It costs a round trip on a cold load — an editor
+  // opened without a branch in the URL can only ask once the default branch has
+  // resolved — and buys never flashing an empty editor over a running first
+  // import. The query is cache-and-network, so every later visit paints at once.
+  const repoLabel = `${repo.owner}/${repo.name}`;
+  if (branchImport.unknown) return <ContentBrowserSkeleton />;
+  if (branchImport.firstImportRunning) {
+    return <BranchImportingScreen branch={branch.name} repository={repoLabel} />;
+  }
+  if (branchImport.firstImportFailed) {
+    return (
+      <BranchImportFailedScreen
+        branch={branch.name}
+        repository={repoLabel}
+        error={branchImport.error}
+        errorCode={branchImport.errorCode}
+        // The editor cannot start an import; re-reading the state is the useful
+        // action right after committing the config the message asked for.
+        onRecheck={branchImport.recheck}
+        rechecking={branchImport.rechecking}
+      />
+    );
+  }
+
+  return (
+    <CmsView
+      repo={repo}
+      branch={branch}
+      defaultBranchId={defaultBranchId}
+      // A re-import over content that is already imported. The editor stays
+      // fully usable and only the notification bell reports it.
+      importing={branchImport.importing}
+      projectName={project.name}
+      projects={project.projects}
+      soleProjectName={project.sole?.name}
+      projectLocked={project.locked}
+      onSignOut={onSignOut}
+    />
+  );
+}
+
+function Authed({ onSignOut }: { onSignOut: () => void }) {
+  // Skip the workspace list entirely when a workspace is pinned by config — the
+  // WorkspacePicker screen redirects straight into it.
+  const { data, loading, error } = useQuery(WORKSPACES, { skip: !!config.workspaceId });
+  const workspaces: Workspace[] = data?.workspaces ?? [];
+
+  // The whole /app URL tree is a navigator: WorkspacePicker at the root,
+  // RepoPicker beneath a workspace, Browser beneath a repository. The current
+  // screen + its params ARE the URL.
+  return (
+    <NavigationRoot>
+      <RootStack.Navigator initialRouteName="WorkspacePicker">
+        <RootStack.Screen name="WorkspacePicker">
+          {() => <WorkspacePickerScreen workspaces={workspaces} loading={loading} error={!!error} onSignOut={onSignOut} />}
+        </RootStack.Screen>
+        <RootStack.Screen name="RepoPicker">
+          {() => <RepoPickerScreen workspaces={workspaces} onSignOut={onSignOut} />}
+        </RootStack.Screen>
+        <RootStack.Screen name="Browser">
+          {() => <BrowserScreen onSignOut={onSignOut} workspaces={workspaces} />}
+        </RootStack.Screen>
+      </RootStack.Navigator>
+    </NavigationRoot>
+  );
+}
+
+function Root() {
+  // "loading" while we resolve the session (PKCE callback or a silent authorize
+  // redirect); "authed" once we hold an access token; "login" to fall back to the
+  // sign-in form when there is no issuer session to authorize against.
+  const [phase, setPhase] = useState<"loading" | "authed" | "login">("loading");
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      // First, handle a return from the issuer's /authorize (a ?code or ?error).
+      const result = await handleCallback();
+      if (cancelled) return;
+      if (result.kind === "token") {
+        setAuthToken(result.accessToken);
+        setPhase("authed");
+        return;
+      }
+      if (result.kind === "error") {
+        // login_required (no issuer session) or an exchange failure: show the
+        // sign-in form rather than redirect-looping.
+        setPhase("login");
+        return;
+      }
+      if (result.kind === "loggedout") {
+        // Just returned from /logout with the session cleared: land on sign-in
+        // and do NOT auto-authorize, or we'd immediately sign back in.
+        setPhase("login");
+        return;
+      }
+      // A sticky sign-out from an earlier click in this tab (survives the logout
+      // round-trip and any reload): stay on sign-in instead of silently
+      // re-establishing a session from a still-live issuer cookie — via the
+      // broker or the PKCE bounce — until the user signs in again.
+      if (isSignedOut()) {
+        setPhase("login");
+        return;
+      }
+      // Served by `gogitcms-editor dev`? Take the token the CLI is lending rather
+      // than bouncing through an issuer that cannot allowlist a localhost port.
+      const brokered = await brokeredToken();
+      if (cancelled) return;
+      if (brokered) {
+        setAuthToken(brokered);
+        setPhase("authed");
+        return;
+      }
+      // A plain load with no session yet: start the PKCE flow. If the user has a
+      // session at the issuer (e.g. opened from the dashboard) this bounces back
+      // with a code silently; otherwise it returns ?error and we land on login.
+      void beginAuthorize();
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Render the app shell as a skeleton while authorizing rather than flashing the
+  // login form or a bare spinner.
+  if (phase === "loading") {
+    return <ContentBrowserSkeleton />;
+  }
+  return (
+    <>
+      {/* Mounted in every phase, not just the authed one, so it observes the
+          sign-out transition and can reset the analytics identity. */}
+      <IdentifyUser authed={phase === "authed"} />
+      {phase === "authed" ? (
+        <Authed
+          onSignOut={() => {
+            // Reflect the sign-out in the UI immediately, before the /logout
+            // navigation. That top-level request clears the issuer session cookie,
+            // but it only bounces back to the editor (re-bootstrapping the app)
+            // when this origin is on the redirect allowlist. A self-hosted editor
+            // that isn't registered gets a 204 instead, which aborts the
+            // navigation and leaves the browser sitting on the stale, still-authed
+            // page until a manual refresh. Flipping to the signed-out view here
+            // makes logout take effect regardless of how /logout answers.
+            setAuthToken("");
+            setPhase("login");
+            beginLogout();
+          }}
+        />
+      ) : (
+        <Login onDone={(tok) => { clearSignedOut(); setAuthToken(tok); setPhase("authed"); }} />
+      )}
+    </>
+  );
+}
+
+// IdentifyUser ties analytics events to the signed-in user. It renders nothing;
+// the ME query is already in Apollo's cache from the editor screen, so this
+// costs no extra request. The id is the identity; the email rides along as a
+// person property so the person is recognizable in PostHog.
+function IdentifyUser({ authed }: { authed: boolean }) {
+  const { data } = useQuery(ME, { skip: !authed });
+  const me = data?.me as { id: string; email?: string } | undefined;
+  useIdentify(authed ? me?.id : undefined, me?.email ? { email: me.email } : undefined);
+  return null;
+}
+
+export default function App() {
+  return (
+    <AnalyticsProvider config={analyticsConfig}>
+      <ThemeProvider>
+        <ApolloProvider client={client}>
+          <Root />
+        </ApolloProvider>
+      </ThemeProvider>
+    </AnalyticsProvider>
+  );
+}