@agent-native/core 0.129.2 → 0.130.0

package/corpus/templates/design/app/components/design/code-workbench/workspace/localhost-provider.ts

@@ -53,6 +53,40 @@ interface WriteLocalFileResponse {
   versionHash?: string;
 }
 
+const LOCAL_READ_TIMEOUT_MS = 15_000;
+
+export class LocalWorkspaceTimeoutError extends Error {
+  constructor(operation: "list" | "read") {
+    super(
+      operation === "list"
+        ? "Local files took too long to load. Check the local connection and try again." /* i18n-ignore */
+        : "This local file took too long to load. Check the local connection and try again." /* i18n-ignore */,
+    );
+    this.name = "LocalWorkspaceTimeoutError";
+  }
+}
+
+export async function withLocalReadTimeout<T>(
+  operation: "list" | "read",
+  request: Promise<T>,
+  timeoutMs = LOCAL_READ_TIMEOUT_MS,
+): Promise<T> {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  try {
+    return await Promise.race([
+      request,
+      new Promise<never>((_resolve, reject) => {
+        timer = setTimeout(
+          () => reject(new LocalWorkspaceTimeoutError(operation)),
+          timeoutMs,
+        );
+      }),
+    ]);
+  } finally {
+    if (timer) clearTimeout(timer);
+  }
+}
+
 /** Detect the write-local-file action's grant-related error messages. */
 function isWriteConsentError(error: unknown): boolean {
   if (!(error instanceof Error)) return false;
@@ -103,10 +137,13 @@ export function createLocalhostProvider(
   };
 
   async function listFiles(): Promise<WorkspaceFileEntry[]> {
-    const response = await callAction<ListLocalFilesResponse>(
-      "list-local-files",
-      { designId, connectionId },
-      { method: "GET" },
+    const response = await withLocalReadTimeout(
+      "list",
+      callAction<ListLocalFilesResponse>(
+        "list-local-files",
+        { designId, connectionId },
+        { method: "GET" },
+      ),
     );
     return response.files.map((file) => ({
       path: file.path,
@@ -116,10 +153,13 @@ export function createLocalhostProvider(
   }
 
   async function readFile(path: string): Promise<WorkspaceReadResult> {
-    const response = await callAction<ReadLocalFileResponse>(
-      "read-local-file",
-      { designId, connectionId, path },
-      { method: "GET" },
+    const response = await withLocalReadTimeout(
+      "read",
+      callAction<ReadLocalFileResponse>(
+        "read-local-file",
+        { designId, connectionId, path },
+        { method: "GET" },
+      ),
     );
     return {
       content: response.content,

package/corpus/templates/design/app/components/design/design-canvas/content-size-report.ts

@@ -1,3 +1,5 @@
+import { injectDocumentMarkup } from "@agent-native/core/shared";
+
 /**
  * Content-size reporter injected into every canvas iframe (primary + each
  * breakpoint) so a frame can grow to fit its own content instead of inheriting
@@ -108,17 +110,5 @@ export const CONTENT_SIZE_REPORT_MESSAGE_TYPE = "agent-native:content-size";
 /** Appends the reporter + full-height guard, mirroring appendHitTestResponder's
  * marker handling so it runs regardless of document structure. */
 export function appendContentSizeReporter(html: string): string {
-  if (html.includes("</body>")) {
-    return html.replace(
-      "</body>", // i18n-ignore generated iframe HTML marker
-      CONTENT_SIZE_REPORT_BRIDGE + "</body>", // i18n-ignore generated iframe HTML injection
-    );
-  }
-  if (html.includes("</html>")) {
-    return html.replace(
-      "</html>", // i18n-ignore generated iframe HTML marker
-      CONTENT_SIZE_REPORT_BRIDGE + "</html>", // i18n-ignore generated iframe HTML injection
-    );
-  }
-  return html + CONTENT_SIZE_REPORT_BRIDGE;
+  return injectDocumentMarkup(html, CONTENT_SIZE_REPORT_BRIDGE);
 }

package/corpus/templates/design/app/components/design/design-canvas/embedded-frame.ts

@@ -1,3 +1,5 @@
+import { injectDocumentMarkup } from "@agent-native/core/shared";
+
 const TRANSPARENT_EMBEDDED_FRAME_STYLE =
   "<style data-agent-native-transparent-frame>html,body{background:transparent!important;}body{background-color:transparent!important;}</style>";
 
@@ -37,8 +39,8 @@ export function embeddedContentOffsetStyle(x: number, y: number): string {
 
 function injectEmbeddedFrameStyle(content: string, style: string): string {
   if (!style) return content;
-  if (/<\/head>/i.test(content)) {
-    return content.replace(/<\/head>/i, `${style}</head>`);
+  if (/<\/head\s*>/i.test(content)) {
+    return injectDocumentMarkup(content, style, { target: "head" });
   }
   if (/<body\b/i.test(content)) {
     return content.replace(/<body\b/i, `${style}<body`);

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

@@ -1,3 +1,5 @@
+import { injectDocumentMarkup } from "@agent-native/core/shared";
+
 import { hitTestBridgeScript } from "../../../../.generated/bridge/hit-test.generated";
 
 export const LIGHTWEIGHT_HIT_TEST_BRIDGE_SCRIPT = `
@@ -7,17 +9,5 @@ ${hitTestBridgeScript}
 `;
 
 export function appendHitTestResponder(html: string): string {
-  if (html.includes("</body>")) {
-    return html.replace(
-      "</body>", // i18n-ignore generated iframe HTML marker
-      LIGHTWEIGHT_HIT_TEST_BRIDGE_SCRIPT + "</body>", // i18n-ignore generated iframe HTML injection
-    );
-  }
-  if (html.includes("</html>")) {
-    return html.replace(
-      "</html>", // i18n-ignore generated iframe HTML marker
-      LIGHTWEIGHT_HIT_TEST_BRIDGE_SCRIPT + "</html>", // i18n-ignore generated iframe HTML injection
-    );
-  }
-  return html + LIGHTWEIGHT_HIT_TEST_BRIDGE_SCRIPT;
+  return injectDocumentMarkup(html, LIGHTWEIGHT_HIT_TEST_BRIDGE_SCRIPT);
 }

package/corpus/templates/design/app/components/design/edit-panel/element-classification.ts

@@ -40,7 +40,9 @@ export function inspectorObjectTitle(element: ElementInfo): string {
 export function componentNameForElementInfo(
   element: ElementInfo | null | undefined,
 ): string {
-  return element?.componentName?.trim() ?? "";
+  const explicitName = element?.componentName?.trim();
+  if (explicitName) return explicitName;
+  return element?.provenance?.component?.trim() ?? "";
 }
 
 export function elementIsComponentSelection(

package/corpus/templates/design/app/components/design/edit-panel/inspect-code-source.ts

@@ -0,0 +1,93 @@
+import type { ElementProvenance } from "@shared/source-mode";
+
+export interface InspectCodeSourceLocation {
+  /**
+   * Path exactly as reported by the runtime. This can be project-relative on
+   * ordinary Vite URLs, so it must not automatically become a vscode:// link.
+   */
+  filePath: string;
+  /** Absolute paths are safe to expose through the local-editor deep link. */
+  absolutePath?: string;
+  line?: number;
+  column?: number;
+  componentName?: string;
+  method?: ElementProvenance["method"];
+  owner?: {
+    filePath: string;
+    line?: number;
+    column?: number;
+    componentName?: string;
+    key?: string;
+    method?: ElementProvenance["ownerMethod"];
+  };
+}
+
+interface InspectableElement {
+  tagName: string;
+  id?: string;
+  classes: string[];
+  provenance?: ElementProvenance;
+}
+
+function isAbsoluteSourcePath(filePath: string): boolean {
+  return (
+    filePath.startsWith("/") ||
+    filePath.startsWith("\\\\") ||
+    /^[A-Za-z]:[\\/]/.test(filePath)
+  );
+}
+
+/**
+ * Preserve the live bridge's compiler/debug provenance for the inspector.
+ * A missing file remains unavailable; a React 19 debug-stack line remains
+ * explicitly labelled as runtime-transformed instead of being presented as an
+ * authored JSX position.
+ */
+export function inspectCodeSourceLocation(
+  provenance: ElementProvenance | null | undefined,
+): InspectCodeSourceLocation | null {
+  if (!provenance) return null;
+  const filePath = provenance.sourceFile?.trim();
+  if (!filePath) return null;
+
+  const ownerFilePath = provenance.ownerSourceFile?.trim();
+  return {
+    filePath,
+    ...(isAbsoluteSourcePath(filePath) ? { absolutePath: filePath } : {}),
+    ...(provenance.line ? { line: provenance.line } : {}),
+    ...(provenance.column ? { column: provenance.column } : {}),
+    ...(provenance.component ? { componentName: provenance.component } : {}),
+    ...(provenance.method ? { method: provenance.method } : {}),
+    ...(ownerFilePath
+      ? {
+          owner: {
+            filePath: ownerFilePath,
+            ...(provenance.ownerLine ? { line: provenance.ownerLine } : {}),
+            ...(provenance.ownerColumn
+              ? { column: provenance.ownerColumn }
+              : {}),
+            ...(provenance.ownerComponentName
+              ? { componentName: provenance.ownerComponentName }
+              : {}),
+            ...(provenance.ownerKey ? { key: provenance.ownerKey } : {}),
+            ...(provenance.ownerMethod
+              ? { method: provenance.ownerMethod }
+              : {}),
+          },
+        }
+      : {}),
+  };
+}
+
+export function inspectCodeDataForElement(
+  element: InspectableElement,
+  html: string | null | undefined,
+) {
+  return {
+    html,
+    tagName: element.tagName,
+    id: element.id,
+    classes: element.classes,
+    sourceLocation: inspectCodeSourceLocation(element.provenance),
+  };
+}

package/corpus/templates/design/app/components/design/multi-screen/board-surface-html.ts

@@ -1,3 +1,5 @@
+import { injectDocumentMarkup } from "@agent-native/core/shared";
+
 import type { FrameGeometry } from "./types";
 
 export function hasBoardSurfaceContent(html: string | undefined) {
@@ -322,8 +324,8 @@ export function getBoardSurfaceStaticPreviewContent(args: {
   const offsetX = -args.logicalGeometry.x;
   const offsetY = -args.logicalGeometry.y;
   const style = `<style data-agent-native-board-static-preview>*,*::before,*::after{animation:none!important;animation-delay:0s!important;transition:none!important;caret-color:transparent!important;}html{width:${viewportWidth}px!important;height:${viewportHeight}px!important;overflow:hidden!important;}body{margin:0!important;width:${width}px!important;height:${height}px!important;overflow:visible!important;transform:scale(${scale})!important;transform-origin:0 0!important;}body>[data-agent-native-node-id]{translate:${offsetX}px ${offsetY}px!important;}</style>`;
-  if (/<\/head>/i.test(renderHtml)) {
-    return renderHtml.replace(/<\/head>/i, `${style}</head>`);
+  if (/<\/head\s*>/i.test(renderHtml)) {
+    return injectDocumentMarkup(renderHtml, style, { target: "head" });
   }
   if (/<body\b/i.test(renderHtml)) {
     return renderHtml.replace(/<body\b/i, `${style}<body`);

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

@@ -28,6 +28,41 @@ export function isPortableStyleSnapshot(
   return snapshot.version === 1 && Array.isArray(snapshot.nodes);
 }
 
+export function captureCrossScreenSourceHtmlSnapshot(
+  sourceDocument: Document | null,
+  sourceNodeId: string | undefined,
+): string | undefined {
+  if (!sourceDocument || !sourceNodeId) return undefined;
+  const matches = sourceDocument.querySelectorAll(
+    `[data-agent-native-node-id="${CSS.escape(sourceNodeId)}"]`,
+  );
+  if (matches.length !== 1) return undefined;
+  return matches.item(0)?.outerHTML;
+}
+
+export function validateCrossScreenSourceHtmlSnapshot(
+  snapshot: string,
+  sourceNodeId: string,
+): string | undefined {
+  if (typeof document === "undefined") return undefined;
+  const template = document.createElement("template");
+  template.innerHTML = snapshot.trim();
+  const meaningfulNodes = Array.from(template.content.childNodes).filter(
+    (node) => node.nodeType !== Node.TEXT_NODE || node.textContent?.trim(),
+  );
+  if (
+    meaningfulNodes.length !== 1 ||
+    meaningfulNodes[0]?.nodeType !== Node.ELEMENT_NODE
+  ) {
+    return undefined;
+  }
+  const root = meaningfulNodes[0] as Element;
+  if (root.getAttribute("data-agent-native-node-id") !== sourceNodeId) {
+    return undefined;
+  }
+  return root.outerHTML;
+}
+
 export function isCrossScreenDropPlacement(
   value: unknown,
 ): value is CrossScreenDropPlacement {

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

@@ -19,6 +19,30 @@ export function isBreakpointSelectionTarget(screen: {
   );
 }
 
+/**
+ * Whether the screen's own frame-level SelectionBox (corner/rotate handles +
+ * outline sized to the whole screen) should be suppressed because a MORE
+ * specific target already owns the selection chrome — either one of the
+ * screen's breakpoint sub-frames (existing BP-DEEP v2 case), or a specific
+ * element inside the screen (Layers-panel row, in-canvas click resolving to
+ * a node). The editor-chrome bridge inside the iframe already renders a
+ * correctly-fitted outline + resize handles for that element; drawing the
+ * frame-sized box on top of it is wrong, not just redundant — it always
+ * spans the whole screen regardless of what's actually selected.
+ */
+export function shouldSuppressFrameSelectionBox(
+  screen: {
+    id: string;
+    breakpointWidths?: number[];
+    activeBreakpointWidth?: number;
+  },
+  selectedElementScreenId: string | null | undefined,
+): boolean {
+  return (
+    isBreakpointSelectionTarget(screen) || selectedElementScreenId === screen.id
+  );
+}
+
 export function getActiveScreenIframeId(screen: {
   id: string;
   activeBreakpointWidth?: number;

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

@@ -124,6 +124,13 @@ export interface MultiScreenCanvasProps {
   zoom: number;
   activeId?: string | null;
   selectedScreenIds?: string[];
+  /** Screen id whose active selection is a specific element INSIDE the
+   * screen (a Layers-panel row, an in-canvas click) rather than the screen
+   * frame itself. The frame's own SelectionBox is suppressed for this
+   * screen — the iframe's editor-chrome bridge already draws a tightly
+   * fitted outline + resize handles around the real element, so drawing the
+   * frame-sized box on top of it would be wrong, not just redundant. */
+  selectedElementScreenId?: string | null;
   /** Hidden screen/file rows retain geometry but do not render or participate
    * in overview hit testing, fit, or selection until shown again. */
   hiddenScreenIds?: ReadonlySet<string> | readonly string[];
@@ -294,6 +301,8 @@ export interface MultiScreenCanvasProps {
     targetLocalPoint?: Point;
     /** Pointer offset from the dragged element's top-left in source iframe px. */
     sourcePointerOffset?: Point;
+    /** Host-captured HTML for a board root, including its current DOM subtree. */
+    sourceHtmlSnapshot?: string;
     /** Portable computed styles captured in the source iframe before the move. */
     styleSnapshot?: PortableStyleSnapshot;
   }) => void;

package/corpus/templates/design/app/components/design/types.ts

@@ -19,6 +19,23 @@ export interface RuntimeStructureMoveRequest {
   placement: "before" | "after" | "inside";
 }
 
+/**
+ * Insert NEW markup into a live screen's running DOM. Unlike
+ * RuntimeStructureMoveRequest there is no subject in the running app yet —
+ * the html is the subject, already positioned by the host.
+ */
+export interface RuntimeStructureInsertRequest {
+  requestId: number;
+  html: string;
+  anchor: {
+    selector: string;
+    sourceId?: string | null;
+    /** Hit-test-minted id, live-DOM only. The only handle on an id-less anchor. */
+    pendingNodeId?: string | null;
+  };
+  placement: "before" | "after" | "inside";
+}
+
 export interface RuntimeVerificationRequest {
   requestId: number;
 }
@@ -52,6 +69,18 @@ export interface ElementInfo {
    */
   pendingNodeId?: string;
   selector?: string;
+  /**
+   * The `selector` / `sourceId` the canvas bridge originally reported, kept
+   * verbatim when the host canonicalizes the selection onto its own source
+   * projection (canonicalElementInfoForCodeLayerNode). For a live/localhost
+   * screen the two are DIFFERENT node-id namespaces — the running document
+   * carries the ids the bridge assigned there, the fetched source snapshot
+   * carries the ones ensureCodeLayerNodeIdsInHtml stamped — so the canonical
+   * selector cannot address the live DOM. Any host-initiated mutation of the
+   * running document (currently only delete) must target these instead.
+   */
+  runtimeSelector?: string;
+  runtimeSourceId?: string;
   classes: string[];
   computedStyles: Record<string, string>;
   /**

package/corpus/templates/design/app/components/layout/Layout.tsx

@@ -20,6 +20,10 @@ import { useLocation } from "react-router";
 
 import { useNavigationState } from "@/hooks/use-navigation-state";
 import { DESIGN_CHAT_STORAGE_KEY } from "@/lib/agent-chat";
+import {
+  designEditorRoute,
+  isDesignEditorRoute,
+} from "@/lib/design-editor-route";
 import { cn } from "@/lib/utils";
 
 import {
@@ -48,7 +52,7 @@ const BARE_PREFIXES = ["/present/"];
  * DesignEditor mode/zoom/device, shared ExtensionViewer / ExtensionsListPage
  * chrome). The editor owns its agent surface inside its Figma-style left rail.
  */
-const EDITOR_PREFIXES = ["/design/", "/extensions"];
+const EDITOR_PREFIXES = ["/design/", "/visual-edit/", "/extensions"];
 
 export function Layout({ children }: LayoutProps) {
   const location = useLocation();
@@ -59,7 +63,7 @@ export function Layout({ children }: LayoutProps) {
   useNavigationState(hasSession);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const openMobileSidebar = useCallback(() => setMobileSidebarOpen(true), []);
-  const isDesignEditor = location.pathname.startsWith("/design/");
+  const isDesignEditor = isDesignEditorRoute(location.pathname);
   const showMobileTopBar = !isDesignEditor;
   const browserTabId = getBrowserTabId();
   const {
@@ -72,8 +76,7 @@ export function Layout({ children }: LayoutProps) {
   // (which we already short-circuit as BARE). Anywhere else (list,
   // design-systems, settings) leaves scope null so general chats keep working.
   const designScope = useMemo(() => {
-    const match = location.pathname.match(/^\/design\/([^/]+)/);
-    const designId = match?.[1];
+    const designId = designEditorRoute(location.pathname)?.designId;
     if (!designId) return null;
     return { type: "design" as const, id: designId };
   }, [location.pathname]);

package/corpus/templates/design/app/hooks/use-navigation-state.ts

@@ -54,6 +54,7 @@ export interface DesignEditorCommand {
   designId: string;
   editorView?: "single" | "overview";
   viewMode?: "single" | "overview";
+  mode?: "edit" | "annotate" | "interact";
   inspectorTab?: "design" | "comments" | "tweaks" | "code" | "extensions";
   inspector?: "design" | "comments" | "tweaks" | "code" | "extensions";
   leftPanel?:
@@ -165,6 +166,7 @@ export function editorPathFromCommand(cmd: NavigationState): string | null {
   const params = new URLSearchParams();
   const editorView = normalizeEditorView(cmd.editorView);
   if (editorView) params.set("view", editorView);
+  if (editorView === "single") params.set("mode", "interact");
   const inspectorTab = normalizeInspectorTab(cmd.inspectorTab ?? cmd.inspector);
   if (inspectorTab) params.set("inspector", inspectorTab);
   const leftPanel = normalizeLeftPanel(cmd.leftPanel ?? cmd.panel);
@@ -200,6 +202,7 @@ export function editorCommandFromNavigate(
     path,
   };
   if (editorView) command.editorView = editorView;
+  if (editorView === "single") command.mode = "interact";
   if (inspectorTab) command.inspectorTab = inspectorTab;
   if (leftPanel) command.leftPanel = leftPanel;
   if (cmd.fileId) command.fileId = cmd.fileId;