@mcp-use/inspector 12.0.4-canary.0 → 20.0.0-beta.0

package/dist/cdn/ViewPreview-CxJc1Kht.js

@@ -0,0 +1,237 @@
+import { s as e, t } from "./react-BIs9pQ3H.js";
+import { t as n } from "./jsx-runtime-CIxvMpEo.js";
+import { d as r, r as i } from "./react-yUi9mVK4.js";
+import { t as a } from "./basePath-B8HuhIMu.js";
+import { c as o, s } from "./chunk-QUQL4437-XnDcYQEx.js";
+import { t as c } from "./useViewHostProps-C7vjco2m.js";
+//#region src/client/components/ViewPreview.tsx
+var l = /* @__PURE__ */ e(t(), 1), u = n(), d = "preview-default";
+function f(e) {
+	if (!e) return {};
+	try {
+		let t = atob(e), n = JSON.parse(t);
+		if (n && typeof n == "object") return n;
+	} catch {}
+	return {};
+}
+function p(e, t) {
+	let n = `ui://widget/${t}`, r = e.find((e) => e.uri.startsWith(`${n}.`) && e.uri.endsWith(".html"));
+	return r ? r.uri : e.find((e) => e.name === t)?.uri;
+}
+function m() {
+	let e = globalThis.__mcpUsePreviewBundle;
+	if (!e || typeof e != "object") return;
+	let t = e;
+	if (typeof t.resourceUri == "string") return t;
+}
+function h() {
+	(0, l.useEffect)(() => {
+		let e = document.documentElement, t = document.body, n = e.style.margin, r = t.style.margin, i = t.style.overflow;
+		return e.style.margin = "0", t.style.margin = "0", t.style.overflow = "hidden", () => {
+			e.style.margin = n, t.style.margin = r, t.style.overflow = i;
+		};
+	}, []);
+}
+function g(e, t) {
+	(0, l.useEffect)(() => {
+		let n = () => {
+			document.body.dataset.viewError = "runtime_error";
+		};
+		return e && !t && (document.body.dataset.viewError = "invalid_payload"), window.addEventListener("error", n), window.addEventListener("unhandledrejection", n), () => {
+			window.removeEventListener("error", n), window.removeEventListener("unhandledrejection", n), delete document.body.dataset.viewError;
+		};
+	}, [e, t]);
+}
+function _(e) {
+	(0, l.useEffect)(() => {
+		if (!e) return;
+		let t = !1;
+		return (async () => {
+			try {
+				await document.fonts.ready;
+			} catch {}
+			t || (await new Promise((e) => requestAnimationFrame(() => e(void 0))), await new Promise((e) => requestAnimationFrame(() => e(void 0))), !t && document.body.setAttribute("data-view-ready", "true"));
+		})(), () => {
+			t = !0, document.body.removeAttribute("data-view-ready");
+		};
+	}, [e]);
+}
+function v(e, t) {
+	(0, l.useEffect)(() => {
+		if (!e) return;
+		let n = !1, r, i, a = (e) => {
+			n || (e && (document.body.dataset.viewX = String(Math.round(e.left)), document.body.dataset.viewY = String(Math.round(e.top)), document.body.dataset.viewWidth = String(Math.round(e.width)), document.body.dataset.viewHeight = String(Math.round(e.height))), document.body.setAttribute("data-view-ready", "true"));
+		};
+		return (async () => {
+			try {
+				await document.fonts.ready;
+			} catch {}
+			if (n || (await new Promise((e) => requestAnimationFrame(() => e(void 0))), await new Promise((e) => requestAnimationFrame(() => e(void 0))), n)) return;
+			let e = t.current?.querySelector("iframe");
+			if (!e) {
+				a(null);
+				return;
+			}
+			let o = () => {
+				r && clearTimeout(r), r = setTimeout(() => {
+					n || (i?.disconnect(), a(e.getBoundingClientRect()));
+				}, 250);
+			};
+			i = new ResizeObserver(o), i.observe(e), o();
+		})(), () => {
+			n = !0, r && clearTimeout(r), i?.disconnect(), document.body.removeAttribute("data-view-ready"), delete document.body.dataset.viewX, delete document.body.dataset.viewY, delete document.body.dataset.viewWidth, delete document.body.dataset.viewHeight;
+		};
+	}, [e, t]);
+}
+function y({ view: e, bundle: t, widthOverride: n }) {
+	let [r, a] = (0, l.useState)(!1), o = (0, l.useRef)(null);
+	h(), v(r, o);
+	let s = (0, l.useMemo)(() => async (e) => {
+		if (e === t.resourceUri) return t.resourceContents;
+		throw Error(`Resource ${e} not in screenshot bundle`);
+	}, [t]);
+	return /* @__PURE__ */ (0, u.jsx)("div", {
+		ref: o,
+		style: {
+			width: "100vw",
+			height: "100vh"
+		},
+		children: /* @__PURE__ */ (0, u.jsx)(i, {
+			viewId: (0, l.useMemo)(() => `preview-bundle-${e}-${Date.now().toString(36)}`, [e]),
+			toolName: e,
+			toolInput: t.toolInput,
+			toolOutput: t.toolOutput,
+			displayMode: "inline",
+			inlineMaxWidth: n,
+			chromeless: !0,
+			onReady: () => a(!0),
+			source: {
+				kind: "live",
+				connection: {
+					callTool: async () => {
+						throw Error("Preview bundle mode has no server connection");
+					},
+					readResource: s
+				},
+				resourceUri: t.resourceUri
+			},
+			cspMode: "permissive",
+			hostInfo: {
+				name: "mcp-use-inspector",
+				version: "11.0.0"
+			}
+		})
+	});
+}
+function b({ view: e }) {
+	let [t] = o(), n = (0, l.useMemo)(() => f(t.get("props")), [t]), s = (0, l.useMemo)(() => t.get("server") || `${window.location.origin}${a() || "/"}`, [t]), m = (0, l.useMemo)(() => {
+		let e = t.get("headers");
+		if (e) try {
+			let t = JSON.parse(atob(e));
+			if (t && typeof t == "object") return t;
+		} catch {}
+	}, [t]), { servers: g, addServer: v, storageLoaded: y } = r(), b = g.find((e) => e.id === d);
+	(0, l.useEffect)(() => {
+		y && v(d, {
+			url: s,
+			displayName: "Preview",
+			protocolNegotiation: "auto",
+			...m ? { headers: m } : {}
+		});
+	}, [
+		y,
+		s,
+		m,
+		v
+	]);
+	let x = b?.state === "ready", S = b?.state === "failed", C = (0, l.useMemo)(() => {
+		if (x) return p(b.resources, e);
+	}, [
+		x,
+		b?.resources,
+		e
+	]), w = (0, l.useMemo)(() => `preview-${e}-${Date.now().toString(36)}`, [e]), T = (0, l.useMemo)(() => async (e) => {
+		if (!b?.readResource) throw Error("Server not ready");
+		return b.readResource(e);
+	}, [b]), [E, D] = (0, l.useState)(!1);
+	_(E), h();
+	let O = c({
+		serverId: d,
+		viewId: w,
+		resourceUri: C ?? "",
+		toolName: e,
+		toolInput: n.toolInput,
+		toolOutput: n.toolOutput,
+		readResource: T,
+		displayMode: "fullscreen",
+		chromeless: !0,
+		onReady: () => D(!0)
+	});
+	return S ? /* @__PURE__ */ (0, u.jsxs)("div", {
+		style: {
+			padding: 16,
+			fontFamily: "monospace",
+			color: "#b00"
+		},
+		children: [
+			"Failed to connect to MCP server at ",
+			s,
+			"."
+		]
+	}) : !x || !C ? x && !C ? /* @__PURE__ */ (0, u.jsxs)("div", {
+		style: {
+			padding: 16,
+			fontFamily: "monospace",
+			color: "#b00"
+		},
+		children: [
+			"View \"",
+			e,
+			"\" not found on ",
+			s,
+			"."
+		]
+	}) : /* @__PURE__ */ (0, u.jsx)("div", {
+		style: {
+			width: "100vw",
+			height: "100vh",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			fontFamily: "monospace",
+			color: "var(--muted-foreground, #888)"
+		},
+		children: "Loading…"
+	}) : /* @__PURE__ */ (0, u.jsx)("div", {
+		style: {
+			width: "100vw",
+			height: "100vh"
+		},
+		children: O && C ? /* @__PURE__ */ (0, u.jsx)(i, {
+			viewId: w,
+			toolName: e,
+			toolInput: n.toolInput,
+			toolOutput: n.toolOutput,
+			displayMode: "fullscreen",
+			chromeless: !0,
+			...O
+		}) : null
+	});
+}
+function x() {
+	let e = s(), [t] = o(), n = e.view ?? "", r = (0, l.useMemo)(() => m(), []), i = t.get("protocol") === "1";
+	g(i, r !== void 0);
+	let a = (0, l.useMemo)(() => {
+		let e = t.get("width");
+		if (!e) return;
+		let n = parseInt(e, 10);
+		return Number.isFinite(n) && n > 0 ? n : void 0;
+	}, [t]);
+	return r ? /* @__PURE__ */ (0, u.jsx)(y, {
+		view: n,
+		bundle: r,
+		widthOverride: a
+	}) : i ? null : /* @__PURE__ */ (0, u.jsx)(b, { view: n });
+}
+//#endregion
+export { x as ViewPreview };

package/dist/cdn/WidgetDebugContext-D4usL_MA.js

@@ -0,0 +1,324 @@
+import { s as e, t } from "./react-BIs9pQ3H.js";
+import { t as n } from "./jsx-runtime-CIxvMpEo.js";
+//#region src/client/context/ThemeContext.tsx
+var r = /* @__PURE__ */ e(t(), 1), i = n(), a = (0, r.createContext)(void 0);
+function o() {
+	let e = (0, r.use)(a);
+	if (e === void 0) throw Error("useTheme must be used within a ThemeProvider");
+	return e;
+}
+function s({ children: e, defaultTheme: t = "system", storageKey: n = "theme", forcedTheme: o }) {
+	let [s, c] = (0, r.useState)(o || t), [l, u] = (0, r.useState)(!1), d = () => typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", f = s === "system" ? d() : s, p = (e) => {
+		let t = document.documentElement, r = e === "system" ? d() : e;
+		t.classList.remove("light", "dark"), t.classList.add(r), o || localStorage.setItem(n, e);
+	};
+	return (0, r.useEffect)(() => {
+		u(!0);
+		let e = localStorage.getItem(n), r = o || e || t;
+		c(r), p(r);
+	}, [
+		t,
+		n,
+		o
+	]), (0, r.useEffect)(() => {
+		if (s !== "system") return;
+		let e = window.matchMedia("(prefers-color-scheme: dark)"), t = () => {
+			p("system");
+		};
+		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, [s]), (0, r.useEffect)(() => {
+		l && p(s);
+	}, [s, l]), /* @__PURE__ */ (0, i.jsx)(a, {
+		value: {
+			theme: s,
+			setTheme: (e) => {
+				if (o) {
+					console.warn("[ThemeProvider] Theme is forced via URL parameter, ignoring setTheme call");
+					return;
+				}
+				c(e);
+			},
+			resolvedTheme: f
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/client/rpc-traffic-coalesce.ts
+var c = 300, l = /(?:^|\/)notifications\//;
+function u(e) {
+	let t = e;
+	return typeof t?.method == "string" ? t.method : null;
+}
+function d(e) {
+	let t = e.message;
+	if (t?.id !== void 0 && t.id !== null || t?.result !== void 0 || t?.error !== void 0) return null;
+	let n = u(e.message);
+	return !n || !l.test(n) ? null : [
+		e.source,
+		e.serverId,
+		e.widgetId ?? "",
+		e.direction,
+		n
+	].join("|");
+}
+function f(e, t, n = Date.now()) {
+	let r = d(e), i = d(t);
+	if (!r || r !== i) return !1;
+	let a = Date.parse(e.timestamp);
+	return Number.isNaN(a) ? !1 : n - a <= c;
+}
+function p(e, t) {
+	return {
+		...e,
+		timestamp: t.timestamp,
+		message: t.message,
+		repeatCount: (e.repeatCount ?? 1) + 1
+	};
+}
+var m = new class {
+	maxEntries;
+	entries = [];
+	listeners = /* @__PURE__ */ new Set();
+	nextId = 0;
+	emitFrame = null;
+	constructor(e = 1e3) {
+		this.maxEntries = e;
+	}
+	publish(e) {
+		let t = this.entries[this.entries.length - 1];
+		if (t && f(t, e, Date.parse(e.timestamp))) {
+			this.entries[this.entries.length - 1] = p(t, e), this.scheduleEmit();
+			return;
+		}
+		this.entries.push({
+			...e,
+			id: `rpc-${++this.nextId}`
+		}), this.entries.length > this.maxEntries && this.entries.splice(0, this.entries.length - this.maxEntries), this.scheduleEmit();
+	}
+	getSnapshot = () => this.entries;
+	subscribe = (e) => (this.listeners.add(e), () => this.listeners.delete(e));
+	clear(e = {}) {
+		let t = new Set(e.serverIds ?? []), n = new Set(e.sources ?? []);
+		t.size === 0 && n.size === 0 ? this.entries = [] : this.entries = this.entries.filter((e) => !((t.size === 0 || t.has(e.serverId)) && (n.size === 0 || n.has(e.source)))), this.scheduleEmit();
+	}
+	peekCoalesceKey(e) {
+		return d(e);
+	}
+	scheduleEmit() {
+		if (this.emitFrame === null) {
+			if (typeof requestAnimationFrame > "u") {
+				this.emit();
+				return;
+			}
+			this.emitFrame = requestAnimationFrame(() => {
+				this.emitFrame = null, this.emit();
+			});
+		}
+	}
+	emit() {
+		this.listeners.forEach((e) => e());
+	}
+}(), h = (0, r.createContext)(void 0), g = {
+	deviceType: "desktop",
+	customViewport: {
+		width: 768,
+		height: 1024
+	},
+	cspMode: "permissive",
+	displayModeOverride: null,
+	capabilities: {
+		hover: !0,
+		touch: !1
+	},
+	safeAreaInsets: {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	},
+	locale: "en-US",
+	timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC"
+};
+function _({ children: e }) {
+	let [t, n] = (0, r.useState)({
+		activeWidgetId: null,
+		widgets: /* @__PURE__ */ new Map(),
+		playground: g
+	}), a = (0, r.useCallback)((e) => {
+		n((t) => ({
+			...t,
+			activeWidgetId: e
+		}));
+	}, []), o = (0, r.useCallback)((e, t) => {
+		n((n) => {
+			if (n.widgets.has(e)) return n;
+			let r = new Map(n.widgets);
+			return r.set(e, {
+				...t,
+				cspViolations: []
+			}), {
+				...n,
+				widgets: r
+			};
+		});
+	}, []), s = (0, r.useCallback)((e) => {
+		n((t) => {
+			let n = new Map(t.widgets);
+			return n.delete(e), {
+				...t,
+				widgets: n,
+				activeWidgetId: t.activeWidgetId === e ? null : t.activeWidgetId
+			};
+		});
+	}, []), c = (0, r.useRef)(t);
+	c.current = t;
+	let l = (0, r.useCallback)((e) => c.current.widgets.get(e), []), u = (0, r.useCallback)((e, t) => {
+		n((n) => {
+			let r = n.widgets.get(e);
+			if (!r) return n;
+			let i = { cspViolations: [...r.cspViolations, t] };
+			t.originalPolicy && r.effectivePolicy === void 0 && (i.effectivePolicy = t.originalPolicy);
+			let a = new Map(n.widgets);
+			return a.set(e, {
+				...r,
+				...i
+			}), {
+				...n,
+				widgets: a
+			};
+		});
+	}, []), d = (0, r.useCallback)((e) => {
+		n((t) => {
+			let n = t.widgets.get(e);
+			if (!n) return t;
+			let r = new Map(t.widgets);
+			return r.set(e, {
+				...n,
+				cspViolations: []
+			}), {
+				...t,
+				widgets: r
+			};
+		});
+	}, []), f = (0, r.useCallback)((e, t) => {
+		n((n) => {
+			let r = n.widgets.get(e);
+			if (!r) return n;
+			let i = new Map(n.widgets);
+			return i.set(e, {
+				...r,
+				modelContext: t
+			}), {
+				...n,
+				widgets: i
+			};
+		});
+	}, []), p = (0, r.useCallback)((e, t) => {
+		n((n) => {
+			let r = n.widgets.get(e);
+			if (!r) return n;
+			let i = new Map(n.widgets);
+			return i.set(e, {
+				...r,
+				widgetState: t
+			}), {
+				...n,
+				widgets: i
+			};
+		});
+	}, []), m = (0, r.useCallback)((e, t, r) => {
+		n((n) => {
+			let i = n.widgets.get(e);
+			if (!i) return n;
+			let a = new Map(n.widgets);
+			return a.set(e, {
+				...i,
+				declaredCsp: t,
+				...r !== void 0 && { effectivePolicy: r }
+			}), {
+				...n,
+				widgets: a
+			};
+		});
+	}, []), _ = (0, r.useCallback)((e) => {
+		n((t) => ({
+			...t,
+			playground: {
+				...t.playground,
+				...e
+			}
+		}));
+	}, []), v = (0, r.useCallback)(() => {
+		n((e) => ({
+			...e,
+			widgets: /* @__PURE__ */ new Map(),
+			activeWidgetId: null
+		}));
+	}, []), y = (0, r.useCallback)(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let [n, r] of t.widgets) r.modelContext && e.set(n, r.modelContext);
+		return e;
+	}, [t.widgets]);
+	return /* @__PURE__ */ (0, i.jsx)(h, {
+		value: (0, r.useMemo)(() => ({
+			...t,
+			setActiveWidget: a,
+			addWidget: o,
+			removeWidget: s,
+			getWidget: l,
+			addCspViolation: u,
+			clearCspViolations: d,
+			setWidgetModelContext: f,
+			setWidgetState: p,
+			setWidgetDeclaredCsp: m,
+			updatePlaygroundSettings: _,
+			clearAllWidgets: v,
+			getAllModelContexts: y
+		}), [
+			t,
+			a,
+			o,
+			s,
+			l,
+			u,
+			d,
+			f,
+			p,
+			m,
+			_,
+			v,
+			y
+		]),
+		children: e
+	});
+}
+function v() {
+	let e = (0, r.use)(h);
+	if (!e) throw Error("useWidgetDebug must be used within WidgetDebugProvider");
+	return e;
+}
+var y = {
+	mobile: {
+		width: 390,
+		height: 844,
+		name: "iPhone 14"
+	},
+	tablet: {
+		width: 820,
+		height: 1180,
+		name: "iPad Air"
+	},
+	desktop: {
+		width: 1440,
+		height: 900,
+		name: "Desktop"
+	},
+	custom: {
+		width: 768,
+		height: 1024,
+		name: "Custom"
+	}
+};
+//#endregion
+export { u as a, m as i, _ as n, s as o, v as r, o as s, y as t };