@agent-native/core 0.22.18 → 0.22.20

package/dist/mcp/embed-app.js

@@ -2,8 +2,8 @@ import { MCP_APP_CHAT_BRIDGE_QUERY_PARAM } from "../shared/embed-auth.js";
 const MCP_APP_IMPORT = "https://esm.sh/@modelcontextprotocol/ext-apps@1.7.2/app-with-deps";
 export const MCP_APP_REQUEST_ORIGIN_CSP_SOURCE = "$requestOrigin";
 const MCP_APP_WRAPPER_CHROME_HEIGHT = 44;
-export const DEFAULT_MCP_APP_VIEWPORT_HEIGHT = 720;
-export const DEFAULT_MCP_APP_SHELL_HEIGHT = DEFAULT_MCP_APP_VIEWPORT_HEIGHT + MCP_APP_WRAPPER_CHROME_HEIGHT;
+export const DEFAULT_MCP_APP_SHELL_HEIGHT = 560;
+export const DEFAULT_MCP_APP_VIEWPORT_HEIGHT = DEFAULT_MCP_APP_SHELL_HEIGHT - MCP_APP_WRAPPER_CHROME_HEIGHT;
 function attr(value) {
     return String(value ?? "")
         .replace(/&/g, "&")
@@ -19,6 +19,10 @@ export function embedApp(options = {}) {
     const embedByDefault = options.embedByDefault !== false;
     const height = Math.max(320, Math.min(900, options.height ?? DEFAULT_MCP_APP_SHELL_HEIGHT));
     const viewportHeight = height - MCP_APP_WRAPPER_CHROME_HEIGHT;
+    const frameDomains = [
+        MCP_APP_REQUEST_ORIGIN_CSP_SOURCE,
+        ...(options.frameDomains ?? []),
+    ];
     return {
         title,
         ...(options.description ? { description: options.description } : {}),
@@ -28,19 +32,19 @@ export function embedApp(options = {}) {
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
-    :root { color-scheme: light dark; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: Canvas; color: CanvasText; }
+    :root { color-scheme: light dark; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: Canvas; color: CanvasText; --agent-native-shell-height: ${height}px; --agent-native-viewport-height: ${viewportHeight}px; }
     * { box-sizing: border-box; }
     body { margin: 0; }
-    .shell { display: grid; gap: 8px; min-height: ${height}px; padding: 0; }
+    .shell { display: grid; gap: 8px; min-height: var(--agent-native-shell-height); padding: 0; }
     .bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, CanvasText 12%, Canvas); }
     .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; color: color-mix(in srgb, CanvasText 72%, Canvas); }
     .actions { display: flex; align-items: center; gap: 6px; }
     button { min-height: 28px; border: 1px solid color-mix(in srgb, CanvasText 14%, Canvas); border-radius: 7px; background: Canvas; color: CanvasText; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 0 9px; }
     button:disabled { opacity: .55; cursor: default; }
-    .stage { position: relative; min-height: ${viewportHeight}px; }
-    iframe { display: block; width: 100%; height: ${viewportHeight}px; border: 0; background: Canvas; }
-    .message { display: grid; place-items: center; min-height: ${viewportHeight}px; padding: 18px; color: color-mix(in srgb, CanvasText 62%, Canvas); font-size: 13px; line-height: 1.45; text-align: center; }
-    .fallback { display: grid; align-content: center; justify-items: center; gap: 12px; min-height: ${viewportHeight}px; padding: 24px; background: Canvas; color: CanvasText; text-align: center; }
+    .stage { position: relative; min-height: var(--agent-native-viewport-height); }
+    iframe { display: block; width: 100%; height: var(--agent-native-viewport-height); border: 0; background: Canvas; }
+    .message { display: grid; place-items: center; min-height: var(--agent-native-viewport-height); padding: 18px; color: color-mix(in srgb, CanvasText 62%, Canvas); font-size: 13px; line-height: 1.45; text-align: center; }
+    .fallback { display: grid; align-content: center; justify-items: center; gap: 12px; min-height: var(--agent-native-viewport-height); padding: 24px; background: Canvas; color: CanvasText; text-align: center; }
     .fallback-title { max-width: 440px; font-size: 14px; font-weight: 700; }
     .fallback-copy { max-width: 520px; color: color-mix(in srgb, CanvasText 64%, Canvas); font-size: 13px; line-height: 1.45; }
     .fallback-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
@@ -75,7 +79,8 @@ export function embedApp(options = {}) {
     const startTool = body.dataset.startTool || "create_embed_session";
     const embedByDefault = body.dataset.embedDefault !== "0";
     const chatBridgeParam = ${JSON.stringify(MCP_APP_CHAT_BRIDGE_QUERY_PARAM)};
-    const intrinsicHeight = ${height};
+    const defaultIntrinsicHeight = ${height};
+    const chromeHeight = ${MCP_APP_WRAPPER_CHROME_HEIGHT};
     let app = null;
     let openAiBridge = null;
     let toolInput = {};
@@ -107,6 +112,40 @@ export function embedApp(options = {}) {
         : {};
     }
 
+    function finiteNumber(value) {
+      return typeof value === "number" && Number.isFinite(value) && value > 0
+        ? value
+        : null;
+    }
+
+    function contextMaxHeight(context) {
+      if (!context || typeof context !== "object") return null;
+      return finiteNumber(context.maxHeight) ||
+        finiteNumber(context.containerDimensions && context.containerDimensions.maxHeight);
+    }
+
+    function visibleIntrinsicHeight() {
+      const context = hostState().context || {};
+      const hostMaxHeight = contextMaxHeight(context);
+      if (hostMaxHeight) return Math.floor(hostMaxHeight);
+      const viewportHeight = finiteNumber(window.visualViewport && window.visualViewport.height) ||
+        finiteNumber(window.innerHeight);
+      return Math.floor(viewportHeight || defaultIntrinsicHeight);
+    }
+
+    function applyIntrinsicHeight(nextHeight) {
+      const boundedHeight = Math.min(
+        defaultIntrinsicHeight,
+        Math.floor(nextHeight || defaultIntrinsicHeight)
+      );
+      const height = Math.max(320, boundedHeight);
+      const viewportHeight = Math.max(0, height - chromeHeight);
+      document.documentElement.style.setProperty("--agent-native-shell-height", height + "px");
+      document.documentElement.style.setProperty("--agent-native-viewport-height", viewportHeight + "px");
+      if (appFrame) appFrame.style.height = viewportHeight + "px";
+      return height;
+    }
+
     function parseToolResult(params) {
       if (!params) return {};
       if (params.result && typeof params.result === "object") {
@@ -124,8 +163,9 @@ export function embedApp(options = {}) {
     }
 
     function openLinkFrom(params, data) {
-      const metaUrl = params && params._meta && params._meta["agent-native/openLink"]
-        ? params._meta["agent-native/openLink"].webUrl
+      const openLink = params && params._meta && params._meta["agent-native/openLink"];
+      const metaUrl = openLink && typeof openLink === "object" && typeof openLink.webUrl === "string"
+        ? openLink.webUrl
         : "";
       return metaUrl || data.url || data.deepLink || data.openUrl || "";
     }
@@ -187,6 +227,270 @@ export function embedApp(options = {}) {
       }
     }
 
+    function isEmbedStartUrl(value) {
+      if (typeof value !== "string" || !value) return false;
+      try {
+        const url = new URL(value, window.location.href);
+        return /\\/_agent-native\\/embed\\/start$/.test(url.pathname);
+      } catch {
+        return false;
+      }
+    }
+
+    function localPathFromUrl(url, includeToken) {
+      const next = new URL(url.href);
+      if (!includeToken) next.searchParams.delete("__an_embed_token");
+      return next.pathname + next.search + next.hash;
+    }
+
+    function rewriteRootRelativeHtmlUrls(html, appOrigin) {
+      return String(html).replace(
+        /\\b(src|href|poster|action)\\s*=\\s*(["'])\\/(?!\\/)/gi,
+        (_match, name, quote) => String(name) + "=" + quote + appOrigin + "/"
+      );
+    }
+
+    function removeHtmlCspMeta(html) {
+      return String(html).replace(
+        /<meta\\s+[^>]*http-equiv\\s*=\\s*(["'])?content-security-policy\\1?[^>]*>/gi,
+        ""
+      );
+    }
+
+    function embedConfigForAppUrl(appUrl) {
+      const sanitizedTarget = localPathFromUrl(appUrl, false);
+      return {
+        origin: appUrl.origin,
+        href: appUrl.href,
+        baseHref: appUrl.origin + appUrl.pathname,
+        target: sanitizedTarget,
+        token: appUrl.searchParams.get("__an_embed_token") || "",
+        chatBridgeActive: appUrl.searchParams.get(chatBridgeParam) === "1",
+        chatBridgeParam,
+        embedTokenParam: "__an_embed_token",
+        embedTargetHeader: "x-agent-native-embed-target"
+      };
+    }
+
+    function installExternalEmbedRuntime(config) {
+      window.__AGENT_NATIVE_EXTERNAL_EMBED = config;
+      try {
+        if (config.target) {
+          window.history.replaceState(window.history.state, "", config.target);
+        }
+      } catch (_err) {}
+      try {
+        if (config.token) {
+          sessionStorage.setItem("agent-native:embed-auth-token", config.token);
+        }
+        if (config.chatBridgeActive && config.token) {
+          sessionStorage.setItem("agent-native:mcp-chat-bridge", config.token);
+        }
+      } catch (_err) {}
+      if (window.__agentNativeExternalEmbedRuntimeInstalled) return;
+      window.__agentNativeExternalEmbedRuntimeInstalled = true;
+      function appOrigin() {
+        try {
+          return new URL(config.origin).origin;
+        } catch (_err) {
+          return "";
+        }
+      }
+      function targetPath() {
+        return config.target || location.pathname + location.search;
+      }
+      function rewrittenUrl(value, appendToken) {
+        const origin = appOrigin();
+        if (!origin) return null;
+        let url;
+        try {
+          url = new URL(value, location.href);
+        } catch (_err) {
+          return null;
+        }
+        if (url.origin !== location.origin && url.origin !== origin) return null;
+        if (url.origin !== origin) {
+          const app = new URL(origin);
+          url.protocol = app.protocol;
+          url.host = app.host;
+        }
+        if (appendToken && config.token && url.pathname === "/_agent-native/events") {
+          url.searchParams.set(config.embedTokenParam, config.token);
+        }
+        return url.toString();
+      }
+      function authHeaders(input, init) {
+        const headers = new Headers(
+          init && init.headers ? init.headers : input instanceof Request ? input.headers : undefined
+        );
+        if (config.token && !headers.has("Authorization")) {
+          headers.set("Authorization", "Bearer " + config.token);
+        }
+        if (!headers.has(config.embedTargetHeader)) {
+          headers.set(config.embedTargetHeader, targetPath());
+        }
+        return headers;
+      }
+      if (typeof fetch === "function") {
+        const originalFetch = fetch.bind(window);
+        window.fetch = function(input, init) {
+          const raw = input instanceof Request ? input.url : String(input);
+          const url = rewrittenUrl(raw, false);
+          if (!url) return originalFetch(input, init);
+          const nextInit = Object.assign({}, init || {}, {
+            headers: authHeaders(input, init),
+            credentials: "omit"
+          });
+          if (input instanceof Request) {
+            return originalFetch(new Request(url, input), nextInit);
+          }
+          return originalFetch(url, nextInit);
+        };
+      }
+      if (typeof XMLHttpRequest !== "undefined") {
+        const originalOpen = XMLHttpRequest.prototype.open;
+        const originalSend = XMLHttpRequest.prototype.send;
+        XMLHttpRequest.prototype.open = function(method, url) {
+          const rewritten = rewrittenUrl(url, false);
+          this.__agentNativeExternalEmbed = !!rewritten;
+          return originalOpen.call(
+            this,
+            method,
+            rewritten || url,
+            arguments.length > 2 ? arguments[2] : true,
+            arguments[3],
+            arguments[4]
+          );
+        };
+        XMLHttpRequest.prototype.send = function(body) {
+          if (this.__agentNativeExternalEmbed) {
+            try {
+              if (config.token) this.setRequestHeader("Authorization", "Bearer " + config.token);
+              this.setRequestHeader(config.embedTargetHeader, targetPath());
+            } catch (_err) {}
+          }
+          return originalSend.call(this, body);
+        };
+      }
+      if (typeof EventSource !== "undefined") {
+        const OriginalEventSource = EventSource;
+        window.EventSource = function(url, options) {
+          return new OriginalEventSource(rewrittenUrl(url, true) || url, options);
+        };
+        window.EventSource.prototype = OriginalEventSource.prototype;
+      }
+    }
+
+    function copyDocumentElementAttributes(source) {
+      const target = document.documentElement;
+      for (const attr of Array.from(target.attributes)) {
+        target.removeAttribute(attr.name);
+      }
+      for (const attr of Array.from(source.attributes)) {
+        target.setAttribute(attr.name, attr.value);
+      }
+    }
+
+    function importChildren(source, target) {
+      target.replaceChildren(
+        ...Array.from(source.childNodes).map((node) => document.importNode(node, true))
+      );
+    }
+
+    function isModuleScript(script) {
+      return (script.getAttribute("type") || "").trim().toLowerCase() === "module";
+    }
+
+    function isRunnableClassicScript(script) {
+      const type = (script.getAttribute("type") || "").trim().toLowerCase();
+      return !type || type === "text/javascript" || type === "application/javascript";
+    }
+
+    function runClassicScript(script) {
+      const next = document.createElement("script");
+      for (const attr of Array.from(script.attributes)) {
+        if (attr.name === "type") continue;
+        next.setAttribute(attr.name, attr.value);
+      }
+      if (script.src) {
+        next.src = script.src;
+      } else {
+        next.textContent = script.textContent || "";
+      }
+      document.body.appendChild(next);
+      next.remove();
+    }
+
+    function rootRelativeSpecifiersToAbsolute(code, appOrigin) {
+      return String(code).replace(/(["'])\\/(?!\\/)/g, "$1" + appOrigin + "/");
+    }
+
+    function moduleCodeToClassicAsync(code, appOrigin) {
+      return rootRelativeSpecifiersToAbsolute(code, appOrigin)
+        .replace(
+          /\\bimport\\s+\\*\\s+as\\s+([A-Za-z_$][\\w$]*)\\s+from\\s+(["'][^"']+["'])\\s*;?/g,
+          "const $1 = await import($2);"
+        )
+        .replace(/\\bimport\\s+(["'][^"']+["'])\\s*;?/g, "await import($1);")
+        .replace(/\\bimport\\((["'][^"']+["'])\\)\\s*;?/g, "await import($1);");
+    }
+
+    function runModuleScriptAsClassic(script, appOrigin) {
+      const code = moduleCodeToClassicAsync(script.textContent || "", appOrigin);
+      const runner = document.createElement("script");
+      runner.textContent =
+        "(async()=>{" +
+        code +
+        "})().catch((err)=>{console.error('[agent-native] transplanted app module failed',err);document.body.setAttribute('data-agent-native-hydration-error',String(err&&err.message||err));});";
+      document.body.appendChild(runner);
+      runner.remove();
+    }
+
+    function mountTransplantedHtml(html, appUrl) {
+      const config = embedConfigForAppUrl(appUrl);
+      installExternalEmbedRuntime(config);
+      const parsed = new DOMParser().parseFromString(
+        rewriteRootRelativeHtmlUrls(removeHtmlCspMeta(html), appUrl.origin),
+        "text/html"
+      );
+      const scripts = Array.from(parsed.querySelectorAll("script"));
+      copyDocumentElementAttributes(parsed.documentElement);
+      importChildren(parsed.head, document.head);
+      const base = document.createElement("base");
+      base.href = config.baseHref;
+      document.head.prepend(base);
+      importChildren(parsed.body, document.body);
+      for (const script of scripts) {
+        if (isRunnableClassicScript(script)) runClassicScript(script);
+      }
+      for (const script of scripts) {
+        if (isModuleScript(script)) runModuleScriptAsClassic(script, appUrl.origin);
+      }
+    }
+
+    async function transplantAppDocument(src) {
+      clearFrameReadyTimer();
+      clearFrameLoadTimer();
+      appFrame = null;
+      lastFrameSrc = src;
+      setMessage("Loading app");
+      const response = await fetch(src, {
+        credentials: "omit",
+        redirect: "follow",
+        headers: { Accept: "text/html" }
+      });
+      if (!response.ok) {
+        throw new Error("Embedded app returned HTTP " + response.status + ".");
+      }
+      const html = await response.text();
+      const appUrl = new URL(response.url || src);
+      try {
+        window.history.replaceState(window.history.state, "", localPathFromUrl(appUrl, false));
+      } catch {}
+      mountTransplantedHtml(html, appUrl);
+      notifyHostHeightRepeatedly();
+    }
+
     function wantsEmbed() {
       if (toolInput.embed === false || toolInput.embed === "false") return false;
       if (embedByDefault) return true;
@@ -285,11 +589,10 @@ export function embedApp(options = {}) {
     }
 
     async function openFallbackExternal() {
-      let url = openUrl;
+      let url = withChatBridgeParam(openUrl);
       try {
-        const embedUrl = withChatBridgeParam(openUrl);
         const result = await callEmbedSessionTool({
-          url: embedUrl,
+          url,
           chrome: typeof toolInput.chrome === "string" ? toolInput.chrome : "full"
         });
         const data = parseToolResult(result);
@@ -325,6 +628,53 @@ export function embedApp(options = {}) {
       }, 30000);
     }
 
+    function shouldSelfNavigateToApp() {
+      const mode = typeof toolInput.embedMode === "string"
+        ? toolInput.embedMode
+        : typeof toolInput.renderMode === "string"
+          ? toolInput.renderMode
+          : "";
+      if (mode === "iframe" || mode === "nested") return false;
+      if (toolInput.nested === true || toolInput.frame === "iframe") return false;
+      return true;
+    }
+
+    function isClaudeMcpContentHost() {
+      try {
+        return /(^|\\.)claudemcpcontent\\.com$/i.test(window.location.hostname || "");
+      } catch {
+        return false;
+      }
+    }
+
+    function isChatGptSandboxHost() {
+      try {
+        const host = window.location.hostname || "";
+        const appParam = new URL(window.location.href).searchParams.get("app");
+        return /(^|\\.)oaiusercontent\\.com$/i.test(host) || appParam === "chatgpt";
+      } catch {
+        return false;
+      }
+    }
+
+    function shouldRenderControlledAppFrame() {
+      return !!openAiBridge || isChatGptSandboxHost();
+    }
+
+    function navigateToAppFrame(src) {
+      clearFrameReadyTimer();
+      clearFrameLoadTimer();
+      appFrame = null;
+      lastFrameSrc = src;
+      setMessage("Opening app");
+      try {
+        window.location.replace(src);
+      } catch (err) {
+        console.warn("[agent-native] MCP app self-navigation failed", err);
+        renderFrameFallback();
+      }
+    }
+
     async function updateHostModelContext(data) {
       const params = {};
       if (Array.isArray(data && data.content)) params.content = data.content;
@@ -357,11 +707,19 @@ export function embedApp(options = {}) {
     }
 
     function notifyHostHeight() {
+      const height = applyIntrinsicHeight(visibleIntrinsicHeight());
       if (!openAiBridge || typeof openAiBridge.notifyIntrinsicHeight !== "function") {
+        if (app && typeof app.sendSizeChanged === "function") {
+          try {
+            app.sendSizeChanged({ height });
+          } catch (err) {
+            console.warn("[agent-native] MCP host rejected size update", err);
+          }
+        }
         return;
       }
       try {
-        openAiBridge.notifyIntrinsicHeight({ height: intrinsicHeight });
+        openAiBridge.notifyIntrinsicHeight({ height });
       } catch (err) {
         console.warn("[agent-native] ChatGPT rejected intrinsic height update", err);
       }
@@ -457,6 +815,22 @@ export function embedApp(options = {}) {
       }
     });
 
+    function notifyHostHeightSoon() {
+      requestAnimationFrame(() => notifyHostHeight());
+    }
+
+    function notifyHostHeightRepeatedly() {
+      notifyHostHeight();
+      [0, 250, 1000, 2500].forEach((delay) => {
+        setTimeout(() => notifyHostHeight(), delay);
+      });
+    }
+
+    window.addEventListener("resize", notifyHostHeightSoon, { passive: true });
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", notifyHostHeightSoon, { passive: true });
+    }
+
     async function launchEmbed() {
       if (!openUrl) {
         setMessage("Open link was not available.");
@@ -470,18 +844,43 @@ export function embedApp(options = {}) {
       startedFor = openUrl;
       setMessage("Loading app");
       try {
+        const selfNavigate = shouldSelfNavigateToApp();
         const embedUrl = withChatBridgeParam(openUrl);
+        if (selfNavigate && isEmbedStartUrl(embedUrl)) {
+          if (isClaudeMcpContentHost()) {
+            await transplantAppDocument(embedUrl);
+          } else if (shouldRenderControlledAppFrame()) {
+            renderFrame(embedUrl);
+          } else {
+            navigateToAppFrame(embedUrl);
+          }
+          return;
+        }
+        if (!selfNavigate && isEmbedStartUrl(embedUrl)) {
+          renderFrame(embedUrl);
+          return;
+        }
         const result = await callEmbedSessionTool({
           url: embedUrl,
           chrome: typeof toolInput.chrome === "string" ? toolInput.chrome : "full"
         });
         const data = parseToolResult(result);
-        if (!data.startUrl) {
+        if (typeof data.startUrl !== "string" || !data.startUrl) {
           startedFor = "";
           setMessage(data.error || "This app can be opened, but not embedded from this MCP server.");
           return;
         }
-        renderFrame(data.startUrl);
+        if (selfNavigate) {
+          if (isClaudeMcpContentHost()) {
+            await transplantAppDocument(data.startUrl);
+          } else if (shouldRenderControlledAppFrame()) {
+            renderFrame(data.startUrl);
+          } else {
+            navigateToAppFrame(data.startUrl);
+          }
+        } else {
+          renderFrame(data.startUrl);
+        }
       } catch (err) {
         startedFor = "";
         setMessage(err && err.message ? err.message : "Could not launch embedded app.");
@@ -588,7 +987,11 @@ export function embedApp(options = {}) {
 
     async function startMcpAppsBridge() {
       const { App } = await import("${MCP_APP_IMPORT}");
-      app = new App({ name: "Agent Native Embed", version: "1.0.0" }, {});
+      app = new App(
+        { name: "Agent Native Embed", version: "1.0.0" },
+        {},
+        { autoResize: false }
+      );
       app.ontoolinput = (params) => {
         toolInput = params.arguments || {};
       };
@@ -601,10 +1004,12 @@ export function embedApp(options = {}) {
       };
       app.onhostcontextchanged = () => {
         updateDisplayButton();
+        notifyHostHeight();
         sendHostContext();
       };
       await app.connect();
       updateDisplayButton();
+      notifyHostHeight();
       sendHostContext();
     }
 
@@ -616,16 +1021,14 @@ export function embedApp(options = {}) {
 </body>
 </html>`,
         csp: {
-            connectDomains: ["https://esm.sh"],
+            connectDomains: ["https://esm.sh", MCP_APP_REQUEST_ORIGIN_CSP_SOURCE],
             resourceDomains: [
                 "https://esm.sh",
                 MCP_APP_REQUEST_ORIGIN_CSP_SOURCE,
                 ...(options.frameDomains ?? []),
             ],
-            frameDomains: [
-                MCP_APP_REQUEST_ORIGIN_CSP_SOURCE,
-                ...(options.frameDomains ?? []),
-            ],
+            baseUriDomains: [MCP_APP_REQUEST_ORIGIN_CSP_SOURCE],
+            frameDomains,
         },
         prefersBorder: false,
     };