@hyperframes/studio 0.8.50 → 0.8.52

package/src/hooks/useCaptionDetection.sender.test.tsx

@@ -3,6 +3,7 @@ import { act } from "react";
 import { createRoot } from "react-dom/client";
 import { expect, it, vi } from "vitest";
 import { useCaptionDetection } from "./useCaptionDetection";
+import { usePreviewIframeStore } from "../player/store/previewIframeStore";
 
 Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
 
@@ -52,3 +53,48 @@ it("does not let a foreign window trigger caption activation", () => {
     vi.unstubAllGlobals();
   }
 });
+
+it("re-runs caption activation on the promoted iframe's document", () => {
+  const host = document.createElement("div");
+  const a = document.createElement("iframe");
+  const b = document.createElement("iframe");
+  document.body.append(host, a, b);
+  const ref = { current: a };
+  const root = createRoot(host);
+  const fetchMock = vi.fn(() => new Promise<Response>(() => {}));
+  vi.stubGlobal("fetch", fetchMock);
+  const params = {
+    projectId: "demo",
+    activeCompPath: "captions.html",
+    compIdToSrc: new Map<string, string>(),
+    captionEditMode: false,
+    captionHasSelection: false,
+    previewIframeRef: ref,
+    captionSync: { save: vi.fn(), loadOverrides: vi.fn(async () => {}) },
+    setRightCollapsed: vi.fn(),
+  };
+  function Harness() {
+    useCaptionDetection(params);
+    return null;
+  }
+  try {
+    act(() => usePreviewIframeStore.getState().setIframe(a));
+    act(() => root.render(<Harness />));
+    const group = b.contentDocument!.createElement("div");
+    group.className = "caption-group";
+    b.contentDocument!.body.append(group);
+    expect(fetchMock).not.toHaveBeenCalled();
+    act(() => {
+      ref.current = b;
+      usePreviewIframeStore.getState().setIframe(b);
+    });
+    expect(fetchMock).toHaveBeenCalledOnce();
+  } finally {
+    act(() => root.unmount());
+    usePreviewIframeStore.setState({ iframe: null });
+    host.remove();
+    a.remove();
+    b.remove();
+    vi.unstubAllGlobals();
+  }
+});

package/src/hooks/useCaptionDetection.ts

@@ -1,3 +1,4 @@
+import { useLivePreviewIframe } from "../player/store/previewIframeStore";
 import { buildProjectApiPath } from "../utils/projectRouting";
 import { useEffect, useRef } from "react";
 import { useCaptionStore } from "../captions/store";
@@ -26,6 +27,7 @@ export function useCaptionDetection({
   captionSync,
   setRightCollapsed,
 }: UseCaptionDetectionParams) {
+  const livePreviewIframe = useLivePreviewIframe();
   // Switching compositions must drop the previous comp's caption state — a
   // stale model + full-canvas overlay otherwise blocks normal element editing
   // on the new composition (and edit mode could never be exited).
@@ -145,7 +147,7 @@ export function useCaptionDetection({
     return () => {
       window.removeEventListener("message", handleMessage);
     };
-  }, [activeCompPath, projectId, compIdToSrc, captionSync, previewIframeRef]);
+  }, [activeCompPath, projectId, compIdToSrc, captionSync, previewIframeRef, livePreviewIframe]);
 
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {

package/src/hooks/useEditHistoryActions.test.tsx

@@ -0,0 +1,90 @@
+// @vitest-environment happy-dom
+
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
+import { useEditHistoryActions, type EditHistoryHandle } from "./useEditHistoryActions";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let root: Root | null = null;
+afterEach(() => act(() => root?.unmount()));
+
+function mount(result: { ok: boolean; reason?: string; label?: string; paths?: string[] }) {
+  const editHistory = {
+    undo: vi.fn<EditHistoryHandle["undo"]>(async (cb) => {
+      if (result.ok) await cb.writeFile("index.html", "before");
+      return result;
+    }),
+    redo: vi.fn<EditHistoryHandle["redo"]>(async () => result),
+  };
+  const deps = {
+    editHistory,
+    readOptionalProjectFile: vi.fn(async () => ""),
+    readProjectFile: vi.fn(async () => ""),
+    writeProjectFile: vi.fn(async () => undefined),
+    showToast: vi.fn(),
+    syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
+    waitForPendingDomEditSaves: vi.fn(async () => undefined),
+    onAfterUndoRedo: vi.fn(),
+    activeCompPath: "index.html",
+    forceReloadSdkSession: vi.fn(),
+  };
+  let actions!: ReturnType<typeof useEditHistoryActions>;
+  function Probe() {
+    actions = useEditHistoryActions(deps);
+    return null;
+  }
+  root = createRoot(document.createElement("div"));
+  act(() => root!.render(createElement(Probe)));
+  return { deps, actions };
+}
+
+describe("useEditHistoryActions", () => {
+  it("undo writes through the host writer, resyncs the preview and toasts the label", async () => {
+    const { deps, actions } = mount({ ok: true, label: "Move clip", paths: ["index.html"] });
+    await act(() => actions.undo());
+    expect(deps.waitForPendingDomEditSaves).toHaveBeenCalled();
+    expect(deps.writeProjectFile).toHaveBeenCalledWith("index.html", "before");
+    expect(deps.onAfterUndoRedo).toHaveBeenCalled();
+    expect(deps.forceReloadSdkSession).toHaveBeenCalled();
+    expect(deps.syncHistoryPreviewAfterApply).toHaveBeenCalled();
+    expect(deps.showToast).toHaveBeenCalledWith("Undid Move clip", "info");
+  });
+
+  it("redo reports the redone label and skips the SDK reload for other files", async () => {
+    const { deps, actions } = mount({ ok: true, label: "Split clip", paths: ["other.html"] });
+    await act(() => actions.redo());
+    expect(deps.forceReloadSdkSession).not.toHaveBeenCalled();
+    expect(deps.showToast).toHaveBeenCalledWith("Redid Split clip", "info");
+  });
+
+  it("explains a refused undo when the file changed on disk", async () => {
+    const { deps, actions } = mount({ ok: false, reason: "content-mismatch" });
+    await act(() => actions.undo());
+    expect(deps.showToast).toHaveBeenCalledWith(
+      "File changed outside Studio. Undo history was not applied.",
+      "info",
+    );
+    expect(deps.syncHistoryPreviewAfterApply).not.toHaveBeenCalled();
+  });
+
+  it("waits for pending saves first and reads the motion file through the optional reader", async () => {
+    const { deps, actions } = mount({ ok: true, label: "Move clip", paths: ["index.html"] });
+    const order: string[] = [];
+    deps.waitForPendingDomEditSaves.mockImplementation(async () => void order.push("wait"));
+    deps.editHistory.undo.mockImplementation(async (cb) => {
+      order.push("undo");
+      await cb.readFile(STUDIO_MOTION_PATH);
+      await cb.readFile("index.html");
+      await cb.serialize?.(["index.html"], async () => order.push("serialized"));
+      return { ok: true };
+    });
+    await act(() => actions.undo());
+    expect(order).toEqual(["wait", "undo", "serialized"]);
+    expect(deps.readOptionalProjectFile).toHaveBeenCalledWith(STUDIO_MOTION_PATH);
+    expect(deps.readProjectFile).toHaveBeenCalledWith("index.html");
+    expect(deps.readProjectFile).not.toHaveBeenCalledWith(STUDIO_MOTION_PATH);
+  });
+});

package/src/hooks/useEditHistoryActions.ts

@@ -0,0 +1,106 @@
+// fallow-ignore-file complexity
+import { useCallback, useMemo } from "react";
+import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
+import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
+
+interface HistoryResult {
+  ok: boolean;
+  reason?: string;
+  label?: string;
+  paths?: string[];
+  /** Per-file restored/previous content, used to soft-apply the preview. */
+  files?: Record<string, { previous: string; restored: string }>;
+}
+interface HistoryFileCallbacks {
+  readFile: (path: string) => Promise<string>;
+  writeFile: (path: string, content: string) => Promise<void>;
+  serialize?: <T>(paths: readonly string[], task: () => Promise<T>) => Promise<T>;
+}
+export interface EditHistoryHandle {
+  undo: (cb: HistoryFileCallbacks) => Promise<HistoryResult>;
+  redo: (cb: HistoryFileCallbacks) => Promise<HistoryResult>;
+  state: {
+    undo: ReadonlyArray<{ createdAt: number }>;
+    redo: ReadonlyArray<{ createdAt: number }>;
+  };
+}
+
+export interface UseEditHistoryActionsOptions {
+  editHistory: Pick<EditHistoryHandle, "undo" | "redo">;
+  readOptionalProjectFile: (path: string) => Promise<string>;
+  readProjectFile: (path: string) => Promise<string>;
+  writeProjectFile: (path: string, content: string) => Promise<void>;
+  showToast: (message: string, tone?: "error" | "info") => void;
+  syncHistoryPreviewAfterApply: (restore: Pick<HistoryResult, "paths" | "files">) => Promise<void>;
+  waitForPendingDomEditSaves: () => Promise<void>;
+  onAfterUndoRedo?: () => void;
+  /** Active composition path — decides whether undo/redo must resync the SDK session. */
+  activeCompPath?: string | null;
+  /** Reloads the SDK session after a revert of the active comp, past the self-write suppress window. */
+  forceReloadSdkSession?: () => void;
+}
+
+/** Applies one persisted file-history step: the single owner of undo/redo over project files. */
+export function useEditHistoryActions({
+  editHistory,
+  readOptionalProjectFile,
+  readProjectFile,
+  writeProjectFile,
+  showToast,
+  syncHistoryPreviewAfterApply,
+  waitForPendingDomEditSaves,
+  onAfterUndoRedo,
+  activeCompPath,
+  forceReloadSdkSession,
+}: UseEditHistoryActionsOptions) {
+  const readHistoryFile = useCallback(
+    (path: string): Promise<string> =>
+      path === STUDIO_MOTION_PATH ? readOptionalProjectFile(path) : readProjectFile(path),
+    [readOptionalProjectFile, readProjectFile],
+  );
+  const serializeHistoryFiles = useCallback(
+    <T>(paths: readonly string[], task: () => Promise<T>) =>
+      serializeStudioFileMutations(writeProjectFile, paths, task),
+    [writeProjectFile],
+  );
+
+  const apply = useCallback(
+    async (direction: "undo" | "redo") => {
+      const [noun, verb] = direction === "undo" ? ["Undo", "Undid"] : ["Redo", "Redid"];
+      await waitForPendingDomEditSaves();
+      const result = await editHistory[direction]({
+        readFile: readHistoryFile,
+        writeFile: writeProjectFile,
+        serialize: serializeHistoryFiles,
+      });
+      if (!result.ok && result.reason === "content-mismatch") {
+        showToast(`File changed outside Studio. ${noun} history was not applied.`, "info");
+        return;
+      }
+      if (result.ok && result.label) {
+        onAfterUndoRedo?.();
+        if (activeCompPath && result.paths?.includes(activeCompPath)) {
+          forceReloadSdkSession?.();
+        }
+        await syncHistoryPreviewAfterApply({ paths: result.paths, files: result.files });
+        showToast(`${verb} ${result.label}`, "info");
+      }
+    },
+    [
+      editHistory,
+      readHistoryFile,
+      showToast,
+      syncHistoryPreviewAfterApply,
+      waitForPendingDomEditSaves,
+      writeProjectFile,
+      serializeHistoryFiles,
+      onAfterUndoRedo,
+      activeCompPath,
+      forceReloadSdkSession,
+    ],
+  );
+
+  const undo = useCallback(() => apply("undo"), [apply]);
+  const redo = useCallback(() => apply("redo"), [apply]);
+  return useMemo(() => ({ undo, redo }), [undo, redo]);
+}

package/src/hooks/useLintModal.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useLintModal } from "./useLintModal";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let root: Root | null = null;
+let latest: ReturnType<typeof useLintModal> | null = null;
+
+function Probe() {
+  latest = useLintModal("demo");
+  return null;
+}
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+  latest = null;
+  vi.unstubAllGlobals();
+});
+
+async function mountWithLint(response: () => Promise<unknown>) {
+  vi.stubGlobal("fetch", vi.fn(response));
+  root = createRoot(document.createElement("div"));
+  await act(async () => root?.render(<Probe />));
+  await act(async () => {
+    await latest?.handleLint();
+  });
+}
+
+const lintResponse = (findings: Array<{ severity: string; message: string }>) => async () => ({
+  json: async () => ({ findings }),
+});
+
+describe("useLintModal hasLintError", () => {
+  it("is true when a finding is an error and false for warnings only", async () => {
+    await mountWithLint(lintResponse([{ severity: "error", message: "nested" }]));
+    expect(latest?.hasLintError).toBe(true);
+    act(() => root?.unmount());
+    root = null;
+    await mountWithLint(lintResponse([{ severity: "warning", message: "soft" }]));
+    expect(latest?.hasLintError).toBe(false);
+  });
+
+  it("is true for a mixed error and warning list", async () => {
+    await mountWithLint(
+      lintResponse([
+        { severity: "warning", message: "soft" },
+        { severity: "error", message: "nested" },
+      ]),
+    );
+    expect(latest?.hasLintError).toBe(true);
+  });
+
+  it("is true when the manual lint itself fails, matching the badge count", async () => {
+    await mountWithLint(async () => {
+      throw new Error("offline");
+    });
+    expect(latest?.lintModal).toHaveLength(1);
+    expect(latest?.hasLintError).toBe(true);
+  });
+});

package/src/hooks/useLintModal.ts

@@ -96,6 +96,8 @@ export function useLintModal(projectId: string | null, refreshKey?: number) {
 
   const findingsByElement = useMemo(() => groupFindings((f) => f.elementId), [groupFindings]);
   const findingsByFile = useMemo(() => groupFindings((f) => f.file), [groupFindings]);
+  // Reads the list the badge count reads: the manual result when present, else the background one.
+  const hasLintError = (lintModal ?? backgroundFindings).some((f) => f.severity === "error");
 
   // Sync lint findings directly to the player store — eliminates the
   // mirroring useEffect that was previously in App.tsx.
@@ -111,5 +113,6 @@ export function useLintModal(projectId: string | null, refreshKey?: number) {
     backgroundFindings,
     findingsByElement,
     findingsByFile,
+    hasLintError,
   };
 }

package/src/hooks/useSdkSession.lifecycle.test.tsx

@@ -164,17 +164,62 @@ describe("useSdkSession unavailable telemetry", () => {
 
   // Every cutover chokepoint silently takes the server path when there is no
   // session, and the shadow never runs either — so a missing session is a total,
-  // otherwise-invisible SDK bypass. These three exits are its only origin.
-  it("reports an unreadable composition", async () => {
+  // otherwise-invisible SDK bypass. These exits are its only origin.
+  //
+  // `stage: read` carries a reason because it was the largest remaining class
+  // and a single opaque string: 56 users hit it in a 7-day window and never
+  // landed one successful SDK edit between them, with no way to tell a genuinely
+  // absent file from a request that never reached one.
+  it("reports the HTTP status when the read fails", async () => {
     vi.stubGlobal(
       "fetch",
-      vi.fn(async () => ({ ok: false, json: async () => ({}) }) as Response),
+      vi.fn(async () => ({ ok: false, status: 404, json: async () => ({}) }) as Response),
     );
     const root = createRoot(document.createElement("div"));
     await act(async () => root.render(<Probe projectId="project-a" />));
     await flushAsyncEffects();
 
-    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", { stage: "read" });
+    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", {
+      stage: "read",
+      reason: "http_error",
+      status: 404,
+    });
+    await act(async () => root.unmount());
+  });
+
+  it("separates an unexpected response shape from a failed request", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({ ok: true, json: async () => ({}) }) as Response),
+    );
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<Probe projectId="project-a" />));
+    await flushAsyncEffects();
+
+    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", {
+      stage: "read",
+      reason: "missing_content",
+    });
+    await act(async () => root.unmount());
+  });
+
+  // `optional=1` answers a file that is not on disk with 200 + an empty string,
+  // so this is what "the composition genuinely is not there" looks like on the
+  // wire — previously indistinguishable from a broken request. The shim and a
+  // real 0-byte file are the same response, hence the name.
+  it("separates a file that is not on disk", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({ ok: true, json: async () => ({ content: "" }) }) as Response),
+    );
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<Probe projectId="project-a" />));
+    await flushAsyncEffects();
+
+    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", {
+      stage: "read",
+      reason: "absent_or_empty",
+    });
     await act(async () => root.unmount());
   });
 

package/src/hooks/useSdkSession.ts

@@ -7,25 +7,53 @@ import type { PublishSdkSession } from "../utils/sdkCutover";
 import { addExternalFileReloadListener } from "./externalFileReloadBus";
 
 /**
- * Read a project file's content, or undefined on a non-2xx (optional read).
- * Replaces the removed SDK http adapter's `read()` — the only thing Studio used
- * it for (Studio is the sole writer, so the adapter's write path was dead).
+ * Why an optional project-file read produced no usable content. `stage: "read"`
+ * was a single opaque reason covering all of these, which made the largest
+ * remaining class of SDK-session failures undiagnosable: 56 users in a 7-day
+ * window hit it and, between them, never landed a single successful SDK edit.
+ * Knowing which branch fired is the difference between "the file legitimately
+ * is not there" and "the request never reached the file".
+ *
+ * Every reason lives in this union so the full surface is readable from one
+ * place — `absent_or_empty` included, even though it is a 2xx.
+ */
+type ProjectFileReadFailure =
+  | { ok: false; reason: "unsafe_path" }
+  | { ok: false; reason: "http_error"; status: number }
+  | { ok: false; reason: "missing_content" }
+  | { ok: false; reason: "absent_or_empty" };
+
+type ProjectFileReadResult = { ok: true; content: string } | ProjectFileReadFailure;
+
+/**
+ * Read a project file's content (optional read — a missing file is not an
+ * error). Replaces the removed SDK http adapter's `read()` — the only thing
+ * Studio used it for (Studio is the sole writer, so the adapter's write path
+ * was dead).
  */
 async function readProjectFileOptional(
   projectId: string,
   path: string,
-): Promise<string | undefined> {
+): Promise<ProjectFileReadResult> {
   // Reject traversal / NUL before building the request URL — `path` is a
   // user-influenced composition path (mirrors the guard in timelineEditingHelpers,
   // and closes the CodeQL client-side-request-forgery flag). encodeURIComponent
   // already confines both values to single segments of this same-origin URL.
-  if (path.includes("\0") || path.includes("..")) return undefined;
+  if (path.includes("\0") || path.includes("..")) return { ok: false, reason: "unsafe_path" };
   const res = await fetch(
     `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}?optional=1`,
   );
-  if (!res.ok) return undefined;
+  if (!res.ok) return { ok: false, reason: "http_error", status: res.status };
   const data = (await res.json()) as { content?: string };
-  return typeof data.content === "string" ? data.content : undefined;
+  // `optional=1` answers a missing file with 200 + `content: ""`, so a
+  // non-string here means a response shape we did not expect, not absence.
+  if (typeof data.content !== "string") return { ok: false, reason: "missing_content" };
+  // An empty body parses into a session with no elements, which declines every
+  // edit wholesale — not a session worth opening. The absent-file shim and a
+  // genuinely 0-byte file are the same 200 on the wire and cannot be told
+  // apart here, hence the name; for a composition it is always the former.
+  if (data.content === "") return { ok: false, reason: "absent_or_empty" };
+  return { ok: true, content: data.content };
 }
 
 /**
@@ -180,16 +208,21 @@ export function useSdkSession(
     };
 
     readProjectFileOptional(projectId, activeCompPath)
-      .then(async (content) => {
+      .then(async (read) => {
         if (cancelled) return;
-        if (typeof content !== "string") {
+        if (!read.ok) {
           // No SDK session follows, so EVERY cutover chokepoint below takes the
           // server path and emits nothing — the shadow never runs either. This
           // is the only place a missing session can originate, so a broken read
           // would otherwise be a silent, total SDK bypass.
-          trackStudioEvent("sdk_session_unavailable", { stage: "read" });
+          trackStudioEvent("sdk_session_unavailable", {
+            stage: "read",
+            reason: read.reason,
+            ...(read.reason === "http_error" ? { status: read.status } : {}),
+          });
           return;
         }
+        const content = read.content;
         // No persist queue: Studio's writeProjectFile (via sdkCutover's
         // persistSdkSerialize) is the SINGLE writer. Wiring the SDK persist
         // queue too would double-write the file (queue auto-writes on every

package/src/hooks/useServerConnection.hashProject.test.tsx

@@ -0,0 +1,94 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useServerConnection } from "./useServerConnection";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const captured: { projectId: string | null } = { projectId: null };
+
+function Probe() {
+  captured.projectId = useServerConnection().projectId;
+  return null;
+}
+
+async function flush(): Promise<void> {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+}
+
+/**
+ * The hash project id outlives the project it names — a renamed folder, or a
+ * bookmark from a project that is gone. It used to be trusted unconditionally,
+ * so every later /api/projects/<id>/... request 404'd for the life of the tab,
+ * including the composition read that opens the SDK session. Telemetry after
+ * the read-reason split: 120 http_error/404 reads across 5 users in 24h.
+ */
+function stubFetch(projectRoute: { status: number } | "reject") {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (url: string) => {
+      if (url === "/api/projects") {
+        return { ok: true, json: async () => ({ projects: [{ id: "real-project" }] }) } as Response;
+      }
+      if (projectRoute === "reject") throw new TypeError("Failed to fetch");
+      return { ok: projectRoute.status === 200, status: projectRoute.status } as Response;
+    }),
+  );
+}
+
+async function renderWithHash(hash: string) {
+  window.location.hash = hash;
+  const root = createRoot(document.createElement("div"));
+  await act(async () => root.render(<Probe />));
+  await flush();
+  return root;
+}
+
+describe("useServerConnection hash project id", () => {
+  beforeEach(() => {
+    captured.projectId = null;
+    window.location.hash = "";
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("keeps a hash id the server can resolve", async () => {
+    stubFetch({ status: 200 });
+    const root = await renderWithHash("#project/stale-or-not");
+
+    expect(captured.projectId).toBe("stale-or-not");
+    await act(async () => root.unmount());
+  });
+
+  it("falls back to the first project when the hash id is gone", async () => {
+    stubFetch({ status: 404 });
+    const root = await renderWithHash("#project/deleted-project");
+
+    expect(captured.projectId).toBe("real-project");
+    expect(window.location.hash).toContain("real-project");
+    await act(async () => root.unmount());
+  });
+
+  // The important one: a blip must not rewrite the user's hash out from under a
+  // project that is actually fine. Only a definite 404 is "missing".
+  it("keeps the hash id when the check itself fails", async () => {
+    stubFetch("reject");
+    const root = await renderWithHash("#project/unreachable-check");
+
+    expect(captured.projectId).toBe("unreachable-check");
+    await act(async () => root.unmount());
+  });
+
+  it("keeps the hash id on a non-404 error status", async () => {
+    stubFetch({ status: 500 });
+    const root = await renderWithHash("#project/server-erroring");
+
+    expect(captured.projectId).toBe("server-erroring");
+    await act(async () => root.unmount());
+  });
+});