fix(web): merge a bake or matte result over edits made while it ran

Adopting the server snapshot after an audio bake or subject isolation
replaced the whole document, so a clip edit, a marker or a track
deletion made during the request was lost and then marked synced. Both
completions now go through the existing three-way merge against the
document the action sent, scoped to the clips the route wrote, so the
generated field arrives and the user's edits survive as one undo entry.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013in93XM9r3h7RaFz62YGwN

Author: claude

web/src/stores/timeline/TimelineStore.ts

@@ -107,6 +107,8 @@ import {
   reflowGenerated,
   isTranscriptClip
 } from "./transcriptOps";
+import { mergeTimelineDocuments, type TimelineMergeDoc } from "./merge";
+import type { DocumentOp } from "@nodetool-ai/protocol";
 
 // ── Snap threshold ─────────────────────────────────────────────────────────
 
@@ -561,7 +563,9 @@ export interface TimelineStoreState {
    * Drive a clip's motion from an audio clip. The measuring and the write both
    * happen on the server, which reads the STORED document — so this saves the
    * open document first, posts the bake, and takes back the document the
-   * server wrote in one `applyAgentEdit`, i.e. one undo entry.
+   * server wrote in one `applyAgentEdit`, i.e. one undo entry. What comes back
+   * is merged against the document that was saved, so an edit made while the
+   * bake ran survives instead of being overwritten by the server's copy.
    */
   bakeAudioAnimation: (
     body: BakeAudioAnimationBody
@@ -589,7 +593,9 @@ export interface TimelineStoreState {
    * The segmentation reads the STORED document and writes the result onto the
    * clip, so this saves the open document first, marks the clip generating for
    * the editor to show, waits for the run to settle, and takes back the
-   * document the server wrote. Resolves null when the run failed — the error
+   * document the server wrote — merged against the document that was saved, so
+   * an edit made while the run was in flight survives. Each round of the wait
+   * is one undo entry. Resolves null when the run failed — the error
    * reaches the user as a notification rather than an unhandled rejection.
    */
   isolateSubject: (
@@ -1267,6 +1273,105 @@ const syncedSnapshotOf = (
   height: state.height
 });
 
+// ── Server-write adoption ──────────────────────────────────────────────────
+
+/** The document as the editor last read or wrote it. */
+type TimelineSyncedDoc = NonNullable<TimelineStoreState["syncedDocument"]>;
+
+/** What `trpc.timeline.get` answers with. */
+type FetchedSequence = Awaited<
+  ReturnType<typeof trpcClient.timeline.get.query>
+>;
+
+/**
+ * The write a server route made, as merge ops: it wrote the clips it was
+ * pointed at and nothing else. Without ops the merge engine reads the fetched
+ * copy as a whole-document replacement, which a dirty draft refuses whole —
+ * the generated field would never arrive.
+ */
+const clipWriteOps = (clipIds: readonly string[]): DocumentOp[] =>
+  clipIds.map((clipId) => ({
+    tool: "ui_timeline_update_clip",
+    input: { clip_id: clipId }
+  }));
+
+/**
+ * Take back the document a server route wrote, keeping every edit the user
+ * made while the request was in flight.
+ *
+ * `base` is the document as the action saved it — the copy the server started
+ * from — so the three-way merge of (base, current draft, fetched copy) hands
+ * the generated field to the clips the route wrote and leaves every other
+ * local edit, addition and deletion alone. Adopting the fetched copy wholesale
+ * (what this replaced) dropped any edit made inside the request window,
+ * because `setBaseUpdatedAt` then marked the replacement as synchronized and
+ * autosave had nothing left to write.
+ *
+ * The whole write is one `applyAgentEdit`, i.e. one undo entry. Returns the
+ * base for the next adoption, so a polling caller rolls forward instead of
+ * merging against a copy two rounds old.
+ *
+ * The caller has already checked that the store still holds this sequence.
+ */
+function adoptServerSequence(
+  get: () => TimelineStoreState,
+  sequence: FetchedSequence,
+  base: TimelineSyncedDoc,
+  touchedClipIds: readonly string[]
+): TimelineSyncedDoc {
+  const state = get();
+  const draft: TimelineMergeDoc = {
+    tracks: state.tracks,
+    clips: state.clips,
+    markers: state.markers,
+    transcript: state.transcript,
+    scriptEnabled: state.scriptEnabled,
+    fps: state.fps,
+    width: state.width,
+    height: state.height
+  };
+  // A field the response leaves out is one the route did not write, so the
+  // base stands in for it rather than reading as an external clear.
+  const server: TimelineMergeDoc = {
+    tracks: sequence.tracks ?? base.tracks,
+    clips: sequence.clips ?? base.clips,
+    markers: sequence.markers ?? base.markers,
+    transcript: sequence.transcript ?? base.transcript,
+    scriptEnabled: sequence.scriptEnabled ?? base.scriptEnabled,
+    fps: sequence.fps ?? base.fps,
+    width: sequence.width ?? base.width,
+    height: sequence.height ?? base.height
+  };
+
+  const { doc, nextBase } = mergeTimelineDocuments(
+    base,
+    draft,
+    server,
+    clipWriteOps(touchedClipIds)
+  );
+
+  get().applyAgentEdit({
+    tracks: doc.tracks as TimelineTrack[],
+    clips: doc.clips as TimelineClip[],
+    markers: doc.markers as TimelineMarker[]
+  });
+  // The base for the next external change is what the SERVER holds, minus the
+  // slots the draft refused, which keep the base they had — the rule
+  // `MergeResult.nextBase` documents.
+  const synced: TimelineSyncedDoc = {
+    tracks: nextBase.tracks as TimelineTrack[],
+    clips: nextBase.clips as TimelineClip[],
+    markers: nextBase.markers as TimelineMarker[],
+    transcript: nextBase.transcript as TranscriptLine[],
+    scriptEnabled: nextBase.scriptEnabled,
+    fps: nextBase.fps,
+    width: nextBase.width,
+    height: nextBase.height
+  };
+  get().setBaseUpdatedAt(sequence.updatedAt, synced);
+  return synced;
+}
+
 // ── Factory ────────────────────────────────────────────────────────────────
 
 export const createTimelineStore = (
@@ -2335,6 +2440,11 @@ export const createTimelineStore = (
             baseUpdatedAt: beforeSave.baseUpdatedAt ?? undefined,
             document: buildTimelineDocumentPayload(beforeSave)
           });
+          // What the server now holds, and so the base the bake's own write
+          // is merged against below — captured from the document that was
+          // SENT, not from the store after the save, which may already carry
+          // an edit the user made while the save was in flight.
+          const base = syncedSnapshotOf(beforeSave);
           const savedAt = (saved as { updatedAt?: unknown } | undefined)
             ?.updatedAt;
           if (
@@ -2353,12 +2463,9 @@ export const createTimelineStore = (
           // loading this one over it is the clobber every reload path avoids.
           if (get().sequenceId !== sequenceId) return result;
 
-          get().applyAgentEdit({
-            tracks: (sequence.tracks ?? []) as TimelineTrack[],
-            clips: (sequence.clips ?? []) as TimelineClip[],
-            markers: (sequence.markers ?? []) as TimelineMarker[]
-          });
-          get().setBaseUpdatedAt(sequence.updatedAt);
+          adoptServerSequence(get, sequence, base, [
+            result.clip_id || body.target_clip_id
+          ]);
           return result;
         },
 
@@ -2455,23 +2562,31 @@ export const createTimelineStore = (
             }));
           };
 
-          /** Take back the document the server wrote, in one undo entry. */
-          const adopt = async (): Promise<TimelineClip | undefined> => {
+          /**
+           * Take back the document the server wrote, in one undo entry,
+           * merged against `base` so an edit the user made while the matte ran
+           * survives. Answers with the SERVER's copy of the clip — whether the
+           * run has settled is a question about the row, not about the draft —
+           * and with the base for the next round.
+           */
+          const adopt = async (
+            base: TimelineSyncedDoc
+          ): Promise<{
+            clip: TimelineClip | undefined;
+            base: TimelineSyncedDoc;
+          }> => {
             const sequence = await trpcClient.timeline.get.query({
               id: sequenceId
             });
             const clips = (sequence.clips ?? []) as TimelineClip[];
             // The editor may have moved to another sequence while the matte
             // ran; loading this one over it is the clobber every reload path
             // avoids.
-            if (get().sequenceId !== sequenceId) return undefined;
-            get().applyAgentEdit({
-              tracks: (sequence.tracks ?? []) as TimelineTrack[],
-              clips,
-              markers: (sequence.markers ?? []) as TimelineMarker[]
-            });
-            get().setBaseUpdatedAt(sequence.updatedAt);
-            return clips.find((c) => c.id === clipId);
+            if (get().sequenceId !== sequenceId) {
+              return { clip: undefined, base };
+            }
+            const nextBase = adoptServerSequence(get, sequence, base, [clipId]);
+            return { clip: clips.find((c) => c.id === clipId), base: nextBase };
           };
 
           try {
@@ -2491,13 +2606,27 @@ export const createTimelineStore = (
             }
 
             mark("generating");
+            // What the server started from: the document that was SENT, plus
+            // the placeholder `mark` just wrote onto the clip. The placeholder
+            // is this action's own optimistic state, not a user edit — leaving
+            // it out of the base would make the clip read as edited on both
+            // sides, and the merge would refuse the matte the run produced.
+            const sent = syncedSnapshotOf(beforeSave);
+            const marked = get().clips.find((c) => c.id === clipId);
+            let base: TimelineSyncedDoc = marked
+              ? {
+                  ...sent,
+                  clips: sent.clips.map((c) => (c.id === clipId ? marked : c))
+                }
+              : sent;
+
             const result = await postIsolateSubject(sequenceId, {
               ...body,
               clip_id: clipId
             });
 
             if (result.status !== "generating") {
-              await adopt();
+              await adopt(base);
               return result;
             }
 
@@ -2508,10 +2637,12 @@ export const createTimelineStore = (
             for (;;) {
               await sleep(pollIntervalMs);
               if (get().sequenceId !== sequenceId) return result;
-              const settled = await adopt();
+              const settled = await adopt(base);
+              base = settled.base;
               if (
-                settled === undefined ||
-                (settled.generatedMatte?.status ?? "ready") !== "generating"
+                settled.clip === undefined ||
+                (settled.clip.generatedMatte?.status ?? "ready") !==
+                  "generating"
               ) {
                 return result;
               }

web/src/stores/timeline/__tests__/TimelineStore.audioBake.test.ts

@@ -153,6 +153,68 @@ describe("bakeAudioAnimation", () => {
     expect(store.getState().clips[0].animations).toBeUndefined();
   });
 
+  it("keeps edits made while the bake was in flight", async () => {
+    const { store, track, target } = seedStore();
+    // A second track with nothing on it, and a clip the bake never touches:
+    // the two things the user is about to change while the request runs.
+    const spare: TimelineTrack = makeTrack({ type: "video", name: "V2" });
+    const other: TimelineClip = makeClip({
+      id: "other-1",
+      trackId: track.id,
+      name: "Shot 2",
+      startMs: 2000,
+      durationMs: 2000,
+      mediaType: "video"
+    });
+    store.setState({
+      tracks: [track, spare],
+      clips: [target, other]
+    });
+    timelineTemporalOf(store).clear();
+
+    // The server answers with the document as it was SAVED plus the bake —
+    // it never saw the edits made after the save.
+    let releaseGet: () => void = () => {};
+    mockTimelineGet.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          releaseGet = () =>
+            resolve({
+              id: SEQUENCE_ID,
+              updatedAt: "2026-01-01T00:05:00.000Z",
+              tracks: [track, spare],
+              clips: [{ ...target, animations: [BAKED_ANIMATION] }, other],
+              markers: []
+            });
+        })
+    );
+
+    const pending = store.getState().bakeAudioAnimation(BODY);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(mockTimelineGet).toHaveBeenCalledTimes(1);
+
+    // Inside the 750 ms autosave debounce: none of this has reached the
+    // server, and the response in flight predates all of it.
+    store.getState().patchClip("other-1", { name: "Renamed" });
+    const marker = store.getState().addMarker({ timeMs: 1000, label: "Beat" });
+    store.getState().removeTrack(spare.id);
+    const before = timelineTemporalOf(store).pastStates.length;
+
+    releaseGet();
+    await pending;
+
+    const state = store.getState();
+    expect(state.clips.find((c) => c.id === "other-1")?.name).toBe("Renamed");
+    expect(state.markers.map((m) => m.id)).toEqual([marker.id]);
+    expect(state.tracks.map((t) => t.id)).toEqual([track.id]);
+    // …and the bake's own write still arrived.
+    expect(state.clips.find((c) => c.id === "target-1")?.animations).toEqual([
+      BAKED_ANIMATION
+    ]);
+    expect(state.baseUpdatedAt).toBe("2026-01-01T00:05:00.000Z");
+    expect(timelineTemporalOf(store).pastStates.length).toBe(before + 1);
+  });
+
   it("leaves the document alone when the editor moved to another sequence", async () => {
     const { store, track, target } = seedStore();
     mockTimelineGet.mockImplementation(async () => {

web/src/stores/timeline/__tests__/TimelineStore.generatedMatte.test.ts

@@ -249,6 +249,71 @@ describe("isolateSubject", () => {
     expect(store.getState().clips[0].generatedMatte?.status).toBe("ready");
   });
 
+  it("keeps edits made while the matte was in flight", async () => {
+    const { store, track, clip } = seedStore();
+    // A second track with nothing on it, and a clip the run never touches:
+    // the two things the user is about to change while the request runs.
+    const spare: TimelineTrack = makeTrack({ type: "video", name: "V2" });
+    const other: TimelineClip = makeClip({
+      id: "other-1",
+      trackId: track.id,
+      name: "Shot 2",
+      startMs: 4000,
+      durationMs: 2000,
+      mediaType: "video"
+    });
+    store.setState({ tracks: [track, spare], clips: [clip, other] });
+    timelineTemporalOf(store).clear();
+
+    postIsolate.mockResolvedValue({
+      status: "ready",
+      assetId: "mask-2",
+      sourceRange: { fromMs: 0, toMs: 4000 },
+      reused: false
+    });
+    // The server answers with the document as it was SAVED plus the matte —
+    // it never saw the edits made after the save.
+    let releaseGet: () => void = () => {};
+    mockTimelineGet.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          releaseGet = () =>
+            resolve({
+              id: SEQUENCE_ID,
+              updatedAt: "2026-01-01T00:05:00.000Z",
+              tracks: [track, spare],
+              clips: [{ ...clip, generatedMatte: MATTE }, other],
+              markers: []
+            });
+        })
+    );
+
+    const pending = store.getState().isolateSubject(CLIP_ID);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(mockTimelineGet).toHaveBeenCalledTimes(1);
+
+    // Inside the 750 ms autosave debounce: none of this has reached the
+    // server, and the response in flight predates all of it.
+    store.getState().patchClip("other-1", { name: "Renamed" });
+    const marker = store.getState().addMarker({ timeMs: 1000, label: "Beat" });
+    store.getState().removeTrack(spare.id);
+    const before = timelineTemporalOf(store).pastStates.length;
+
+    releaseGet();
+    await pending;
+
+    const state = store.getState();
+    expect(state.clips.find((c) => c.id === "other-1")?.name).toBe("Renamed");
+    expect(state.markers.map((m) => m.id)).toEqual([marker.id]);
+    expect(state.tracks.map((t) => t.id)).toEqual([track.id]);
+    // …and the run's own write still arrived.
+    expect(
+      state.clips.find((c) => c.id === CLIP_ID)?.generatedMatte
+    ).toMatchObject({ assetId: "mask-2", status: "ready" });
+    expect(state.baseUpdatedAt).toBe("2026-01-01T00:05:00.000Z");
+    expect(timelineTemporalOf(store).pastStates.length).toBe(before + 1);
+  });
+
   it("reports a refusal as a notification and puts the previous result back", async () => {
     const { store } = seedStore(MATTE);
     postIsolate.mockRejectedValue(new Error("Clip carries a time remap"));