@frontmcp/uipack 1.9.2 → 1.9.3

package/esm/component/index.mjs

@@ -829,6 +829,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"];
@@ -876,6 +878,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 } }));');
@@ -1209,6 +1212,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) {
@@ -1246,6 +1252,7 @@ var ExtAppsAdapter = {
   hostCapabilities: {},
   handshakeSettled: false,
   pendingSize: null,
+  modelContext: null,
   canHandle: function() {
     if (typeof window === 'undefined') return false;
     if (window.parent === window) return false;
@@ -1324,8 +1331,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) {
@@ -1349,6 +1367,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;
@@ -1413,7 +1432,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'
     };
 
@@ -1481,20 +1500,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
@@ -1515,14 +1539,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) {
@@ -1531,7 +1563,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) {
@@ -1928,8 +1963,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;
   });
 };
 
@@ -2281,7 +2318,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)};`,
@@ -2292,6 +2329,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>`;
@@ -2357,7 +2397,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) {
@@ -2370,7 +2411,8 @@ function buildShell(content, config) {
     structuredContent,
     includeBridge = true,
     title,
-    sizing
+    sizing,
+    displayMode
   } = config;
   const { customShell, dataInjection } = config;
   const dataScript = resolveDataInjectionScript({
@@ -2379,7 +2421,8 @@ function buildShell(content, config) {
     input,
     output,
     structuredContent,
-    sizing
+    sizing,
+    displayMode
   });
   if (!withShell) {
     const html2 = `${dataScript}
@@ -2400,6 +2443,7 @@ ${content}`;
       includeBridge,
       title,
       sizing,
+      displayMode,
       dataInjection
     });
   }
@@ -2455,7 +2499,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/index.mjs

@@ -135,6 +135,8 @@ function safeJsonForScript(value) {
 }
 
 // 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"];
@@ -182,6 +184,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 } }));');
@@ -515,6 +518,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) {
@@ -552,6 +558,7 @@ var ExtAppsAdapter = {
   hostCapabilities: {},
   handshakeSettled: false,
   pendingSize: null,
+  modelContext: null,
   canHandle: function() {
     if (typeof window === 'undefined') return false;
     if (window.parent === window) return false;
@@ -630,7 +637,18 @@ 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 || {};
@@ -655,6 +673,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;
@@ -719,7 +738,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'
     };
 
@@ -787,20 +806,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
@@ -821,14 +845,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) {
@@ -837,7 +869,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) {
@@ -1234,8 +1269,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;
   });
 };
 
@@ -3101,7 +3138,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)};`,
@@ -3112,6 +3149,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>`;
@@ -3203,7 +3243,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) {
@@ -3216,7 +3257,8 @@ function buildShell(content, config) {
     structuredContent,
     includeBridge = true,
     title,
-    sizing
+    sizing,
+    displayMode
   } = config;
   const { customShell, dataInjection } = config;
   const dataScript = resolveDataInjectionScript({
@@ -3225,7 +3267,8 @@ function buildShell(content, config) {
     input,
     output,
     structuredContent,
-    sizing
+    sizing,
+    displayMode
   });
   if (!withShell) {
     const html3 = `${dataScript}
@@ -3246,6 +3289,7 @@ ${content}`;
       includeBridge,
       title,
       sizing,
+      displayMode,
       dataInjection
     });
   }
@@ -3301,7 +3345,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}
@@ -4319,7 +4364,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. FrontMCP 1.9 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}`
+    `[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) {
@@ -4378,6 +4423,7 @@ function renderToolTemplate(options) {
     includeBridge: true,
     resolver,
     sizing,
+    displayMode: options.displayMode,
     csp: options.csp ? buildCspConfig(resolver, options.csp) : void 0
   };
   let html2;

package/esm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontmcp/uipack",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "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",
@@ -61,7 +61,7 @@
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "@frontmcp/lazy-zod": "1.9.2",
+    "@frontmcp/lazy-zod": "1.9.3",
     "esbuild": ">=0.27.0 <1"
   },
   "peerDependenciesMeta": {