@gogitcms/editor 0.23.0

package/app/vendor/analytics/src/config.ts

@@ -0,0 +1,94 @@
+// Build-time PostHog configuration, shared by every CMS front end.
+//
+// Each app resolves the raw values from wherever it gets configured — the
+// frontend from cms.config.js or the server's window globals, the dashboard and
+// desktop app from Vite env vars — and hands them here to be normalized. The
+// key names are deliberately the same everywhere so operators only learn one
+// vocabulary; only the transport differs.
+//
+// Analytics is off unless POSTHOG_API_KEY is present, matching the Go server's
+// CMS_POSTHOG_API_KEY switch: a self-hosted CMS phones home to nobody.
+
+/** Raw string values as they arrive from a config file or env vars. */
+export type RawAnalyticsConfig = {
+  POSTHOG_API_KEY?: string;
+  POSTHOG_API_HOST?: string;
+  POSTHOG_UI_HOST?: string;
+  POSTHOG_ENVIRONMENT?: string;
+  /** "true" opts this build into session replay. Off unless set — see below. */
+  POSTHOG_SESSION_RECORDING?: string;
+};
+
+export type AnalyticsConfig = {
+  apiKey: string;
+  apiHost: string;
+  uiHost?: string;
+  environment?: string;
+  sessionRecording: boolean;
+};
+
+export const DEFAULT_API_HOST = "https://us.i.posthog.com";
+
+const clean = (v: string | undefined | null): string | undefined => {
+  const s = typeof v === "string" ? v.trim() : "";
+  return s === "" ? undefined : s;
+};
+
+/**
+ * resolveAnalyticsConfig normalizes raw values into an AnalyticsConfig. An
+ * absent or blank POSTHOG_API_KEY yields an empty apiKey, which is what
+ * isAnalyticsEnabled keys off.
+ */
+export function resolveAnalyticsConfig(raw: RawAnalyticsConfig | undefined | null): AnalyticsConfig {
+  const r = raw ?? {};
+  return {
+    apiKey: clean(r.POSTHOG_API_KEY) ?? "",
+    apiHost: clean(r.POSTHOG_API_HOST) ?? DEFAULT_API_HOST,
+    uiHost: clean(r.POSTHOG_UI_HOST),
+    environment: clean(r.POSTHOG_ENVIRONMENT),
+    // Opt-in, never opt-out. The CMS renders customer content — draft posts,
+    // unpublished copy, private repositories — and a session replay records all
+    // of it into a third party. That is a decision for whoever runs the
+    // deployment to make deliberately, not a default they inherit.
+    sessionRecording: clean(r.POSTHOG_SESSION_RECORDING) === "true",
+  };
+}
+
+export const isAnalyticsEnabled = (cfg: AnalyticsConfig): boolean => cfg.apiKey !== "";
+
+/**
+ * posthogOptions maps an AnalyticsConfig onto posthog-js init options.
+ *
+ * The privacy-relevant choices, all of which matter for a CMS:
+ *
+ *   person_profiles  identified_only — anonymous visitors don't create person
+ *                    records; only signed-in users do, once identify() runs.
+ *   autocapture      on, but it records which element was clicked, never the
+ *                    text typed into it.
+ *   mask_all_text    on for session replay, so if a deployment does opt in, the
+ *                    recording still won't contain the content being edited.
+ *
+ * capture_exceptions is set explicitly rather than left to default: undefined
+ * means "whatever the project's remote config says", so error tracking silently
+ * depended on a PostHog UI toggle and was off for every deployment here. `true`
+ * hooks window.onerror and unhandledrejection, which is what turns a crashed
+ * render or a rejected API promise into an $exception. Console errors stay off
+ * (their default) — the CMS logs plenty that aren't faults.
+ */
+export function posthogOptions(cfg: AnalyticsConfig): Record<string, unknown> {
+  return {
+    capture_exceptions: true,
+    api_host: cfg.apiHost,
+    ...(cfg.uiHost ? { ui_host: cfg.uiHost } : {}),
+    // Pins the behaviour of every option we don't set explicitly, so a
+    // posthog-js upgrade can't silently change what gets captured.
+    defaults: "2025-05-24",
+    person_profiles: "identified_only",
+    // Both SPAs drive real URLs, so history-based pageviews line up with the
+    // routes users actually see.
+    capture_pageview: "history_change",
+    disable_session_recording: !cfg.sessionRecording,
+    mask_all_text: true,
+    session_recording: { maskAllInputs: true },
+  };
+}

package/app/vendor/analytics/src/events.ts

@@ -0,0 +1,56 @@
+// The CMS's product-analytics taxonomy.
+//
+// Every event name lives here rather than as a string literal at the call site,
+// because a typo in an event name is invisible: nothing errors, the event just
+// lands under a slightly different name and quietly splits a funnel in two.
+// capture() only accepts these names, so a new event has to be added here first.
+//
+// Naming: snake_case, object then past-tense verb (workspace_created, not
+// create_workspace), so related events sort together in PostHog's event list.
+//
+// PROPERTIES — what must never go in one:
+//   * Content. Document bodies, field values, and search query text are the
+//     customer's material, not ours to ship to a third party.
+//   * Personal data. Emails and names; identify() already ties events to a user
+//     ID, which is the join key for anything else.
+//   * Free-text a user typed. It reliably contains the two things above.
+// Prefer opaque ids (joinable against the product database), schema metadata
+// (collection and field names), counts, and enumerations.
+
+export const AnalyticsEvent = {
+  // --- Dashboard: signup and onboarding ---
+  MagicLinkRequested: "magic_link_requested",
+  GitHubOAuthStarted: "github_oauth_started",
+  RegistrationCompleted: "registration_completed",
+  WorkspaceCreated: "workspace_created",
+
+  // --- Dashboard: connecting a repository ---
+  GitHubOrganizationConnected: "github_organization_connected",
+  GitHubRepositorySelected: "github_repository_selected",
+  RepositoryImportSucceeded: "repository_import_succeeded",
+  RepositoryImportFailed: "repository_import_failed",
+
+  // --- Dashboard: self-hosted editors ---
+  SelfHostedEditorModalOpened: "self_hosted_editor_modal_opened",
+  SelfHostedEditorAdded: "self_hosted_editor_added",
+
+  // --- Dashboard: opening the editor ---
+  // Properties: workspace_id, target ("cloud" | "self_hosted"), source (the
+  // surface the launch started from). Which editor was picked is an id, never
+  // the customer's own hostname.
+  EditorLaunched: "editor_launched",
+
+  // --- Editor: finding content ---
+  BasicSearchExecuted: "basic_search_executed",
+  AdvancedSearchExecuted: "advanced_search_executed",
+
+  // --- Editor: navigating content ---
+  TabOpened: "tab_opened",
+  TabClosed: "tab_closed",
+  CollectionViewed: "collection_viewed",
+  CollectionItemViewed: "collection_item_viewed",
+  ConfigurationItemViewed: "configuration_item_viewed",
+} as const;
+
+/** The only event names capture() accepts. */
+export type AnalyticsEventName = (typeof AnalyticsEvent)[keyof typeof AnalyticsEvent];

package/app/vendor/analytics/src/index.ts

@@ -0,0 +1,23 @@
+// @gogitcms/analytics — PostHog for the CMS front ends.
+//
+// Configuration-driven and off by default, mirroring the Go server's
+// packages/telemetry: with no POSTHOG_API_KEY baked into the build, the SDK is
+// never loaded and nothing is sent. See config.ts for how each app supplies it.
+export {
+  DEFAULT_API_HOST,
+  isAnalyticsEnabled,
+  posthogOptions,
+  resolveAnalyticsConfig,
+  type AnalyticsConfig,
+  type RawAnalyticsConfig,
+} from "./config";
+export { AnalyticsEvent, type AnalyticsEventName } from "./events";
+export {
+  AnalyticsProvider,
+  captureException,
+  useAnalytics,
+  useIdentify,
+  type Analytics,
+  type AnalyticsProperties,
+  type AnalyticsProviderProps,
+} from "./provider";

package/app/vendor/analytics/src/provider.tsx

@@ -0,0 +1,196 @@
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { type AnalyticsConfig, isAnalyticsEnabled, posthogOptions } from "./config";
+import { type AnalyticsEventName } from "./events";
+
+// The bit of posthog-js this package uses. Declared structurally rather than
+// imported as a type from posthog-js, so nothing in the module graph reaches the
+// SDK — a type-only import would be erased, but it is easy to turn one into a
+// value import by accident and silently undo the code splitting below.
+type PostHogClient = {
+  init(apiKey: string, options: Record<string, unknown>): void;
+  /** Only names from the AnalyticsEvent taxonomy — see events.ts. */
+  capture(event: AnalyticsEventName, properties?: AnalyticsProperties): void;
+  captureException(error: unknown, properties?: Record<string, unknown>): void;
+  identify(id: string, properties?: Record<string, unknown>): void;
+  register(properties: Record<string, unknown>): void;
+  reset(): void;
+};
+
+const ClientContext = createContext<PostHogClient | null>(null);
+
+// The same client, reachable outside React. Errors are raised by plain modules
+// too — the REST client is the main one — and those callers have no hook to
+// call. Assigned by AnalyticsProvider, null whenever PostHog is unconfigured or
+// its chunk is still loading.
+let liveClient: PostHogClient | null = null;
+
+// Exceptions raised before the SDK chunk arrives, held so they aren't lost. The
+// dashboard fires its first API requests on mount, well before a ~230 kB import
+// resolves, so the failures most worth seeing — the ones on initial load — are
+// exactly the ones that would otherwise fall in that gap. Bounded because an
+// app erroring in a loop must not grow this without limit.
+const PENDING_LIMIT = 20;
+let pending: { error: unknown; properties?: Record<string, unknown> }[] = [];
+
+/**
+ * captureException reports a handled or unhandled error to PostHog's error
+ * tracking. Safe to call from anywhere, at any time: it no-ops when analytics is
+ * disabled and buffers when the SDK has not finished loading.
+ *
+ * Properties follow the same rule as event properties (see AnalyticsProperties):
+ * ids, statuses and paths, never content or personal data.
+ */
+export function captureException(error: unknown, properties?: Record<string, unknown>): void {
+  if (liveClient) {
+    liveClient.captureException(error, properties);
+    return;
+  }
+  if (pending.length < PENDING_LIMIT) pending.push({ error, properties });
+}
+
+export type AnalyticsProviderProps = {
+  config: AnalyticsConfig;
+  children?: React.ReactNode;
+};
+
+/**
+ * AnalyticsProvider loads and initializes PostHog when config carries an API
+ * key, and does nothing at all when it doesn't.
+ *
+ * posthog-js is pulled in with a dynamic import() so the bundler splits it into
+ * its own chunk: a self-hosted build with no key never downloads the ~230 kB
+ * SDK, which is the whole point of analytics being opt-in. The rendered tree is
+ * the same either way — the client arrives through context once it has loaded —
+ * so children mount exactly once and never remount when it does.
+ *
+ * config must be a module-level constant (it is, in every app here): a new
+ * object each render would re-run the effect and re-initialize the SDK.
+ */
+export function AnalyticsProvider({ config, children }: AnalyticsProviderProps) {
+  const [client, setClient] = useState<PostHogClient | null>(null);
+
+  useEffect(() => {
+    if (!isAnalyticsEnabled(config)) return;
+    let cancelled = false;
+    void import("posthog-js").then(({ default: posthog }) => {
+      // The app may have unmounted (or config changed) while the chunk was in
+      // flight; initializing then would leave an orphaned client capturing.
+      if (cancelled) return;
+      posthog.init(config.apiKey, posthogOptions(config));
+      // Tags every event with the deployment it came from, so production and
+      // staging can be told apart. Registered once rather than passed at each
+      // capture call site.
+      if (config.environment) posthog.register({ environment: config.environment });
+      const c = posthog as unknown as PostHogClient;
+      liveClient = c;
+      // Drain anything that failed while the chunk was in flight.
+      const buffered = pending;
+      pending = [];
+      for (const { error, properties } of buffered) c.captureException(error, properties);
+      setClient(c);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [config]);
+
+  return <ClientContext.Provider value={client}>{children}</ClientContext.Provider>;
+}
+
+/**
+ * Event properties. Scalars only: nested objects arrive in PostHog as
+ * "[object Object]", and the flat shape discourages attaching whole records
+ * (which is how content and personal data leak into analytics).
+ */
+export type AnalyticsProperties = Record<string, string | number | boolean | null | undefined>;
+
+/** The subset of PostHog the CMS apps use, safe to call when disabled. */
+export type Analytics = {
+  /** False when PostHog is unconfigured or its chunk has not loaded yet. */
+  enabled: boolean;
+  /** Only names from the AnalyticsEvent taxonomy — see events.ts. */
+  capture(event: AnalyticsEventName, properties?: AnalyticsProperties): void;
+  /**
+   * captureException reports an error the UI caught and handled — a failed save,
+   * a rejected request — which autocapture never sees precisely because it was
+   * caught. Unlike capture(), it buffers rather than dropping while the SDK
+   * loads, so it stays useful before `enabled` flips true.
+   */
+  captureException(error: unknown, properties?: Record<string, unknown>): void;
+  /**
+   * identify ties subsequent events to a signed-in user. The first argument is
+   * the user's ID — the same identifier the API uses, so PostHog persons join
+   * against the product database.
+   *
+   * properties become *person* properties, and this is the one place an email
+   * belongs: it makes a person record recognizable in PostHog without putting
+   * the address on every event (see the property rules in events.ts, which still
+   * hold). Pass it as `email`, the key PostHog's person UI reads.
+   */
+  identify(userId: string, properties?: Record<string, unknown>): void;
+  /** reset unlinks the session at sign-out, so the next user is not merged in. */
+  reset(): void;
+};
+
+const NOOP: Analytics = {
+  enabled: false,
+  capture: () => {},
+  // Not a no-op: buffered by the module-level captureException above, so an
+  // error during the SDK's load window still lands once it arrives.
+  captureException,
+  identify: () => {},
+  reset: () => {},
+};
+
+/**
+ * useAnalytics returns an Analytics facade. Every method is a no-op until (and
+ * unless) PostHog is configured and loaded, so callers never branch on it.
+ */
+export function useAnalytics(): Analytics {
+  const client = useContext(ClientContext);
+  return useMemo(() => {
+    if (!client) return NOOP;
+    return {
+      enabled: true,
+      capture: (event, properties) => client.capture(event, properties),
+      captureException: (error, properties) => client.captureException(error, properties),
+      identify: (userId, properties) => client.identify(userId, properties),
+      reset: () => client.reset(),
+    };
+  }, [client]);
+}
+
+/**
+ * useIdentify keeps PostHog's identity in step with the signed-in user: it
+ * identifies on sign-in and resets on sign-out, including the sign-out that
+ * happens when a token expires. Pass undefined or null while signed out.
+ *
+ * Because it depends on the analytics facade, it also re-runs once the SDK
+ * finishes loading — so a user who was already signed in when the page opened
+ * still gets identified, rather than being missed by the race.
+ *
+ * Placing this in one hook means each app has a single line to add rather than
+ * its own identify/reset bookkeeping to get subtly wrong.
+ */
+export function useIdentify(userId: string | undefined | null, properties?: Record<string, unknown>) {
+  const analytics = useAnalytics();
+  // Serialized so a fresh object literal at the call site doesn't re-identify
+  // on every render.
+  const propsKey = properties ? JSON.stringify(properties) : "";
+  // Whether we have identified anyone yet. Reset is only correct as a
+  // *transition* out of a signed-in session — calling it on first load would
+  // throw away the anonymous ID that ties a visitor's pre-login events to the
+  // account they then sign into.
+  const identified = useRef(false);
+
+  useEffect(() => {
+    if (!analytics.enabled) return;
+    if (userId) {
+      identified.current = true;
+      analytics.identify(userId, propsKey ? JSON.parse(propsKey) : undefined);
+    } else if (identified.current) {
+      identified.current = false;
+      analytics.reset();
+    }
+  }, [analytics, userId, propsKey]);
+}

package/app/vendor/design-system/src/ThemeProvider.tsx

@@ -0,0 +1,86 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { useColorScheme, useWindowDimensions } from "react-native";
+import { makeTheme, lightTheme, Theme, ThemeMode, DESKTOP_BREAKPOINT } from "./theme";
+
+type ThemeContextValue = {
+  theme: Theme;
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  toggleMode: () => void;
+};
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export type ThemeProviderProps = {
+  children: React.ReactNode;
+  /** Force a mode; omit to follow the system color scheme. */
+  initialMode?: ThemeMode;
+};
+
+export function ThemeProvider({ children, initialMode }: ThemeProviderProps) {
+  const system = useColorScheme();
+  const [override, setOverride] = useState<ThemeMode | undefined>(initialMode);
+  const mode: ThemeMode = override ?? (system === "dark" ? "dark" : "light");
+
+  const theme = useMemo(() => makeTheme(mode), [mode]);
+  const setMode = useCallback((m: ThemeMode) => setOverride(m), []);
+  const toggleMode = useCallback(
+    () => setOverride((m) => ((m ?? mode) === "dark" ? "light" : "dark")),
+    [mode]
+  );
+
+  const value = useMemo(
+    () => ({ theme, mode, setMode, toggleMode }),
+    [theme, mode, setMode, toggleMode]
+  );
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+/**
+ * Overrides the theme palette for a subtree while keeping the app's real
+ * mode/setMode/toggleMode intact — so a nested control (e.g. the top bar's
+ * theme toggle) still drives the whole app, not just the scoped subtree.
+ * Used to render the dark-chrome top bar's inline contents against a dark
+ * palette regardless of the active app theme.
+ */
+export function ThemeScope({ theme, children }: { theme: Theme; children: React.ReactNode }) {
+  const ctx = useContext(ThemeContext);
+  const value = useMemo<ThemeContextValue>(
+    () => ({
+      theme,
+      mode: ctx?.mode ?? "light",
+      setMode: ctx?.setMode ?? (() => {}),
+      toggleMode: ctx?.toggleMode ?? (() => {}),
+    }),
+    [theme, ctx]
+  );
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+// Both hooks fall back to the light theme when no provider is mounted, so
+// components never crash in isolation (tests, Storybook-style previews).
+export function useTheme(): Theme {
+  const ctx = useContext(ThemeContext);
+  return ctx ? ctx.theme : lightTheme;
+}
+
+export function useThemeMode() {
+  const ctx = useContext(ThemeContext);
+  if (ctx) return { mode: ctx.mode, setMode: ctx.setMode, toggleMode: ctx.toggleMode };
+  return { mode: "light" as ThemeMode, setMode: () => {}, toggleMode: () => {} };
+}
+
+/**
+ * Responsive layout switch. Works on native and web (react-native-web) via
+ * useWindowDimensions, so the same components pick desktop vs mobile layout
+ * from the viewport width — no CSS media queries needed.
+ */
+export function useResponsive() {
+  const { width, height } = useWindowDimensions();
+  return {
+    width,
+    height,
+    isDesktop: width >= DESKTOP_BREAKPOINT,
+    isMobile: width < DESKTOP_BREAKPOINT,
+  };
+}

package/app/vendor/design-system/src/__tests__/ApplyChangesModal.test.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ApplyChangesModal, type MergeProgress } from "../components/ApplyChangesModal";
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const base: MergeProgress = {
+  status: "running",
+  step: "comparing",
+  sourceBranch: "draft/spring",
+  targetBranch: "main",
+};
+
+const branches = { sourceBranch: "draft/spring", targetBranch: "main" };
+
+test("without a run it shows a confirmation step explaining the effects", () => {
+  const onConfirm = jest.fn();
+  render(wrap(<ApplyChangesModal {...branches} summary="3 collections changed" onConfirm={onConfirm} onClose={() => {}} />));
+
+  const confirm = screen.getByTestId("apply-confirm");
+  // The irreversible, outward-facing effects are spelled out.
+  expect(confirm).toHaveTextContent("merges draft/spring into main");
+  expect(confirm).toHaveTextContent("pushes a merge commit to origin/main");
+  expect(confirm).toHaveTextContent("draft/spring is then deleted");
+  expect(confirm).toHaveTextContent("can’t be undone");
+  expect(confirm).toHaveTextContent("3 collections changed");
+
+  // The checklist is not shown until the merge actually starts.
+  expect(screen.queryByTestId("merge-step-active")).not.toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("apply-confirm-submit"));
+  expect(onConfirm).toHaveBeenCalledTimes(1);
+});
+
+test("the checklist advances: earlier steps done, current active, later pending", () => {
+  render(wrap(<ApplyChangesModal {...branches} progress={{ ...base, step: "merging" }} onClose={() => {}} />));
+
+  // comparing is behind us → done; merging is current → active; pushing → pending.
+  expect(screen.getAllByTestId("merge-step-done")).toHaveLength(1);
+  expect(screen.getAllByTestId("merge-step-active")).toHaveLength(1);
+  expect(screen.getAllByTestId("merge-step-pending")).toHaveLength(1);
+});
+
+test("the header shows source → target", () => {
+  render(wrap(<ApplyChangesModal {...branches} progress={base} onClose={() => {}} />));
+  expect(screen.getByText("draft/spring")).toBeInTheDocument();
+  expect(screen.getByText("main")).toBeInTheDocument();
+});
+
+test("success shows the merge panel with commit and stats, and a Done button", () => {
+  const onDone = jest.fn();
+  render(
+    wrap(
+      <ApplyChangesModal
+        {...branches}
+        progress={{
+          ...base,
+          status: "succeeded",
+          step: "pushing",
+          commit: "b7e1a2c9deadbeef",
+          filesChanged: 3,
+          added: 64,
+          removed: 6,
+        }}
+        onClose={() => {}}
+        onDone={onDone}
+      />,
+    ),
+  );
+
+  const panel = screen.getByTestId("merge-success");
+  expect(panel).toHaveTextContent("Merged draft/spring into main");
+  expect(panel).toHaveTextContent("b7e1a2c"); // short sha
+  expect(panel).toHaveTextContent("3 files");
+  expect(panel).toHaveTextContent("+64 −6");
+
+  // Every step reads as done on success.
+  expect(screen.getAllByTestId("merge-step-done")).toHaveLength(3);
+  expect(screen.getByTestId("apply-done")).toBeInTheDocument();
+});
+
+test("needs_review lists the conflicting files and escalates with an explanation", () => {
+  const onCreateChangeRequest = jest.fn();
+  render(
+    wrap(
+      <ApplyChangesModal
+        {...branches}
+        progress={{ ...base, status: "needs_review", step: "merging", escalationFiles: ["src/app.go", "package.json"] }}
+        onCreateChangeRequest={onCreateChangeRequest}
+        onClose={() => {}}
+      />,
+    ),
+  );
+
+  const panel = screen.getByTestId("merge-needs-review");
+  expect(panel).toHaveTextContent("Code conflicts need a developer");
+  expect(screen.getByTestId("escalation-file-src/app.go")).toBeInTheDocument();
+  expect(screen.getByTestId("escalation-file-package.json")).toBeInTheDocument();
+
+  // The submit is disabled until an explanation is entered.
+  const submit = screen.getByTestId("create-change-request-submit");
+  fireEvent.click(submit);
+  expect(onCreateChangeRequest).not.toHaveBeenCalled();
+
+  fireEvent.change(screen.getByTestId("change-request-explanation"), { target: { value: "Updated pricing copy" } });
+  fireEvent.click(submit);
+  expect(onCreateChangeRequest).toHaveBeenCalledWith("Updated pricing copy");
+});
+
+test("an open change request replaces the confirm step with a shareable link and view button", () => {
+  const onViewChangeRequest = jest.fn();
+  render(
+    wrap(
+      <ApplyChangesModal
+        {...branches}
+        changeRequestOpen
+        changeRequestUrl="https://github.com/acme/site/pull/42"
+        onViewChangeRequest={onViewChangeRequest}
+        onClose={() => {}}
+      />,
+    ),
+  );
+  const panel = screen.getByTestId("apply-cr-open");
+  expect(panel).toHaveTextContent("A change request is already open");
+  expect(panel).toHaveTextContent("Send them this link");
+  // The normal apply confirmation is not offered.
+  expect(screen.queryByTestId("apply-confirm-submit")).not.toBeInTheDocument();
+  // The PR link is shown read-only with a copy button.
+  expect(screen.getByTestId("change-request-link")).toHaveValue("https://github.com/acme/site/pull/42");
+  expect(screen.getByTestId("copy-change-request-link")).toBeInTheDocument();
+  fireEvent.click(screen.getByTestId("apply-view-change-request"));
+  expect(onViewChangeRequest).toHaveBeenCalledTimes(1);
+});
+
+test("failure surfaces the error and a dismiss button", () => {
+  render(
+    wrap(
+      <ApplyChangesModal
+        {...branches}
+        progress={{ ...base, status: "failed", step: "pushing", error: "main moved while merging" }}
+        onClose={() => {}}
+      />,
+    ),
+  );
+  expect(screen.getByTestId("merge-error")).toHaveTextContent("main moved while merging");
+  expect(screen.getByTestId("apply-dismiss")).toBeInTheDocument();
+});

package/app/vendor/design-system/src/__tests__/BranchImport.test.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { BranchImportingScreen, BranchImportFailedScreen } from "../components/BranchImport";
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+test("the importing screen names the branch it is waiting on", () => {
+  render(wrap(<BranchImportingScreen branch="release/2.0" repository="acme/site" />));
+  expect(screen.getByTestId("branch-importing")).toBeInTheDocument();
+  expect(screen.getByText("Importing release/2.0")).toBeInTheDocument();
+  expect(screen.getByText(/acme\/site/)).toBeInTheDocument();
+});
+
+test("a missing config reads as a setup step, not an error", () => {
+  render(
+    wrap(
+      <BranchImportFailedScreen
+        branch="main"
+        repository="acme/site"
+        error="no go-git-cms config found"
+        errorCode="config_not_found"
+      />,
+    ),
+  );
+  expect(screen.getByText("main has no CMS config yet")).toBeInTheDocument();
+  expect(screen.getByText(/go-git-cms\.yml/)).toBeInTheDocument();
+  // The raw message is redundant once the screen has said what to commit.
+  expect(screen.queryByTestId("branch-import-error")).not.toBeInTheDocument();
+});
+
+test("any other failure shows the run's own message", () => {
+  render(wrap(<BranchImportFailedScreen branch="main" error="clone: permission denied" />));
+  expect(screen.getByText("Couldn’t import main")).toBeInTheDocument();
+  expect(screen.getByTestId("branch-import-error")).toHaveTextContent("clone: permission denied");
+});
+
+test("check again is offered only when the host can re-read the state", () => {
+  const onRecheck = jest.fn();
+  const { rerender } = render(wrap(<BranchImportFailedScreen branch="main" errorCode="config_not_found" />));
+  expect(screen.queryByTestId("branch-import-recheck")).not.toBeInTheDocument();
+
+  rerender(wrap(<BranchImportFailedScreen branch="main" errorCode="config_not_found" onRecheck={onRecheck} />));
+  fireEvent.click(screen.getByTestId("branch-import-recheck"));
+  expect(onRecheck).toHaveBeenCalled();
+});