@agent-native/core 0.84.25 → 0.84.27

package/corpus/README.md

@@ -28,4 +28,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 ## Generated Counts
 
 - core files: 2043
-- template files: 4969
+- template files: 4971

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @agent-native/core
 
+## 0.84.27
+
+### Patch Changes
+
+- 6fb954b: Require admin access for shareable resource visibility changes.
+
+## 0.84.26
+
+### Patch Changes
+
+- f041345: Track action-preparation progress by streamed tool-input id so parallel same-name tool calls do not hide real progress.
+
 ## 0.84.25
 
 ### Patch Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.84.25",
+  "version": "0.84.27",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/core/src/agent/production-agent.ts

@@ -2795,6 +2795,7 @@ export async function runAgentLoop(opts: {
         let lastToolInputActivityAt = 0;
         const sendToolInputActivity = (
           toolName: string | undefined,
+          toolInputId?: string,
           progressBytes?: number,
           force = false,
         ) => {
@@ -2810,6 +2811,7 @@ export async function runAgentLoop(opts: {
             type: "activity",
             label: toolInputActivityLabel(toolName),
             ...(toolName ? { tool: toolName } : {}),
+            ...(toolInputId ? { id: toolInputId } : {}),
             ...(typeof progressBytes === "number" ? { progressBytes } : {}),
           });
         };
@@ -2848,7 +2850,7 @@ export async function runAgentLoop(opts: {
               toolInputNames.set(key, event.name);
               toolInputBytes.set(key, 0);
             }
-            sendToolInputActivity(event.name, undefined, true);
+            sendToolInputActivity(event.name, key, undefined, true);
           } else if (event.type === "tool-input-delta") {
             const key = event.id ?? event.name;
             const toolName =
@@ -2862,7 +2864,7 @@ export async function runAgentLoop(opts: {
                 new TextEncoder().encode(event.text ?? "").byteLength;
               toolInputBytes.set(key, progressBytes);
             }
-            sendToolInputActivity(toolName, progressBytes);
+            sendToolInputActivity(toolName, key, progressBytes);
           } else if (event.type === "gateway-heartbeat") {
             send({ type: "stream_keepalive" });
           } else if (event.type === "tool-call") {

package/corpus/core/src/agent/run-manager.ts

@@ -441,7 +441,8 @@ export function startRun(
   const shouldBumpProgressForEvent = (event: AgentChatEvent): boolean => {
     if (event.type === "stream_keepalive") return false;
     if (event.type === "activity" && isPreparingActionActivityEvent(event)) {
-      const toolKey = event.tool?.trim() || event.label.trim();
+      const toolKey =
+        event.id?.trim() || event.tool?.trim() || event.label.trim();
       const progressBytes =
         typeof event.progressBytes === "number" &&
         Number.isFinite(event.progressBytes) &&
@@ -449,6 +450,7 @@ export function startRun(
           ? Math.floor(event.progressBytes)
           : undefined;
       if (progressBytes === undefined) return false;
+      if (!event.id?.trim()) return progressBytes > 0;
       const previousBytes = preparingActivityBytes.get(toolKey) ?? 0;
       if (progressBytes <= previousBytes) {
         preparingActivityBytes.set(
@@ -461,8 +463,7 @@ export function startRun(
       return true;
     }
     if (event.type === "tool_start" || event.type === "tool_done") {
-      const tool = event.tool?.trim();
-      if (tool) preparingActivityBytes.delete(tool);
+      preparingActivityBytes.clear();
     }
     if (
       event.type === "clear" ||

package/corpus/core/src/agent/types.ts

@@ -212,12 +212,19 @@ export type AgentToolInput = Record<string, unknown>;
 export type AgentChatEvent =
   | { type: "text"; text: string }
   | { type: "thinking"; text: string }
-  | { type: "activity"; label: string; tool?: string; progressBytes?: number }
+  | {
+      type: "activity";
+      label: string;
+      tool?: string;
+      id?: string;
+      progressBytes?: number;
+    }
   | { type: "stream_keepalive" }
-  | { type: "tool_start"; tool: string; input: AgentToolInput }
+  | { type: "tool_start"; tool: string; id?: string; input: AgentToolInput }
   | {
       type: "tool_done";
       tool: string;
+      id?: string;
       input?: AgentToolInput;
       result: string;
       isError?: boolean;

package/corpus/core/src/client/AssistantChat.tsx

@@ -1456,6 +1456,7 @@ const AssistantChatInner = forwardRef<
   // When stop is clicked during reconnect, keep content visible (don't wipe it)
   const [reconnectFrozen, setReconnectFrozen] = useState(false);
   const reconnectRunIdRef = useRef<string | null>(null);
+  const reconnectTailOnlyRef = useRef(false);
   const reconnectCanMaterializeRef = useRef(false);
   const reconnectAbortRef = useRef<AbortController | null>(null);
   // Nuclear stop: user clicked stop. Clears the stop button/indicator AND
@@ -1775,6 +1776,7 @@ const AssistantChatInner = forwardRef<
 
       reconnectRunIdRef.current = runId;
       const afterSeq = resolveReconnectAfterSeq(threadId, runId);
+      reconnectTailOnlyRef.current = afterSeq > 0;
       reconnectCanMaterializeRef.current = afterSeq === 0;
       const storedActivityTool = getActiveRunActivityTool(threadId, runId);
       setRunningActivityTool(storedActivityTool);
@@ -1941,6 +1943,7 @@ const AssistantChatInner = forwardRef<
             await refreshThreadFromServer();
             setReconnectContent([]);
             setReconnectFrozen(false);
+            reconnectTailOnlyRef.current = false;
           } else {
             settleInterruptedToolCalls(latestContent);
             setReconnectContent([...latestContent]);
@@ -1959,6 +1962,7 @@ const AssistantChatInner = forwardRef<
           reconnectAbortRef.current = null;
           setIsReconnecting(false);
           reconnectRunIdRef.current = null;
+          reconnectTailOnlyRef.current = false;
           if (afterSeq > 0) {
             reconnectCanMaterializeRef.current = false;
           }
@@ -1994,6 +1998,7 @@ const AssistantChatInner = forwardRef<
           reconnectAbortRef.current = null;
           setIsReconnecting(false);
           reconnectRunIdRef.current = null;
+          reconnectTailOnlyRef.current = false;
           if (loaded || afterSeq > 0 || latestContent.length === 0) {
             reconnectCanMaterializeRef.current = false;
           }
@@ -2023,6 +2028,7 @@ const AssistantChatInner = forwardRef<
     useCallback(async (): Promise<boolean> => {
       if (!threadId) return false;
       try {
+        const storedActiveRun = getActiveRun();
         const runRes = await fetch(
           `${apiUrl}/runs/active?threadId=${encodeURIComponent(threadId)}`,
         );
@@ -2033,6 +2039,11 @@ const AssistantChatInner = forwardRef<
           runInfo.status !== "running" ||
           activeRunLooksStale(runInfo)
         ) {
+          if (storedActiveRun?.threadId === threadId) {
+            clearActiveRunIfMatches(threadId, storedActiveRun.runId);
+          } else if (runInfo.runId) {
+            clearActiveRunIfMatches(threadId, String(runInfo.runId));
+          }
           await refreshThreadFromServer();
           return false;
         }
@@ -2819,7 +2830,9 @@ const AssistantChatInner = forwardRef<
       reconnectRunIdRef.current = null;
       setIsReconnecting(false);
       const shouldFreezeReconnectContent =
-        reconnectCanMaterializeRef.current && reconnectContent.length > 0;
+        !reconnectTailOnlyRef.current &&
+        reconnectCanMaterializeRef.current &&
+        reconnectContent.length > 0;
       if (shouldFreezeReconnectContent) {
         setReconnectFrozen(true);
       } else {
@@ -2827,6 +2840,7 @@ const AssistantChatInner = forwardRef<
         setReconnectContent([]);
         reconnectCanMaterializeRef.current = false;
       }
+      reconnectTailOnlyRef.current = false;
     }
     threadRuntime.cancelRun();
     if (typeof window !== "undefined") {

package/corpus/core/src/client/FeedbackButton.tsx

@@ -429,7 +429,7 @@ export function FeedbackButton({
           <TooltipPrimitive.Portal>
             <TooltipPrimitive.Content
               sideOffset={6}
-              className="z-[300] overflow-hidden rounded-md border border-border bg-popover px-2 py-1 text-[11px] text-foreground shadow-md animate-in fade-in-0 zoom-in-95"
+              className="z-[100040] overflow-hidden rounded-md border border-border bg-popover px-2 py-1 text-[11px] text-foreground shadow-md animate-in fade-in-0 zoom-in-95"
             >
               {resolvedLabel}
             </TooltipPrimitive.Content>
@@ -482,7 +482,7 @@ export function FeedbackButton({
           align={align}
           sideOffset={8}
           collisionPadding={16}
-          className="z-[300] overflow-hidden rounded-lg border border-border bg-popover shadow-xl outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+          className="z-[100040] overflow-hidden rounded-lg border border-border bg-popover shadow-xl outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
           style={surfaceStyle}
         >
           {submitted ? (

package/corpus/core/src/client/components/PresenceBar.tsx

@@ -113,7 +113,8 @@ function UserAvatar({
               : `0 0 0 2px #fff`,
           }}
           aria-label={`${name} (${user.email})${isFollowing ? " — following" : ""}`}
-          tabIndex={0}
+          tabIndex={onClick ? 0 : undefined}
+          role={onClick ? "button" : undefined}
           onClick={onClick}
           onKeyDown={(e) => {
             if (e.key === "Enter" || e.key === " ") onClick?.();
@@ -123,7 +124,11 @@ function UserAvatar({
         </div>
       </TooltipTrigger>
       <TooltipContent side="bottom">
-        {isFollowing ? `Following ${name} — click to stop` : user.email}
+        {isFollowing
+          ? `Following ${name} — click to stop`
+          : onClick
+            ? `${name} — click to follow`
+            : user.email}
       </TooltipContent>
     </Tooltip>
   );

package/corpus/core/src/client/composer/ComposerPlusMenu.tsx

@@ -12,7 +12,13 @@ import {
   IconArrowLeft,
   IconX,
 } from "@tabler/icons-react";
-import React, { useState, useRef, useEffect, useMemo } from "react";
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useMemo,
+  useCallback,
+} from "react";
 import { createPortal } from "react-dom";
 
 import { setAgentChatContextItem } from "../agent-chat.js";
@@ -740,6 +746,16 @@ function AssetsPickerModal({
   const sourceUrl = useMemo(() => assetPickerUrl(), []);
   const iframeUrl = useMemo(() => withEmbeddedParams(sourceUrl), [sourceUrl]);
   const targetOrigin = useMemo(() => assetPickerOrigin(iframeUrl), [iframeUrl]);
+  const configurePicker = useCallback(() => {
+    if (!targetOrigin) return;
+    iframeRef.current?.contentWindow?.postMessage(
+      embedEnvelope("message", {
+        name: "configure",
+        payload: { mediaType: "image", count: 3 },
+      }),
+      targetOrigin,
+    );
+  }, [targetOrigin]);
 
   useEffect(() => {
     if (open) setPickerReady(false);
@@ -755,13 +771,7 @@ function AssetsPickerModal({
 
       if (event.data.type === "ready") {
         setPickerReady(true);
-        iframeRef.current?.contentWindow?.postMessage(
-          embedEnvelope("message", {
-            name: "configure",
-            payload: { mediaType: "image", count: 3 },
-          }),
-          targetOrigin,
-        );
+        configurePicker();
         return;
       }
 
@@ -801,7 +811,7 @@ function AssetsPickerModal({
       window.removeEventListener("message", handleMessage);
       window.removeEventListener("keydown", handleKey);
     };
-  }, [onOpenChange, open, targetOrigin]);
+  }, [configurePicker, onOpenChange, open, targetOrigin]);
 
   if (!open || typeof document === "undefined") return null;
 
@@ -846,6 +856,10 @@ function AssetsPickerModal({
               sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-downloads"
               allow="clipboard-read; clipboard-write; microphone; fullscreen"
               referrerPolicy="strict-origin-when-cross-origin"
+              onLoad={() => {
+                configurePicker();
+                setPickerReady(true);
+              }}
             />
           </div>
         ) : (

package/corpus/core/src/client/sharing/ShareButton.tsx

@@ -693,6 +693,10 @@ function SharePanel(
 
   const handleVisibility = (next: Visibility) => {
     if (next === visibility) return;
+    if (!canManage) {
+      setShareError("Only owners and admins can change access.");
+      return;
+    }
     setShareError(null);
     void onVisibilityChange(next).catch((err) => {
       setShareError(extractShareErrorMessage(err));
@@ -1025,6 +1029,15 @@ function SharePanel(
         </div>
       </div>
 
+      {shareError && !canManage ? (
+        <div
+          role="alert"
+          className="mb-4 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive"
+        >
+          {shareError}
+        </div>
+      ) : null}
+
       {props.accessNote ? (
         <div className="mb-4 rounded-md border border-border bg-muted/35 p-3 text-xs text-muted-foreground">
           {props.accessNote}
@@ -1589,14 +1602,20 @@ function VisibilitySelect(props: {
   onChange: (v: Visibility) => void;
   disabled?: boolean;
   visibilityCopy?: ShareButtonProps["visibilityCopy"];
+  /** When false, the "Private" option is omitted unless currently selected. */
+  allowPrivate?: boolean;
   /** When false, the "Public" option is omitted. Default: true. */
   allowPublic?: boolean;
 }) {
+  const allowPrivate = props.allowPrivate !== false;
   const allowPublic = props.allowPublic !== false;
   const current = visibilityMeta(props.value, props.visibilityCopy);
-  const options = (Object.keys(VIS_META) as Visibility[]).filter(
-    (k) => allowPublic || k !== "public",
-  );
+  const options = (Object.keys(VIS_META) as Visibility[]).filter((k) => {
+    if (k === props.value) return true;
+    if (k === "private" && !allowPrivate) return false;
+    if (k === "public" && !allowPublic) return false;
+    return true;
+  });
   return (
     <Select.Root
       value={props.value}

package/corpus/core/src/client/sharing/ShareDialog.tsx

@@ -376,6 +376,7 @@ function LinkTab(props: {
 
   const handleVisibility = (next: Visibility) => {
     if (next === visibility) return;
+    if (!canManage) return;
     setVisibility.mutate(
       { resourceType, resourceId, visibility: next } as any,
       { onSuccess: () => sharesQuery.refetch() },
@@ -490,6 +491,7 @@ function InviteTab(props: {
 
   const handleVisibility = (next: Visibility) => {
     if (next === visibility) return;
+    if (!canManage) return;
     setVisibility.mutate(
       { resourceType, resourceId, visibility: next } as any,
       { onSuccess: () => sharesQuery.refetch() },
@@ -762,10 +764,20 @@ function VisibilitySelect(props: {
   value: Visibility;
   onChange: (v: Visibility) => void;
   disabled?: boolean;
+  allowPrivate?: boolean;
+  allowPublic?: boolean;
 }) {
   const t = useT();
   const visibilityMeta = useVisibilityMeta();
   const current = visibilityMeta[props.value];
+  const allowPrivate = props.allowPrivate !== false;
+  const allowPublic = props.allowPublic !== false;
+  const options = (Object.keys(VIS_ICONS) as Visibility[]).filter((k) => {
+    if (k === props.value) return true;
+    if (k === "private" && !allowPrivate) return false;
+    if (k === "public" && !allowPublic) return false;
+    return true;
+  });
   return (
     <Select.Root
       value={props.value}
@@ -792,7 +804,7 @@ function VisibilitySelect(props: {
         >
           <Select.Viewport>
             <SelectItems
-              items={(Object.keys(VIS_ICONS) as Visibility[]).map((k) => ({
+              items={options.map((k) => ({
                 value: k,
                 label: visibilityMeta[k].label,
                 description: visibilityMeta[k].description,

package/corpus/core/src/client/sse-event-processor.ts

@@ -150,8 +150,8 @@ export const SSE_ACTION_PREPARATION_STALL_TIMEOUT_MS = 90_000;
 
 type ActivityTrailEntry = AgentActivityTrailEntry;
 
-type PreparingActionState = {
-  tool?: string;
+type PreparingActionEntry = {
+  tool: string;
   startedAt?: number;
   lastProgressBytes?: number;
   /**
@@ -166,6 +166,10 @@ type PreparingActionState = {
   lastProgressAt?: number;
 };
 
+type PreparingActionState = {
+  entries?: Map<string, PreparingActionEntry>;
+};
+
 function formatProgressBytes(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -270,21 +274,35 @@ function updatePreparingActionState(
   if (ev.type === "activity" && isPreparingActionActivity(ev)) {
     const tool = ev.tool?.trim() || undefined;
     if (!tool) return false;
-    if (state.tool !== tool || state.startedAt === undefined) {
-      state.tool = tool;
-      state.startedAt = now;
-      state.lastProgressAt = undefined;
-      state.lastProgressBytes = undefined;
+    const key = ev.id?.trim() || tool;
+    const entries = state.entries ?? new Map<string, PreparingActionEntry>();
+    state.entries = entries;
+    let entry = entries.get(key);
+    if (!entry) {
+      entry = {
+        tool,
+        startedAt: now,
+        lastProgressAt: undefined,
+        lastProgressBytes: undefined,
+      };
+      entries.set(key, entry);
     }
     const progressBytes = activityProgressBytes(ev);
-    const previousBytes = state.lastProgressBytes ?? 0;
+    const previousBytes = entry.lastProgressBytes ?? 0;
     if (progressBytes !== undefined) {
-      state.lastProgressBytes = Math.max(previousBytes, progressBytes);
+      entry.lastProgressBytes = Math.max(previousBytes, progressBytes);
+    }
+    if (!ev.id?.trim()) {
+      if (progressBytes !== undefined && progressBytes > 0) {
+        entry.lastProgressAt = now;
+        return true;
+      }
+      return false;
     }
     if (progressBytes !== undefined && progressBytes > previousBytes) {
       // A byte increase is proof the model is still streaming this action's
       // argument. Repeated zero-byte prep activity is only a heartbeat.
-      state.lastProgressAt = now;
+      entry.lastProgressAt = now;
       return true;
     }
     return false;
@@ -299,10 +317,17 @@ function updatePreparingActionState(
     ev.type === "error" ||
     ev.type === "missing_api_key"
   ) {
-    state.tool = undefined;
-    state.startedAt = undefined;
-    state.lastProgressAt = undefined;
-    state.lastProgressBytes = undefined;
+    if (ev.type === "tool_start" || ev.type === "tool_done") {
+      const tool = ev.tool?.trim();
+      const id = ev.id?.trim();
+      for (const [key, entry] of state.entries ?? []) {
+        if ((id && key === id) || (!id && entry.tool === tool)) {
+          state.entries?.delete(key);
+        }
+      }
+    } else {
+      state.entries?.clear();
+    }
   }
   return undefined;
 }
@@ -313,12 +338,16 @@ function hasStalledPreparingAction(state: PreparingActionState, now: number) {
   // streaming for a long time. `lastProgressAt` advances on every delta
   // heartbeat, so an actively-streaming large output keeps resetting this and
   // survives; a genuinely stuck prep (keepalive-only, no deltas) trips it.
-  return (
-    state.tool !== undefined &&
-    state.startedAt !== undefined &&
-    now - (state.lastProgressAt ?? state.startedAt) >=
-      SSE_ACTION_PREPARATION_STALL_TIMEOUT_MS
-  );
+  for (const entry of state.entries?.values() ?? []) {
+    if (
+      entry.startedAt !== undefined &&
+      now - (entry.lastProgressAt ?? entry.startedAt) >=
+        SSE_ACTION_PREPARATION_STALL_TIMEOUT_MS
+    ) {
+      return true;
+    }
+  }
+  return false;
 }
 
 async function readChunkWithProgressTimeout(

package/corpus/core/src/sharing/actions/set-resource-visibility.ts

@@ -16,9 +16,9 @@ import {
 
 export default defineAction({
   description:
-    "Change the coarse visibility of a shareable resource: 'private' keeps it owner-only, 'org' shares it with all members of the owner's organization, 'public' makes it accessible to anyone with the link. Owner or admin role required.",
-  // (audit H5) Visibility changes are admin-tier and can flip a private
-  // resource org-wide or public. Refuse from the tools iframe bridge.
+    "Change the coarse visibility of a shareable resource: 'private' keeps it owner-only, 'org' shares it with all members of the owner's organization, 'public' makes it accessible to anyone with the link. Visibility changes require owner or admin role.",
+  // (audit H5) Visibility changes can flip a private resource org-wide or
+  // public. Refuse from the tools iframe bridge.
   toolCallable: false,
   mcpApp: {
     compactCatalog: true,

package/corpus/templates/design/actions/insert-asset.ts

@@ -57,6 +57,14 @@ function escapeHtml(value: string): string {
     .replace(/"/g, """);
 }
 
+function createInsertedNodeId(prefix: string): string {
+  const random =
+    typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+      ? crypto.randomUUID().replace(/-/g, "").slice(0, 12)
+      : Math.random().toString(36).slice(2, 14);
+  return `inserted-${prefix}-${random}`;
+}
+
 function insertBeforeClosingTag(
   html: string,
   closingTag: "main" | "body",
@@ -70,6 +78,7 @@ function insertBeforeClosingTag(
 function appendAssetMarkup(
   html: string,
   args: z.infer<typeof schemaInput>,
+  nodeId: string,
 ): string {
   const label = args.title?.trim() || args.altText?.trim() || "Generated asset";
   const escapedUrl = escapeHtml(args.assetUrl);
@@ -82,7 +91,7 @@ function appendAssetMarkup(
       ? `<video src="${escapedUrl}" controls class="w-full rounded-xl object-cover"></video>`
       : `<img src="${escapedUrl}" alt="${escapeHtml(args.altText?.trim() || label)}" class="w-full rounded-xl object-cover" />`;
   const snippet = `
-    <section class="mx-auto my-8 max-w-5xl px-4" data-agent-native-asset${assetIdAttr}>
+    <section class="mx-auto my-8 max-w-5xl px-4" data-agent-native-asset data-agent-native-node-id="${escapeHtml(nodeId)}" data-agent-native-layer-name="${escapedLabel}"${assetIdAttr}>
       <figure class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
         ${media}
         <figcaption class="px-4 py-3 text-sm text-slate-600">${escapedLabel}</figcaption>
@@ -191,7 +200,8 @@ export default defineAction({
       // Collab read is best-effort; fall back to stored content.
     }
 
-    const content = appendAssetMarkup(base, args);
+    const insertedNodeId = createInsertedNodeId("asset");
+    const content = appendAssetMarkup(base, args, insertedNodeId);
     const now = new Date().toISOString();
     await db
       .update(schema.designFiles)
@@ -213,6 +223,8 @@ export default defineAction({
       fileId: file.id,
       filename: file.filename,
       inserted: true,
+      insertedNodeId,
+      insertedSelector: `[data-agent-native-node-id="${insertedNodeId}"]`,
       assetId: args.assetId ?? null,
       assetUrl: args.assetUrl,
     };

package/corpus/templates/design/actions/insert-design-native-asset.ts

@@ -50,9 +50,17 @@ function insertBeforeClosingTag(
   return html.replace(pattern, `${snippet}\n</${closingTag}>`);
 }
 
-function nativeSnippet(kind: DesignNativeAssetKind): string {
+function createInsertedNodeId(prefix: string): string {
+  const random =
+    typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+      ? crypto.randomUUID().replace(/-/g, "").slice(0, 12)
+      : Math.random().toString(36).slice(2, 14);
+  return `inserted-${prefix}-${random}`;
+}
+
+function nativeSnippet(kind: DesignNativeAssetKind, nodeId: string): string {
   const attrs = (componentName: string) =>
-    `data-agent-native-native-asset data-agent-native-component="${componentName}" data-agent-native-layer-name="${componentName}"`;
+    `data-agent-native-native-asset data-agent-native-node-id="${nodeId}" data-agent-native-component="${componentName}" data-agent-native-layer-name="${componentName}"`;
   switch (kind) {
     case "section-frame":
       return `
@@ -137,8 +145,9 @@ function nativeSnippet(kind: DesignNativeAssetKind): string {
 function appendNativeAssetMarkup(
   html: string,
   kind: DesignNativeAssetKind,
+  nodeId: string,
 ): string {
-  const snippet = nativeSnippet(kind);
+  const snippet = nativeSnippet(kind, nodeId);
   return (
     insertBeforeClosingTag(html, "main", snippet) ??
     insertBeforeClosingTag(html, "body", snippet) ??
@@ -239,7 +248,8 @@ export default defineAction({
       // Collab read is best-effort; fall back to stored content.
     }
 
-    const content = appendNativeAssetMarkup(base, args.kind);
+    const insertedNodeId = createInsertedNodeId("native");
+    const content = appendNativeAssetMarkup(base, args.kind, insertedNodeId);
     const now = new Date().toISOString();
     await db
       .update(schema.designFiles)
@@ -261,6 +271,8 @@ export default defineAction({
       fileId: file.id,
       filename: file.filename,
       inserted: true,
+      insertedNodeId,
+      insertedSelector: `[data-agent-native-node-id="${insertedNodeId}"]`,
       source: "design-native",
       kind: args.kind,
     };