sunpeak 0.20.23 → 0.20.29

package/dist/{inspector-DtEighD9.cjs → inspector-CJPO4f12.cjs}

@@ -4224,7 +4224,7 @@ registerHostShell({
 }`
 });
 //#endregion
-//#region ../../node_modules/.pnpm/@modelcontextprotocol+ext-apps@1.7.1_@modelcontextprotocol+sdk@1.29.0_zod@4.4.3__react-_3f5c1a6a4033ae62a19a2bb834f0e050/node_modules/@modelcontextprotocol/ext-apps/dist/src/app-bridge.js
+//#region ../../node_modules/.pnpm/@modelcontextprotocol+ext-apps@1.7.2_@modelcontextprotocol+sdk@1.29.0_zod@4.4.3__react-_f5b843da9146ebea748e10ad8dfce46a/node_modules/@modelcontextprotocol/ext-apps/dist/src/app-bridge.js
 ((X) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(X, { get: (Y, Z) => (typeof require < "u" ? require : Y)[Z] }) : X)(function(X) {
 	if (typeof require < "u") return require.apply(this, arguments);
 	throw Error("Dynamic require of \"" + X + "\" is not supported");
@@ -5546,6 +5546,145 @@ iframe { border: none; width: 100%; height: 100%; display: block; }
 </body>
 </html>`;
 }
+var SUNPEAK_INLINE_HELPER_SCRIPT = `
+(function() {
+  if (window.sunpeak) return; // already installed (e.g. parent hot-reload)
+  // Opt-out: resource HTML using the real MCP Apps SDK can suppress the
+  // helper to avoid sending two ui/initialize requests. Manual lowercase
+  // comparison so content="off" / "OFF" / "Off" all match (the Selectors
+  // L4 case-insensitive flag isn't supported in all test environments).
+  try {
+    var metas = document.querySelectorAll('meta[name="sunpeak-helper"]');
+    for (var mi = 0; mi < metas.length; mi++) {
+      var contentAttr = metas[mi].getAttribute('content');
+      if (contentAttr && contentAttr.toLowerCase() === 'off') return;
+    }
+  } catch (e) { /* document not ready or querySelector missing */ }
+
+  var listeners = {
+    toolInput: [],
+    toolInputPartial: [],
+    toolResult: [],
+    toolCancelled: [],
+    hostContext: []
+  };
+  var last = {
+    toolInput: undefined,
+    toolInputPartial: undefined,
+    toolResult: undefined,
+    toolCancelled: undefined,
+    hostContext: undefined
+  };
+  function dispatch(channel, value) {
+    last[channel] = value;
+    // Iterate over a SNAPSHOT — callbacks that unsubscribe themselves
+    // mutate the live list, which would skip subsequent callbacks under a
+    // for-by-index loop on the original array.
+    var list = listeners[channel].slice();
+    for (var i = 0; i < list.length; i++) {
+      try { list[i](value); } catch (e) { console.error('[sunpeak] callback error:', e); }
+    }
+  }
+  // Map channel names to the public method name for error messages.
+  var channelMethodName = {
+    toolInput: 'onToolInput',
+    toolInputPartial: 'onToolInputPartial',
+    toolResult: 'onToolResult',
+    toolCancelled: 'onToolCancelled',
+    hostContext: 'onHostContextChange'
+  };
+  function subscribe(channel) {
+    return function(cb) {
+      if (typeof cb !== 'function') {
+        throw new TypeError('window.sunpeak.' + channelMethodName[channel] + ' expects a function');
+      }
+      listeners[channel].push(cb);
+      if (last[channel] !== undefined) {
+        try { cb(last[channel]); } catch (e) { console.error('[sunpeak] callback error:', e); }
+      }
+      return function unsubscribe() {
+        var idx = listeners[channel].indexOf(cb);
+        if (idx >= 0) listeners[channel].splice(idx, 1);
+      };
+    };
+  }
+
+  window.sunpeak = {
+    onToolInput: subscribe('toolInput'),
+    onToolInputPartial: subscribe('toolInputPartial'),
+    onToolResult: subscribe('toolResult'),
+    onToolCancelled: subscribe('toolCancelled'),
+    onHostContextChange: subscribe('hostContext')
+  };
+
+  var nextId = 1;
+  var pending = {};
+
+  function sendRequest(method, params) {
+    var id = nextId++;
+    return new Promise(function(resolve, reject) {
+      pending[id] = { resolve: resolve, reject: reject };
+      try {
+        window.parent.postMessage({ jsonrpc: '2.0', id: id, method: method, params: params }, '*');
+      } catch (e) {
+        delete pending[id];
+        reject(e);
+      }
+    });
+  }
+  function sendNotification(method, params) {
+    try {
+      window.parent.postMessage({ jsonrpc: '2.0', method: method, params: params || {} }, '*');
+    } catch (e) { /* parent detached */ }
+  }
+
+  window.addEventListener('message', function(ev) {
+    // Only trust messages from the actual parent (the sandbox proxy).
+    // Without this guard, a sibling iframe in the same browsing context or
+    // a browser extension content script could forge JSON-RPC notifications
+    // and drive the embedder's onToolResult/onToolInput callbacks with
+    // attacker-controlled data.
+    if (ev.source !== window.parent) return;
+    var msg = ev.data;
+    if (!msg || typeof msg !== 'object' || msg.jsonrpc !== '2.0') return;
+    if (typeof msg.id !== 'undefined' && pending[msg.id]) {
+      var p = pending[msg.id];
+      delete pending[msg.id];
+      if (msg.error) p.reject(new Error((msg.error && msg.error.message) || 'request error'));
+      else p.resolve(msg.result);
+      return;
+    }
+    if (msg.method === 'ui/notifications/tool-input') {
+      dispatch('toolInput', (msg.params && msg.params.arguments) || {});
+    } else if (msg.method === 'ui/notifications/tool-input-partial') {
+      dispatch('toolInputPartial', (msg.params && msg.params.arguments) || {});
+    } else if (msg.method === 'ui/notifications/tool-result') {
+      // tool-result params are the CallToolResult directly per the spec.
+      dispatch('toolResult', msg.params || {});
+    } else if (msg.method === 'ui/notifications/tool-cancelled') {
+      // Clear cached input / partial / result so a late onToolResult
+      // subscriber doesn't get the cancelled-then-stale value replayed.
+      // hostContext stays — the environment hasn't changed.
+      last.toolInput = undefined;
+      last.toolInputPartial = undefined;
+      last.toolResult = undefined;
+      dispatch('toolCancelled', msg.params || {});
+    } else if (msg.method === 'ui/notifications/host-context-changed') {
+      dispatch('hostContext', msg.params || {});
+    }
+  });
+
+  sendRequest('ui/initialize', {
+    appInfo: { name: 'sunpeak-inline-helper', version: '1.0.0' },
+    appCapabilities: {},
+    protocolVersion: '2026-01-26'
+  }).then(function() {
+    sendNotification('ui/notifications/initialized');
+  }).catch(function(err) {
+    console.warn('[sunpeak] ui/initialize failed:', err && err.message);
+  });
+})();
+`.trim();
 //#endregion
 //#region src/inspector/iframe-resource.tsx
 /**
@@ -5684,6 +5823,23 @@ requestAnimationFrame(function(){
 e.source.postMessage({jsonrpc:"2.0",method:"sunpeak/fence-ack",params:{fenceId:fid}},"*");
 });}});`;
 /**
+* Inject the paint-fence responder and (optionally) a platform runtime script
+* into a user-provided HTML document. Used for the `html` prop mode where the
+* embedder hands us a complete document from `mcpClient.readResource(...)` and
+* we need to splice in the same infrastructure that the `scriptSrc` wrapper
+* provides. The injection is placed before `</head>` when present, falling
+* back to the start of `<body>` or the document start.
+*/
+function injectInfraScripts(html, platformScript) {
+	const fenceTag = `<script data-sunpeak-fence>${PAINT_FENCE_SCRIPT}<\/script>`;
+	const injection = `${platformScript ? `<script>${platformScript}<\/script>` : ""}${fenceTag}${`<script data-sunpeak-helper>${SUNPEAK_INLINE_HELPER_SCRIPT}<\/script>`}`;
+	const headMatch = html.match(/<\/head\s*>/i);
+	if (headMatch) return html.replace(headMatch[0], `${injection}${headMatch[0]}`);
+	const bodyMatch = html.match(/<body([^>]*)>/i);
+	if (bodyMatch) return html.replace(bodyMatch[0], `${bodyMatch[0]}${injection}`);
+	return injection + html;
+}
+/**
 * Generates HTML wrapper for a script URL.
 * The MCP Apps SDK in the loaded script handles communication via PostMessageTransport.
 */
@@ -5747,7 +5903,7 @@ function buildIframeAllow(permissions) {
 * connects via PostMessageTransport to window.parent. The parent side uses
 * McpAppHost (wrapping AppBridge) to communicate.
 */
-function IframeResource({ src, scriptSrc, hostContext, toolInput, toolInputPartial, toolResult, hostOptions, csp, permissions, prefersBorder, className, style, onDisplayModeReady, debugInjectState, injectOpenAIRuntime, sandboxUrl }) {
+function IframeResource({ src, scriptSrc, html, hostContext, toolInput, toolInputPartial, toolResult, hostOptions, csp, permissions, prefersBorder, className, style, onDisplayModeReady, debugInjectState, injectOpenAIRuntime, sandboxUrl }) {
 	const iframeRef = (0, react.useRef)(null);
 	const hostRef = (0, react.useRef)(null);
 	const resourceUrl = src ?? scriptSrc;
@@ -5755,6 +5911,8 @@ function IframeResource({ src, scriptSrc, hostContext, toolInput, toolInputParti
 	srcRef.current = src;
 	const scriptSrcRef = (0, react.useRef)(scriptSrc);
 	scriptSrcRef.current = scriptSrc;
+	const htmlRef = (0, react.useRef)(html);
+	htmlRef.current = html;
 	const cspRef = (0, react.useRef)(csp);
 	cspRef.current = csp;
 	const hostContextRef = (0, react.useRef)(hostContext);
@@ -5804,9 +5962,20 @@ function IframeResource({ src, scriptSrc, hostContext, toolInput, toolInputParti
 		onSandboxReady: () => {
 			const currentSrc = srcRef.current;
 			const currentScriptSrc = scriptSrcRef.current;
+			const currentHtml = htmlRef.current;
 			const currentHost = hostRef.current;
 			if (!currentHost) return;
-			if (currentScriptSrc) {
+			if (currentHtml) {
+				const finalHtml = injectInfraScripts(currentHtml, injectOpenAIRuntimeRef.current ? MOCK_OPENAI_RUNTIME_SCRIPT : void 0);
+				currentHost.sendSandboxResourceReady({
+					html: finalHtml,
+					sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
+				});
+				if (iframeRef.current) {
+					iframeRef.current.style.opacity = "1";
+					iframeRef.current.style.transition = "opacity 100ms";
+				}
+			} else if (currentScriptSrc) {
 				const absoluteScriptSrc = currentScriptSrc.startsWith("/") ? `${window.location.origin}${currentScriptSrc}` : currentScriptSrc;
 				const cspPolicy = generateCSP(cspRef.current, absoluteScriptSrc);
 				const appHtml = generateScriptHtml(absoluteScriptSrc, hostContextRef.current?.theme ?? "dark", cspPolicy, injectOpenAIRuntimeRef.current ? MOCK_OPENAI_RUNTIME_SCRIPT : void 0);
@@ -5877,7 +6046,17 @@ function IframeResource({ src, scriptSrc, hostContext, toolInput, toolInputParti
 	const borderStyle = prefersBorder ? { border: "1px solid var(--color-border-primary, #e5e7eb)" } : { border: "none" };
 	const sandboxSrc = (0, react.useMemo)(() => {
 		if (!sandboxUrl) return void 0;
-		const url = new URL("/proxy", sandboxUrl);
+		let url;
+		try {
+			const parsed = new URL(sandboxUrl);
+			url = parsed.pathname && parsed.pathname !== "/" ? parsed : new URL("/proxy", sandboxUrl);
+		} catch {
+			return;
+		}
+		if (url.protocol !== "http:" && url.protocol !== "https:") {
+			console.warn("[IframeResource] Ignoring non-http(s) sandboxUrl:", sandboxUrl);
+			return;
+		}
 		if (injectOpenAIRuntime) url.searchParams.set("platform", "chatgpt");
 		return url.toString();
 	}, [sandboxUrl, injectOpenAIRuntime]);
@@ -6317,6 +6496,7 @@ function useInspectorState({ simulations, defaultHost = "chatgpt" }) {
 	}, [toolResult, modelContext]);
 	const resourceUrl = selectedSim?.resourceUrl;
 	const resourceScript = selectedSim?.resourceScript;
+	const resourceHtml = selectedSim?.resourceHtml;
 	const csp = selectedSim?.resource ? extractResourceCSP(selectedSim.resource) : void 0;
 	const resourceMeta = (selectedSim?.resource?._meta)?.ui;
 	return {
@@ -6383,6 +6563,7 @@ function useInspectorState({ simulations, defaultHost = "chatgpt" }) {
 		handleUpdateModelContext,
 		resourceUrl,
 		resourceScript,
+		resourceHtml,
 		csp,
 		permissions: resourceMeta?.permissions,
 		prefersBorder: resourceMeta?.prefersBorder ?? false,
@@ -6393,6 +6574,40 @@ function useInspectorState({ simulations, defaultHost = "chatgpt" }) {
 	};
 }
 //#endregion
+//#region src/inspector/inspector-api.ts
+function inspectorApiEndpoint(path, apiBaseUrl) {
+	if (!apiBaseUrl) return path;
+	return `${apiBaseUrl.replace(/\/+$/, "")}${path.startsWith("/") ? path : `/${path}`}`;
+}
+async function readInspectorJson(res, endpoint) {
+	const text = await res.text();
+	if (!text) return {};
+	try {
+		return JSON.parse(text);
+	} catch {
+		const contentType = res.headers.get("content-type");
+		const preview = text.trim().replace(/\s+/g, " ").slice(0, 120);
+		const typeHint = contentType ? ` (${contentType})` : "";
+		throw new Error(`Expected JSON from ${endpoint} but received a non-JSON response${typeHint}: ${preview}`);
+	}
+}
+function resolveInspectorResourceUrls(simulations, apiBaseUrl) {
+	if (!apiBaseUrl || !simulations || typeof simulations !== "object") return simulations;
+	const resolved = {};
+	for (const [key, value] of Object.entries(simulations)) {
+		if (!value || typeof value !== "object") {
+			resolved[key] = value;
+			continue;
+		}
+		const sim = value;
+		resolved[key] = {
+			...sim,
+			resourceUrl: typeof sim.resourceUrl === "string" && sim.resourceUrl.startsWith("/") ? inspectorApiEndpoint(sim.resourceUrl, apiBaseUrl) : sim.resourceUrl
+		};
+	}
+	return resolved;
+}
+//#endregion
 //#region src/inspector/use-mcp-connection.ts
 /**
 * Hook for managing MCP server connection status via the dev server proxy.
@@ -6405,7 +6620,7 @@ function useInspectorState({ simulations, defaultHost = "chatgpt" }) {
 * once (or safely twice with cancellation), while explicit `reconnect()` calls
 * are triggered by the Inspector's URL-change effect.
 */
-function useMcpConnection(initialServerUrl) {
+function useMcpConnection(initialServerUrl, inspectorApiBaseUrl) {
 	const [status, setStatus] = (0, react.useState)(initialServerUrl ? "connecting" : "disconnected");
 	const [error, setError] = (0, react.useState)();
 	const [simulations, setSimulations] = (0, react.useState)();
@@ -6417,7 +6632,8 @@ function useMcpConnection(initialServerUrl) {
 		try {
 			const body = { url };
 			if (auth && auth.type !== "none") body.auth = auth;
-			const res = await fetch("/__sunpeak/connect", {
+			const endpoint = inspectorApiEndpoint("/__sunpeak/connect", inspectorApiBaseUrl);
+			const res = await fetch(endpoint, {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				body: JSON.stringify(body)
@@ -6425,7 +6641,7 @@ function useMcpConnection(initialServerUrl) {
 			if (!res.ok) {
 				let message;
 				try {
-					const json = await res.json();
+					const json = await readInspectorJson(res, endpoint);
 					if (json.error) message = json.error;
 				} catch {}
 				if (!message) if (res.status === 404) message = "Server not found at this URL. Check the URL and make sure the server is running.";
@@ -6433,9 +6649,9 @@ function useMcpConnection(initialServerUrl) {
 				else message = `Connection failed (${res.status})`;
 				throw new Error(message);
 			}
-			const data = await res.json();
+			const data = await readInspectorJson(res, endpoint);
 			setStatus("connected");
-			setSimulations(data.simulations ?? void 0);
+			setSimulations(resolveInspectorResourceUrls(data.simulations, inspectorApiBaseUrl));
 		} catch (err) {
 			let message = err instanceof Error ? err.message : String(err);
 			if (err instanceof TypeError && message === "Failed to fetch") message = "Cannot reach MCP server. Is it running?";
@@ -6443,20 +6659,21 @@ function useMcpConnection(initialServerUrl) {
 			setStatus("error");
 			setSimulations(void 0);
 		}
-	}, []);
+	}, [inspectorApiBaseUrl]);
 	const setConnected = (0, react.useCallback)((sims) => {
 		setHasReconnected(true);
 		setStatus("connected");
 		setError(void 0);
-		setSimulations(sims);
-	}, []);
+		setSimulations(resolveInspectorResourceUrls(sims, inspectorApiBaseUrl));
+	}, [inspectorApiBaseUrl]);
 	(0, react.useEffect)(() => {
 		if (!initialServerUrl) return;
 		let cancelled = false;
 		setStatus("connecting");
 		(async () => {
 			try {
-				const res = await fetch("/__sunpeak/list-tools");
+				const endpoint = inspectorApiEndpoint("/__sunpeak/list-tools", inspectorApiBaseUrl);
+				const res = await fetch(endpoint);
 				if (cancelled) return;
 				if (!res.ok) {
 					const msg = res.status === 404 ? "MCP server not reachable. Is it running?" : `Health check failed (${res.status}). Check the MCP server logs.`;
@@ -6485,7 +6702,14 @@ function useMcpConnection(initialServerUrl) {
 //#endregion
 //#region src/inspector/theme-provider.tsx
 var ThemeProviderContext = react.createContext(void 0);
-/** Default theme applier: sets data-theme attribute on document.documentElement */
+/**
+* Default theme applier: sets `data-theme` on `document.documentElement`.
+* Kept for callers using `ThemeProvider` outside the bundled `<Inspector />`
+* (e.g. custom-inspector builds composed from this package's primitives).
+* The bundled Inspector overrides this with a no-op applier and applies
+* theme to its own root element, so embedding it inside a host React app
+* leaves the host's document attributes untouched.
+*/
 function defaultApplyTheme(theme) {
 	if (typeof document !== "undefined") document.documentElement.setAttribute("data-theme", theme);
 }
@@ -6528,7 +6752,7 @@ function ChevronRightIcon() {
 		})
 	});
 }
-function SimpleSidebar({ children, controls, headerRight }) {
+function SimpleSidebar({ children, controls, headerRight, rootRef, fillParent = false }) {
 	const [isDrawerOpen, setIsDrawerOpen] = react.useState(false);
 	const [sidebarWidth, setSidebarWidth] = react.useState(DEFAULT_SIDEBAR_WIDTH);
 	const [isResizing, setIsResizing] = react.useState(false);
@@ -6553,7 +6777,8 @@ function SimpleSidebar({ children, controls, headerRight }) {
 		};
 	}, [isResizing]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "sunpeak-inspector-root flex h-screen w-full overflow-hidden relative",
+		ref: rootRef,
+		className: `sunpeak-inspector-root flex ${fillParent ? "h-full w-full" : "h-screen w-full"} overflow-hidden relative`,
 		children: [
 			isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "fixed inset-0 z-50 cursor-col-resize" }),
 			isDrawerOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -6883,13 +7108,85 @@ function resolveServerToolResult(mock, args) {
 	for (const entry of mock) if (Object.entries(entry.when).every(([key, value]) => args != null && args[key] === value)) return entry.result;
 }
 //#endregion
+//#region src/inspector/app-flatten.ts
+/** Pull the output-template URI off a tool's _meta, if present. */
+function getOutputTemplate(toolMeta) {
+	if (!toolMeta || typeof toolMeta !== "object") return void 0;
+	const openai = toolMeta.openai;
+	if (!openai || typeof openai !== "object") return void 0;
+	const template = openai.outputTemplate;
+	return typeof template === "string" ? template : void 0;
+}
+/** Build an MCP-shaped `Resource` from the embedder's input. Used purely for
+* sidebar metadata (CSP, permissions, prefersBorder); the actual HTML render
+* goes through `resourceHtml` on the resulting Simulation. */
+function toMcpResource(r) {
+	return {
+		uri: r.uri,
+		mimeType: r.mimeType ?? "text/html",
+		name: r.uri,
+		...r._meta ? { _meta: r._meta } : {}
+	};
+}
+/**
+* Flatten an `InspectorApp` to the `Record<string, Simulation>` shape the
+* Inspector consumes internally. Returns an empty map if `app` is missing.
+*/
+function flattenAppToSimulations(app) {
+	if (!app) return {};
+	const result = {};
+	const resourcesByUri = /* @__PURE__ */ new Map();
+	for (const r of app.resources) {
+		if (resourcesByUri.has(r.uri)) console.warn(`[Inspector] Duplicate resource URI '${r.uri}' in app.resources — the second entry replaces the first.`);
+		resourcesByUri.set(r.uri, r);
+	}
+	for (const appTool of app.tools) {
+		const uri = getOutputTemplate(appTool.tool._meta);
+		if (!uri) continue;
+		const resource = resourcesByUri.get(uri);
+		if (!resource) continue;
+		const mcpResource = toMcpResource(resource);
+		const sims = appTool.simulations && appTool.simulations.length > 0 ? appTool.simulations : [{ name: appTool.tool.name }];
+		for (const sim of sims) {
+			const key = `${appTool.tool.name}__${sim.name}`;
+			if (key in result) console.warn(`[Inspector] Duplicate simulation name '${sim.name}' under tool '${appTool.tool.name}' — the second entry replaces the first.`);
+			result[key] = {
+				name: key,
+				displayName: sim.name,
+				resourceHtml: resource.html,
+				userMessage: sim.userMessage,
+				tool: appTool.tool,
+				resource: mcpResource,
+				toolInput: sim.toolInput,
+				toolResult: sim.toolResult,
+				serverTools: sim.serverTools
+			};
+		}
+	}
+	return result;
+}
+//#endregion
 //#region src/inspector/inspector.tsx
 var DOCS_BASE_URL = "https://sunpeak.ai/docs";
 /** Check whether a simulation has user-authored fixture data. */
 function hasFixtureData(sim) {
 	return sim.toolResult != null || sim.toolInput != null || sim.serverTools != null;
 }
-function Inspector({ children, simulations: initialSimulations = {}, appName = "Sunpeak", appIcon, defaultHost = "chatgpt", onCallTool, onCallToolDirect, defaultProdResources = false, hideInspectorModes = false, demoMode = false, sandboxUrl, mcpServerUrl }) {
+var EMPTY_SIMULATIONS = Object.freeze({});
+function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_SIMULATIONS, appName: appNameProp, appIcon: appIconProp, defaultHost = "chatgpt", onCallTool, onCallToolDirect, defaultProdResources = false, hideInspectorModes = false, demoMode = false, sandboxUrl, mcpServerUrl, inspectorApiBaseUrl }) {
+	const initialSimulations = react.useMemo(() => app ? flattenAppToSimulations(app) : initialSimulationsProp, [app, initialSimulationsProp]);
+	const appName = app?.name ?? appNameProp ?? "Sunpeak";
+	const appIcon = app?.icon ?? appIconProp;
+	const isEmbedded = !!app;
+	const conflictWarnedRef = react.useRef(false);
+	react.useEffect(() => {
+		if (conflictWarnedRef.current) return;
+		if (app && initialSimulationsProp && Object.keys(initialSimulationsProp).length > 0) {
+			conflictWarnedRef.current = true;
+			console.warn("[Inspector] Both `app` and `simulations` were provided. `app` takes precedence; `simulations` is ignored.");
+		}
+	}, [app, initialSimulationsProp]);
+	const rootRef = react.useRef(null);
 	const [simulations, setSimulations] = react.useState(initialSimulations);
 	react.useEffect(() => {
 		setSimulations(initialSimulations);
@@ -6972,13 +7269,14 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 	const [oauthClientSecret, setOauthClientSecret] = react.useState("");
 	const [oauthStatus, setOauthStatus] = react.useState("none");
 	const [oauthError, setOauthError] = react.useState();
-	const connection = useMcpConnection(mcpServerUrl || void 0);
+	const connection = useMcpConnection(isEmbedded ? void 0 : mcpServerUrl || void 0, inspectorApiBaseUrl);
 	const [prodResources, setProdResources] = react.useState(state.urlProdResources ?? defaultProdResources);
 	const showSidebar = state.urlSidebar !== false;
 	const showDevOverlay = state.urlDevOverlay !== false;
 	const [isRunning, setIsRunning] = react.useState(false);
 	const [hasRun, setHasRun] = react.useState(false);
 	const [showCheck, setShowCheck] = react.useState(false);
+	const [serverPreviewGeneration, setServerPreviewGeneration] = react.useState(0);
 	const checkTimerRef = react.useRef(void 0);
 	const oauthCleanupRef = react.useRef(void 0);
 	react.useEffect(() => {
@@ -7014,7 +7312,8 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 		setOauthError(void 0);
 		const popup = window.open("about:blank", `sunpeak-oauth-${Date.now()}`, "width=600,height=700,popup=yes");
 		try {
-			const res = await fetch("/__sunpeak/oauth/start", {
+			const endpoint = inspectorApiEndpoint("/__sunpeak/oauth/start", inspectorApiBaseUrl);
+			const res = await fetch(endpoint, {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				body: JSON.stringify({
@@ -7024,15 +7323,12 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 					clientSecret: oauthClientSecret || void 0
 				})
 			});
+			const data = await readInspectorJson(res, endpoint);
 			if (!res.ok) {
 				let message = `OAuth start failed (${res.status})`;
-				try {
-					const json = await res.json();
-					if (json.error) message = json.error;
-				} catch {}
+				if (data.error) message = data.error;
 				throw new Error(message);
 			}
-			const data = await res.json();
 			if (data.error) {
 				popup?.close();
 				setOauthError(data.error);
@@ -7046,12 +7342,22 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 				return;
 			}
 			if (data.status === "redirect" && data.authUrl) {
+				let parsedAuthUrl = null;
+				try {
+					parsedAuthUrl = new URL(data.authUrl);
+				} catch {}
+				if (!parsedAuthUrl || parsedAuthUrl.protocol !== "http:" && parsedAuthUrl.protocol !== "https:") {
+					popup?.close();
+					setOauthError("OAuth authorization URL is not a valid http(s) URL.");
+					setOauthStatus("error");
+					return;
+				}
 				if (!popup || popup.closed) {
 					setOauthError("Popup was blocked. Allow popups for this site and try again.");
 					setOauthStatus("error");
 					return;
 				}
-				popup.location.href = data.authUrl;
+				popup.location.href = parsedAuthUrl.toString();
 				let checkClosed;
 				let bc;
 				const cleanup = () => {
@@ -7103,11 +7409,14 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 		oauthClientId,
 		oauthClientSecret,
 		demoMode,
-		connection
+		connection,
+		inspectorApiBaseUrl
 	]);
 	react.useEffect(() => {
-		if (connection.simulations) setSimulations(connection.simulations);
-		else if (connection.status === "error" && connection.hasReconnected) setSimulations({});
+		if (connection.simulations) {
+			setSimulations(connection.simulations);
+			setServerPreviewGeneration((generation) => generation + 1);
+		} else if (connection.status === "error" && connection.hasReconnected) setSimulations({});
 	}, [
 		connection.simulations,
 		connection.status,
@@ -7240,15 +7549,23 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 		displayMode,
 		setDisplayMode
 	]);
-	react.useLayoutEffect(() => {
-		const vars = activeShell?.styleVariables;
-		if (!vars) return;
-		const root = document.documentElement;
-		for (const [key, value] of Object.entries(vars)) if (value) root.style.setProperty(key, value);
-	}, [activeShell]);
+	const prevStyleVarKeysRef = react.useRef([]);
 	const prevPageStyleKeysRef = react.useRef([]);
 	react.useLayoutEffect(() => {
-		const root = document.documentElement;
+		const root = rootRef.current;
+		if (!root) return;
+		root.setAttribute("data-theme", state.theme);
+		root.style.colorScheme = state.theme;
+		for (const key of prevStyleVarKeysRef.current) root.style.removeProperty(key);
+		const vars = activeShell?.styleVariables;
+		if (vars) {
+			const keys = [];
+			for (const [key, value] of Object.entries(vars)) if (value) {
+				root.style.setProperty(key, value);
+				keys.push(key);
+			}
+			prevStyleVarKeysRef.current = keys;
+		} else prevStyleVarKeysRef.current = [];
 		for (const key of prevPageStyleKeysRef.current) root.style.removeProperty(key);
 		const pageStyles = activeShell?.pageStyles;
 		if (pageStyles) {
@@ -7259,7 +7576,7 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 			}
 			prevPageStyleKeysRef.current = keys;
 		} else prevPageStyleKeysRef.current = [];
-	}, [activeShell]);
+	}, [activeShell, state.theme]);
 	react.useLayoutEffect(() => {
 		const fontCss = activeShell?.fontCss;
 		const id = "sunpeak-host-fonts";
@@ -7350,7 +7667,7 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-sm text-center max-w-xs",
 				style: { color: "var(--color-text-secondary)" },
-				children: isError ? "Could not connect to MCP server" : isConnected ? "No tools with UI resources found on this server" : serverUrl ? "Connecting…" : "Enter an MCP server URL to get started"
+				children: isEmbedded ? "No tools with UI resources in this app" : isError ? "Could not connect to MCP server" : isConnected ? "No tools with UI resources found on this server" : serverUrl ? "Connecting…" : "Enter an MCP server URL to get started"
 			})
 		});
 	} else if (showEmptyState) content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -7375,6 +7692,30 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 			children: "Building…"
 		})
 	});
+	else if (state.resourceHtml) content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "h-full w-full",
+		style: { background: iframeBg },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IframeResource, {
+			html: state.resourceHtml,
+			hostContext,
+			toolInput: state.toolInput,
+			toolResult: state.effectiveToolResult,
+			hostOptions: {
+				hostInfo: activeShell?.hostInfo,
+				hostCapabilities: activeShell?.hostCapabilities,
+				onDisplayModeChange: state.handleDisplayModeChange,
+				onUpdateModelContext: state.handleUpdateModelContext,
+				onCallTool: handleCallTool
+			},
+			permissions: state.permissions,
+			prefersBorder: state.prefersBorder,
+			onDisplayModeReady: state.handleDisplayModeReady,
+			debugInjectState: state.modelContext,
+			injectOpenAIRuntime: state.activeHost === "chatgpt",
+			sandboxUrl,
+			className: "h-full w-full"
+		}, `${state.activeHost}-${state.selectedSimulationName}-html`)
+	});
 	else if (effectiveResourceUrl) content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "h-full w-full",
 		style: { background: iframeBg },
@@ -7397,7 +7738,7 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 			injectOpenAIRuntime: state.activeHost === "chatgpt",
 			sandboxUrl,
 			className: "h-full w-full"
-		}, `${state.activeHost}-${state.selectedSimulationName}-${effectiveResourceUrl}-${prodResources}-${prodResourcesGeneration}`)
+		}, `${state.activeHost}-${state.selectedSimulationName}-${effectiveResourceUrl}-${prodResources}-${prodResourcesGeneration}-${serverPreviewGeneration}`)
 	});
 	else if (!prodResources && state.resourceScript) content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "h-full w-full",
@@ -7425,7 +7766,7 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 		}, `${state.activeHost}-${state.selectedSimulationName}-${state.resourceScript}`)
 	});
 	else content = children;
-	const applyTheme = activeShell?.applyTheme;
+	const applyTheme = react.useCallback((_theme) => {}, []);
 	const runButton = !demoMode && onCallTool && currentSim && activeSimulationName === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
 		onClick: handleRun,
@@ -7465,11 +7806,13 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 		headerAction: runButton,
 		children: content
 	}) : content;
+	const rootSizing = isEmbedded ? "h-full w-full" : "h-screen w-screen";
 	if (!showSidebar) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeProvider, {
 		theme: state.theme,
 		applyTheme,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex h-screen w-screen",
+			ref: rootRef,
+			className: `sunpeak-inspector-root flex ${rootSizing}`,
 			children: conversationContent
 		})
 	});
@@ -7477,10 +7820,12 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 		theme: state.theme,
 		applyTheme,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SimpleSidebar, {
+			rootRef,
+			fillParent: isEmbedded,
 			controls: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "space-y-1",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+					!isEmbedded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
 						label: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 							className: "flex items-center gap-1.5",
 							children: ["MCP Server", serverUrl && !demoMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -7499,8 +7844,7 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 							placeholder: "http://localhost:8000/mcp",
 							disabled: demoMode
 						})
-					}),
-					!demoMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
+					}), !demoMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
 						label: "Authentication",
 						defaultCollapsed: authType === "none",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -7585,8 +7929,8 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 								})
 							]
 						})
-					}, `auth-${authType === "none" ? "none" : "active"}`),
-					!hideInspectorModes && !demoMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCheckbox, {
+					}, `auth-${authType === "none" ? "none" : "active"}`)] }),
+					!hideInspectorModes && !demoMode && !isEmbedded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCheckbox, {
 						checked: prodResources,
 						onChange: setProdResources,
 						label: "Prod Resources",
@@ -7637,7 +7981,7 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 									label: selectedToolInfo && selectedToolInfo.fixtureSimNames.length > 0 ? "None (call server)" : "None"
 								}], ...(selectedToolInfo?.fixtureSimNames ?? []).map((simName) => ({
 									value: simName,
-									label: simName
+									label: simulations[simName]?.displayName ?? simName
 								}))]
 							})
 						})]
@@ -8113,6 +8457,12 @@ Object.defineProperty(exports, "extractResourceCSP", {
 		return extractResourceCSP;
 	}
 });
+Object.defineProperty(exports, "flattenAppToSimulations", {
+	enumerable: true,
+	get: function() {
+		return flattenAppToSimulations;
+	}
+});
 Object.defineProperty(exports, "getHostShell", {
 	enumerable: true,
 	get: function() {
@@ -8156,4 +8506,4 @@ Object.defineProperty(exports, "useThemeContext", {
 	}
 });
 
-//# sourceMappingURL=inspector-DtEighD9.cjs.map
+//# sourceMappingURL=inspector-CJPO4f12.cjs.map