sunpeak 0.17.4 → 0.17.6

package/dist/{simulator-CH9hs0N6.cjs → simulator-DqWETA_1.cjs}

@@ -2186,13 +2186,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");
@@ -2201,8 +2202,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");
@@ -2227,6 +2226,7 @@ function parseUrlParams() {
 	} : void 0;
 	return {
 		simulation,
+		tool,
 		theme: theme ?? void 0,
 		displayMode: displayMode ?? void 0,
 		locale: locale ?? void 0,
@@ -2236,7 +2236,6 @@ function parseUrlParams() {
 		deviceCapabilities,
 		safeAreaInsets,
 		host: host ?? void 0,
-		prodTools,
 		prodResources
 	};
 }
@@ -2487,7 +2486,7 @@ function useSimulatorState({ simulations, defaultHost = "chatgpt" }) {
 		csp,
 		permissions: resourceMeta?.permissions,
 		prefersBorder: resourceMeta?.prefersBorder ?? false,
-		urlProdTools: urlParams.prodTools,
+		urlTool: urlParams.tool,
 		urlProdResources: urlParams.prodResources
 	};
 }
@@ -2496,17 +2495,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] = (0, react.useState)(serverUrl ? "connecting" : "disconnected");
+function useMcpConnection(initialServerUrl) {
+	const [status, setStatus] = (0, react.useState)(initialServerUrl ? "connecting" : "disconnected");
 	const [error, setError] = (0, react.useState)();
+	const [simulations, setSimulations] = (0, react.useState)();
+	const [hasReconnected, setHasReconnected] = (0, react.useState)(false);
 	const reconnect = (0, react.useCallback)(async (url) => {
+		setHasReconnected(true);
 		setStatus("connecting");
 		setError(void 0);
 		try {
@@ -2516,23 +2519,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);
 		}
 	}, []);
 	(0, react.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;
@@ -2547,10 +2554,12 @@ function useMcpConnection(serverUrl) {
 		return () => {
 			cancelled = true;
 		};
-	}, [serverUrl]);
+	}, []);
 	return {
 		status,
 		error,
+		simulations,
+		hasReconnected,
 		reconnect
 	};
 }
@@ -2704,7 +2713,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);
@@ -2717,7 +2726,7 @@ function HelpIcon({ tooltip, docsPath }) {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.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",
@@ -2839,6 +2848,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",
@@ -2949,54 +2965,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
 			});
@@ -3023,14 +3127,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();
@@ -3064,8 +3170,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;
@@ -3074,15 +3180,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;
@@ -3123,10 +3229,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__ */ (0, react_jsx_runtime.jsx)("div", {
+	if (!hasTools) {
+		const isConnected = connection.status === "connected";
+		const isError = connection.status === "error";
+		content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "h-full w-full flex items-center justify-center",
+			style: { background: iframeBg },
+			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"
+			})
+		});
+	} else if (showEmptyState) content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "h-full w-full flex items-center justify-center",
 		style: { background: iframeBg },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -3170,7 +3289,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__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "h-full w-full",
@@ -3195,10 +3314,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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("svg", {
+			width: "12",
+			height: "12",
+			viewBox: "0 0 12 12",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2 6L5 9L10 3" })
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			width: "10",
+			height: "12",
+			viewBox: "0 0 10 12",
+			fill: "currentColor",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M0 0L10 6L0 12V0Z" })
+		}), "Run"]
+	}) : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeProvider, {
 		theme: state.theme,
 		applyTheme,
@@ -3206,39 +3352,82 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 			controls: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "space-y-1",
 				children: [
-					isInspectMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+					/* @__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", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							children: ["MCP Server", serverUrl && !demoMode && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(SidebarCheckbox, {
+					!hideSimulatorModes && !demoMode && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "grid grid-cols-2 gap-2",
+						"data-testid": "tool-simulation-row",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+							label: "Tool",
+							tooltip: "Tool to inspect",
+							docsPath: "api-reference/cli/dev",
+							"data-testid": "tool-selector",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarSelect, {
+								value: selectedToolName,
+								onChange: (value) => setSelectedToolName(value),
+								options: toolNames.map((name) => {
+									return {
+										value: name,
+										label: toolMap.get(name).tool.title || name
+									};
+								})
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+							label: selectedToolInfo && selectedToolInfo.fixtureSimNames.length > 0 ? "Simulation" : /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "grid grid-cols-2 gap-2",
 						children: [registeredHosts.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
@@ -3281,34 +3470,6 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 							})
 						})]
 					}),
-					prodTools && toolOptions.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
-						label: "Tool",
-						tooltip: "Tool to call with prod handler",
-						docsPath: "api-reference/cli/dev",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarSelect, {
-							value: state.selectedSimulationName,
-							onChange: (value) => state.setSelectedSimulationName(value),
-							options: toolOptions
-						})
-					}),
-					!prodTools && state.simulationNames.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
-						label: "Simulation",
-						tooltip: "Test fixture to render",
-						docsPath: "api-reference/simulations/simulation",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
 						label: "Host Context",
 						defaultCollapsed: false,
@@ -3590,7 +3751,7 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(SidebarTextarea, {
@@ -3601,10 +3762,10 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 							error: state.toolInputError,
 							maxRows: 8
 						})
-					}, `tool-input-${prodTools}`),
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.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",
@@ -3627,7 +3788,7 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 							error: state.toolResultError,
 							maxRows: 8
 						})
-					}, `tool-result-${prodTools}`)
+					})
 				]
 			}),
 			children: ShellConversation ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShellConversation, {
@@ -3637,35 +3798,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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("svg", {
-						width: "12",
-						height: "12",
-						viewBox: "0 0 12 12",
-						fill: "none",
-						stroke: "currentColor",
-						strokeWidth: "2",
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2 6L5 9L10 3" })
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-						width: "10",
-						height: "12",
-						viewBox: "0 0 10 12",
-						fill: "currentColor",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M0 0L10 6L0 12V0Z" })
-					}), "Run"]
-				}) : void 0,
+				headerAction: runButton,
 				children: content
 			}) : content
 		})
@@ -3805,4 +3940,4 @@ Object.defineProperty(exports, "useThemeContext", {
 	}
 });
 
-//# sourceMappingURL=simulator-CH9hs0N6.cjs.map
+//# sourceMappingURL=simulator-DqWETA_1.cjs.map