@agent-native/core 0.69.0 → 0.70.1

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

@@ -67,6 +67,8 @@ export function embedApp(
     .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.primary { min-height: 32px; padding: 0 14px; background: CanvasText; color: Canvas; border-color: CanvasText; }
+    button.primary:hover:not(:disabled) { background: color-mix(in srgb, CanvasText 86%, Canvas); }
     button:disabled { opacity: .55; cursor: default; }
     .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; }
@@ -455,6 +457,49 @@ export function embedApp(
       };
     }
 
+    function externalOpenUrlForAppUrl(appUrl) {
+      if (openUrl) return openUrl;
+      try {
+        const url = new URL(appUrl.href);
+        url.searchParams.delete("embedded");
+        url.searchParams.delete("__an_embed_token");
+        url.searchParams.delete(chatBridgeParam);
+        return url.toString();
+      } catch (_err) {
+        return "";
+      }
+    }
+
+    function installExternalOpenControl(appUrl) {
+      const href = externalOpenUrlForAppUrl(appUrl);
+      if (!href || !document.body || document.getElementById("agent-native-external-open-control")) {
+        return;
+      }
+      const host = document.createElement("div");
+      host.id = "agent-native-external-open-control";
+      host.style.position = "fixed";
+      host.style.top = "10px";
+      host.style.right = "10px";
+      host.style.zIndex = "2147483647";
+      host.style.pointerEvents = "auto";
+      const root = host.attachShadow ? host.attachShadow({ mode: "open" }) : host;
+      root.innerHTML =
+        '<style>' +
+          ':host{all:initial;}' +
+          'button{box-sizing:border-box;min-height:30px;border:1px solid color-mix(in srgb, CanvasText 18%, Canvas);border-radius:7px;background:Canvas;color:CanvasText;box-shadow:0 6px 22px color-mix(in srgb, CanvasText 14%, transparent);cursor:pointer;font:700 12px ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:0 10px;white-space:nowrap;}' +
+          'button:hover{background:color-mix(in srgb, CanvasText 6%, Canvas);}' +
+        '</style>' +
+        '<button type="button">Open in new tab</button>';
+      const button = root.querySelector("button");
+      if (button) {
+        button.addEventListener("click", (event) => {
+          event.preventDefault();
+          void openHostLink({ url: href });
+        });
+      }
+      document.body.appendChild(host);
+    }
+
     function installReactRefreshPreambleFallback() {
       window.__vite_plugin_react_preamble_installed__ = true;
       if (typeof window.$RefreshReg$ !== "function") {
@@ -795,6 +840,7 @@ export function embedApp(
       base.href = config.baseHref;
       document.head.prepend(base);
       importChildren(parsed.body, document.body);
+      installExternalOpenControl(appUrl);
       for (const script of scripts) {
         if (isRunnableClassicScript(script)) runClassicScript(script);
       }
@@ -851,9 +897,21 @@ export function embedApp(
       });
       if (!response.ok) {
         if (response.status === 401 && isEmbedStartUrl(src)) {
+          reportEmbedError(
+            "transplant-auth",
+            "Embedded app session expired (HTTP 401).",
+            "Opaque-origin sandbox could not authenticate the embed.",
+            401
+          );
           refreshExpiredEmbedSession();
           return;
         }
+        reportEmbedError(
+          "transplant-http",
+          "Embedded app returned HTTP " + response.status + ".",
+          undefined,
+          response.status
+        );
         throw new Error("Embedded app returned HTTP " + response.status + ".");
       }
       const html = await response.text();
@@ -954,6 +1012,52 @@ export function embedApp(
       }, frameReadyTimeoutMs);
     }
 
+    // Best-effort telemetry sink so inline-embed failures are visible in
+    // Sentry (handshake timeout, transplant fetch status/CORS, auth, CSP).
+    // The shell is a sandboxed opaque-origin iframe, so it POSTs to the app
+    // origin's CORS-open /_agent-native/mcp/embed-error route, derived from the
+    // known app URLs. Deduped per stage+message so a retry loop can't spam.
+    const reportedEmbedErrorKeys = new Set();
+    let embedErrorReportCount = 0;
+    function embedReportOrigin() {
+      for (const value of [openStartUrl, openUrl, lastFrameSrc]) {
+        if (typeof value === "string" && value) {
+          try { return new URL(value, window.location.href).origin; } catch {}
+        }
+      }
+      return "";
+    }
+    function reportEmbedError(stage, message, detail, status) {
+      try {
+        const key = String(stage) + "|" + String(message || "");
+        if (reportedEmbedErrorKeys.has(key) || embedErrorReportCount >= 8) return;
+        reportedEmbedErrorKeys.add(key);
+        embedErrorReportCount += 1;
+        const origin = embedReportOrigin();
+        if (!origin) return;
+        let renderMode = "";
+        try { renderMode = renderModeSource().mode || ""; } catch {}
+        const body = JSON.stringify({
+          stage: String(stage || ""),
+          message: String(message || "").slice(0, 500),
+          detail: detail ? String(detail).slice(0, 1200) : undefined,
+          url: openStartUrl || openUrl || lastFrameSrc || "",
+          status: typeof status === "number" ? status : undefined,
+          host: window.location.hostname || "",
+          renderMode: renderMode,
+          bridge: openAiBridge ? "openai" : app ? "native" : "none",
+          userAgent: navigator.userAgent || ""
+        });
+        fetch(origin + "/_agent-native/mcp/embed-error", {
+          method: "POST",
+          credentials: "omit",
+          keepalive: true,
+          headers: { "Content-Type": "application/json" },
+          body: body
+        }).catch(() => {});
+      } catch {}
+    }
+
     function renderFrameFallback() {
       clearFrameReadyTimer();
       clearFrameLoadTimer();
@@ -961,12 +1065,13 @@ export function embedApp(
       const fallbackCopy = openUrl
         ? "This chat host did not allow the embedded app frame to load inline. You can still open the same app route through the host or use the URL below."
         : "This chat host did not allow the embedded app frame to load inline.";
+      reportEmbedError("frame-fallback", fallbackCopy);
       stage.innerHTML =
         '<div class="fallback">' +
           '<div class="fallback-title">Open this app in its own tab</div>' +
           '<div class="fallback-copy">' + esc(fallbackCopy) + '</div>' +
           '<div class="fallback-actions">' +
-            '<button type="button" data-fallback-open>Open app</button>' +
+            '<button type="button" class="primary" data-fallback-open>Open in new tab</button>' +
             '<button type="button" data-fallback-retry>Try inline again</button>' +
           '</div>' +
           (openUrl ? '<a class="fallback-url" href="' + esc(openUrl) + '" target="_blank" rel="noreferrer">' + esc(openUrl) + '</a>' : '') +
@@ -987,6 +1092,43 @@ export function embedApp(
       }
     }
 
+    function renderAppLaunchError(message) {
+      clearFrameReadyTimer();
+      clearFrameLoadTimer();
+      appFrame = null;
+      const fallbackCopy = openUrl
+        ? "The inline MCP app could not load in this chat host. You can open the same app route in a new tab or retry the inline load."
+        : "The inline MCP app could not load in this chat host.";
+      reportEmbedError("app-launch-error", message || fallbackCopy, message);
+      const copyHtml = message
+        ? '<div>' + esc(message) + '</div><div>' + esc(fallbackCopy) + '</div>'
+        : esc(fallbackCopy);
+      stage.innerHTML =
+        '<div class="fallback">' +
+          '<div class="fallback-title">App did not load</div>' +
+          '<div class="fallback-copy">' + copyHtml + '</div>' +
+          '<div class="fallback-actions">' +
+            '<button type="button" class="primary" data-fallback-open>Open in new tab</button>' +
+            '<button type="button" data-fallback-retry>Retry</button>' +
+          '</div>' +
+          (openUrl ? '<a class="fallback-url" href="' + esc(openUrl) + '" target="_blank" rel="noreferrer">' + esc(openUrl) + '</a>' : '') +
+        '</div>';
+      const fallbackOpen = stage.querySelector("[data-fallback-open]");
+      const fallbackRetry = stage.querySelector("[data-fallback-retry]");
+      if (fallbackOpen) {
+        fallbackOpen.disabled = !openUrl;
+        fallbackOpen.onclick = () => {
+          if (openUrl) void openHostLink({ url: openUrl });
+        };
+      }
+      if (fallbackRetry) {
+        fallbackRetry.onclick = () => {
+          startedFor = "";
+          void launchEmbed();
+        };
+      }
+    }
+
     async function openFallbackExternal() {
       if (!openUrl) return;
       let url = withChatBridgeParam(openUrl);
@@ -1051,12 +1193,29 @@ export function embedApp(
       return true;
     }
 
+    // We have connected to a standards-track MCP Apps host (Codex, Cursor,
+    // Claude over the SDK, our own renderer, …) through the postMessage
+    // \`ui/*\` bridge rather than ChatGPT's \`window.openai\` global. These hosts
+    // render the resource in a strict sandboxed iframe (typically
+    // \`sandbox="allow-scripts"\`, opaque origin). Self-navigating that iframe to
+    // the real app origin tears down the host bridge and loses the opaque-origin
+    // auth context, which shows up as a permanent / flashing loading state.
+    // Transplanting the app document into the shell keeps the bridge alive and
+    // works under the opaque origin via embed-token auth, exactly like Claude.
+    function isNativeMcpAppsBridgeHost() {
+      return !!app && !openAiBridge;
+    }
+
     function shouldTransplantAppDocument() {
       const render = renderModeSource();
       const mode = render.mode;
+      if (mode === "iframe" || mode === "nested" || render.frame === "iframe" || render.nested) {
+        return false;
+      }
       return (
         isClaudeMcpContentHost() ||
         isChatGptSandboxHost() ||
+        isNativeMcpAppsBridgeHost() ||
         mode === "transplant" ||
         render.frame === "transplant"
       );
@@ -1074,7 +1233,7 @@ export function embedApp(
       try {
         const host = window.location.hostname || "";
         const appParam = new URL(window.location.href).searchParams.get("app");
-        return /^[^.]+\\.web-sandbox\\.oaiusercontent\\.com$/i.test(host) || appParam === "chatgpt";
+        return /^(?:[^.]+\\.)?web-sandbox\\.oaiusercontent\\.com$/i.test(host) || appParam === "chatgpt";
       } catch {
         return false;
       }
@@ -1297,7 +1456,7 @@ export function embedApp(
     async function launchEmbed() {
       const launchUrl = openStartUrl || openUrl;
       if (!launchUrl) {
-        setMessage("Open link was not available.");
+        renderAppLaunchError("Open link was not available.");
         return;
       }
       if (!wantsEmbed()) {
@@ -1328,7 +1487,7 @@ export function embedApp(
         const data = parseToolResult(result);
         if (typeof data.startUrl !== "string" || !data.startUrl) {
           startedFor = "";
-          setMessage(data.error || "This app can be opened, but not embedded from this MCP server.");
+          renderAppLaunchError(data.error || "This app can be opened, but not embedded from this MCP server.");
           return;
         }
         const startUrl = withChatBridgeParam(data.startUrl);
@@ -1345,7 +1504,7 @@ export function embedApp(
         }
       } catch (err) {
         startedFor = "";
-        setMessage(err && err.message ? err.message : "Could not launch embedded app.");
+        renderAppLaunchError(err && err.message ? err.message : "Could not launch embedded app.");
       }
     }
 
@@ -1395,6 +1554,9 @@ export function embedApp(
       try {
         if (new URLSearchParams(window.location.search).get("app") === "chatgpt") return true;
       } catch (_err) {}
+      try {
+        if (/^(?:[^.]+\\.)?web-sandbox\\.oaiusercontent\\.com$/i.test(window.location.hostname || "")) return true;
+      } catch (_err) {}
       try {
         return /chatgpt/i.test(String(navigator.userAgent || ""));
       } catch (_err) {
@@ -1578,8 +1740,13 @@ export function embedApp(
         async openLink(params) {
           const url = typeof (params && params.url) === "string" ? params.url : "";
           if (!url) return { isError: true };
-          window.open(url, "_blank", "noopener,noreferrer");
-          return { ok: true };
+          try {
+            return await rpcRequest("ui/open-link", { url }, wrapperRequestTimeoutMs);
+          } catch (err) {
+            console.warn("[agent-native] MCP host open-link request failed", err);
+          }
+          const opened = window.open(url, "_blank", "noopener,noreferrer");
+          return opened ? { ok: true } : { isError: true };
         },
         async requestDisplayMode(params) {
           return await rpcRequest("ui/request-display-mode", objectValue(params));
@@ -1615,6 +1782,7 @@ export function embedApp(
           return;
         }
         if (
+          message.method === "ui/notifications/host-context-changed" ||
           message.method === "ui/notifications/host-context" ||
           message.method === "ui/notifications/context"
         ) {
@@ -1695,8 +1863,30 @@ export function embedApp(
       }
     } catch (err) {
       console.error("[agent-native] MCP app shell failed", err);
+      reportEmbedError(
+        "bridge-init",
+        err && err.message ? err.message : "Could not initialize app.",
+        err && err.stack ? String(err.stack) : undefined
+      );
       setMessage(err && err.message ? err.message : "Could not initialize app.");
     }
+
+    window.addEventListener("error", (event) => {
+      const err = event && event.error;
+      reportEmbedError(
+        "window-error",
+        (err && err.message) || (event && event.message) || "Uncaught error in MCP app embed.",
+        err && err.stack ? String(err.stack) : undefined
+      );
+    });
+    window.addEventListener("unhandledrejection", (event) => {
+      const reason = event && event.reason;
+      reportEmbedError(
+        "unhandled-rejection",
+        (reason && reason.message) || String(reason || "Unhandled promise rejection in MCP app embed."),
+        reason && reason.stack ? String(reason.stack) : undefined
+      );
+    });
     })();
   </script>
 </body>

package/corpus/core/src/mcp/oauth-route.ts

@@ -423,15 +423,23 @@ function redirectWithOAuthError(params: {
   return redirect(url.toString());
 }
 
-function redirectWithCode(params: {
+function buildCodeRedirectUrl(params: {
   redirectUri: string;
   code: string;
   state?: string;
-}): Response {
+}): string {
   const url = new URL(params.redirectUri);
   url.searchParams.set("code", params.code);
   if (params.state) url.searchParams.set("state", params.state);
-  return redirect(url.toString());
+  return url.toString();
+}
+
+function redirectWithCode(params: {
+  redirectUri: string;
+  code: string;
+  state?: string;
+}): Response {
+  return redirect(buildCodeRedirectUrl(params));
 }
 
 function codeChallengeForVerifier(verifier: string): string {
@@ -530,6 +538,19 @@ function isValidCodeVerifier(value: unknown): value is string {
   );
 }
 
+// Shared styling for the browser-facing OAuth pages (consent + post-authorize
+// confirmation) so they read as one coherent dark surface.
+const OAUTH_PAGE_BASE_STYLE = `
+  :root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #09090b; color: #f4f4f5; }
+  body { min-height: 100vh; display: grid; place-items: center; margin: 0; padding: 24px; }
+  main { width: min(520px, 100%); border: 1px solid #27272a; border-radius: 8px; background: #111113; padding: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
+  h1 { font-size: 22px; line-height: 1.2; margin: 0 0 10px; }
+  p { color: #a1a1aa; line-height: 1.5; margin: 0 0 18px; }
+  .actions { display: flex; gap: 10px; justify-content: flex-end; }
+  button, .btn { border: 0; border-radius: 6px; padding: 10px 14px; font: inherit; font-weight: 650; cursor: pointer; text-decoration: none; display: inline-block; }
+  .primary { background: #f4f4f5; color: #09090b; }
+  .secondary { background: #27272a; color: #f4f4f5; }`;
+
 function renderConsentPage(params: {
   appName: string;
   email: string;
@@ -552,18 +573,9 @@ function renderConsentPage(params: {
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Authorize ${escapeHtml(params.appName)}</title>
-<style>
-  :root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #09090b; color: #f4f4f5; }
-  body { min-height: 100vh; display: grid; place-items: center; margin: 0; padding: 24px; }
-  main { width: min(520px, 100%); border: 1px solid #27272a; border-radius: 8px; background: #111113; padding: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
-  h1 { font-size: 22px; line-height: 1.2; margin: 0 0 10px; }
-  p { color: #a1a1aa; line-height: 1.5; margin: 0 0 18px; }
+<style>${OAUTH_PAGE_BASE_STYLE}
   ul { margin: 0 0 22px; padding-left: 22px; color: #d4d4d8; }
   code { color: #67e8f9; }
-  .actions { display: flex; gap: 10px; justify-content: flex-end; }
-  button { border: 0; border-radius: 6px; padding: 10px 14px; font-weight: 650; cursor: pointer; }
-  .primary { background: #f4f4f5; color: #09090b; }
-  .secondary { background: #27272a; color: #f4f4f5; }
 </style>
 </head>
 <body>
@@ -583,6 +595,61 @@ function renderConsentPage(params: {
 </html>`;
 }
 
+// Shown after the user approves a native/desktop client (cursor://, vscode://, …)
+// whose redirect is a private-use scheme. A bare 302 to a custom scheme hands the
+// code to the OS app but leaves the browser tab dangling on a blank/error page, so
+// we render a friendly confirmation that also re-fires the deep link (so the client
+// still receives the code) and tells the user they can return to their agent.
+function renderAuthorizedPage(params: {
+  appName: string;
+  clientName: string | null;
+  redirectUrl: string;
+}): string {
+  const friendlyClient = params.clientName?.trim() || null;
+  const returnTarget = friendlyClient ?? "your agent";
+  const openLabel = friendlyClient
+    ? `Open ${escapeHtml(friendlyClient)}`
+    : "Return to your agent";
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Authorized</title>
+<style>${OAUTH_PAGE_BASE_STYLE}
+  main.success { text-align: center; }
+  .check { width: 56px; height: 56px; margin: 4px auto 16px; display: grid; place-items: center; border-radius: 999px; background: rgba(34,197,94,.12); }
+  .check svg { width: 30px; height: 30px; }
+  .success .actions { justify-content: center; margin-top: 4px; }
+  .hint { color: #71717a; font-size: 13px; margin: 18px 0 0; }
+</style>
+</head>
+<body>
+<main class="success">
+  <div class="check">
+    <svg viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M20 6 9 17l-5-5"></path>
+    </svg>
+  </div>
+  <h1>You're all set</h1>
+  <p>${escapeHtml(params.appName)} has authorized ${escapeHtml(returnTarget)}. You can return to ${escapeHtml(returnTarget)} to continue.</p>
+  <div class="actions">
+    <a class="btn primary" id="return-link" href="${escapeHtml(params.redirectUrl)}">${openLabel}</a>
+  </div>
+  <p class="hint">You can close this tab.</p>
+</main>
+<script>
+  (function () {
+    var link = document.getElementById("return-link");
+    if (link && link.href) {
+      try { window.location.href = link.href; } catch (e) {}
+    }
+  })();
+</script>
+</body>
+</html>`;
+}
+
 async function resolveOrgDomain(
   orgId: string | undefined,
 ): Promise<string | undefined> {
@@ -744,6 +811,35 @@ async function handleAuthorize(
     scope,
     resource,
   });
+
+  // Native/desktop clients register a private-use scheme (cursor://, vscode://, …).
+  // A 302 to that scheme opens the app but leaves the browser tab dangling, so we
+  // render a friendly confirmation page that re-fires the deep link instead. For
+  // https/loopback callbacks the client (or its local server) renders its own page,
+  // so keep the standard redirect there.
+  let isDeepLinkRedirect = false;
+  try {
+    const protocol = new URL(redirectUri).protocol;
+    isDeepLinkRedirect =
+      protocol !== "http:" &&
+      protocol !== "https:" &&
+      isPrivateUseRedirectScheme(protocol);
+  } catch {
+    isDeepLinkRedirect = false;
+  }
+  if (isDeepLinkRedirect) {
+    return html(
+      renderAuthorizedPage({
+        appName: options.appName || options.appId || "Agent Native",
+        clientName: client.clientName ?? null,
+        redirectUrl: buildCodeRedirectUrl({
+          redirectUri,
+          state,
+          code: code.code,
+        }),
+      }),
+    );
+  }
   return redirectWithCode({ redirectUri, state, code: code.code });
 }