@agent-native/core 0.130.2 → 0.131.3

package/corpus/templates/crm/.agents/skills/agent-native-toolkit/SKILL.md

@@ -117,6 +117,11 @@ in the moment of agent use.
   missing-secret states, OAuth grants, and provider connection health.
 - **Agent UX kit**: sidebar, composer, staged context, mentions, voice, human
   approval, generative UI, progress, and screen-state exposure.
+- **Custom block kit**: optional extension creation, viewer chrome, slots, and
+  promotion affordances. Apps must opt in; Core keeps the sandbox, SQL storage,
+  access checks, and compatibility routes, while Toolkit owns reusable adoption
+  UI. Analytics may expose this as one-off **Custom Blocks**; durable behavior
+  should be promoted to app code.
 - **Chat history kit**: presentational chat lists and recent-chat rails belong
   in Toolkit; Core keeps thread persistence, agent execution, transport, and
   page-to-sidebar handoff. Use Toolkit's `ChatHistoryRail` for the standard

package/corpus/templates/crm/app/components/layout/CrmSidebar.tsx

@@ -1,6 +1,6 @@
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
 import { useActionQuery } from "@agent-native/core/client/hooks";
-import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
+import { useT } from "@agent-native/core/client/i18n";
 import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
@@ -391,12 +391,6 @@ export function CrmSidebar({ onNavigate }: { onNavigate?: () => void }) {
                 className={collapsed ? "size-8" : "min-w-0"}
               />
             }
-            translate={
-              <LanguagePicker
-                variant="ghost-icon"
-                label={t("navigation.settings")}
-              />
-            }
             search={searchButton}
             collapse={collapseButton}
           />

package/corpus/templates/crm/app/i18n/en-US.ts

@@ -62,6 +62,10 @@ const messages = {
     title: "CRM settings",
     description:
       "Native SQL keeps CRM-owned records local and portable. HubSpot and Salesforce use workspace Connections; their mirrors store only allow-listed fields, scoped metadata, and bounded evidence references.",
+    languageTitle: "Language",
+    languageDescription:
+      "Choose the interface language. This preference is saved for your account.",
+    languageLabel: "Interface language",
   },
   connection: {
     tab: "Connection",

package/corpus/templates/crm/app/routes/settings.tsx

@@ -1,5 +1,5 @@
 import { ChangelogSettingsCard } from "@agent-native/core/client/changelog";
-import { useT } from "@agent-native/core/client/i18n";
+import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
 import {
   SettingsTabsPage,
   useAgentSettingsTabs,
@@ -20,6 +20,14 @@ import { AdvancedSettings } from "@/components/crm/settings/AdvancedSettings";
 import { ConnectionSettings } from "@/components/crm/settings/ConnectionSettings";
 import { FieldsSettings } from "@/components/crm/settings/FieldsSettings";
 import { ListsSettings } from "@/components/crm/settings/ListsSettings";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
 
 import changelog from "../../CHANGELOG.md?raw";
 
@@ -99,13 +107,30 @@ export default function SettingsRoute() {
       defaultTab={sectionFromPath(location.pathname)}
       extraTabs={tabs}
       general={
-        <div className="mx-auto w-full max-w-2xl space-y-3">
-          <h1 className="text-xl font-semibold tracking-tight">
-            {t("settings.title")}
-          </h1>
-          <p className="text-sm leading-6 text-muted-foreground">
-            {t("settings.description")}
-          </p>
+        <div className="mx-auto w-full max-w-2xl space-y-6">
+          <div className="space-y-3">
+            <h1 className="text-xl font-semibold tracking-tight">
+              {t("settings.title")}
+            </h1>
+            <p className="text-sm leading-6 text-muted-foreground">
+              {t("settings.description")}
+            </p>
+          </div>
+
+          <Card id="language" className="scroll-mt-16">
+            <CardHeader>
+              <CardTitle className="text-base">
+                {t("settings.languageTitle")}
+              </CardTitle>
+              <CardDescription>
+                {t("settings.languageDescription")}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="max-w-xs space-y-1.5">
+              <Label>{t("settings.languageLabel")}</Label>
+              <LanguagePicker label={t("settings.languageLabel")} />
+            </CardContent>
+          </Card>
         </div>
       }
       whatsNew={

package/corpus/templates/crm/changelog/2026-07-29-sidebar-footers-now-keep-feedback-search-and-collapse-togeth.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-29
+---
+
+Sidebar footers now keep Feedback, Search, and Collapse together, with language preferences available in Settings.

package/corpus/templates/design/.agents/skills/agent-native-toolkit/SKILL.md

@@ -117,6 +117,11 @@ in the moment of agent use.
   missing-secret states, OAuth grants, and provider connection health.
 - **Agent UX kit**: sidebar, composer, staged context, mentions, voice, human
   approval, generative UI, progress, and screen-state exposure.
+- **Custom block kit**: optional extension creation, viewer chrome, slots, and
+  promotion affordances. Apps must opt in; Core keeps the sandbox, SQL storage,
+  access checks, and compatibility routes, while Toolkit owns reusable adoption
+  UI. Analytics may expose this as one-off **Custom Blocks**; durable behavior
+  should be promoted to app code.
 - **Chat history kit**: presentational chat lists and recent-chat rails belong
   in Toolkit; Core keeps thread persistence, agent execution, transport, and
   page-to-sidebar handoff. Use Toolkit's `ChatHistoryRail` for the standard

package/corpus/templates/design/.generated/bridge/editor-chrome.generated.ts

@@ -340,6 +340,14 @@ export const editorChromeBridgeScript: string = `"use strict";
       }
       return null;
     }
+    function parentElementOrShadowHost(node) {
+      if (!node) return null;
+      if (node.parentElement) return node.parentElement;
+      if (typeof node.getRootNode !== "function") return null;
+      var rootNode = node.getRootNode();
+      var isShadowRoot = rootNode && typeof rootNode.host !== "undefined" && typeof rootNode.mode === "string";
+      return isShadowRoot && rootNode.host ? rootNode.host : null;
+    }
     var reactDebugProvenanceCache = typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : null;
     var REACT_FIBER_KEY_PREFIXES = [
       "__reactFiber$",
@@ -440,7 +448,7 @@ export const editorChromeBridgeScript: string = `"use strict";
             };
           }
         }
-        node = node.parentElement;
+        node = parentElementOrShadowHost(node);
       }
       return sawVue ? { framework: "vue", unavailableReason: "no-debug-info" } : null;
     }
@@ -464,10 +472,30 @@ export const editorChromeBridgeScript: string = `"use strict";
             method: "svelte-meta"
           };
         }
-        node = node.parentElement;
+        node = parentElementOrShadowHost(node);
       }
       return sawSvelte ? { framework: "svelte", unavailableReason: "no-debug-info" } : null;
     }
+    function knownUnlocatedFramework(el) {
+      var node = el;
+      for (var depth = 0; node && depth < 8; depth += 1) {
+        if (node.getAttribute && node.attributes) {
+          var tagName = typeof node.tagName === "string" ? node.tagName.toLowerCase() : "";
+          if (node.hasAttribute("ng-version") || Array.prototype.some.call(node.attributes, function(attribute) {
+            return /^_ng(?:content|host)-/i.test(attribute.name);
+          })) {
+            return { framework: "angular", unavailableReason: "no-debug-info" };
+          }
+          if (tagName.indexOf("lightning-") === 0 || Array.prototype.some.call(node.attributes, function(attribute) {
+            return /^lwc-[a-z0-9]+(?:-host)?$/i.test(attribute.name);
+          })) {
+            return { framework: "lwc", unavailableReason: "no-debug-info" };
+          }
+        }
+        node = parentElementOrShadowHost(node);
+      }
+      return null;
+    }
     function frameworkDebugProvenance(el) {
       var react = reactDebugProvenance(el);
       if (react.sourceFile || react.unavailableReason === "no-debug-info") {
@@ -477,8 +505,60 @@ export const editorChromeBridgeScript: string = `"use strict";
       if (vue) return vue;
       var svelte = svelteDebugProvenance(el);
       if (svelte) return svelte;
+      var knownUnlocated = knownUnlocatedFramework(el);
+      if (knownUnlocated) return knownUnlocated;
       return { unavailableReason: "not-framework" };
     }
+    function explicitDebugProvenance(el) {
+      var node = el;
+      var sourceNode = null;
+      for (var depth = 0; node && depth < 8; depth += 1) {
+        if (node.getAttribute && (node.getAttribute("data-source-file") || node.getAttribute("data-loc"))) {
+          sourceNode = node;
+          break;
+        }
+        node = parentElementOrShadowHost(node);
+      }
+      if (!sourceNode) return null;
+      var sourceFile = sourceNode.getAttribute("data-source-file");
+      var lineText = sourceNode.getAttribute("data-source-line");
+      var columnText = sourceNode.getAttribute("data-source-column");
+      var dataLoc = sourceNode.getAttribute("data-loc");
+      if (!sourceFile && dataLoc) {
+        var parsed = parseFrameworkDataLoc(dataLoc);
+        if (parsed) {
+          sourceFile = parsed.sourceFile;
+          lineText = String(parsed.line);
+          columnText = parsed.column !== void 0 ? String(parsed.column) : null;
+        }
+      }
+      if (!sourceFile) return null;
+      var line = lineText ? parseInt(lineText, 10) : void 0;
+      var column = columnText ? parseInt(columnText, 10) : void 0;
+      var declaredFramework = sourceNode.getAttribute("data-source-framework");
+      var declaredMethod = sourceNode.getAttribute("data-source-method");
+      return {
+        framework: declaredFramework === "react" || declaredFramework === "vue" || declaredFramework === "svelte" || declaredFramework === "angular" || declaredFramework === "lwc" || declaredFramework === "html" ? declaredFramework : "html",
+        sourceFile,
+        line: line !== void 0 && isFinite(line) ? line : void 0,
+        column: column !== void 0 && isFinite(column) ? column : void 0,
+        component: sourceNode.getAttribute("data-component-name") || void 0,
+        method: declaredMethod === "debug-source" || declaredMethod === "debug-stack" || declaredMethod === "vue-inspector" || declaredMethod === "svelte-meta" ? declaredMethod : "data-attribute"
+      };
+    }
+    function elementDebugProvenance(el) {
+      var framework = frameworkDebugProvenance(el);
+      var explicit = explicitDebugProvenance(el);
+      if (!explicit) return framework;
+      explicit.framework = explicit.framework === "html" && framework.framework ? framework.framework : explicit.framework;
+      explicit.ownerSourceFile = framework.ownerSourceFile;
+      explicit.ownerLine = framework.ownerLine;
+      explicit.ownerColumn = framework.ownerColumn;
+      explicit.ownerComponentName = framework.ownerComponentName;
+      explicit.ownerMethod = framework.ownerMethod;
+      explicit.ownerKey = framework.ownerKey;
+      return explicit;
+    }
     var runtimeLayerSnapshotTimer = null;
     var runtimeLayerSnapshotMaxTimer = null;
     var lastRuntimeLayerSnapshotHtml = "";
@@ -633,7 +713,7 @@ export const editorChromeBridgeScript: string = `"use strict";
           ensureRuntimeLayerNodeId(sourceNode)
         );
         inlineSnapshotComputedStyle(sourceNode, cloneNode);
-        var provenance = frameworkDebugProvenance(sourceNode);
+        var provenance = elementDebugProvenance(sourceNode);
         if (provenance.sourceFile) {
           if (provenance.framework) {
             cloneNode.setAttribute("data-source-framework", provenance.framework);
@@ -1264,65 +1344,7 @@ export const editorChromeBridgeScript: string = `"use strict";
           reason: "Parent layout context decides whether movement means gap, order, alignment, or wrapper structure."
         });
       }
-      var provenance = void 0;
-      var dataSourceFile = el.getAttribute("data-source-file");
-      var dataSourceLine = el.getAttribute("data-source-line");
-      var dataSourceColumn = el.getAttribute("data-source-column");
-      var dataComponentName = el.getAttribute("data-component-name");
-      var dataSourceFramework = el.getAttribute("data-source-framework");
-      var dataLoc = el.getAttribute("data-loc");
-      if (!dataSourceFile && dataLoc) {
-        var lastColonIndex = dataLoc.lastIndexOf(":");
-        var lastPart = lastColonIndex >= 0 ? dataLoc.slice(lastColonIndex + 1) : "";
-        if (lastColonIndex >= 0 && /^\\d+$/.test(lastPart)) {
-          var beforeLastPart = dataLoc.slice(0, lastColonIndex);
-          var previousColonIndex = beforeLastPart.lastIndexOf(":");
-          var previousPart = previousColonIndex >= 0 ? beforeLastPart.slice(previousColonIndex + 1) : "";
-          var hasColumn = /^\\d+$/.test(previousPart);
-          dataSourceFile = hasColumn ? beforeLastPart.slice(0, previousColonIndex) : beforeLastPart;
-          dataSourceLine = hasColumn ? previousPart : lastPart;
-          if (hasColumn) dataSourceColumn = lastPart;
-        }
-      }
-      var hadDataSourceFile = !!dataSourceFile;
-      var frameworkProvenance = frameworkDebugProvenance(el);
-      if (!hadDataSourceFile && frameworkProvenance.sourceFile) {
-        dataSourceFile = frameworkProvenance.sourceFile;
-        dataSourceLine = String(frameworkProvenance.line);
-        dataSourceColumn = frameworkProvenance.column ? String(frameworkProvenance.column) : null;
-        dataComponentName = dataComponentName || frameworkProvenance.component || null;
-      }
-      if (dataSourceFile || dataSourceLine || dataSourceColumn || dataComponentName || frameworkProvenance.unavailableReason) {
-        provenance = {};
-        if (dataSourceFile) provenance.sourceFile = dataSourceFile;
-        if (dataSourceLine) {
-          var ln = parseInt(dataSourceLine, 10);
-          if (!isNaN(ln)) provenance.line = ln;
-        }
-        if (dataSourceColumn) {
-          var col = parseInt(dataSourceColumn, 10);
-          if (!isNaN(col)) provenance.column = col;
-        }
-        if (dataComponentName) provenance.component = dataComponentName;
-        if (dataSourceFile) {
-          var declaredMethod = el.getAttribute("data-source-method");
-          provenance.method = declaredMethod === "debug-source" || declaredMethod === "debug-stack" || declaredMethod === "vue-inspector" || declaredMethod === "svelte-meta" ? declaredMethod : hadDataSourceFile ? "data-attribute" : frameworkProvenance.method || "data-attribute";
-        }
-        provenance.framework = dataSourceFramework === "react" || dataSourceFramework === "vue" || dataSourceFramework === "svelte" || dataSourceFramework === "html" ? dataSourceFramework : hadDataSourceFile ? frameworkProvenance.framework || "html" : frameworkProvenance.framework;
-        if (frameworkProvenance.ownerSourceFile) {
-          provenance.ownerSourceFile = frameworkProvenance.ownerSourceFile;
-          provenance.ownerLine = frameworkProvenance.ownerLine;
-          provenance.ownerColumn = frameworkProvenance.ownerColumn;
-          provenance.ownerComponentName = frameworkProvenance.ownerComponentName;
-          provenance.ownerMethod = frameworkProvenance.ownerMethod;
-        }
-        if (frameworkProvenance.ownerKey) {
-          provenance.ownerKey = frameworkProvenance.ownerKey;
-        }
-        if (!dataSourceFile && frameworkProvenance.unavailableReason) {
-          provenance.unavailableReason = frameworkProvenance.unavailableReason;
-        }
-      }
+      var provenance = elementDebugProvenance(el);
       return {
         tagName: el.tagName.toLowerCase(),
         componentName: componentName || void 0,
@@ -5714,7 +5736,7 @@ export const editorChromeBridgeScript: string = `"use strict";
       }
       correctAbsoluteMemberClientPosition(el, desiredDropPoint);
     }
-    function postVisualStructureChange(el, target, origin, insertedHtml) {
+    function postVisualStructureChange(el, target, origin, insertedHtml, replaced) {
       if (!el || !target || !target.anchor) return;
       dndLog("post:structure-change", {
         el: getSelector(el),
@@ -5744,6 +5766,7 @@ export const editorChromeBridgeScript: string = `"use strict";
           // the change. The host must NOT tell the coding agent to relocate an
           // element the source file has never contained.
           insertedHtml: typeof insertedHtml === "string" ? insertedHtml : void 0,
+          replaced: replaced === true ? true : void 0,
           sourceRect: rectInfoForElement(el),
           anchorRect: rectInfoForElement(target.anchor),
           payload: getElementInfo(el),
@@ -8398,6 +8421,7 @@ export const editorChromeBridgeScript: string = `"use strict";
           return;
         }
         var insertPlacement = String(e.data.placement || "");
+        var replaceInsertAnchor = e.data.replaceAnchor === true;
         if (insertPlacement !== "before" && insertPlacement !== "after" && insertPlacement !== "inside") {
           rejectInsert("placement");
           return;
@@ -8467,6 +8491,33 @@ export const editorChromeBridgeScript: string = `"use strict";
           );
           return;
         }
+        if (replaceInsertAnchor) {
+          var replaceParent = insertAnchor.parentElement;
+          if (!replaceParent) {
+            rejectInsert("placement-unavailable");
+            return;
+          }
+          var replaceNextSibling = insertAnchor.nextSibling;
+          replaceParent.insertBefore(parsedInsertEl, insertAnchor);
+          selectedEl = parsedInsertEl;
+          positionOverlay(selectionOverlay, selectedEl);
+          refreshOverlays();
+          postVisualStructureChange(
+            parsedInsertEl,
+            insertTarget,
+            {
+              replaced: true,
+              originalElement: insertAnchor,
+              prevParent: replaceParent,
+              prevNextSibling: replaceNextSibling
+            },
+            parsedInsertEl.outerHTML,
+            true
+          );
+          replaceParent.removeChild(insertAnchor);
+          refreshOverlays();
+          return;
+        }
         if (insertPlacement === "inside") {
           insertAnchor.appendChild(parsedInsertEl);
         } else {
@@ -8496,6 +8547,25 @@ export const editorChromeBridgeScript: string = `"use strict";
         delete pendingStructureMoves[e.data.requestId];
         var moveWasInsert = Boolean(move.origin && "inserted" in move.origin);
         var moveWasRemoval = Boolean(move.origin && "removed" in move.origin);
+        var moveWasReplace = Boolean(move.origin && "replaced" in move.origin);
+        if (moveWasReplace && move.origin && "replaced" in move.origin) {
+          if (!e.data.applied) {
+            if (move.el && move.el.isConnected) move.el.remove();
+            var replaceParent = move.origin.prevParent;
+            var replaceNextSibling = move.origin.prevNextSibling;
+            if (replaceParent && replaceParent.isConnected && !move.origin.originalElement.isConnected) {
+              replaceParent.insertBefore(
+                move.origin.originalElement,
+                replaceNextSibling && replaceNextSibling.parentNode === replaceParent ? replaceNextSibling : null
+              );
+              selectedEl = move.origin.originalElement;
+              positionOverlay(selectionOverlay, selectedEl);
+              postElementSelect(selectedEl);
+            }
+          }
+          refreshOverlays();
+          return;
+        }
         if (moveWasRemoval) {
           if (!e.data.applied && move.origin && "removed" in move.origin) {
             var removedParent = move.origin.prevParent;

package/corpus/templates/design/.generated/bridge/embedded-wheel.generated.ts

@@ -22,12 +22,28 @@ export const embeddedWheelBridgeScript: string = `"use strict";
     var lastMetaKey = false;
     var lastShiftKey = false;
     var lastAltKey = false;
-    if (editingSafetyEnabled) {
-      var freezeStyle = document.createElement("style");
+    var freezeStyle = null;
+    function syncEditingSafetyStyle() {
+      var currentStyle = freezeStyle || document.querySelector(
+        "style[data-agent-native-editing-safety-style]"
+      );
+      if (!editingSafetyEnabled) {
+        if (currentStyle && currentStyle.parentNode) {
+          currentStyle.parentNode.removeChild(currentStyle);
+        }
+        freezeStyle = null;
+        return;
+      }
+      if (currentStyle && currentStyle.isConnected) {
+        freezeStyle = currentStyle;
+        return;
+      }
+      freezeStyle = document.createElement("style");
       freezeStyle.setAttribute("data-agent-native-editing-safety-style", "");
       freezeStyle.textContent = "html,body{animation:none!important;transition:none!important;scroll-behavior:auto!important}body *:not([data-agent-native-edit-overlay]):not([data-agent-native-edit-overlay] *){animation:none!important;transition:none!important;scroll-behavior:auto!important}body *:not([data-agent-native-edit-overlay]):not([data-agent-native-edit-overlay] *)::before,body *:not([data-agent-native-edit-overlay]):not([data-agent-native-edit-overlay] *)::after{animation:none!important;transition:none!important}";
       (document.head || document.documentElement).appendChild(freezeStyle);
     }
+    syncEditingSafetyStyle();
     function clamp(value, limit) {
       var number = Number(value) || 0;
       if (number > limit) return limit;
@@ -208,6 +224,7 @@ export const embeddedWheelBridgeScript: string = `"use strict";
         spaceKeyForwardingEnabled = !!e.data.spaceKeyForwardingEnabled;
         if (typeof e.data.editingSafetyEnabled === "boolean") {
           editingSafetyEnabled = e.data.editingSafetyEnabled;
+          syncEditingSafetyStyle();
         }
       }
     }

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

@@ -524,6 +524,10 @@ interface DesignCanvasProps {
       /** Set when the subject is markup this change introduced, not an
        * element the running app already had. */
       insertedHtml?: string;
+      /** The inserted subject replaced the anchor as one undoable gesture. */
+      replaced?: true;
+      replacementSelector?: string;
+      replacementSourceId?: string;
     },
   ) => boolean | "pending" | void;
   onVisualDuplicateChange?: (
@@ -2630,6 +2634,7 @@ export function DesignCanvas({
         const selector = String(e.data.selector || "");
         const anchorSelector = String(e.data.anchorSelector || "");
         const placement = String(e.data.placement || "after");
+        const replaced = e.data.replaced === true;
         dndHostLog("recv:structure-change", {
           selector,
           anchorSelector,
@@ -2685,14 +2690,16 @@ export function DesignCanvas({
             placement === "inside")
         ) {
           const applied = onVisualStructureChange?.(
-            selector,
-            anchorSelector,
+            replaced ? anchorSelector : selector,
+            replaced ? "" : anchorSelector,
             placement,
-            e.data.payload,
+            replaced && isElementInfoPayload(e.data.anchorPayload)
+              ? e.data.anchorPayload
+              : e.data.payload,
             {
               requestId,
-              sourceId,
-              anchorSourceId,
+              sourceId: replaced ? anchorSourceId : sourceId,
+              anchorSourceId: replaced ? undefined : anchorSourceId,
               dropMode,
               forceFlowPositionOverride:
                 e.data.forceFlowPositionOverride === true,
@@ -2705,6 +2712,13 @@ export function DesignCanvas({
                 typeof e.data.insertedHtml === "string"
                   ? e.data.insertedHtml
                   : undefined,
+              ...(replaced
+                ? {
+                    replaced: true as const,
+                    replacementSelector: selector,
+                    replacementSourceId: sourceId,
+                  }
+                : {}),
             },
           );
           dndHostLog("persist:result", {
@@ -3394,7 +3408,7 @@ export function DesignCanvas({
   useEffect(() => {
     postOneShotBridgeMessage({
       type: "embedded-canvas-gesture-mode",
-      wheelEnabled: isEmbeddedFrame,
+      wheelEnabled: isEmbeddedFrame && !interactMode,
       spaceKeyForwardingEnabled: interactMode || readOnly,
       // Interact hands the app its own native interaction back; every other
       // mode keeps the editing shield armed.
@@ -3794,14 +3808,37 @@ export function DesignCanvas({
     }
     lastRuntimeStructureInsertRequestIdRef.current =
       runtimeStructureInsertRequest.requestId;
-    postOneShotBridgeMessage({
-      type: "runtime-structure-insert",
-      requestId: runtimeStructureInsertRequest.requestId,
-      html: runtimeStructureInsertRequest.html,
-      anchorSelector: runtimeStructureInsertRequest.anchor.selector,
-      anchorSourceId: runtimeStructureInsertRequest.anchor.sourceId,
-      anchorPendingNodeId: runtimeStructureInsertRequest.anchor.pendingNodeId,
-      placement: runtimeStructureInsertRequest.placement,
+    let anchorSelector = runtimeStructureInsertRequest.anchor.selector;
+    let anchorSourceId = runtimeStructureInsertRequest.anchor.sourceId;
+    [
+      runtimeStructureInsertRequest.html,
+      ...(runtimeStructureInsertRequest.additionalHtml ?? []),
+    ].forEach((html, index) => {
+      postOneShotBridgeMessage({
+        type: "runtime-structure-insert",
+        requestId: runtimeStructureInsertRequest.requestId + index / 1_000,
+        html,
+        anchorSelector,
+        anchorSourceId,
+        anchorPendingNodeId: runtimeStructureInsertRequest.anchor.pendingNodeId,
+        placement: runtimeStructureInsertRequest.placement,
+        ...(runtimeStructureInsertRequest.replaceAnchor === true && index === 0
+          ? { replaceAnchor: true }
+          : {}),
+      });
+      // Repeated "after" inserts against the original anchor reverse their
+      // order. Chain each subsequent root after the clone before it so a
+      // multi-layer clipboard lands in the same order the user copied.
+      if (runtimeStructureInsertRequest.placement === "after") {
+        const root = new DOMParser()
+          .parseFromString(`<template>${html}</template>`, "text/html")
+          .querySelector("template")?.content.firstElementChild;
+        const rootNodeId = root?.getAttribute("data-agent-native-node-id");
+        if (rootNodeId) {
+          anchorSelector = `[data-agent-native-node-id="${rootNodeId}"]`;
+          anchorSourceId = rootNodeId;
+        }
+      }
     });
   }, [postOneShotBridgeMessage, runtimeStructureInsertRequest]);