@hyperframes/studio 0.8.75 → 0.8.76

package/src/hooks/useLintModal.ts

@@ -2,6 +2,7 @@ import { buildProjectApiPath } from "../utils/projectRouting";
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import type { LintFinding } from "../components/LintModal";
 import { usePlayerStore } from "../player";
+import { isPreviewBooted, whenPreviewBooted } from "../player/store/playerStore";
 
 interface RawFinding {
   severity?: string;
@@ -23,6 +24,12 @@ function parseFinding(f: RawFinding): LintFinding & { elementId?: string; file?:
   };
 }
 
+async function fetchLintFindings(projectId: string) {
+  const res = await fetch(buildProjectApiPath(projectId, `/lint`));
+  const data = await res.json();
+  return ((data.findings ?? []) as RawFinding[]).map(parseFinding);
+}
+
 export function useLintModal(projectId: string | null, refreshKey?: number) {
   const [lintModal, setLintModal] = useState<LintFinding[] | null>(null);
   const [linting, setLinting] = useState(false);
@@ -31,33 +38,28 @@ export function useLintModal(projectId: string | null, refreshKey?: number) {
   >([]);
   const autoLintRanRef = useRef(false);
 
-  const runLint = useCallback(
-    async (opts?: { background?: boolean }) => {
-      if (!projectId) return;
-      if (!opts?.background) setLinting(true);
-      try {
-        const res = await fetch(buildProjectApiPath(projectId, `/lint`));
-        const data = await res.json();
-        const parsed = ((data.findings ?? []) as RawFinding[]).map(parseFinding);
-        if (opts?.background) {
-          setBackgroundFindings(parsed);
-        } else {
-          setLintModal(parsed);
-          setBackgroundFindings(parsed);
-        }
-      } catch (err) {
-        if (!opts?.background) {
-          const msg = err instanceof Error ? err.message : String(err);
-          setLintModal([{ severity: "error", message: `Failed to run lint: ${msg}` }]);
-        }
-      } finally {
-        if (!opts?.background) setLinting(false);
-      }
-    },
-    [projectId],
-  );
+  const runBackgroundLint = useCallback(async () => {
+    if (!projectId) return;
+    if (!isPreviewBooted(projectId) && !(await whenPreviewBooted(projectId))) return;
+    try {
+      setBackgroundFindings(await fetchLintFindings(projectId));
+    } catch {}
+  }, [projectId]);
 
-  const handleLint = useCallback(() => runLint(), [runLint]);
+  const handleLint = useCallback(async () => {
+    if (!projectId) return;
+    setLinting(true);
+    try {
+      const parsed = await fetchLintFindings(projectId);
+      setLintModal(parsed);
+      setBackgroundFindings(parsed);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setLintModal([{ severity: "error", message: `Failed to run lint: ${msg}` }]);
+    } finally {
+      setLinting(false);
+    }
+  }, [projectId]);
 
   const prevProjectIdRef = useRef(projectId);
   useEffect(() => {
@@ -67,14 +69,14 @@ export function useLintModal(projectId: string | null, refreshKey?: number) {
     }
     if (!projectId || autoLintRanRef.current) return;
     autoLintRanRef.current = true;
-    void runLint({ background: true });
-  }, [projectId, runLint]);
+    void runBackgroundLint();
+  }, [projectId, runBackgroundLint]);
 
   useEffect(() => {
     if (!projectId || !refreshKey) return;
-    const timer = setTimeout(() => void runLint({ background: true }), 1000);
+    const timer = setTimeout(() => void runBackgroundLint(), 1000);
     return () => clearTimeout(timer);
-  }, [projectId, refreshKey, runLint]);
+  }, [projectId, refreshKey, runBackgroundLint]);
 
   const closeLintModal = useCallback(() => setLintModal(null), []);
 

package/src/hooks/usePersistentEditHistory.test.ts

@@ -1,337 +1,243 @@
-import { describe, expect, it, vi } from "vitest";
-import { createEmptyEditHistory } from "../utils/editHistory";
-import type { EditHistoryStorageAdapter } from "../utils/editHistoryStorage";
-import { createMemoryEditHistoryStorage } from "../utils/editHistoryStorage";
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { afterEach, expect, it, vi } from "vitest";
 import {
-  serializeStudioFileMutation,
-  serializeStudioFileMutations,
-} from "../utils/studioFileMutationCoordinator";
-import {
-  createPersistentEditHistoryController,
-  createPersistentEditHistoryStore,
-} from "./usePersistentEditHistory";
-
-describe("createPersistentEditHistoryController", () => {
-  it("records history and reloads it for the same project", async () => {
-    const storage = createMemoryEditHistoryStorage();
-    const first = await createPersistentEditHistoryController({
-      projectId: "project-1",
-      storage,
-      now: () => 100,
-      onChange: () => {},
-    });
-
-    await first.recordEdit({
-      label: "Move layer",
-      kind: "manual",
-      files: { "index.html": { before: "a", after: "b" } },
-    });
-
-    const second = await createPersistentEditHistoryController({
-      projectId: "project-1",
-      storage,
-      now: () => 200,
-      onChange: () => {},
-    });
+  createStudioApi,
+  fileContentVersion,
+  identifyFileWrite,
+  openProjectHistory,
+  type StudioApiAdapter,
+} from "@hyperframes/studio-server";
+import { consumeStudioWriteToken } from "../utils/studioFileVersion";
+import { usePersistentEditHistory } from "./usePersistentEditHistory";
+
+const cleanup: Array<() => unknown> = [];
+
+afterEach(async () => {
+  for (const step of cleanup.splice(0).reverse()) await step();
+  vi.unstubAllGlobals();
+});
 
-    expect(second.snapshot().canUndo).toBe(true);
-    expect(second.snapshot().undoLabel).toBe("Move layer");
-    expect(second.snapshot().undoPaths).toEqual(["index.html"]);
+function tempDir(prefix: string): string {
+  const dir = mkdtempSync(join(tmpdir(), prefix));
+  cleanup.push(() => rmSync(dir, { recursive: true, force: true }));
+  return dir;
+}
+
+/** The hook over the real history routes and engine, on a project whose index.html reads "A". */
+async function studio({ withHistory = true } = {}) {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  const dir = tempDir("hf-studio-history-");
+  writeFileSync(join(dir, "index.html"), "A");
+  const history = await openProjectHistory({
+    projectDir: dir,
+    historyRoot: tempDir("hf-studio-history-root-"),
   });
-
-  it("undo applies files through the provided callback and persists redo state", async () => {
-    const storage = createMemoryEditHistoryStorage();
-    const controller = await createPersistentEditHistoryController({
-      projectId: "project-1",
-      storage,
-      now: () => 100,
-      onChange: () => {},
-    });
-    await controller.recordEdit({
-      label: "Move layer",
-      kind: "manual",
-      files: { "index.html": { before: "a", after: "b" } },
-    });
-
-    const result = await controller.undo({
-      readFile: async (path) => {
-        expect(path).toBe("index.html");
-        return "b";
-      },
-      writeFile: async (path, content) => {
-        expect(path).toBe("index.html");
-        expect(content).toBe("a");
-      },
-    });
-    expect(result.ok).toBe(true);
-    expect(result.paths).toEqual(["index.html"]);
-
-    expect(controller.snapshot().canUndo).toBe(false);
-    expect(controller.snapshot().canRedo).toBe(true);
-    expect(controller.snapshot().redoPaths).toEqual(["index.html"]);
+  cleanup.push(() => history.close());
+  const api = createStudioApi({
+    listProjects: () => [],
+    resolveProject: (id: string) => (id === "demo" ? { id, dir } : null),
+    ...(withHistory && { history: () => history }),
+  } as unknown as StudioApiAdapter);
+  vi.stubGlobal("fetch", (url: string, init?: RequestInit) =>
+    api.request(url.replace(/^\/api/, ""), init),
+  );
+  let hook!: ReturnType<typeof usePersistentEditHistory>;
+  function Harness() {
+    hook = usePersistentEditHistory({ projectId: "demo" });
+    return null;
+  }
+  const root = createRoot(document.createElement("div"));
+  await act(async () => root.render(createElement(Harness)));
+  cleanup.push(() => act(() => root.unmount()));
+  const file = () => readFileSync(join(dir, "index.html"), "utf8");
+  const save = (content: string) => writeFileSync(join(dir, "index.html"), content);
+  const readFile = async (path: string) => readFileSync(join(dir, path), "utf8");
+  return { dir, hook: () => hook, file, save, readFile };
+}
+
+it("an edit Studio saved is undone and redone by the project's history, with the preview's before and after", async () => {
+  const { hook, file, save, readFile } = await studio();
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Title",
+      files: { "index.html": { before: "A", after: "B" } },
+    }),
+  );
+  await vi.waitFor(() => expect(hook().undoLabel).toBe("Moved Title"));
+
+  const undone = await act(() => hook().undo({ readFile }));
+  expect(undone).toEqual({
+    ok: true,
+    label: "Undid: Moved Title",
+    paths: ["index.html"],
+    files: { "index.html": { previous: "B", restored: "A" } },
   });
+  expect(file()).toBe("A");
 
-  it("keeps in-memory history when storage saves fail", async () => {
-    const storage: EditHistoryStorageAdapter = {
-      async get() {
-        return null;
-      },
-      async set() {
-        throw new Error("IndexedDB unavailable");
-      },
-      async delete() {},
-    };
-    const controller = await createPersistentEditHistoryController({
-      projectId: "project-1",
-      storage,
-      now: () => 100,
-      onChange: () => {},
-    });
+  await vi.waitFor(() => expect(hook().canRedo).toBe(true));
+  const redone = await act(() => hook().redo({ readFile }));
+  expect(redone).toMatchObject({ ok: true, label: "Redid: Moved Title" });
+  expect(file()).toBe("B");
+});
 
-    await expect(
-      controller.recordEdit({
-        label: "Move layer",
-        kind: "manual",
-        files: { "index.html": { before: "a", after: "b" } },
+it("a drag's edits under one key undo as one step, even before the drag goes idle", async () => {
+  const { hook, file, save, readFile } = await studio();
+  const writes: Array<[before: string, after: string]> = [
+    ["A", "B"],
+    ["B", "C"],
+  ];
+  for (const [before, after] of writes) {
+    save(after);
+    await act(() =>
+      hook().recordEdit({
+        label: "Dragged Title",
+        coalesceKey: "drag",
+        coalesceMs: 60_000,
+        files: { "index.html": { before, after } },
       }),
-    ).resolves.toBeUndefined();
-
-    expect(controller.snapshot().canUndo).toBe(true);
+    );
+  }
+  // The held drag is not in the history's list yet: only its own paths say what to read before the step.
+  expect(hook().undoLabel).toBeUndefined();
+  const undone = await act(() => hook().undo({ readFile }));
+  expect(undone).toMatchObject({
+    ok: true,
+    label: "Undid: Dragged Title",
+    files: { "index.html": { previous: "C", restored: "A" } },
   });
+  expect(file()).toBe("A");
+});
 
-  it("serializes concurrent record edits against the latest state", async () => {
-    const storage = createMemoryEditHistoryStorage();
-    let timestamp = 100;
-    const store = createPersistentEditHistoryStore({
-      projectId: "project-1",
-      storage,
-      initialState: createEmptyEditHistory(),
-      now: () => timestamp++,
-      onChange: () => {},
-    });
-
-    await Promise.all([
-      store.recordEdit({
-        label: "Move layer",
-        kind: "manual",
-        files: { "index.html": { before: "a", after: "b" } },
-      }),
-      store.recordEdit({
-        label: "Resize layer",
-        kind: "manual",
-        files: { "index.html": { before: "b", after: "c" } },
-      }),
-    ]);
-
-    expect(store.snapshot().state.undo.map((entry) => entry.label)).toEqual([
-      "Move layer",
-      "Resize layer",
-    ]);
-  });
+it("an agent's edit made seconds before Studio's stays the agent's: Cmd+Z undoes only Studio's", async () => {
+  const { hook, file, save, readFile } = await studio();
+  save("B");
+  await act(() => hook().recordEdit({ label: "sweep", files: {} }));
+  save("C");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Title",
+      files: { "index.html": { before: "B", after: "C" } },
+    }),
+  );
+  expect(await act(() => hook().undo({ readFile }))).toMatchObject({ label: "Undid: Moved Title" });
+  expect(file()).toBe("B");
+});
 
-  it("still coalesces concurrent source edits that share a coalesce key", async () => {
-    const storage = createMemoryEditHistoryStorage();
-    let timestamp = 100;
-    const store = createPersistentEditHistoryStore({
-      projectId: "project-1",
-      storage,
-      initialState: createEmptyEditHistory(),
-      now: () => timestamp++,
-      onChange: () => {},
-    });
+it("an undo's writes carry the write token Studio marked, so their echo is not read as an outside edit", async () => {
+  const { dir, hook, save, readFile } = await studio();
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Title",
+      files: { "index.html": { before: "A", after: "B" } },
+    }),
+  );
+  await act(() => hook().undo({ readFile }));
+  const receipt = identifyFileWrite(join(dir, "index.html"), fileContentVersion("A"));
+  expect(consumeStudioWriteToken(receipt?.writeToken ?? null)).toBe(true);
+});
 
-    await Promise.all([
-      store.recordEdit({
-        label: "Edit source",
-        kind: "source",
-        coalesceKey: "source:index.html",
-        files: { "index.html": { before: "a", after: "b" } },
-      }),
-      store.recordEdit({
-        label: "Edit source",
-        kind: "source",
-        coalesceKey: "source:index.html",
-        files: { "index.html": { before: "b", after: "c" } },
-      }),
-    ]);
+it("without a history on the server an edit still saves, and there is nothing to undo", async () => {
+  const { hook, file, save, readFile } = await studio({ withHistory: false });
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Title",
+      files: { "index.html": { before: "A", after: "B" } },
+    }),
+  );
+  expect(hook().canUndo).toBe(false);
+  expect(await act(() => hook().undo({ readFile }))).toEqual({ ok: false, reason: "empty" });
+  expect(file()).toBe("B");
+});
 
-    expect(store.snapshot().state.undo).toHaveLength(1);
-    expect(store.snapshot().state.undo[0].files["index.html"].before).toBe("a");
-    expect(store.snapshot().state.undo[0].files["index.html"].after).toBe("c");
+/** Answers requests to `route` with `reply` instead of the engine, every other request as before; returns the undo. */
+function answer(route: "/history/step" | "/history/claim", status: number, reply: object | string) {
+  const real = globalThis.fetch;
+  vi.stubGlobal("fetch", (url: string, init?: RequestInit) =>
+    url.endsWith(route)
+      ? Promise.resolve(
+          new Response(typeof reply === "string" ? reply : JSON.stringify(reply), { status }),
+        )
+      : real(url, init),
+  );
+  return () => vi.stubGlobal("fetch", real);
+}
+
+it("a step the server could not take says why, instead of reading as nothing to undo", async () => {
+  const { hook, readFile } = await studio();
+  answer("/history/step", 500, { error: "disk full" });
+  expect(await act(() => hook().undo({ readFile }))).toEqual({
+    ok: false,
+    reason: "failed",
+    message: "disk full",
   });
+});
 
-  it("reads undo hashes from the live top entry during queued undo calls", async () => {
-    const storage = createMemoryEditHistoryStorage();
-    let timestamp = 100;
-    const store = createPersistentEditHistoryStore({
-      projectId: "project-1",
-      storage,
-      initialState: createEmptyEditHistory(),
-      now: () => timestamp++,
-      onChange: () => {},
-    });
-    await store.recordEdit({
-      label: "Edit first file",
-      kind: "manual",
-      files: { "first.html": { before: "first-before", after: "first-after" } },
-    });
-    await store.recordEdit({
-      label: "Edit second file",
-      kind: "manual",
-      files: { "second.html": { before: "second-before", after: "second-after" } },
-    });
-
-    const files: Record<string, string> = {
-      "first.html": "first-after",
-      "second.html": "second-after",
-    };
-    const readPaths: string[] = [];
-
-    await Promise.all([
-      store.undo({
-        readFile: async (path) => {
-          readPaths.push(path);
-          return files[path];
-        },
-        writeFile: async (path, content) => {
-          files[path] = content;
-        },
-      }),
-      store.undo({
-        readFile: async (path) => {
-          readPaths.push(path);
-          return files[path];
-        },
-        writeFile: async (path, content) => {
-          files[path] = content;
-        },
-      }),
-    ]);
-
-    expect(readPaths).toEqual(["second.html", "first.html"]);
-    expect(files).toEqual({
-      "first.html": "first-before",
-      "second.html": "second-before",
-    });
-    expect(store.snapshot().canUndo).toBe(false);
-    expect(store.snapshot().canRedo).toBe(true);
+it("a refused step names the files that changed since its edit", async () => {
+  const { hook, save, readFile } = await studio();
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Title",
+      files: { "index.html": { before: "A", after: "B" } },
+    }),
+  );
+  await vi.waitFor(() => expect(hook().undoLabel).toBe("Moved Title"));
+  answer("/history/step", 200, { ok: false, conflict: { files: ["index.html"], newer: [] } });
+  expect(await act(() => hook().undo({ readFile }))).toEqual({
+    ok: false,
+    reason: "content-mismatch",
+    paths: ["index.html"],
   });
+});
 
-  it("waits for same-file mutations before checking an undo hash", async () => {
-    const storage = createMemoryEditHistoryStorage();
-    const store = createPersistentEditHistoryStore({
-      projectId: "project-1",
-      storage,
-      initialState: createEmptyEditHistory(),
-      now: () => 100,
-      onChange: () => {},
-    });
-    await store.recordEdit({
-      label: "Edit source",
-      kind: "source",
-      files: { "index.html": { before: "before", after: "after" } },
-    });
-
-    let disk = "after";
-    let release!: () => void;
-    const blocked = new Promise<void>((resolve) => {
-      release = resolve;
-    });
-    const writeFile = vi.fn(async (_path: string, content: string) => {
-      disk = content;
-    });
-    const priorMutation = serializeStudioFileMutation(writeFile, "index.html", async () => {
-      await blocked;
-      disk = "newer-edit";
-    });
-    const readFile = vi.fn(async () => disk);
-    const undo = store.undo({
-      readFile,
-      writeFile,
-      serialize: (paths, task) => serializeStudioFileMutations(writeFile, paths, task),
-    });
-
-    await Promise.resolve();
-    expect(readFile).not.toHaveBeenCalled();
-    release();
-    await priorMutation;
-    await expect(undo).resolves.toMatchObject({ ok: false, reason: "content-mismatch" });
-    expect(disk).toBe("newer-edit");
-    expect(writeFile).not.toHaveBeenCalled();
-    expect(store.snapshot().canUndo).toBe(true);
+it("a claim the server refused is logged, and the write stays undoable as a change made outside", async () => {
+  const { hook, file, save, readFile } = await studio();
+  const logged = vi.spyOn(console, "error").mockImplementation(() => {});
+  cleanup.push(() => logged.mockRestore());
+  const restoreFetch = answer("/history/claim", 500, { error: "disk full" });
+  save("B");
+  await act(() =>
+    hook().recordEdit({
+      label: "Moved Title",
+      files: { "index.html": { before: "A", after: "B" } },
+    }),
+  );
+  expect(logged).toHaveBeenCalledWith('"Moved Title" was not recorded as your edit: disk full');
+  restoreFetch();
+  expect(await act(() => hook().undo({ readFile }))).toMatchObject({
+    ok: true,
+    label: "Undid: Changed outside the app",
   });
+  expect(file()).toBe("A");
+});
 
-  it("returns per-file restored/previous content so the preview can soft-apply", async () => {
-    const storage = createMemoryEditHistoryStorage();
-    const store = createPersistentEditHistoryStore({
-      projectId: "project-1",
-      storage,
-      initialState: createEmptyEditHistory(),
-      now: () => 100,
-      onChange: () => {},
-    });
-    await store.recordEdit({
-      label: "Move layer",
-      kind: "manual",
-      files: { "index.html": { before: "OLD", after: "NEW" } },
-    });
-    const disk: Record<string, string> = { "index.html": "NEW" };
-    const undo = await store.undo({
-      readFile: async (p) => disk[p],
-      writeFile: async (p, c) => {
-        disk[p] = c;
-      },
-    });
-    // `restored` = bytes written (the undo target), `previous` = the current live bytes.
-    expect(undo.files).toEqual({ "index.html": { previous: "NEW", restored: "OLD" } });
-
-    const redo = await store.redo({
-      readFile: async (p) => disk[p],
-      writeFile: async (p, c) => {
-        disk[p] = c;
-      },
-    });
-    expect(redo.files).toEqual({ "index.html": { previous: "OLD", restored: "NEW" } });
+it("a step whose reply cannot be read says so, instead of throwing", async () => {
+  const { hook, readFile } = await studio();
+  answer("/history/step", 200, "<html>");
+  expect(await act(() => hook().undo({ readFile }))).toEqual({
+    ok: false,
+    reason: "failed",
+    message: "The history's reply was unreadable.",
   });
+});
 
-  it("rolls back files when an undo write fails partway through", async () => {
-    const storage = createMemoryEditHistoryStorage();
-    const store = createPersistentEditHistoryStore({
-      projectId: "project-1",
-      storage,
-      initialState: createEmptyEditHistory(),
-      now: () => 100,
-      onChange: () => {},
-    });
-    await store.recordEdit({
-      label: "Edit files",
-      kind: "manual",
-      files: {
-        "first.html": { before: "first-before", after: "first-after" },
-        "second.html": { before: "second-before", after: "second-after" },
-      },
-    });
-
-    const files: Record<string, string> = {
-      "first.html": "first-after",
-      "second.html": "second-after",
-    };
-    const result = store.undo({
-      readFile: async (path) => files[path],
-      writeFile: async (path, content) => {
-        if (path === "second.html" && content === "second-before") {
-          throw new Error("write failed");
-        }
-        files[path] = content;
-      },
-    });
-
-    await expect(result).rejects.toThrow("write failed");
-    expect(files).toEqual({
-      "first.html": "first-after",
-      "second.html": "second-after",
-    });
-    expect(store.snapshot().undoLabel).toBe("Edit files");
-    expect(store.snapshot().canRedo).toBe(false);
+it("a step that cannot reach the server says so", async () => {
+  const { hook, readFile } = await studio();
+  const real = globalThis.fetch;
+  vi.stubGlobal("fetch", (url: string, init?: RequestInit) =>
+    url.endsWith("/history/step") ? Promise.reject(new TypeError("fetch failed")) : real(url, init),
+  );
+  expect(await act(() => hook().undo({ readFile }))).toEqual({
+    ok: false,
+    reason: "failed",
+    message: "Studio could not reach its server.",
   });
 });