@agent-native/core 0.181.0 → 0.181.1-nightly-20260916144018

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

@@ -103,6 +103,7 @@ import {
 import {
   isComputedStyleMap,
   isElementInfoPayload,
+  parseRuntimeSnapshotHtml,
 } from "./design-canvas/element-payload";
 import {
   embeddedContentOffsetCss,
@@ -698,6 +699,7 @@ interface DesignCanvasProps {
       replacementSelector?: string;
       replacementSourceId?: string;
       replacementElementInfo?: ElementInfo;
+      replacementSnapshotHtml?: string;
     },
   ) => boolean | "pending" | void;
   onVisualDuplicateChange?: (
@@ -3298,24 +3300,34 @@ export function DesignCanvas({
           allowedOrigins: canvasBridgeAllowedOrigins,
         });
       if (trustedRuntimeVerificationFrame) {
+        if (e.data?.type === "agent-native:runtime-layer-snapshot-error") {
+          onRuntimeStructureInsertRejected?.(
+            e.data.payload?.reason === "snapshot-too-large"
+              ? "verification-snapshot-too-large"
+              : "verification-snapshot-unavailable",
+          );
+          return;
+        }
         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,
-          });
+        const snapshot = parseRuntimeSnapshotHtml(payload?.html);
+        if (!snapshot.ok || !Number.isFinite(payload?.nodeCount)) {
+          onRuntimeStructureInsertRejected?.(
+            snapshot.ok
+              ? "verification-snapshot-unavailable"
+              : `verification-${snapshot.reason}`,
+          );
+          return;
         }
+        onRuntimeVerificationSnapshot?.({
+          requestId: runtimeVerificationRequest.requestId,
+          html: snapshot.html,
+          nodeCount: Math.max(0, Math.floor(payload.nodeCount)),
+          documentId:
+            typeof payload.documentId === "string"
+              ? payload.documentId
+              : undefined,
+        });
         return;
       }
       const lateReadyRecovery =
@@ -3593,6 +3605,21 @@ export function DesignCanvas({
         });
         const requestId =
           typeof e.data.requestId === "string" ? e.data.requestId : undefined;
+        const replacementSnapshot = replaced
+          ? parseRuntimeSnapshotHtml(e.data.replacementSnapshotHtml)
+          : undefined;
+        if (replacementSnapshot?.ok === false) {
+          if (requestId) {
+            iframeRef.current?.contentWindow?.postMessage(
+              { type: "visual-structure-ack", requestId, applied: false },
+              "*",
+            );
+          }
+          onRuntimeStructureInsertRejected?.(
+            `replacement-${replacementSnapshot.reason}`,
+          );
+          return;
+        }
         const sourceId =
           typeof e.data.sourceId === "string" ? e.data.sourceId : undefined;
         const anchorSourceId =
@@ -3667,6 +3694,9 @@ export function DesignCanvas({
                     replaced: true as const,
                     replacementSelector: selector,
                     replacementSourceId: sourceId,
+                    replacementSnapshotHtml: replacementSnapshot?.ok
+                      ? replacementSnapshot.html
+                      : undefined,
                     replacementElementInfo: isElementInfoPayload(e.data.payload)
                       ? e.data.payload
                       : undefined,

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -1557,11 +1557,12 @@ declare var __INITIAL_SOURCE_HEAD__: string;
     );
   }
 
-  function serializeRuntimeLayerSnapshot(): {
-    html: string;
-    nodeCount: number;
-  } | null {
-    if (!document.body) return null;
+  function serializeRuntimeLayerSnapshot(
+    excludedRoot?: Element,
+  ):
+    | { ok: true; html: string; nodeCount: number; documentId: string }
+    | { ok: false; reason: "snapshot-unavailable" | "snapshot-too-large" } {
+    if (!document.body) return { ok: false, reason: "snapshot-unavailable" };
     // Keep this list export-focused and bounded. The runtime snapshot is also
     // the hosted/cross-origin Design→Figma fallback: inlining the resolved
     // paint/layout values lets the parent reconstruct the already-rendered
@@ -1666,7 +1667,10 @@ declare var __INITIAL_SOURCE_HEAD__: string;
     ) {
       var sourceNode = sourceNodes[index];
       var cloneNode = cloneNodes[index];
-      if (!isRuntimeLayerVisualNode(sourceNode)) {
+      if (
+        excludedRoot?.contains(sourceNode) ||
+        !isRuntimeLayerVisualNode(sourceNode)
+      ) {
         cloneNode.setAttribute("data-an-runtime-layer-remove", "true");
         continue;
       }
@@ -1787,8 +1791,10 @@ declare var __INITIAL_SOURCE_HEAD__: string;
     inlineSnapshotComputedStyle(document.body, cloneBody);
     cloneBody.setAttribute("data-an-runtime-layer-snapshot", "true");
     var html = "<!doctype html><html>" + cloneBody.outerHTML + "</html>"; // i18n-ignore serialized runtime-layer HTML payload, not visible UI copy
-    if (html.length > 2_000_000) return null;
+    if (html.length > 2_000_000)
+      return { ok: false, reason: "snapshot-too-large" };
     return {
+      ok: true,
       html: html,
       nodeCount: nodeCount,
       documentId: runtimeDocumentId,
@@ -1805,7 +1811,17 @@ declare var __INITIAL_SOURCE_HEAD__: string;
     runtimeLayerSnapshotTimer = null;
     runtimeLayerSnapshotMaxTimer = null;
     var snapshot = serializeRuntimeLayerSnapshot();
-    if (!snapshot || snapshot.html === lastRuntimeLayerSnapshotHtml) return;
+    if (!snapshot.ok) {
+      (window.parent as Window).postMessage(
+        {
+          type: "agent-native:runtime-layer-snapshot-error",
+          payload: snapshot,
+        },
+        "*",
+      );
+      return;
+    }
+    if (snapshot.html === lastRuntimeLayerSnapshotHtml) return;
     lastRuntimeLayerSnapshotHtml = snapshot.html;
     (window.parent as Window).postMessage(
       {
@@ -13603,6 +13619,7 @@ declare var __INITIAL_SOURCE_HEAD__: string;
     origin,
     insertedHtml?,
     replaced?,
+    replacementSnapshotHtml?: string,
   ) {
     if (!el || !target || !target.anchor) return;
     dndLog("post:structure-change", {
@@ -13636,6 +13653,7 @@ declare var __INITIAL_SOURCE_HEAD__: string;
         insertedHtml:
           typeof insertedHtml === "string" ? insertedHtml : undefined,
         replaced: replaced === true ? true : undefined,
+        replacementSnapshotHtml: replacementSnapshotHtml,
         sourceRect: rectInfoForElement(el),
         anchorRect: rectInfoForElement(target.anchor),
         payload: getElementInfo(el),
@@ -20146,6 +20164,14 @@ declare var __INITIAL_SOURCE_HEAD__: string;
         }
         var replaceNextSibling = insertAnchor.nextSibling;
         replaceParent.insertBefore(parsedInsertEl, insertAnchor);
+        // Capture while the original still supplies its selector/provenance,
+        // and reject before publishing a pending operation if proof is unavailable.
+        var replacementSnapshot = serializeRuntimeLayerSnapshot(insertAnchor);
+        if (!replacementSnapshot.ok) {
+          parsedInsertEl.remove();
+          rejectInsert("replacement-" + replacementSnapshot.reason);
+          return;
+        }
         selectedEl = parsedInsertEl;
         positionOverlay(selectionOverlay, selectedEl);
         refreshOverlays();
@@ -20160,6 +20186,7 @@ declare var __INITIAL_SOURCE_HEAD__: string;
           },
           parsedInsertEl.outerHTML,
           true,
+          replacementSnapshot.html,
         );
         replaceParent.removeChild(insertAnchor);
         refreshOverlays();

package/corpus/templates/design/app/components/design/design-canvas/element-payload.ts

@@ -36,3 +36,17 @@ export function isElementInfoPayload(value: unknown): value is ElementInfo {
     typeof value.isFlexContainer === "boolean"
   );
 }
+
+export function parseRuntimeSnapshotHtml(
+  value: unknown,
+):
+  | { ok: true; html: string }
+  | { ok: false; reason: "snapshot-unavailable" | "snapshot-too-large" } {
+  if (typeof value !== "string" || !value) {
+    return { ok: false, reason: "snapshot-unavailable" };
+  }
+  if (value.length > 2_000_000) {
+    return { ok: false, reason: "snapshot-too-large" };
+  }
+  return { ok: true, html: value };
+}

package/corpus/templates/design/app/pages/DesignEditor.tsx

@@ -1721,7 +1721,7 @@ function DesignEditor() {
   const initialUrlSelectionHydratedForIdRef = useRef<string | null>(null);
   // Figma's 56px workspace rail (plus its 1px divider) and 280px Layers/Pages
   // pane place the content divider at x=337. Keep that total while honoring
-  // resizable 220–420px content range.
+  // the resizable 220–420px content range, with 320px reserved for Agent chat.
   const [leftSidebarWidth, setLeftSidebarWidth] = useState(280);
   const [rightSidebarWidth, setRightSidebarWidth] = useState(240);
   // Cmd/Ctrl+\ hides the sidebars while leaving the bottom tools available.
@@ -7828,6 +7828,7 @@ function DesignEditor() {
         replacementSelector?: string;
         replacementSourceId?: string;
         replacementElementInfo?: ElementInfo;
+        replacementSnapshotHtml?: string;
         /** This change DELETED the subject; it has no anchor. */
         removed?: true;
       },
@@ -12092,6 +12093,7 @@ function DesignEditor() {
         replacementSelector?: string;
         replacementSourceId?: string;
         replacementElementInfo?: ElementInfo;
+        replacementSnapshotHtml?: string;
       },
     ) =>
       runVisualStructureChange(
@@ -12334,6 +12336,7 @@ function DesignEditor() {
         replacementSelector?: string;
         replacementSourceId?: string;
         replacementElementInfo?: ElementInfo;
+        replacementSnapshotHtml?: string;
       },
     ) =>
       runScreenVisualStructureChange(
@@ -14461,6 +14464,11 @@ function DesignEditor() {
 
   const handleRuntimeStructureInsertRejected = useCallback(
     (reason: string) => {
+      if (reason.startsWith("verification-")) {
+        cancelPendingStructureVerification("conflict");
+        toast.error(t("designEditor.pendingVisualStyles.conflictToast"));
+        return;
+      }
       // Never swallow this: a rejected insert leaves nothing on screen and
       // nothing in the pending list, so a silent return is indistinguishable
       // from the drop never having happened.
@@ -14469,7 +14477,7 @@ function DesignEditor() {
       }
       toast.error(t("designEditor.toasts.layerMoveFailed"), { duration: 4000 });
     },
-    [t],
+    [cancelPendingStructureVerification, t],
   );
 
   const handleCutSelection = useCallback(async () => {
@@ -23398,7 +23406,10 @@ function DesignEditor() {
   const leftContentWidth =
     activeLeftPanel === "code"
       ? Math.max(leftSidebarWidth, 640)
-      : Math.max(Math.min(leftSidebarWidth, 420), 220);
+      : Math.max(
+          Math.min(leftSidebarWidth, 420),
+          activeLeftPanel === "agent" ? 320 : 220,
+        );
   const leftSidebarVisible = !hostOwnsChrome && !uiHidden && !minimalUi;
   // These focused surfaces need a clear viewport beside the absolute rail.
   const leftChromeOverlayInset = leftSidebarVisible
@@ -23712,7 +23723,7 @@ function DesignEditor() {
               <div
                 data-design-agent-panel
                 className={cn(
-                  "min-h-0 flex-1 flex-col overflow-hidden",
+                  "min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
                   activeLeftPanel === "agent" ? "flex" : "hidden",
                 )}
               >
@@ -23721,7 +23732,9 @@ function DesignEditor() {
                 ) : canEditDesign ? (
                   <AgentChatSurface
                     mode="panel"
-                    className="min-h-0 flex-1 border-0 bg-transparent shadow-none"
+                    className="min-h-0 min-w-0 flex-1 border-0 bg-transparent shadow-none"
+                    chatOnly={true}
+                    onCollapse={() => setActiveLeftPanel(null)}
                     storageKey={DESIGN_CHAT_STORAGE_KEY}
                     emptyStateText={t("chat.emptyState")}
                     suggestions={designAgentSuggestions}

package/corpus/templates/design/app/pages/design-editor/commands/record-pending-live-structure-edit.ts

@@ -23,7 +23,10 @@ import {
   reactSourceAnchorForPendingEdit,
   runtimeStructureNodeSignature,
 } from "@/pages/design-editor/pending-edits";
-import { isPendingStructureDropNoOp } from "@/pages/design-editor/pending-structure-verification";
+import {
+  isPendingStructureDropNoOp,
+  runtimeStructureSnapshotSignature,
+} from "@/pages/design-editor/pending-structure-verification";
 import type { DesignFile } from "@/pages/design-editor/types";
 
 export interface RecordPendingLiveStructureEditArgs {
@@ -86,6 +89,7 @@ export function runRecordPendingLiveStructureEdit(
     replacementSelector?: string;
     replacementSourceId?: string;
     replacementElementInfo?: ElementInfo;
+    replacementSnapshotHtml?: string;
     /** This change DELETED the subject; it has no anchor. */
     removed?: true;
   },
@@ -108,9 +112,7 @@ export function runRecordPendingLiveStructureEdit(
   const subjectInfo = details?.replaced
     ? details.anchorElementInfo
     : elementInfo;
-  const subjectSourceId = details?.replaced
-    ? details.anchorSourceId
-    : (details?.sourceId ?? elementInfo?.sourceId);
+  const subjectSourceId = details?.sourceId ?? subjectInfo?.sourceId;
   const nextEdit: PendingLiveStructureEdit = {
     kind: "structure",
     screenId,
@@ -164,6 +166,9 @@ export function runRecordPendingLiveStructureEdit(
           replaced: true as const,
           replacementSelector: details.replacementSelector,
           replacementSourceId: details.replacementSourceId,
+          replacementSnapshotSignature: details.replacementSnapshotHtml
+            ? runtimeStructureSnapshotSignature(details.replacementSnapshotHtml)
+            : undefined,
         }
       : {}),
     ...(details?.removed ? { removed: true as const } : {}),

package/corpus/templates/design/app/pages/design-editor/commands/screen-visual-structure-change.ts

@@ -48,6 +48,7 @@ export interface ScreenVisualStructureChangeArgs {
       replacementSelector?: string;
       replacementSourceId?: string;
       replacementElementInfo?: ElementInfo;
+      replacementSnapshotHtml?: string;
     },
   ) => boolean | "pending";
   overviewScreens: OverviewScreen[];
@@ -71,6 +72,7 @@ export interface ScreenVisualStructureChangeArgs {
       replacementSelector?: string;
       replacementSourceId?: string;
       replacementElementInfo?: ElementInfo;
+      replacementSnapshotHtml?: string;
       removed?: true;
     },
   ) => void;
@@ -117,6 +119,7 @@ export function runScreenVisualStructureChange(
     replacementSelector?: string;
     replacementSourceId?: string;
     replacementElementInfo?: ElementInfo;
+    replacementSnapshotHtml?: string;
   },
 ) {
   if (screenId === activeFile?.id) {

package/corpus/templates/design/app/pages/design-editor/commands/start-sidebar-resize.ts

@@ -35,14 +35,19 @@ export function runStartSidebarResize(
   event.currentTarget.setPointerCapture?.(event.pointerId);
   const startX = event.clientX;
   const codePanelOpen = side === "left" && activeLeftPanel === "code";
+  const leftPanelMinWidth = codePanelOpen
+    ? 520
+    : activeLeftPanel === "agent"
+      ? 320
+      : 220;
   const startWidth =
     side === "left"
       ? codePanelOpen
         ? Math.max(leftSidebarWidth, 640)
-        : Math.min(leftSidebarWidth, 420)
+        : Math.max(Math.min(leftSidebarWidth, 420), leftPanelMinWidth)
       : rightSidebarWidth;
   const setWidth = side === "left" ? setLeftSidebarWidth : setRightSidebarWidth;
-  const minWidth = side === "left" ? (codePanelOpen ? 520 : 220) : 240;
+  const minWidth = side === "left" ? leftPanelMinWidth : 240;
   const maxWidth = side === "left" ? (codePanelOpen ? 1100 : 420) : 390;
   const target =
     side === "left"

package/corpus/templates/design/app/pages/design-editor/commands/visual-structure-change.ts

@@ -73,6 +73,7 @@ export interface VisualStructureChangeArgs {
       replacementSelector?: string;
       replacementSourceId?: string;
       replacementElementInfo?: ElementInfo;
+      replacementSnapshotHtml?: string;
       removed?: true;
     },
   ) => void;
@@ -114,6 +115,7 @@ export function runVisualStructureChange(
     replacementSelector?: string;
     replacementSourceId?: string;
     replacementElementInfo?: ElementInfo;
+    replacementSnapshotHtml?: string;
   },
 ) {
   dndHostLog("persist:begin", {

package/corpus/templates/design/app/pages/design-editor/pending-edits.ts

@@ -326,6 +326,10 @@ export interface PendingLiveStructureEdit {
   replacementSelector?: string;
   replacementSourceId?: string | null;
   replacementSignature?: RuntimeStructureNodeSignature;
+  /** Expected visual tree captured by the bridge while it still owns the
+   * original DOM element. Runtime ids and computed styles are excluded.
+   * Missing evidence or later context changes cannot prove replacement. */
+  replacementSnapshotSignature?: string;
   /**
    * This edit DELETED the subject from the running app. A removal has no
    * anchor — `anchorSelector`/`placement` carry no meaning for it — so every