@agent-native/core 0.92.11 → 0.93.0

package/corpus/templates/design/app/components/design/DesignCanvas.tsx

@@ -33,6 +33,10 @@ import {
   type CanvasPin,
 } from "@/components/visual-editor";
 import { sendToDesignAgentChatAndConfirm } from "@/lib/agent-chat";
+import {
+  resolveDesktopDesignSnapshotLayer,
+  useDesktopDesignNativePreview,
+} from "@/lib/desktop-design-preview";
 import { cn } from "@/lib/utils";
 
 import { editorChromeBridgeScript } from "../../../.generated/bridge/editor-chrome.generated";
@@ -95,6 +99,7 @@ import type {
   ElementSelectionIntent,
   DeviceFrameType,
   RuntimeStructureMoveRequest,
+  RuntimeVerificationRequest,
 } from "./types";
 
 /**
@@ -312,6 +317,10 @@ interface DesignCanvasProps {
   sourceType?: "inline" | "localhost" | "fusion";
   /** Local design-connect bridge URL used to fetch editable snapshots for URL-backed localhost screens. */
   bridgeUrl?: string;
+  /** Stable local/Fusion connection scope for desktop session isolation. */
+  connectionId?: string;
+  /** Only the active focused/overview screen may own the desktop native backend. */
+  nativePreviewActive?: boolean;
   /**
    * HTML snapshot for a URL-backed localhost screen. When present, DesignCanvas
    * renders this as editable srcdoc while the persisted design file can remain
@@ -327,6 +336,13 @@ interface DesignCanvasProps {
   onRuntimeLayerSnapshot?: (snapshot: {
     html: string;
     nodeCount: number;
+    documentId?: string;
+  }) => void;
+  onRuntimeVerificationSnapshot?: (snapshot: {
+    requestId: number;
+    html: string;
+    nodeCount: number;
+    documentId?: string;
   }) => void;
   /**
    * Explicit Builder-hosted app URL for fusion source rendering.
@@ -373,6 +389,7 @@ interface DesignCanvasProps {
       selector: string;
       sourceId?: string | null;
       styles: Record<string, string>;
+      interactionState?: string;
     }>;
   } | null;
   styleBaselineResetRequest?: number | null;
@@ -391,6 +408,9 @@ interface DesignCanvasProps {
   } | null;
   /** One-shot host request to optimistically move a runtime-only layer. */
   runtimeStructureMoveRequest?: RuntimeStructureMoveRequest | null;
+  /** Mounts a separate hidden runtime only after a guarded source hash
+   * changes. The editable iframe remains untouched and fully undoable. */
+  runtimeVerificationRequest?: RuntimeVerificationRequest | null;
   embeddedFrameBackground?: string;
   transparentBackground?: boolean;
   editorChromeScaleX?: number;
@@ -506,6 +526,12 @@ interface DesignCanvasProps {
   commentContextId?: string;
   /** Stable id of the screen containing this canvas when rendered in overview. */
   screenId?: string;
+  /**
+   * Host-side iframe identity when several responsive previews render the
+   * same screen. The bridge still reports `screenId`; only DOM targeting uses
+   * this distinct value.
+   */
+  previewFrameId?: string;
   /** Human-readable label for comment-pin prompts. */
   commentContextLabel?: string;
   /**
@@ -603,11 +629,12 @@ interface DesignCanvasProps {
   /**
    * Interaction-state forced preview (Figma/Webflow parity, phase 2 — see
    * `shared/interaction-states.ts`'s "Forced-preview mechanism" doc comment).
-   * When set, posts `{ type: "state-preview", nodeId, state }` into the
-   * iframe so the editor-chrome bridge sets `data-an-state-preview="<state>"`
-   * on the matching `[data-agent-native-node-id]` element — the persisted
-   * twin CSS rule (written by `duplicateStatePreviewRules`) does the actual
-   * styling, so the bridge does zero CSS work of its own.
+   * When set, posts `{ type: "state-preview", ... }` into the iframe so the
+   * editor-chrome bridge sets `data-an-state-preview="<state>"` on the exact
+   * selected element. Inline HTML uses the persisted twin CSS rule written by
+   * `duplicateStatePreviewRules`; localhost screens can additionally pass
+   * `previewStyles`, which the bridge holds in a temporary CSSOM rule until
+   * the guarded source handoff is applied or discarded.
    * `null`/`undefined` posts `{ type: "state-preview", nodeId: null, state:
    * null }`, clearing whichever element is currently force-previewing.
    * Mirrors `gradientEditTarget`'s postMessage-sync-effect pattern exactly —
@@ -616,6 +643,9 @@ interface DesignCanvasProps {
   statePreviewTarget?: {
     nodeId: string;
     state: string;
+    selector?: string | null;
+    selectorCandidates?: string[];
+    previewStyles?: Record<string, string> | null;
   } | null;
   /**
    * Called when the user clicks the component-instance source tag (the
@@ -910,9 +940,12 @@ export function DesignCanvas({
   contentKey,
   sourceType,
   bridgeUrl,
+  connectionId,
+  nativePreviewActive = true,
   externalSnapshotHtml,
   onExternalContentSnapshot,
   onRuntimeLayerSnapshot,
+  onRuntimeVerificationSnapshot,
   fusionUrl,
   previewToken,
   zoom,
@@ -927,6 +960,7 @@ export function DesignCanvas({
   textRevertRequest,
   structureAckRequest,
   runtimeStructureMoveRequest,
+  runtimeVerificationRequest,
   embeddedFrameBackground,
   transparentBackground = false,
   editorChromeScaleX = 1,
@@ -971,6 +1005,7 @@ export function DesignCanvas({
   designTitle,
   commentContextId,
   screenId,
+  previewFrameId,
   commentContextLabel,
   onPrototypeNavigate,
   motionTracks,
@@ -990,6 +1025,7 @@ export function DesignCanvas({
 }: DesignCanvasProps) {
   const t = useT();
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const runtimeVerificationIframeRef = useRef<HTMLIFrameElement>(null);
   const embeddedCanvasPanSessionRef = useRef<EmbeddedCanvasPanSession | null>(
     null,
   );
@@ -1236,8 +1272,10 @@ export function DesignCanvas({
       EMBEDDED_WHEEL_BRIDGE_SCRIPT.replace(
         "__EMBEDDED_WHEEL_FORWARDING_ENABLED__",
         "false",
-      ).replace("__EMBEDDED_SPACE_KEY_FORWARDING_ENABLED__", "false"),
-    [],
+      )
+        .replace("__EMBEDDED_SPACE_KEY_FORWARDING_ENABLED__", "false")
+        .replace("__EDITING_SAFETY_ENABLED__", interactMode ? "false" : "true"),
+    [interactMode],
   );
   const includeLiveEditEditorChrome = !interactMode && !readOnly;
   const liveEditBridgeScript = useMemo(
@@ -1301,10 +1339,48 @@ export function DesignCanvas({
     bridgeKey: liveEditBridgeKey,
     registeredBridgeKey: effectiveRegisteredLiveEditBridgeKey,
   });
+  // Edit mode deliberately keeps `renderedContent` stable while same-screen
+  // source writes echo back, because the bridge already applied them and a
+  // srcdoc rebuild would flash/reload the canvas. Interact mode has no editor
+  // bridge, so crossing that boundary must use the latest persisted `content`
+  // or native hover/focus/pressed behavior would run against the stale HTML
+  // from before the inspector edits.
   const iframeRenderContent =
     !hasAuthenticatedLiveEditExternalFrame && activeExternalSnapshotHtml
       ? activeExternalSnapshotHtml
-      : renderedContent;
+      : interactMode
+        ? content
+        : renderedContent;
+
+  const desktopNativeSnapshot = useDesktopDesignNativePreview({
+    iframeRef,
+    url: rawExternalPreviewUrl,
+    workspaceId: designId,
+    connectionId,
+    screenId,
+    enabled:
+      nativePreviewActive &&
+      interactMode &&
+      !embeddedFrame &&
+      !boardSurface &&
+      Boolean(rawExternalPreviewUrl),
+    mode: interactMode
+      ? "interact"
+      : drawMode
+        ? "draw"
+        : pinMode
+          ? "comment"
+          : "edit",
+    presentation: embeddedFrame || boardSurface ? "overview" : "focused",
+    scale: zoom / 100,
+    active: nativePreviewActive,
+  });
+  const desktopNativeSnapshotLayer = resolveDesktopDesignSnapshotLayer({
+    hasSnapshot: Boolean(desktopNativeSnapshot),
+    interactMode,
+    editMode,
+    hasLiveEditorBridge: usesLiveEditEditorBridge,
+  });
   const externalPreviewUrl =
     liveEditExternalPreviewUrl ??
     (hasLiveEditExternalFrame
@@ -1312,6 +1388,10 @@ export function DesignCanvas({
       : activeExternalSnapshotHtml
         ? null
         : rawExternalPreviewUrl);
+  const runtimeVerificationUrl = useMemo(() => {
+    if (!runtimeVerificationRequest || !externalPreviewUrl) return null;
+    return externalPreviewUrl;
+  }, [externalPreviewUrl, runtimeVerificationRequest]);
   // Source hydration is parallel and must never block or replace the one live
   // iframe. Apply-to-source remains guarded until the callback has populated
   // DesignEditor's source snapshot.
@@ -2045,6 +2125,45 @@ export function DesignCanvas({
   useEffect(() => {
     function handleMessage(e: MessageEvent) {
       const iframeWindow = iframeRef.current?.contentWindow;
+      const runtimeVerificationWindow =
+        runtimeVerificationIframeRef.current?.contentWindow;
+      const trustedRuntimeVerificationFrame =
+        runtimeVerificationRequest !== null &&
+        runtimeVerificationRequest !== undefined &&
+        runtimeVerificationWindow !== null &&
+        isTrustedCanvasBridgeMessage({
+          source: e.source,
+          origin: e.origin,
+          iframeWindow: runtimeVerificationWindow,
+          parentOrigin: window.location.origin,
+          allowedOrigins:
+            sourceType === "localhost" && bridgeUrl
+              ? [originFromUrl(bridgeUrl)].filter((origin): origin is string =>
+                  Boolean(origin),
+                )
+              : [],
+        });
+      if (trustedRuntimeVerificationFrame) {
+        if (e.data?.type !== "agent-native:runtime-layer-snapshot") return;
+        const payload = e.data.payload;
+        if (
+          payload &&
+          typeof payload.html === "string" &&
+          payload.html.length <= 2_000_000 &&
+          Number.isFinite(payload.nodeCount)
+        ) {
+          onRuntimeVerificationSnapshot?.({
+            requestId: runtimeVerificationRequest.requestId,
+            html: payload.html,
+            nodeCount: Math.max(0, Math.floor(payload.nodeCount)),
+            documentId:
+              typeof payload.documentId === "string"
+                ? payload.documentId
+                : undefined,
+          });
+        }
+        return;
+      }
       const lateReadyRecovery =
         e.data?.type === "agent-native:editor-chrome-ready"
           ? lateLiveEditReadyRecoveryRef.current
@@ -2092,6 +2211,16 @@ export function DesignCanvas({
         return;
       }
       if (!e.data || !e.data.type) return;
+      if (e.data.type === "agent-native:runtime-reloading") {
+        // A local dev server full reload is unavoidable after some source
+        // writes. Keep the last authenticated snapshot painted instead of
+        // exposing the iframe's blank navigation frame; the replacement
+        // document's ready handshake clears this fallback again.
+        if (usesLiveEditEditorBridge) {
+          setReadyIframeDocumentIdentity(null);
+        }
+        return;
+      }
       if (e.data.type === "agent-native:runtime-layer-snapshot") {
         const payload = e.data.payload;
         if (
@@ -2103,6 +2232,10 @@ export function DesignCanvas({
           onRuntimeLayerSnapshot?.({
             html: payload.html,
             nodeCount: Math.max(0, Math.floor(payload.nodeCount)),
+            documentId:
+              typeof payload.documentId === "string"
+                ? payload.documentId
+                : undefined,
           });
         }
         return;
@@ -2590,6 +2723,7 @@ export function DesignCanvas({
   }, [
     onElementSelect,
     onRuntimeLayerSnapshot,
+    onRuntimeVerificationSnapshot,
     onElementMarqueeSelect,
     onElementHover,
     onClearSelection,
@@ -2612,6 +2746,7 @@ export function DesignCanvas({
     sourceType,
     bridgeUrl,
     liveEditBridgeKey,
+    runtimeVerificationRequest,
     fusionUrl,
     flushPendingOneShotMessages,
     postOneShotBridgeMessage,
@@ -2698,6 +2833,17 @@ export function DesignCanvas({
         "*",
       );
     }
+    iframe.contentWindow?.postMessage(
+      {
+        type: "state-preview",
+        nodeId: statePreviewTarget?.nodeId ?? null,
+        selector: statePreviewTarget?.selector ?? "",
+        selectorCandidates: statePreviewTarget?.selectorCandidates ?? [],
+        state: statePreviewTarget?.state ?? null,
+        previewStyles: statePreviewTarget?.previewStyles ?? null,
+      },
+      "*",
+    );
   }, [
     handToolActive,
     hoveredSelector,
@@ -2713,6 +2859,7 @@ export function DesignCanvas({
     selectedSelectorGroups,
     shaderFillPreview,
     spacePanActive,
+    statePreviewTarget,
     tweakValues,
   ]);
 
@@ -2845,17 +2992,15 @@ export function DesignCanvas({
   // `statePreviewTarget` prop doc comment and shared/interaction-states.ts's
   // "Forced-preview mechanism" doc comment for the full contract).
   useEffect(() => {
-    const win = iframeRef.current?.contentWindow;
-    if (!win) return;
-    win.postMessage(
-      {
-        type: "state-preview",
-        nodeId: statePreviewTarget?.nodeId ?? null,
-        state: statePreviewTarget?.state ?? null,
-      },
-      "*",
-    );
-  }, [statePreviewTarget]);
+    postOneShotBridgeMessage({
+      type: "state-preview",
+      nodeId: statePreviewTarget?.nodeId ?? null,
+      selector: statePreviewTarget?.selector ?? "",
+      selectorCandidates: statePreviewTarget?.selectorCandidates ?? [],
+      state: statePreviewTarget?.state ?? null,
+      previewStyles: statePreviewTarget?.previewStyles ?? null,
+    });
+  }, [postOneShotBridgeMessage, statePreviewTarget]);
 
   // Push the constant-size chrome scale into the iframe LIVE (CSS vars only) when
   // overview zoom settles. This is intentionally separate from the srcdoc build so
@@ -3094,6 +3239,26 @@ export function DesignCanvas({
     [postOneShotBridgeMessage],
   );
 
+  const sendInteractionStatePreviewStyle = useCallback(
+    (args: {
+      selector: string;
+      selectorCandidates?: string[];
+      nodeId?: string | null;
+      state: string;
+      styles: Record<string, string>;
+    }) => {
+      postOneShotBridgeMessage({
+        type: "interaction-state-style-preview",
+        selector: args.selector,
+        selectorCandidates: args.selectorCandidates ?? [],
+        nodeId: args.nodeId ?? "",
+        state: args.state,
+        styles: args.styles,
+      });
+    },
+    [postOneShotBridgeMessage],
+  );
+
   const lastStyleRevertRequestIdRef = useRef<number | null>(null);
   useEffect(() => {
     if (!styleRevertRequest) return;
@@ -3105,9 +3270,21 @@ export function DesignCanvas({
       const selectorCandidates = [
         patch.selector,
         patch.sourceId
-          ? `[data-agent-native-node-id="${String(patch.sourceId).replace(/"/g, '\\"')}"]`
+          ? `[data-agent-native-node-id="${String(patch.sourceId)
+              .replace(/\\/g, "\\\\")
+              .replace(/"/g, '\\"')}"]`
           : "",
       ].filter(Boolean);
+      if (patch.interactionState) {
+        sendInteractionStatePreviewStyle({
+          selector: patch.selector,
+          selectorCandidates,
+          nodeId: patch.sourceId,
+          state: patch.interactionState,
+          styles: patch.styles,
+        });
+        continue;
+      }
       for (const [property, value] of Object.entries(patch.styles)) {
         postOneShotBridgeMessage({
           type: "style-change",
@@ -3119,7 +3296,11 @@ export function DesignCanvas({
         });
       }
     }
-  }, [postOneShotBridgeMessage, styleRevertRequest]);
+  }, [
+    postOneShotBridgeMessage,
+    sendInteractionStatePreviewStyle,
+    styleRevertRequest,
+  ]);
 
   const lastStyleBaselineResetRequestRef = useRef<number | null>(null);
   useEffect(() => {
@@ -3354,6 +3535,8 @@ export function DesignCanvas({
   useEffect(() => {
     if (!registerRuntimeBridge) return;
     (window as any).__designCanvasSendStyle = sendStyleChange;
+    (window as any).__designCanvasSendInteractionStatePreviewStyle =
+      sendInteractionStatePreviewStyle;
     (window as any).__designCanvasReplaceContent = replacePreviewContent;
     (window as any).__designCanvasDeleteElement = deleteRuntimeElement;
     (window as any).__designCanvasSendMotionPreview = sendMotionPreview;
@@ -3371,6 +3554,12 @@ export function DesignCanvas({
       if ((window as any).__designCanvasSendStyle === sendStyleChange) {
         delete (window as any).__designCanvasSendStyle;
       }
+      if (
+        (window as any).__designCanvasSendInteractionStatePreviewStyle ===
+        sendInteractionStatePreviewStyle
+      ) {
+        delete (window as any).__designCanvasSendInteractionStatePreviewStyle;
+      }
       if (
         (window as any).__designCanvasReplaceContent === replacePreviewContent
       ) {
@@ -3412,6 +3601,7 @@ export function DesignCanvas({
     registerRuntimeBridge,
     replacePreviewContent,
     sendStyleChange,
+    sendInteractionStatePreviewStyle,
     sendMotionPreview,
     clearMotionPreview,
     sendShaderFillPreview,
@@ -3643,6 +3833,23 @@ export function DesignCanvas({
           : null),
       }}
     >
+      {desktopNativeSnapshot && desktopNativeSnapshotLayer !== "none" ? (
+        <img
+          data-desktop-native-preview-snapshot
+          data-desktop-native-preview-snapshot-layer={
+            desktopNativeSnapshotLayer
+          }
+          src={desktopNativeSnapshot.url}
+          alt=""
+          aria-hidden="true"
+          draggable={false}
+          onLoad={() => desktopNativeSnapshot.acknowledge()}
+          className={cn(
+            "pointer-events-none absolute inset-0 block size-full select-none object-fill",
+            desktopNativeSnapshotLayer === "page" ? "z-[1]" : "z-0",
+          )}
+        />
+      ) : null}
       {liveEditTransitionFallbackHtml ? (
         <iframe
           data-live-edit-transition-fallback
@@ -3669,7 +3876,7 @@ export function DesignCanvas({
         })}
         data-design-preview-iframe
         data-screen-iframe-id={
-          boardSurface ? undefined : (screenId ?? undefined)
+          boardSurface ? undefined : (previewFrameId ?? screenId ?? undefined)
         }
         data-design-source-type={
           sourceType ??
@@ -3687,6 +3894,28 @@ export function DesignCanvas({
         }}
         title={t("designEditor.designPreview")}
       />
+      {runtimeVerificationUrl ? (
+        <iframe
+          key={`${runtimeVerificationUrl}::${runtimeVerificationRequest?.requestId ?? 0}`}
+          ref={runtimeVerificationIframeRef}
+          src={runtimeVerificationUrl}
+          sandbox={getDesignCanvasIframeSandbox({
+            externalPreview: true,
+            readOnly: true,
+          })}
+          data-runtime-verification-iframe
+          aria-hidden="true"
+          tabIndex={-1}
+          className="pointer-events-none fixed border-0 opacity-0"
+          style={{
+            left: -100_000,
+            top: -100_000,
+            width: embeddedFrame?.viewportWidth ?? previewWidthPx ?? 1280,
+            height: embeddedFrame?.viewportHeight ?? 900,
+          }}
+          title=""
+        />
+      ) : null}
       {/* Single-screen click-to-place creation overlay — sits over the
           iframe, NOT inside it, mirroring the SharedDrawOverlay pattern
           below. Only mounts while a creation tool is active so it never

package/corpus/templates/design/app/components/design/DesignEditorSkeleton.tsx

@@ -18,7 +18,7 @@ export function DesignEditorSkeleton({
     return (
       <div className="flex h-full overflow-hidden bg-[var(--design-editor-canvas-bg)]">
         {!embedded && (
-          <aside className="relative flex min-h-0 shrink-0 border-r border-[var(--design-editor-panel-divider-color)] bg-[var(--design-editor-panel-bg)]">
+          <aside className="relative flex min-h-0 shrink-0 bg-[var(--design-editor-panel-bg)]">
             <div className="flex w-[57px] shrink-0 flex-col items-center p-3">
               <Skeleton className={`size-8 rounded-md ${panelGhost}`} />
               <div className="mt-8 flex w-full flex-col items-center gap-3">
@@ -27,7 +27,7 @@ export function DesignEditorSkeleton({
                 <Skeleton className={`size-8 rounded-lg ${panelGhost}`} />
               </div>
             </div>
-            <div className="flex w-[280px] min-w-0 flex-col bg-[var(--design-editor-panel-bg)]">
+            <div className="flex w-[280px] min-w-0 max-w-[calc(100dvw-57px)] flex-col bg-[var(--design-editor-panel-bg)] md:max-w-none">
               <div className="border-b border-[var(--design-editor-panel-divider-color)] p-3">
                 <Skeleton className={`h-5 w-28 rounded ${panelGhost}`} />
               </div>
@@ -83,7 +83,7 @@ export function DesignEditorSkeleton({
 
         {!embedded && (
           <div
-            className={`absolute bottom-4 left-1/2 z-[70] h-11 w-64 -translate-x-1/2 rounded-xl ${panelGhost}`}
+            className={`absolute bottom-4 left-1/2 z-[70] hidden h-11 w-64 -translate-x-1/2 rounded-xl md:block ${panelGhost}`}
           />
         )}
       </main>