@frontmcp/uipack 1.0.0-beta.12 → 1.0.0-beta.14

package/index.js

@@ -297,6 +297,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) {
@@ -473,7 +486,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;
@@ -567,32 +593,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 });
@@ -2773,6 +2834,7 @@ function escapeAttribute(str) {
 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)};`,
@@ -3103,22 +3165,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: {
@@ -3131,10 +3242,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,
@@ -3657,8 +3767,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,
@@ -3671,25 +3799,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontmcp/uipack",
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.14",
   "description": "FrontMCP UIpack - HTML shell builder, pluggable import resolver, and NPM component loader for MCP UI (React-free core)",
   "author": "AgentFront <info@agentfront.dev>",
   "homepage": "https://docs.agentfront.dev",

package/shell/data-injector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-injector.d.ts","sourceRoot":"","sources":["../../src/shell/data-injector.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE;IAChD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,GAAG,MAAM,CAWT;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,oDAAoD;IACpD,UAAU,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,CAAC;IACrC,gCAAgC;IAChC,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7D,kCAAkC;IAClC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9D,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,qCAAqC;IACrC,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;CACtC;AAID;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,eAAe,CA6BvD"}
+{"version":3,"file":"data-injector.d.ts","sourceRoot":"","sources":["../../src/shell/data-injector.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE;IAChD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,GAAG,MAAM,CAYT;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,oDAAoD;IACpD,UAAU,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,CAAC;IACrC,gCAAgC;IAChC,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7D,kCAAkC;IAClC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9D,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,qCAAqC;IACrC,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;CACtC;AAID;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,eAAe,CA6BvD"}

package/shell/index.js

@@ -162,6 +162,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)};`,
@@ -252,6 +253,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) {
@@ -428,7 +442,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;
@@ -522,32 +549,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 });