@mcp-use/inspector 0.6.1 → 0.7.0

package/dist/cli.js

@@ -1,4 +1,7 @@
 #!/usr/bin/env node
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/server/cli.ts
 import { serve } from "@hono/node-server";
@@ -324,7 +327,16 @@ function generateWidgetContainerHtml(basePath, toolId) {
   `;
 }
 function generateWidgetContentHtml(widgetData) {
-  const { serverId, uri, toolInput, toolOutput, resourceData, toolId } = widgetData;
+  const {
+    serverId,
+    uri,
+    toolInput,
+    toolOutput,
+    resourceData,
+    toolId,
+    devServerBaseUrl,
+    theme
+  } = widgetData;
   console.log("[Widget Content] Using pre-fetched resource for:", {
     serverId,
     uri
@@ -355,23 +367,31 @@ function generateWidgetContentHtml(widgetData) {
   const safeToolOutput = JSON.stringify(toolOutput ?? null).replace(/</g, "\\u003c").replace(/>/g, "\\u003e");
   const safeToolId = JSON.stringify(toolId);
   const safeWidgetStateKey = JSON.stringify(widgetStateKey);
+  const safeTheme = JSON.stringify(theme === "dark" ? "dark" : "light");
   const apiScript = `
     <script>
       (function() {
         'use strict';
 
         // Change URL to "/" for React Router compatibility
-        if (window.location.pathname !== '/') {
+        // Skip if running in Inspector dev-widget proxy to prevent redirecting iframe to Inspector home
+        if (window.location.pathname !== '/' && !window.location.pathname.includes('/dev-widget/')) {
           history.replaceState(null, '', '/');
         }
 
+        // Inject MCP widget utilities for Image component and file access
+        window.__mcpPublicUrl = ${devServerBaseUrl ? `"${devServerBaseUrl}/mcp-use/public"` : '""'};
+        window.__getFile = function(filename) {
+          return ${devServerBaseUrl ? `"${devServerBaseUrl}/mcp-use/widgets/"` : '""'} + filename;
+        };
+
         const openaiAPI = {
           toolInput: ${safeToolInput},
           toolOutput: ${safeToolOutput},
           toolResponseMetadata: null,
           displayMode: 'inline',
           maxHeight: 600,
-          theme: 'dark',
+          theme: ${safeTheme},
           locale: 'en-US',
           safeArea: { insets: { top: 0, bottom: 0, left: 0, right: 0 } },
           userAgent: {},
@@ -444,6 +464,20 @@ function generateWidgetContentHtml(widgetData) {
             return this.sendFollowupTurn(prompt);
           },
 
+          async notifyIntrinsicHeight(height) {
+            console.log('[OpenAI Widget] notifyIntrinsicHeight called with:', height);
+            if (typeof height !== 'number' || height < 0) {
+              console.error('[OpenAI Widget] Invalid height value:', height);
+              throw new Error('Height must be a non-negative number');
+            }
+            const message = {
+              type: 'openai:notifyIntrinsicHeight',
+              height
+            };
+            console.log('[OpenAI Widget] Sending postMessage to parent:', message);
+            window.parent.postMessage(message, '*');
+          },
+
           openExternal(payload) {
             const href = typeof payload === 'string' ? payload : payload?.href;
             if (href) {
@@ -488,6 +522,18 @@ function generateWidgetContentHtml(widgetData) {
           } catch (err) {}
         }, 0);
 
+        // Listen for widget state requests from inspector
+        window.addEventListener('message', (event) => {
+          if (event.data?.type === 'mcp-inspector:getWidgetState') {
+            window.parent.postMessage({
+              type: 'mcp-inspector:widgetStateResponse',
+              toolId: event.data.toolId,
+              state: openaiAPI.widgetState
+            }, '*');
+            return;
+          }
+        });
+
         // Listen for globals changes from parent (for displayMode, theme, etc.)
         window.addEventListener('message', (event) => {
           // Handle new general globalsChanged message
@@ -614,7 +660,7 @@ function generateWidgetContentHtml(widgetData) {
   console.log("[Widget Content] Generated HTML length:", modifiedHtml.length);
   return { html: modifiedHtml };
 }
-function getWidgetSecurityHeaders(widgetCSP) {
+function getWidgetSecurityHeaders(widgetCSP, devServerBaseUrl) {
   const trustedCdns = [
     "https://persistent.oaistatic.com",
     "https://*.oaistatic.com",
@@ -623,25 +669,48 @@ function getWidgetSecurityHeaders(widgetCSP) {
     "https://cdnjs.cloudflare.com",
     "https://cdn.skypack.dev"
   ];
-  const allResourceDomains = [...trustedCdns];
+  const prodResourceDomains = [...trustedCdns];
   if (widgetCSP?.resource_domains) {
-    allResourceDomains.push(...widgetCSP.resource_domains);
+    prodResourceDomains.push(...widgetCSP.resource_domains);
+  }
+  const prodResourceDomainsStr = prodResourceDomains.join(" ");
+  let devServerOrigin = null;
+  const allResourceDomains = [...prodResourceDomains];
+  if (devServerBaseUrl) {
+    try {
+      devServerOrigin = new URL(devServerBaseUrl).origin;
+      allResourceDomains.push(devServerOrigin);
+    } catch (e) {
+      console.warn(`[CSP] Invalid devServerBaseUrl: ${devServerBaseUrl}`);
+    }
   }
   const resourceDomainsStr = allResourceDomains.join(" ");
+  let imgSrc = "'self' data: https: blob:";
+  if (devServerOrigin) {
+    imgSrc = `'self' data: https: blob: ${devServerOrigin}`;
+  }
+  let mediaSrc = "'self' data: https: blob:";
+  if (devServerOrigin) {
+    mediaSrc = `'self' data: https: blob: ${devServerOrigin}`;
+  }
+  let fontSrc = `'self' data: ${resourceDomainsStr}`;
+  if (devServerOrigin) {
+    fontSrc = `'self' data: https: http: ${resourceDomainsStr}`;
+  }
   let connectSrc = "'self' https: wss: ws:";
   if (widgetCSP?.connect_domains && widgetCSP.connect_domains.length > 0) {
     connectSrc = `'self' ${widgetCSP.connect_domains.join(" ")} https: wss: ws:`;
   }
-  return {
+  const headers = {
     "Content-Security-Policy": [
       "default-src 'self'",
       `script-src 'self' 'unsafe-inline' 'unsafe-eval' ${resourceDomainsStr}`,
       "worker-src 'self' blob:",
       "child-src 'self' blob:",
       `style-src 'self' 'unsafe-inline' ${resourceDomainsStr}`,
-      "img-src 'self' data: https: blob:",
-      "media-src 'self' data: https: blob:",
-      `font-src 'self' data: ${resourceDomainsStr}`,
+      `img-src ${imgSrc}`,
+      `media-src ${mediaSrc}`,
+      `font-src ${fontSrc}`,
       `connect-src ${connectSrc}`,
       "frame-ancestors 'self'"
     ].join("; "),
@@ -651,6 +720,22 @@ function getWidgetSecurityHeaders(widgetCSP) {
     Pragma: "no-cache",
     Expires: "0"
   };
+  if (devServerOrigin) {
+    const prodConnectSrc = "'self' https: wss: ws:";
+    headers["Content-Security-Policy-Report-Only"] = [
+      "default-src 'self'",
+      `script-src 'self' 'unsafe-inline' 'unsafe-eval' ${prodResourceDomainsStr}`,
+      "worker-src 'self' blob:",
+      "child-src 'self' blob:",
+      `style-src 'self' 'unsafe-inline' ${prodResourceDomainsStr}`,
+      "img-src 'self' data: https: blob:",
+      "media-src 'self' data: https: blob:",
+      `font-src 'self' data: ${prodResourceDomainsStr}`,
+      `connect-src ${prodConnectSrc}`,
+      "frame-ancestors 'self'"
+    ].join("; ");
+  }
+  return headers;
 }
 
 // src/server/utils.ts
@@ -699,6 +784,77 @@ function formatErrorResponse(error, context) {
   };
 }
 
+// src/server/rpc-log-bus.ts
+var SimpleEventEmitter = class {
+  constructor() {
+    __publicField(this, "listeners", /* @__PURE__ */ new Map());
+  }
+  on(event, listener) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(listener);
+  }
+  off(event, listener) {
+    this.listeners.get(event)?.delete(listener);
+  }
+  emit(event, ...args2) {
+    this.listeners.get(event)?.forEach((listener) => {
+      try {
+        listener(...args2);
+      } catch (e) {
+        console.error("Error in event listener:", e);
+      }
+    });
+  }
+};
+var RpcLogBus = class {
+  constructor() {
+    __publicField(this, "emitter", new SimpleEventEmitter());
+    __publicField(this, "bufferByServer", /* @__PURE__ */ new Map());
+  }
+  publish(event) {
+    const buffer = this.bufferByServer.get(event.serverId) ?? [];
+    buffer.push(event);
+    if (buffer.length > 1e3) {
+      buffer.shift();
+    }
+    this.bufferByServer.set(event.serverId, buffer);
+    this.emitter.emit("event", event);
+  }
+  subscribe(serverIds, listener) {
+    const filter = new Set(serverIds);
+    const handler = (event) => {
+      if (filter.size === 0 || filter.has(event.serverId)) listener(event);
+    };
+    this.emitter.on("event", handler);
+    return () => this.emitter.off("event", handler);
+  }
+  getBuffer(serverIds, limit) {
+    const filter = new Set(serverIds);
+    const all = [];
+    for (const [serverId, buf] of this.bufferByServer.entries()) {
+      if (filter.size > 0 && !filter.has(serverId)) continue;
+      all.push(...buf);
+    }
+    all.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
+    if (limit === 0) return [];
+    if (!Number.isFinite(limit) || limit < 0) return all;
+    return all.slice(0, limit);
+  }
+  clear(serverIds) {
+    if (serverIds && serverIds.length > 0) {
+      const filter = new Set(serverIds);
+      for (const serverId of filter) {
+        this.bufferByServer.delete(serverId);
+      }
+    } else {
+      this.bufferByServer.clear();
+    }
+  }
+};
+var rpcLogBus = new RpcLogBus();
+
 // src/server/shared-routes.ts
 function registerInspectorRoutes(app2, config) {
   app2.get("/inspector/health", (c) => {
@@ -904,8 +1060,10 @@ function registerInspectorRoutes(app2, config) {
         }
       );
       html = html.replace(
-        /(src|href)="\/mcp-use\/widgets\//g,
-        `$1="${proxyBase}/mcp-use/widgets/`
+        /(src|href)="(\/mcp-use\/widgets\/[^"]+)"/g,
+        (_match, attr, path) => {
+          return `${attr}="${widgetData.devServerBaseUrl}${path}"`;
+        }
       );
       html = html.replace(/(src|href)="\.\/([^"]+)"/g, (match, attr, path) => {
         if (path.match(/\.(js|css|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/i)) {
@@ -913,14 +1071,45 @@ function registerInspectorRoutes(app2, config) {
         }
         return match;
       });
-      const host = c.req.header("host") || "localhost:3000";
-      const protocol = c.req.header("x-forwarded-proto") || (c.req.url.startsWith("https") ? "https" : "http");
-      const wsProtocol = protocol === "https" ? "wss" : "ws";
-      html = html.replace(/__vite_ws__:\s*["']([^"']+)["']/g, () => {
-        const proxyWsUrl = `${wsProtocol}://${host}/inspector/api/dev-widget/${toolId}/__vite_hmr`;
-        return `__vite_ws__: "${proxyWsUrl}"`;
+      if (widgetData.devServerBaseUrl) {
+        const devServerUrl = new URL(widgetData.devServerBaseUrl);
+        const wsProtocol = devServerUrl.protocol === "https:" ? "wss" : "ws";
+        const wsHost = devServerUrl.host;
+        const directWsUrl = `${wsProtocol}://${wsHost}/mcp-use/widgets/`;
+        const baseTag = `<base href="${widgetData.devServerBaseUrl}/mcp-use/widgets/${widgetName}/">`;
+        const cspWarningScript = `
+    <script>
+      // Listen for CSP violations (from Report-Only policy)
+      document.addEventListener('securitypolicyviolation', (e) => {
+        // Only warn about report-only violations (not enforced ones)
+        if (e.disposition === 'report') {
+          console.warn(
+            '%c\u26A0\uFE0F CSP Warning: Resource would be blocked in production',
+            'color: orange; font-weight: bold',
+            '\\n  Blocked URL:', e.blockedURI,
+            '\\n  Directive:', e.violatedDirective,
+            '\\n  Policy:', e.originalPolicy,
+            '\\n\\n\u2139\uFE0F To fix: Add this domain to your widget\\'s CSP configuration in appsSdkMetadata[\\'openai/widgetCSP\\']'
+          );
+        }
       });
-      const headers = getWidgetSecurityHeaders(widgetData.widgetCSP);
+    </script>`;
+        const viteConfigScript = `
+    <script>
+      // Configure Vite HMR to connect directly to dev server
+      window.__vite_ws_url__ = "${directWsUrl}";
+    </script>`;
+        html = html.replace(/<head>/i, `<head>
+    ${baseTag}`);
+        html = html.replace(
+          /<script/,
+          cspWarningScript + viteConfigScript + "\n    <script"
+        );
+      }
+      const headers = getWidgetSecurityHeaders(
+        widgetData.widgetCSP,
+        widgetData.devServerBaseUrl
+      );
       Object.entries(headers).forEach(([key, value]) => {
         c.header(key, value);
       });
@@ -1027,6 +1216,93 @@ function registerInspectorRoutes(app2, config) {
       return c.json({ success: false });
     }
   });
+  app2.post("/inspector/api/rpc/log", async (c) => {
+    try {
+      const event = await c.req.json();
+      rpcLogBus.publish(event);
+      return c.json({ success: true });
+    } catch (error) {
+      console.error("[RPC Log] Error receiving RPC event:", error);
+      return c.json({ success: false });
+    }
+  });
+  app2.delete("/inspector/api/rpc/log", async (c) => {
+    try {
+      const url = new URL(c.req.url);
+      const serverIdsParam = url.searchParams.get("serverIds");
+      const serverIds = serverIdsParam ? serverIdsParam.split(",").filter(Boolean) : void 0;
+      rpcLogBus.clear(serverIds);
+      return c.json({ success: true });
+    } catch (error) {
+      console.error("[RPC Log] Error clearing RPC log:", error);
+      return c.json({ success: false });
+    }
+  });
+  app2.get("/inspector/api/rpc/stream", async (c) => {
+    const url = new URL(c.req.url);
+    const replay = parseInt(url.searchParams.get("replay") || "3", 10);
+    const serverIdsParam = url.searchParams.get("serverIds");
+    const serverIds = serverIdsParam ? serverIdsParam.split(",").filter(Boolean) : [];
+    const encoder = new TextEncoder();
+    const stream = new ReadableStream({
+      start(controller) {
+        const send = (data) => {
+          try {
+            controller.enqueue(
+              encoder.encode(`data: ${JSON.stringify(data)}
+
+`)
+            );
+          } catch {
+          }
+        };
+        try {
+          const recent = rpcLogBus.getBuffer(
+            serverIds,
+            isNaN(replay) ? 3 : replay
+          );
+          for (const evt of recent) {
+            send({ type: "rpc", ...evt });
+          }
+        } catch {
+        }
+        const unsubscribe = rpcLogBus.subscribe(
+          serverIds,
+          (evt) => {
+            send({ type: "rpc", ...evt });
+          }
+        );
+        const keepalive = setInterval(() => {
+          try {
+            controller.enqueue(encoder.encode(`: keepalive ${Date.now()}
+
+`));
+          } catch {
+          }
+        }, 15e3);
+        c.req.raw.signal?.addEventListener("abort", () => {
+          try {
+            clearInterval(keepalive);
+            unsubscribe();
+          } catch {
+          }
+          try {
+            controller.close();
+          } catch {
+          }
+        });
+      }
+    });
+    return new Response(stream, {
+      headers: {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Expose-Headers": "*"
+      }
+    });
+  });
 }
 
 // src/server/shared-static.ts

package/dist/client/assets/__vite-browser-external-CHS79mP1.js

@@ -0,0 +1,8 @@
+const __viteBrowserExternal = {};
+const os = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: __viteBrowserExternal
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  os as o
+};