sunpeak 0.17.4 → 0.17.6

package/dist/{simulator-Dl8B-Ljb.js → simulator-BijjlOXb.js}

@@ -2185,13 +2185,14 @@ var DEFAULT_PLATFORM = "desktop";
 * - touch: 'true' | 'false'
 * - safeAreaTop, safeAreaBottom, safeAreaLeft, safeAreaRight: number
 * - host: 'chatgpt' | 'claude'
-* - prodTools: 'true' | 'false'
+* - tool: tool name (e.g., 'show-albums') — selects tool without mock data
 * - prodResources: 'true' | 'false'
 */
 function parseUrlParams() {
 	if (typeof window === "undefined") return {};
 	const params = new URLSearchParams(window.location.search);
 	const simulation = params.get("simulation") ?? void 0;
+	const tool = params.get("tool") ?? void 0;
 	const theme = params.get("theme");
 	const displayMode = params.get("displayMode");
 	const locale = params.get("locale");
@@ -2200,8 +2201,6 @@ function parseUrlParams() {
 	const maxWidthParam = params.get("maxWidth");
 	const containerMaxWidth = maxWidthParam ? Number(maxWidthParam) : void 0;
 	const host = params.get("host") ?? void 0;
-	const prodToolsParam = params.get("prodTools");
-	const prodTools = prodToolsParam === "true" ? true : prodToolsParam === "false" ? false : void 0;
 	const prodResourcesParam = params.get("prodResources");
 	const prodResources = prodResourcesParam === "true" ? true : prodResourcesParam === "false" ? false : void 0;
 	const deviceType = params.get("deviceType");
@@ -2226,6 +2225,7 @@ function parseUrlParams() {
 	} : void 0;
 	return {
 		simulation,
+		tool,
 		theme: theme ?? void 0,
 		displayMode: displayMode ?? void 0,
 		locale: locale ?? void 0,
@@ -2235,7 +2235,6 @@ function parseUrlParams() {
 		deviceCapabilities,
 		safeAreaInsets,
 		host: host ?? void 0,
-		prodTools,
 		prodResources
 	};
 }
@@ -2486,7 +2485,7 @@ function useSimulatorState({ simulations, defaultHost = "chatgpt" }) {
 		csp,
 		permissions: resourceMeta?.permissions,
 		prefersBorder: resourceMeta?.prefersBorder ?? false,
-		urlProdTools: urlParams.prodTools,
+		urlTool: urlParams.tool,
 		urlProdResources: urlParams.prodResources
 	};
 }
@@ -2495,17 +2494,21 @@ function useSimulatorState({ simulations, defaultHost = "chatgpt" }) {
 /**
 * Hook for managing MCP server connection status via the dev server proxy.
 *
-* On mount (when `serverUrl` is provided), verifies the connection is alive
-* by fetching `/__sunpeak/list-tools`. Tracks connection status for display
-* in the sidebar (colored dot indicator).
+* On mount (when `initialServerUrl` is provided), verifies the connection is alive
+* by fetching `/__sunpeak/list-tools`. URL changes are handled by the caller
+* via `reconnect()`, which posts to `/__sunpeak/connect`.
 *
-* Tool calling is handled separately via the `onCallTool` prop — this
-* hook only manages the connection lifecycle and status display.
+* This split avoids React StrictMode issues: the mount-only health check runs
+* once (or safely twice with cancellation), while explicit `reconnect()` calls
+* are triggered by the Simulator's URL-change effect.
 */
-function useMcpConnection(serverUrl) {
-	const [status, setStatus] = useState(serverUrl ? "connecting" : "disconnected");
+function useMcpConnection(initialServerUrl) {
+	const [status, setStatus] = useState(initialServerUrl ? "connecting" : "disconnected");
 	const [error, setError] = useState();
+	const [simulations, setSimulations] = useState();
+	const [hasReconnected, setHasReconnected] = useState(false);
 	const reconnect = useCallback(async (url) => {
+		setHasReconnected(true);
 		setStatus("connecting");
 		setError(void 0);
 		try {
@@ -2515,23 +2518,27 @@ function useMcpConnection(serverUrl) {
 				body: JSON.stringify({ url })
 			});
 			if (!res.ok) {
-				const text = await res.text();
-				throw new Error(text || `Connection failed (${res.status})`);
+				let message = `Connection failed (${res.status})`;
+				try {
+					const json = await res.json();
+					if (json.error) message = json.error;
+				} catch {}
+				throw new Error(message);
 			}
+			const data = await res.json();
 			setStatus("connected");
+			setSimulations(data.simulations ?? void 0);
 		} catch (err) {
 			setError(err instanceof Error ? err.message : String(err));
 			setStatus("error");
+			setSimulations(void 0);
 		}
 	}, []);
 	useEffect(() => {
-		if (!serverUrl) {
-			setStatus("disconnected");
-			return;
-		}
+		if (!initialServerUrl) return;
 		let cancelled = false;
+		setStatus("connecting");
 		(async () => {
-			setStatus("connecting");
 			try {
 				const res = await fetch("/__sunpeak/list-tools");
 				if (cancelled) return;
@@ -2546,10 +2553,12 @@ function useMcpConnection(serverUrl) {
 		return () => {
 			cancelled = true;
 		};
-	}, [serverUrl]);
+	}, []);
 	return {
 		status,
 		error,
+		simulations,
+		hasReconnected,
 		reconnect
 	};
 }
@@ -2703,7 +2712,7 @@ function SimpleSidebar({ children, controls, headerRight }) {
 		]
 	});
 }
-var DOCS_BASE_URL = "https://sunpeak.ai/docs";
+var DOCS_BASE_URL$1 = "https://sunpeak.ai/docs";
 function HelpIcon({ tooltip, docsPath }) {
 	const [pos, setPos] = React.useState(null);
 	const ref = React.useRef(null);
@@ -2716,7 +2725,7 @@ function HelpIcon({ tooltip, docsPath }) {
 	};
 	return /* @__PURE__ */ jsxs("a", {
 		ref,
-		href: `${DOCS_BASE_URL}/${docsPath}`,
+		href: `${DOCS_BASE_URL$1}/${docsPath}`,
 		target: "_blank",
 		rel: "noopener noreferrer",
 		className: "inline-flex items-center justify-center no-underline flex-shrink-0 transition-colors",
@@ -2838,6 +2847,13 @@ function SidebarInput({ value, onChange, applyOnBlur = false, placeholder, type
 			setIsEditing(false);
 			onChange(draft);
 		},
+		onKeyDown: (e) => {
+			if (e.key === "Enter") {
+				setIsEditing(false);
+				onChange(draft);
+				e.target.blur();
+			}
+		},
 		placeholder,
 		disabled,
 		className: "w-full h-7 text-xs rounded-md px-2 outline-none disabled:opacity-50 disabled:cursor-not-allowed",
@@ -2948,54 +2964,142 @@ function resolveServerToolResult(mock, args) {
 }
 //#endregion
 //#region src/simulator/simulator.tsx
-function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, defaultHost = "chatgpt", onCallTool, onCallToolDirect, defaultProdTools = false, defaultProdResources = false, hideSimulatorModes = false, sandboxUrl, mcpServerUrl }) {
-	const isInspectMode = mcpServerUrl != null;
+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 Simulator({ children, simulations: initialSimulations = {}, appName = "Sunpeak", appIcon, defaultHost = "chatgpt", onCallTool, onCallToolDirect, defaultProdResources = false, hideSimulatorModes = false, demoMode = false, sandboxUrl, mcpServerUrl }) {
+	const [simulations, setSimulations] = React.useState(initialSimulations);
+	React.useEffect(() => {
+		setSimulations(initialSimulations);
+	}, [initialSimulations]);
+	const toolMap = React.useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const [simName, sim] of Object.entries(simulations)) {
+			if (!sim.resource) continue;
+			const toolName = sim.tool.name;
+			if (!map.has(toolName)) map.set(toolName, {
+				tool: sim.tool,
+				resource: sim.resource,
+				simNames: [],
+				fixtureSimNames: []
+			});
+			const info = map.get(toolName);
+			info.simNames.push(simName);
+			if (hasFixtureData(sim)) info.fixtureSimNames.push(simName);
+		}
+		return map;
+	}, [simulations]);
+	const toolNames = React.useMemo(() => Array.from(toolMap.keys()).sort((a, b) => {
+		const infoA = toolMap.get(a);
+		const infoB = toolMap.get(b);
+		const labelA = infoA.tool.title || a;
+		const labelB = infoB.tool.title || b;
+		return labelA.localeCompare(labelB);
+	}), [toolMap]);
+	const initUrlParams = React.useMemo(() => {
+		if (typeof window === "undefined") return {
+			tool: null,
+			simulation: null,
+			noMockData: false
+		};
+		const params = new URLSearchParams(window.location.search);
+		const prodTools = params.get("prodTools") === "true";
+		return {
+			tool: params.get("tool"),
+			simulation: params.get("simulation"),
+			noMockData: prodTools
+		};
+	}, []);
+	const [selectedToolName, setSelectedToolName] = React.useState(() => {
+		if (initUrlParams.tool && toolMap.has(initUrlParams.tool)) return initUrlParams.tool;
+		if (initUrlParams.simulation) {
+			for (const [toolName, info] of toolMap) if (info.simNames.includes(initUrlParams.simulation)) return toolName;
+		}
+		return toolNames[0] ?? "";
+	});
+	const prevToolNamesRef = React.useRef(toolNames);
+	if (prevToolNamesRef.current !== toolNames) {
+		prevToolNamesRef.current = toolNames;
+		if (toolNames.length > 0 && !toolMap.has(selectedToolName)) setSelectedToolName(toolNames[0]);
+	}
+	const selectedToolInfo = toolMap.get(selectedToolName);
+	const [activeSimulationName, setActiveSimulationName] = React.useState(() => {
+		if (!selectedToolInfo) return null;
+		if (initUrlParams.noMockData) return null;
+		if (initUrlParams.tool && !initUrlParams.simulation) return null;
+		if (initUrlParams.simulation && selectedToolInfo.fixtureSimNames.includes(initUrlParams.simulation)) return initUrlParams.simulation;
+		return selectedToolInfo.fixtureSimNames[0] ?? null;
+	});
+	const prevToolNameRef = React.useRef(selectedToolName);
+	if (prevToolNameRef.current !== selectedToolName) {
+		prevToolNameRef.current = selectedToolName;
+		setActiveSimulationName(toolMap.get(selectedToolName)?.fixtureSimNames[0] ?? null);
+	}
+	const effectiveSimulationName = activeSimulationName ?? selectedToolInfo?.simNames[0] ?? "";
+	const currentSim = simulations[effectiveSimulationName];
 	const state = useSimulatorState({
 		simulations,
 		defaultHost
 	});
-	const connection = useMcpConnection(mcpServerUrl);
-	const [prodTools, setProdTools] = React.useState(isInspectMode ? true : state.urlProdTools ?? defaultProdTools);
+	const [serverUrl, setServerUrl] = React.useState(mcpServerUrl ?? "");
+	const connection = useMcpConnection(mcpServerUrl || void 0);
 	const [prodResources, setProdResources] = React.useState(state.urlProdResources ?? defaultProdResources);
 	const [isRunning, setIsRunning] = React.useState(false);
 	const [hasRun, setHasRun] = React.useState(false);
 	const [showCheck, setShowCheck] = React.useState(false);
 	const checkTimerRef = React.useRef(void 0);
 	React.useEffect(() => {
-		if (prodTools) {
-			setHasRun(false);
-			state.setToolResult(void 0);
-			state.setToolResultJson("");
-			state.setToolResultError("");
+		state.setSelectedSimulationName(effectiveSimulationName);
+	}, [effectiveSimulationName]);
+	const prevServerUrlRef = React.useRef(serverUrl);
+	React.useEffect(() => {
+		const urlChanged = serverUrl !== prevServerUrlRef.current;
+		prevServerUrlRef.current = serverUrl;
+		if (!urlChanged) return;
+		if (serverUrl) connection.reconnect(serverUrl);
+	}, [serverUrl, connection.reconnect]);
+	React.useEffect(() => {
+		if (connection.simulations) setSimulations(connection.simulations);
+		else if (connection.status === "error" && connection.hasReconnected) setSimulations({});
+	}, [
+		connection.simulations,
+		connection.status,
+		connection.hasReconnected
+	]);
+	const { setToolResult, setToolResultJson, setToolResultError } = state;
+	React.useEffect(() => {
+		if (activeSimulationName === null) {
+			setToolResult(void 0);
+			setToolResultJson("");
+			setToolResultError("");
 		} else {
-			const simResult = state.selectedSim?.toolResult ?? void 0;
-			state.setToolResult(simResult);
-		}
-	}, [prodTools, state.selectedSimulationName]);
-	React.useEffect(() => () => clearTimeout(checkTimerRef.current), []);
-	const toolOptions = React.useMemo(() => {
-		if (!prodTools) return [];
-		const seen = /* @__PURE__ */ new Map();
-		for (const simName of state.simulationNames) {
-			const toolName = simulations[simName].tool.name;
-			if (!seen.has(toolName)) seen.set(toolName, simName);
+			const result = simulations[activeSimulationName]?.toolResult ?? void 0;
+			setToolResult(result);
+			setToolResultJson(result ? JSON.stringify(result, null, 2) : "");
+			setToolResultError("");
 		}
-		return Array.from(seen.entries()).map(([toolName, simName]) => ({
-			value: simName,
-			label: simulations[simName].tool.title || toolName
-		}));
 	}, [
-		prodTools,
-		state.simulationNames,
-		simulations
+		activeSimulationName,
+		effectiveSimulationName,
+		simulations,
+		setToolResult,
+		setToolResultJson,
+		setToolResultError
 	]);
+	React.useEffect(() => {
+		setHasRun(false);
+	}, [effectiveSimulationName]);
+	React.useEffect(() => () => clearTimeout(checkTimerRef.current), []);
 	const handleRun = React.useCallback(async () => {
 		const caller = onCallToolDirect ?? onCallTool;
-		if (!caller || !state.selectedSim) return;
-		const toolName = state.selectedSim.tool.name;
+		const sim = simulations[effectiveSimulationName];
+		if (!caller || !sim) return;
+		const toolName = sim.tool.name;
 		setIsRunning(true);
 		try {
-			const result = (isInspectMode ? state.selectedSim.toolResult : void 0) ?? await caller({
+			const result = await caller({
 				name: toolName,
 				arguments: state.toolInput
 			});
@@ -3022,14 +3126,16 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 				}],
 				isError: true
 			}, null, 2));
+			setHasRun(true);
 		} finally {
 			setIsRunning(false);
 		}
 	}, [
 		onCallTool,
 		onCallToolDirect,
-		state,
-		isInspectMode
+		simulations,
+		effectiveSimulationName,
+		state
 	]);
 	const activeShell = getHostShell(state.activeHost);
 	const registeredHosts = getRegisteredHosts();
@@ -3063,8 +3169,8 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 		} else prevPageStyleKeysRef.current = [];
 	}, [activeShell]);
 	const handleCallTool = React.useCallback((params) => {
-		if (!prodTools) {
-			const mock = state.selectedSim?.serverTools?.[params.name];
+		if (activeSimulationName) {
+			const mock = simulations[activeSimulationName]?.serverTools?.[params.name];
 			if (mock) {
 				const result = resolveServerToolResult(mock, params.arguments);
 				if (result) return result;
@@ -3073,15 +3179,15 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 		if (onCallTool) return onCallTool(params);
 		return { content: [{
 			type: "text",
-			text: `[Simulator] Tool "${params.name}" called — no serverTools mock found in simulation "${state.selectedSimulationName}".`
+			text: `[Simulator] Tool "${params.name}" called — no serverTools mock found in simulation "${effectiveSimulationName}".`
 		}] };
 	}, [
 		onCallTool,
-		prodTools,
-		state.selectedSim,
-		state.selectedSimulationName
+		activeSimulationName,
+		simulations,
+		effectiveSimulationName
 	]);
-	const prodToolsUserMessage = prodTools && state.selectedSim ? `Call my ${state.selectedSim.tool.title || state.selectedSim.tool.name} tool` : void 0;
+	const userMessage = currentSim ? currentSim.userMessage ?? `Call my ${currentSim.tool.title || currentSim.tool.name} tool` : void 0;
 	const prodResourcesPath = React.useMemo(() => {
 		if (!prodResources || !state.selectedSim?.resource) return void 0;
 		const name = state.selectedSim.resource.name;
@@ -3122,10 +3228,23 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 	}, [prodResourcesPath]);
 	const effectiveResourceUrl = (prodResourcesPath && prodResourcesReady ? prodResourcesPath : void 0) ?? state.resourceUrl;
 	const prodResourcesLoading = !!prodResourcesPath && !prodResourcesReady;
-	const showEmptyState = prodTools && !hasRun;
+	const hasTools = toolNames.length > 0;
+	const showEmptyState = !(activeSimulationName !== null && currentSim?.toolResult != null) && !hasRun;
 	let content;
 	const iframeBg = "var(--sim-bg-conversation, var(--color-background-primary, transparent))";
-	if (showEmptyState) content = /* @__PURE__ */ jsx("div", {
+	if (!hasTools) {
+		const isConnected = connection.status === "connected";
+		const isError = connection.status === "error";
+		content = /* @__PURE__ */ jsx("div", {
+			className: "h-full w-full flex items-center justify-center",
+			style: { background: iframeBg },
+			children: /* @__PURE__ */ 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"
+			})
+		});
+	} else if (showEmptyState) content = /* @__PURE__ */ jsx("div", {
 		className: "h-full w-full flex items-center justify-center",
 		style: { background: iframeBg },
 		children: /* @__PURE__ */ jsxs("span", {
@@ -3169,7 +3288,7 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 			injectOpenAIRuntime: state.activeHost === "chatgpt",
 			sandboxUrl,
 			className: "h-full w-full"
-		}, `${state.activeHost}-${state.selectedSimulationName}-${prodResources}-${prodResourcesGeneration}`)
+		}, `${state.activeHost}-${effectiveResourceUrl}-${prodResources}-${prodResourcesGeneration}`)
 	});
 	else if (!prodResources && state.resourceScript) content = /* @__PURE__ */ jsx("div", {
 		className: "h-full w-full",
@@ -3194,10 +3313,37 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 			injectOpenAIRuntime: state.activeHost === "chatgpt",
 			sandboxUrl,
 			className: "h-full w-full"
-		}, `${state.activeHost}-${state.selectedSimulationName}`)
+		}, `${state.activeHost}-${state.resourceScript}`)
 	});
 	else content = children;
 	const applyTheme = activeShell?.applyTheme;
+	const runButton = !demoMode && onCallTool && currentSim && activeSimulationName === null ? /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: handleRun,
+		disabled: isRunning,
+		className: "rounded-full px-3 py-1 text-sm font-medium transition-opacity disabled:opacity-40 flex items-center gap-1.5 cursor-pointer",
+		style: {
+			backgroundColor: "var(--color-text-primary)",
+			color: "var(--color-background-primary)"
+		},
+		children: [showCheck ? /* @__PURE__ */ jsx("svg", {
+			width: "12",
+			height: "12",
+			viewBox: "0 0 12 12",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ jsx("path", { d: "M2 6L5 9L10 3" })
+		}) : /* @__PURE__ */ jsx("svg", {
+			width: "10",
+			height: "12",
+			viewBox: "0 0 10 12",
+			fill: "currentColor",
+			children: /* @__PURE__ */ jsx("path", { d: "M0 0L10 6L0 12V0Z" })
+		}), "Run"]
+	}) : void 0;
 	return /* @__PURE__ */ jsx(ThemeProvider, {
 		theme: state.theme,
 		applyTheme,
@@ -3205,39 +3351,82 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 			controls: /* @__PURE__ */ jsxs("div", {
 				className: "space-y-1",
 				children: [
-					isInspectMode && /* @__PURE__ */ jsx(SidebarControl, {
+					/* @__PURE__ */ jsx(SidebarControl, {
 						label: /* @__PURE__ */ jsxs("span", {
 							className: "flex items-center gap-1.5",
-							children: ["MCP Server", /* @__PURE__ */ jsx("span", {
+							children: ["MCP Server", serverUrl && !demoMode && /* @__PURE__ */ jsx("span", {
 								className: "inline-block w-2 h-2 rounded-full",
-								"data-testid": "inspect-connection-status",
+								"data-testid": "connection-status",
 								style: { backgroundColor: connection.status === "connected" ? "#22c55e" : connection.status === "connecting" ? "#eab308" : connection.status === "error" ? "#ef4444" : "#6b7280" },
 								title: connection.error ?? connection.status
 							})]
 						}),
-						tooltip: "MCP server URL (set via --server flag)",
-						"data-testid": "inspect-server-url",
+						tooltip: "MCP server URL",
+						"data-testid": "server-url",
 						children: /* @__PURE__ */ jsx(SidebarInput, {
-							value: mcpServerUrl ?? "",
-							onChange: () => {},
-							disabled: true,
-							placeholder: "http://localhost:8000/mcp"
+							value: demoMode ? "http://localhost:8000/mcp" : serverUrl,
+							onChange: demoMode ? () => {} : setServerUrl,
+							applyOnBlur: true,
+							placeholder: "http://localhost:8000/mcp",
+							disabled: demoMode
 						})
 					}),
-					!isInspectMode && !hideSimulatorModes && onCallTool && /* @__PURE__ */ jsx(SidebarCheckbox, {
-						checked: prodTools,
-						onChange: setProdTools,
-						label: "Prod Tools",
-						tooltip: "Use real tool handlers instead of simulations",
-						docsPath: "api-reference/cli/dev#prod-tools-and-prod-resources-flags"
-					}),
-					!isInspectMode && !hideSimulatorModes && /* @__PURE__ */ jsx(SidebarCheckbox, {
+					!hideSimulatorModes && !demoMode && /* @__PURE__ */ jsx(SidebarCheckbox, {
 						checked: prodResources,
 						onChange: setProdResources,
 						label: "Prod Resources",
 						tooltip: "Load resources from dist/ builds instead of HMR",
 						docsPath: "api-reference/cli/dev#prod-tools-and-prod-resources-flags"
 					}),
+					hasTools && /* @__PURE__ */ jsxs("div", {
+						className: "grid grid-cols-2 gap-2",
+						"data-testid": "tool-simulation-row",
+						children: [/* @__PURE__ */ jsx(SidebarControl, {
+							label: "Tool",
+							tooltip: "Tool to inspect",
+							docsPath: "api-reference/cli/dev",
+							"data-testid": "tool-selector",
+							children: /* @__PURE__ */ jsx(SidebarSelect, {
+								value: selectedToolName,
+								onChange: (value) => setSelectedToolName(value),
+								options: toolNames.map((name) => {
+									return {
+										value: name,
+										label: toolMap.get(name).tool.title || name
+									};
+								})
+							})
+						}), /* @__PURE__ */ jsx(SidebarControl, {
+							label: selectedToolInfo && selectedToolInfo.fixtureSimNames.length > 0 ? "Simulation" : /* @__PURE__ */ jsx("a", {
+								href: `${DOCS_BASE_URL}/api-reference/simulations/simulation`,
+								target: "_blank",
+								rel: "noopener noreferrer",
+								className: "no-underline transition-colors",
+								style: { color: "var(--color-text-secondary)" },
+								onMouseEnter: (e) => {
+									e.target.style.color = "var(--color-text-primary)";
+								},
+								onMouseLeave: (e) => {
+									e.target.style.color = "var(--color-text-secondary)";
+								},
+								children: "Simulation"
+							}),
+							tooltip: selectedToolInfo && selectedToolInfo.fixtureSimNames.length > 0 ? "Test fixture with mock data" : "Create simulations for faster testing",
+							docsPath: "api-reference/simulations/simulation",
+							"data-testid": "simulation-selector",
+							children: /* @__PURE__ */ jsx(SidebarSelect, {
+								value: activeSimulationName ?? "__none__",
+								onChange: (value) => setActiveSimulationName(value === "__none__" ? null : value),
+								options: [...demoMode ? [] : [{
+									value: "__none__",
+									label: selectedToolInfo && selectedToolInfo.fixtureSimNames.length > 0 ? "None (call server)" : "None"
+								}], ...(selectedToolInfo?.fixtureSimNames ?? []).map((simName) => ({
+									value: simName,
+									label: simName
+								}))]
+							})
+						})]
+					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "grid grid-cols-2 gap-2",
 						children: [registeredHosts.length > 1 && /* @__PURE__ */ jsx(SidebarControl, {
@@ -3280,34 +3469,6 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 							})
 						})]
 					}),
-					prodTools && toolOptions.length > 1 && /* @__PURE__ */ jsx(SidebarControl, {
-						label: "Tool",
-						tooltip: "Tool to call with prod handler",
-						docsPath: "api-reference/cli/dev",
-						children: /* @__PURE__ */ jsx(SidebarSelect, {
-							value: state.selectedSimulationName,
-							onChange: (value) => state.setSelectedSimulationName(value),
-							options: toolOptions
-						})
-					}),
-					!prodTools && state.simulationNames.length > 1 && /* @__PURE__ */ jsx(SidebarControl, {
-						label: "Simulation",
-						tooltip: "Test fixture to render",
-						docsPath: "api-reference/simulations/simulation",
-						children: /* @__PURE__ */ jsx(SidebarSelect, {
-							value: state.selectedSimulationName,
-							onChange: (value) => state.setSelectedSimulationName(value),
-							options: state.simulationNames.map((name) => {
-								const sim = simulations[name];
-								const resourceTitle = sim.resource ? sim.resource.title || sim.resource.name : void 0;
-								const toolTitle = sim.tool.title || sim.tool.name;
-								return {
-									value: name,
-									label: resourceTitle ? `${resourceTitle}: ${toolTitle}` : toolTitle
-								};
-							})
-						})
-					}),
 					/* @__PURE__ */ jsx(SidebarCollapsibleControl, {
 						label: "Host Context",
 						defaultCollapsed: false,
@@ -3589,7 +3750,7 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 					}),
 					/* @__PURE__ */ jsx(SidebarCollapsibleControl, {
 						label: "Tool Input (JSON)",
-						defaultCollapsed: !prodTools,
+						defaultCollapsed: false,
 						tooltip: "Arguments passed to the tool",
 						docsPath: "api-reference/hooks/use-tool-data",
 						children: /* @__PURE__ */ jsx(SidebarTextarea, {
@@ -3600,10 +3761,10 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 							error: state.toolInputError,
 							maxRows: 8
 						})
-					}, `tool-input-${prodTools}`),
+					}),
 					/* @__PURE__ */ jsx(SidebarCollapsibleControl, {
 						label: "Tool Result (JSON)",
-						defaultCollapsed: prodTools,
+						defaultCollapsed: false,
 						tooltip: "Structured content returned by the tool",
 						docsPath: "api-reference/hooks/use-tool-data",
 						"data-testid": "tool-result-section",
@@ -3626,7 +3787,7 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 							error: state.toolResultError,
 							maxRows: 8
 						})
-					}, `tool-result-${prodTools}`)
+					})
 				]
 			}),
 			children: ShellConversation ? /* @__PURE__ */ jsx(ShellConversation, {
@@ -3636,35 +3797,9 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 				onRequestDisplayMode: state.handleDisplayModeChange,
 				appName,
 				appIcon,
-				userMessage: prodToolsUserMessage ?? state.selectedSim?.userMessage,
+				userMessage,
 				onContentWidthChange: state.handleContentWidthChange,
-				headerAction: prodTools && onCallTool ? /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: handleRun,
-					disabled: isRunning,
-					className: "rounded-full px-3 py-1 text-sm font-medium transition-opacity disabled:opacity-40 flex items-center gap-1.5 cursor-pointer",
-					style: {
-						backgroundColor: "var(--color-text-primary)",
-						color: "var(--color-background-primary)"
-					},
-					children: [showCheck ? /* @__PURE__ */ jsx("svg", {
-						width: "12",
-						height: "12",
-						viewBox: "0 0 12 12",
-						fill: "none",
-						stroke: "currentColor",
-						strokeWidth: "2",
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						children: /* @__PURE__ */ jsx("path", { d: "M2 6L5 9L10 3" })
-					}) : /* @__PURE__ */ jsx("svg", {
-						width: "10",
-						height: "12",
-						viewBox: "0 0 10 12",
-						fill: "currentColor",
-						children: /* @__PURE__ */ jsx("path", { d: "M0 0L10 6L0 12V0Z" })
-					}), "Run"]
-				}) : void 0,
+				headerAction: runButton,
 				children: content
 			}) : content
 		})
@@ -3673,4 +3808,4 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 //#endregion
 export { DEFAULT_STYLE_VARIABLES as S, McpAppHost as _, SidebarControl as a, getRegisteredHosts as b, SidebarTextarea as c, ThemeProvider as d, useThemeContext as f, extractResourceCSP as g, IframeResource as h, SidebarCollapsibleControl as i, SidebarToggle as l, useSimulatorState as m, resolveServerToolResult as n, SidebarInput as o, useMcpConnection as p, SidebarCheckbox as r, SidebarSelect as s, Simulator as t, SimpleSidebar as u, SCREEN_WIDTHS as v, registerHostShell as x, getHostShell as y };
 
-//# sourceMappingURL=simulator-Dl8B-Ljb.js.map
+//# sourceMappingURL=simulator-BijjlOXb.js.map