@mcp-use/inspector 20.0.0-beta.0 → 20.0.0-beta.10

package/dist/cdn/{useViewHostProps-C7vjco2m.js → useViewHostProps-D1emxC9m.js}

@@ -1,8 +1,12 @@
 import { s as e, t } from "./react-BIs9pQ3H.js";
-import { d as n } from "./react-yUi9mVK4.js";
-import { i as r, r as i, s as a, t as o } from "./WidgetDebugContext-D4usL_MA.js";
+import { n } from "./createLucideIcon-BONxC1L5.js";
+import { t as r } from "./button-CB4uOoUV.js";
+import { t as i } from "./x-EilKPiCX.js";
+import { d as a } from "./react-BoOQpLwo.js";
+import { n as o, r as s } from "./servers-Dd0Vcp81.js";
+import { i as c, r as l, s as u, t as d } from "./WidgetDebugContext-B6yoOVVV.js";
 //#region src/client/console-log-bus.ts
-var s = /* @__PURE__ */ e(t(), 1), c = new class {
+var f = /* @__PURE__ */ e(t(), 1), p = new class {
 	listeners = /* @__PURE__ */ new Set();
 	publish(e) {
 		this.listeners.forEach((t) => {
@@ -19,7 +23,7 @@ var s = /* @__PURE__ */ e(t(), 1), c = new class {
 }();
 //#endregion
 //#region src/client/mcp-apps/csp.ts
-function l(e) {
+function m(e) {
 	let t = (e) => e.replace(/['"<>;]/g, "").trim(), n = (e.connectDomains || []).map(t).filter(Boolean), r = (e.resourceDomains || []).map(t).filter(Boolean), i = (e.frameDomains || []).map(t).filter(Boolean), a = (e.baseUriDomains || []).map(t).filter(Boolean), o = n.length > 0 ? n.join(" ") : "'none'", s = r.length > 0 ? [
 		"data:",
 		"blob:",
@@ -38,7 +42,7 @@ function l(e) {
 		`base-uri ${l}`
 	].join("; ");
 }
-function u(e) {
+function h(e) {
 	if (!e) return {};
 	let t = {};
 	for (let n of e.split(";")) {
@@ -47,13 +51,13 @@ function u(e) {
 	}
 	return t;
 }
-function d(e) {
-	return e ? u(l(e)) : {};
+function g(e) {
+	return e ? h(m(e)) : {};
 }
-function f(e) {
-	return u(e);
+function _(e) {
+	return h(e);
 }
-function p(e) {
+function v(e) {
 	let t = {};
 	for (let n of e) {
 		let e = (n.effectiveDirective || n.directive || "unknown").toLowerCase(), r = n.blockedUri || "(inline)";
@@ -61,7 +65,7 @@ function p(e) {
 	}
 	return t;
 }
-function m(e, t) {
+function y(e, t) {
 	return Array.from(new Set([...Object.keys(e), ...Object.keys(t)])).sort().map((n) => {
 		let r = e[n] ?? [], i = t[n] ?? [], a = Array.from(new Set(r)).sort(), o = Array.from(new Set(i)).sort();
 		return {
@@ -72,7 +76,7 @@ function m(e, t) {
 		};
 	});
 }
-function h(e) {
+function b(e) {
 	let t = [];
 	e.declared || t.push({
 		severity: "warning",
@@ -83,7 +87,7 @@ function h(e) {
 		title: "Permissive mode",
 		detail: "Observed violations are requests a declared policy would block."
 	});
-	let n = p(e.violations);
+	let n = v(e.violations);
 	for (let [r, i] of Object.entries(n)) t.push({
 		severity: e.mode === "permissive" ? "warning" : "error",
 		title: `${i.length} blocked by ${r}`,
@@ -97,8 +101,8 @@ function h(e) {
 }
 //#endregion
 //#region src/client/mcp-apps/logging-transport.ts
-function g(e, t, n) {
-	let i = {
+function x(e, t, n) {
+	let r = {
 		get sessionId() {
 			return e.sessionId;
 		},
@@ -109,15 +113,15 @@ function g(e, t, n) {
 		async start() {
 			return e.start();
 		},
-		async send(i, a) {
-			return r.publish({
+		async send(r, i) {
+			return c.publish({
 				source: "widget",
 				serverId: t,
 				widgetId: n,
 				direction: "send",
 				timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-				message: i
-			}), e.send(i, a);
+				message: r
+			}), e.send(r, i);
 		},
 		async close() {
 			return e.close();
@@ -126,29 +130,29 @@ function g(e, t, n) {
 		onerror: void 0,
 		onmessage: void 0
 	};
-	return Object.defineProperty(i, "onmessage", {
+	return Object.defineProperty(r, "onmessage", {
 		configurable: !0,
 		enumerable: !0,
 		get() {
 			return e.onmessage;
 		},
-		set(i) {
-			if (!i) {
+		set(r) {
+			if (!r) {
 				e.onmessage = void 0;
 				return;
 			}
-			e.onmessage = (e, a) => {
-				r.publish({
+			e.onmessage = (e, i) => {
+				c.publish({
 					source: "widget",
 					serverId: t,
 					widgetId: n,
 					direction: "receive",
 					timestamp: (/* @__PURE__ */ new Date()).toISOString(),
 					message: e
-				}), i(e, a);
+				}), r(e, i);
 			};
 		}
-	}), Object.defineProperty(i, "onclose", {
+	}), Object.defineProperty(r, "onclose", {
 		configurable: !0,
 		enumerable: !0,
 		get() {
@@ -157,7 +161,7 @@ function g(e, t, n) {
 		set(t) {
 			e.onclose = t;
 		}
-	}), Object.defineProperty(i, "onerror", {
+	}), Object.defineProperty(r, "onerror", {
 		configurable: !0,
 		enumerable: !0,
 		get() {
@@ -166,33 +170,30 @@ function g(e, t, n) {
 		set(t) {
 			e.onerror = t;
 		}
-	}), i;
+	}), r;
 }
 //#endregion
 //#region src/client/hooks/useDeviceViewport.ts
-function _(e, t) {
-	return (0, s.useMemo)(() => e === "custom" ? {
-		maxWidth: t.width,
-		maxHeight: t.height
-	} : {
-		maxWidth: o[e].width,
-		maxHeight: o[e].height
-	}, [e, t]);
+function S(e) {
+	return (0, f.useMemo)(() => ({
+		maxWidth: d[e].width,
+		maxHeight: d[e].height
+	}), [e]);
 }
 //#endregion
 //#region src/client/hooks/useMcpAppsHostContext.ts
-function v(e, t) {
+function C(e, t) {
 	return e.getPropertyValue(t).trim();
 }
-function y() {
+function w() {
 	if (typeof window > "u") return {};
 	let e = getComputedStyle(document.documentElement), t = {}, n = (e, n) => {
 		n && (t[e] = n);
-	}, r = v(e, "--background"), i = v(e, "--foreground"), a = v(e, "--card"), o = v(e, "--muted"), s = v(e, "--muted-foreground"), c = v(e, "--primary"), l = v(e, "--primary-foreground"), u = v(e, "--secondary"), d = v(e, "--accent"), f = v(e, "--accent-foreground"), p = v(e, "--destructive"), m = v(e, "--border"), h = v(e, "--ring"), g = v(e, "--radius");
+	}, r = C(e, "--background"), i = C(e, "--foreground"), a = C(e, "--card"), o = C(e, "--muted"), s = C(e, "--muted-foreground"), c = C(e, "--primary"), l = C(e, "--primary-foreground"), u = C(e, "--secondary"), d = C(e, "--accent"), f = C(e, "--accent-foreground"), p = C(e, "--destructive"), m = C(e, "--border"), h = C(e, "--ring"), g = C(e, "--radius");
 	return n("--color-background-primary", r), n("--color-background-secondary", a || u), n("--color-background-tertiary", o || d), n("--color-background-inverse", c), n("--color-background-ghost", d || o), n("--color-background-danger", p), n("--color-text-primary", i), n("--color-text-secondary", s), n("--color-text-tertiary", s), n("--color-text-inverse", l), n("--color-text-ghost", f || s), n("--color-text-danger", p), n("--color-border-primary", m), n("--color-border-secondary", m), n("--color-border-tertiary", m), n("--color-ring-primary", h || m), n("--border-radius-sm", g), n("--border-radius-md", g), n("--border-radius-lg", g), n("--font-sans", "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"), t;
 }
-function b({ theme: e, displayMode: t, maxWidth: n, maxHeight: r, playground: i, deviceType: a, toolCallId: o, toolName: c, toolInput: l, toolOutput: u, toolMetadata: d, tool: f }) {
-	return (0, s.useMemo)(() => ({
+function T({ theme: e, displayMode: t, maxWidth: n, maxHeight: r, playground: i, deviceType: a, toolCallId: o, toolName: s, toolInput: c, toolOutput: l, toolMetadata: u, tool: d }) {
+	return (0, f.useMemo)(() => ({
 		theme: e,
 		displayMode: t,
 		availableDisplayModes: [
@@ -210,10 +211,10 @@ function b({ theme: e, displayMode: t, maxWidth: n, maxHeight: r, playground: i,
 		userAgent: "mcp-use-inspector/0.16.2",
 		deviceCapabilities: i.capabilities,
 		safeAreaInsets: i.safeAreaInsets,
-		styles: { variables: y() },
-		toolInfo: f ? {
+		styles: { variables: w() },
+		toolInfo: d ? {
 			id: o,
-			tool: f
+			tool: d
 		} : void 0
 	}), [
 		e,
@@ -226,24 +227,24 @@ function b({ theme: e, displayMode: t, maxWidth: n, maxHeight: r, playground: i,
 		i.safeAreaInsets,
 		a,
 		o,
+		s,
 		c,
 		l,
 		u,
-		d,
-		f
+		d
 	]);
 }
 //#endregion
-//#region src/client/hooks/useViewHostProps.ts
-var x = {
+//#region src/client/hooks/useViewHostProps.tsx
+var E = n(), D = {
 	name: "mcp-use-inspector",
 	version: "11.0.0"
 };
-function S(e, t) {
-	let n = (0, s.useRef)(e);
+function O(e, t) {
+	let n = (0, f.useRef)(e);
 	n.current = e;
-	let r = (0, s.useRef)(t);
-	return r.current = t, (0, s.useMemo)(() => e ? {
+	let r = (0, f.useRef)(t);
+	return r.current = t, (0, f.useMemo)(() => e ? {
 		callTool: (e, t, r) => n.current.callTool(e, t ?? {}, r),
 		readResource: (e) => r.current(e),
 		get resources() {
@@ -251,34 +252,34 @@ function S(e, t) {
 		}
 	} : null, [e?.id]);
 }
-function C(e) {
-	let { serverId: t, viewId: r, resourceUri: o, toolName: u, toolInput: d, toolOutput: f, toolMetadata: p, tool: m, readResource: h, displayMode: v, onDisplayModeChange: y, inlineMaxWidth: C, chromeless: w, onReady: T } = e, { resolvedTheme: E } = a(), { servers: D } = n(), O = D.find((e) => e.id === t), { playground: k, addWidget: A, removeWidget: j, addCspViolation: M, setWidgetModelContext: N, setWidgetDeclaredCsp: P } = i(), F = k.cspMode === "permissive" ? "permissive" : "widget-declared", { maxWidth: I, maxHeight: L } = _(k.deviceType, k.customViewport), R = b({
-		theme: E,
-		displayMode: v ?? "inline",
-		maxWidth: I,
-		maxHeight: L,
-		playground: k,
-		deviceType: k.deviceType,
-		toolCallId: r,
-		toolName: u,
-		toolInput: d,
-		toolOutput: f,
-		toolMetadata: p,
-		tool: m
-	}), z = (0, s.useRef)(R);
-	z.current = R;
-	let B = S(O, h), V = (0, s.useMemo)(() => B ? {
+function k(e) {
+	let { serverId: t, viewId: n, resourceUri: c, toolName: d, toolInput: h, toolOutput: g, toolMetadata: _, tool: v, readResource: y, displayMode: b, onDisplayModeChange: C, inlineMaxWidth: w, chromeless: k, onReady: A } = e, { resolvedTheme: j } = u(), { servers: M } = a(), N = M.find((e) => e.id === t), { playground: P, addWidget: F, removeWidget: I, addCspViolation: L, setWidgetModelContext: R, setWidgetDeclaredCsp: z } = l(), B = P.cspMode === "permissive" ? "permissive" : "widget-declared", { maxWidth: V, maxHeight: H } = S(P.deviceType), U = T({
+		theme: j,
+		displayMode: b ?? "inline",
+		maxWidth: V,
+		maxHeight: H,
+		playground: P,
+		deviceType: P.deviceType,
+		toolCallId: n,
+		toolName: d,
+		toolInput: h,
+		toolOutput: g,
+		toolMetadata: _,
+		tool: v
+	}), W = (0, f.useRef)(U);
+	W.current = U;
+	let G = O(N, y), K = (0, f.useMemo)(() => G ? {
 		kind: "live",
-		connection: B,
-		resourceUri: o
-	} : null, [B, o]), H = (0, s.useCallback)((e) => g(e, t, r), [t, r]), U = (0, s.useCallback)((e) => {
-		A(r, {
-			toolName: u,
+		connection: G,
+		resourceUri: c
+	} : null, [G, c]), q = (0, f.useCallback)((e) => x(e, t, n), [t, n]), J = (0, f.useCallback)((e) => {
+		F(n, {
+			toolName: d,
 			protocol: "mcp-apps",
-			hostContext: z.current
+			hostContext: W.current
 		});
-		let t = e.declaredCsp, n;
-		F === "permissive" ? n = [
+		let t = e.declaredCsp, r;
+		B === "permissive" ? r = [
 			"default-src * 'unsafe-inline' 'unsafe-eval' data: blob: filesystem: about:",
 			"script-src * 'unsafe-inline' 'unsafe-eval' data: blob:",
 			"style-src * 'unsafe-inline' data: blob:",
@@ -290,17 +291,17 @@ function C(e) {
 			"object-src * data: blob:",
 			"base-uri *",
 			"form-action *"
-		].join("; ") : t && (n = l(t)), P(r, t, n);
+		].join("; ") : t && (r = m(t)), z(n, t, r);
 	}, [
-		A,
-		r,
-		u,
 		F,
-		P
+		n,
+		d,
+		B,
+		z
 	]);
-	(0, s.useEffect)(() => () => j(r), [r, j]);
-	let W = (0, s.useCallback)((e) => {
-		M(r, {
+	(0, f.useEffect)(() => () => I(n), [n, I]);
+	let Y = (0, f.useCallback)((e) => {
+		L(n, {
 			directive: e.directive,
 			effectiveDirective: e.effectiveDirective ?? e.directive,
 			blockedUri: e.blockedUri,
@@ -310,39 +311,54 @@ function C(e) {
 			originalPolicy: e.originalPolicy,
 			timestamp: e.timestamp
 		});
-	}, [M, r]), G = (0, s.useCallback)(({ content: e, structuredContent: t }) => {
-		N(r, {
+	}, [L, n]), X = (0, f.useCallback)(({ content: e, structuredContent: t }) => {
+		R(n, {
 			content: e,
 			structuredContent: t
 		});
 		try {
-			localStorage.setItem(`mcp-use:widget-state:${r}`, JSON.stringify(t));
+			localStorage.setItem(`mcp-use:widget-state:${n}`, JSON.stringify(t));
 		} catch {}
-	}, [N, r]), K = (0, s.useCallback)(({ level: e, data: t }) => {
+	}, [R, n]), Z = (0, f.useCallback)(({ level: e, data: t }) => {
 		let n = e === "warning" ? "warn" : e === "error" ? "error" : "log";
-		c.publish({
+		p.publish({
 			level: n,
 			args: Array.isArray(t) ? t : [t],
 			timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-			url: o
+			url: c
 		});
-	}, [o]);
-	return V ? {
-		source: V,
-		hostInfo: x,
-		hostContext: R,
-		cspMode: F,
-		wrapTransport: H,
-		onCspViolation: W,
-		onModelContextUpdate: G,
-		onLog: K,
-		onResourceResolved: U,
-		displayMode: v,
-		onDisplayModeChange: y,
-		inlineMaxWidth: C,
-		chromeless: w,
-		onReady: T
+	}, [c]), Q = (0, f.useMemo)(() => ({
+		title: N ? o(N) : "MCP Server",
+		iconUrl: N ? s(N) : null
+	}), [N]), $ = (0, f.useCallback)(({ onClick: e, "data-testid": t, "aria-label": n }) => /* @__PURE__ */ (0, E.jsx)(r, {
+		type: "button",
+		variant: "tertiary",
+		size: "icon-sm",
+		className: "rounded-full shadow-sm",
+		"data-testid": t,
+		"aria-label": n,
+		onClick: e,
+		children: /* @__PURE__ */ (0, E.jsx)(i, {})
+	}), []);
+	return K ? {
+		source: K,
+		hostInfo: D,
+		hostContext: U,
+		cspMode: B,
+		wrapTransport: q,
+		onCspViolation: Y,
+		onModelContextUpdate: X,
+		onLog: Z,
+		onResourceResolved: J,
+		displayMode: b,
+		onDisplayModeChange: C,
+		inlineMaxWidth: w ?? (P.deviceType === "mobile" ? V : void 0),
+		chromeless: k,
+		onReady: A,
+		mockOpenAiFileApis: !0,
+		fullscreenHeader: Q,
+		renderFullscreenClose: $
 	} : null;
 }
 //#endregion
-export { d as a, f as i, h as n, c as o, m as r, C as t };
+export { g as a, _ as i, b as n, p as o, y as r, k as t };

package/dist/cdn/{wrench-DzGmCfnb.js → wrench-DvK20LUT.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./createLucideIcon-C5fZZ6oB.js";
+import { t as e } from "./createLucideIcon-BONxC1L5.js";
 var t = e("wrench", [["path", {
 	d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z",
 	key: "1ngwbx"

package/dist/cdn/{x-C3vRQIYu.js → x-EilKPiCX.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./createLucideIcon-C5fZZ6oB.js";
+import { t as e } from "./createLucideIcon-BONxC1L5.js";
 var t = e("x", [["path", {
 	d: "M18 6 6 18",
 	key: "1bl5f8"

package/dist/cdn/{zap-Mb-pbw2X.js → zap-0Wr9QO7N.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./createLucideIcon-C5fZZ6oB.js";
+import { t as e } from "./createLucideIcon-BONxC1L5.js";
 var t = e("chevron-left", [["path", {
 	d: "m15 18-6-6 6-6",
 	key: "1wnfg3"