sunpeak 0.16.28 → 0.17.1

package/dist/{simulator-BYIH-xqQ.cjs → simulator-CH9hs0N6.cjs}

@@ -173,21 +173,15 @@ function Conversation({ children, screenWidth, displayMode, platform, onRequestD
 				style: { maxWidth: containerWidth },
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "z-10 grid h-[3.25rem] grid-cols-[1fr_auto_1fr] border-b px-2 pointer-events-auto",
-						style: {
-							borderColor: "var(--color-border-primary)",
-							backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))"
-						},
+						className: "z-20 flex h-[3.25rem] items-center justify-between p-2 pointer-events-auto",
+						style: { backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))" },
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "flex items-center justify-start gap-3",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									onClick: handleClose,
-									"aria-label": "Close",
-									className: "h-7 w-7 flex items-center justify-center rounded-md transition-colors hover:opacity-70",
-									type: "button",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon$1, {})
-								})
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								onClick: handleClose,
+								"aria-label": "Close",
+								className: "h-7 w-7 flex items-center justify-center rounded-lg transition-colors hover:opacity-70",
+								type: "button",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon$1, {})
 							}),
 							isDesktop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "flex items-center justify-center text-base",
@@ -204,8 +198,7 @@ function Conversation({ children, screenWidth, displayMode, platform, onRequestD
 							style: {
 								maskImage: "linear-gradient(to bottom, transparent 0%, black 50%)",
 								WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 50%)",
-								backdropFilter: "blur(16px)",
-								WebkitBackdropFilter: "blur(16px)"
+								backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))"
 							}
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "max-w-[40rem] min-[1440px]:max-w-[48rem] mx-auto px-4 pt-4 pb-4 pointer-events-auto",
@@ -216,11 +209,12 @@ function Conversation({ children, screenWidth, displayMode, platform, onRequestD
 									name: "userInput",
 									disabled: true,
 									placeholder: "Message sunpeak.ai",
-									className: "w-full rounded-3xl px-5 py-3 pr-12 shadow-sm",
+									className: "w-full rounded-[28px] p-2.5 shadow-sm",
 									style: {
 										backgroundColor: "var(--sim-bg-reply-input, var(--color-background-secondary))",
 										color: "var(--color-text-primary)",
-										border: "1px solid var(--color-border-tertiary)"
+										border: "none",
+										cornerShape: "superellipse"
 									}
 								})
 							})
@@ -261,8 +255,11 @@ function Conversation({ children, screenWidth, displayMode, platform, onRequestD
 											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 												className: "flex w-full flex-col gap-1 empty:hidden items-end",
 												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-													className: "relative rounded-[18px] px-4 py-3 max-w-[70%]",
-													style: { backgroundColor: "var(--sim-bg-user-bubble, var(--color-background-tertiary))" },
+													className: "relative rounded-[22px] px-4 py-2.5 leading-6 max-w-[70%]",
+													style: {
+														backgroundColor: "var(--sim-bg-user-bubble, var(--color-background-tertiary))",
+														cornerShape: "superellipse"
+													},
 													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 														className: "whitespace-pre-wrap",
 														children: userMessage
@@ -313,17 +310,17 @@ function Conversation({ children, screenWidth, displayMode, platform, onRequestD
 													ref: setContentRef,
 													className: isPip ? "no-scrollbar @w-xl/main:top-4 fixed start-4 end-4 top-12 z-50 mx-auto max-w-[40rem] lg:max-w-[48rem] sm:start-0 sm:end-0 sm:top-[3.25rem] sm:w-full overflow-visible" : isFullscreen ? "no-scrollbar fixed inset-x-0 top-[3.25rem] bottom-0 z-50 mx-auto" : "no-scrollbar relative mb-2 @w-sm/main:w-full mx-0 max-sm:-mx-[1rem] max-sm:w-[100cqw] max-sm:overflow-hidden overflow-visible",
 													style: {
-														...isPip ? { maxHeight: "480px" } : {},
+														...isPip ? { maxHeight: "calc(50dvh - 38px)" } : {},
 														...isFullscreen ? { maxWidth: containerWidth } : {}
 													},
 													children: [isPip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 														onClick: handleClose,
-														className: "absolute -start-2 -top-1.5 z-10 rounded-full bg-[#3a3a3a] p-1.5 text-white shadow-[0px_0px_0px_1px_#fff3,0px_4px_12px_rgba(0,0,0,0.12)] hover:bg-[#6a6a6a]",
+														className: "absolute -start-2 md:-start-6 -top-1.5 z-10 rounded-full bg-[#3a3a3a] p-1.25 text-white shadow-[0px_0px_0px_1px_var(--color-border-primary),0px_4px_12px_rgba(0,0,0,0.12)] hover:bg-[#6a6a6a]",
 														"aria-label": "Close picture-in-picture",
 														type: "button",
 														children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon$1, { className: "h-4 w-4" })
 													}, "pip-close"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-														className: isPip ? "relative overflow-hidden h-full rounded-2xl sm:rounded-3xl shadow-[0px_0px_0px_1px_#fff3,0px_6px_20px_rgba(0,0,0,0.1)] md:-mx-4" : "relative overflow-hidden h-full",
+														className: isPip ? "relative overflow-hidden h-full rounded-2xl sm:rounded-3xl shadow-[0px_0px_0px_1px_var(--color-border-primary),0px_6px_20px_rgba(0,0,0,0.1)] md:-mx-4" : "relative overflow-hidden h-full",
 														children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 															className: "h-full w-full max-w-full",
 															style: { ...isPip ? {
@@ -350,8 +347,7 @@ function Conversation({ children, screenWidth, displayMode, platform, onRequestD
 								style: {
 									maskImage: "linear-gradient(to bottom, transparent 0%, black 50%)",
 									WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 50%)",
-									backdropFilter: "blur(16px)",
-									WebkitBackdropFilter: "blur(16px)"
+									backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))"
 								}
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "max-w-[40rem] min-[1440px]:max-w-[48rem] mx-auto px-4 pt-4 pb-4 pointer-events-auto",
@@ -418,7 +414,7 @@ registerHostShell({
 		"--sim-bg-sidebar": "light-dark(#ffffff, #212121)",
 		"--sim-bg-conversation": "light-dark(#ffffff, #212121)",
 		"--sim-bg-user-bubble": "light-dark(rgba(233,233,233,0.5), rgba(50,50,50,0.85))",
-		"--sim-bg-reply-input": "light-dark(#ffffff, #212121)"
+		"--sim-bg-reply-input": "light-dark(#ffffff, #303030)"
 	}
 });
 //#endregion
@@ -2305,10 +2301,13 @@ function useSimulatorState({ simulations, defaultHost = "chatgpt" }) {
 			height: typeof window !== "undefined" ? window.innerHeight - 52 : 800,
 			width: measuredContentWidth ?? (typeof window !== "undefined" ? window.innerWidth : 1280)
 		};
-		if (displayMode === "pip") return {
-			height: 480,
-			...measuredContentWidth != null ? { maxWidth: measuredContentWidth } : {}
-		};
+		if (displayMode === "pip") {
+			const viewportH = typeof window !== "undefined" ? window.innerHeight : 800;
+			return {
+				maxHeight: Math.round(viewportH * .5 - 38),
+				...measuredContentWidth != null ? { maxWidth: measuredContentWidth } : {}
+			};
+		}
 		if (measuredContentWidth != null) return { maxWidth: measuredContentWidth };
 	}, [
 		containerHeight,
@@ -2493,6 +2492,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] = (0, react.useState)(serverUrl ? "connecting" : "disconnected");
+	const [error, setError] = (0, react.useState)();
+	const reconnect = (0, react.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");
+		}
+	}, []);
+	(0, react.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 */
@@ -2524,7 +2586,7 @@ var useThemeContext = () => {
 };
 //#endregion
 //#region src/simulator/simple-sidebar.tsx
-var DEFAULT_SIDEBAR_WIDTH = 224;
+var DEFAULT_SIDEBAR_WIDTH = 260;
 function ChevronRightIcon() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		width: "1em",
@@ -2698,9 +2760,10 @@ function HelpIcon({ tooltip, docsPath }) {
 		})]
 	});
 }
-function SidebarControl({ label, children, tooltip, docsPath }) {
+function SidebarControl({ label, children, tooltip, docsPath, "data-testid": testId }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-1",
+		"data-testid": testId,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "text-[10px] font-medium leading-tight inline-flex items-center gap-1",
 			style: { color: "var(--color-text-secondary)" },
@@ -2711,10 +2774,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__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-1",
+		"data-testid": testId,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.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",
@@ -2817,7 +2881,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__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-0.5",
@@ -2828,6 +2892,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,
@@ -2884,20 +2949,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);
 		}
@@ -2920,11 +2991,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
 			});
@@ -2954,7 +3026,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;
@@ -2987,18 +3064,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
 	]);
@@ -3126,14 +3206,33 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 			controls: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "space-y-1",
 				children: [
-					!hideSimulatorModes && onCallTool && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCheckbox, {
+					isInspectMode && /* @__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", {
+								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__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+							value: mcpServerUrl ?? "",
+							onChange: () => {},
+							disabled: true,
+							placeholder: "http://localhost:8000/mcp"
+						})
+					}),
+					!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"
 					}),
-					!hideSimulatorModes && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCheckbox, {
+					!isInspectMode && !hideSimulatorModes && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCheckbox, {
 						checked: prodResources,
 						onChange: setProdResources,
 						label: "Prod Resources",
@@ -3503,13 +3602,15 @@ function Simulator({ children, simulations = {}, appName = "Sunpeak", appIcon, d
 							maxRows: 8
 						})
 					}, `tool-input-${prodTools}`),
-					!prodTools && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
+					/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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) => {
@@ -3526,7 +3627,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, {
@@ -3685,6 +3786,12 @@ Object.defineProperty(exports, "resolveServerToolResult", {
 		return resolveServerToolResult;
 	}
 });
+Object.defineProperty(exports, "useMcpConnection", {
+	enumerable: true,
+	get: function() {
+		return useMcpConnection;
+	}
+});
 Object.defineProperty(exports, "useSimulatorState", {
 	enumerable: true,
 	get: function() {
@@ -3698,4 +3805,4 @@ Object.defineProperty(exports, "useThemeContext", {
 	}
 });
 
-//# sourceMappingURL=simulator-BYIH-xqQ.cjs.map
+//# sourceMappingURL=simulator-CH9hs0N6.cjs.map