@mcp-use/client 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/react/index.js

@@ -1473,7 +1473,7 @@ var HttpConnector = class extends BaseConnector {
 };
 
 // src/utils/version.ts
-var VERSION = "2.0.0-beta.0";
+var VERSION = "2.0.0-beta.9";
 function getPackageVersion() {
   return VERSION;
 }
@@ -1849,6 +1849,14 @@ var OAuthSessionStore = class _OAuthSessionStore {
   async getTokenEndpoint() {
     return (await this.discoveryState())?.authorizationServerMetadata?.token_endpoint ?? null;
   }
+  /**
+   * Return the protected-resource URL selected during OAuth discovery.
+   * Consumers can persist it and reuse it for server-side refresh exchanges.
+   */
+  async getResource() {
+    const resource = (await this.discoveryState())?.resourceMetadata?.resource;
+    return typeof resource === "string" ? resource : null;
+  }
 };
 
 // src/auth/browser.ts
@@ -1966,20 +1974,19 @@ var BrowserOAuthClientProvider = class {
    * therefore never alters fetch behavior for other servers, other
    * connections, or the rest of the page.
    *
-   * When this provider is not configured to proxy OAuth requests (no
-   * `oauthProxyUrl`, or `proxyOAuthRequests` disabled), the provided
-   * `baseFetch` is returned as-is (or `undefined` when none is given, letting
-   * the SDK fall back to its default `fetch`).
+   * OAuth metadata is always fetched with `cache: "no-store"`, including in
+   * direct mode. Authorization servers commonly vary CORS headers by Origin;
+   * bypassing the browser HTTP cache prevents a revalidated response cached
+   * for another localhost origin from poisoning discovery. When OAuth proxying
+   * is disabled or no `oauthProxyUrl` is configured, all requests still go
+   * directly to their original URLs.
    *
    * @param baseFetch - The fetch used for non-OAuth requests and for the
    *   underlying proxy calls. Defaults to the global `fetch`.
    */
   getProxyFetch(baseFetch) {
-    if (!this.proxyOAuthRequests || !this.oauthProxyUrl) {
-      return baseFetch;
-    }
     const base = baseFetch ?? globalThis.fetch.bind(globalThis);
-    const oauthProxyUrl = this.oauthProxyUrl;
+    const oauthProxyUrl = this.proxyOAuthRequests && this.oauthProxyUrl ? this.oauthProxyUrl : void 0;
     const discoveredEndpoints = /* @__PURE__ */ new Set();
     let restoredDiscovery = false;
     return async (input, init) => {
@@ -1992,6 +1999,12 @@ var BrowserOAuthClientProvider = class {
         return await base(input, init);
       }
       const isMetadata = pathname.includes("/.well-known/");
+      if (!oauthProxyUrl) {
+        return await base(
+          isMetadata ? url : input,
+          isMetadata ? { ...init, cache: "no-store" } : init
+        );
+      }
       if (!restoredDiscovery) {
         restoredDiscovery = true;
         const metadata = (await this.discoveryState())?.authorizationServerMetadata;
@@ -2026,7 +2039,8 @@ var BrowserOAuthClientProvider = class {
       if (isMetadata) {
         const response2 = await base(proxyEndpoint, {
           ...init,
-          method: "GET"
+          method: "GET",
+          cache: "no-store"
         });
         try {
           const metadata = await response2.clone().json();
@@ -2083,7 +2097,16 @@ var BrowserOAuthClientProvider = class {
   }
   async saveClientInformation(clientInformation, ctx) {
     if (this.staticClientInfo) return;
-    return this.session.saveClientInformation(clientInformation, ctx);
+    const { client_secret: discardedClientSecret, ...publicClientInformation } = clientInformation;
+    if (discardedClientSecret) {
+      console.info(
+        `[${this.storageKeyPrefix}] Discarded client_secret returned for a public browser OAuth client.`
+      );
+    }
+    return this.session.saveClientInformation(
+      publicClientInformation,
+      ctx
+    );
   }
   codeVerifier() {
     return this.session.codeVerifier();
@@ -2113,6 +2136,10 @@ var BrowserOAuthClientProvider = class {
   getTokenEndpoint() {
     return this.session.getTokenEndpoint();
   }
+  /** Return the protected-resource URL selected during OAuth discovery. */
+  getResource() {
+    return this.session.getResource();
+  }
   /**
    * Return the stored public OAuth client ID. Browser providers do not retain
    * client secrets.
@@ -2370,62 +2397,6 @@ async function telFetch(url, init) {
 }
 var POSTHOG_HOST = "https://eu.i.posthog.com";
 var POSTHOG_API_KEY = "phc_lyTtbYwvkdSbrcMQNPiKiiRWrrM1seyKIMjycSvItEI";
-var SCARF_GATEWAY_URL = "https://mcpuse.gateway.scarf.sh/events-ts";
-var SCARF_GATEWAY_BEACON_URL = "https://mcpuse.gateway.scarf.sh/simple/";
-var SCARF_BEACON_MAX_URL = 1800;
-var SCARF_BEACON_TRUNCATED_KEYS = /* @__PURE__ */ new Set(["query", "response", "messages"]);
-function stringifyScarfValue(value) {
-  if (value === null || value === void 0) return "";
-  if (typeof value === "string") return value;
-  if (typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-  try {
-    return JSON.stringify(value);
-  } catch {
-    return String(value);
-  }
-}
-function buildScarfBeaconUrl(properties, baseUrl = SCARF_GATEWAY_BEACON_URL) {
-  const params = new URLSearchParams();
-  for (const [key, value] of Object.entries(properties)) {
-    let serialized = stringifyScarfValue(value);
-    if (SCARF_BEACON_TRUNCATED_KEYS.has(key) && serialized.length > 120) {
-      serialized = `${serialized.slice(0, 117)}...`;
-    }
-    if (serialized !== "") params.set(key, serialized);
-  }
-  let url = `${baseUrl}${baseUrl.includes("?") ? "&" : "?"}${params.toString()}`;
-  if (url.length <= SCARF_BEACON_MAX_URL) return url;
-  const keys = [...params.keys()].sort(
-    (a, b) => (params.get(b)?.length ?? 0) - (params.get(a)?.length ?? 0)
-  );
-  for (const key of keys) {
-    if (url.length <= SCARF_BEACON_MAX_URL) break;
-    if (key === "event" || key === "user_id") continue;
-    params.delete(key);
-    url = `${baseUrl}${baseUrl.includes("?") ? "&" : "?"}${params.toString()}`;
-  }
-  return url.slice(0, SCARF_BEACON_MAX_URL);
-}
-function captureScarfPost(properties, endpoint) {
-  return telFetch(endpoint, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    keepalive: true,
-    body: JSON.stringify(properties)
-  });
-}
-function captureScarfBeacon(properties, endpoint) {
-  try {
-    const url = buildScarfBeaconUrl(properties, endpoint);
-    const img = new Image();
-    img.referrerPolicy = "no-referrer-when-downgrade";
-    img.src = url;
-  } catch {
-  }
-  return Promise.resolve();
-}
 function capturePostHog(params) {
   const host = params.host ?? POSTHOG_HOST;
   const apiKey = params.apiKey ?? POSTHOG_API_KEY;
@@ -2442,13 +2413,6 @@ function capturePostHog(params) {
     })
   });
 }
-function captureScarf(properties, endpoint = SCARF_GATEWAY_URL) {
-  if (typeof window !== "undefined") {
-    const beaconEndpoint = endpoint === SCARF_GATEWAY_URL ? SCARF_GATEWAY_BEACON_URL : endpoint;
-    return captureScarfBeacon(properties, beaconEndpoint);
-  }
-  return captureScarfPost(properties, endpoint);
-}
 
 // src/telemetry/telemetry.ts
 function generateUUID() {
@@ -2459,18 +2423,6 @@ function secureRandomString() {
   globalThis.crypto.getRandomValues(array);
   return Array.from(array, (v) => v.toString(16).padStart(2, "0")).join("");
 }
-function isVersionGreater(a, b) {
-  const parse = (v) => v.split("-")[0].split(".").map((n) => parseInt(n, 10) || 0);
-  const pa = parse(a);
-  const pb = parse(b);
-  const len = Math.max(pa.length, pb.length);
-  for (let i = 0; i < len; i++) {
-    const da = pa[i] ?? 0;
-    const db = pb[i] ?? 0;
-    if (da !== db) return da > db;
-  }
-  return false;
-}
 var USER_ID_STORAGE_KEY = "mcp_use_user_id";
 var PROJECT_API_KEY = "phc_lyTtbYwvkdSbrcMQNPiKiiRWrrM1seyKIMjycSvItEI";
 var HOST = "https://eu.i.posthog.com";
@@ -2499,10 +2451,7 @@ function createLocalStorageBackend() {
         localStorage.setItem(USER_ID_STORAGE_KEY, id);
       } catch {
       }
-    },
-    // Package-download dedup is node/Scarf-oriented; localStorage unused.
-    getDownloadedVersion: () => null,
-    setDownloadedVersion: () => void 0
+    }
   };
 }
 function detectRuntimeEnvironment() {
@@ -2570,17 +2519,13 @@ var Telemetry = class _Telemetry {
   _currUserId = null;
   _telemetryEnabled = false;
   _pending = /* @__PURE__ */ new Set();
-  _scarfEnabled = false;
   _runtimeEnvironment;
   _storageCapability;
   _storage;
-  /** True when node entry installed fs storage (package-download dedup). */
-  _fsBacked;
   _source;
   _productVersion;
   constructor() {
     this._runtimeEnvironment = detectRuntimeEnvironment();
-    this._fsBacked = configuredStorage !== null;
     this._storage = configuredStorage ?? createLocalStorageBackend() ?? null;
     this._storageCapability = this._storage ? "persistent" : "session-only";
     this._source = readSourceHint() || this._runtimeEnvironment;
@@ -2599,14 +2544,6 @@ var Telemetry = class _Telemetry {
         "Anonymized telemetry enabled. Set MCP_USE_ANONYMIZED_TELEMETRY=false to disable."
       );
       this._telemetryEnabled = true;
-      this._scarfEnabled = true;
-      if (this._fsBacked) {
-        setTimeout(() => {
-          this.trackPackageDownload({ triggered_by: "initialization" }).catch(
-            (e) => logger.debug(`Failed to track package download: ${e}`)
-          );
-        }, 0);
-      }
     }
   }
   get runtimeEnvironment() {
@@ -2638,7 +2575,7 @@ var Telemetry = class _Telemetry {
     this._productVersion = version;
   }
   get isEnabled() {
-    return this._telemetryEnabled || this._scarfEnabled;
+    return this._telemetryEnabled;
   }
   get userId() {
     if (this._currUserId) return this._currUserId;
@@ -2661,7 +2598,7 @@ var Telemetry = class _Telemetry {
     return this._currUserId;
   }
   async capture(event) {
-    if (!this._telemetryEnabled && !this._scarfEnabled) return;
+    if (!this._telemetryEnabled) return;
     const currentUserId = this.userId;
     const properties = {
       ...event.properties,
@@ -2670,52 +2607,15 @@ var Telemetry = class _Telemetry {
       source: this._source,
       runtime: this._runtimeEnvironment
     };
-    if (this._telemetryEnabled) {
-      const p = capturePostHog({
-        host: HOST,
-        apiKey: PROJECT_API_KEY,
-        event: event.name,
-        distinctId: currentUserId,
-        properties
-      });
-      this._pending.add(p);
-      void p.finally(() => this._pending.delete(p));
-    }
-    if (this._scarfEnabled) {
-      const p = captureScarf({
-        ...properties,
-        user_id: currentUserId,
-        event: event.name
-      });
-      this._pending.add(p);
-      void p.finally(() => this._pending.delete(p));
-    }
-  }
-  async trackPackageDownload(properties) {
-    if (!this._scarfEnabled || !this._fsBacked || !this._storage) return;
-    const currentVersion = getPackageVersion();
-    const saved = this._storage.getDownloadedVersion();
-    let firstDownload = false;
-    let shouldTrack = false;
-    if (!saved) {
-      shouldTrack = true;
-      firstDownload = true;
-      this._storage.setDownloadedVersion(currentVersion);
-    } else if (isVersionGreater(currentVersion, saved)) {
-      shouldTrack = true;
-      this._storage.setDownloadedVersion(currentVersion);
-    }
-    if (!shouldTrack) return;
-    await captureScarf({
-      ...properties || {},
-      mcp_use_version: currentVersion,
-      user_id: this.userId,
-      event: "package_download",
-      first_download: firstDownload,
-      language: "typescript",
-      source: this._source,
-      runtime: this._runtimeEnvironment
+    const p = capturePostHog({
+      host: HOST,
+      apiKey: PROJECT_API_KEY,
+      event: event.name,
+      distinctId: currentUserId,
+      properties
     });
+    this._pending.add(p);
+    void p.finally(() => this._pending.delete(p));
   }
   async trackAgentExecution(data) {
     if (!this.isEnabled) return;
@@ -4384,6 +4284,7 @@ function useMcp(options) {
     headers: headersOption,
     proxyConfig,
     oauthProxyUrl: oauthProxyUrlOption,
+    connectionMode,
     autoProxyFallback = false,
     logLevel: logLevelOption = "silent",
     autoRetry = false,
@@ -4407,6 +4308,7 @@ function useMcp(options) {
     oauth: oauthOptions
   } = options;
   const transportType = "http";
+  const requestedProxyAddress = proxyConfig?.proxyAddress;
   const oauthClientId = oauthOptions?.clientId?.trim() || void 0;
   const oauthClientMetadataUrl = oauthOptions?.clientMetadataUrl?.trim() || void 0;
   const oauthScope = oauthOptions?.scope?.trim() || void 0;
@@ -4454,6 +4356,9 @@ function useMcp(options) {
   );
   const oauthClientConfig = derivedOAuthClientConfig;
   const autoProxyFallbackConfig = useMemo(() => {
+    if (connectionMode === "direct" || connectionMode === "proxy") {
+      return { enabled: false, proxyAddress: void 0 };
+    }
     if (!autoProxyFallback) {
       return { enabled: false, proxyAddress: void 0 };
     }
@@ -4469,7 +4374,7 @@ function useMcp(options) {
       enabled: autoProxyFallback.enabled !== false && Boolean(proxyAddress),
       proxyAddress
     };
-  }, [autoProxyFallback, proxyConfig]);
+  }, [autoProxyFallback, connectionMode, proxyConfig]);
   const autoReconnectConfig = useMemo(() => {
     if (autoReconnect === false) {
       return {
@@ -4505,20 +4410,33 @@ function useMcp(options) {
   const [effectiveProxyConfig, setEffectiveProxyConfig] = useState(void 0);
   useEffect(() => {
     setEffectiveProxyConfig(void 0);
-  }, [url, proxyConfig]);
+  }, [
+    url,
+    requestedProxyAddress,
+    connectionMode,
+    autoProxyFallbackConfig.proxyAddress
+  ]);
   const activeProxyConfig = useMemo(() => {
-    if (!effectiveProxyConfig?.proxyAddress) {
-      return proxyConfig;
+    const hasCurrentAutoFallback = autoProxyFallbackConfig.enabled && effectiveProxyConfig?.proxyAddress === autoProxyFallbackConfig.proxyAddress;
+    if (hasCurrentAutoFallback && effectiveProxyConfig) {
+      const latestHeaders = proxyConfig?.headers ?? {};
+      return {
+        ...effectiveProxyConfig,
+        headers: {
+          ...latestHeaders,
+          ...effectiveProxyConfig.headers ?? {}
+        }
+      };
     }
-    const latestHeaders = proxyConfig?.headers ?? {};
-    return {
-      ...effectiveProxyConfig,
-      headers: {
-        ...latestHeaders,
-        ...effectiveProxyConfig.headers ?? {}
-      }
-    };
-  }, [effectiveProxyConfig, proxyConfig]);
+    const startsDirect = connectionMode === "auto" || connectionMode === "direct" || connectionMode === void 0 && autoProxyFallbackConfig.enabled;
+    return startsDirect ? void 0 : proxyConfig;
+  }, [
+    effectiveProxyConfig,
+    proxyConfig,
+    connectionMode,
+    autoProxyFallbackConfig.enabled,
+    autoProxyFallbackConfig.proxyAddress
+  ]);
   const gatewayUrl = activeProxyConfig?.proxyAddress;
   const proxyHeaders = activeProxyConfig?.headers ?? {};
   const effectiveOAuthUrl = useMemo(() => {
@@ -4850,8 +4768,9 @@ function useMcp(options) {
           clientInfo: mergedClientInfo,
           // Pass a fetch that scopes OAuth-proxy routing to this server's
           // transport/auth calls. getProxyFetch wraps `customFetch` (e.g. the
-          // OAuth retry fetch for scope step-up) when proxying, or returns it
-          // unchanged otherwise. Never mutates the global fetch.
+          // OAuth retry fetch for scope step-up), bypasses the browser cache
+          // for OAuth metadata, and optionally routes OAuth through the BFF.
+          // It never mutates the global fetch.
           ...(() => {
             const scopedFetch = authProviderRef.current?.getProxyFetch?.(customFetch) ?? customFetch;
             return scopedFetch ? { fetch: scopedFetch } : {};
@@ -5052,12 +4971,18 @@ function useMcp(options) {
           if (tokens?.access_token) {
             const expiresAt = tokens.expires_in ? Date.now() + tokens.expires_in * 1e3 : void 0;
             let tokenEndpoint = null;
+            let resource = null;
             let clientCreds = null;
             try {
               tokenEndpoint = await authProviderRef.current.getTokenEndpoint?.() ?? null;
             } catch {
               tokenEndpoint = null;
             }
+            try {
+              resource = await authProviderRef.current.getResource?.() ?? null;
+            } catch {
+              resource = null;
+            }
             try {
               clientCreds = await authProviderRef.current.getClientCredentials?.() ?? null;
             } catch {
@@ -5074,6 +4999,7 @@ function useMcp(options) {
               refresh_token: tokens.refresh_token,
               scope: tokens.scope,
               ...tokenEndpoint ? { token_endpoint: tokenEndpoint } : {},
+              ...resource ? { resource } : {},
               ...clientCreds?.client_id ? { client_id: clientCreds.client_id } : {},
               ...clientCreds?.client_secret ? { client_secret: clientCreds.client_secret } : {}
             });
@@ -5318,19 +5244,20 @@ function useMcp(options) {
         addLog("info", "Triggering fresh OAuth authorization...");
         const parsedUrl = new URL(url);
         const baseUrl = parsedUrl.origin + parsedUrl.pathname.replace(/\/+$/, "");
-        try {
-          await auth2(freshAuthProvider, {
-            serverUrl: baseUrl,
-            fetchFn: freshAuthProvider.getProxyFetch?.()
-          });
+        const authResult = await auth2(freshAuthProvider, {
+          serverUrl: baseUrl,
+          fetchFn: freshAuthProvider.getProxyFetch?.()
+        });
+        if (authResult === "AUTHORIZED") {
           addLog("info", "OAuth flow completed (tokens obtained)");
-        } catch (err) {
-          addLog(
-            "info",
-            "OAuth flow initiated (popup/redirect):",
-            err instanceof Error ? err.message : "Redirecting..."
-          );
+          connectingRef.current = false;
+          connectRef.current?.();
+          return;
         }
+        if (authResult !== "REDIRECT") {
+          throw new Error(`Unexpected OAuth auth() result: ${authResult}`);
+        }
+        addLog("info", "OAuth authorization redirect initiated");
         const newAuthUrl = freshAuthProvider.getLastAttemptedAuthUrl?.();
         if (newAuthUrl) {
           setAuthUrl(newAuthUrl);
@@ -5396,11 +5323,8 @@ function useMcp(options) {
         }
       } catch (authError) {
         if (!isMountedRef.current) return;
-        setState("pending_auth");
-        addLog(
-          "error",
-          `Manual authentication failed: ${authError instanceof Error ? authError.message : String(authError)}`
-        );
+        const error2 = authError instanceof Error ? authError : new Error(String(authError));
+        failConnection(`Manual authentication failed: ${error2.message}`, error2);
       }
     } else if (currentState === "authenticating") {
       addLog(
@@ -5608,6 +5532,7 @@ function useMcp(options) {
     // Triggers reconnection when proxy fallback changes OAuth URL
     proxyConfig,
     // Triggers reconnection when proxy config (including headers) changes
+    autoProxyFallbackConfig.proxyAddress,
     providedAuthProvider
   ]);
   const retryRef = useRef(retry);
@@ -6881,6 +6806,7 @@ import React2, {
   memo,
   useCallback as useCallback6,
   useEffect as useEffect5,
+  useMemo as useMemo3,
   useRef as useRef4,
   useState as useState4
 } from "react";
@@ -6903,6 +6829,53 @@ function parseCustomProps(customProps) {
   return parsed;
 }
 
+// src/react/view/inject-openai-file-apis.ts
+var OPENAI_FILE_APIS_SCRIPT = `<script>
+(function () {
+  var files = new Map();
+  window.openai = window.openai || {};
+  window.openai.uploadFile = async function (file) {
+    var fileId = crypto.randomUUID();
+    files.set(fileId, file);
+    return { fileId: fileId };
+  };
+  window.openai.getFileDownloadUrl = async function (ref) {
+    var file = files.get(ref.fileId);
+    if (!file) {
+      throw new Error("File not found: " + ref.fileId);
+    }
+    return { downloadUrl: URL.createObjectURL(file) };
+  };
+})();
+</script>`;
+function injectOpenAiFileApis(html) {
+  if (html.includes("<head>")) {
+    return html.replace("<head>", "<head>" + OPENAI_FILE_APIS_SCRIPT);
+  }
+  if (html.includes("<HEAD>")) {
+    return html.replace("<HEAD>", "<HEAD>" + OPENAI_FILE_APIS_SCRIPT);
+  }
+  if (html.includes("<html>")) {
+    return html.replace(
+      "<html>",
+      "<html><head>" + OPENAI_FILE_APIS_SCRIPT + "</head>"
+    );
+  }
+  if (html.includes("<HTML>")) {
+    return html.replace(
+      "<HTML>",
+      "<HTML><head>" + OPENAI_FILE_APIS_SCRIPT + "</head>"
+    );
+  }
+  if (html.includes("<!DOCTYPE") || html.includes("<!doctype")) {
+    return html.replace(
+      /(<!DOCTYPE[^>]*>|<!doctype[^>]*>)/i,
+      "$1<head>" + OPENAI_FILE_APIS_SCRIPT + "</head>"
+    );
+  }
+  return OPENAI_FILE_APIS_SCRIPT + html;
+}
+
 // src/react/view/resolve-view-resource.ts
 function resolveViewResource(options) {
   const { resourceResult, listingResource, cspMode, resourceUri } = options;
@@ -7252,9 +7225,9 @@ function buildSandboxProxyBlobHtml(search) {
 // src/react/view/use-display-mode.ts
 import { useCallback as useCallback5, useEffect as useEffect4 } from "react";
 var SHELL_BASE = "w-full h-full min-h-0 bg-background flex flex-col [&:fullscreen]:h-full [&:fullscreen]:w-full [&:fullscreen]:bg-background";
-var WIDGET_FULLSCREEN_OVERLAY_CLASSES = `fixed inset-0 z-[100] ${SHELL_BASE}`;
+var WIDGET_FULLSCREEN_OVERLAY_CLASSES = `fixed inset-0 z-[200] ${SHELL_BASE}`;
 var WIDGET_PIP_SHELL_CLASSES = [
-  "fixed top-4 left-1/2 -translate-x-1/2 z-[100]",
+  "fixed top-4 left-1/2 -translate-x-1/2 z-[200]",
   "rounded-3xl w-full min-w-[300px] h-[400px]",
   "shadow-2xl border overflow-hidden",
   "bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80",
@@ -7312,7 +7285,8 @@ function useViewDisplayModeControls({
 }
 var VIEW_DIMENSIONS = {
   PIP_MAX_WIDTH: 700,
-  DEFAULT_HEIGHT: 400
+  DEFAULT_HEIGHT: 400,
+  FULLSCREEN_HEADER_HEIGHT: 50
 };
 
 // src/react/view/view-detection.ts
@@ -7339,8 +7313,28 @@ var DEFAULT_HOST_CAPABILITIES = {
   serverTools: {},
   serverResources: {},
   logging: {},
-  updateModelContext: { text: {} }
+  updateModelContext: { text: {} },
+  // ponytail: always advertised; bridge.onmessage no-ops when onMessage unset
+  message: { text: {} }
 };
+function CloseIcon() {
+  return /* @__PURE__ */ React2.createElement(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true
+    },
+    /* @__PURE__ */ React2.createElement("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ React2.createElement("path", { d: "m6 6 12 12" })
+  );
+}
 function waitForSandboxProxyReady(iframe) {
   return new Promise((resolve) => {
     const listener = (event) => {
@@ -7401,6 +7395,10 @@ function ViewRendererBase({
   onResourceResolved,
   wrapTransport,
   toolCallTimeout = DEFAULT_TOOL_CALL_TIMEOUT,
+  mockOpenAiFileApis = false,
+  onInlineHeightChange,
+  fullscreenHeader,
+  renderFullscreenClose,
   className,
   testId = "mcp-app-frame",
   invoking,
@@ -7409,6 +7407,9 @@ function ViewRendererBase({
   const iframeRef = useRef4(null);
   const bridgeRef = useRef4(null);
   const containerRef = useRef4(null);
+  const pendingBlobRevocationsRef = useRef4(
+    /* @__PURE__ */ new Map()
+  );
   const connectionRef = useRef4(
     source.kind === "live" ? source.connection : null
   );
@@ -7422,12 +7423,19 @@ function ViewRendererBase({
   );
   const [internalDisplayMode, setInternalDisplayMode] = useState4("inline");
   const displayMode = displayModeProp ?? internalDisplayMode;
-  const hostContextRef = useRef4(hostContext);
-  hostContextRef.current = hostContext;
+  const effectiveHostContext = useMemo3(() => {
+    if (!hostContext) return hostContext;
+    if (hostContext.displayMode === displayMode) return hostContext;
+    return { ...hostContext, displayMode };
+  }, [hostContext, displayMode]);
+  const hostContextRef = useRef4(effectiveHostContext);
+  hostContextRef.current = effectiveHostContext;
   const onMessageRef = useRef4(onMessage);
   onMessageRef.current = onMessage;
   const toolInputRef = useRef4(toolInput);
   toolInputRef.current = toolInput;
+  const partialToolInputRef = useRef4(partialToolInput);
+  partialToolInputRef.current = partialToolInput;
   const toolOutputRef = useRef4(toolOutput);
   toolOutputRef.current = toolOutput;
   const customPropsRef = useRef4(customProps);
@@ -7446,10 +7454,14 @@ function ViewRendererBase({
   onReadyRef.current = onReady;
   const onLifecycleChangeRef = useRef4(onLifecycleChange);
   onLifecycleChangeRef.current = onLifecycleChange;
+  const onInlineHeightChangeRef = useRef4(onInlineHeightChange);
+  onInlineHeightChangeRef.current = onInlineHeightChange;
   const sandboxUrlRef = useRef4(sandboxUrl);
   sandboxUrlRef.current = sandboxUrl;
   const cspModeRef = useRef4(cspMode);
   cspModeRef.current = cspMode;
+  const mockOpenAiFileApisRef = useRef4(mockOpenAiFileApis);
+  mockOpenAiFileApisRef.current = mockOpenAiFileApis;
   const resolveSandboxUrl = useCallback6((next) => {
     const custom = sandboxUrlRef.current;
     if (custom) {
@@ -7553,10 +7565,18 @@ function ViewRendererBase({
   }, [source.kind, liveResourceUri, preloadedHtml, cspMode, resolveSandboxUrl]);
   useEffect5(() => {
     const url = activeSandboxUrl;
+    if (!url || url.protocol !== "blob:") return;
+    const pending = pendingBlobRevocationsRef.current.get(url.href);
+    if (pending) {
+      clearTimeout(pending);
+      pendingBlobRevocationsRef.current.delete(url.href);
+    }
     return () => {
-      if (url?.protocol === "blob:") {
+      const timer = setTimeout(() => {
         URL.revokeObjectURL(url.href);
-      }
+        pendingBlobRevocationsRef.current.delete(url.href);
+      }, 1e3);
+      pendingBlobRevocationsRef.current.set(url.href, timer);
     };
   }, [activeSandboxUrl]);
   const isBlobSandbox = activeSandboxUrl?.protocol === "blob:";
@@ -7617,7 +7637,14 @@ function ViewRendererBase({
           iframe.setAttribute("allow", allowAttribute);
         }
         const readyPromise = waitForSandboxProxyReady(iframe);
-        iframe.src = activeSandboxUrl.href;
+        if (activeSandboxUrl.protocol === "blob:") {
+          const response = await fetch(activeSandboxUrl.href);
+          const sandboxHtml = await response.text();
+          if (disposed) return;
+          iframe.srcdoc = sandboxHtml;
+        } else {
+          iframe.src = activeSandboxUrl.href;
+        }
         await readyPromise;
         if (disposed) return;
         const capabilities = {
@@ -7703,7 +7730,10 @@ function ViewRendererBase({
           height
         }) => {
           if (displayModeRef.current !== "inline") return;
-          if (height !== void 0) setInlineHeight(height);
+          if (height !== void 0) {
+            setInlineHeight(height);
+            onInlineHeightChangeRef.current?.(height);
+          }
         };
         const initPromise = hookInitialized(bridge);
         let transport = new PostMessageTransport(
@@ -7716,7 +7746,7 @@ function ViewRendererBase({
         await bridge.connect(transport);
         if (disposed) return;
         await bridge.sendSandboxResourceReady({
-          html: resolved.html,
+          html: mockOpenAiFileApisRef.current ? injectOpenAiFileApis(resolved.html) : resolved.html,
           csp: resolved.csp,
           permissions: resolved.permissions
         });
@@ -7725,11 +7755,18 @@ function ViewRendererBase({
         bridgeRef.current = bridge;
         setInitCount((c) => c + 1);
         onLifecycleChangeRef.current?.({ status: "initialized" });
-        const mergedArgs = {
-          ...toolInputRef.current,
-          ...parseCustomProps(customPropsRef.current)
-        };
-        bridge.sendToolInput({ arguments: mergedArgs });
+        const currentPartialToolInput = partialToolInputRef.current;
+        if (currentPartialToolInput) {
+          bridge.sendToolInputPartial({
+            arguments: currentPartialToolInput
+          });
+        } else {
+          const mergedArgs = {
+            ...toolInputRef.current,
+            ...parseCustomProps(customPropsRef.current)
+          };
+          bridge.sendToolInput({ arguments: mergedArgs });
+        }
         const toolResultPayload = buildToolResultPayload(
           toolOutputRef.current,
           customPropsRef.current
@@ -7778,13 +7815,14 @@ function ViewRendererBase({
     cspMode,
     viewId,
     wrapTransport,
-    toolCallTimeout
+    toolCallTimeout,
+    mockOpenAiFileApis
   ]);
   useEffect5(() => {
     const bridge = bridgeRef.current;
-    if (!bridge || initCount === 0 || !hostContext) return;
-    bridge.setHostContext(hostContext);
-  }, [hostContext, initCount]);
+    if (!bridge || initCount === 0 || !effectiveHostContext) return;
+    bridge.setHostContext(effectiveHostContext);
+  }, [effectiveHostContext, initCount]);
   useEffect5(() => {
     const bridge = bridgeRef.current;
     if (!bridge || initCount === 0 || !partialToolInput) return;
@@ -7792,13 +7830,13 @@ function ViewRendererBase({
   }, [initCount, partialToolInput]);
   useEffect5(() => {
     const bridge = bridgeRef.current;
-    if (!bridge || initCount === 0) return;
+    if (!bridge || initCount === 0 || partialToolInput) return;
     const mergedArgs = {
       ...toolInput,
       ...parseCustomProps(customProps)
     };
     bridge.sendToolInput({ arguments: mergedArgs });
-  }, [initCount, toolInput, customProps]);
+  }, [initCount, toolInput, partialToolInput, customProps]);
   useEffect5(() => {
     const bridge = bridgeRef.current;
     if (!bridge || initCount === 0) return;
@@ -7822,6 +7860,7 @@ function ViewRendererBase({
     const timer = setTimeout(() => setShowSpinner(false), 300);
     return () => clearTimeout(timer);
   }, [initCount, showSpinner]);
+  const showHostBorder = resolved !== null && resolved.prefersBorder && displayMode !== "fullscreen";
   if (loadError) {
     return /* @__PURE__ */ React2.createElement("div", { className }, /* @__PURE__ */ React2.createElement("div", { className: "border border-red-200/50 dark:border-red-800/50 bg-red-50/30 dark:bg-red-950/20 rounded-lg p-4" }, /* @__PURE__ */ React2.createElement("p", { className: "text-sm text-red-600 dark:text-red-400" }, "Failed to load view: ", loadError)));
   }
@@ -7839,29 +7878,69 @@ function ViewRendererBase({
     "div",
     {
       ref: containerRef,
-      className: containerClassName,
+      className: isFullscreen ? `${containerClassName} flex flex-col` : containerClassName,
       style: isPip ? {
         height: VIEW_DIMENSIONS.DEFAULT_HEIGHT,
         maxWidth: VIEW_DIMENSIONS.PIP_MAX_WIDTH,
         zIndex: 100
       } : isFullscreen ? { zIndex: 100 } : void 0
     },
-    (isFullscreen || isPip) && /* @__PURE__ */ React2.createElement(
+    isFullscreen && // ponytail: inspector Tailwind may not emit client arbitrary classes
+    // (h-[50px], grid-cols-[auto_1fr_auto]) — use inline layout instead.
+    /* @__PURE__ */ React2.createElement(
+      "header",
+      {
+        className: "grid shrink-0 items-center border-b border-zinc-200 bg-background px-3 dark:border-zinc-700",
+        style: {
+          height: VIEW_DIMENSIONS.FULLSCREEN_HEADER_HEIGHT,
+          gridTemplateColumns: "auto 1fr auto"
+        }
+      },
+      renderFullscreenClose ? renderFullscreenClose({
+        onClick: () => void handleDisplayModeChange("inline"),
+        "data-testid": "debugger-exit-fullscreen-button",
+        "aria-label": "Exit fullscreen"
+      }) : /* @__PURE__ */ React2.createElement(
+        "button",
+        {
+          type: "button",
+          "data-testid": "debugger-exit-fullscreen-button",
+          "aria-label": "Exit fullscreen",
+          className: "flex size-8 cursor-pointer items-center justify-center rounded-full border border-zinc-200 bg-background text-foreground shadow-sm hover:bg-muted dark:border-zinc-700",
+          onClick: () => void handleDisplayModeChange("inline")
+        },
+        /* @__PURE__ */ React2.createElement(CloseIcon, null)
+      ),
+      /* @__PURE__ */ React2.createElement("div", { className: "flex min-w-0 items-center justify-center gap-2 px-2" }, fullscreenHeader?.iconUrl ? /* @__PURE__ */ React2.createElement(
+        "img",
+        {
+          src: fullscreenHeader.iconUrl,
+          alt: "",
+          className: "size-6 shrink-0 rounded-md object-contain"
+        }
+      ) : null, /* @__PURE__ */ React2.createElement("span", { className: "truncate text-sm font-medium text-foreground" }, fullscreenHeader?.title ?? toolName)),
+      /* @__PURE__ */ React2.createElement("div", { className: "size-8 shrink-0", "aria-hidden": true })
+    ),
+    isPip && (renderFullscreenClose ? /* @__PURE__ */ React2.createElement("div", { className: "absolute right-3 top-3", style: { zIndex: 110 } }, renderFullscreenClose({
+      onClick: () => void handleDisplayModeChange("inline"),
+      "data-testid": "debugger-exit-pip-button",
+      "aria-label": "Exit picture-in-picture"
+    })) : /* @__PURE__ */ React2.createElement(
       "button",
       {
         type: "button",
-        "data-testid": isFullscreen ? "debugger-exit-fullscreen-button" : "debugger-exit-pip-button",
-        "aria-label": isFullscreen ? "Exit fullscreen" : "Exit picture-in-picture",
-        className: "absolute right-3 top-3 z-[110] flex size-8 items-center justify-center rounded-full border border-border bg-background/90 text-lg leading-none text-foreground shadow-sm backdrop-blur-sm hover:bg-background",
+        "data-testid": "debugger-exit-pip-button",
+        "aria-label": "Exit picture-in-picture",
+        className: "absolute right-3 top-3 z-[110] flex size-8 cursor-pointer items-center justify-center rounded-full border border-border bg-background/90 text-foreground shadow-sm backdrop-blur-sm hover:bg-background",
         style: { zIndex: 110 },
         onClick: () => void handleDisplayModeChange("inline")
       },
-      "\xD7"
-    ),
+      /* @__PURE__ */ React2.createElement(CloseIcon, null)
+    )),
     /* @__PURE__ */ React2.createElement(
       "div",
       {
-        className: isFullscreen || isPip ? "relative w-full h-full min-h-0 flex flex-1 flex-col" : "relative w-full flex flex-1 justify-center items-center"
+        className: isFullscreen ? "relative flex min-h-0 w-full flex-1 flex-col" : isPip ? "relative w-full h-full min-h-0 flex flex-1 flex-col" : "relative w-full flex flex-1 justify-center items-center"
       },
       showSpinner && /* @__PURE__ */ React2.createElement("div", { className: "flex absolute inset-0 items-center justify-center z-10" }, /* @__PURE__ */ React2.createElement("span", { className: "text-sm text-muted-foreground" }, "Loading\u2026")),
       !isPip && !isFullscreen && (invoking || invoked) && /* @__PURE__ */ React2.createElement("div", { className: "absolute -top-8 left-2 z-10 whitespace-nowrap pointer-events-none text-xs text-muted-foreground" }, invoking && !toolOutput ? invoking : invoked),
@@ -7878,10 +7957,7 @@ function ViewRendererBase({
           {
             ref: iframeRef,
             title: `MCP App: ${toolName}`,
-            className: "w-full h-full border-0 bg-transparent",
-            style: {
-              border: resolved.prefersBorder && displayMode !== "fullscreen" ? void 0 : "none"
-            }
+            className: showHostBorder ? "w-full h-full bg-transparent border border-border rounded-xl" : "w-full h-full bg-transparent border-0"
           }
         )
       )
@@ -7902,6 +7978,10 @@ function viewRendererAreEqual(prev, next) {
   if (prev.hostContext !== next.hostContext) return false;
   if (prev.hostCapabilities !== next.hostCapabilities) return false;
   if (prev.cspMode !== next.cspMode) return false;
+  if (prev.mockOpenAiFileApis !== next.mockOpenAiFileApis) return false;
+  if (prev.onInlineHeightChange !== next.onInlineHeightChange) return false;
+  if (prev.fullscreenHeader !== next.fullscreenHeader) return false;
+  if (prev.renderFullscreenClose !== next.renderFullscreenClose) return false;
   if (prev.className !== next.className) return false;
   if (prev.onReady !== next.onReady) return false;
   if (prev.onLifecycleChange !== next.onLifecycleChange) return false;