@frontmcp/uipack 1.9.1 → 1.9.3

package/component/index.js

@@ -855,6 +855,8 @@ ${json}
 }
 
 // libs/uipack/src/bridge-runtime/iife-generator.ts
+var WIDGET_CALL_META_KEY = "frontmcp/widgetCall";
+var MCP_APPS_DISPLAY_MODES = ["inline", "fullscreen", "pip"];
 function generateBridgeIIFE(options = {}) {
   const { debug = false, trustedOrigins = [], minify = false } = options;
   const adapters = options.adapters || ["openai", "ext-apps", "claude", "gemini", "generic"];
@@ -902,6 +904,7 @@ function generateBridgeIIFE(options = {}) {
   parts.push("bridge.initialize().then(function() {");
   parts.push('  log("Bridge initialized with adapter: " + bridge.adapterId);');
   parts.push('  window.dispatchEvent(new CustomEvent("bridge:ready", { detail: { adapter: bridge.adapterId } }));');
+  parts.push("  if (window.__mcpDisplayMode) bridge.requestDisplayMode(window.__mcpDisplayMode).catch(function() {});");
   parts.push("}).catch(function(err) {");
   parts.push('  console.error("[FrontMcpBridge] Init failed:", err);');
   parts.push('  window.dispatchEvent(new CustomEvent("bridge:error", { detail: { error: err } }));');
@@ -1235,6 +1238,9 @@ var OpenAIAdapter = {
     return Promise.resolve();
   },
   requestDisplayMode: function(context, mode) {
+    if (window.openai && typeof window.openai.requestDisplayMode === 'function') {
+      return Promise.resolve(window.openai.requestDisplayMode({ mode: mode }));
+    }
     return Promise.resolve();
   },
   setSize: function(context, size) {
@@ -1272,6 +1278,7 @@ var ExtAppsAdapter = {
   hostCapabilities: {},
   handshakeSettled: false,
   pendingSize: null,
+  modelContext: null,
   canHandle: function() {
     if (typeof window === 'undefined') return false;
     if (window.parent === window) return false;
@@ -1350,8 +1357,19 @@ var ExtAppsAdapter = {
 
     if ('method' in data && !('id' in data)) {
       this.handleNotification(context, data);
+      return;
+    }
+
+    if ('method' in data && 'id' in data) {
+      this.handleRequest(context, data, event.origin);
     }
   },
+  handleRequest: function(context, request, origin) {
+    // ui/resource-teardown: the host is about to unmount the view; reply once listeners have cleaned up.
+    if (request.method !== 'ui/resource-teardown') return;
+    window.dispatchEvent(new CustomEvent('bridge:teardown', { detail: {} }));
+    window.parent.postMessage({ jsonrpc: '2.0', id: request.id, result: {} }, origin);
+  },
   handleNotification: function(context, notification) {
     var params = notification.params || {};
     switch (notification.method) {
@@ -1375,6 +1393,7 @@ var ExtAppsAdapter = {
         Object.assign(context.hostContext, params);
         context.notifyContextChange(params);
         break;
+      case 'ui/notifications/tool-cancelled':
       case 'ui/notifications/cancelled':
         window.dispatchEvent(new CustomEvent('tool:cancelled', { detail: { reason: params.reason } }));
         break;
@@ -1439,7 +1458,7 @@ var ExtAppsAdapter = {
     var id = ++this.requestId;
     var params = {
       appInfo: { name: 'FrontMCP Widget', version: '1.0.0' },
-      appCapabilities: { tools: { listChanged: false } },
+      appCapabilities: { tools: { listChanged: false }, availableDisplayModes: ${JSON.stringify(MCP_APPS_DISPLAY_MODES)} },
       protocolVersion: '2024-11-05'
     };
 
@@ -1507,20 +1526,25 @@ var ExtAppsAdapter = {
       return Promise.reject(new Error('Server tool proxy not supported'));
     }
     // Per ext-apps spec: use standard MCP method 'tools/call' (not 'ui/callServerTool')
-    return this.sendRequest('tools/call', { name: name, arguments: args || {} });
+    return this.sendRequest('tools/call', { name: name, arguments: args || {}, _meta: { '${WIDGET_CALL_META_KEY}': true } });
   },
   sendMessage: function(context, content) {
     return this.sendRequest('ui/message', { content: content });
   },
   openLink: function(context, url) {
-    if (!this.hostCapabilities.openLink) {
+    if (!this.hostCapabilities.openLinks && !this.hostCapabilities.openLink) {
       window.open(url, '_blank', 'noopener,noreferrer');
       return Promise.resolve();
     }
-    return this.sendRequest('ui/openLink', { url: url });
+    return this.sendRequest('ui/open-link', { url: url });
   },
   requestDisplayMode: function(context, mode) {
-    return this.sendRequest('ui/setDisplayMode', { mode: mode });
+    // Ask only for a mode the host offers; it answers with the mode it actually set.
+    var offered = context.hostContext.availableDisplayModes;
+    if (!Array.isArray(offered) || offered.indexOf(mode) === -1) {
+      return Promise.reject(new Error('Display mode "' + mode + '" is not available on this host'));
+    }
+    return this.sendRequest('ui/request-display-mode', { mode: mode });
   },
   setSize: function(context, size) {
     // Standard ext-apps sizing: the view tells the host its dimensions with the
@@ -1541,14 +1565,22 @@ var ExtAppsAdapter = {
     return this.sendNotification('ui/notifications/size-changed', params);
   },
   requestClose: function(context) {
-    return this.sendRequest('ui/close', {});
+    // The host decides whether to tear the view down; it answers with ui/resource-teardown if it does.
+    return this.sendNotification('ui/notifications/request-teardown', {});
   },
   // Extended ext-apps methods (full specification)
   updateModelContext: function(context, data, merge) {
-    if (!this.hostCapabilities.modelContextUpdate) {
+    if (!this.hostCapabilities.updateModelContext && !this.hostCapabilities.modelContextUpdate) {
       return Promise.reject(new Error('Model context update not supported'));
     }
-    return this.sendRequest('ui/updateModelContext', { context: data, merge: merge !== false });
+    // The host keeps only the latest update, so an object merges into the last one here.
+    var isObject = data !== null && typeof data === 'object' && !Array.isArray(data);
+    var modelContext = isObject && merge !== false ? Object.assign({}, this.modelContext, data) : data;
+    this.modelContext = isObject ? modelContext : null;
+    var text = typeof modelContext === 'string' ? modelContext : JSON.stringify(modelContext);
+    var params = { content: [{ type: 'text', text: text }] };
+    if (isObject) params.structuredContent = modelContext;
+    return this.sendRequest('ui/update-model-context', params);
   },
   log: function(context, level, message, data) {
     if (!this.hostCapabilities.logging) {
@@ -1557,7 +1589,10 @@ var ExtAppsAdapter = {
       logFn('[Widget] ' + message, data);
       return Promise.resolve();
     }
-    return this.sendRequest('ui/log', { level: level, message: message, data: data });
+    return this.sendNotification('notifications/message', {
+      level: level === 'warn' ? 'warning' : level,
+      data: data === undefined ? message : { message: message, data: data }
+    });
   },
   registerTool: function(context, name, description, inputSchema) {
     if (!this.hostCapabilities.widgetTools) {
@@ -1954,8 +1989,10 @@ FrontMcpBridge.prototype.openLink = function(url) {
 FrontMcpBridge.prototype.requestDisplayMode = function(mode) {
   if (!this._adapter) return Promise.reject(new Error('Not initialized'));
   var self = this;
-  return this._adapter.requestDisplayMode(this._context, mode).then(function() {
-    self._context.hostContext.displayMode = mode;
+  return this._adapter.requestDisplayMode(this._context, mode).then(function(result) {
+    // The host may set another mode than the one asked for, e.g. when it refuses the change.
+    var setMode = result && result.mode;
+    if (${JSON.stringify(MCP_APPS_DISPLAY_MODES)}.indexOf(setMode) !== -1) self._context.hostContext.displayMode = setMode;
   });
 };
 
@@ -2307,7 +2344,7 @@ function hasSizing(sizing) {
   return sizing.preferredHeight !== void 0 || sizing.minHeight !== void 0 || sizing.maxHeight !== void 0 || sizing.aspectRatio !== void 0 || sizing.autoResize !== void 0;
 }
 function buildDataInjectionScript(options) {
-  const { toolName, input, output, structuredContent, sizing } = options;
+  const { toolName, input, output, structuredContent, sizing, displayMode } = options;
   const lines = [
     `window.__mcpAppsEnabled = true;`,
     `window.__mcpToolName = ${safeJsonForScript(toolName)};`,
@@ -2318,6 +2355,9 @@ function buildDataInjectionScript(options) {
   if (hasSizing(sizing)) {
     lines.push(`window.__mcpWidgetSizing = ${safeJsonForScript(sizing)};`);
   }
+  if (displayMode && displayMode !== "inline") {
+    lines.push(`window.__mcpDisplayMode = ${safeJsonForScript(displayMode)};`);
+  }
   return `<script>
 ${lines.join("\n")}
 </script>`;
@@ -2383,7 +2423,8 @@ function resolveDataInjectionScript(args) {
     input: args.input,
     output: args.output,
     structuredContent: args.structuredContent,
-    sizing: args.sizing
+    sizing: args.sizing,
+    displayMode: args.displayMode
   });
 }
 function buildShell(content, config) {
@@ -2396,7 +2437,8 @@ function buildShell(content, config) {
     structuredContent,
     includeBridge = true,
     title,
-    sizing
+    sizing,
+    displayMode
   } = config;
   const { customShell, dataInjection } = config;
   const dataScript = resolveDataInjectionScript({
@@ -2405,7 +2447,8 @@ function buildShell(content, config) {
     input,
     output,
     structuredContent,
-    sizing
+    sizing,
+    displayMode
   });
   if (!withShell) {
     const html2 = `${dataScript}
@@ -2426,6 +2469,7 @@ ${content}`;
       includeBridge,
       title,
       sizing,
+      displayMode,
       dataInjection
     });
   }
@@ -2481,7 +2525,8 @@ function buildCustomShell(content, customShell, ctx) {
     input: ctx.input,
     output: ctx.output,
     structuredContent: ctx.structuredContent,
-    sizing: ctx.sizing
+    sizing: ctx.sizing,
+    displayMode: ctx.displayMode
   });
   const sizingStyle = buildSizingStyleTag(ctx.sizing);
   const dataWithSizing = sizingStyle ? `${dataScript}

package/esm/adapters/index.mjs

@@ -534,6 +534,8 @@ ${json}
 }
 
 // libs/uipack/src/bridge-runtime/iife-generator.ts
+var WIDGET_CALL_META_KEY = "frontmcp/widgetCall";
+var MCP_APPS_DISPLAY_MODES = ["inline", "fullscreen", "pip"];
 function generateBridgeIIFE(options = {}) {
   const { debug = false, trustedOrigins = [], minify = false } = options;
   const adapters = options.adapters || ["openai", "ext-apps", "claude", "gemini", "generic"];
@@ -581,6 +583,7 @@ function generateBridgeIIFE(options = {}) {
   parts.push("bridge.initialize().then(function() {");
   parts.push('  log("Bridge initialized with adapter: " + bridge.adapterId);');
   parts.push('  window.dispatchEvent(new CustomEvent("bridge:ready", { detail: { adapter: bridge.adapterId } }));');
+  parts.push("  if (window.__mcpDisplayMode) bridge.requestDisplayMode(window.__mcpDisplayMode).catch(function() {});");
   parts.push("}).catch(function(err) {");
   parts.push('  console.error("[FrontMcpBridge] Init failed:", err);');
   parts.push('  window.dispatchEvent(new CustomEvent("bridge:error", { detail: { error: err } }));');
@@ -914,6 +917,9 @@ var OpenAIAdapter = {
     return Promise.resolve();
   },
   requestDisplayMode: function(context, mode) {
+    if (window.openai && typeof window.openai.requestDisplayMode === 'function') {
+      return Promise.resolve(window.openai.requestDisplayMode({ mode: mode }));
+    }
     return Promise.resolve();
   },
   setSize: function(context, size) {
@@ -951,6 +957,7 @@ var ExtAppsAdapter = {
   hostCapabilities: {},
   handshakeSettled: false,
   pendingSize: null,
+  modelContext: null,
   canHandle: function() {
     if (typeof window === 'undefined') return false;
     if (window.parent === window) return false;
@@ -1029,8 +1036,19 @@ var ExtAppsAdapter = {
 
     if ('method' in data && !('id' in data)) {
       this.handleNotification(context, data);
+      return;
+    }
+
+    if ('method' in data && 'id' in data) {
+      this.handleRequest(context, data, event.origin);
     }
   },
+  handleRequest: function(context, request, origin) {
+    // ui/resource-teardown: the host is about to unmount the view; reply once listeners have cleaned up.
+    if (request.method !== 'ui/resource-teardown') return;
+    window.dispatchEvent(new CustomEvent('bridge:teardown', { detail: {} }));
+    window.parent.postMessage({ jsonrpc: '2.0', id: request.id, result: {} }, origin);
+  },
   handleNotification: function(context, notification) {
     var params = notification.params || {};
     switch (notification.method) {
@@ -1054,6 +1072,7 @@ var ExtAppsAdapter = {
         Object.assign(context.hostContext, params);
         context.notifyContextChange(params);
         break;
+      case 'ui/notifications/tool-cancelled':
       case 'ui/notifications/cancelled':
         window.dispatchEvent(new CustomEvent('tool:cancelled', { detail: { reason: params.reason } }));
         break;
@@ -1118,7 +1137,7 @@ var ExtAppsAdapter = {
     var id = ++this.requestId;
     var params = {
       appInfo: { name: 'FrontMCP Widget', version: '1.0.0' },
-      appCapabilities: { tools: { listChanged: false } },
+      appCapabilities: { tools: { listChanged: false }, availableDisplayModes: ${JSON.stringify(MCP_APPS_DISPLAY_MODES)} },
       protocolVersion: '2024-11-05'
     };
 
@@ -1186,20 +1205,25 @@ var ExtAppsAdapter = {
       return Promise.reject(new Error('Server tool proxy not supported'));
     }
     // Per ext-apps spec: use standard MCP method 'tools/call' (not 'ui/callServerTool')
-    return this.sendRequest('tools/call', { name: name, arguments: args || {} });
+    return this.sendRequest('tools/call', { name: name, arguments: args || {}, _meta: { '${WIDGET_CALL_META_KEY}': true } });
   },
   sendMessage: function(context, content) {
     return this.sendRequest('ui/message', { content: content });
   },
   openLink: function(context, url) {
-    if (!this.hostCapabilities.openLink) {
+    if (!this.hostCapabilities.openLinks && !this.hostCapabilities.openLink) {
       window.open(url, '_blank', 'noopener,noreferrer');
       return Promise.resolve();
     }
-    return this.sendRequest('ui/openLink', { url: url });
+    return this.sendRequest('ui/open-link', { url: url });
   },
   requestDisplayMode: function(context, mode) {
-    return this.sendRequest('ui/setDisplayMode', { mode: mode });
+    // Ask only for a mode the host offers; it answers with the mode it actually set.
+    var offered = context.hostContext.availableDisplayModes;
+    if (!Array.isArray(offered) || offered.indexOf(mode) === -1) {
+      return Promise.reject(new Error('Display mode "' + mode + '" is not available on this host'));
+    }
+    return this.sendRequest('ui/request-display-mode', { mode: mode });
   },
   setSize: function(context, size) {
     // Standard ext-apps sizing: the view tells the host its dimensions with the
@@ -1220,14 +1244,22 @@ var ExtAppsAdapter = {
     return this.sendNotification('ui/notifications/size-changed', params);
   },
   requestClose: function(context) {
-    return this.sendRequest('ui/close', {});
+    // The host decides whether to tear the view down; it answers with ui/resource-teardown if it does.
+    return this.sendNotification('ui/notifications/request-teardown', {});
   },
   // Extended ext-apps methods (full specification)
   updateModelContext: function(context, data, merge) {
-    if (!this.hostCapabilities.modelContextUpdate) {
+    if (!this.hostCapabilities.updateModelContext && !this.hostCapabilities.modelContextUpdate) {
       return Promise.reject(new Error('Model context update not supported'));
     }
-    return this.sendRequest('ui/updateModelContext', { context: data, merge: merge !== false });
+    // The host keeps only the latest update, so an object merges into the last one here.
+    var isObject = data !== null && typeof data === 'object' && !Array.isArray(data);
+    var modelContext = isObject && merge !== false ? Object.assign({}, this.modelContext, data) : data;
+    this.modelContext = isObject ? modelContext : null;
+    var text = typeof modelContext === 'string' ? modelContext : JSON.stringify(modelContext);
+    var params = { content: [{ type: 'text', text: text }] };
+    if (isObject) params.structuredContent = modelContext;
+    return this.sendRequest('ui/update-model-context', params);
   },
   log: function(context, level, message, data) {
     if (!this.hostCapabilities.logging) {
@@ -1236,7 +1268,10 @@ var ExtAppsAdapter = {
       logFn('[Widget] ' + message, data);
       return Promise.resolve();
     }
-    return this.sendRequest('ui/log', { level: level, message: message, data: data });
+    return this.sendNotification('notifications/message', {
+      level: level === 'warn' ? 'warning' : level,
+      data: data === undefined ? message : { message: message, data: data }
+    });
   },
   registerTool: function(context, name, description, inputSchema) {
     if (!this.hostCapabilities.widgetTools) {
@@ -1633,8 +1668,10 @@ FrontMcpBridge.prototype.openLink = function(url) {
 FrontMcpBridge.prototype.requestDisplayMode = function(mode) {
   if (!this._adapter) return Promise.reject(new Error('Not initialized'));
   var self = this;
-  return this._adapter.requestDisplayMode(this._context, mode).then(function() {
-    self._context.hostContext.displayMode = mode;
+  return this._adapter.requestDisplayMode(this._context, mode).then(function(result) {
+    // The host may set another mode than the one asked for, e.g. when it refuses the change.
+    var setMode = result && result.mode;
+    if (${JSON.stringify(MCP_APPS_DISPLAY_MODES)}.indexOf(setMode) !== -1) self._context.hostContext.displayMode = setMode;
   });
 };
 
@@ -2009,7 +2046,7 @@ function hasSizing(sizing) {
   return sizing.preferredHeight !== void 0 || sizing.minHeight !== void 0 || sizing.maxHeight !== void 0 || sizing.aspectRatio !== void 0 || sizing.autoResize !== void 0;
 }
 function buildDataInjectionScript(options) {
-  const { toolName, input, output, structuredContent, sizing } = options;
+  const { toolName, input, output, structuredContent, sizing, displayMode } = options;
   const lines = [
     `window.__mcpAppsEnabled = true;`,
     `window.__mcpToolName = ${safeJsonForScript(toolName)};`,
@@ -2020,6 +2057,9 @@ function buildDataInjectionScript(options) {
   if (hasSizing(sizing)) {
     lines.push(`window.__mcpWidgetSizing = ${safeJsonForScript(sizing)};`);
   }
+  if (displayMode && displayMode !== "inline") {
+    lines.push(`window.__mcpDisplayMode = ${safeJsonForScript(displayMode)};`);
+  }
   return `<script>
 ${lines.join("\n")}
 </script>`;
@@ -2111,7 +2151,8 @@ function resolveDataInjectionScript(args) {
     input: args.input,
     output: args.output,
     structuredContent: args.structuredContent,
-    sizing: args.sizing
+    sizing: args.sizing,
+    displayMode: args.displayMode
   });
 }
 function buildShell(content, config) {
@@ -2124,7 +2165,8 @@ function buildShell(content, config) {
     structuredContent,
     includeBridge = true,
     title,
-    sizing
+    sizing,
+    displayMode
   } = config;
   const { customShell, dataInjection } = config;
   const dataScript = resolveDataInjectionScript({
@@ -2133,7 +2175,8 @@ function buildShell(content, config) {
     input,
     output,
     structuredContent,
-    sizing
+    sizing,
+    displayMode
   });
   if (!withShell) {
     const html3 = `${dataScript}
@@ -2154,6 +2197,7 @@ ${content}`;
       includeBridge,
       title,
       sizing,
+      displayMode,
       dataInjection
     });
   }
@@ -2209,7 +2253,8 @@ function buildCustomShell(content, customShell, ctx) {
     input: ctx.input,
     output: ctx.output,
     structuredContent: ctx.structuredContent,
-    sizing: ctx.sizing
+    sizing: ctx.sizing,
+    displayMode: ctx.displayMode
   });
   const sizingStyle = buildSizingStyleTag(ctx.sizing);
   const dataWithSizing = sizingStyle ? `${dataScript}
@@ -3048,7 +3093,7 @@ function noticeStringResult(toolName, logger) {
   if (noticedStringResultTools.has(toolName)) return;
   noticedStringResultTools.add(toolName);
   logger.warn(
-    `[frontmcp] The UI template of tool "${toolName}" returned a plain string containing markup, which is rendered as HTML. FrontMCP 1.9 will HTML-escape plain string results by default. Build the markup with ctx.helpers.html\`\u2026\` (interpolated values are escaped) or wrap safe markup with ctx.helpers.trustedHtml(), then set ui.escapeStringResults: true (or escapeStringResults: false to keep the current behaviour without this notice). See ${STRING_RESULT_DOCS}`
+    `[frontmcp] The UI template of tool "${toolName}" returned a plain string containing markup. Since 1.9.2, FrontMCP HTML-escapes plain string results by default, so it is shown as text. Build the markup with ctx.helpers.html\`\u2026\` (interpolated values are escaped) or wrap safe markup with ctx.helpers.trustedHtml(). Set ui.escapeStringResults: false to render plain strings as markup, or true to silence this notice. See ${STRING_RESULT_DOCS}`
   );
 }
 function renderUnwrappedResult(rawResult, options) {
@@ -3058,13 +3103,14 @@ function renderUnwrappedResult(rawResult, options) {
   if (typeof rawResult !== "string") {
     return `<pre>${escapeHtml(JSON.stringify(rawResult, null, 2))}</pre>`;
   }
-  if (detectContentType(rawResult) !== "html" || options.escapeStringResults === true) {
-    return escapeHtml(rawResult);
+  const looksLikeMarkup = detectContentType(rawResult) === "html";
+  if (looksLikeMarkup && options.escapeStringResults === false) {
+    return rawResult;
   }
-  if (options.escapeStringResults === void 0) {
+  if (looksLikeMarkup && options.escapeStringResults === void 0) {
     noticeStringResult(options.toolName, options.logger ?? console);
   }
-  return rawResult;
+  return escapeHtml(rawResult);
 }
 var warnedComponentReferences = /* @__PURE__ */ new WeakMap();
 function warnComponentReference(template, toolName, logger) {
@@ -3076,7 +3122,18 @@ function warnComponentReference(template, toolName, logger) {
     `[FrontMCP] Tool "${toolName}": \`ui.template\` is a React component reference, which cannot be bundled (there is no source file to compile), so the widget would render an empty page. Use \`template: { file: './widget.tsx' }\` instead.`
   );
 }
-function isReactElement(value) {
+var COMPILED_JSX_PATTERN = /\b(?:React\.createElement|_?jsx(?:s|DEV)?)\)?\s*\(/;
+function isComponentReference(template) {
+  if (isReactTypedObject(template)) return true;
+  if (typeof template !== "function" || detectUIType(template) !== "react") return false;
+  return isDefinitelyReactComponent(template) || COMPILED_JSX_PATTERN.test(Function.prototype.toString.call(template));
+}
+function warnIfComponentReference(toolName, template, logger = console) {
+  if (!isComponentReference(template)) return false;
+  warnComponentReference(template, toolName, logger);
+  return true;
+}
+function isReactTypedObject(value) {
   return typeof value === "object" && value !== null && "$$typeof" in value;
 }
 function isDefinitelyReactComponent(template) {
@@ -3095,6 +3152,7 @@ function renderToolTemplate(options) {
     includeBridge: true,
     resolver,
     sizing,
+    displayMode: options.displayMode,
     csp: options.csp ? buildCspConfig(resolver, options.csp) : void 0
   };
   let html2;
@@ -3116,7 +3174,7 @@ function renderToolTemplate(options) {
     if (isHtmlBuilder) {
       try {
         rawResult = template(ctx);
-        isHtmlBuilder = !isReactElement(rawResult);
+        isHtmlBuilder = !isReactTypedObject(rawResult);
       } catch (error) {
         if (uiType !== "react") throw error;
         isHtmlBuilder = false;
@@ -3145,6 +3203,7 @@ function renderToolTemplate(options) {
     hash = shellResult.hash;
     size = shellResult.size;
   } else {
+    if (isReactTypedObject(template)) warnComponentReference(template, toolName, options.logger ?? console);
     const shellResult = buildShell('<div id="root"></div>', shellConfig);
     html2 = shellResult.html;
     hash = shellResult.hash;
@@ -3258,5 +3317,6 @@ export {
   isUIRenderFailure,
   renderToolTemplate,
   resolveServingMode,
+  warnIfComponentReference,
   wrapDetectedContent
 };

package/esm/bridge-runtime/index.mjs

@@ -2,6 +2,8 @@ var __frontmcpModule = typeof process !== "undefined" && typeof process.getBuilt
 const require = __frontmcpModule ? __frontmcpModule.createRequire(import.meta.url || 'file:///') : undefined;
 // __frontmcpCreateRequire
 // libs/uipack/src/bridge-runtime/iife-generator.ts
+var WIDGET_CALL_META_KEY = "frontmcp/widgetCall";
+var MCP_APPS_DISPLAY_MODES = ["inline", "fullscreen", "pip"];
 function generateBridgeIIFE(options = {}) {
   const { debug = false, trustedOrigins = [], minify = false } = options;
   const adapters = options.adapters || ["openai", "ext-apps", "claude", "gemini", "generic"];
@@ -49,6 +51,7 @@ function generateBridgeIIFE(options = {}) {
   parts.push("bridge.initialize().then(function() {");
   parts.push('  log("Bridge initialized with adapter: " + bridge.adapterId);');
   parts.push('  window.dispatchEvent(new CustomEvent("bridge:ready", { detail: { adapter: bridge.adapterId } }));');
+  parts.push("  if (window.__mcpDisplayMode) bridge.requestDisplayMode(window.__mcpDisplayMode).catch(function() {});");
   parts.push("}).catch(function(err) {");
   parts.push('  console.error("[FrontMcpBridge] Init failed:", err);');
   parts.push('  window.dispatchEvent(new CustomEvent("bridge:error", { detail: { error: err } }));');
@@ -382,6 +385,9 @@ var OpenAIAdapter = {
     return Promise.resolve();
   },
   requestDisplayMode: function(context, mode) {
+    if (window.openai && typeof window.openai.requestDisplayMode === 'function') {
+      return Promise.resolve(window.openai.requestDisplayMode({ mode: mode }));
+    }
     return Promise.resolve();
   },
   setSize: function(context, size) {
@@ -419,6 +425,7 @@ var ExtAppsAdapter = {
   hostCapabilities: {},
   handshakeSettled: false,
   pendingSize: null,
+  modelContext: null,
   canHandle: function() {
     if (typeof window === 'undefined') return false;
     if (window.parent === window) return false;
@@ -497,8 +504,19 @@ var ExtAppsAdapter = {
 
     if ('method' in data && !('id' in data)) {
       this.handleNotification(context, data);
+      return;
+    }
+
+    if ('method' in data && 'id' in data) {
+      this.handleRequest(context, data, event.origin);
     }
   },
+  handleRequest: function(context, request, origin) {
+    // ui/resource-teardown: the host is about to unmount the view; reply once listeners have cleaned up.
+    if (request.method !== 'ui/resource-teardown') return;
+    window.dispatchEvent(new CustomEvent('bridge:teardown', { detail: {} }));
+    window.parent.postMessage({ jsonrpc: '2.0', id: request.id, result: {} }, origin);
+  },
   handleNotification: function(context, notification) {
     var params = notification.params || {};
     switch (notification.method) {
@@ -522,6 +540,7 @@ var ExtAppsAdapter = {
         Object.assign(context.hostContext, params);
         context.notifyContextChange(params);
         break;
+      case 'ui/notifications/tool-cancelled':
       case 'ui/notifications/cancelled':
         window.dispatchEvent(new CustomEvent('tool:cancelled', { detail: { reason: params.reason } }));
         break;
@@ -586,7 +605,7 @@ var ExtAppsAdapter = {
     var id = ++this.requestId;
     var params = {
       appInfo: { name: 'FrontMCP Widget', version: '1.0.0' },
-      appCapabilities: { tools: { listChanged: false } },
+      appCapabilities: { tools: { listChanged: false }, availableDisplayModes: ${JSON.stringify(MCP_APPS_DISPLAY_MODES)} },
       protocolVersion: '2024-11-05'
     };
 
@@ -654,20 +673,25 @@ var ExtAppsAdapter = {
       return Promise.reject(new Error('Server tool proxy not supported'));
     }
     // Per ext-apps spec: use standard MCP method 'tools/call' (not 'ui/callServerTool')
-    return this.sendRequest('tools/call', { name: name, arguments: args || {} });
+    return this.sendRequest('tools/call', { name: name, arguments: args || {}, _meta: { '${WIDGET_CALL_META_KEY}': true } });
   },
   sendMessage: function(context, content) {
     return this.sendRequest('ui/message', { content: content });
   },
   openLink: function(context, url) {
-    if (!this.hostCapabilities.openLink) {
+    if (!this.hostCapabilities.openLinks && !this.hostCapabilities.openLink) {
       window.open(url, '_blank', 'noopener,noreferrer');
       return Promise.resolve();
     }
-    return this.sendRequest('ui/openLink', { url: url });
+    return this.sendRequest('ui/open-link', { url: url });
   },
   requestDisplayMode: function(context, mode) {
-    return this.sendRequest('ui/setDisplayMode', { mode: mode });
+    // Ask only for a mode the host offers; it answers with the mode it actually set.
+    var offered = context.hostContext.availableDisplayModes;
+    if (!Array.isArray(offered) || offered.indexOf(mode) === -1) {
+      return Promise.reject(new Error('Display mode "' + mode + '" is not available on this host'));
+    }
+    return this.sendRequest('ui/request-display-mode', { mode: mode });
   },
   setSize: function(context, size) {
     // Standard ext-apps sizing: the view tells the host its dimensions with the
@@ -688,14 +712,22 @@ var ExtAppsAdapter = {
     return this.sendNotification('ui/notifications/size-changed', params);
   },
   requestClose: function(context) {
-    return this.sendRequest('ui/close', {});
+    // The host decides whether to tear the view down; it answers with ui/resource-teardown if it does.
+    return this.sendNotification('ui/notifications/request-teardown', {});
   },
   // Extended ext-apps methods (full specification)
   updateModelContext: function(context, data, merge) {
-    if (!this.hostCapabilities.modelContextUpdate) {
+    if (!this.hostCapabilities.updateModelContext && !this.hostCapabilities.modelContextUpdate) {
       return Promise.reject(new Error('Model context update not supported'));
     }
-    return this.sendRequest('ui/updateModelContext', { context: data, merge: merge !== false });
+    // The host keeps only the latest update, so an object merges into the last one here.
+    var isObject = data !== null && typeof data === 'object' && !Array.isArray(data);
+    var modelContext = isObject && merge !== false ? Object.assign({}, this.modelContext, data) : data;
+    this.modelContext = isObject ? modelContext : null;
+    var text = typeof modelContext === 'string' ? modelContext : JSON.stringify(modelContext);
+    var params = { content: [{ type: 'text', text: text }] };
+    if (isObject) params.structuredContent = modelContext;
+    return this.sendRequest('ui/update-model-context', params);
   },
   log: function(context, level, message, data) {
     if (!this.hostCapabilities.logging) {
@@ -704,7 +736,10 @@ var ExtAppsAdapter = {
       logFn('[Widget] ' + message, data);
       return Promise.resolve();
     }
-    return this.sendRequest('ui/log', { level: level, message: message, data: data });
+    return this.sendNotification('notifications/message', {
+      level: level === 'warn' ? 'warning' : level,
+      data: data === undefined ? message : { message: message, data: data }
+    });
   },
   registerTool: function(context, name, description, inputSchema) {
     if (!this.hostCapabilities.widgetTools) {
@@ -1101,8 +1136,10 @@ FrontMcpBridge.prototype.openLink = function(url) {
 FrontMcpBridge.prototype.requestDisplayMode = function(mode) {
   if (!this._adapter) return Promise.reject(new Error('Not initialized'));
   var self = this;
-  return this._adapter.requestDisplayMode(this._context, mode).then(function() {
-    self._context.hostContext.displayMode = mode;
+  return this._adapter.requestDisplayMode(this._context, mode).then(function(result) {
+    // The host may set another mode than the one asked for, e.g. when it refuses the change.
+    var setMode = result && result.mode;
+    if (${JSON.stringify(MCP_APPS_DISPLAY_MODES)}.indexOf(setMode) !== -1) self._context.hostContext.displayMode = setMode;
   });
 };
 
@@ -1329,7 +1366,9 @@ var BRIDGE_SCRIPT_TAGS = {
 };
 export {
   BRIDGE_SCRIPT_TAGS,
+  MCP_APPS_DISPLAY_MODES,
   UNIVERSAL_BRIDGE_SCRIPT,
+  WIDGET_CALL_META_KEY,
   generateBridgeIIFE,
   generatePlatformBundle
 };