@hyperframes/studio 0.8.80 → 0.8.82

package/src/hooks/useAskAgentModal.test.tsx

@@ -0,0 +1,78 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import { useAskAgentModal } from "./useAskAgentModal";
+
+const copied = vi.hoisted(() => [] as string[]);
+vi.mock("../utils/clipboard", () => ({
+  copyTextToClipboard: async (text: string) => copied.push(text) > 0,
+}));
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  copied.length = 0;
+  vi.unstubAllGlobals();
+});
+
+describe("useAskAgentModal", () => {
+  it("sends the live element without the preview's lazy loading or look-ahead mark, keeping authored loading", async () => {
+    vi.stubGlobal("fetch", vi.fn().mockRejectedValue(new Error("offline")));
+    const element = document.createElement("div");
+    element.setAttribute("data-hf-upcoming", "");
+    element.innerHTML =
+      '<img src="plate.png" loading="lazy" data-hf-preview-lazy><img src="own.png" loading="eager">';
+    const selection: DomEditSelection = {
+      element,
+      label: "Plate",
+      tagName: "div",
+      sourceFile: "index.html",
+      compositionPath: "index.html",
+      isCompositionHost: false,
+      isInsideLockedComposition: false,
+      selector: "div",
+      selectorIndex: 0,
+      boundingBox: { x: 0, y: 0, width: 10, height: 10 },
+      textContent: "",
+      dataAttributes: {},
+      inlineStyles: {},
+      computedStyles: {},
+      textFields: [],
+      capabilities: {
+        canSelect: true,
+        canEditStyles: true,
+        canCrop: false,
+        canMove: true,
+        canResize: true,
+        canApplyManualOffset: false,
+        canApplyManualSize: false,
+        canApplyManualRotation: false,
+      },
+    };
+    let hook: ReturnType<typeof useAskAgentModal> | null = null;
+    function Harness() {
+      hook = useAskAgentModal({
+        projectId: "demo",
+        activeCompPath: "index.html",
+        projectDir: "/demo",
+        projectIdRef: { current: "demo" },
+        showToast: () => {},
+        domEditSelectionRef: { current: selection },
+        domEditSelection: selection,
+      });
+      return null;
+    }
+    const host = document.body.appendChild(document.createElement("div"));
+    await act(async () => createRoot(host).render(<Harness />));
+
+    await act(async () => hook!.handleAgentModalSubmit("Make it bigger"));
+
+    expect(copied[0]).toContain('<img src="plate.png"><img src="own.png" loading="eager">');
+    expect(copied[0]).not.toContain("data-hf-preview-lazy");
+    expect(copied[0]).not.toContain("data-hf-upcoming");
+  });
+});

package/src/hooks/useAskAgentModal.ts

@@ -4,6 +4,7 @@ import { useState, useCallback, useRef, useEffect } from "react";
 import { copyTextToClipboard } from "../utils/clipboard";
 import { readTagSnippetByTarget } from "../utils/sourcePatcher";
 import { toProjectAbsolutePath, type AgentModalAnchorPoint } from "../utils/studioHelpers";
+import { liveMarkupWithoutPreviewMarks } from "../utils/authoredSource";
 import { buildElementAgentPrompt, type DomEditSelection } from "../components/editor/domEditing";
 import { usePlayerStore } from "../player";
 
@@ -89,7 +90,8 @@ export function useAskAgentModal({
       if (!domEditSelection) return;
 
       const targetPath = domEditSelection.sourceFile || activeCompPath || "index.html";
-      const tagSnippet = agentPromptTagSnippet ?? domEditSelection.element.outerHTML;
+      const tagSnippet =
+        agentPromptTagSnippet ?? liveMarkupWithoutPreviewMarks(domEditSelection.element);
       const prompt = buildElementAgentPrompt({
         selection: domEditSelection,
         currentTime: usePlayerStore.getState().currentTime,

package/src/hooks/useClipboard.source.test.ts

@@ -220,6 +220,27 @@ describe("copy takes a clip's saved markup, not the runtime's live styling", ()
   });
 });
 
+describe("copy of a clip missing from its saved file", () => {
+  it("takes the preview's markup without its lazy loading or look-ahead mark, keeping authored loading", async () => {
+    selectTitle();
+    const { clipboard, writes, files, iframe } = mountClipboard();
+    const title = iframe.contentDocument?.querySelector("h1") as Element;
+    title.setAttribute("data-hf-upcoming", "");
+    title.insertAdjacentHTML(
+      "beforeend",
+      '<img src="plate.png" loading="lazy" data-hf-preview-lazy><img src="own.png" loading="lazy">',
+    );
+    files["index.html"] = SAVED.replace(/<h1[\s\S]*<\/h1>/, "");
+    clipboard().handleCopy();
+    await clipboard().handlePaste();
+    expect(writes[0]).toMatch(
+      /<img src="plate.png" data-hf-id="[^"]+"><img src="own.png" loading="lazy"/,
+    );
+    expect(writes[0]).not.toContain("data-hf-preview-lazy");
+    expect(writes[0]).not.toContain("data-hf-upcoming");
+  });
+});
+
 const SUB_SELECTION = {
   hfId: SUB_HF_ID,
   selector: "h2",
@@ -338,3 +359,14 @@ describe("a copy that fails", () => {
     expect(deleted).toEqual([]);
   });
 });
+
+describe("with no DOM edit session", () => {
+  it("refuses copy, cut and duplicate when nothing is selected", async () => {
+    clearSelection();
+    const { clipboard, deleted } = mountClipboard();
+    expect(clipboard().handleCopy()).toBe(false);
+    expect(await clipboard().handleCut()).toBe(false);
+    expect(await clipboard().handleDuplicate()).toBe(false);
+    expect(deleted).toEqual([]);
+  });
+});

package/src/hooks/useClipboard.ts

@@ -23,6 +23,7 @@ import {
   authoredMarkup,
   findAuthoredElement,
   findAuthoredElementById,
+  liveMarkupWithoutPreviewMarks,
   parseSavedSource,
 } from "../utils/authoredSource";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
@@ -33,7 +34,7 @@ interface RecordEditInput {
   files: Record<string, { before: string; after: string }>;
 }
 
-interface UseClipboardOptions {
+export interface UseClipboardOptions {
   projectId: string | null;
   activeCompPath: string | null;
   domEditSelectionRef: React.MutableRefObject<DomEditSelection | null>;
@@ -88,7 +89,9 @@ function getSelectedDomElement(
 
 function savedMarkupElseLive(saved: Document, live: Element, sourceFile: string): string {
   const authored = findAuthoredElement(saved, live) ?? findAuthoredElementById(saved, live);
-  return authored ? authoredMarkup(authored, live, sourceFile) : live.outerHTML;
+  return authored
+    ? authoredMarkup(authored, live, sourceFile)
+    : liveMarkupWithoutPreviewMarks(live);
 }
 
 async function readSavedMarkup(
@@ -356,21 +359,17 @@ export function useClipboard({
 
     const targetPath = activeCompPath || "index.html";
     try {
-      const originalContent = await readFileContent(pid, targetPath);
-      let patchedContent: string;
       let pastedIds: string[] = [];
-
-      if (payload.kind === "timeline-clip") {
+      const paste = (originalContent: string) => {
+        if (payload.kind !== "timeline-clip") return pasteElementHtml(originalContent, payload);
         const { currentTime, elements } = usePlayerStore.getState();
         const pasted = pasteTimelineClips(originalContent, payload.clips, currentTime, elements);
+        pastedIds = pasted.ids;
         // A clip pasted past the current composition end would exist in the
         // file but never appear on the timeline or in playback/export (the
         // root's data-duration is what actually bounds the render).
-        patchedContent = extendRootDurationInSource(pasted.content, pasted.requiredEnd);
-        pastedIds = pasted.ids;
-      } else {
-        patchedContent = pasteElementHtml(originalContent, payload);
-      }
+        return extendRootDurationInSource(pasted.content, pasted.requiredEnd);
+      };
 
       const label =
         payload.kind === "timeline-clip"
@@ -380,8 +379,8 @@ export function useClipboard({
       await saveProjectFilesWithHistory({
         projectId: pid,
         label,
-        files: { [targetPath]: patchedContent },
-        readFile: async () => originalContent,
+        files: { [targetPath]: paste },
+        readFile: (path) => readFileContent(pid, path),
         writeFile: writeProjectFile,
         recordEdit,
       });
@@ -422,17 +421,19 @@ export function useClipboard({
 
     try {
       const clips = await readClips(targets);
-      const originalContent = await readFileContent(pid, targetPath);
-      const liveElements = usePlayerStore.getState().elements;
-      const pasted = pasteTimelineClips(originalContent, clips, anchorTime, liveElements);
-      const patchedContent = extendRootDurationInSource(pasted.content, pasted.requiredEnd);
-      const ids = pasted.ids;
+      let ids: string[] = [];
+      const duplicate = (originalContent: string) => {
+        const liveElements = usePlayerStore.getState().elements;
+        const pasted = pasteTimelineClips(originalContent, clips, anchorTime, liveElements);
+        ids = pasted.ids;
+        return extendRootDurationInSource(pasted.content, pasted.requiredEnd);
+      };
 
       await saveProjectFilesWithHistory({
         projectId: pid,
         label: clipLabel("Duplicate", clips.length),
-        files: { [targetPath]: patchedContent },
-        readFile: async () => originalContent,
+        files: { [targetPath]: duplicate },
+        readFile: (path) => readFileContent(pid, path),
         writeFile: writeProjectFile,
         recordEdit,
       });

package/src/hooks/useDomEditCommits.test.tsx

@@ -1252,8 +1252,15 @@ describe("useDomEditCommits style persist handling", () => {
 
       const secondCommit = rendered.hook.handleDomStyleCommit("color", "green");
       await flushAsyncWork();
-      expect(patchCount).toBe(2);
+      // The newer commit waits for the older one in the file's queue.
+      expect(patchCount).toBe(1);
 
+      firstPatch.reject(new Error("server rejected blue"));
+      await firstCommit;
+      expect(element.style.getPropertyValue("color")).toBe("green");
+
+      await flushAsyncWork();
+      expect(patchCount).toBe(2);
       secondPatch.resolve(
         jsonResponse({
           ok: true,
@@ -1263,10 +1270,6 @@ describe("useDomEditCommits style persist handling", () => {
         }),
       );
       await secondCommit;
-      expect(element.style.getPropertyValue("color")).toBe("green");
-
-      firstPatch.reject(new Error("server rejected blue"));
-      await firstCommit;
 
       expect(element.style.getPropertyValue("color")).toBe("green");
     } finally {
@@ -1698,15 +1701,16 @@ describe("useDomEditCommits attribute persist handling", () => {
     try {
       // Older commit's persist stays pending (captures previousValue=null); the
       // newer commit captures previousValue="first-value" (the older commit's
-      // optimistic apply) and succeeds before the older one rejects. Without the
+      // optimistic apply) and is still queued when the older one rejects. Without the
       // per-key version guard, the stale rejection would revert to the older
       // commit's own previousValue (null) and stomp the newer commit's value.
       const firstCommit = rendered.hook.handleDomHtmlAttributeCommit("muted", "first-value");
       await act(async () => {
-        await rendered.hook.handleDomHtmlAttributeCommit("muted", "second-value");
+        const secondCommit = rendered.hook.handleDomHtmlAttributeCommit("muted", "second-value");
+        first.reject(new Error("stale request failed"));
+        await firstCommit;
+        await secondCommit;
       });
-      first.reject(new Error("stale request failed"));
-      await firstCommit;
 
       expect(element.getAttribute("muted")).toBe("second-value");
     } finally {

package/src/hooks/useDomEditCommits.ts

@@ -5,11 +5,7 @@ import { FONT_EXT } from "../utils/mediaTypes";
 
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import { primaryFontFamilyValue } from "../utils/studioFontHelpers";
-import {
-  createStudioSaveHttpError,
-  StudioSaveHttpError,
-  trackStudioSaveFailure,
-} from "../utils/studioSaveDiagnostics";
+import { StudioSaveHttpError, trackStudioSaveFailure } from "../utils/studioSaveDiagnostics";
 import { buildDomEditPatchTarget, type DomEditSelection } from "../components/editor/domEditing";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
 import type { CommitDomEditPatchBatches, PersistDomEditOperations } from "./domEditCommitTypes";
@@ -26,15 +22,15 @@ import { useElementLifecycleOps } from "./useElementLifecycleOps";
 import {
   AtomicElementPatchConvergenceError,
   batchesAreInlineStyleOnly,
-  formatPatchRejectionMessage,
   formatUnsafeFieldList,
-  getErrorDetail,
   patchElementBatches,
-  readErrorResponseBody,
+  postPatchElement,
+  writePreparedContent,
 } from "./useDomEditCommitsHelpers";
 import type { CutoverResult } from "../utils/sdkCutover";
-import { studioWriteHeaders } from "../utils/studioFileVersion";
 import { reseekPreviewRuntime } from "./timelineTrackVisibility";
+import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
+import { readProjectFileContent } from "../utils/studioFileHistory";
 interface RecordEditInput {
   label: string;
   coalesceKey?: string;
@@ -159,23 +155,13 @@ export function useDomEditCommits({
         return result;
       };
 
-      const readResponse = await fetch(
-        buildProjectApiPath(pid, `/files/${encodeURIComponent(targetPath)}`),
-      );
-      if (!readResponse.ok) {
-        throw await createStudioSaveHttpError(readResponse, `Failed to read ${targetPath}`);
-      }
-      const readData = (await readResponse.json()) as { content?: string };
-      const originalContent = readData.content;
-      if (typeof originalContent !== "string") {
-        throw new Error(`Missing file contents for ${targetPath}`);
-      }
-
-      if (projectIdRef.current !== expectedProjectId) {
-        throw new Error("Active project changed before the edit could be saved");
-      }
-
-      if (options?.shouldSave && !options.shouldSave()) return;
+      const readTarget = async (): Promise<string | null> => {
+        const content = await readProjectFileContent(pid, targetPath);
+        if (projectIdRef.current !== expectedProjectId) {
+          throw new Error("Active project changed before the edit could be saved");
+        }
+        return options?.shouldSave && !options.shouldSave() ? null : content;
+      };
 
       // Validate layout values BEFORE any persist path runs. The SDK cutover
       // path (onTrySdkPersist) returns early on success, so leaving this check
@@ -195,7 +181,10 @@ export function useDomEditCommits({
       // Skip the SDK path when prepareContent is set (e.g. @font-face injection
       // for a custom font): sdkCutoverPersist serializes only the patched DOM
       // and would drop the injected content. Let the server path run prepareContent.
+      // The SDK joins the file queue itself and re-reads there; this read is only its fallback.
       if (onTrySdkPersist && !options?.prepareContent) {
+        const originalContent = await readTarget();
+        if (originalContent === null) return;
         const cutover = await onTrySdkPersist(selection, operations, originalContent, targetPath, {
           label: options?.label,
           coalesceKey: options?.coalesceKey,
@@ -212,31 +201,41 @@ export function useDomEditCommits({
         }
       }
 
-      const patchResponse = await fetch(
-        buildProjectApiPath(pid, `/file-mutations/patch-element/${encodeURIComponent(targetPath)}`),
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-          body: JSON.stringify(patchBody),
-        },
-      );
-      if (!patchResponse.ok) {
-        showToast(formatPatchRejectionMessage(await readErrorResponseBody(patchResponse)), "error");
-        throw await createStudioSaveHttpError(patchResponse, `Failed to patch ${targetPath}`, {
-          alreadyToasted: true,
-        });
-      }
-
-      const patchData = (await patchResponse.json()) as {
-        ok?: boolean;
-        changed?: boolean;
-        matched?: boolean;
-        content?: string;
-        path?: string;
-        version?: string;
+      const history = {
+        label: options?.label ?? "Edit layer",
+        coalesceKey: options?.coalesceKey,
+        coalesceMs: options?.coalesceMs,
       };
+      const prepare = options?.prepareContent;
+      // Read, server patch, follow-up write and history hold the file's queue, so no save lands between them.
+      const saved = await serializeStudioFileMutations(writeProjectFile, [targetPath], async () => {
+        const originalContent = await readTarget();
+        if (originalContent === null) return null;
+        const patchData = await postPatchElement(pid, targetPath, patchBody, showToast);
+        if (!patchData.changed) return { patchData, patchedContent: null, finalContent: null };
+
+        const patchedContent =
+          typeof patchData.content === "string" ? patchData.content : originalContent;
+        const finalContent = prepare
+          ? await writePreparedContent(
+              targetPath,
+              patchedContent,
+              prepare,
+              writeProjectFile,
+              showToast,
+            )
+          : patchedContent;
+
+        await editHistory.recordEdit({
+          ...history,
+          files: { [targetPath]: { before: originalContent, after: finalContent } },
+        });
+        return { patchData, patchedContent, finalContent };
+      });
+      if (saved === null) return;
+      const { patchData, patchedContent, finalContent } = saved;
 
-      if (!patchData.changed) {
+      if (finalContent === null) {
         if (patchData.matched === false) {
           const targetKey = selection.selector ?? selection.id ?? "selection";
           if (!reportedUnresolvableRef.current.has(targetKey)) {
@@ -258,36 +257,6 @@ export function useDomEditCommits({
           false,
         );
       }
-
-      const patchedContent =
-        typeof patchData.content === "string" ? patchData.content : originalContent;
-
-      let finalContent = patchedContent;
-      if (options?.prepareContent) {
-        const preparedContent = options.prepareContent(patchedContent, targetPath);
-        if (preparedContent !== patchedContent) {
-          try {
-            await writeProjectFile(targetPath, preparedContent, patchedContent);
-            finalContent = preparedContent;
-          } catch (error) {
-            // The patch above already landed on disk — only the prepareContent
-            // embellishment (e.g. an injected @font-face) failed to write. Keep
-            // the already-persisted patchedContent instead of throwing, which
-            // would otherwise revert a change the server already committed.
-            showToast(
-              `Saved, but couldn't finish updating ${targetPath}: ${getErrorDetail(error)}`,
-              "error",
-            );
-          }
-        }
-      }
-
-      await editHistory.recordEdit({
-        label: options?.label ?? "Edit layer",
-        coalesceKey: options?.coalesceKey,
-        coalesceMs: options?.coalesceMs,
-        files: { [targetPath]: { before: originalContent, after: finalContent } },
-      });
       forceReloadSdkSession?.();
 
       if (!options?.skipRefresh) {
@@ -350,24 +319,38 @@ export function useDomEditCommits({
             );
           }
 
-          const atomicResult = await patchElementBatches(pid, batches);
-          const allMatched =
-            atomicResult.durable && atomicResult.files.every((result) => result.allMatched);
-          const files = Object.fromEntries(
-            atomicResult.files
-              .filter((result) => result.changed)
-              .map((result) => [result.sourceFile, { before: result.before, after: result.after }]),
+          const sourceFiles = batches.map((batch) => batch.sourceFile);
+          // The server patch and its history entry hold every touched file's queue.
+          const { allMatched, changed } = await serializeStudioFileMutations(
+            writeProjectFile,
+            sourceFiles,
+            async () => {
+              const atomicResult = await patchElementBatches(pid, batches);
+              const files = Object.fromEntries(
+                atomicResult.files
+                  .filter((result) => result.changed)
+                  .map((result) => [
+                    result.sourceFile,
+                    { before: result.before, after: result.after },
+                  ]),
+              );
+              const anyChanged = Object.keys(files).length > 0;
+              if (anyChanged) {
+                await editHistory.recordEdit({
+                  label: options.label,
+                  coalesceKey: options.coalesceKey,
+                  coalesceMs: options.coalesceMs,
+                  files,
+                });
+              }
+              return {
+                allMatched:
+                  atomicResult.durable && atomicResult.files.every((result) => result.allMatched),
+                changed: anyChanged,
+              };
+            },
           );
-          const changed = Object.keys(files).length > 0;
-          if (changed) {
-            await editHistory.recordEdit({
-              label: options.label,
-              coalesceKey: options.coalesceKey,
-              coalesceMs: options.coalesceMs,
-              files,
-            });
-            forceReloadSdkSession?.();
-          }
+          if (changed) forceReloadSdkSession?.();
           const durable = allMatched;
           // A z-only reorder already applied its inline styles to the live iframe
           // DOM (and the store) synchronously, so remounting the iframe here only
@@ -399,7 +382,15 @@ export function useDomEditCommits({
         throw error;
       });
     },
-    [editHistory, forceReloadSdkSession, projectIdRef, queueDomEditSave, reloadPreview, showToast],
+    [
+      editHistory,
+      forceReloadSdkSession,
+      projectIdRef,
+      queueDomEditSave,
+      reloadPreview,
+      showToast,
+      writeProjectFile,
+    ],
   );
 
   // ── Text & style commits (delegated to useDomEditTextCommits) ──

package/src/hooks/useDomEditCommitsHelpers.ts

@@ -1,4 +1,9 @@
-import { StudioSaveHttpError, trackStudioSaveFailure } from "../utils/studioSaveDiagnostics";
+import {
+  createStudioSaveHttpError,
+  StudioSaveHttpError,
+  trackStudioSaveFailure,
+} from "../utils/studioSaveDiagnostics";
+import { buildProjectApiPath } from "../utils/projectRouting";
 import type { DomEditPatchBatch } from "./domEditCommitTypes";
 import { formatFieldsSuffix } from "./gsapScriptCommitHelpers";
 import { studioWriteHeaders } from "../utils/studioFileVersion";
@@ -7,11 +12,11 @@ export function formatUnsafeFieldList(fields: Array<{ path: string }>): string {
   return fields.map((field) => field.path).join(", ");
 }
 
-export function getErrorDetail(error: unknown): string {
+function getErrorDetail(error: unknown): string {
   return error instanceof Error ? error.message : String(error);
 }
 
-export async function readErrorResponseBody(
+async function readErrorResponseBody(
   response: Response,
 ): Promise<{ error?: string; fields?: string[] } | null> {
   const contentType = response.headers.get("content-type") ?? "";
@@ -19,9 +24,7 @@ export async function readErrorResponseBody(
   return (await response.json().catch(() => null)) as { error?: string; fields?: string[] } | null;
 }
 
-export function formatPatchRejectionMessage(
-  body: { error?: string; fields?: string[] } | null,
-): string {
+function formatPatchRejectionMessage(body: { error?: string; fields?: string[] } | null): string {
   if (!body?.error) return "Couldn't save edit";
   return `Couldn't save edit: ${body.error}${formatFieldsSuffix(body.fields)}`;
 }
@@ -157,3 +160,63 @@ export function batchesAreInlineStyleOnly(batches: DomEditPatchBatch[]): boolean
     batch.patches.every((patch) => patch.operations.every((op) => op.type === "inline-style")),
   );
 }
+
+export interface PatchElementResponse {
+  ok?: boolean;
+  changed?: boolean;
+  matched?: boolean;
+  content?: string;
+  path?: string;
+  version?: string;
+}
+
+type ShowToast = (message: string, tone?: "error" | "info") => void;
+
+export async function postPatchElement(
+  projectId: string,
+  targetPath: string,
+  body: unknown,
+  showToast: ShowToast,
+): Promise<PatchElementResponse> {
+  const response = await fetch(
+    buildProjectApiPath(
+      projectId,
+      `/file-mutations/patch-element/${encodeURIComponent(targetPath)}`,
+    ),
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
+      body: JSON.stringify(body),
+    },
+  );
+  if (!response.ok) {
+    showToast(formatPatchRejectionMessage(await readErrorResponseBody(response)), "error");
+    throw await createStudioSaveHttpError(response, `Failed to patch ${targetPath}`, {
+      alreadyToasted: true,
+    });
+  }
+  return (await response.json()) as PatchElementResponse;
+}
+
+/** Writes `prepare`'s embellishment over the server's patch; returns what the file ends up holding. */
+export async function writePreparedContent(
+  targetPath: string,
+  patchedContent: string,
+  prepare: (html: string, sourceFile: string) => string,
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>,
+  showToast: ShowToast,
+): Promise<string> {
+  const preparedContent = prepare(patchedContent, targetPath);
+  if (preparedContent === patchedContent) return patchedContent;
+  try {
+    await writeProjectFile(targetPath, preparedContent, patchedContent);
+    return preparedContent;
+  } catch (error) {
+    // The patch already landed on disk; keep it rather than revert a committed change.
+    showToast(
+      `Saved, but couldn't finish updating ${targetPath}: ${getErrorDetail(error)}`,
+      "error",
+    );
+    return patchedContent;
+  }
+}

package/src/hooks/useEditorSave.ts

@@ -107,7 +107,7 @@ export function useEditorSave({
         projectId: candidate.projectId,
         label: "Edit source",
         coalesceKey: `source:${candidate.path}`,
-        files: { [candidate.path]: candidate.content },
+        files: { [candidate.path]: () => candidate.content },
         readFile: readProjectFile,
         writeFile: writeProjectFile,
         recordEdit,