@agent-native/core 0.81.2 → 0.81.3

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: 4803
+- template files: 4804

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @agent-native/core
 
+## 0.81.3
+
+### Patch Changes
+
+- 3807702: Fix MCP App embed rendering in ChatGPT/Codex hosts:
+  - Stop the `openai:set_globals` storm that left embeds stuck blanking by
+    guarding the bridge sync on a signature that ignores host `maxHeight`, and
+    by not re-blanking once the app frame has launched.
+  - Size embeds to their content: the embedded app reports its real
+    `scrollHeight` via `agentNative.contentHeight` and the shell sizes the iframe
+    to that (plus chrome) instead of the host max, so plans no longer render far
+    too tall or too short.
+  - Suppress empty embeds: when a tool whose descriptor declares an embed widget
+    produces no embeddable content, the result is marked `isError` so the host
+    shows the text result without an empty widget box. This also keeps read-only
+    and comment-mutation tools from rendering an embed for results that produce
+    no plan surface.
+  - Bump the embed shell resource version so hosts refetch the updated shell.
+
 ## 0.81.2
 
 ### Patch Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.81.2",
+  "version": "0.81.3",
   "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/client/frame.ts

@@ -83,6 +83,60 @@ export function isTrustedFrameMessage(event: MessageEvent): boolean {
   return event.source === window.parent || event.source === window;
 }
 
+// ---------------------------------------------------------------------------
+// Content-height reporting (for MCP App embeds)
+// ---------------------------------------------------------------------------
+//
+// The embed shell renders this app in a cross-origin iframe and can't measure
+// its content, so we post the real content height for the shell to size to.
+// Only shrinks when the document flows to its natural height — embed layouts
+// must not force `100vh`/`h-screen` on the root, or scrollHeight just equals
+// the iframe height.
+let _contentHeightReportingStarted = false;
+let _lastReportedContentHeight = 0;
+
+function measureContentHeight(): number {
+  if (typeof document === "undefined") return 0;
+  const doc = document.documentElement;
+  const body = document.body;
+  return Math.ceil(
+    Math.max(doc ? doc.scrollHeight : 0, body ? body.scrollHeight : 0),
+  );
+}
+
+function reportContentHeight(): void {
+  if (typeof window === "undefined" || window.parent === window) return;
+  const height = measureContentHeight();
+  if (!height || Math.abs(height - _lastReportedContentHeight) < 2) return;
+  _lastReportedContentHeight = height;
+  sendToFrame("agentNative.contentHeight", { height });
+}
+
+function startContentHeightReporting(): void {
+  if (_contentHeightReportingStarted || typeof window === "undefined") return;
+  if (window.parent === window) return;
+  _contentHeightReportingStarted = true;
+  let scheduled = false;
+  const schedule = () => {
+    if (scheduled) return;
+    scheduled = true;
+    window.requestAnimationFrame(() => {
+      scheduled = false;
+      reportContentHeight();
+    });
+  };
+  schedule();
+  for (const delay of [100, 300, 800, 1500]) window.setTimeout(schedule, delay);
+  try {
+    const observer = new ResizeObserver(schedule);
+    if (document.documentElement) observer.observe(document.documentElement);
+    if (document.body) observer.observe(document.body);
+  } catch {
+    window.addEventListener("resize", schedule, { passive: true });
+  }
+  window.addEventListener("load", schedule, { passive: true });
+}
+
 // Listen for frame origin message and cache it.
 // Only accept from the direct parent frame, and only set once.
 if (typeof window !== "undefined") {
@@ -102,6 +156,7 @@ if (typeof window !== "undefined") {
         { type: "agentNative.embeddedAppReady" },
         getFramePostMessageTargetOrigin() ?? window.location.origin,
       );
+      startContentHeightReporting();
     }
   });
 }

package/corpus/core/src/mcp/build-server.ts

@@ -448,6 +448,18 @@ function purgeEmbedStartUrls(value: unknown, depth = 0): unknown {
   return value;
 }
 
+// True when a tool result carries SOME content. An errored/no-plan result comes
+// back empty (`{}` / null) and would render an empty embed box. We gate on "has
+// content", not "has a URL" — valid embeds often carry data but no URL (the
+// shell mints the embed-start itself).
+function mcpResultHasContent(result: unknown): boolean {
+  if (result == null) return false;
+  if (typeof result === "string") return result.trim().length > 0;
+  if (Array.isArray(result)) return result.length > 0;
+  if (typeof result === "object") return Object.keys(result).length > 0;
+  return Boolean(result);
+}
+
 function mcpAppEmbedOpenLinkMeta(
   result: unknown,
   resource: ResolvedMcpAppResource,
@@ -750,7 +762,7 @@ function safeUiSegment(value: string | undefined, fallback: string): string {
 
 // ChatGPT and Claude cache MCP App resource HTML by `ui://` URI. Bump this
 // when the shared shell changes in a way that must invalidate host caches.
-const MCP_APP_RESOURCE_SHELL_VERSION = "shell-v54";
+const MCP_APP_RESOURCE_SHELL_VERSION = "shell-v64";
 
 function legacyDefaultMcpAppUri(config: MCPConfig, actionName: string): string {
   const app = safeUiSegment(config.appId ?? config.name, "agent-native");
@@ -1546,12 +1558,24 @@ export async function createMCPServerForRequest(
         // branch below degrades to the plain deep-link artifacts the tool would
         // otherwise return — no `openai/outputTemplate`, no minted embed-start,
         // no embed structuredContent — so the host shows a link, not an iframe.
-        const mcpAppResource = requestMeta?.inlineMcpApps
+        const mcpAppResourceCandidate = requestMeta?.inlineMcpApps
           ? await resolveMcpAppResourceSafely(config, name, entry, requestMeta)
           : null;
-        const rawResultForClient = mcpAppResource
+        const rawResultForClient = mcpAppResourceCandidate
           ? await withServerMintedMcpAppEmbedStart(rawResult, requestMeta)
           : rawResult;
+        // Only attach the embed widget for a non-error result that has content.
+        const embedHasContent = mcpResultHasContent(rawResultForClient);
+        const mcpAppResource =
+          mcpAppResourceCandidate && !mcpResultIsError && embedHasContent
+            ? mcpAppResourceCandidate
+            : null;
+        // `openai/outputTemplate` is declared at the tool level, so the host
+        // renders a widget for every call regardless of result _meta. The only
+        // per-result signal it honors is `isError` (shows error text, no widget),
+        // so treat an embed tool that produced nothing as an error.
+        const embedProducedNothing =
+          !!mcpAppResourceCandidate && !mcpResultIsError && !embedHasContent;
         const { block, _meta } = buildLinkArtifacts(
           entry,
           (args as Record<string, any>) ?? {},
@@ -1590,7 +1614,9 @@ export async function createMCPServerForRequest(
         if (block) content.push(block);
         return {
           content,
-          ...(mcpResultIsError ? { isError: true } : {}),
+          ...(mcpResultIsError || embedProducedNothing
+            ? { isError: true }
+            : {}),
           ...(structuredContent ? { structuredContent } : {}),
           ...(Object.keys(responseMeta).length > 0
             ? { _meta: responseMeta }

package/corpus/core/src/mcp/embed-app.ts

@@ -138,6 +138,7 @@ export function embedApp(
     let appFrameLoadTimer = null;
     let lastFrameSrc = "";
     let embedSessionRefreshAttempts = 0;
+    let reportedContentHeight = 0;
 
     function esc(value) {
       return String(value ?? "")
@@ -174,10 +175,18 @@ export function embedApp(
     function visibleIntrinsicHeight() {
       const context = hostState().context || {};
       const hostMaxHeight = contextMaxHeight(context);
+      // Size to the app-reported content height (the shell can't measure the
+      // cross-origin frame). Don't clamp to the host maxHeight — on Codex it's a
+      // small inline hint (~360) that clips the plan; applyIntrinsicHeight still
+      // caps at defaultIntrinsicHeight.
+      if (reportedContentHeight > 0) {
+        return Math.floor(reportedContentHeight + chromeHeight);
+      }
       if (hostMaxHeight) return Math.floor(hostMaxHeight);
-      const viewportHeight = finiteNumber(window.visualViewport && window.visualViewport.height) ||
-        finiteNumber(window.innerHeight);
-      return Math.floor(viewportHeight || defaultIntrinsicHeight);
+      // No host maxHeight and no content height yet: use the CONFIGURED height,
+      // never window.innerHeight. Echoing the iframe's own size pins us to the
+      // current frame height (circular) and locks the embed at the cap forever.
+      return Math.floor(defaultIntrinsicHeight);
     }
 
     function applyIntrinsicHeight(nextHeight) {
@@ -1356,7 +1365,8 @@ export function embedApp(
     }
 
     function notifyHostHeight() {
-      const height = applyIntrinsicHeight(visibleIntrinsicHeight());
+      const intrinsic = visibleIntrinsicHeight();
+      const height = applyIntrinsicHeight(intrinsic);
       if (!openAiBridge || typeof openAiBridge.notifyIntrinsicHeight !== "function") {
         if (app && typeof app.sendSizeChanged === "function") {
           try {
@@ -1487,6 +1497,14 @@ export function embedApp(
         notifyOuterMcpAppReady();
         return;
       }
+      if (event.data.type === "agentNative.contentHeight") {
+        const next = finiteNumber(data && data.height);
+        if (next && Math.abs(next - reportedContentHeight) >= 1) {
+          reportedContentHeight = next;
+          notifyHostHeightSoon();
+        }
+        return;
+      }
       if (event.data.type === "agentNative.embedSessionExpired") {
         refreshExpiredEmbedSession();
         return;
@@ -1538,12 +1556,9 @@ export function embedApp(
         const selfNavigate = shouldSelfNavigateToApp();
         if (startedFor === launchUrl) return;
         startedFor = launchUrl;
-        // Only show the loading message when no frame is mounted yet. ChatGPT
-        // fires openai:set_globals (and thus re-launch) constantly; calling
-        // setMessage() unconditionally here wiped the just-mounted iframe out of
-        // the stage on every redundant launch, so the app rendered and was
-        // instantly blanked back to "Loading app" forever. renderFrame()/
-        // transplant replace the stage themselves when they actually (re)mount.
+        // Only show "Loading app" when no frame is mounted. set_globals
+        // re-launches constantly, so calling it every time would wipe the
+        // just-mounted iframe; renderFrame/transplant own the stage on (re)mount.
         if (!appFrame) {
           setMessage("Loading app");
         }
@@ -1671,14 +1686,11 @@ export function embedApp(
       toolResultData = objectValue(data);
       openUrl = openLinkFrom(params, data);
       openStartUrl = embedStartUrlFrom(params, data);
-      // ChatGPT/Codex fire openai:set_globals extremely often, and the listener
-      // that calls this re-syncs on each one. Because this function calls
-      // notifyHostHeight()/sendHostContext() (which the host reflects back as a
-      // fresh set_globals), an unguarded sync becomes an infinite feedback storm
-      // that starves the host until it shows its sad-face placeholder. Only do
-      // the host round-trips + (re)launch when something we care about changed.
-      // Deliberately EXCLUDE bridge.maxHeight: the host mutates it on every
-      // set_globals as it echoes our height back, which would defeat the guard.
+      // set_globals fires constantly, and this sync calls notifyHostHeight/
+      // sendHostContext which the host echoes back as another set_globals — an
+      // infinite storm. Only do the host round-trips + (re)launch when something
+      // we care about changed. Exclude maxHeight: the host mutates it every
+      // event, which would defeat the guard.
       let signature;
       try {
         signature = JSON.stringify([
@@ -1704,6 +1716,9 @@ export function embedApp(
       if (openUrl || openStartUrl) {
         void launchEmbed();
       } else if (!appFrame) {
+        // No open URL yet — a content-less result no longer reaches the host as
+        // a widget (build-server marks it isError), so this is the transient
+        // "waiting for the embed to resolve" state, not an empty box.
         setMessage("Waiting for app result");
       }
       return true;

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

@@ -374,6 +374,8 @@ interface DesignCanvasProps {
   designTitle?: string;
   /** Stable id for comment pins, usually scoped to the active screen. */
   commentContextId?: string;
+  /** Stable id of the screen containing this canvas when rendered in overview. */
+  screenId?: string;
   /** Human-readable label for comment-pin prompts. */
   commentContextLabel?: string;
   /**
@@ -506,6 +508,7 @@ export function DesignCanvas({
   designId,
   designTitle,
   commentContextId,
+  screenId,
   commentContextLabel,
   onPrototypeNavigate,
   motionTracks,
@@ -1098,7 +1101,10 @@ export function DesignCanvas({
   const beginTextEdit = useCallback((nodeId: string) => {
     const iframe = iframeRef.current;
     if (!iframe?.contentWindow || !nodeId) return;
-    iframe.contentWindow.postMessage({ type: "begin-text-edit", nodeId }, "*");
+    iframe.contentWindow.postMessage(
+      { type: "begin-text-edit", nodeId, force: true },
+      "*",
+    );
   }, []);
 
   const sendStyleChange = useCallback(
@@ -1342,6 +1348,7 @@ export function DesignCanvas({
             : "allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"
         }
         data-design-preview-iframe
+        data-screen-iframe-id={screenId ?? undefined}
         data-design-source-type={
           sourceType ??
           (externalPreviewUrl

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

@@ -1000,7 +1000,11 @@ function LayerRow({
   const hideable = node.hideable !== false && Boolean(onToggleHidden);
   const dragEligible = selectable && !node.locked && !node.hidden;
   const draggable = dragEligible && Boolean(onMoveLayer);
-  const canDropInside = layerCanDropInside(node, hasChildren);
+  const canDropInside = layerCanDropInside(
+    node,
+    hasChildren,
+    canAcceptChildren,
+  );
   const activeDrop =
     dropIndicator?.targetId === node.id ? dropIndicator.placement : null;
   // Tracks whether the user pressed Escape to cancel rename so that the
@@ -1868,9 +1872,14 @@ function ElementLayerGlyph({ className }: { className?: string }) {
   );
 }
 
-function layerCanDropInside(node: LayersPanelNode, hasChildren: boolean) {
+function layerCanDropInside(
+  node: LayersPanelNode,
+  hasChildren: boolean,
+  canAcceptChildren: boolean,
+) {
   return (
     hasChildren ||
+    canAcceptChildren ||
     Boolean(node.layout?.isFlexContainer || node.layout?.isGridContainer) ||
     node.type === "file" ||
     node.type === "screen" ||

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

@@ -3365,15 +3365,26 @@ export function MultiScreenCanvas({
     [flushPendingWheelGesture],
   );
 
-  const handleWheelEvent = useCallback(
-    (event: WheelEvent) => {
+  const enqueueWheelGestureFromClient = useCallback(
+    (args: {
+      deltaX: number;
+      deltaY: number;
+      deltaMode: number;
+      clientX: number;
+      clientY: number;
+      ctrlKey: boolean;
+      metaKey: boolean;
+      shiftKey: boolean;
+    }) => {
       const rect = surfaceRef.current?.getBoundingClientRect();
       if (!rect) return;
-      event.preventDefault();
-      event.stopPropagation();
-      const delta = getWheelDelta(event);
+      const delta = getWheelDeltaFromValues(
+        args.deltaX,
+        args.deltaY,
+        args.deltaMode,
+      );
 
-      if (event.ctrlKey || event.metaKey) {
+      if (args.ctrlKey || args.metaKey) {
         const zoomDeltaY = clamp(
           delta.y,
           -MAX_WHEEL_ZOOM_DELTA,
@@ -3382,20 +3393,23 @@ export function MultiScreenCanvas({
         enqueueWheelGesture({
           mode: "zoom",
           deltaY: zoomDeltaY,
-          cursor: { x: event.clientX - rect.left, y: event.clientY - rect.top },
-          clientX: event.clientX,
-          clientY: event.clientY,
+          cursor: {
+            x: args.clientX - rect.left,
+            y: args.clientY - rect.top,
+          },
+          clientX: args.clientX,
+          clientY: args.clientY,
         });
         return;
       }
 
       const deltaX = clamp(
-        event.shiftKey && delta.x === 0 ? delta.y : delta.x,
+        args.shiftKey && delta.x === 0 ? delta.y : delta.x,
         -MAX_WHEEL_PAN_DELTA,
         MAX_WHEEL_PAN_DELTA,
       );
       const deltaY = clamp(
-        event.shiftKey && delta.x === 0 ? 0 : delta.y,
+        args.shiftKey && delta.x === 0 ? 0 : delta.y,
         -MAX_WHEEL_PAN_DELTA,
         MAX_WHEEL_PAN_DELTA,
       );
@@ -3404,6 +3418,24 @@ export function MultiScreenCanvas({
     [enqueueWheelGesture],
   );
 
+  const handleWheelEvent = useCallback(
+    (event: WheelEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      enqueueWheelGestureFromClient({
+        deltaX: event.deltaX,
+        deltaY: event.deltaY,
+        deltaMode: event.deltaMode,
+        clientX: event.clientX,
+        clientY: event.clientY,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        shiftKey: event.shiftKey,
+      });
+    },
+    [enqueueWheelGestureFromClient],
+  );
+
   useEffect(() => {
     const surface = surfaceRef.current;
     if (!surface) return;
@@ -3418,6 +3450,44 @@ export function MultiScreenCanvas({
     };
   }, [handleWheelEvent]);
 
+  useEffect(() => {
+    const handleEmbeddedWheelMessage = (event: MessageEvent) => {
+      if (!event.data || event.data.type !== "embedded-canvas-wheel") return;
+      const surface = surfaceRef.current;
+      if (!surface) return;
+      const sourceIframe = Array.from(
+        surface.querySelectorAll<HTMLIFrameElement>(
+          "iframe[data-design-preview-iframe]",
+        ),
+      ).find((iframe) => iframe.contentWindow === event.source);
+      if (!sourceIframe) return;
+
+      const rect = sourceIframe.getBoundingClientRect();
+      const scaleX =
+        sourceIframe.clientWidth > 0
+          ? rect.width / sourceIframe.clientWidth
+          : 1;
+      const scaleY =
+        sourceIframe.clientHeight > 0
+          ? rect.height / sourceIframe.clientHeight
+          : 1;
+      enqueueWheelGestureFromClient({
+        deltaX: Number(event.data.deltaX) || 0,
+        deltaY: Number(event.data.deltaY) || 0,
+        deltaMode: Number(event.data.deltaMode) || WheelEvent.DOM_DELTA_PIXEL,
+        clientX: rect.left + (Number(event.data.clientX) || 0) * scaleX,
+        clientY: rect.top + (Number(event.data.clientY) || 0) * scaleY,
+        ctrlKey: Boolean(event.data.ctrlKey),
+        metaKey: Boolean(event.data.metaKey),
+        shiftKey: Boolean(event.data.shiftKey),
+      });
+    };
+
+    window.addEventListener("message", handleEmbeddedWheelMessage);
+    return () =>
+      window.removeEventListener("message", handleEmbeddedWheelMessage);
+  }, [enqueueWheelGestureFromClient]);
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (activePenPathRef.current) return;
@@ -6060,12 +6130,15 @@ function getSelectableBounds(geometry: FrameGeometry): BoundsRect {
   };
 }
 
-function getWheelDelta(event: WheelEvent) {
-  const multiplier =
-    event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 800 : 1;
+function getWheelDeltaFromValues(
+  deltaX: number,
+  deltaY: number,
+  deltaMode: number,
+) {
+  const multiplier = deltaMode === 1 ? 16 : deltaMode === 2 ? 800 : 1;
   return {
-    x: event.deltaX * multiplier,
-    y: event.deltaY * multiplier,
+    x: deltaX * multiplier,
+    y: deltaY * multiplier,
   };
 }
 

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

@@ -3468,17 +3468,20 @@ declare var __EDITOR_CHROME_SCALE_Y__: string;
     }
   }
 
-  function beginTextEditingFromEvent(e) {
+  function beginTextEditingFromEvent(e, forceTextEditing) {
     if (activeTextEditEl && e.target && activeTextEditEl.contains(e.target))
       return;
-    if (!textEditingEnabled) {
+    if (!textEditingEnabled && !forceTextEditing) {
       stopNativeInteraction(e);
       return;
     }
     stopNativeInteraction(e);
-    var target = findTextEditTarget(
-      elementFromEditorPoint(e.clientX, e.clientY),
-    );
+    var eventTarget =
+      e && e.target && e.target.nodeType === 1 ? e.target : null;
+    var target =
+      findTextEditTarget(elementFromEditorPoint(e.clientX, e.clientY)) ||
+      findTextEditTarget(eventTarget) ||
+      eventTarget;
     if (!target || target.nodeType !== 1) return;
     // Anchor the selection identity to the nearest source-backed element. Text
     // editing still operates on the actual target text node, but a later
@@ -3725,7 +3728,8 @@ declare var __EDITOR_CHROME_SCALE_Y__: string;
     // text-element creation so the user can type right away and the autosize
     // CSS (width:max-content or similar) takes effect from the first keystroke.
     if (e.data.type === "begin-text-edit") {
-      if (readOnly || !textEditingEnabled) return;
+      var forceBeginTextEdit = e.data.force === true;
+      if ((readOnly || !textEditingEnabled) && !forceBeginTextEdit) return;
       var nodeId: string =
         typeof e.data.nodeId === "string" ? e.data.nodeId : "";
       if (!nodeId) return;
@@ -3749,14 +3753,17 @@ declare var __EDITOR_CHROME_SCALE_Y__: string;
       var bteCenterY = bteRect.top + bteRect.height / 2;
       // Delegate to the canonical path so all state, events, and postMessages
       // stay consistent with a normal double-click text edit.
-      beginTextEditingFromEvent({
-        clientX: bteCenterX,
-        clientY: bteCenterY,
-        target: textTarget,
-        preventDefault: function () {},
-        stopPropagation: function () {},
-        stopImmediatePropagation: function () {},
-      } as unknown as MouseEvent);
+      beginTextEditingFromEvent(
+        {
+          clientX: bteCenterX,
+          clientY: bteCenterY,
+          target: textTarget,
+          preventDefault: function () {},
+          stopPropagation: function () {},
+          stopImmediatePropagation: function () {},
+        } as unknown as MouseEvent,
+        forceBeginTextEdit,
+      );
       return;
     }
     if (e.data.type === "set-editor-chrome-scale") {