@agent-native/core 0.182.1 → 0.182.2-nightly-20260917225811

package/corpus/templates/design/app/pages/design-editor/clone-and-pen-edit.ts

@@ -1130,6 +1130,26 @@ export function prepareClonedHtmlLayer(
   // silently misapplying edits meant for the duplicate.
   reassignClonedAuthoredIds(clone, () => uniqueLayerId("copy-id"));
   reassignClonedSourceIdentity(clone, () => uniqueLayerId("copy-child"));
+  // Runtime snapshots carry the source component identity separately from
+  // the DOM node id. Keep the component boundary stable across a clone, but
+  // mint its instance handle with the same fresh id used for the cloned node.
+  // Leaving the old handle in place makes two live instances address the same
+  // runtime component when the next snapshot is serialized.
+  for (const element of [clone, ...Array.from(clone.querySelectorAll("*"))]) {
+    const runtimeInstanceId = element.getAttribute(
+      "data-agent-native-runtime-instance-id",
+    );
+    if (!runtimeInstanceId) continue;
+    const nextInstanceId =
+      nodeIdMap.get(runtimeInstanceId) ??
+      element.getAttribute("data-agent-native-node-id");
+    if (nextInstanceId) {
+      element.setAttribute(
+        "data-agent-native-runtime-instance-id",
+        nextInstanceId,
+      );
+    }
+  }
   const linkedClone = linkedCloneSubtree(
     source,
     clone,

package/corpus/templates/design/app/pages/design-editor/code-layer-state.ts

@@ -499,6 +499,8 @@ export function elementInfoFromCodeLayerNode(node: CodeLayerNode): ElementInfo {
   return {
     tagName: node.tag,
     id: typeof node.attributes.id === "string" ? node.attributes.id : undefined,
+    componentAnnotation:
+      node.dataAttributes["data-agent-native-component"]?.trim() || undefined,
     sourceId: bridgeSourceIdForCodeLayerNode(node),
     provenance: provenanceForCodeLayerNode(node),
     selector: preferredCodeLayerSelector(node),

package/corpus/templates/design/app/pages/design-editor/commands/apply-design-editor-command.ts

@@ -53,14 +53,19 @@ export interface ApplyDesignEditorCommandArgs {
   >;
   setMode: Dispatch<SetStateAction<EditorMode>>;
   setPinMode: Dispatch<SetStateAction<boolean>>;
+  setOverviewSelectedScreenIds: Dispatch<SetStateAction<string[]>>;
   setScreenZoom: Dispatch<SetStateAction<number>>;
   setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
   setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
   setViewMode: Dispatch<SetStateAction<"single" | "overview">>;
+  pendingOverviewScreenSelectionRef?: RefObject<string | null>;
   setZoomForView: (
     targetView: "single" | "overview",
     update: SetStateAction<number>,
   ) => void;
+  /** The design payload is loaded, so overview zoom conversion has a real
+   * screen list and persisted frame scale rather than the pre-load fallback. */
+  overviewDataReady?: boolean;
   viewModeRef: RefObject<"single" | "overview">;
   /**
    * Reveals a screen on the overview canvas the same way a freshly-created
@@ -87,12 +92,15 @@ export function runApplyDesignEditorCommand(
     setInteractDeviceName,
     setInteractDeviceSize,
     setMode,
+    setOverviewSelectedScreenIds,
     setPinMode,
     setScreenZoom,
     setSelectedElement,
     setSelectedLayerIdsState,
     setViewMode,
     setZoomForView,
+    pendingOverviewScreenSelectionRef,
+    overviewDataReady = true,
     viewModeRef,
     requestCameraFit,
   }: ApplyDesignEditorCommandArgs,
@@ -132,6 +140,8 @@ export function runApplyDesignEditorCommand(
   // zero files. Otherwise the navigate is silently consumed and dropped.
   if (target && !targetFile) return false;
 
+  const targetView = editorView ?? viewModeRef.current;
+
   const inspectorTab =
     command.inspectorTab === "design" ||
     command.inspectorTab === "comments" ||
@@ -171,6 +181,12 @@ export function runApplyDesignEditorCommand(
 
   if (targetFile) {
     setActiveFileId(targetFile.id);
+    if (targetView === "overview") {
+      if (pendingOverviewScreenSelectionRef) {
+        pendingOverviewScreenSelectionRef.current = targetFile.id;
+      }
+      setOverviewSelectedScreenIds([targetFile.id]);
+    }
   }
   if (selectionId) {
     setSelectedLayerIdsState([selectionId]);
@@ -180,7 +196,6 @@ export function runApplyDesignEditorCommand(
     typeof command.zoom === "number" && Number.isFinite(command.zoom)
       ? clampZoom(command.zoom)
       : null;
-  const targetView = editorView ?? viewModeRef.current;
   // Zoom-compounding fix — see shouldDeferOverviewZoomCommand's doc
   // comment: converting a persisted overview zoom back to canvas units
   // needs the REAL overviewZoomScale (known only once `files` loads), so
@@ -193,7 +208,10 @@ export function runApplyDesignEditorCommand(
     shouldDeferOverviewZoomCommand({
       hasZoomCommand: commandZoom !== null,
       targetView,
-      filesLoaded: files.length > 0,
+      filesLoaded:
+        files.length > 0 &&
+        (targetView !== "overview" ||
+          (overviewDataReady && overviewScreens.length > 0)),
     })
   ) {
     return false;
@@ -216,7 +234,7 @@ export function runApplyDesignEditorCommand(
     const targetScreen = targetFile
       ? overviewScreens.find((screen) => screen.id === targetFile.id)
       : undefined;
-    if (targetScreen && requestCameraFit) {
+    if (targetScreen && requestCameraFit && commandZoom === null) {
       const geometry = resolveFrameGeometrySync({
         screens: overviewScreens.map((screen) => ({
           id: screen.id,

package/corpus/templates/design/app/pages/design-editor/commands/apply-file-content-update.ts

@@ -37,6 +37,7 @@ export interface ApplyFileContentUpdateArgs {
       refreshPreview?: boolean;
       skipPreview?: boolean;
       forcePreviewFullDocument?: boolean;
+      immediateSave?: boolean;
       persist?: boolean;
       recordHistory?: boolean;
       historyBeforeContent?: string;
@@ -126,6 +127,7 @@ export function runApplyFileContentUpdate(
     refreshPreview?: boolean;
     skipPreview?: boolean;
     forcePreviewFullDocument?: boolean;
+    immediateSave?: boolean;
     persist?: boolean;
     recordHistory?: boolean;
     historyBeforeContent?: string;

package/corpus/templates/design/app/pages/design-editor/commands/create-component.ts

@@ -1,3 +1,4 @@
+import type { LocalJsxSourceAnchor } from "@shared/local-jsx-visual-edit";
 import { sourceContentHash } from "@shared/source-workspace";
 
 import type {
@@ -10,6 +11,13 @@ export interface CreateComponentSourcePreimage {
   versionHash: string;
 }
 
+export interface CreateComponentLocalSource extends LocalJsxSourceAnchor {
+  connectionId: string;
+  path: string;
+  expectedVersionHash?: string;
+  propStamps?: Array<{ name: string; value: string }>;
+}
+
 export interface CreateComponentRequest {
   designId: string;
   nodeId?: string;
@@ -17,8 +25,9 @@ export interface CreateComponentRequest {
   name: string;
   fileId?: string;
   source?: {
-    currentContent: string;
-    expectedVersionHash: string;
+    currentContent?: string;
+    expectedVersionHash?: string;
+    local?: CreateComponentLocalSource;
   };
 }
 
@@ -49,6 +58,12 @@ export interface CreateComponentActionResult {
     versionHash: string;
     updatedAt: string;
   }>;
+  source?: {
+    kind: "local-file";
+    connectionId: string;
+    path: string;
+    versionHash: string;
+  };
   updatedAt?: string;
 }
 
@@ -155,10 +170,26 @@ export function createComponentActionChange(
 /** Build the command-side request and hand it to the queue-owned transaction. */
 export async function runCreateComponent(
   args: CreateComponentArgs,
-  request: Omit<CreateComponentRequest, "designId" | "fileId" | "source">,
+  request: Omit<CreateComponentRequest, "designId" | "fileId" | "source"> & {
+    source?: { local?: CreateComponentLocalSource };
+  },
 ): Promise<CreateComponentCommandOutcome | undefined> {
   if (!args.canEditDesign) return undefined;
 
+  if (request.source?.local) {
+    const result = await args.createComponent({
+      ...request,
+      designId: args.designId,
+      fileId: args.fileId,
+      source: { local: request.source.local },
+    });
+    return {
+      result,
+      historyRecorded: result.persisted === true,
+      hostSync: result.persisted === true ? "accepted" : "skipped",
+    };
+  }
+
   return args.mutationTransaction.enqueue({
     fileId: args.fileId,
     selectionBefore: args.selectionBefore,
@@ -170,6 +201,16 @@ export async function runCreateComponent(
         source: {
           currentContent: source.content,
           expectedVersionHash: source.versionHash,
+          ...(request.source?.local
+            ? {
+                local: {
+                  ...request.source.local,
+                  expectedVersionHash:
+                    request.source.local.expectedVersionHash ??
+                    source.versionHash,
+                },
+              }
+            : {}),
         },
       }),
   });

package/corpus/templates/design/app/pages/design-editor/commands/delete-files.ts

@@ -109,6 +109,8 @@ export interface DeleteFilesArgs {
   fileCreationUndoStackRef: RefObject<FileCreationHistoryEntry[]>;
   fileDeletionUndoStackRef: RefObject<FileDeletionHistoryEntry[]>;
   fileHistoryMutationPendingRef: RefObject<boolean>;
+  captureHistoryCheckpoint?: () => Promise<string>;
+  clearPendingHistory?: () => void;
   files: DesignFile[];
   geometryRedoStackRef: RefObject<GeometryHistoryEntry[]>;
   geometryUndoStackRef: RefObject<GeometryHistoryEntry[]>;
@@ -132,7 +134,7 @@ export interface DeleteFilesArgs {
   ) => void;
 }
 
-export function runDeleteFiles(
+export async function runDeleteFiles(
   {
     activeFile,
     canvasFrameGeometryById,
@@ -149,6 +151,8 @@ export function runDeleteFiles(
     fileCreationUndoStackRef,
     fileDeletionUndoStackRef,
     fileHistoryMutationPendingRef,
+    captureHistoryCheckpoint,
+    clearPendingHistory,
     files,
     geometryRedoStackRef,
     geometryUndoStackRef,
@@ -186,8 +190,11 @@ export function runDeleteFiles(
       failedFiles: DesignFile[],
     ) => void;
   },
-) {
+): Promise<void> {
   if (!filesToDelete.length) return;
+  if (options?.recordDeletionHistory && fileHistoryMutationPendingRef.current) {
+    throw new Error(t("common.genericError"));
+  }
   const deleteIds = new Set(filesToDelete.map((file) => file.id));
   const nextActiveFile = files.find((file) => !deleteIds.has(file.id));
   const nextGeometry = cloneCanvasFrameGeometry(canvasFrameGeometryById);
@@ -201,10 +208,24 @@ export function runDeleteFiles(
           })),
         }
       : null;
+  let historyCheckpointId: string | undefined;
   if (deletionHistoryEntry) {
-    clearRedoStacks();
     fileHistoryMutationPendingRef.current = true;
     syncUndoRedoState();
+    if (captureHistoryCheckpoint) {
+      try {
+        historyCheckpointId = await captureHistoryCheckpoint();
+      } catch (error) {
+        fileHistoryMutationPendingRef.current = false;
+        clearPendingHistory?.();
+        syncUndoRedoState();
+        toast.error(
+          error instanceof Error ? error.message : t("common.genericError"),
+        );
+        return;
+      }
+    }
+    clearRedoStacks();
   }
   filesToDelete.forEach((file) => {
     delete nextGeometry[file.id];
@@ -371,61 +392,62 @@ export function runDeleteFiles(
   setSelectedElement(null);
   setSelectedLayerIdsState([]);
 
-  void Promise.allSettled(
+  const results = await Promise.allSettled(
     filesToDelete.map((file) =>
       deleteFileMutation.mutateAsync({
         id: file.id,
         allowLockedLayers: true,
+        ...(historyCheckpointId ? { historyCheckpointId } : {}),
       } as any),
     ),
-  ).then((results) => {
-    const deletedFiles = filesToDelete.filter((_, index) => {
-      const result = results[index];
-      return (
-        result?.status === "fulfilled" &&
-        (result.value as { deleted?: boolean } | undefined)?.deleted !== false
-      );
-    });
-    const deletedIds = new Set(deletedFiles.map((file) => file.id));
-    const failedFiles = filesToDelete.filter(
-      (file) => !deletedIds.has(file.id),
+  );
+  const deletedFiles = filesToDelete.filter((_, index) => {
+    const result = results[index];
+    return (
+      result?.status === "fulfilled" &&
+      (result.value as { deleted?: boolean } | undefined)?.deleted !== false
     );
+  });
+  const deletedIds = new Set(deletedFiles.map((file) => file.id));
+  const failedFiles = filesToDelete.filter((file) => !deletedIds.has(file.id));
 
-    if (deletionHistoryEntry && deletedFiles.length > 0) {
-      fileDeletionUndoStackRef.current = [
-        ...fileDeletionUndoStackRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
-        filterFileDeletionHistoryEntry(deletionHistoryEntry, deletedIds),
-      ];
-      historyOrderRef.current = [
-        ...historyOrderRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
-        "file-deleted",
-      ];
-    }
+  if (deletionHistoryEntry && deletedFiles.length > 0) {
+    fileDeletionUndoStackRef.current = [
+      ...fileDeletionUndoStackRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
+      filterFileDeletionHistoryEntry(deletionHistoryEntry, deletedIds),
+    ];
+    historyOrderRef.current = [
+      ...historyOrderRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
+      "file-deleted",
+    ];
+  }
 
-    const rejected = results.find(
-      (result): result is PromiseRejectedResult => result.status === "rejected",
-    );
-    if (failedFiles.length > 0) {
-      void queryClient.invalidateQueries({
-        queryKey: ["action", "get-design"],
-      });
-      if (rejected) {
-        toast.error(
-          rejected.reason instanceof Error
-            ? rejected.reason.message
-            : t("common.genericError"),
-        );
-      }
+  const rejected = results.find(
+    (result): result is PromiseRejectedResult => result.status === "rejected",
+  );
+  if (failedFiles.length > 0) {
+    void queryClient.invalidateQueries({
+      queryKey: ["action", "get-design"],
+    });
+    if (rejected) {
+      toast.error(
+        rejected.reason instanceof Error
+          ? rejected.reason.message
+          : t("common.genericError"),
+      );
     }
+    // A partial/failed batch is not a safe boundary for a queued undo/redo.
+    // The surviving user intent must be reissued explicitly after refresh.
+    if (deletionHistoryEntry) clearPendingHistory?.();
+  }
 
-    if (deletionHistoryEntry) {
-      fileHistoryMutationPendingRef.current = false;
-      for (const fileId of deletedIds)
-        latestClipboardMutationContentRef.current.delete(fileId);
-    }
-    options?.onMutationSettled?.(deletedFiles, failedFiles);
-    syncUndoRedoState();
-  });
+  if (deletionHistoryEntry) {
+    fileHistoryMutationPendingRef.current = false;
+    for (const fileId of deletedIds)
+      latestClipboardMutationContentRef.current.delete(fileId);
+  }
+  options?.onMutationSettled?.(deletedFiles, failedFiles);
+  syncUndoRedoState();
 
   // File-backed screen deletion is not a geometry-only edit. The screen rows
   // are hard-deleted, so suppress MultiScreenCanvas' local frame-history

package/corpus/templates/design/app/pages/design-editor/commands/duplicate-screen.ts

@@ -1,5 +1,8 @@
 import { useActionMutation } from "@agent-native/core/client/hooks";
-import type { CanvasFrameGeometryById } from "@shared/canvas-frames";
+import type {
+  CanvasFrameGeometry,
+  CanvasFrameGeometryById,
+} from "@shared/canvas-frames";
 import type { QueryClient } from "@tanstack/react-query";
 import type { RefObject } from "react";
 import { toast } from "sonner";
@@ -21,6 +24,41 @@ import {
 import type { FileCreationHistoryEntry } from "@/pages/design-editor/history";
 import type { DesignFile } from "@/pages/design-editor/types";
 
+const DUPLICATE_SCREEN_GAP = 56;
+
+function isCompleteFrameGeometry(
+  geometry: CanvasFrameGeometry | undefined,
+): geometry is FrameGeometry {
+  return (
+    geometry !== undefined &&
+    [geometry.x, geometry.y, geometry.width, geometry.height].every(
+      (value) => typeof value === "number" && Number.isFinite(value),
+    )
+  );
+}
+
+export function getDuplicateScreenGeometry(
+  sourceGeometry: FrameGeometry,
+  occupiedGeometries: readonly FrameGeometry[],
+): FrameGeometry {
+  const rowBottom = sourceGeometry.y + sourceGeometry.height;
+  const rowGeometries = occupiedGeometries.filter(
+    (geometry) =>
+      geometry.y < rowBottom && geometry.y + geometry.height > sourceGeometry.y,
+  );
+  const x = Math.max(
+    sourceGeometry.x + sourceGeometry.width + DUPLICATE_SCREEN_GAP,
+    ...rowGeometries.map(
+      (geometry) => geometry.x + geometry.width + DUPLICATE_SCREEN_GAP,
+    ),
+  );
+  const z = Math.max(
+    sourceGeometry.z ?? 0,
+    ...occupiedGeometries.map((geometry) => geometry.z ?? 0),
+  );
+  return { ...sourceGeometry, x, y: sourceGeometry.y, z: z + 1 };
+}
+
 export interface DuplicateScreenArgs {
   canEditDesign: boolean;
   createFileAsync: ReturnType<
@@ -28,7 +66,14 @@ export interface DuplicateScreenArgs {
   >["mutateAsync"];
   designDataJsonRef: RefObject<Record<string, unknown>>;
   files: DesignFile[];
-  focusCreatedScreen: (screenId: string, geometry: FrameGeometry) => void;
+  focusCreatedScreen: (
+    screenId: string,
+    geometry: FrameGeometry,
+    options?: {
+      preserveCamera?: boolean;
+      suppressLineupRecenter?: boolean;
+    },
+  ) => void;
   id: string | undefined;
   liveFrameGeometryRef: RefObject<CanvasFrameGeometryById>;
   optimisticallyInsertCreatedFile: (args: {
@@ -71,6 +116,7 @@ export function runDuplicateScreen(
   screenId: string,
   request?: {
     canvasPosition?: { x: number; y: number };
+    preserveCamera?: boolean;
   },
 ) {
   if (!id || !canEditDesign) return;
@@ -86,15 +132,30 @@ export function runDuplicateScreen(
     width: sourceOverviewScreen?.width ?? 1280,
     height: sourceOverviewScreen?.height ?? 2560,
   });
+  const persistedGeometry = getCanvasFrameGeometry(designDataJsonRef.current);
+  const sourceGeometry =
+    [liveFrameGeometryRef.current[screenId], persistedGeometry[screenId]].find(
+      isCompleteFrameGeometry,
+    ) ?? fallbackGeometry;
+  const occupiedGeometries = overviewScreens
+    .filter((screen) => screen.id !== screenId)
+    .map(
+      (screen) =>
+        liveFrameGeometryRef.current[screen.id] ?? persistedGeometry[screen.id],
+    )
+    .filter(isCompleteFrameGeometry);
+  const adjacentGeometry = getDuplicateScreenGeometry(
+    sourceGeometry,
+    occupiedGeometries,
+  );
   const createdGeometry: FrameGeometry = request?.canvasPosition
     ? {
-        ...fallbackGeometry,
-        ...liveFrameGeometryRef.current[screenId],
+        ...sourceGeometry,
         x: request.canvasPosition.x,
         y: request.canvasPosition.y,
+        z: adjacentGeometry.z,
       }
-    : fallbackGeometry;
-
+    : adjacentGeometry;
   // Per-call mutate callbacks, not a promise, would silently strand every
   // duplicate but the last: a second mutate() detaches the observer from
   // the first mutation, so only the newest call's onSuccess ever runs.
@@ -104,7 +165,7 @@ export function runDuplicateScreen(
     content,
     fileType,
   } as any)
-    .then((result: any) => {
+    .then(async (result: any) => {
       const nextId = typeof result?.id === "string" ? result.id : null;
       // Refetch only when there is no created id to insert optimistically:
       // a whole-design refetch re-downloads every screen's HTML, which is
@@ -114,30 +175,19 @@ export function runDuplicateScreen(
           queryKey: ["action", "get-design"],
         });
       } else {
-        optimisticallyInsertCreatedFile({
-          fileId: nextId,
-          filename,
-          fileType,
-          content,
-          result,
-        });
         // Optimistic geometry keeps frame, selection, and camera agreeing
-        // before the refetch. Base it on the map writeFrameGeometrySnapshot
-        // diffs against, or a sibling duplicate's placement is deleted.
+        // before the refetch. Write it before the file enters `screens`, or
+        // the geometry-sync effect can render a fallback frame first and
+        // preserve that stale position over the requested drop point.
         writeFrameGeometrySnapshot({
           ...getCanvasFrameGeometry(designDataJsonRef.current),
           [nextId]: createdGeometry,
         });
-        focusCreatedScreen(nextId, createdGeometry);
-        recordFileCreationHistoryEntry({
-          filename,
-          content,
-          fileType,
-          geometry: createdGeometry,
-        });
-        // A duplicated localhost/fusion screen stays URL-backed only if its
-        // metadata comes along, and the carry must be path-addressed or it
-        // replaces a peer's metadata for every other screen.
+        // Carry screen dimensions/height mode for every duplicate so the new
+        // frame uses the same overview scale. Runtime metadata also keeps
+        // localhost/fusion duplicates URL-backed. The carry must be
+        // path-addressed or it replaces a peer's metadata for every other
+        // screen.
         const sourceMetadataById = getDesignDataRecord(
           designDataJsonRef.current,
           "screenMetadata",
@@ -147,29 +197,61 @@ export function runDuplicateScreen(
           screenId,
         );
         const sourceType = sourceMetadata.sourceType;
-        if (sourceType === "localhost" || sourceType === "fusion") {
-          const dataOperations: DesignDataOperation[] = [
-            {
-              op: "set",
-              path: ["screenMetadata", nextId],
-              value: { ...sourceMetadata },
-            },
-          ];
-          const sourceLocalhostScreensById = getDesignDataRecord(
-            designDataJsonRef.current,
-            "localhostScreens",
-          );
-          const sourceLocalhostScreen = getDesignDataRecord(
-            sourceLocalhostScreensById,
-            screenId,
-          );
-          if (Object.keys(sourceLocalhostScreen).length > 0) {
-            dataOperations.push({
-              op: "set",
-              path: ["localhostScreens", nextId],
-              value: { ...sourceLocalhostScreen },
-            });
-          }
+        const carriesRuntimeMetadata =
+          sourceType === "localhost" || sourceType === "fusion";
+        const metadataToCopy = carriesRuntimeMetadata
+          ? sourceMetadata
+          : Object.fromEntries(
+              [
+                "sourceType",
+                "width",
+                "height",
+                "heightPinned",
+                "heightMode",
+                "breakpointHeights",
+              ].flatMap((key) =>
+                key in sourceMetadata ? [[key, sourceMetadata[key]]] : [],
+              ),
+            );
+        const screenMetadata =
+          Object.keys(metadataToCopy).length > 0
+            ? { ...metadataToCopy }
+            : undefined;
+        const sourceLocalhostScreen = carriesRuntimeMetadata
+          ? getDesignDataRecord(
+              getDesignDataRecord(
+                designDataJsonRef.current,
+                "localhostScreens",
+              ),
+              screenId,
+            )
+          : {};
+        const localhostScreen =
+          Object.keys(sourceLocalhostScreen).length > 0
+            ? { ...sourceLocalhostScreen }
+            : undefined;
+        const dataOperations: DesignDataOperation[] = [
+          {
+            op: "set",
+            path: ["canvasFrames", nextId],
+            value: createdGeometry,
+          },
+        ];
+        if (screenMetadata) {
+          dataOperations.push({
+            op: "set",
+            path: ["screenMetadata", nextId],
+            value: screenMetadata,
+          });
+        }
+        if (localhostScreen) {
+          dataOperations.push({
+            op: "set",
+            path: ["localhostScreens", nextId],
+            value: localhostScreen,
+          });
+        }
+        if (dataOperations.length > 0) {
           const nextData = applyDesignDataOperations(
             designDataJsonRef.current,
             dataOperations,
@@ -182,12 +264,35 @@ export function runDuplicateScreen(
               return { ...old, data: JSON.stringify(nextData) };
             },
           );
-          void updateDesignAsync({ id, dataOperations } as any).catch(() => {
-            void queryClient.invalidateQueries({
+          try {
+            await updateDesignAsync({ id, dataOperations } as any);
+          } catch (error) {
+            await queryClient.invalidateQueries({
               queryKey: ["action", "get-design"],
             });
-          });
+            throw error;
+          }
         }
+        optimisticallyInsertCreatedFile({
+          fileId: nextId,
+          filename,
+          fileType,
+          content,
+          result,
+        });
+        focusCreatedScreen(nextId, createdGeometry, {
+          preserveCamera: request?.preserveCamera,
+          suppressLineupRecenter: request?.preserveCamera,
+        });
+        recordFileCreationHistoryEntry({
+          filename,
+          content,
+          fileType,
+          geometry: createdGeometry,
+          preserveCamera: request?.preserveCamera,
+          screenMetadata,
+          localhostScreen,
+        });
       }
       toast.success(t("designEditor.toasts.screenDuplicated"));
     })