@agent-native/core 0.106.0 → 0.106.2

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

@@ -92,6 +92,7 @@ export type CanvasContextMenuAction =
   | "add-auto-layout"
   | "suggest-auto-layout"
   | "create-component"
+  | "reprompt"
   | "go-to-main-component"
   | "swap-instance"
   | "detach-instance"
@@ -135,6 +136,7 @@ export type CanvasContextMenuActionHandler = (
 
 export interface CanvasContextMenuLabels {
   selectLayer: string;
+  reprompt: string;
   pasteHere: string;
   selectAll: string;
   zoomToFit: string;
@@ -231,6 +233,10 @@ export interface CanvasContextMenuProps {
   selectedCount?: number;
   layerCandidates?: readonly CanvasLayerHitCandidate[];
   onSelectLayer?: (candidate: CanvasLayerHitCandidate) => void;
+  onRepromptLayer?: (
+    candidate: CanvasLayerHitCandidate,
+    details: CanvasContextMenuActionDetails,
+  ) => void;
   hasClipboard?: boolean;
   hasPropsClipboard?: boolean;
   hasAnimationClipboard?: boolean;
@@ -261,6 +267,7 @@ export interface CanvasContextMenuProps {
   canAddAutoLayout?: boolean;
   canSuggestAutoLayout?: boolean;
   canCreateComponent?: boolean;
+  canReprompt?: boolean;
   // Whether the current selection IS a component instance — gates the
   // whole Go to main component / Swap instance / Detach instance cluster on
   // (rather than showing them permanently disabled for non-instance
@@ -330,6 +337,7 @@ export interface CanvasContextMenuProps {
   onAddAutoLayout?: CanvasContextMenuActionHandler;
   onSuggestAutoLayout?: CanvasContextMenuActionHandler;
   onCreateComponent?: CanvasContextMenuActionHandler;
+  onReprompt?: CanvasContextMenuActionHandler;
   onGoToMainComponent?: CanvasContextMenuActionHandler;
   onSwapInstance?: CanvasContextMenuActionHandler;
   onDetachInstance?: CanvasContextMenuActionHandler;
@@ -361,6 +369,7 @@ export interface CanvasContextMenuProps {
 
 const DEFAULT_LABELS: CanvasContextMenuLabels = {
   selectLayer: "Select layer",
+  reprompt: "Regenerate…",
   pasteHere: "Paste here",
   selectAll: "Select all",
   zoomToFit: "Zoom to fit",
@@ -481,6 +490,7 @@ export const CanvasContextMenu = forwardRef<
     selectedCount = 0,
     layerCandidates = [],
     onSelectLayer,
+    onRepromptLayer,
     hasClipboard = false,
     hasPropsClipboard = false,
     hasAnimationClipboard = false,
@@ -500,6 +510,7 @@ export const CanvasContextMenu = forwardRef<
     canAddAutoLayout = selectedCount > 0,
     canSuggestAutoLayout = false,
     canCreateComponent = selectedCount > 0,
+    canReprompt = selectedCount > 0 || layerCandidates.length > 0,
     isComponentInstance = false,
     canGoToMainComponent = isComponentInstance,
     canSwapInstance = isComponentInstance,
@@ -540,6 +551,7 @@ export const CanvasContextMenu = forwardRef<
     onAddAutoLayout,
     onSuggestAutoLayout,
     onCreateComponent,
+    onReprompt,
     onGoToMainComponent,
     onSwapInstance,
     onDetachInstance,
@@ -624,6 +636,7 @@ export const CanvasContextMenu = forwardRef<
       "add-auto-layout": onAddAutoLayout,
       "suggest-auto-layout": onSuggestAutoLayout,
       "create-component": onCreateComponent,
+      reprompt: onReprompt,
       "go-to-main-component": onGoToMainComponent,
       "swap-instance": onSwapInstance,
       "detach-instance": onDetachInstance,
@@ -654,6 +667,7 @@ export const CanvasContextMenu = forwardRef<
       onCopyAsSvg,
       onCopyProps,
       onCreateComponent,
+      onReprompt,
       onDetachInstance,
       onFlipHorizontal,
       onFlipVertical,
@@ -772,6 +786,62 @@ export const CanvasContextMenu = forwardRef<
             <CanvasMenuSeparator />
           </>
         ) : null}
+        {canReprompt && (onReprompt || onRepromptLayer) ? (
+          <>
+            <ContextMenuGroup>
+              {layerCandidates.length > 1 && onRepromptLayer ? (
+                <ContextMenuSub>
+                  <ContextMenuSubTrigger className={MENU_SUB_TRIGGER_CLASS}>
+                    {labels.reprompt}
+                  </ContextMenuSubTrigger>
+                  <ContextMenuSubContent
+                    className={cn(MENU_CONTENT_CLASS, "w-56")}
+                  >
+                    {layerCandidates.map((candidate) => (
+                      <CanvasLayerCandidateItem
+                        key={`reprompt:${candidate.key}`}
+                        candidate={candidate}
+                        onSelect={(event) => {
+                          onRepromptLayer(candidate, {
+                            action: "reprompt",
+                            point,
+                            selectedCount,
+                            originalEvent: event,
+                          });
+                          handleOpenChange(false);
+                        }}
+                      />
+                    ))}
+                  </ContextMenuSubContent>
+                </ContextMenuSub>
+              ) : (
+                <CanvasMenuItem
+                  hidden={isHiddenAction("reprompt")}
+                  disabled={
+                    !canReprompt ||
+                    (!onReprompt &&
+                      !(onRepromptLayer && layerCandidates.length === 1))
+                  }
+                  label={labels.reprompt}
+                  onSelect={(event) => {
+                    const candidate = layerCandidates[0];
+                    if (!onReprompt && onRepromptLayer && candidate) {
+                      onRepromptLayer(candidate, {
+                        action: "reprompt",
+                        point,
+                        selectedCount,
+                        originalEvent: event,
+                      });
+                      return;
+                    }
+                    runAction("reprompt", event);
+                  }}
+                />
+              )}
+            </ContextMenuGroup>
+            <CanvasMenuSeparator />
+          </>
+        ) : null}
         {hasSelection ? (
           <>
             {/* LIVE-VERIFIED Figma "with selection" canvas menu. */}
@@ -1083,7 +1153,7 @@ function CanvasLayerCandidateItem({
   onSelect,
 }: {
   candidate: CanvasLayerHitCandidate;
-  onSelect: () => void;
+  onSelect: (event: Event) => void;
 }) {
   const tag = candidate.info.tagName.toLowerCase();
   const Icon = candidate.info.componentName

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

@@ -24,6 +24,7 @@ import {
   type PenPath,
   type PenPoint,
 } from "@shared/pen-path";
+import { sourceContentHash } from "@shared/source-workspace";
 import { IconPlugConnectedX, IconRefresh } from "@tabler/icons-react";
 import {
   useCallback,
@@ -43,6 +44,7 @@ import { Button } from "@/components/ui/button";
 import {
   DrawOverlay as SharedDrawOverlay,
   ReviewCanvasPins,
+  type RepromptDraftRequest,
   type ReviewFocusRequest,
 } from "@/components/visual-editor";
 import { sendToDesignAgentChatAndConfirm } from "@/lib/agent-chat";
@@ -556,6 +558,11 @@ interface DesignCanvasProps {
   previewFrameId?: string;
   /** Human-readable label for comment-pin prompts. */
   commentContextLabel?: string;
+  /** Opens an ephemeral, pre-anchored regenerate composer for this screen. */
+  repromptDraftRequest?: RepromptDraftRequest | null;
+  onRepromptDraftConsumed?: (nonce: number) => void;
+  /** Marks the one base canvas used for pending rewrite previews. */
+  nodeRewriteCanvasTarget?: boolean;
   /**
    * Called when a link inside the prototype points to another screen (a
    * relative href or `data-screen`). Lets the editor switch the active screen
@@ -1053,6 +1060,9 @@ export function DesignCanvas({
   commentContextId,
   screenId,
   previewFrameId,
+  repromptDraftRequest,
+  onRepromptDraftConsumed,
+  nodeRewriteCanvasTarget = false,
   onPrototypeNavigate,
   motionTracks,
   motionDefaultEase,
@@ -4027,6 +4037,9 @@ export function DesignCanvas({
   const iframeElement = (
     <div
       data-review-canvas-id={reviewCanvasId}
+      data-node-rewrite-canvas-target={
+        nodeRewriteCanvasTarget ? "true" : undefined
+      }
       className="design-canvas-iframe-wrapper relative inline-block ring-1 ring-border/60 shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_8px_24px_-12px_rgba(0,0,0,0.45)]"
       onDragEnter={handleWrapperDragEnter}
       onDragOver={handleWrapperDragOver}
@@ -4548,6 +4561,12 @@ export function DesignCanvas({
           onDispatchCommentToAgent={onDispatchCommentToAgent}
           onSendThreadToAgent={onSendThreadToAgent}
           sendingThreadId={reviewSendingThreadId}
+          sourceType={
+            sourceType ?? (externalPreviewUrl ? "localhost" : "inline")
+          }
+          sourceVersionHash={sourceContentHash(content)}
+          repromptDraftRequest={repromptDraftRequest}
+          onRepromptDraftConsumed={onRepromptDraftConsumed}
         />
       ) : null}
     </div>

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

@@ -398,6 +398,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   hiddenScreenIds = EMPTY_SCREEN_IDS,
   lockedScreenIds = EMPTY_SCREEN_IDS,
   fullViewScreenIds,
+  pendingReviewScreenIds = EMPTY_SCREEN_IDS,
+  onReviewPendingScreen,
   interactMode = false,
   activeScreenHasHoveredChild = false,
   hoveredChildScreenId,
@@ -525,6 +527,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     () => new Set(lockedScreenIds),
     [lockedScreenIds],
   );
+  const pendingReviewScreenIdSet = useMemo(
+    () => new Set(pendingReviewScreenIds),
+    [pendingReviewScreenIds],
+  );
   const renderedScreens = useMemo(
     () => screens.filter((screen) => !hiddenScreenIdSet.has(screen.id)),
     [hiddenScreenIdSet, screens],
@@ -7609,6 +7615,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                 !isBreakpointSelectionTarget(screen)
               }
               showFullView={fullViewIdSet.has(screen.id)}
+              pendingReview={pendingReviewScreenIdSet.has(screen.id)}
+              onReviewPendingScreen={onReviewPendingScreen}
               interactMode={interactMode}
               isDirectlyHovered={screen.id === directlyHoveredScreenId}
               isFileDragOver={
@@ -8898,6 +8906,8 @@ interface ScreenProps {
   isSelected: boolean;
   isTopScreen: boolean;
   showFullView: boolean;
+  pendingReview: boolean;
+  onReviewPendingScreen?: (screenId: string) => void;
   interactMode: boolean;
   isDirectlyHovered: boolean;
   /** True while a native OS file drag is hovering this frame (Figma parity §1). */
@@ -8966,6 +8976,8 @@ const Screen = memo(function Screen({
   isSelected,
   isTopScreen,
   showFullView,
+  pendingReview,
+  onReviewPendingScreen,
   interactMode,
   isDirectlyHovered,
   isFileDragOver,
@@ -9174,6 +9186,27 @@ const Screen = memo(function Screen({
           >
             {display}
           </span>
+          {pendingReview && onReviewPendingScreen ? (
+            <button
+              type="button"
+              data-node-rewrite-review-badge
+              className="flex h-5 shrink-0 items-center gap-1 rounded-full border border-border bg-background/95 px-1.5 !text-[9px] font-medium text-foreground shadow-sm hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              title={t("designEditor.nodeRewrite.reviewCandidate")}
+              aria-label={t("designEditor.nodeRewrite.reviewCandidate")}
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                onReviewPendingScreen(screen.id);
+              }}
+              onMouseDown={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+              }}
+            >
+              <span className="size-1.5 rounded-full bg-primary" />
+              {t("designEditor.nodeRewrite.reviewCandidate")}
+            </button>
+          ) : null}
           {metadata.source === "fusion" ? (
             <span
               data-frame-source-badge="fusion"

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

@@ -2168,6 +2168,17 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
 
   var selectedEl: Element | null = null;
   var hoveredEl: Element | null = null;
+  type NodeHtmlPreviewSession = {
+    proposalId: string;
+    originalElement: Element;
+    originalOuterHTML: string;
+    startMarker: Comment;
+    endMarker: Comment;
+    currentElement: Element;
+    selectedWasInside: boolean;
+    hoveredWasInside: boolean;
+  };
+  var activeNodeHtmlPreview: NodeHtmlPreviewSession | null = null;
   // Last element an "element-hover" message was actually posted for. Lets
   // the shield's pointermove handler skip getLightElementInfo's two
   // getComputedStyle calls plus the postMessage on every one of the dozens
@@ -5120,6 +5131,178 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
     return null;
   }
 
+  function parseNodeHtmlPreviewElement(html: string): Element | null {
+    var trimmed = html.trim();
+    if (/^<body(?:\s|>)/i.test(trimmed)) {
+      var parsedDocument = new DOMParser().parseFromString(
+        "<!doctype html><html><head></head>" + trimmed + "</html>", // i18n-ignore parser scaffold
+        "text/html",
+      );
+      return parsedDocument.body;
+    }
+    var template = document.createElement("template");
+    template.innerHTML = html;
+    var element = template.content.firstElementChild;
+    if (!element || template.content.childElementCount !== 1) return null;
+    for (
+      var child = template.content.firstChild;
+      child;
+      child = child.nextSibling
+    ) {
+      if (child === element) continue;
+      if (child.nodeType !== 3 || String(child.textContent || "").trim()) {
+        return null;
+      }
+    }
+    return element;
+  }
+
+  function resolveNodeHtmlPreviewTarget(target: unknown): Element | null {
+    if (!target || typeof target !== "object") return null;
+    var nodeId = (target as { nodeId?: unknown }).nodeId;
+    if (typeof nodeId === "string" && nodeId) {
+      try {
+        var nodeMatch = document.querySelector(
+          '[data-agent-native-node-id="' + escapeAttribute(nodeId) + '"]',
+        );
+        if (nodeMatch && !isLayerInteractionBlocked(nodeMatch)) {
+          return nodeMatch;
+        }
+      } catch (_err) {}
+    }
+    var selector = (target as { selector?: unknown }).selector;
+    if (typeof selector !== "string" || !selector) return null;
+    try {
+      var selectorMatch = document.querySelector(selector);
+      return selectorMatch && !isLayerInteractionBlocked(selectorMatch)
+        ? selectorMatch
+        : null;
+    } catch (_err) {
+      return null;
+    }
+  }
+
+  function postNodeHtmlPreviewApplied(proposalId: string): void {
+    (window.parent as Window).postMessage(
+      {
+        type: "agent-native:node-html-preview-applied",
+        proposalId: proposalId,
+      },
+      "*",
+    );
+  }
+
+  function replaceNodeHtmlPreviewElement(
+    session: NodeHtmlPreviewSession,
+    nextElement: Element,
+  ): boolean {
+    var parent = session.startMarker.parentNode;
+    if (!parent || session.endMarker.parentNode !== parent) return false;
+    var cursor = session.startMarker.nextSibling;
+    while (cursor && cursor !== session.endMarker) {
+      var next = cursor.nextSibling;
+      parent.removeChild(cursor);
+      cursor = next;
+    }
+    if (cursor !== session.endMarker) return false;
+    nextElement.setAttribute(
+      "data-agent-native-node-rewrite-proposal",
+      session.proposalId,
+    );
+    parent.insertBefore(nextElement, session.endMarker);
+    session.currentElement = nextElement;
+    if (session.selectedWasInside) selectedEl = nextElement;
+    if (session.hoveredWasInside) hoveredEl = nextElement;
+    refreshOverlays();
+    return true;
+  }
+
+  function restoreActiveNodeHtmlPreview(proposalId?: string): boolean {
+    var session = activeNodeHtmlPreview;
+    if (!session || (proposalId && session.proposalId !== proposalId)) {
+      return false;
+    }
+    activeNodeHtmlPreview = null;
+    var parent = session.startMarker.parentNode;
+    if (!parent || session.endMarker.parentNode !== parent) return false;
+    var cursor = session.startMarker.nextSibling;
+    while (cursor && cursor !== session.endMarker) {
+      var next = cursor.nextSibling;
+      parent.removeChild(cursor);
+      cursor = next;
+    }
+    if (cursor !== session.endMarker) return false;
+    parent.insertBefore(session.originalElement, session.endMarker);
+    parent.removeChild(session.startMarker);
+    parent.removeChild(session.endMarker);
+    if (session.selectedWasInside) selectedEl = session.originalElement;
+    if (session.hoveredWasInside) hoveredEl = session.originalElement;
+    refreshOverlays();
+    return session.originalElement.outerHTML === session.originalOuterHTML;
+  }
+
+  function applyNodeHtmlPreview(data: {
+    proposalId?: unknown;
+    target?: unknown;
+    html?: unknown;
+  }): void {
+    var proposalId = data.proposalId;
+    if (
+      typeof proposalId !== "string" ||
+      !proposalId ||
+      typeof data.html !== "string"
+    ) {
+      return;
+    }
+    var nextElement = parseNodeHtmlPreviewElement(data.html);
+    if (!nextElement) return;
+    if (
+      activeNodeHtmlPreview &&
+      activeNodeHtmlPreview.proposalId === proposalId
+    ) {
+      if (replaceNodeHtmlPreviewElement(activeNodeHtmlPreview, nextElement)) {
+        postNodeHtmlPreviewApplied(proposalId);
+      }
+      return;
+    }
+    if (activeNodeHtmlPreview) restoreActiveNodeHtmlPreview();
+    var target = resolveNodeHtmlPreviewTarget(data.target);
+    if (!target || !target.parentNode || target === document.documentElement) {
+      return;
+    }
+    var originalOuterHTML = target.outerHTML;
+    nextElement.setAttribute(
+      "data-agent-native-node-rewrite-proposal",
+      proposalId,
+    );
+    var startMarker = document.createComment(
+      "agent-native:node-html-preview:start",
+    );
+    var endMarker = document.createComment(
+      "agent-native:node-html-preview:end",
+    );
+    var parent = target.parentNode;
+    var selectedWasInside = !!selectedEl && target.contains(selectedEl);
+    var hoveredWasInside = !!hoveredEl && target.contains(hoveredEl);
+    parent.insertBefore(startMarker, target);
+    parent.insertBefore(endMarker, target.nextSibling);
+    parent.replaceChild(nextElement, target);
+    activeNodeHtmlPreview = {
+      proposalId: proposalId,
+      originalElement: target,
+      originalOuterHTML: originalOuterHTML,
+      startMarker: startMarker,
+      endMarker: endMarker,
+      currentElement: nextElement,
+      selectedWasInside: selectedWasInside,
+      hoveredWasInside: hoveredWasInside,
+    };
+    if (selectedWasInside) selectedEl = nextElement;
+    if (hoveredWasInside) hoveredEl = nextElement;
+    refreshOverlays();
+    postNodeHtmlPreviewApplied(proposalId);
+  }
+
   // Host-driven Layers-panel moves must never inherit findRuntimeTarget's
   // selected-element shortcut or first-match querySelector behavior. Runtime
   // React trees routinely repeat classes and component markup, so a selector
@@ -11070,6 +11253,7 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
       return;
     }
     if (e.data.type === "replace-document-content") {
+      activeNodeHtmlPreview = null;
       replaceRuntimeDocument(
         e.data.content,
         e.data.forceFullDocument ? "" : e.data.selectedSelector,
@@ -11079,6 +11263,16 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
       );
       return;
     }
+    if (e.data.type === "node-html-preview") {
+      if (e.data.operation === "restore") {
+        if (typeof e.data.proposalId === "string") {
+          restoreActiveNodeHtmlPreview(e.data.proposalId);
+        }
+      } else if (e.data.operation === "preview") {
+        applyNodeHtmlPreview(e.data);
+      }
+      return;
+    }
     if (e.data.type === "delete-element") {
       removeRuntimeTarget(e.data.selector, e.data.selectorCandidates);
       return;

package/corpus/templates/design/app/components/design/bridge/hit-test.bridge.ts

@@ -739,9 +739,20 @@
   ): Element | null {
     var element = elementFromEditorPoint(clientX, clientY);
     if (!element) return null;
-    return element.closest(
+    var identifiedAncestor = element.closest(
       "[data-agent-native-node-id],[data-code-layer-id],[data-layer-id],[data-builder-id],[id]",
     );
+    if (
+      identifiedAncestor &&
+      identifiedAncestor !== document.body &&
+      identifiedAncestor !== document.documentElement
+    ) {
+      return identifiedAncestor;
+    }
+    if (element === document.body || element === document.documentElement) {
+      return null;
+    }
+    return element;
   }
 
   function reviewNodeElements(nodeIds: string[]): Record<string, Element> {
@@ -808,14 +819,20 @@
         reviewPointX,
         reviewPointY,
       );
+      var reviewPointNodeId = reviewPointElement
+        ? getNodeId(reviewPointElement)
+        : "";
+      var reviewPointSelector =
+        reviewPointElement && !reviewPointNodeId
+          ? buildSourceEquivalentSelector(reviewPointElement)
+          : "";
       try {
         (window.parent as Window).postMessage(
           {
             type: "agent-native:review-anchor-at-point-result",
             correlationId: reviewPointCorrelationId,
-            nodeId: reviewPointElement
-              ? getNodeId(reviewPointElement) || undefined
-              : undefined,
+            nodeId: reviewPointNodeId || undefined,
+            targetSelector: reviewPointSelector || undefined,
             layerName:
               reviewPointElement?.getAttribute(
                 "data-agent-native-layer-name",

package/corpus/templates/design/app/components/design/design-canvas/iframe-events.ts

@@ -23,3 +23,21 @@ export interface IframeContextMenuPayload {
   info?: ElementInfo | null;
   layerCandidates?: CanvasLayerHitCandidate[];
 }
+
+export interface IframeNodeHtmlPreviewTarget {
+  nodeId?: string;
+  selector?: string;
+}
+
+export interface IframeNodeHtmlPreviewMessage {
+  type: "node-html-preview";
+  proposalId: string;
+  target: IframeNodeHtmlPreviewTarget;
+  operation: "preview" | "restore";
+  html?: string;
+}
+
+export interface IframeNodeHtmlPreviewAppliedPayload {
+  type: "agent-native:node-html-preview-applied";
+  proposalId: string;
+}

package/corpus/templates/design/app/components/design/multi-screen/types.ts

@@ -130,6 +130,10 @@ export interface MultiScreenCanvasProps {
    * transformed directly from the overview canvas. */
   lockedScreenIds?: ReadonlySet<string> | readonly string[];
   fullViewScreenIds?: string[];
+  /** Screens with generated candidates waiting for explicit review. */
+  pendingReviewScreenIds?: ReadonlySet<string> | readonly string[];
+  /** Opens candidate review for one pending screen. */
+  onReviewPendingScreen?: (screenId: string) => void;
   /** Lets every live frame receive native pointer interaction while the
    * overview camera and frame chrome remain available. */
   interactMode?: boolean;