@mcp-ts/sdk 1.3.9 → 1.4.0

package/dist/client/react.js

@@ -277,6 +277,7 @@ function useMcp(options) {
     "disconnected"
   );
   const [isInitializing, setIsInitializing] = react.useState(false);
+  const [sseClient, setSseClient] = react.useState(null);
   react.useEffect(() => {
     isMountedRef.current = true;
     const clientOptions = {
@@ -299,6 +300,7 @@ function useMcp(options) {
     };
     const client = new SSEClient(clientOptions);
     clientRef.current = client;
+    setSseClient(client);
     if (autoConnect) {
       client.connect();
       if (autoInitialize) {
@@ -354,18 +356,28 @@ function useMcp(options) {
           );
         }
         case "auth_required": {
-          if (event.authUrl) {
-            onLog?.("info", `OAuth required - redirecting to ${event.authUrl}`, { authUrl: event.authUrl });
-            if (!suppressAuthRedirectSessionsRef.current.has(event.sessionId)) {
-              if (onRedirect) {
-                onRedirect(event.authUrl);
-              } else if (typeof window !== "undefined") {
-                window.location.href = event.authUrl;
-              }
+          const url2 = (event.authUrl || "").trim();
+          if (!url2) {
+            onLog?.("error", "OAuth required but authorization URL is missing", { sessionId: event.sessionId });
+            return prev.map(
+              (c) => c.sessionId === event.sessionId ? {
+                ...c,
+                state: "FAILED",
+                error: "OAuth authorization URL not available",
+                authUrl: void 0
+              } : c
+            );
+          }
+          onLog?.("info", `OAuth required - redirecting to ${url2}`, { authUrl: url2 });
+          if (!suppressAuthRedirectSessionsRef.current.has(event.sessionId)) {
+            if (onRedirect) {
+              onRedirect(url2);
+            } else if (typeof window !== "undefined") {
+              window.location.href = url2;
             }
           }
           return prev.map(
-            (c) => c.sessionId === event.sessionId ? { ...c, state: "AUTHENTICATING", authUrl: event.authUrl } : c
+            (c) => c.sessionId === event.sessionId ? { ...c, state: "AUTHENTICATING", authUrl: url2 } : c
           );
         }
         case "error": {
@@ -532,46 +544,137 @@ function useMcp(options) {
     },
     [getConnection]
   );
-  return {
-    connections,
-    status,
-    isInitializing,
-    connect,
-    disconnect,
-    getConnection,
-    getConnectionByServerId,
-    isServerConnected,
-    getTools,
-    refresh,
-    connectSSE,
-    disconnectSSE,
-    finishAuth,
-    resumeAuth,
-    callTool,
-    listTools,
-    listPrompts,
-    getPrompt,
-    listResources,
-    readResource,
-    sseClient: clientRef.current
-  };
+  return react.useMemo(
+    () => ({
+      connections,
+      status,
+      isInitializing,
+      connect,
+      disconnect,
+      getConnection,
+      getConnectionByServerId,
+      isServerConnected,
+      getTools,
+      refresh,
+      connectSSE,
+      disconnectSSE,
+      finishAuth,
+      resumeAuth,
+      callTool,
+      listTools,
+      listPrompts,
+      getPrompt,
+      listResources,
+      readResource,
+      sseClient
+    }),
+    [
+      connections,
+      status,
+      isInitializing,
+      connect,
+      disconnect,
+      getConnection,
+      getConnectionByServerId,
+      isServerConnected,
+      getTools,
+      refresh,
+      connectSSE,
+      disconnectSSE,
+      finishAuth,
+      resumeAuth,
+      callTool,
+      listTools,
+      listPrompts,
+      getPrompt,
+      listResources,
+      readResource,
+      sseClient
+    ]
+  );
+}
+
+// src/client/core/constants.ts
+var SANDBOX_PROXY_READY_METHOD = "ui/notifications/sandbox-proxy-ready";
+var SANDBOX_RESOURCE_READY_METHOD = "ui/notifications/sandbox-resource-ready";
+var APP_HOST_DEFAULTS = {
+  /** Default timeout for waiting for the sandbox proxy to be ready (ms). */
+  SANDBOX_TIMEOUT_MS: 1e4,
+  /** Default host info reported to guest apps. */
+  HOST_INFO: { name: "mcp-ts-host", version: "1.0.0" },
+  /** Supported MCP App URI schemes. */
+  URI_SCHEMES: ["ui://", "mcp-app://"],
+  /** Default theme for the host context. */
+  THEME: "dark",
+  /** Default platform for the host context. */
+  PLATFORM: "web",
+  /** Default max height for the iframe container (px). */
+  MAX_HEIGHT: 6e3
+};
+
+// src/client/utils/app-host-utils.ts
+var DEFAULT_SANDBOX_TIMEOUT_MS = APP_HOST_DEFAULTS.SANDBOX_TIMEOUT_MS;
+async function setupSandboxProxyIframe(iframe, sandboxProxyUrl) {
+  iframe.style.width = "100%";
+  iframe.style.height = "100%";
+  iframe.style.border = "none";
+  iframe.style.backgroundColor = "transparent";
+  iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-downloads");
+  const onReady = new Promise((resolve, reject) => {
+    let settled = false;
+    const cleanup = () => {
+      window.removeEventListener("message", messageListener);
+      iframe.removeEventListener("error", errorListener);
+    };
+    const timeoutId = setTimeout(() => {
+      if (!settled) {
+        settled = true;
+        cleanup();
+        reject(new Error("Timed out waiting for sandbox proxy iframe to be ready"));
+      }
+    }, DEFAULT_SANDBOX_TIMEOUT_MS);
+    const messageListener = (event) => {
+      if (event.source === iframe.contentWindow) {
+        if (event.data?.method === SANDBOX_PROXY_READY_METHOD) {
+          if (!settled) {
+            settled = true;
+            clearTimeout(timeoutId);
+            cleanup();
+            resolve();
+          }
+        }
+      }
+    };
+    const errorListener = () => {
+      if (!settled) {
+        settled = true;
+        clearTimeout(timeoutId);
+        cleanup();
+        reject(new Error("Failed to load sandbox proxy iframe"));
+      }
+    };
+    window.addEventListener("message", messageListener);
+    iframe.addEventListener("error", errorListener);
+  });
+  iframe.src = sandboxProxyUrl.href;
+  return { onReady };
 }
-var HOST_INFO = { name: "mcp-ts-host", version: "1.0.0" };
-var SANDBOX_PERMISSIONS = [
-  "allow-scripts",
-  // Required for app JavaScript execution
-  "allow-forms",
-  // Required for form submissions
-  "allow-same-origin",
-  // Required for Blob URL correctness
-  "allow-modals",
-  // Required for dialogs/alerts
-  "allow-popups",
-  // Required for opening links
-  "allow-downloads"
-  // Required for file downloads
-].join(" ");
-var MCP_URI_SCHEMES = ["ui://", "mcp-app://"];
+
+// src/client/core/app-host.ts
+var DEFAULT_MCP_APP_CSP = {
+  "default-src": "'self'",
+  "script-src": "'self' 'unsafe-inline' 'unsafe-eval' https: blob:",
+  "style-src": "'self' 'unsafe-inline' https:",
+  "connect-src": "'self' https: wss:",
+  "img-src": "'self' data: https: blob:",
+  "font-src": "'self' data: https:",
+  "media-src": "'self' https: blob:",
+  "frame-src": "'none'",
+  "object-src": "'none'",
+  "base-uri": "'self'"
+};
+var HOST_INFO = APP_HOST_DEFAULTS.HOST_INFO;
+var MCP_URI_SCHEMES = APP_HOST_DEFAULTS.URI_SCHEMES;
 var AppHost = class {
   constructor(client, iframe, options) {
     this.client = client;
@@ -580,10 +683,12 @@ var AppHost = class {
     __publicField(this, "sessionId");
     __publicField(this, "resourceCache", /* @__PURE__ */ new Map());
     __publicField(this, "debug");
-    /** Callback for app messages (e.g., chat messages from the app) */
+    __publicField(this, "sandboxConfig");
+    __publicField(this, "options");
     __publicField(this, "onAppMessage");
-    this.debug = options?.debug ?? false;
-    this.configureSandbox();
+    this.options = options || {};
+    this.debug = this.options.debug ?? false;
+    this.sandboxConfig = this.options.sandbox;
     this.bridge = this.initializeBridge();
   }
   // ============================================
@@ -610,19 +715,35 @@ var AppHost = class {
     }
   }
   /**
-   * Launch an MCP App from a URL or MCP resource URI.
+   * Launch an MCP App from a URL, MCP resource URI, or RAW HTML.
    * Loads the HTML first, then establishes bridge connection.
    */
-  async launch(url, sessionId) {
+  async launch(source, sessionId) {
     if (sessionId) this.sessionId = sessionId;
     const initializedPromise = this.onAppReady();
-    if (this.isMcpUri(url)) {
-      await this.launchMcpApp(url);
-    } else {
-      this.iframe.src = url;
+    let htmlToRender = source.html;
+    if (!htmlToRender && source.uri) {
+      if (this.isMcpUri(source.uri)) {
+        htmlToRender = await this.readMcpAppHtml(source.uri);
+      }
+    }
+    if (!htmlToRender && source.uri && !this.isMcpUri(source.uri)) {
+      this.iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-downloads");
+      this.iframe.src = source.uri;
+      await this.onIframeReady();
+      await this.connectBridge();
+    } else if (htmlToRender) {
+      if (!this.sandboxConfig) {
+        throw new Error("Sandbox configuration requires a proxy URL to render HTML safely.");
+      }
+      await this.launchSandboxedHtml(htmlToRender, this.sandboxConfig);
+      await this.connectBridge();
+      this.log("Sending HTML resource to sandbox proxy (MCP Apps notification)");
+      await this.bridge.sendSandboxResourceReady({
+        html: htmlToRender,
+        csp: this.sandboxConfig.csp
+      });
     }
-    await this.onIframeReady();
-    await this.connectBridge();
     this.log("Waiting for app initialization");
     await Promise.race([
       initializedPromise,
@@ -633,6 +754,19 @@ var AppHost = class {
     ]);
     this.log("App launched and ready");
   }
+  // Set host context manually
+  setHostContext(context) {
+    this.options.hostContext = context;
+    if (this.bridge) {
+      this.bridge.setHostContext(context);
+    }
+  }
+  // Send streaming inputs manually
+  sendToolInputPartial(params) {
+    if (this.bridge) {
+      this.bridge.sendToolInputPartial(params);
+    }
+  }
   /**
    * Wait for app to signal initialization complete
    */
@@ -683,14 +817,17 @@ var AppHost = class {
     this.log("Sending tool cancellation to app");
     this.bridge.sendToolCancelled({ reason });
   }
+  /**
+   * Tell the guest UI the resource is being torn down (unload / cleanup).
+   * Forwards to {@link AppBridge.teardownResource} on `@modelcontextprotocol/ext-apps/app-bridge`.
+   */
+  teardownResource(params = {}) {
+    this.log("Sending resource teardown to app");
+    this.bridge.teardownResource(params);
+  }
   // ============================================
   // Private: Initialization
   // ============================================
-  configureSandbox() {
-    if (this.iframe.sandbox.value !== SANDBOX_PERMISSIONS) {
-      this.iframe.sandbox.value = SANDBOX_PERMISSIONS;
-    }
-  }
   initializeBridge() {
     const bridge = new appBridge.AppBridge(
       null,
@@ -699,12 +836,10 @@ var AppHost = class {
         openLinks: {},
         serverTools: {},
         logging: {},
-        // Declare support for model context updates
         updateModelContext: { text: {} }
       },
       {
-        // Initial host context
-        hostContext: {
+        hostContext: this.options.hostContext || {
           theme: "dark",
           platform: "web",
           containerDimensions: { maxHeight: 6e3 },
@@ -713,19 +848,56 @@ var AppHost = class {
         }
       }
     );
+    bridge.fallbackRequestHandler = this.options.onFallbackRequest;
     bridge.oncalltool = (params) => this.handleToolCall(params);
-    bridge.onopenlink = this.handleOpenLink.bind(this);
-    bridge.onmessage = this.handleMessage.bind(this);
-    bridge.onloggingmessage = (params) => this.log(`App log [${params.level}]: ${params.data}`);
+    if (this.options.onReadResource) {
+      bridge.onreadresource = async (params) => {
+        const resp = await this.options.onReadResource(params.uri);
+        return {
+          contents: resp.contents.map((c) => ({
+            uri: params.uri,
+            text: c.text,
+            blob: c.blob
+          }))
+        };
+      };
+    }
+    bridge.onopenlink = async (params, extra) => {
+      if (this.options.onOpenLink) {
+        return await this.options.onOpenLink(params, extra);
+      }
+      return this.handleOpenLink(params);
+    };
+    bridge.onmessage = async (params, extra) => {
+      if (this.options.onMessage) {
+        return await this.options.onMessage(params, extra);
+      }
+      return this.handleMessage(params);
+    };
+    bridge.onloggingmessage = (params) => {
+      this.log(`App log [${params.level}]: ${params.data}`);
+      if (this.options.onLoggingMessage) {
+        this.options.onLoggingMessage(params);
+      }
+    };
     bridge.onupdatemodelcontext = async () => ({});
-    bridge.onsizechange = async ({ width, height }) => {
-      if (height !== void 0) this.iframe.style.height = `${height}px`;
-      if (width !== void 0) this.iframe.style.minWidth = `min(${width}px, 100%)`;
+    bridge.onsizechange = async (params) => {
+      const { width, height } = params;
+      if (height !== void 0 && height > 0) {
+        this.iframe.style.height = `${height}px`;
+      }
+      if (width !== void 0 && width > 0) this.iframe.style.minWidth = `min(${width}px, 100%)`;
+      if (this.options.onSizeChanged) {
+        this.options.onSizeChanged(params);
+      }
       return {};
     };
-    bridge.onrequestdisplaymode = async (params) => ({
-      mode: params.mode === "fullscreen" ? "fullscreen" : "inline"
-    });
+    bridge.onrequestdisplaymode = async (params, extra) => {
+      if (this.options.onRequestDisplayMode) {
+        return await this.options.onRequestDisplayMode(params, extra);
+      }
+      return { mode: params.mode === "fullscreen" ? "fullscreen" : "inline" };
+    };
     return bridge;
   }
   async connectBridge() {
@@ -739,6 +911,9 @@ var AppHost = class {
       this.log("Bridge connected successfully");
     } catch (error) {
       this.log("Bridge connection failed", "error");
+      if (this.options.onError) {
+        this.options.onError(error instanceof Error ? error : new Error(String(error)));
+      }
       throw error;
     }
   }
@@ -746,8 +921,11 @@ var AppHost = class {
   // Private: Bridge Event Handlers
   // ============================================
   async handleToolCall(params) {
-    if (!this.client.isConnected()) {
-      throw new Error("Client disconnected");
+    if (this.options.onCallTool) {
+      return await this.options.onCallTool(params);
+    }
+    if (!this.client || !this.client.isConnected()) {
+      throw new Error("Client disconnected or not provided");
     }
     const sessionId = await this.getSessionId();
     if (!sessionId) {
@@ -771,13 +949,19 @@ var AppHost = class {
   // ============================================
   // Private: Resource Loading
   // ============================================
-  async launchMcpApp(uri) {
-    if (!this.client.isConnected()) {
-      throw new Error("Client must be connected");
+  async launchSandboxedHtml(html, config) {
+    const sandboxUrlString = config.url instanceof URL ? config.url.href : config.url;
+    const url = new URL(sandboxUrlString, globalThis.location?.href);
+    if (config.csp && Object.keys(config.csp).length > 0) {
+      url.searchParams.set("csp", JSON.stringify(config.csp));
     }
+    const { onReady } = await setupSandboxProxyIframe(this.iframe, url);
+    await onReady;
+  }
+  async readMcpAppHtml(uri) {
     const sessionId = await this.getSessionId();
-    if (!sessionId) {
-      throw new Error("No active session");
+    if (!sessionId && !this.options.onReadResource) {
+      throw new Error("No active session.");
     }
     const response = await this.fetchResourceWithCache(sessionId, uri);
     if (!response?.contents?.length) {
@@ -788,10 +972,18 @@ var AppHost = class {
     if (!html) {
       throw new Error(`Invalid content in resource: ${uri}`);
     }
-    const blob = new Blob([html], { type: "text/html" });
-    this.iframe.src = URL.createObjectURL(blob);
+    return html;
   }
   async fetchResourceWithCache(sessionId, uri) {
+    if (this.options.onReadResource) {
+      return await this.options.onReadResource(uri);
+    }
+    if (!sessionId) {
+      throw new Error("No active session");
+    }
+    if (!this.client) {
+      throw new Error("No client to read resource from");
+    }
     if (this.hasClientCache()) {
       return this.client.getOrFetchResource(sessionId, uri);
     }
@@ -804,8 +996,11 @@ var AppHost = class {
   }
   async preloadResource(uri) {
     try {
+      if (this.options.onReadResource) {
+        return await this.options.onReadResource(uri);
+      }
       const sessionId = await this.getSessionId();
-      if (!sessionId) return null;
+      if (!sessionId || !this.client) return null;
       return await this.client.readResource(sessionId, uri);
     } catch (error) {
       this.log(`Preload failed for ${uri}`, "warn");
@@ -817,6 +1012,7 @@ var AppHost = class {
   // ============================================
   async getSessionId() {
     if (this.sessionId) return this.sessionId;
+    if (!this.client) return void 0;
     const result = await this.client.getSessions();
     return result.sessions?.[0]?.sessionId;
   }
@@ -824,6 +1020,7 @@ var AppHost = class {
     return MCP_URI_SCHEMES.some((scheme) => url.startsWith(scheme));
   }
   hasClientCache() {
+    if (!this.client) return false;
     return "getOrFetchResource" in this.client && typeof this.client.getOrFetchResource === "function";
   }
   extractUiResourceUri(tool) {
@@ -867,10 +1064,7 @@ function useAppHost(client, iframeRef, options) {
     initializingRef.current = true;
     const initHost = async () => {
       try {
-        const appHost = new AppHost(client, iframeRef.current);
-        appHost.onAppMessage = (params) => {
-          onMessageRef.current?.(params);
-        };
+        const appHost = new AppHost(client, iframeRef.current, options);
         setHost(appHost);
         await appHost.start();
       } catch (err) {
@@ -886,39 +1080,106 @@ function useAppHost(client, iframeRef, options) {
   }, [client, iframeRef]);
   return { host, error };
 }
-var McpAppRenderer = react.memo(function McpAppRenderer2({
-  mcpClient,
+var McpAppViewInner = react.forwardRef(function McpAppView({
+  clientRef,
   name,
+  toolResourceUri,
+  html,
   input,
   result,
-  status,
-  className
-}) {
-  const getAppMetadata = react.useCallback(() => {
-    if (!mcpClient) return void 0;
-    const extractedName = extractToolName(name);
-    for (const conn of mcpClient.connections) {
-      for (const tool of conn.tools) {
-        const candidateName = extractToolName(tool.name);
-        const resourceUri = tool.mcpApp?.resourceUri ?? tool._meta?.ui?.resourceUri ?? tool._meta?.["ui/resourceUri"];
-        if (resourceUri && candidateName === extractedName) {
-          return {
-            toolName: candidateName,
-            resourceUri,
-            sessionId: conn.sessionId
-          };
+  status = "idle",
+  toolInputPartial,
+  toolCancelled,
+  sandbox,
+  hostContext,
+  onCallTool,
+  onReadResource,
+  onFallbackRequest,
+  onMessage,
+  onOpenLink,
+  onLoggingMessage,
+  onSizeChanged,
+  onError: onHostError,
+  className,
+  loader
+}, ref) {
+  const mcpClient = clientRef.current;
+  const metadata = getMcpAppMetadata(mcpClient, name);
+  const sseClient = mcpClient?.sseClient ?? null;
+  const resourceUri = toolResourceUri || metadata?.resourceUri;
+  const appSessionId = metadata?.sessionId;
+  const iframeRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  const preFullscreenHeightRef = react.useRef(null);
+  const displayModeRef = react.useRef("inline");
+  const [displayMode, setDisplayMode] = react.useState("inline");
+  const setDisplayModeWithRef = (mode) => {
+    displayModeRef.current = mode;
+    setDisplayMode(mode);
+  };
+  const { host, error: hostError } = useAppHost(sseClient, iframeRef, {
+    sandbox,
+    hostContext,
+    onCallTool,
+    onReadResource,
+    onFallbackRequest,
+    onMessage,
+    onOpenLink,
+    onLoggingMessage,
+    // Intercept onSizeChanged: when exiting fullscreen, ignore guest resize events
+    // that arrive with the shrunken viewport dimensions, and restore the pre-fullscreen height.
+    onSizeChanged: (params) => {
+      if (displayModeRef.current === "inline" && preFullscreenHeightRef.current !== null) {
+        const savedHeight = preFullscreenHeightRef.current;
+        preFullscreenHeightRef.current = null;
+        if (iframeRef.current) {
+          iframeRef.current.style.height = `${savedHeight}px`;
         }
+        return;
       }
+      onSizeChanged?.(params);
+    },
+    onError: onHostError,
+    onRequestDisplayMode: async (params) => {
+      if (params.mode === "fullscreen") {
+        if (iframeRef.current) {
+          const h = iframeRef.current.getBoundingClientRect().height;
+          if (h > 0) preFullscreenHeightRef.current = h;
+        }
+        try {
+          if (containerRef.current?.requestFullscreen) {
+            await containerRef.current.requestFullscreen();
+          } else if (containerRef.current?.webkitRequestFullscreen) {
+            await containerRef.current.webkitRequestFullscreen();
+          }
+          setDisplayModeWithRef("fullscreen");
+        } catch (err) {
+          console.warn("[McpAppHost] requestFullscreen failed:", err);
+          preFullscreenHeightRef.current = null;
+          return { mode: "inline" };
+        }
+      } else if (params.mode === "inline") {
+        restoreHeightAfterFullscreen();
+        try {
+          if (document.fullscreenElement) {
+            await document.exitFullscreen();
+          }
+        } catch (err) {
+        }
+        setDisplayModeWithRef("inline");
+      }
+      return { mode: params.mode };
     }
-    return void 0;
-  }, [mcpClient, name]);
-  const metadata = getAppMetadata();
-  const sseClient = mcpClient?.sseClient ?? null;
-  if (!metadata || !sseClient) {
-    return null;
-  }
-  const iframeRef = react.useRef(null);
-  const { host, error: hostError } = useAppHost(sseClient, iframeRef);
+  });
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      teardownResource: (params) => {
+        host?.teardownResource(params ?? {});
+      }
+    }),
+    [host]
+  );
   const [isLaunched, setIsLaunched] = react.useState(false);
   const [error, setError] = react.useState(null);
   const sentInputRef = react.useRef(false);
@@ -927,19 +1188,41 @@ var McpAppRenderer = react.memo(function McpAppRenderer2({
   const lastResultRef = react.useRef(result);
   const lastStatusRef = react.useRef(status);
   react.useEffect(() => {
-    if (!host || !metadata.resourceUri || !metadata.sessionId) return;
-    host.launch(metadata.resourceUri, metadata.sessionId).then(() => setIsLaunched(true)).catch((err) => setError(err instanceof Error ? err : new Error(String(err))));
-  }, [host, metadata.resourceUri, metadata.sessionId]);
+    setIsLaunched(false);
+    setError(null);
+  }, [resourceUri, appSessionId]);
+  const restoreHeightAfterFullscreen = () => {
+    const savedHeight = preFullscreenHeightRef.current;
+    if (savedHeight && iframeRef.current) {
+      iframeRef.current.style.height = `${savedHeight}px`;
+    }
+    preFullscreenHeightRef.current = null;
+  };
+  react.useEffect(() => {
+    const onFullscreenChange = () => {
+      const isFullscreen = !!document.fullscreenElement;
+      if (!isFullscreen && displayModeRef.current === "fullscreen") {
+        restoreHeightAfterFullscreen();
+        setDisplayModeWithRef("inline");
+      }
+    };
+    document.addEventListener("fullscreenchange", onFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+  }, []);
   react.useEffect(() => {
-    if (!host || !isLaunched || !input) return;
+    if (!host || !resourceUri && !html) return;
+    host.launch({ uri: resourceUri, html }, appSessionId).then(() => setIsLaunched(true)).catch((err) => setError(err instanceof Error ? err : new Error(String(err))));
+  }, [host, resourceUri, html, appSessionId]);
+  react.useEffect(() => {
+    if (!host || !isLaunched || !resourceUri || !appSessionId || !input) return;
     if (!sentInputRef.current || JSON.stringify(input) !== JSON.stringify(lastInputRef.current)) {
       sentInputRef.current = true;
       lastInputRef.current = input;
       host.sendToolInput(input);
     }
-  }, [host, isLaunched, input]);
+  }, [host, isLaunched, input, resourceUri, appSessionId, name]);
   react.useEffect(() => {
-    if (!host || !isLaunched || result === void 0) return;
+    if (!host || !isLaunched || !resourceUri || !appSessionId || result === void 0) return;
     if (status !== "complete") return;
     if (!sentResultRef.current || JSON.stringify(result) !== JSON.stringify(lastResultRef.current)) {
       sentResultRef.current = true;
@@ -947,7 +1230,7 @@ var McpAppRenderer = react.memo(function McpAppRenderer2({
       const formattedResult = typeof result === "string" ? { content: [{ type: "text", text: result }] } : result;
       host.sendToolResult(formattedResult);
     }
-  }, [host, isLaunched, result, status]);
+  }, [host, isLaunched, result, status, resourceUri, appSessionId, name]);
   react.useEffect(() => {
     if (status === "executing" && lastStatusRef.current !== "executing") {
       sentInputRef.current = false;
@@ -955,6 +1238,28 @@ var McpAppRenderer = react.memo(function McpAppRenderer2({
     }
     lastStatusRef.current = status;
   }, [status]);
+  react.useEffect(() => {
+    if (!host) return;
+    const mergedCtx = {
+      theme: APP_HOST_DEFAULTS.THEME,
+      platform: APP_HOST_DEFAULTS.PLATFORM,
+      containerDimensions: { maxHeight: APP_HOST_DEFAULTS.MAX_HEIGHT },
+      availableDisplayModes: ["inline", "fullscreen"],
+      ...hostContext || {},
+      displayMode
+      // always override with our authoritative state
+    };
+    host.setHostContext(mergedCtx);
+  }, [host, hostContext, displayMode]);
+  react.useEffect(() => {
+    if (host && toolInputPartial) host.sendToolInputPartial(toolInputPartial);
+  }, [host, toolInputPartial]);
+  react.useEffect(() => {
+    if (host && toolCancelled) host.sendToolCancelled("User cancelled");
+  }, [host, toolCancelled]);
+  if (!metadata && !html && !toolResourceUri) {
+    return null;
+  }
   const displayError = error || hostError;
   if (displayError) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-4 bg-red-900/20 border border-red-700 rounded text-red-200 ${className || ""}`, children: [
@@ -962,50 +1267,90 @@ var McpAppRenderer = react.memo(function McpAppRenderer2({
       displayError.message || String(displayError)
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full border border-gray-700 rounded overflow-hidden bg-white min-h-96 my-2 relative ${className || ""}`, children: [
+  const opacityClass = isLaunched ? "opacity-100" : "opacity-0";
+  let containerClass = `w-full border border-gray-700 rounded bg-transparent my-2 relative ${className || ""}`;
+  let iframeClass = `w-full transition-opacity duration-300 ${opacityClass}`;
+  if (displayMode === "fullscreen") {
+    containerClass = `w-full h-full bg-black m-0 p-0 flex flex-col relative`;
+    iframeClass = `w-full flex-1 transition-opacity duration-300 ${opacityClass}`;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: containerClass, children: [
+    displayMode === "fullscreen" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 p-2 z-[100000] w-full bg-gradient-to-b from-black/80 to-transparent flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        title: "Exit Fullscreen",
+        onClick: () => {
+          restoreHeightAfterFullscreen();
+          if (document.fullscreenElement) document.exitFullscreen();
+          setDisplayModeWithRef("inline");
+        },
+        className: "px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-md shadow flex items-center gap-2 border border-gray-600 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Exit" })
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "iframe",
       {
         ref: iframeRef,
         sandbox: "allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-downloads",
-        className: "w-full h-full min-h-96",
-        style: { height: "auto" },
+        allow: "fullscreen",
+        className: iframeClass,
         title: "MCP App"
       }
     ),
-    !isLaunched && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gray-900/50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" }) })
+    !isLaunched && loader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-transparent flex items-center justify-center pointer-events-none z-10", children: loader })
   ] });
 });
+var McpAppView2 = react.memo(McpAppViewInner);
+McpAppView2.displayName = "McpAppView";
 function useMcpApps(mcpClient) {
+  const clientRef = react.useRef(mcpClient);
+  clientRef.current = mcpClient;
   const getAppMetadata = react.useCallback(
-    (toolName) => {
-      if (!mcpClient) return void 0;
-      const extractedName = extractToolName(toolName);
-      for (const conn of mcpClient.connections) {
-        for (const tool of conn.tools) {
-          const candidateName = extractToolName(tool.name);
-          const resourceUri = tool.mcpApp?.resourceUri ?? tool._meta?.ui?.resourceUri ?? tool._meta?.["ui/resourceUri"];
-          if (resourceUri && candidateName === extractedName) {
-            return {
-              toolName: candidateName,
-              resourceUri,
-              sessionId: conn.sessionId
-            };
-          }
-        }
-      }
-      return void 0;
-    },
-    [mcpClient]
+    (toolName) => getMcpAppMetadata(clientRef.current, toolName),
+    []
   );
+  const McpAppRenderer = react.useMemo(() => {
+    const Inner = react.forwardRef(function McpAppRenderer2(props, ref) {
+      return /* @__PURE__ */ jsxRuntime.jsx(McpAppView2, { ref, clientRef, ...props });
+    });
+    const Renderer = react.memo(Inner);
+    Renderer.displayName = "McpAppRenderer";
+    return Renderer;
+  }, []);
   return { getAppMetadata, McpAppRenderer };
 }
 function extractToolName(fullName) {
   const match = fullName.match(/(?:tool_[^_]+_)?(.+)$/);
   return match?.[1] || fullName;
 }
+function getMcpAppMetadata(mcpClient, toolName) {
+  if (!mcpClient) return void 0;
+  const extractedName = extractToolName(toolName);
+  for (const conn of mcpClient.connections) {
+    for (const tool of conn.tools) {
+      const candidateName = extractToolName(tool.name);
+      const resourceUri = tool.mcpApp?.resourceUri ?? tool._meta?.ui?.resourceUri ?? tool._meta?.["ui/resourceUri"];
+      if (resourceUri && candidateName === extractedName) {
+        return {
+          toolName: candidateName,
+          resourceUri,
+          sessionId: conn.sessionId
+        };
+      }
+    }
+  }
+  return void 0;
+}
 
+exports.APP_HOST_DEFAULTS = APP_HOST_DEFAULTS;
 exports.AppHost = AppHost;
+exports.DEFAULT_MCP_APP_CSP = DEFAULT_MCP_APP_CSP;
+exports.SANDBOX_PROXY_READY_METHOD = SANDBOX_PROXY_READY_METHOD;
+exports.SANDBOX_RESOURCE_READY_METHOD = SANDBOX_RESOURCE_READY_METHOD;
 exports.SSEClient = SSEClient;
 exports.useAppHost = useAppHost;
 exports.useMcp = useMcp;