fix(studio): an older failed save never settles over a newer edit on the same lane

Live-preview bookkeeping moves to createLiveLanes, one owner for both timeline
saves: each lane key carries a generation that every live write and save start
advances, and a save settles the preview and store (on its landed value, or on
the file after a failure) only while it is still the newest. A paste marks its
span only if it is still the latest paste.

Author: miguel-heygen

packages/studio/src/hooks/timelineAudioGroupVolume.ts

@@ -12,7 +12,7 @@ import { invalidateGroupInfoCache } from "../player/lib/timelineGroupInfo";
 import {
   buildPatchTarget,
   persistElementAttribute,
-  claimLiveBefore,
+  createLiveLanes,
   readSavedAttribute,
   type RecordEditInput,
 } from "./timelineEditingHelpers";
@@ -238,14 +238,12 @@ export function useSetAudioGroupAttribute({
   ) => Promise<TimelineEditOutcome>;
   revertLive: (groupId: string, attr: string) => void;
 } {
-  const liveBeforeRef = useRef(new Map<string, string | null>());
+  const liveLanes = useRef(createLiveLanes());
   const setLive = useCallback(
     (groupId: string, attr: string, value: string | null) => {
       const key = audioGroupAttributeLiveKey(groupId, attr);
       const target = previewIframeRef.current?.contentDocument?.getElementById(groupId);
-      if (!liveBeforeRef.current.has(key)) {
-        liveBeforeRef.current.set(key, target?.getAttribute(attr) ?? null);
-      }
+      liveLanes.current.preview(key, () => target?.getAttribute(attr) ?? null);
       patchLiveGroupAttribute(previewIframeRef.current, groupId, attr, value);
       // Live too, not just on commit: a fader drag is `setLive` per frame and
       // `setQuiet` once on release, so without this the strip's own readout
@@ -256,7 +254,7 @@ export function useSetAudioGroupAttribute({
   );
   const claimLive = useCallback(
     (groupId: string, attr: string) =>
-      claimLiveBefore(liveBeforeRef.current, audioGroupAttributeLiveKey(groupId, attr), (value) => {
+      liveLanes.current.claim(audioGroupAttributeLiveKey(groupId, attr), (value) => {
         patchLiveGroupAttribute(previewIframeRef.current, groupId, attr, value);
         syncStoredGroupAttribute(groupId, attr, value);
       }),
@@ -310,7 +308,7 @@ export function useSetAudioGroupAttribute({
         });
         if (!written)
           return unsaved(failedTimelineSave("This group has no id to save it by", showToast));
-        syncStoredGroupAttribute(groupId, attr, value);
+        settleLive(value);
         return { status: "saved" };
       } catch (error) {
         console.error("[Timeline] Failed to set group attribute", error);

packages/studio/src/hooks/timelineEditingHelpers.ts

@@ -397,19 +397,32 @@ export async function persistTimelineBatchEdit(
   });
 }
 
-/** Claim `key`'s before-value; the call settles on `saved` (else the claim), sparing a newer gesture. */
-export function claimLiveBefore(
-  liveBefore: Map<string, string | null>,
-  key: string,
-  apply: (value: string | null) => void,
-): (saved?: string | null) => void {
-  const claimed = liveBefore.has(key) ? (liveBefore.get(key) ?? null) : undefined;
-  liveBefore.delete(key);
-  return (saved) => {
-    const value = saved !== undefined ? saved : claimed;
-    if (value === undefined) return;
-    if (liveBefore.has(key)) liveBefore.set(key, value);
-    else apply(value);
+/** Live-preview bookkeeping per lane: the value before a gesture, and which gesture is newest. */
+export function createLiveLanes() {
+  const before = new Map<string, string | null>();
+  const generation = new Map<string, number>();
+  const bump = (key: string): number => {
+    const next = (generation.get(key) ?? 0) + 1;
+    generation.set(key, next);
+    return next;
+  };
+  return {
+    preview(key: string, readCurrent: () => string | null): void {
+      if (!before.has(key)) before.set(key, readCurrent());
+      bump(key);
+    },
+    // The returned call settles on `saved` (else the claimed before-value), unless a
+    // newer gesture or save has touched the lane since.
+    claim(key: string, apply: (value: string | null) => void): (saved?: string | null) => void {
+      const claimed = before.has(key) ? (before.get(key) ?? null) : undefined;
+      before.delete(key);
+      const mine = bump(key);
+      return (saved) => {
+        if (generation.get(key) !== mine) return;
+        const value = saved !== undefined ? saved : claimed;
+        if (value !== undefined) apply(value);
+      };
+    },
   };
 }
 

packages/studio/src/hooks/timelineElementFxAttribute.ts

@@ -12,8 +12,8 @@ import type { TimelineElement } from "../player";
 import {
   buildPatchTarget,
   findTimelineElementInIframe,
+  createLiveLanes,
   persistElementAttribute,
-  claimLiveBefore,
   readSavedAttribute,
 } from "./timelineEditingHelpers";
 import type {
@@ -116,28 +116,22 @@ export function useSetElementAttribute({
   ) => Promise<TimelineEditOutcome>;
   revertLive: (element: TimelineElement, attr: string) => void;
 } {
-  const liveBeforeRef = useRef(new Map<string, string | null>());
+  const liveLanes = useRef(createLiveLanes());
   const setLive = useCallback(
     (element: TimelineElement, attr: string, value: string | null) => {
       const key = elementAttributeLiveKey(element, activeCompPath, attr);
       const target = findTimelineElementInIframe(previewIframeRef.current, element, activeCompPath);
-      if (!liveBeforeRef.current.has(key)) {
-        liveBeforeRef.current.set(key, target?.getAttribute(attr) ?? null);
-      }
+      liveLanes.current.preview(key, () => target?.getAttribute(attr) ?? null);
       patchLiveElementAttribute(previewIframeRef.current, element, attr, value, activeCompPath);
     },
     [previewIframeRef, activeCompPath],
   );
   const claimLive = useCallback(
     (element: TimelineElement, attr: string) =>
-      claimLiveBefore(
-        liveBeforeRef.current,
-        elementAttributeLiveKey(element, activeCompPath, attr),
-        (value) => {
-          patchLiveElementAttribute(previewIframeRef.current, element, attr, value, activeCompPath);
-          syncStoredAutomationFromPreview(previewIframeRef.current?.contentDocument);
-        },
-      ),
+      liveLanes.current.claim(elementAttributeLiveKey(element, activeCompPath, attr), (value) => {
+        patchLiveElementAttribute(previewIframeRef.current, element, attr, value, activeCompPath);
+        syncStoredAutomationFromPreview(previewIframeRef.current?.contentDocument);
+      }),
     [previewIframeRef, activeCompPath],
   );
   const revertLive = useCallback(
@@ -182,7 +176,7 @@ export function useSetElementAttribute({
         });
         if (!written)
           return unsaved(failedTimelineSave("This clip has no id to save it by", showToast));
-        syncStoredAutomationFromPreview(previewIframeRef.current?.contentDocument);
+        settleLive(value);
         return { status: "saved" };
       } catch (error) {
         console.error("[Timeline] Failed to set element attribute", error);

packages/studio/src/hooks/useAutomationSelectionKeyboard.test.tsx

@@ -320,6 +320,41 @@ describe("useAutomationSelectionKeyboard", () => {
     },
   );
 
+  it.each(["in order", "reversed"])(
+    "marks the latest paste when pastes on two clips resolve %s",
+    async (order) => {
+      clearAutomationClipboard();
+      usePlayerStore.setState({
+        elements: [
+          { ...bgmElement, duration: 10 },
+          { ...bgmElement, id: "vo", key: "vo", duration: 10 },
+        ],
+        selectedElementId: "bgm",
+        currentTime: 1,
+      });
+      usePlayerStore
+        .getState()
+        .setAutomationSelection(wholeAxis({ elementKey: "bgm", target: "volume", t0: 2, t1: 4 }));
+      const lands: Array<() => void> = [];
+      const onCommit = vi.fn(
+        () =>
+          new Promise<{ status: "saved" }>((resolve) =>
+            lands.push(() => resolve({ status: "saved" })),
+          ),
+      );
+      setup({ onCommit });
+      combo("c");
+      usePlayerStore.getState().clearAutomationSelection();
+      combo("v");
+      usePlayerStore.setState({ selectedElementId: "vo" });
+      combo("v");
+      const order_ = order === "in order" ? [0, 1] : [1, 0];
+      for (const i of order_) lands[i]?.();
+      await act(async () => {});
+      expect(usePlayerStore.getState().automationSelection?.elementKey).toBe("vo");
+    },
+  );
+
   it("chains a second Cmd+V after the first instead of overwriting it", async () => {
     // The regression this pins: paste leaves its own span selected, so anchoring
     // at sel.t0 unconditionally made every later press recompute the same atT.

packages/studio/src/hooks/useAutomationSelectionKeyboard.ts

@@ -213,6 +213,8 @@ function pasteAnchor(
   return clampNumber(raw, 0, element.duration - span);
 }
 
+let latestPaste = 0;
+
 /**
  * Cmd/Ctrl+V: paste the clipboard onto the selected clip's lane, at the active
  * selection or the playhead. Returns false (untouched event) when the chord
@@ -243,6 +245,7 @@ function handlePaste(
   const saved = paste.binding.onCommit(
     withLane(paste.binding.automation, { target: paste.target, points }),
   );
+  const seq = ++latestPaste;
   const mark = {
     elementKey: paste.elementKey,
     target: paste.target,
@@ -251,13 +254,13 @@ function handlePaste(
     v0: paste.range.min,
     v1: paste.range.max,
   };
-  // Once it lands, and only over the selection it was pasted at, select and mark the
-  // full-height span: the feedback that it landed, what a second Cmd+V chains after,
-  // and what Delete takes back in one press. A refused paste marks nothing.
+  // Once the latest paste lands, and only over the selection it was pasted at, select
+  // and mark its full-height span: the feedback that it landed, what a second Cmd+V
+  // chains after, and what Delete takes back in one press.
   void saved.then((outcome) => {
     if (outcome && outcome.status !== "saved") return;
     const current = usePlayerStore.getState();
-    if (current.automationSelection !== sel) return;
+    if (seq !== latestPaste || current.automationSelection !== sel) return;
     current.setAutomationSelection(mark);
     markLastPaste(mark);
   });

packages/studio/src/player/components/useAutomationLanes.save.test.tsx

@@ -41,12 +41,21 @@ afterEach(() => {
 
 function mountLanes(target: TimelineElement, canEdit?: CanEdit, recording = false) {
   let file = SOURCE;
+  let reads = 0;
+  const held = new Map<number, Promise<void>>();
   vi.stubGlobal(
     "fetch",
-    vi.fn(async (input: Parameters<typeof fetch>[0]) =>
-      requestUrl(input).includes("/files/") ? jsonResponse({ content: file }) : jsonResponse({}),
-    ),
+    vi.fn(async (input: Parameters<typeof fetch>[0]) => {
+      if (!requestUrl(input).includes("/files/")) return jsonResponse({});
+      await held.get(++reads);
+      return jsonResponse({ content: file });
+    }),
   );
+  const holdRead = (n: number) => {
+    let release = () => {};
+    held.set(n, new Promise<void>((resolve) => (release = resolve)));
+    return release;
+  };
   const iframe = document.createElement("iframe");
   document.body.append(iframe);
   iframe.contentDocument!.body.innerHTML = SOURCE;
@@ -119,6 +128,9 @@ function mountLanes(target: TimelineElement, canEdit?: CanEdit, recording = fals
     selection,
     iframe,
     setFile: (next: string) => (file = next),
+    file: () => file,
+    reads: () => reads,
+    holdRead,
   };
 }
 
@@ -227,6 +239,37 @@ describe("useAutomationLanes saves report what happened", () => {
     expect(usePlayerStore.getState().elements[0]?.automation).toBe(saved);
   });
 
+  it("never lets an older failed save's recovery land over a newer save", async () => {
+    const { commit, startCommit, preview, writeProjectFile, iframe, file, reads, holdRead } =
+      mountLanes(music);
+    const at = (v: number) => ({
+      version: 1 as const,
+      lanes: [{ target: "volume", points: [{ t: 0, v }] }],
+    });
+    expect(await commit(at(0.5))).toEqual({ status: "saved" });
+    const releaseRecovery = holdRead(3);
+    writeProjectFile.mockRejectedValueOnce(new Error("offline"));
+    preview(at(0.9));
+    const older = startCommit(at(0.9));
+    await act(() => vi.waitFor(() => expect(reads()).toBe(3)));
+    preview(at(0.7));
+    const newer = startCommit(at(0.7));
+    await act(() => vi.waitFor(() => expect(reads()).toBe(4)));
+    releaseRecovery();
+    let outcomes: unknown[] = [];
+    await act(async () => {
+      outcomes = await Promise.all([older, newer]);
+    });
+    expect(outcomes).toMatchObject([{ status: "failed" }, { status: "saved" }]);
+    const landed = serializeAutomation(at(0.7));
+    const saved = new DOMParser().parseFromString(file(), "text/html");
+    expect(saved.getElementById("music")?.getAttribute("data-automation")).toBe(landed);
+    expect(iframe.contentDocument!.getElementById("music")?.getAttribute("data-automation")).toBe(
+      landed,
+    );
+    expect(usePlayerStore.getState().elements[0]?.automation).toBe(landed);
+  });
+
   it("settles on a queued save that lands after an earlier one fails", async () => {
     const { startCommit, preview, writeProjectFile, iframe, setFile } = mountLanes(music);
     let failFirst = () => {};