@frontmcp/uipack 1.0.0-beta.9 → 1.0.0

package/adapters/index.js

@@ -215,6 +215,7 @@ function safeJsonForScript(value) {
 function buildDataInjectionScript(options) {
   const { toolName, input, output, structuredContent } = options;
   const lines = [
+    `window.__mcpAppsEnabled = true;`,
     `window.__mcpToolName = ${safeJsonForScript(toolName)};`,
     `window.__mcpToolInput = ${safeJsonForScript(input ?? null)};`,
     `window.__mcpToolOutput = ${safeJsonForScript(output ?? null)};`,
@@ -305,6 +306,19 @@ function generateBridgeIIFE(options = {}) {
   parts.push("});");
   parts.push("");
   parts.push("window.FrontMcpBridge = bridge;");
+  parts.push("function __showLoading() {");
+  parts.push('  var root = document.getElementById("root");');
+  parts.push("  if (root && !root.hasChildNodes()) {");
+  parts.push(
+    `    root.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;padding:2rem;color:#6b7280;font-family:system-ui,sans-serif"><div style="text-align:center"><div style="width:24px;height:24px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:__spin 0.6s linear infinite;margin:0 auto 12px"></div><div style="font-size:0.875rem">Loading widget...</div></div></div><style>@keyframes __spin{to{transform:rotate(360deg)}}</style>';`
+  );
+  parts.push("  }");
+  parts.push("}");
+  parts.push('if (document.readyState === "loading") {');
+  parts.push('  document.addEventListener("DOMContentLoaded", __showLoading);');
+  parts.push("} else {");
+  parts.push("  __showLoading();");
+  parts.push("}");
   parts.push("})();");
   const code = parts.join("\n");
   if (minify) {
@@ -481,7 +495,20 @@ var ExtAppsAdapter = {
       self.handleMessage(context, event);
     });
 
-    return self.performHandshake(context);
+    // Defer handshake until after the document is fully loaded.
+    // During document.write() (used by the sandbox proxy), postMessage
+    // from the inner iframe may not reach the parent. Waiting for DOMContentLoaded
+    // or using setTimeout ensures the iframe is fully attached.
+    return new Promise(function(resolve) {
+      function doHandshake() {
+        self.sendHandshake(context).then(resolve, resolve);
+      }
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', doHandshake);
+      } else {
+        setTimeout(doHandshake, 0);
+      }
+    });
   },
   handleMessage: function(context, event) {
     if (!this.isOriginTrusted(event.origin)) return;
@@ -575,32 +602,67 @@ var ExtAppsAdapter = {
       window.parent.postMessage({ jsonrpc: '2.0', id: id, method: method, params: params }, targetOrigin);
     });
   },
-  performHandshake: function(context) {
+  sendHandshake: function(context) {
+    // Send ui/initialize using '*' as target origin since TOFU hasn't
+    // been established yet. The response from the host will establish
+    // TOFU trust via handleMessage \u2192 isOriginTrusted.
     var self = this;
+    var id = ++this.requestId;
     var params = {
       appInfo: { name: 'FrontMCP Widget', version: '1.0.0' },
       appCapabilities: { tools: { listChanged: false } },
       protocolVersion: '2024-11-05'
     };
 
-    return this.sendRequest('ui/initialize', params).then(function(result) {
-      self.hostCapabilities = result.hostCapabilities || {};
-      self.capabilities = Object.assign({}, self.capabilities, {
-        canCallTools: Boolean(self.hostCapabilities.serverToolProxy),
-        canSendMessages: true,
-        canOpenLinks: Boolean(self.hostCapabilities.openLink),
-        supportsDisplayModes: true
-      });
-      if (result.hostContext) {
-        Object.assign(context.hostContext, result.hostContext);
-      }
+    return new Promise(function(resolve, reject) {
+      var timeout = setTimeout(function() {
+        delete self.pendingRequests[id];
+        // Handshake timeout is non-fatal \u2014 notifications may still arrive
+        resolve();
+      }, 10000);
+
+      self.pendingRequests[id] = {
+        resolve: function(result) {
+          self.hostCapabilities = result.hostCapabilities || {};
+          self.capabilities = Object.assign({}, self.capabilities, {
+            canCallTools: Boolean(self.hostCapabilities.serverTools || self.hostCapabilities.serverToolProxy),
+            canSendMessages: true,
+            canOpenLinks: Boolean(self.hostCapabilities.openLinks || self.hostCapabilities.openLink),
+            supportsDisplayModes: true
+          });
+          if (result.hostContext) {
+            Object.assign(context.hostContext, result.hostContext);
+          }
+          // Send ui/notifications/initialized to tell the host the view is ready.
+          // Per MCP Apps spec, the host waits for this before sending tool-result.
+          var targetOrigin = self.trustedOrigin || '*';
+          window.parent.postMessage({
+            jsonrpc: '2.0',
+            method: 'ui/notifications/initialized',
+            params: {}
+          }, targetOrigin);
+          resolve();
+        },
+        reject: function(err) { resolve(); }, // Non-fatal
+        timeout: timeout
+      };
+
+      // Use '*' for the initial handshake \u2014 we don't know the host origin yet.
+      // The sandbox proxy will relay this to the host.
+      window.parent.postMessage({
+        jsonrpc: '2.0', id: id, method: 'ui/initialize', params: params
+      }, '*');
     });
   },
+  performHandshake: function(context) {
+    return this.sendHandshake(context);
+  },
   callTool: function(context, name, args) {
-    if (!this.hostCapabilities.serverToolProxy) {
+    if (!this.hostCapabilities.serverTools && !this.hostCapabilities.serverToolProxy) {
       return Promise.reject(new Error('Server tool proxy not supported'));
     }
-    return this.sendRequest('ui/callServerTool', { name: name, arguments: args });
+    // Per ext-apps spec: use standard MCP method 'tools/call' (not 'ui/callServerTool')
+    return this.sendRequest('tools/call', { name: name, arguments: args || {} });
   },
   sendMessage: function(context, content) {
     return this.sendRequest('ui/message', { content: content });
@@ -1782,22 +1844,71 @@ function bundleFileSource(source, filename, resolveDir, componentName) {
   const esbuild = require("esbuild");
   const mountCode = `
 // --- Auto-generated mount ---
+import { createElement as __h } from 'react';
 import { createRoot } from 'react-dom/client';
 import { McpBridgeProvider } from '@frontmcp/ui/react';
-import React from 'react';
-const __root = document.getElementById('root');
+var __root = document.getElementById('root');
 if (__root) {
-  createRoot(__root).render(
-    React.createElement(McpBridgeProvider, null,
-      React.createElement(${componentName})
-    )
-  );
+  var __reactRoot = createRoot(__root);
+  function __hasData(v) { return v !== undefined; }
+  function __render(output) {
+    __reactRoot.render(
+      __h(McpBridgeProvider, null,
+        __h(${componentName}, { output: output !== undefined ? output : null, input: window.__mcpToolInput, loading: !__hasData(output) })
+      )
+    );
+  }
+  // Render immediately (component shows loading state until data arrives)
+  __render(undefined);
+  // 1. Try OpenAI SDK (toolOutput set synchronously or after load)
+  if (typeof window !== 'undefined') {
+    if (!window.openai) window.openai = {};
+    var __cur = window.openai.toolOutput;
+    if (__hasData(__cur)) { __render(__cur); }
+    Object.defineProperty(window.openai, 'toolOutput', {
+      get: function() { return __cur; },
+      set: function(v) { __cur = v; __render(v); },
+      configurable: true, enumerable: true
+    });
+  }
+  // 2. Try injected data globals
+  if (__hasData(window.__mcpToolOutput)) { __render(window.__mcpToolOutput); }
+  // 3. Listen for bridge tool-result (ext-apps / MCP Inspector)
+  var __bridge = window.FrontMcpBridge;
+  if (__bridge && typeof __bridge.onToolResult === 'function') {
+    __bridge.onToolResult(function(data) { __render(data); });
+  } else {
+    // 4. Fallback: listen for tool:result CustomEvent (standalone / MCP Inspector)
+    window.addEventListener('tool:result', function(e) {
+      var d = e.detail;
+      if (d) __render(d.structuredContent !== undefined ? d.structuredContent : d.content !== undefined ? d.content : d);
+    });
+  }
 }`;
   const loader = {
     ".tsx": "tsx",
     ".jsx": "jsx"
   };
   const stdinLoader = filename.endsWith(".tsx") ? "tsx" : "jsx";
+  const alias = {};
+  try {
+    const nodePath = require("path");
+    const nodeFs = require("fs");
+    const candidates = [
+      nodePath.join(process.cwd(), "node_modules", "@frontmcp", "ui", "dist", "esm"),
+      nodePath.join(resolveDir, "node_modules", "@frontmcp", "ui", "dist", "esm")
+    ];
+    for (const uiEsmBase of candidates) {
+      if (!nodeFs.existsSync(uiEsmBase)) continue;
+      const subpaths = ["components", "react", "theme", "bridge", "runtime"];
+      for (const sub of subpaths) {
+        const mjs = nodePath.join(uiEsmBase, sub, "index.mjs");
+        if (nodeFs.existsSync(mjs)) alias[`@frontmcp/ui/${sub}`] = mjs;
+      }
+      if (Object.keys(alias).length > 0) break;
+    }
+  } catch {
+  }
   try {
     const result = esbuild.buildSync({
       stdin: {
@@ -1810,10 +1921,9 @@ if (__root) {
       write: false,
       format: "esm",
       target: "es2020",
-      jsx: "transform",
-      jsxFactory: "React.createElement",
-      jsxFragment: "React.Fragment",
-      external: ["react", "react-dom"],
+      jsx: "automatic",
+      external: ["react", "react-dom", "react/jsx-runtime", "react/jsx-dev-runtime"],
+      alias,
       define: { "process.env.NODE_ENV": '"production"' },
       platform: "browser",
       treeShaking: true,
@@ -2291,8 +2401,26 @@ function wrapDetectedContent(value) {
 }
 
 // libs/uipack/src/adapters/template-renderer.ts
+function buildCspConfig(resolver) {
+  const cspResourceDomains = ["https://esm.sh"];
+  const cspConnectDomains = ["https://esm.sh"];
+  if (resolver && "overrides" in resolver) {
+    const overrides = resolver.overrides;
+    if (overrides) {
+      for (const url of Object.values(overrides)) {
+        try {
+          const origin = new URL(url).origin;
+          if (!cspResourceDomains.includes(origin)) cspResourceDomains.push(origin);
+          if (!cspConnectDomains.includes(origin)) cspConnectDomains.push(origin);
+        } catch {
+        }
+      }
+    }
+  }
+  return { resourceDomains: cspResourceDomains, connectDomains: cspConnectDomains };
+}
 function renderToolTemplate(options) {
-  const { toolName, input, output, template, platformType, resolver } = options;
+  const { toolName, input, output, template, resolver } = options;
   const uiType = detectUIType(template);
   const shellConfig = {
     toolName,
@@ -2305,25 +2433,7 @@ function renderToolTemplate(options) {
   let hash = "";
   let size = 0;
   if (typeof template === "object" && template !== null && "file" in template) {
-    const cspResourceDomains = ["https://esm.sh"];
-    const cspConnectDomains = ["https://esm.sh"];
-    if (resolver && "overrides" in resolver) {
-      const overrides = resolver.overrides;
-      if (overrides) {
-        for (const url of Object.values(overrides)) {
-          try {
-            const origin = new URL(url).origin;
-            if (!cspResourceDomains.includes(origin)) cspResourceDomains.push(origin);
-            if (!cspConnectDomains.includes(origin)) cspConnectDomains.push(origin);
-          } catch {
-          }
-        }
-      }
-    }
-    const cspConfig = {
-      resourceDomains: cspResourceDomains,
-      connectDomains: cspConnectDomains
-    };
+    const cspConfig = buildCspConfig(resolver);
     const result = renderComponent({ source: template }, { ...shellConfig, csp: cspConfig });
     html = result.html;
     hash = result.hash;

package/adapters/template-renderer.d.ts

@@ -16,7 +16,7 @@ export interface RenderToolTemplateOptions {
     input: unknown;
     /** Tool output */
     output: unknown;
-    /** The template (function, string, or React component) */
+    /** The template — FileSource, function, or string */
     template: unknown;
     /** Platform type for rendering decisions */
     platformType?: string;
@@ -41,10 +41,13 @@ export interface RenderToolTemplateResult {
 /**
  * Render a tool template into HTML.
  *
- * - Function templates: Calls `template(ctx)` with createTemplateHelpers()
- * - React components: Delegates to renderComponent() from uipack/component
- * - String templates: Wraps in buildShell()
- * - Auto-detect: wraps detected content (chart, mermaid, PDF, HTML)
+ * Supported template types:
+ * - FileSource object `{ file: './widget.tsx' }` — bundled with esbuild, React loaded from esm.sh
+ * - HTML template builder function `(ctx) => string`
+ * - Static HTML/MDX string
+ *
+ * React function references (`template: MyComponent`) are NOT supported for bundling.
+ * Use `template: { file: './my-component.tsx' }` instead.
  */
 export declare function renderToolTemplate(options: RenderToolTemplateOptions): RenderToolTemplateResult;
 //# sourceMappingURL=template-renderer.d.ts.map

package/adapters/template-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template-renderer.d.ts","sourceRoot":"","sources":["../../src/adapters/template-renderer.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AASH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,kBAAkB;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,0DAA0D;IAC1D,QAAQ,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB,GAAG,wBAAwB,CAwG/F"}
+{"version":3,"file":"template-renderer.d.ts","sourceRoot":"","sources":["../../src/adapters/template-renderer.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AASH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,kBAAkB;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,qDAAqD;IACrD,QAAQ,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAsBD;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB,GAAG,wBAAwB,CAgF/F"}

package/bridge-runtime/iife-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iife-generator.d.ts","sourceRoot":"","sources":["../../src/bridge-runtime/iife-generator.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,EAAE,CAAC;IACvE,2BAA2B;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,wBAAwB;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,oBAAyB,GAAG,MAAM,CAyF7E;AAm7BD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,EACvD,OAAO,GAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAM,GACnD,MAAM,CAYR;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAAuB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;CAK9B,CAAC"}
+{"version":3,"file":"iife-generator.d.ts","sourceRoot":"","sources":["../../src/bridge-runtime/iife-generator.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,EAAE,CAAC;IACvE,2BAA2B;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,wBAAwB;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,oBAAyB,GAAG,MAAM,CA0G7E;AAm+BD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,EACvD,OAAO,GAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAM,GACnD,MAAM,CAYR;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAAuB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;CAK9B,CAAC"}

package/bridge-runtime/index.js

@@ -81,6 +81,19 @@ function generateBridgeIIFE(options = {}) {
   parts.push("});");
   parts.push("");
   parts.push("window.FrontMcpBridge = bridge;");
+  parts.push("function __showLoading() {");
+  parts.push('  var root = document.getElementById("root");');
+  parts.push("  if (root && !root.hasChildNodes()) {");
+  parts.push(
+    `    root.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;padding:2rem;color:#6b7280;font-family:system-ui,sans-serif"><div style="text-align:center"><div style="width:24px;height:24px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:__spin 0.6s linear infinite;margin:0 auto 12px"></div><div style="font-size:0.875rem">Loading widget...</div></div></div><style>@keyframes __spin{to{transform:rotate(360deg)}}</style>';`
+  );
+  parts.push("  }");
+  parts.push("}");
+  parts.push('if (document.readyState === "loading") {');
+  parts.push('  document.addEventListener("DOMContentLoaded", __showLoading);');
+  parts.push("} else {");
+  parts.push("  __showLoading();");
+  parts.push("}");
   parts.push("})();");
   const code = parts.join("\n");
   if (minify) {
@@ -257,7 +270,20 @@ var ExtAppsAdapter = {
       self.handleMessage(context, event);
     });
 
-    return self.performHandshake(context);
+    // Defer handshake until after the document is fully loaded.
+    // During document.write() (used by the sandbox proxy), postMessage
+    // from the inner iframe may not reach the parent. Waiting for DOMContentLoaded
+    // or using setTimeout ensures the iframe is fully attached.
+    return new Promise(function(resolve) {
+      function doHandshake() {
+        self.sendHandshake(context).then(resolve, resolve);
+      }
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', doHandshake);
+      } else {
+        setTimeout(doHandshake, 0);
+      }
+    });
   },
   handleMessage: function(context, event) {
     if (!this.isOriginTrusted(event.origin)) return;
@@ -351,32 +377,67 @@ var ExtAppsAdapter = {
       window.parent.postMessage({ jsonrpc: '2.0', id: id, method: method, params: params }, targetOrigin);
     });
   },
-  performHandshake: function(context) {
+  sendHandshake: function(context) {
+    // Send ui/initialize using '*' as target origin since TOFU hasn't
+    // been established yet. The response from the host will establish
+    // TOFU trust via handleMessage \u2192 isOriginTrusted.
     var self = this;
+    var id = ++this.requestId;
     var params = {
       appInfo: { name: 'FrontMCP Widget', version: '1.0.0' },
       appCapabilities: { tools: { listChanged: false } },
       protocolVersion: '2024-11-05'
     };
 
-    return this.sendRequest('ui/initialize', params).then(function(result) {
-      self.hostCapabilities = result.hostCapabilities || {};
-      self.capabilities = Object.assign({}, self.capabilities, {
-        canCallTools: Boolean(self.hostCapabilities.serverToolProxy),
-        canSendMessages: true,
-        canOpenLinks: Boolean(self.hostCapabilities.openLink),
-        supportsDisplayModes: true
-      });
-      if (result.hostContext) {
-        Object.assign(context.hostContext, result.hostContext);
-      }
+    return new Promise(function(resolve, reject) {
+      var timeout = setTimeout(function() {
+        delete self.pendingRequests[id];
+        // Handshake timeout is non-fatal \u2014 notifications may still arrive
+        resolve();
+      }, 10000);
+
+      self.pendingRequests[id] = {
+        resolve: function(result) {
+          self.hostCapabilities = result.hostCapabilities || {};
+          self.capabilities = Object.assign({}, self.capabilities, {
+            canCallTools: Boolean(self.hostCapabilities.serverTools || self.hostCapabilities.serverToolProxy),
+            canSendMessages: true,
+            canOpenLinks: Boolean(self.hostCapabilities.openLinks || self.hostCapabilities.openLink),
+            supportsDisplayModes: true
+          });
+          if (result.hostContext) {
+            Object.assign(context.hostContext, result.hostContext);
+          }
+          // Send ui/notifications/initialized to tell the host the view is ready.
+          // Per MCP Apps spec, the host waits for this before sending tool-result.
+          var targetOrigin = self.trustedOrigin || '*';
+          window.parent.postMessage({
+            jsonrpc: '2.0',
+            method: 'ui/notifications/initialized',
+            params: {}
+          }, targetOrigin);
+          resolve();
+        },
+        reject: function(err) { resolve(); }, // Non-fatal
+        timeout: timeout
+      };
+
+      // Use '*' for the initial handshake \u2014 we don't know the host origin yet.
+      // The sandbox proxy will relay this to the host.
+      window.parent.postMessage({
+        jsonrpc: '2.0', id: id, method: 'ui/initialize', params: params
+      }, '*');
     });
   },
+  performHandshake: function(context) {
+    return this.sendHandshake(context);
+  },
   callTool: function(context, name, args) {
-    if (!this.hostCapabilities.serverToolProxy) {
+    if (!this.hostCapabilities.serverTools && !this.hostCapabilities.serverToolProxy) {
       return Promise.reject(new Error('Server tool proxy not supported'));
     }
-    return this.sendRequest('ui/callServerTool', { name: name, arguments: args });
+    // Per ext-apps spec: use standard MCP method 'tools/call' (not 'ui/callServerTool')
+    return this.sendRequest('tools/call', { name: name, arguments: args || {} });
   },
   sendMessage: function(context, content) {
     return this.sendRequest('ui/message', { content: content });