@agent-native/core 0.90.3 → 0.90.5

package/corpus/templates/design/actions/open-visual-edit.ts

@@ -1,9 +1,6 @@
-import crypto from "node:crypto";
-
 import { defineAction, embedApp } from "@agent-native/core";
 import { writeAppState } from "@agent-native/core/application-state";
 import { buildDeepLink } from "@agent-native/core/server";
-import { getRequestUserEmail } from "@agent-native/core/server/request-context";
 import { eq } from "drizzle-orm";
 import { z } from "zod";
 
@@ -89,28 +86,6 @@ function isLoopbackUrl(value: string): boolean {
   );
 }
 
-/**
- * Derive a stable per-user connection id for a devServerUrl + rootPath pair.
- *
- * The owner email is embedded in the hash so two users with an identical
- * devServerUrl + rootPath (common with devcontainers/codespaces images) derive
- * DIFFERENT ids and never collide on the shared primary key. Connections
- * created before user scoping keep their old ids; those users simply
- * reconnect fresh under the new per-user id.
- */
-function stableConnectionId(
-  devServerUrl: string,
-  rootPath: string | undefined,
-  ownerEmail: string,
-) {
-  const hash = crypto
-    .createHash("sha256")
-    .update(`${ownerEmail}\n${devServerUrl}\n${rootPath ?? ""}`)
-    .digest("base64url")
-    .slice(0, 16);
-  return `localhost_${hash}`;
-}
-
 function designOverviewDeepLink(designId: string): string {
   return buildDeepLink({
     app: "design",
@@ -254,19 +229,11 @@ export default defineAction({
             }) ?? [],
           generatedAt: new Date().toISOString(),
         };
-    let connectionId = args.connectionId;
-    if (!connectionId) {
-      const ownerEmail = getRequestUserEmail();
-      if (!ownerEmail) throw new Error("no authenticated user");
-      connectionId = stableConnectionId(
-        devServerUrl,
-        args.rootPath,
-        ownerEmail,
-      );
-    }
-
     const connection = await connectLocalhostAction.run({
-      id: connectionId,
+      // Let connect-localhost be the single source of truth for stable
+      // per-user/per-org id derivation. Duplicating it here can create a second
+      // tokenless row after the CLI self-registers the bridge token.
+      id: args.connectionId,
       name: args.name,
       devServerUrl,
       bridgeUrl: args.bridgeUrl,

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

@@ -351,6 +351,7 @@ interface DesignCanvasProps {
    * For `"inline"` and `"localhost"` sources this prop is ignored.
    */
   fusionUrl?: string;
+  bridgeToken?: string;
   zoom: number;
   onZoomChange?: (zoom: number) => void;
   deviceFrame: DeviceFrameType;
@@ -371,6 +372,28 @@ interface DesignCanvasProps {
    */
   runtimeReplacementContent?: string;
   runtimeReplacementKey?: string;
+  styleRevertRequest?: {
+    requestId: number;
+    patches: Array<{
+      selector: string;
+      sourceId?: string | null;
+      styles: Record<string, string>;
+    }>;
+  } | null;
+  styleBaselineResetRequest?: number | null;
+  textRevertRequest?: {
+    requestId: number;
+    patches: Array<{
+      selector: string;
+      sourceId?: string | null;
+      value: string;
+      html?: string;
+    }>;
+  } | null;
+  structureAckRequest?: {
+    requestId: number;
+    acks: Array<{ requestId: string; applied: boolean }>;
+  } | null;
   embeddedFrameBackground?: string;
   transparentBackground?: boolean;
   editorChromeScaleX?: number;
@@ -390,12 +413,17 @@ interface DesignCanvasProps {
     selector: string,
     styles: Record<string, string>,
     info?: ElementInfo,
+    metadata?: { originalStyles?: Record<string, string> },
   ) => void;
   onTextContentChange?: (
     selector: string,
     value: string,
     info?: ElementInfo,
-    details?: { html?: string },
+    details?: {
+      html?: string;
+      originalValue?: string;
+      originalHtml?: string;
+    },
   ) => void;
   onTextEditingStateChange?: (state: {
     active: boolean;
@@ -420,7 +448,7 @@ interface DesignCanvasProps {
       sourceRect?: { x: number; y: number; width: number; height: number };
       anchorRect?: { x: number; y: number; width: number; height: number };
     },
-  ) => boolean | void;
+  ) => boolean | "pending" | void;
   onVisualDuplicateChange?: (
     selector: string,
     cloneHtml: string,
@@ -837,6 +865,87 @@ function snapshotEndpointUrl(bridgeUrl: string, previewUrl: string): string {
   return endpoint.toString();
 }
 
+export function liveEditEndpointUrl(
+  bridgeUrl: string,
+  previewUrl: string,
+  options?: { includeEditorBridge?: boolean },
+): string {
+  const endpoint = new URL("/live-edit", bridgeUrl);
+  endpoint.searchParams.set("url", previewUrl);
+  if (options?.includeEditorBridge === false) {
+    endpoint.searchParams.set("bridge", "0");
+  }
+  return endpoint.toString();
+}
+
+function originFromUrl(value: string | undefined): string | null {
+  if (!value) return null;
+  try {
+    return new URL(value).origin;
+  } catch {
+    return null;
+  }
+}
+
+function buildEditorChromeBridgeScript(args: {
+  readOnly: boolean;
+  editMode: boolean;
+  editorChromeScaleX: number;
+  editorChromeScaleY: number;
+  screenId: string;
+  boardSurface: boolean;
+}) {
+  return (
+    createEditorBridgeThemeScript(readEditorBridgeThemeVars()) +
+    EDITOR_CHROME_BRIDGE_SCRIPT.replace(
+      "__READ_ONLY__",
+      args.readOnly ? "true" : "false",
+    )
+      .replace("__TEXT_EDITING_ENABLED__", args.editMode ? "true" : "false")
+      .replace("__EDITOR_CHROME_SCALE_X__", String(args.editorChromeScaleX))
+      .replace("__EDITOR_CHROME_SCALE_Y__", String(args.editorChromeScaleY))
+      .replace("__DESIGN_CANVAS_SCREEN_ID__", JSON.stringify(args.screenId))
+      .replace(
+        "__DESIGN_CANVAS_BOARD_SURFACE__",
+        args.boardSurface ? "true" : "false",
+      )
+  );
+}
+
+function contentHash(value: string): string {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash * 31 + value.charCodeAt(index)) | 0;
+  }
+  return `${value.length}:${hash >>> 0}`;
+}
+
+function isPlainRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+
+function isFiniteRect(value: unknown): value is ElementInfo["boundingRect"] {
+  if (!isPlainRecord(value)) return false;
+  return (
+    Number.isFinite(value.x) &&
+    Number.isFinite(value.y) &&
+    Number.isFinite(value.width) &&
+    Number.isFinite(value.height)
+  );
+}
+
+export function isElementInfoPayload(value: unknown): value is ElementInfo {
+  if (!isPlainRecord(value)) return false;
+  return (
+    typeof value.tagName === "string" &&
+    Array.isArray(value.classes) &&
+    isPlainRecord(value.computedStyles) &&
+    isFiniteRect(value.boundingRect) &&
+    typeof value.isFlexChild === "boolean" &&
+    typeof value.isFlexContainer === "boolean"
+  );
+}
+
 /**
  * Exponential backoff delay (ms) for the localhost bridge snapshot auto-retry
  * loop, keyed by the zero-based retry attempt number (0 = first retry after
@@ -945,6 +1054,7 @@ export function DesignCanvas({
   externalSnapshotHtml,
   onExternalContentSnapshot,
   fusionUrl,
+  bridgeToken,
   zoom,
   onZoomChange,
   deviceFrame,
@@ -952,6 +1062,10 @@ export function DesignCanvas({
   boardSurface = false,
   runtimeReplacementContent,
   runtimeReplacementKey,
+  styleRevertRequest,
+  styleBaselineResetRequest,
+  textRevertRequest,
+  structureAckRequest,
   embeddedFrameBackground,
   transparentBackground = false,
   editorChromeScaleX = 1,
@@ -1082,6 +1196,8 @@ export function DesignCanvas({
     status: "loading" | "error";
     message?: string;
   } | null>(null);
+  const [registeredLiveEditBridgeKey, setRegisteredLiveEditBridgeKey] =
+    useState<string | null>(null);
   const [externalSnapshotRetryNonce, setExternalSnapshotRetryNonce] =
     useState(0);
   // Exponential backoff for the auto-retry loop below: 1.5s → 3s → 6s →
@@ -1116,20 +1232,83 @@ export function DesignCanvas({
     (fetchedExternalSnapshot?.url === rawExternalPreviewUrl
       ? fetchedExternalSnapshot.html
       : undefined);
-  const requiresEditableExternalSnapshot =
+  const editorChromeBridgeForCurrentState = useMemo(
+    () =>
+      buildEditorChromeBridgeScript({
+        readOnly,
+        editMode,
+        editorChromeScaleX: effectiveEditorChromeScaleX,
+        editorChromeScaleY: effectiveEditorChromeScaleY,
+        screenId: screenId ?? contentKey ?? "",
+        boardSurface,
+      }),
+    [
+      boardSurface,
+      contentKey,
+      editMode,
+      effectiveEditorChromeScaleX,
+      effectiveEditorChromeScaleY,
+      readOnly,
+      screenId,
+    ],
+  );
+  const embeddedWheelBridgeForCurrentState = useMemo(
+    () =>
+      EMBEDDED_WHEEL_BRIDGE_SCRIPT.replace(
+        "__EMBEDDED_WHEEL_FORWARDING_ENABLED__",
+        isEmbeddedFrame ? "true" : "false",
+      ),
+    [isEmbeddedFrame],
+  );
+  const liveEditBridgeScript = useMemo(
+    () =>
+      MOTION_PREVIEW_BRIDGE_SCRIPT +
+      SHADER_FILL_PREVIEW_BRIDGE_SCRIPT +
+      TWEAK_BRIDGE_SCRIPT +
+      ZOOM_BRIDGE_SCRIPT +
+      LIGHTWEIGHT_HIT_TEST_BRIDGE_SCRIPT +
+      embeddedWheelBridgeForCurrentState +
+      editorChromeBridgeForCurrentState,
+    [editorChromeBridgeForCurrentState, embeddedWheelBridgeForCurrentState],
+  );
+  const liveEditBridgeKey = useMemo(
+    () => contentHash(liveEditBridgeScript),
+    [liveEditBridgeScript],
+  );
+  const hasLiveEditExternalFrame =
+    sourceType === "localhost" && Boolean(bridgeUrl && rawExternalPreviewUrl);
+  const usesLiveEditEditorBridge =
     sourceType === "localhost" &&
     Boolean(bridgeUrl && rawExternalPreviewUrl) &&
     !interactMode &&
     !readOnly;
+  const liveEditBridgeRegistered =
+    usesLiveEditEditorBridge &&
+    registeredLiveEditBridgeKey === liveEditBridgeKey;
+  const requiresEditableExternalSnapshot = false;
+  const liveEditExternalPreviewUrl =
+    hasLiveEditExternalFrame &&
+    bridgeUrl &&
+    rawExternalPreviewUrl &&
+    interactMode
+      ? liveEditEndpointUrl(bridgeUrl, rawExternalPreviewUrl, {
+          includeEditorBridge: false,
+        })
+      : liveEditBridgeRegistered && bridgeUrl && rawExternalPreviewUrl
+        ? liveEditEndpointUrl(bridgeUrl, rawExternalPreviewUrl)
+        : null;
   const iframeRenderContent =
     activeExternalSnapshotHtml ??
     (requiresEditableExternalSnapshot ? "" : renderedContent);
   const externalPreviewUrl =
-    activeExternalSnapshotHtml || requiresEditableExternalSnapshot
+    liveEditExternalPreviewUrl ??
+    (activeExternalSnapshotHtml || requiresEditableExternalSnapshot
       ? null
-      : rawExternalPreviewUrl;
+      : rawExternalPreviewUrl);
   const waitingForEditableExternalSnapshot =
     requiresEditableExternalSnapshot && !activeExternalSnapshotHtml;
+  const waitingForLiveEditBridge =
+    usesLiveEditEditorBridge && !liveEditBridgeRegistered;
   zoomRef.current = zoom;
   runtimeReplacementContentRef.current = runtimeReplacementContent;
   runtimeReplacementKeyRef.current = runtimeReplacementKey;
@@ -1138,9 +1317,61 @@ export function DesignCanvas({
     onExternalContentSnapshotRef.current = onExternalContentSnapshot;
   }, [onExternalContentSnapshot]);
 
+  useEffect(() => {
+    if (!usesLiveEditEditorBridge || !bridgeUrl) {
+      setRegisteredLiveEditBridgeKey(null);
+      return;
+    }
+    let cancelled = false;
+    setRegisteredLiveEditBridgeKey((current) =>
+      current === liveEditBridgeKey ? current : null,
+    );
+    void (async () => {
+      try {
+        const endpoint = new URL("/live-edit-bridge", bridgeUrl).toString();
+        const response = await fetch(endpoint, {
+          method: "POST",
+          headers: {
+            "content-type": "application/json",
+            ...(bridgeToken ? { "x-bridge-token": bridgeToken } : {}),
+          },
+          body: JSON.stringify({ script: liveEditBridgeScript }),
+        });
+        if (!response.ok) {
+          throw new Error(`Bridge registration failed (${response.status})`);
+        }
+        if (!cancelled) {
+          setRegisteredLiveEditBridgeKey(liveEditBridgeKey);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          console.warn(
+            "[DesignCanvas] live edit bridge registration failed",
+            error,
+          );
+          setRegisteredLiveEditBridgeKey(null);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    bridgeUrl,
+    bridgeToken,
+    liveEditBridgeKey,
+    liveEditBridgeScript,
+    usesLiveEditEditorBridge,
+  ]);
+
   useEffect(() => {
     const previewUrl = rawExternalPreviewUrl;
-    if (sourceType !== "localhost" || !bridgeUrl || !previewUrl) {
+    if (
+      !requiresEditableExternalSnapshot ||
+      sourceType !== "localhost" ||
+      !bridgeUrl ||
+      !previewUrl
+    ) {
       snapshotRetryAttemptRef.current = 0;
       setFetchedExternalSnapshot((current) =>
         current?.url === previewUrl ? current : null,
@@ -1468,6 +1699,12 @@ export function DesignCanvas({
               origin: e.origin,
               iframeWindow,
               parentOrigin: window.location.origin,
+              allowedOrigins:
+                sourceType === "localhost" && bridgeUrl
+                  ? [originFromUrl(bridgeUrl)].filter(
+                      (origin): origin is string => Boolean(origin),
+                    )
+                  : [],
             });
       if (!trusted) {
         return;
@@ -1509,8 +1746,19 @@ export function DesignCanvas({
           e.data.styles && typeof e.data.styles === "object"
             ? (e.data.styles as Record<string, string>)
             : {};
+        const originalStyles =
+          e.data.originalStyles && typeof e.data.originalStyles === "object"
+            ? (e.data.originalStyles as Record<string, string>)
+            : undefined;
         if (selector && Object.keys(styles).length > 0) {
-          onVisualStyleChange?.(selector, styles, e.data.payload);
+          onVisualStyleChange?.(
+            selector,
+            styles,
+            isElementInfoPayload(e.data.payload) ? e.data.payload : undefined,
+            {
+              originalStyles,
+            },
+          );
         }
         return;
       }
@@ -1528,8 +1776,20 @@ export function DesignCanvas({
         const value = String(e.data.value ?? "");
         const html =
           typeof e.data.html === "string" ? String(e.data.html) : undefined;
+        const originalValue =
+          typeof e.data.originalValue === "string"
+            ? String(e.data.originalValue)
+            : undefined;
+        const originalHtml =
+          typeof e.data.originalHtml === "string"
+            ? String(e.data.originalHtml)
+            : undefined;
         if (selector) {
-          onTextContentChange?.(selector, value, e.data.payload, { html });
+          onTextContentChange?.(selector, value, e.data.payload, {
+            html,
+            originalValue,
+            originalHtml,
+          });
         }
         return;
       }
@@ -1599,7 +1859,7 @@ export function DesignCanvas({
               anchorRect,
             },
           );
-          if (requestId) {
+          if (requestId && applied !== "pending") {
             iframeRef.current?.contentWindow?.postMessage(
               {
                 type: "visual-structure-ack",
@@ -1828,6 +2088,7 @@ export function DesignCanvas({
     onComponentSourceJump,
     isEmbeddedFrame,
     sourceType,
+    bridgeUrl,
     fusionUrl,
     flushPendingOneShotMessages,
   ]);
@@ -2159,6 +2420,89 @@ export function DesignCanvas({
     [postOneShotBridgeMessage],
   );
 
+  const lastStyleRevertRequestIdRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (!styleRevertRequest) return;
+    if (lastStyleRevertRequestIdRef.current === styleRevertRequest.requestId) {
+      return;
+    }
+    lastStyleRevertRequestIdRef.current = styleRevertRequest.requestId;
+    for (const patch of styleRevertRequest.patches) {
+      const selectorCandidates = [
+        patch.selector,
+        patch.sourceId
+          ? `[data-agent-native-node-id="${String(patch.sourceId).replace(/"/g, '\\"')}"]`
+          : "",
+      ].filter(Boolean);
+      for (const [property, value] of Object.entries(patch.styles)) {
+        postOneShotBridgeMessage({
+          type: "style-change",
+          selector: patch.selector,
+          property,
+          value,
+          selectorCandidates,
+          nodeId: patch.sourceId ?? "",
+        });
+      }
+    }
+  }, [postOneShotBridgeMessage, styleRevertRequest]);
+
+  const lastStyleBaselineResetRequestRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (styleBaselineResetRequest == null) return;
+    if (
+      lastStyleBaselineResetRequestRef.current === styleBaselineResetRequest
+    ) {
+      return;
+    }
+    lastStyleBaselineResetRequestRef.current = styleBaselineResetRequest;
+    postOneShotBridgeMessage({
+      type: "agent-native:reset-live-visual-edit-baselines",
+    });
+  }, [postOneShotBridgeMessage, styleBaselineResetRequest]);
+
+  const lastTextRevertRequestIdRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (!textRevertRequest) return;
+    if (lastTextRevertRequestIdRef.current === textRevertRequest.requestId) {
+      return;
+    }
+    lastTextRevertRequestIdRef.current = textRevertRequest.requestId;
+    for (const patch of textRevertRequest.patches) {
+      const selectorCandidates = [
+        patch.selector,
+        patch.sourceId
+          ? `[data-agent-native-node-id="${String(patch.sourceId).replace(/"/g, '\\"')}"]`
+          : "",
+      ].filter(Boolean);
+      postOneShotBridgeMessage({
+        type: "set-text-content",
+        selector: patch.selector,
+        selectorCandidates,
+        value: patch.value,
+        html: patch.html,
+      });
+    }
+  }, [postOneShotBridgeMessage, textRevertRequest]);
+
+  const lastStructureAckRequestIdRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (!structureAckRequest) return;
+    if (
+      lastStructureAckRequestIdRef.current === structureAckRequest.requestId
+    ) {
+      return;
+    }
+    lastStructureAckRequestIdRef.current = structureAckRequest.requestId;
+    for (const ack of structureAckRequest.acks) {
+      postOneShotBridgeMessage({
+        type: "visual-structure-ack",
+        requestId: ack.requestId,
+        applied: ack.applied,
+      });
+    }
+  }, [postOneShotBridgeMessage, structureAckRequest]);
+
   /**
    * Send a motion-preview scrub tick to the iframe.  `t` is the normalised
    * playhead position in [0, 1].  Tracks must have been loaded first via the
@@ -2675,9 +3019,15 @@ export function DesignCanvas({
           </div>
         </div>
       ) : null}
-      {waitingForEditableExternalSnapshot ? (
-        <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-background/85 px-4 text-center text-sm text-muted-foreground">
-          {externalSnapshotState?.status === "error" ? (
+      {waitingForEditableExternalSnapshot || waitingForLiveEditBridge ? (
+        <div className="pointer-events-auto absolute inset-0 z-10 flex items-center justify-center bg-background/85 px-4 text-center text-sm text-muted-foreground">
+          {waitingForLiveEditBridge ? (
+            <div className="max-w-[28rem] rounded-md border bg-card px-4 py-3 shadow-sm">
+              {
+                "Preparing live editor..." /* i18n-ignore transient localhost live-edit bridge loading state */
+              }
+            </div>
+          ) : externalSnapshotState?.status === "error" ? (
             // A real offline dev server previously looked identical to the
             // ordinary "still loading" state and retried forever on a fixed
             // 1.5s timer — see getSnapshotRetryDelayMs for the backoff that