@frontmcp/uipack 1.8.6 → 1.8.7

package/esm/bridge-runtime/index.mjs

@@ -265,12 +265,38 @@ function __applyHostTheme(theme) {
   } catch (e) {}
 }
 
+function extractToolOutput(params) {
+  // A host sends a CallToolResult: prefer structuredContent, then parsed text, then the raw content.
+  if (!params) return undefined;
+  if (params.structuredContent !== undefined && params.structuredContent !== null) return params.structuredContent;
+  var content = params.content;
+  if (Array.isArray(content)) {
+    for (var i = 0; i < content.length; i++) {
+      var item = content[i];
+      if (item && item.type === 'text' && typeof item.text === 'string') {
+        try { return JSON.parse(item.text); } catch (e) { return item.text; }
+      }
+    }
+  }
+  return content;
+}
+
 function readInjectedData() {
   var data = { toolInput: {}, toolOutput: undefined, structuredContent: undefined };
   if (typeof window !== 'undefined') {
     if (window.__mcpToolInput) data.toolInput = window.__mcpToolInput;
     if (window.__mcpToolOutput) data.toolOutput = window.__mcpToolOutput;
     if (window.__mcpStructuredContent) data.structuredContent = window.__mcpStructuredContent;
+    // The OpenAI Apps SDK hands the widget its data as window.openai.toolInput / toolOutput
+    // (toolOutput is the tool's structuredContent).
+    var oa = window.openai;
+    if (oa && typeof oa === 'object') {
+      if (oa.toolInput && !window.__mcpToolInput) data.toolInput = oa.toolInput;
+      if (oa.toolOutput !== undefined && oa.toolOutput !== null) {
+        if (data.toolOutput === undefined) data.toolOutput = oa.toolOutput;
+        if (data.structuredContent === undefined) data.structuredContent = oa.toolOutput;
+      }
+    }
   }
   return data;
 }
@@ -319,7 +345,24 @@ var OpenAIAdapter = {
     if (sdk.displayMode) {
       context.hostContext.displayMode = sdk.displayMode;
     }
-    // Note: OpenAI SDK does not have an onContextChange equivalent
+    // The Apps SDK re-dispatches the changed globals in an 'openai:set_globals' event.
+    window.addEventListener('openai:set_globals', function(event) {
+      var globals = (event && event.detail && event.detail.globals) || window.openai || {};
+      if (globals.toolInput !== undefined && globals.toolInput !== null) {
+        context.toolInput = globals.toolInput;
+        window.dispatchEvent(new CustomEvent('tool:input', { detail: { arguments: context.toolInput } }));
+      }
+      if (globals.toolOutput !== undefined && globals.toolOutput !== null) {
+        context.structuredContent = globals.toolOutput;
+        context.notifyToolResult(globals.toolOutput);
+      }
+      if (globals.theme && globals.theme !== context.hostContext.theme) {
+        context.notifyContextChange({ theme: globals.theme });
+      }
+      if (globals.displayMode && globals.displayMode !== context.hostContext.displayMode) {
+        context.notifyContextChange({ displayMode: globals.displayMode });
+      }
+    });
     return Promise.resolve();
   },
   callTool: function(context, name, args) {
@@ -466,9 +509,10 @@ var ExtAppsAdapter = {
         window.dispatchEvent(new CustomEvent('tool:input-partial', { detail: { arguments: context.toolInput } }));
         break;
       case 'ui/notifications/tool-result':
-        context.toolOutput = params.content;
+        var resultOutput = extractToolOutput(params);
+        context.toolOutput = resultOutput;
         context.structuredContent = params.structuredContent;
-        context.notifyToolResult(params.content);
+        context.notifyToolResult(resultOutput);
         window.dispatchEvent(new CustomEvent('tool:result', { detail: params }));
         break;
       case 'ui/notifications/host-context-changed':
@@ -522,6 +566,15 @@ var ExtAppsAdapter = {
       window.parent.postMessage({ jsonrpc: '2.0', id: id, method: method, params: params }, targetOrigin);
     });
   },
+  sendNotification: function(method, params) {
+    // JSON-RPC notification: no id, no response. Same origin rule as sendRequest.
+    if (!this.trustedOrigin && this.trustedOrigins.length === 0) {
+      return Promise.reject(new Error('Cannot send notification: no trusted origin established'));
+    }
+    var targetOrigin = this.trustedOrigin || this.trustedOrigins[0];
+    window.parent.postMessage({ jsonrpc: '2.0', method: method, params: params }, targetOrigin);
+    return Promise.resolve();
+  },
   sendHandshake: function(context) {
     // Send ui/initialize using '*' as target origin since TOFU hasn't
     // been established yet. The response from the host will establish
@@ -587,7 +640,7 @@ var ExtAppsAdapter = {
     var pending = this.pendingSize;
     if (!pending) return;
     this.pendingSize = null;
-    this.sendRequest('ui/setSize', pending.params).then(function(result) {
+    this.sendNotification('ui/notifications/size-changed', pending.params).then(function(result) {
       for (var i = 0; i < pending.waiters.length; i++) pending.waiters[i].resolve(result);
     }, function(err) {
       for (var i = 0; i < pending.waiters.length; i++) pending.waiters[i].reject(err);
@@ -614,13 +667,11 @@ var ExtAppsAdapter = {
     return this.sendRequest('ui/setDisplayMode', { mode: mode });
   },
   setSize: function(context, size) {
-    // FrontMCP sizing channel \u2014 parallels ui/setDisplayMode. Reports the
-    // measured/desired widget dimensions to the host.
-    var params = {
-      height: size && size.height,
-      width: size && size.width,
-      aspectRatio: size && size.aspectRatio
-    };
+    // Standard ext-apps sizing: the view tells the host its dimensions with the
+    // ui/notifications/size-changed notification ({ width?, height? } in px).
+    var params = {};
+    if (size && typeof size.width === 'number') params.width = size.width;
+    if (size && typeof size.height === 'number') params.height = size.height;
     if (!this.handshakeSettled && !this.trustedOrigin && this.trustedOrigins.length === 0) {
       // No host origin yet: keep only the latest size and send it when the
       // handshake settles; every caller's promise follows that one request.
@@ -631,7 +682,7 @@ var ExtAppsAdapter = {
         self.pendingSize.waiters.push({ resolve: resolve, reject: reject });
       });
     }
-    return this.sendRequest('ui/setSize', params);
+    return this.sendNotification('ui/notifications/size-changed', params);
   },
   requestClose: function(context) {
     return this.sendRequest('ui/close', {});
@@ -1054,7 +1105,7 @@ FrontMcpBridge.prototype.requestDisplayMode = function(mode) {
 
 // Report a desired widget size to the host. \`size\` is { height?, width?, aspectRatio? }.
 // Per-adapter behaviour: Claude/generic no-op (host measures the DOM),
-// ext-apps sends ui/setSize, OpenAI forwards to its SDK when available.
+// ext-apps sends ui/notifications/size-changed, OpenAI forwards to its SDK when available.
 FrontMcpBridge.prototype.setSize = function(size) {
   if (!this._adapter) return Promise.reject(new Error('Not initialized'));
   if (!this._adapter.setSize) return Promise.resolve();
@@ -1156,7 +1207,7 @@ FrontMcpBridge.prototype._setupDataToolCallHandler = function() {
         target.classList.add('opacity-50', 'cursor-not-allowed');
 
         // Add spinner for buttons
-        var spinner = '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
+        var spinner = '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 inline" style="width:1em;height:1em;vertical-align:-0.125em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
         if (target.tagName === 'BUTTON') {
           target.innerHTML = spinner + 'Loading...';
         }
@@ -1237,7 +1288,22 @@ function minifyJS(code) {
   if (code.length > MAX_MINIFY_CODE_LENGTH) {
     return code;
   }
-  return code.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^:])\/\/.*$/gm, "$1").replace(/\s+/g, " ").replace(/\s*([{};,:()[\]])\s*/g, "$1").replace(/;\}/g, "}").trim();
+  const out = [];
+  let inBlockComment = false;
+  for (const raw of code.split("\n")) {
+    const line = raw.trim();
+    if (inBlockComment) {
+      if (line.includes("*/")) inBlockComment = false;
+      continue;
+    }
+    if (line === "" || line.startsWith("//")) continue;
+    if (line.startsWith("/*")) {
+      if (!line.includes("*/")) inBlockComment = true;
+      continue;
+    }
+    out.push(line);
+  }
+  return out.join("\n");
 }
 function generatePlatformBundle(platform, options = {}) {
   const platformAdapters = {

package/esm/component/index.mjs

@@ -1092,12 +1092,38 @@ function __applyHostTheme(theme) {
   } catch (e) {}
 }
 
+function extractToolOutput(params) {
+  // A host sends a CallToolResult: prefer structuredContent, then parsed text, then the raw content.
+  if (!params) return undefined;
+  if (params.structuredContent !== undefined && params.structuredContent !== null) return params.structuredContent;
+  var content = params.content;
+  if (Array.isArray(content)) {
+    for (var i = 0; i < content.length; i++) {
+      var item = content[i];
+      if (item && item.type === 'text' && typeof item.text === 'string') {
+        try { return JSON.parse(item.text); } catch (e) { return item.text; }
+      }
+    }
+  }
+  return content;
+}
+
 function readInjectedData() {
   var data = { toolInput: {}, toolOutput: undefined, structuredContent: undefined };
   if (typeof window !== 'undefined') {
     if (window.__mcpToolInput) data.toolInput = window.__mcpToolInput;
     if (window.__mcpToolOutput) data.toolOutput = window.__mcpToolOutput;
     if (window.__mcpStructuredContent) data.structuredContent = window.__mcpStructuredContent;
+    // The OpenAI Apps SDK hands the widget its data as window.openai.toolInput / toolOutput
+    // (toolOutput is the tool's structuredContent).
+    var oa = window.openai;
+    if (oa && typeof oa === 'object') {
+      if (oa.toolInput && !window.__mcpToolInput) data.toolInput = oa.toolInput;
+      if (oa.toolOutput !== undefined && oa.toolOutput !== null) {
+        if (data.toolOutput === undefined) data.toolOutput = oa.toolOutput;
+        if (data.structuredContent === undefined) data.structuredContent = oa.toolOutput;
+      }
+    }
   }
   return data;
 }
@@ -1146,7 +1172,24 @@ var OpenAIAdapter = {
     if (sdk.displayMode) {
       context.hostContext.displayMode = sdk.displayMode;
     }
-    // Note: OpenAI SDK does not have an onContextChange equivalent
+    // The Apps SDK re-dispatches the changed globals in an 'openai:set_globals' event.
+    window.addEventListener('openai:set_globals', function(event) {
+      var globals = (event && event.detail && event.detail.globals) || window.openai || {};
+      if (globals.toolInput !== undefined && globals.toolInput !== null) {
+        context.toolInput = globals.toolInput;
+        window.dispatchEvent(new CustomEvent('tool:input', { detail: { arguments: context.toolInput } }));
+      }
+      if (globals.toolOutput !== undefined && globals.toolOutput !== null) {
+        context.structuredContent = globals.toolOutput;
+        context.notifyToolResult(globals.toolOutput);
+      }
+      if (globals.theme && globals.theme !== context.hostContext.theme) {
+        context.notifyContextChange({ theme: globals.theme });
+      }
+      if (globals.displayMode && globals.displayMode !== context.hostContext.displayMode) {
+        context.notifyContextChange({ displayMode: globals.displayMode });
+      }
+    });
     return Promise.resolve();
   },
   callTool: function(context, name, args) {
@@ -1293,9 +1336,10 @@ var ExtAppsAdapter = {
         window.dispatchEvent(new CustomEvent('tool:input-partial', { detail: { arguments: context.toolInput } }));
         break;
       case 'ui/notifications/tool-result':
-        context.toolOutput = params.content;
+        var resultOutput = extractToolOutput(params);
+        context.toolOutput = resultOutput;
         context.structuredContent = params.structuredContent;
-        context.notifyToolResult(params.content);
+        context.notifyToolResult(resultOutput);
         window.dispatchEvent(new CustomEvent('tool:result', { detail: params }));
         break;
       case 'ui/notifications/host-context-changed':
@@ -1349,6 +1393,15 @@ var ExtAppsAdapter = {
       window.parent.postMessage({ jsonrpc: '2.0', id: id, method: method, params: params }, targetOrigin);
     });
   },
+  sendNotification: function(method, params) {
+    // JSON-RPC notification: no id, no response. Same origin rule as sendRequest.
+    if (!this.trustedOrigin && this.trustedOrigins.length === 0) {
+      return Promise.reject(new Error('Cannot send notification: no trusted origin established'));
+    }
+    var targetOrigin = this.trustedOrigin || this.trustedOrigins[0];
+    window.parent.postMessage({ jsonrpc: '2.0', method: method, params: params }, targetOrigin);
+    return Promise.resolve();
+  },
   sendHandshake: function(context) {
     // Send ui/initialize using '*' as target origin since TOFU hasn't
     // been established yet. The response from the host will establish
@@ -1414,7 +1467,7 @@ var ExtAppsAdapter = {
     var pending = this.pendingSize;
     if (!pending) return;
     this.pendingSize = null;
-    this.sendRequest('ui/setSize', pending.params).then(function(result) {
+    this.sendNotification('ui/notifications/size-changed', pending.params).then(function(result) {
       for (var i = 0; i < pending.waiters.length; i++) pending.waiters[i].resolve(result);
     }, function(err) {
       for (var i = 0; i < pending.waiters.length; i++) pending.waiters[i].reject(err);
@@ -1441,13 +1494,11 @@ var ExtAppsAdapter = {
     return this.sendRequest('ui/setDisplayMode', { mode: mode });
   },
   setSize: function(context, size) {
-    // FrontMCP sizing channel \u2014 parallels ui/setDisplayMode. Reports the
-    // measured/desired widget dimensions to the host.
-    var params = {
-      height: size && size.height,
-      width: size && size.width,
-      aspectRatio: size && size.aspectRatio
-    };
+    // Standard ext-apps sizing: the view tells the host its dimensions with the
+    // ui/notifications/size-changed notification ({ width?, height? } in px).
+    var params = {};
+    if (size && typeof size.width === 'number') params.width = size.width;
+    if (size && typeof size.height === 'number') params.height = size.height;
     if (!this.handshakeSettled && !this.trustedOrigin && this.trustedOrigins.length === 0) {
       // No host origin yet: keep only the latest size and send it when the
       // handshake settles; every caller's promise follows that one request.
@@ -1458,7 +1509,7 @@ var ExtAppsAdapter = {
         self.pendingSize.waiters.push({ resolve: resolve, reject: reject });
       });
     }
-    return this.sendRequest('ui/setSize', params);
+    return this.sendNotification('ui/notifications/size-changed', params);
   },
   requestClose: function(context) {
     return this.sendRequest('ui/close', {});
@@ -1881,7 +1932,7 @@ FrontMcpBridge.prototype.requestDisplayMode = function(mode) {
 
 // Report a desired widget size to the host. \`size\` is { height?, width?, aspectRatio? }.
 // Per-adapter behaviour: Claude/generic no-op (host measures the DOM),
-// ext-apps sends ui/setSize, OpenAI forwards to its SDK when available.
+// ext-apps sends ui/notifications/size-changed, OpenAI forwards to its SDK when available.
 FrontMcpBridge.prototype.setSize = function(size) {
   if (!this._adapter) return Promise.reject(new Error('Not initialized'));
   if (!this._adapter.setSize) return Promise.resolve();
@@ -1983,7 +2034,7 @@ FrontMcpBridge.prototype._setupDataToolCallHandler = function() {
         target.classList.add('opacity-50', 'cursor-not-allowed');
 
         // Add spinner for buttons
-        var spinner = '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
+        var spinner = '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 inline" style="width:1em;height:1em;vertical-align:-0.125em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
         if (target.tagName === 'BUTTON') {
           target.innerHTML = spinner + 'Loading...';
         }
@@ -2064,7 +2115,22 @@ function minifyJS(code) {
   if (code.length > MAX_MINIFY_CODE_LENGTH) {
     return code;
   }
-  return code.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^:])\/\/.*$/gm, "$1").replace(/\s+/g, " ").replace(/\s*([{};,:()[\]])\s*/g, "$1").replace(/;\}/g, "}").trim();
+  const out = [];
+  let inBlockComment = false;
+  for (const raw of code.split("\n")) {
+    const line = raw.trim();
+    if (inBlockComment) {
+      if (line.includes("*/")) inBlockComment = false;
+      continue;
+    }
+    if (line === "" || line.startsWith("//")) continue;
+    if (line.startsWith("/*")) {
+      if (!line.includes("*/")) inBlockComment = true;
+      continue;
+    }
+    out.push(line);
+  }
+  return out.join("\n");
 }
 function generatePlatformBundle(platform, options = {}) {
   const platformAdapters = {