sunpeak 0.16.29 → 0.17.2

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

@@ -2491,6 +2491,69 @@ function useSimulatorState({ simulations, defaultHost = "chatgpt" }) {
 	};
 }
 //#endregion
+//#region src/simulator/use-mcp-connection.ts
+/**
+* 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).
+*
+* Tool calling is handled separately via the `onCallTool` prop — this
+* hook only manages the connection lifecycle and status display.
+*/
+function useMcpConnection(serverUrl) {
+	const [status, setStatus] = useState(serverUrl ? "connecting" : "disconnected");
+	const [error, setError] = useState();
+	const reconnect = useCallback(async (url) => {
+		setStatus("connecting");
+		setError(void 0);
+		try {
+			const res = await fetch("/__sunpeak/connect", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ url })
+			});
+			if (!res.ok) {
+				const text = await res.text();
+				throw new Error(text || `Connection failed (${res.status})`);
+			}
+			setStatus("connected");
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+			setStatus("error");
+		}
+	}, []);
+	useEffect(() => {
+		if (!serverUrl) {
+			setStatus("disconnected");
+			return;
+		}
+		let cancelled = false;
+		(async () => {
+			setStatus("connecting");
+			try {
+				const res = await fetch("/__sunpeak/list-tools");
+				if (cancelled) return;
+				if (!res.ok) throw new Error(`Health check failed (${res.status})`);
+				setStatus("connected");
+			} catch (err) {
+				if (cancelled) return;
+				setError(err instanceof Error ? err.message : String(err));
+				setStatus("error");
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [serverUrl]);
+	return {
+		status,
+		error,
+		reconnect
+	};
+}
+//#endregion
 //#region src/simulator/theme-provider.tsx
 var ThemeProviderContext = React.createContext(void 0);
 /** Default theme applier: sets data-theme attribute on document.documentElement */
@@ -2696,9 +2759,10 @@ function HelpIcon({ tooltip, docsPath }) {
 		})]
 	});
 }
-function SidebarControl({ label, children, tooltip, docsPath }) {
+function SidebarControl({ label, children, tooltip, docsPath, "data-testid": testId }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-1",
+		"data-testid": testId,
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: "text-[10px] font-medium leading-tight inline-flex items-center gap-1",
 			style: { color: "var(--color-text-secondary)" },
@@ -2709,10 +2773,11 @@ function SidebarControl({ label, children, tooltip, docsPath }) {
 		}), children]
 	});
 }
-function SidebarCollapsibleControl({ label, children, defaultCollapsed = true, tooltip, docsPath }) {
+function SidebarCollapsibleControl({ label, children, defaultCollapsed = true, tooltip, docsPath, "data-testid": testId }) {
 	const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-1",
+		"data-testid": testId,
 		children: [/* @__PURE__ */ jsxs("button", {
 			onClick: () => setIsCollapsed(!isCollapsed),
 			className: "w-full flex items-center justify-between text-[10px] font-medium leading-tight transition-colors py-1 cursor-pointer",
@@ -2815,7 +2880,7 @@ function SidebarCheckbox({ checked, onChange, label, tooltip, docsPath }) {
 		})]
 	});
 }
-function SidebarTextarea({ value, onChange, onFocus, onBlur, placeholder, maxRows = 8, error }) {
+function SidebarTextarea({ value, onChange, onFocus, onBlur, placeholder, maxRows = 8, error, "data-testid": testId }) {
 	const contentRows = value?.split("\n").length ?? 1;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-0.5",
@@ -2826,6 +2891,7 @@ function SidebarTextarea({ value, onChange, onFocus, onBlur, placeholder, maxRow
 			onBlur,
 			placeholder,
 			rows: Math.min(contentRows, maxRows),
+			"data-testid": testId,
 			className: "w-full text-[10px] font-mono rounded-md px-2 py-1.5 outline-none resize-y",
 			style: {
 				...formElementStyle,
@@ -2882,20 +2948,26 @@ function resolveServerToolResult(mock, args) {
 }
 //#endregion
 //#region src/simulator/simulator.tsx
-function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, defaultHost = "chatgpt", onCallTool, defaultProdTools = false, defaultProdResources = false, hideSimulatorModes = false, sandboxUrl }) {
+function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, defaultHost = "chatgpt", onCallTool, onCallToolDirect, defaultProdTools = false, defaultProdResources = false, hideSimulatorModes = false, sandboxUrl, mcpServerUrl }) {
+	const isInspectMode = mcpServerUrl != null;
 	const state = useSimulatorState({
 		simulations,
 		defaultHost
 	});
-	const [prodTools, setProdTools] = React.useState(state.urlProdTools ?? defaultProdTools);
+	const connection = useMcpConnection(mcpServerUrl);
+	const [prodTools, setProdTools] = React.useState(isInspectMode ? true : state.urlProdTools ?? defaultProdTools);
 	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);
-		else {
+		if (prodTools) {
+			setHasRun(false);
+			state.setToolResult(void 0);
+			state.setToolResultJson("");
+			state.setToolResultError("");
+		} else {
 			const simResult = state.selectedSim?.toolResult ?? void 0;
 			state.setToolResult(simResult);
 		}
@@ -2918,11 +2990,12 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 		simulations
 	]);
 	const handleRun = React.useCallback(async () => {
-		if (!onCallTool || !state.selectedSim) return;
+		const caller = onCallToolDirect ?? onCallTool;
+		if (!caller || !state.selectedSim) return;
 		const toolName = state.selectedSim.tool.name;
 		setIsRunning(true);
 		try {
-			const result = await onCallTool({
+			const result = (isInspectMode ? state.selectedSim.toolResult : void 0) ?? await caller({
 				name: toolName,
 				arguments: state.toolInput
 			});
@@ -2952,7 +3025,12 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 		} finally {
 			setIsRunning(false);
 		}
-	}, [onCallTool, state]);
+	}, [
+		onCallTool,
+		onCallToolDirect,
+		state,
+		isInspectMode
+	]);
 	const activeShell = getHostShell(state.activeHost);
 	const registeredHosts = getRegisteredHosts();
 	const ShellConversation = activeShell?.Conversation;
@@ -2985,18 +3063,21 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 		} else prevPageStyleKeysRef.current = [];
 	}, [activeShell]);
 	const handleCallTool = React.useCallback((params) => {
-		if (onCallTool) return onCallTool(params);
-		const mock = state.selectedSim?.serverTools?.[params.name];
-		if (mock) {
-			const result = resolveServerToolResult(mock, params.arguments);
-			if (result) return result;
+		if (!prodTools) {
+			const mock = state.selectedSim?.serverTools?.[params.name];
+			if (mock) {
+				const result = resolveServerToolResult(mock, params.arguments);
+				if (result) return result;
+			}
 		}
+		if (onCallTool) return onCallTool(params);
 		return { content: [{
 			type: "text",
 			text: `[Simulator] Tool "${params.name}" called — no serverTools mock found in simulation "${state.selectedSimulationName}".`
 		}] };
 	}, [
 		onCallTool,
+		prodTools,
 		state.selectedSim,
 		state.selectedSimulationName
 	]);
@@ -3124,14 +3205,33 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 			controls: /* @__PURE__ */ jsxs("div", {
 				className: "space-y-1",
 				children: [
-					!hideSimulatorModes && onCallTool && /* @__PURE__ */ jsx(SidebarCheckbox, {
+					isInspectMode && /* @__PURE__ */ jsx(SidebarControl, {
+						label: /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-1.5",
+							children: ["MCP Server", /* @__PURE__ */ jsx("span", {
+								className: "inline-block w-2 h-2 rounded-full",
+								"data-testid": "inspect-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",
+						children: /* @__PURE__ */ jsx(SidebarInput, {
+							value: mcpServerUrl ?? "",
+							onChange: () => {},
+							disabled: true,
+							placeholder: "http://localhost:8000/mcp"
+						})
+					}),
+					!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"
 					}),
-					!hideSimulatorModes && /* @__PURE__ */ jsx(SidebarCheckbox, {
+					!isInspectMode && !hideSimulatorModes && /* @__PURE__ */ jsx(SidebarCheckbox, {
 						checked: prodResources,
 						onChange: setProdResources,
 						label: "Prod Resources",
@@ -3501,13 +3601,15 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 							maxRows: 8
 						})
 					}, `tool-input-${prodTools}`),
-					!prodTools && /* @__PURE__ */ jsx(SidebarCollapsibleControl, {
+					/* @__PURE__ */ jsx(SidebarCollapsibleControl, {
 						label: "Tool Result (JSON)",
-						defaultCollapsed: false,
+						defaultCollapsed: prodTools,
 						tooltip: "Structured content returned by the tool",
 						docsPath: "api-reference/hooks/use-tool-data",
+						"data-testid": "tool-result-section",
 						children: /* @__PURE__ */ jsx(SidebarTextarea, {
 							value: state.toolResultJson,
+							"data-testid": "tool-result-textarea",
 							onChange: (json) => state.validateJSON(json, state.setToolResultJson, state.setToolResultError),
 							onFocus: () => state.setEditingField("toolResult"),
 							onBlur: () => state.commitJSON(state.toolResultJson, state.setToolResultError, (parsed) => {
@@ -3524,7 +3626,7 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 							error: state.toolResultError,
 							maxRows: 8
 						})
-					})
+					}, `tool-result-${prodTools}`)
 				]
 			}),
 			children: ShellConversation ? /* @__PURE__ */ jsx(ShellConversation, {
@@ -3569,6 +3671,6 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 	});
 }
 //#endregion
-export { SCREEN_WIDTHS as _, SidebarControl as a, registerHostShell as b, SidebarTextarea as c, ThemeProvider as d, useThemeContext as f, McpAppHost as g, extractResourceCSP as h, SidebarCollapsibleControl as i, SidebarToggle as l, IframeResource as m, resolveServerToolResult as n, SidebarInput as o, useSimulatorState as p, SidebarCheckbox as r, SidebarSelect as s, Simulator as t, SimpleSidebar as u, getHostShell as v, DEFAULT_STYLE_VARIABLES as x, getRegisteredHosts as y };
+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-C7mkK7Sz.js.map
+//# sourceMappingURL=simulator-Dl8B-Ljb.js.map