sunpeak 0.20.35 → 0.20.42

package/dist/{inspector-DQ_vv1wj.cjs → inspector-DOmiG64-.cjs}

@@ -6435,6 +6435,7 @@ function IframeResource({ src, scriptSrc, html, hostContext, toolInput, toolInpu
 var DEFAULT_THEME = "dark";
 var DEFAULT_DISPLAY_MODE = "inline";
 var DEFAULT_PLATFORM = "desktop";
+var DEFAULT_SIDEBAR_WIDTH$1 = 260;
 /**
 * Parse URL params for initial inspector values.
 * Supported params:
@@ -6538,6 +6539,9 @@ var VALID_SCREEN_WIDTHS = new Set([
 	"tablet",
 	"full"
 ]);
+function isSafeStoredString(value) {
+	return typeof value === "string" && value.length <= 200 && !/[\u0000-\u001f\u007f]/.test(value);
+}
 function sanitizeStoredPrefs(raw) {
 	if (!raw || typeof raw !== "object") return {};
 	const obj = raw;
@@ -6545,6 +6549,8 @@ function sanitizeStoredPrefs(raw) {
 	if (typeof obj.theme === "string" && VALID_THEMES.has(obj.theme)) prefs.theme = obj.theme;
 	if (typeof obj.locale === "string") prefs.locale = obj.locale;
 	if (typeof obj.displayMode === "string" && VALID_DISPLAY_MODES.has(obj.displayMode)) prefs.displayMode = obj.displayMode;
+	if (typeof obj.containerHeight === "number" && Number.isFinite(obj.containerHeight)) prefs.containerHeight = obj.containerHeight;
+	if (typeof obj.containerWidth === "number" && Number.isFinite(obj.containerWidth)) prefs.containerWidth = obj.containerWidth;
 	if (typeof obj.containerMaxHeight === "number" && Number.isFinite(obj.containerMaxHeight)) prefs.containerMaxHeight = obj.containerMaxHeight;
 	if (typeof obj.containerMaxWidth === "number" && Number.isFinite(obj.containerMaxWidth)) prefs.containerMaxWidth = obj.containerMaxWidth;
 	if (obj.safeAreaInsets && typeof obj.safeAreaInsets === "object") {
@@ -6561,6 +6567,12 @@ function sanitizeStoredPrefs(raw) {
 	if (typeof obj.hover === "boolean") prefs.hover = obj.hover;
 	if (typeof obj.touch === "boolean") prefs.touch = obj.touch;
 	if (typeof obj.screenWidth === "string" && VALID_SCREEN_WIDTHS.has(obj.screenWidth)) prefs.screenWidth = obj.screenWidth;
+	if (typeof obj.sidebarWidth === "number" && Number.isFinite(obj.sidebarWidth)) prefs.sidebarWidth = Math.max(DEFAULT_SIDEBAR_WIDTH$1, Math.round(obj.sidebarWidth));
+	if (typeof obj.rightSidebarWidth === "number" && Number.isFinite(obj.rightSidebarWidth)) prefs.rightSidebarWidth = Math.max(DEFAULT_SIDEBAR_WIDTH$1, Math.round(obj.rightSidebarWidth));
+	if (typeof obj.timeZone === "string") prefs.timeZone = obj.timeZone;
+	if (typeof obj.prodResources === "boolean") prefs.prodResources = obj.prodResources;
+	if (isSafeStoredString(obj.modelProvider)) prefs.modelProvider = obj.modelProvider;
+	if (isSafeStoredString(obj.modelId)) prefs.modelId = obj.modelId;
 	return prefs;
 }
 function readStoredPrefs() {
@@ -6573,6 +6585,12 @@ function readStoredPrefs() {
 		return {};
 	}
 }
+function writeStoredPrefs(prefs) {
+	if (typeof window === "undefined") return;
+	try {
+		localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
+	} catch {}
+}
 function deriveContainerDimensions({ displayMode, containerHeight, containerWidth, containerMaxHeight, containerMaxWidth, measuredContentWidth, viewportHeight = 800, viewportWidth = 1280 }) {
 	if (containerHeight != null || containerWidth != null || containerMaxHeight != null || containerMaxWidth != null) return {
 		...containerHeight != null ? { height: containerHeight } : {},
@@ -6591,36 +6609,38 @@ function deriveContainerDimensions({ displayMode, containerHeight, containerWidt
 	if (measuredContentWidth != null) return { maxWidth: measuredContentWidth };
 }
 function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolDataOnSimulationChange = false }) {
-	const simulationNames = Object.keys(simulations).filter((name) => simulations[name].resource).sort((a, b) => {
+	const simulationNames = Object.keys(simulations).sort((a, b) => {
 		const simA = simulations[a];
 		const simB = simulations[b];
-		const resourceLabelA = simA.resource.title || simA.resource.name;
-		const resourceLabelB = simB.resource.title || simB.resource.name;
-		const labelA = `${resourceLabelA}: ${simA.tool.title || simA.tool.name}`;
-		const labelB = `${resourceLabelB}: ${simB.tool.title || simB.tool.name}`;
+		const resourceLabelA = simA.resource ? `${simA.resource.title || simA.resource.name}: ` : "";
+		const resourceLabelB = simB.resource ? `${simB.resource.title || simB.resource.name}: ` : "";
+		const labelA = `${resourceLabelA}${simA.tool.title || simA.tool.name}`;
+		const labelB = `${resourceLabelB}${simB.tool.title || simB.tool.name}`;
 		return labelA.localeCompare(labelB);
 	});
+	const defaultSimulationName = simulationNames.find((name) => !!simulations[name]?.resource) ?? simulationNames[0] ?? "";
 	const urlParams = (0, react.useMemo)(() => parseUrlParams(), []);
 	const autoRun = urlParams.autoRun === true;
 	const storedPrefs = (0, react.useMemo)(() => autoRun ? {} : readStoredPrefs(), [autoRun]);
 	const [screenWidth, setScreenWidth] = (0, react.useState)(storedPrefs.screenWidth ?? "full");
+	const [sidebarWidth, setSidebarWidth] = (0, react.useState)(storedPrefs.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH$1);
+	const [rightSidebarWidth, setRightSidebarWidth] = (0, react.useState)(storedPrefs.rightSidebarWidth ?? DEFAULT_SIDEBAR_WIDTH$1);
 	const isMobileWidth = (width) => width === "mobile-s" || width === "mobile-l";
 	const [activeHost, setActiveHost] = (0, react.useState)(urlParams.host ?? storedPrefs.activeHost ?? defaultHost);
 	const [selectedSimulationName, setSelectedSimulationName] = (0, react.useState)((0, react.useMemo)(() => {
-		const defaultName = simulationNames[0] ?? "";
-		if (!urlParams.simulation) return defaultName;
-		return urlParams.simulation in simulations ? urlParams.simulation : defaultName;
+		if (!urlParams.simulation) return defaultSimulationName;
+		return urlParams.simulation in simulations ? urlParams.simulation : defaultSimulationName;
 	}, [
 		urlParams.simulation,
 		simulations,
-		simulationNames
+		defaultSimulationName
 	]));
 	const selectedSim = simulations[selectedSimulationName];
 	const [theme, setTheme] = (0, react.useState)(urlParams.theme ?? storedPrefs.theme ?? DEFAULT_THEME);
 	const [displayMode, _setDisplayMode] = (0, react.useState)(urlParams.displayMode ?? storedPrefs.displayMode ?? DEFAULT_DISPLAY_MODE);
 	const [locale, setLocale] = (0, react.useState)(urlParams.locale ?? storedPrefs.locale ?? "en-US");
-	const [containerHeight, setContainerHeight] = (0, react.useState)(void 0);
-	const [containerWidth, setContainerWidth] = (0, react.useState)(void 0);
+	const [containerHeight, setContainerHeight] = (0, react.useState)(storedPrefs.containerHeight);
+	const [containerWidth, setContainerWidth] = (0, react.useState)(storedPrefs.containerWidth);
 	const [containerMaxHeight, setContainerMaxHeight] = (0, react.useState)(urlParams.containerMaxHeight ?? storedPrefs.containerMaxHeight);
 	const [containerMaxWidth, setContainerMaxWidth] = (0, react.useState)(urlParams.containerMaxWidth ?? storedPrefs.containerMaxWidth);
 	const [platform, setPlatform] = (0, react.useState)(urlParams.platform ?? storedPrefs.platform ?? DEFAULT_PLATFORM);
@@ -6632,7 +6652,7 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 		left: 0,
 		right: 0
 	});
-	const [timeZone, setTimeZone] = (0, react.useState)(() => Intl.DateTimeFormat().resolvedOptions().timeZone);
+	const [timeZone, setTimeZone] = (0, react.useState)(() => storedPrefs.timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone);
 	const isFirstRender = (0, react.useRef)(true);
 	(0, react.useEffect)(() => {
 		if (isFirstRender.current) {
@@ -6640,27 +6660,32 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 			return;
 		}
 		if (autoRun) return;
-		try {
-			const prefs = {
-				theme,
-				locale,
-				displayMode,
-				containerMaxHeight,
-				containerMaxWidth,
-				safeAreaInsets,
-				activeHost,
-				platform,
-				hover,
-				touch,
-				screenWidth
-			};
-			localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
-		} catch {}
+		writeStoredPrefs({
+			...readStoredPrefs(),
+			theme,
+			locale,
+			displayMode,
+			containerHeight,
+			containerWidth,
+			containerMaxHeight,
+			containerMaxWidth,
+			safeAreaInsets,
+			activeHost,
+			platform,
+			hover,
+			touch,
+			screenWidth,
+			sidebarWidth,
+			rightSidebarWidth,
+			timeZone
+		});
 	}, [
 		autoRun,
 		theme,
 		locale,
 		displayMode,
+		containerHeight,
+		containerWidth,
 		containerMaxHeight,
 		containerMaxWidth,
 		safeAreaInsets,
@@ -6668,7 +6693,10 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 		platform,
 		hover,
 		touch,
-		screenWidth
+		screenWidth,
+		sidebarWidth,
+		rightSidebarWidth,
+		timeZone
 	]);
 	const [measuredContentWidth, setMeasuredContentWidth] = (0, react.useState)(void 0);
 	const handleContentWidthChange = (0, react.useCallback)((width) => {
@@ -6753,6 +6781,8 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 		}
 		if (editingField !== "modelContext") {
 			setModelContext(null);
+			setModelAppContext(null);
+			setModelContextJson("null");
 			setModelContextError("");
 		}
 	}, [
@@ -6829,6 +6859,10 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 		setActiveHost,
 		screenWidth,
 		setScreenWidth,
+		sidebarWidth,
+		setSidebarWidth,
+		rightSidebarWidth,
+		setRightSidebarWidth,
 		theme,
 		setTheme,
 		displayMode,
@@ -7059,9 +7093,10 @@ var useThemeContext = () => {
 	if (context === void 0) throw new Error("useThemeContext must be used within a ThemeProvider");
 	return context;
 };
-//#endregion
-//#region src/inspector/simple-sidebar.tsx
-var DEFAULT_SIDEBAR_WIDTH = 260;
+function clampSidebarWidth(rawWidth, viewportWidth) {
+	const maxWidth = Math.floor(viewportWidth / 3);
+	return Math.max(260, Math.min(maxWidth, rawWidth));
+}
 function ChevronRightIcon() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		width: "1em",
@@ -7075,19 +7110,34 @@ function ChevronRightIcon() {
 		})
 	});
 }
-function SimpleSidebar({ children, controls, headerRight, rootRef, fillParent = false }) {
+function SimpleSidebar({ children, controls, rightControls, sidebarWidth, rightSidebarWidth, onSidebarWidthChange, onRightSidebarWidthChange, headerRight, rootRef, fillParent = false }) {
 	const [isDrawerOpen, setIsDrawerOpen] = react.useState(false);
-	const [sidebarWidth, setSidebarWidth] = react.useState(DEFAULT_SIDEBAR_WIDTH);
+	const [internalSidebarWidth, setInternalSidebarWidth] = react.useState(260);
+	const [internalRightSidebarWidth, setInternalRightSidebarWidth] = react.useState(260);
 	const [isResizing, setIsResizing] = react.useState(false);
+	const [isResizingRight, setIsResizingRight] = react.useState(false);
+	const effectiveSidebarWidth = sidebarWidth ?? internalSidebarWidth;
+	const effectiveRightSidebarWidth = rightSidebarWidth ?? internalRightSidebarWidth;
+	const setSidebarWidth = react.useCallback((width) => {
+		setInternalSidebarWidth(width);
+		onSidebarWidthChange?.(width);
+	}, [onSidebarWidthChange]);
+	const setRightSidebarWidth = react.useCallback((width) => {
+		setInternalRightSidebarWidth(width);
+		onRightSidebarWidthChange?.(width);
+	}, [onRightSidebarWidthChange]);
 	const handleMouseDown = react.useCallback((e) => {
 		e.preventDefault();
 		setIsResizing(true);
 	}, []);
+	const handleRightMouseDown = react.useCallback((e) => {
+		e.preventDefault();
+		setIsResizingRight(true);
+	}, []);
 	react.useEffect(() => {
 		if (!isResizing) return;
 		const handleMouseMove = (e) => {
-			const maxWidth = Math.floor(window.innerWidth / 3);
-			setSidebarWidth(Math.min(maxWidth, Math.max(DEFAULT_SIDEBAR_WIDTH, e.clientX)));
+			setSidebarWidth(clampSidebarWidth(e.clientX, window.innerWidth));
 		};
 		const handleMouseUp = () => {
 			setIsResizing(false);
@@ -7098,12 +7148,27 @@ function SimpleSidebar({ children, controls, headerRight, rootRef, fillParent =
 			document.removeEventListener("mousemove", handleMouseMove);
 			document.removeEventListener("mouseup", handleMouseUp);
 		};
-	}, [isResizing]);
+	}, [isResizing, setSidebarWidth]);
+	react.useEffect(() => {
+		if (!isResizingRight) return;
+		const handleMouseMove = (e) => {
+			setRightSidebarWidth(clampSidebarWidth(window.innerWidth - e.clientX, window.innerWidth));
+		};
+		const handleMouseUp = () => {
+			setIsResizingRight(false);
+		};
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+		return () => {
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		};
+	}, [isResizingRight, setRightSidebarWidth]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		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" }),
+			(isResizing || isResizingRight) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "fixed inset-0 z-50 cursor-col-resize" }),
 			isDrawerOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "md:hidden fixed inset-0 bg-black/50 z-40 pointer-events-auto",
 				onClick: (e) => {
@@ -7119,7 +7184,7 @@ function SimpleSidebar({ children, controls, headerRight, rootRef, fillParent =
           ${isDrawerOpen ? "max-md:translate-x-0" : "max-md:-translate-x-full"}
         `,
 				style: {
-					width: sidebarWidth,
+					width: effectiveSidebarWidth,
 					borderRight: "1px solid var(--color-border-primary)"
 				},
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -7172,19 +7237,69 @@ function SimpleSidebar({ children, controls, headerRight, rootRef, fillParent =
 					"aria-label": "Open sidebar",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRightIcon, {})
 				}), children]
+			}),
+			rightControls && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+				className: "relative hidden md:flex flex-col bg-sidebar",
+				style: {
+					width: effectiveRightSidebarWidth,
+					borderLeft: "1px solid var(--color-border-primary)"
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex-1 min-h-0 overflow-y-auto px-3 pb-3 pt-2",
+					children: rightControls
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					onMouseDown: handleRightMouseDown,
+					className: "hidden md:block absolute top-0 left-0 w-1 h-full cursor-col-resize hover:bg-black/10 dark:hover:bg-white/10 active:bg-black/20 dark:active:bg-white/20 transition-colors"
+				})]
 			})
 		]
 	});
 }
 var DOCS_BASE_URL$1 = "https://sunpeak.ai/docs";
-function HelpIcon({ tooltip, docsPath }) {
+function HelpIcon({ tooltip, docsPath, placement = "right" }) {
+	const linkRef = react.useRef(null);
+	const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
+	const [tooltipPosition, setTooltipPosition] = react.useState({
+		left: 0,
+		top: 0
+	});
+	const tooltipOffset = 8;
+	const tooltipTransform = placement === "left" ? "translate(-100%, -50%)" : "translateY(-50%)";
+	const setTooltipFromPoint = react.useCallback((clientX, clientY) => {
+		setTooltipPosition({
+			left: placement === "left" ? clientX - tooltipOffset : clientX + tooltipOffset,
+			top: clientY
+		});
+	}, [placement]);
+	const setTooltipFromIcon = react.useCallback(() => {
+		const rect = linkRef.current?.getBoundingClientRect();
+		if (!rect) return;
+		setTooltipPosition({
+			left: placement === "left" ? rect.left - tooltipOffset : rect.right + tooltipOffset,
+			top: rect.top + rect.height / 2
+		});
+	}, [placement]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+		ref: linkRef,
 		href: `${DOCS_BASE_URL$1}/${docsPath}`,
 		target: "_blank",
 		rel: "noopener noreferrer",
 		"aria-label": tooltip,
 		className: "group relative inline-flex items-center justify-center no-underline flex-shrink-0 transition-colors",
 		style: { color: "var(--color-text-tertiary, var(--color-text-secondary))" },
+		onMouseEnter: (e) => {
+			setIsTooltipVisible(true);
+			setTooltipFromPoint(e.clientX, e.clientY);
+		},
+		onMouseMove: (e) => {
+			setTooltipFromPoint(e.clientX, e.clientY);
+		},
+		onMouseLeave: () => setIsTooltipVisible(false),
+		onFocus: () => {
+			setIsTooltipVisible(true);
+			setTooltipFromIcon();
+		},
+		onBlur: () => setIsTooltipVisible(false),
 		onClick: (e) => e.stopPropagation(),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 			width: "12",
@@ -7210,8 +7325,11 @@ function HelpIcon({ tooltip, docsPath }) {
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"aria-hidden": "true",
-			className: "pointer-events-none absolute left-full top-1/2 z-[200] ml-1.5 hidden -translate-y-1/2 whitespace-nowrap rounded px-2 py-1 text-[11px] font-normal leading-tight group-hover:block group-focus-within:block",
+			className: `pointer-events-none fixed z-[1000] whitespace-nowrap rounded px-2 py-1 text-[11px] font-normal leading-tight ${isTooltipVisible ? "block" : "hidden"}`,
 			style: {
+				left: tooltipPosition.left,
+				top: tooltipPosition.top,
+				transform: tooltipTransform,
 				backgroundColor: "var(--color-text-primary)",
 				color: "var(--color-background-primary)"
 			},
@@ -7219,7 +7337,7 @@ function HelpIcon({ tooltip, docsPath }) {
 		})]
 	});
 }
-function SidebarControl({ label, children, tooltip, docsPath, "data-testid": testId }) {
+function SidebarControl({ label, children, tooltip, tooltipPlacement, docsPath, "data-testid": testId }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-1",
 		"data-testid": testId,
@@ -7228,15 +7346,17 @@ function SidebarControl({ label, children, tooltip, docsPath, "data-testid": tes
 			style: { color: "var(--color-text-secondary)" },
 			children: [label, tooltip && docsPath && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpIcon, {
 				tooltip,
-				docsPath
+				docsPath,
+				placement: tooltipPlacement
 			})]
 		}), children]
 	});
 }
-function SidebarCollapsibleControl({ label, children, defaultCollapsed = true, tooltip, docsPath, "data-testid": testId }) {
+function SidebarCollapsibleControl({ label, children, defaultCollapsed = true, className, contentClassName, style, tooltip, tooltipPlacement, docsPath, "data-testid": testId }) {
 	const [isCollapsed, setIsCollapsed] = react.useState(defaultCollapsed);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-1",
+		className: className ? `space-y-1 ${className}` : "space-y-1",
+		style: isCollapsed ? void 0 : style,
 		"data-testid": testId,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			onClick: () => setIsCollapsed(!isCollapsed),
@@ -7247,13 +7367,17 @@ function SidebarCollapsibleControl({ label, children, defaultCollapsed = true, t
 				className: "inline-flex items-center gap-1",
 				children: [label, tooltip && docsPath && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpIcon, {
 					tooltip,
-					docsPath
+					docsPath,
+					placement: tooltipPlacement
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-[8px]",
 				children: isCollapsed ? "▶" : "▼"
 			})]
-		}), !isCollapsed && children]
+		}), !isCollapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: contentClassName,
+			children
+		})]
 	});
 }
 var formElementStyle = {
@@ -7328,7 +7452,7 @@ function SidebarInput({ value, onChange, applyOnBlur = false, autoComplete, plac
 		}
 	});
 }
-function SidebarCheckbox({ checked, onChange, label, tooltip, docsPath }) {
+function SidebarCheckbox({ checked, onChange, label, tooltip, tooltipPlacement, docsPath }) {
 	const id = react.useId();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-1.5",
@@ -7348,24 +7472,25 @@ function SidebarCheckbox({ checked, onChange, label, tooltip, docsPath }) {
 			}),
 			tooltip && docsPath && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpIcon, {
 				tooltip,
-				docsPath
+				docsPath,
+				placement: tooltipPlacement
 			})
 		]
 	});
 }
-function SidebarTextarea({ value, onChange, onFocus, onBlur, placeholder, maxRows = 8, error, "data-testid": testId }) {
+function SidebarTextarea({ value, onChange, onFocus, onBlur, placeholder, maxRows = 8, fill = false, error, "data-testid": testId }) {
 	const contentRows = value?.split("\n").length ?? 1;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-0.5",
+		className: fill ? "flex h-full min-h-0 flex-col gap-0.5" : "space-y-0.5",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 			value,
 			onChange: (e) => onChange(e.target.value),
 			onFocus,
 			onBlur,
 			placeholder,
-			rows: Math.min(contentRows, maxRows),
+			rows: fill ? void 0 : 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",
+			className: `w-full text-[10px] font-mono rounded-md px-2 py-1.5 outline-none ${fill ? "h-full min-h-0 flex-1 resize-none" : "resize-y"}`,
 			style: {
 				...formElementStyle,
 				cursor: "text",
@@ -7454,10 +7579,9 @@ function flattenAppToSimulations(app) {
 	}
 	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 resource = uri ? resourcesByUri.get(uri) : void 0;
+		if (uri && !resource) console.warn(`[Inspector] Tool '${appTool.tool.name}' references unknown resource URI '${uri}'. The tool remains callable but has no UI to render.`);
+		const mcpResource = resource ? toMcpResource(resource) : void 0;
 		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}`;
@@ -7465,10 +7589,12 @@ function flattenAppToSimulations(app) {
 			result[key] = {
 				name: key,
 				displayName: sim.name,
-				resourceHtml: resource.html,
+				...resource ? {
+					resourceHtml: resource.html,
+					resource: mcpResource
+				} : {},
 				userMessage: sim.userMessage,
 				tool: appTool.tool,
-				resource: mcpResource,
 				toolInput: sim.toolInput,
 				toolResult: sim.toolResult,
 				serverTools: sim.serverTools
@@ -7483,12 +7609,16 @@ var DOCS_BASE_URL = "https://sunpeak.ai/docs";
 var DEFAULT_MODEL_PROVIDERS = [{
 	id: "openai",
 	label: "OpenAI",
-	defaultModel: "gpt-4o"
+	defaultModel: "gpt-5.5"
 }, {
 	id: "anthropic",
 	label: "Anthropic",
-	defaultModel: "claude-3-5-sonnet-20241022"
+	defaultModel: "claude-sonnet-4-20250514"
 }];
+function createModelConversationId() {
+	const random = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+	return `model-chat-${Date.now()}-${random}`;
+}
 function splitCssArgs(value) {
 	const args = [];
 	let depth = 0;
@@ -7544,7 +7674,6 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 	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,
@@ -7553,6 +7682,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 				fixtureSimNames: []
 			});
 			const info = map.get(toolName);
+			if (!info.resource && sim.resource) info.resource = sim.resource;
 			info.simNames.push(simName);
 			if (hasFixtureData(sim)) info.fixtureSimNames.push(simName);
 		}
@@ -7565,6 +7695,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 		const labelB = infoB.tool.title || b;
 		return labelA.localeCompare(labelB);
 	}), [toolMap]);
+	const defaultToolName = react.useMemo(() => toolNames.find((name) => !!toolMap.get(name)?.resource) ?? toolNames[0] ?? "", [toolMap, toolNames]);
 	const initUrlParams = react.useMemo(() => {
 		if (typeof window === "undefined") return {
 			tool: null,
@@ -7580,17 +7711,18 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 			autoRun: params.get("autoRun") === "true"
 		};
 	}, []);
+	const storedPrefs = react.useMemo(() => initUrlParams.autoRun ? {} : readStoredPrefs(), [initUrlParams.autoRun]);
 	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] ?? "";
+		return defaultToolName;
 	});
 	const prevToolNamesRef = react.useRef(toolNames);
 	if (prevToolNamesRef.current !== toolNames) {
 		prevToolNamesRef.current = toolNames;
-		if (toolNames.length > 0 && !toolMap.has(selectedToolName)) setSelectedToolName(toolNames[0]);
+		if (toolNames.length > 0 && !toolMap.has(selectedToolName)) setSelectedToolName(defaultToolName);
 	}
 	const selectedToolInfo = toolMap.get(selectedToolName);
 	const [activeSimulationName, setActiveSimulationName] = react.useState(() => {
@@ -7614,6 +7746,12 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 		defaultHost,
 		preserveToolDataOnSimulationChange: isLiveMcpRender
 	});
+	const resetAppContextForSelectionChange = () => {
+		state.setModelContext(null);
+		state.setModelAppContext(null);
+		state.setModelContextJson("null");
+		state.setModelContextError("");
+	};
 	const [serverUrl, setServerUrl] = react.useState(mcpServerUrl ?? "");
 	const [authType, setAuthType] = react.useState("none");
 	const [bearerToken, setBearerToken] = react.useState("");
@@ -7623,13 +7761,12 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 	const [oauthStatus, setOauthStatus] = react.useState("none");
 	const [oauthError, setOauthError] = react.useState();
 	const connection = useMcpConnection(isEmbedded ? void 0 : mcpServerUrl || void 0, inspectorApiBaseUrl);
-	const [prodResources, setProdResources] = react.useState(state.urlProdResources ?? defaultProdResources);
+	const [prodResources, setProdResources] = react.useState(state.urlProdResources ?? storedPrefs.prodResources ?? 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 prodResourcesId = react.useId();
 	const [serverPreviewGeneration, setServerPreviewGeneration] = react.useState(0);
 	const checkTimerRef = react.useRef(void 0);
 	const oauthCleanupRef = react.useRef(void 0);
@@ -7646,6 +7783,15 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 		if (requested && modelProviderOptions.some((provider) => provider.id === requested)) return requested;
 		return modelProviderOptions[0]?.id ?? "openai";
 	}, [modelChat?.defaultProvider, modelProviderOptions]);
+	const initialModelProvider = react.useMemo(() => {
+		const stored = storedPrefs.modelProvider;
+		if (stored && modelProviderOptions.some((provider) => provider.id === stored)) return stored;
+		return defaultModelProvider;
+	}, [
+		defaultModelProvider,
+		modelProviderOptions,
+		storedPrefs.modelProvider
+	]);
 	const getDefaultModelId = react.useCallback((provider) => {
 		const option = modelProviderOptions.find((item) => item.id === provider);
 		const candidates = [
@@ -7657,8 +7803,20 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 		if (providerModels.length === 0) return candidates.find(Boolean) ?? "";
 		return candidates.find((model) => model && providerModels.includes(model)) ?? providerModels[0];
 	}, [modelChat?.defaultModel, modelProviderOptions]);
-	const [modelProvider, setModelProvider] = react.useState(defaultModelProvider);
-	const [modelId, setModelId] = react.useState(() => getDefaultModelId(defaultModelProvider));
+	const getInitialModelId = react.useCallback((provider) => {
+		const stored = storedPrefs.modelId;
+		if (storedPrefs.modelProvider && storedPrefs.modelProvider !== provider) return getDefaultModelId(provider);
+		const providerModels = modelProviderOptions.find((item) => item.id === provider)?.models ?? [];
+		if (stored && (providerModels.length === 0 || providerModels.includes(stored))) return stored;
+		return getDefaultModelId(provider);
+	}, [
+		getDefaultModelId,
+		modelProviderOptions,
+		storedPrefs.modelId,
+		storedPrefs.modelProvider
+	]);
+	const [modelProvider, setModelProvider] = react.useState(initialModelProvider);
+	const [modelId, setModelId] = react.useState(() => getInitialModelId(initialModelProvider));
 	const [apiKeyDraft, setApiKeyDraft] = react.useState("");
 	const [keyStatus, setKeyStatus] = react.useState({ hasKey: false });
 	const [isKeyStatusLoading, setIsKeyStatusLoading] = react.useState(usesApiKeyUi);
@@ -7667,9 +7825,36 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 	const [chatInput, setChatInput] = react.useState("");
 	const [isChatting, setIsChatting] = react.useState(false);
 	const [chatStatus, setChatStatus] = react.useState("");
+	const modelConversationIdRef = react.useRef(createModelConversationId());
 	const currentModelProvider = react.useMemo(() => modelProviderOptions.find((provider) => provider.id === modelProvider), [modelProvider, modelProviderOptions]);
 	const selectedProviderModelOptions = react.useMemo(() => currentModelProvider?.models ?? [], [currentModelProvider?.models]);
-	const modelCallableTools = react.useMemo(() => Array.from(toolMap.values()).filter((info) => !!info.resource && isToolVisibleToModel(info.tool)).map((info) => info.tool), [toolMap]);
+	const modelCallableTools = react.useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const sim of Object.values(simulations)) {
+			if (!isToolVisibleToModel(sim.tool) || map.has(sim.tool.name)) continue;
+			map.set(sim.tool.name, sim.tool);
+		}
+		return Array.from(map.values());
+	}, [simulations]);
+	const isFirstInspectorPrefsRender = react.useRef(true);
+	react.useEffect(() => {
+		if (isFirstInspectorPrefsRender.current) {
+			isFirstInspectorPrefsRender.current = false;
+			return;
+		}
+		if (initUrlParams.autoRun) return;
+		writeStoredPrefs({
+			...readStoredPrefs(),
+			prodResources,
+			modelProvider,
+			modelId
+		});
+	}, [
+		initUrlParams.autoRun,
+		modelId,
+		modelProvider,
+		prodResources
+	]);
 	react.useEffect(() => {
 		setServerUrl(mcpServerUrl ?? "");
 	}, [mcpServerUrl]);
@@ -7779,6 +7964,13 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 		usesApiKeyUi,
 		usesLocalModelEndpoints
 	]);
+	const handleResetModelConversation = react.useCallback(() => {
+		modelConversationIdRef.current = createModelConversationId();
+		setChatMessages([]);
+		setChatInput("");
+		setChatStatus("");
+		setIsChatting(false);
+	}, []);
 	react.useEffect(() => {
 		state.setSelectedSimulationName(effectiveSimulationName);
 	}, [effectiveSimulationName]);
@@ -8039,15 +8231,18 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 		state.setToolResultJson("");
 		state.setToolResultError("");
 		setHasRun(false);
+		const requestConversationId = modelConversationIdRef.current;
 		try {
 			const messages = nextMessages.map((message) => ({
 				role: message.role,
-				content: message.content
-			}));
+				content: message.content.trim()
+			})).filter((message) => message.content.length > 0);
 			let data;
 			if (modelChatHandler) data = await modelChatHandler({
+				conversationId: requestConversationId,
 				provider: modelProvider,
 				modelId,
+				host: state.activeHost,
 				messages,
 				tools: modelCallableTools,
 				appContext: state.modelAppContext ?? void 0
@@ -8058,8 +8253,10 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 					method: "POST",
 					headers: { "Content-Type": "application/json" },
 					body: JSON.stringify({
+						conversationId: requestConversationId,
 						provider: modelProvider,
 						modelId,
+						host: state.activeHost,
 						messages,
 						appContext: state.modelAppContext ?? void 0
 					})
@@ -8068,6 +8265,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 				if (!res.ok || data.error) throw new Error(data.error ?? `Model request failed (${res.status})`);
 			}
 			if (data.error) throw new Error(data.error);
+			if (requestConversationId !== modelConversationIdRef.current) return;
 			let rendersApp = false;
 			const toolCalls = data.toolCalls ?? [];
 			for (let index = toolCalls.length - 1; index >= 0; index--) {
@@ -8089,7 +8287,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 			const assistantMessage = {
 				id: `assistant-${Date.now()}`,
 				role: "assistant",
-				content: data.text ?? (toolCalls.length > 0 ? "I called the MCP tool and rendered the app below." : "The model returned an empty response."),
+				content: data.text ?? (rendersApp ? "I called the MCP tool and rendered the app below." : toolCalls.length > 0 ? "I called the MCP tool." : "The model returned an empty response."),
 				toolCalls: toolCalls.map((call) => ({
 					name: call.name,
 					arguments: call.arguments,
@@ -8105,6 +8303,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 			});
 			setChatStatus("");
 		} catch (err) {
+			if (requestConversationId !== modelConversationIdRef.current) return;
 			const message = err instanceof Error ? err.message : String(err);
 			setChatMessages((messages) => [...messages, {
 				id: `assistant-error-${Date.now()}`,
@@ -8113,7 +8312,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 			}]);
 			setChatStatus(message);
 		} finally {
-			setIsChatting(false);
+			if (requestConversationId === modelConversationIdRef.current) setIsChatting(false);
 		}
 	}, [
 		canUseModelChat,
@@ -8309,10 +8508,19 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-sm text-center max-w-xs",
 				style: { color: "var(--color-text-secondary)" },
-				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"
+				children: isEmbedded ? "No tools in this app" : isError ? "Could not connect to MCP server" : isConnected ? "No tools 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", {
+	} else if (!selectedToolInfo?.resource) 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: "Tool does not render a UI"
+		})
+	});
+	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", {
@@ -8436,31 +8644,9 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M0 0L10 6L0 12V0Z" })
 		}), "Run"]
 	}) : void 0;
-	const headerProdResourcesControl = !hideInspectorModes && !demoMode && !isEmbedded ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex shrink-0 items-center gap-1.5 text-[11px] font-medium",
-		style: { color: "var(--color-text-secondary)" },
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-				id: prodResourcesId,
-				type: "checkbox",
-				checked: prodResources,
-				onChange: (event) => setProdResources(event.currentTarget.checked),
-				className: "h-3.5 w-3.5 accent-[var(--color-text-primary)]"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-				htmlFor: prodResourcesId,
-				className: "cursor-pointer select-none",
-				children: "Prod Resources"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpIcon, {
-				tooltip: "Load resources from dist/ builds instead of HMR",
-				docsPath: "app-framework/cli/dev#prod-tools-and-prod-resources-flags"
-			})
-		]
-	}) : null;
-	const headerAction = runButton || headerProdResourcesControl ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex min-w-0 items-center gap-2",
-		children: [runButton, headerProdResourcesControl]
+	const headerAction = runButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex min-w-0 items-center",
+		children: runButton
 	}) : void 0;
 	const conversationContent = ShellConversation ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShellConversation, {
 		screenWidth: state.screenWidth,
@@ -8483,6 +8669,11 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 		children: content
 	}) : content;
 	const rootSizing = isEmbedded ? "h-full w-full" : "h-screen w-screen";
+	const getJsonPanelFlexGrow = (value) => {
+		const text = value || "";
+		const lineCount = text.split("\n").length;
+		return Math.max(1, Math.min(8, lineCount + Math.floor(text.length / 500)));
+	};
 	if (!showSidebar) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeProvider, {
 		theme: state.theme,
 		applyTheme,
@@ -8498,6 +8689,10 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SimpleSidebar, {
 			rootRef,
 			fillParent: isEmbedded,
+			sidebarWidth: state.sidebarWidth,
+			rightSidebarWidth: state.rightSidebarWidth,
+			onSidebarWidthChange: state.setSidebarWidth,
+			onRightSidebarWidthChange: state.setRightSidebarWidth,
 			controls: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "space-y-1",
 				children: [
@@ -8522,7 +8717,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 						})
 					}), !demoMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
 						label: "Authentication",
-						defaultCollapsed: authType === "none",
+						defaultCollapsed: false,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "space-y-1",
 							children: [
@@ -8606,70 +8801,6 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 							]
 						})
 					}, `auth-${authType === "none" ? "none" : "active"}`)] }),
-					canUseModelChat && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
-						label: "Model Chat",
-						defaultCollapsed: true,
-						tooltip: "Talk to this MCP server through a model",
-						docsPath: "testing/evals",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "space-y-2",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "grid grid-cols-2 gap-2",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
-									label: "Provider",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarSelect, {
-										value: modelProvider,
-										onChange: handleModelProviderChange,
-										options: modelProviderOptions.map((provider) => ({
-											value: provider.id,
-											label: provider.label ?? provider.id
-										}))
-									})
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
-									label: "Model",
-									children: selectedProviderModelOptions.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarSelect, {
-										value: modelId,
-										onChange: setModelId,
-										options: selectedProviderModelOptions.map((model) => ({
-											value: model,
-											label: model
-										}))
-									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
-										value: modelId,
-										onChange: setModelId,
-										applyOnBlur: true,
-										placeholder: getDefaultModelId(modelProvider)
-									})
-								})]
-							}), usesApiKeyUi && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SidebarControl, {
-								label: "API Key",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex gap-1",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
-										type: "password",
-										autoComplete: "new-password",
-										value: apiKeyDraft,
-										onChange: setApiKeyDraft,
-										placeholder: keyStatus.hasKey ? "Saved locally" : `Paste ${modelProvider} key`
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										onClick: handleSaveApiKey,
-										disabled: isKeyStatusLoading || !apiKeyDraft && !keyStatus.hasKey,
-										className: "h-7 rounded-md px-2 text-xs font-medium transition-opacity disabled:opacity-40",
-										style: {
-											backgroundColor: "var(--color-text-primary)",
-											color: "var(--color-background-primary)"
-										},
-										children: apiKeyDraft ? "Save" : "Clear"
-									})]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "mt-1 text-[9px]",
-									style: { color: "var(--color-text-secondary)" },
-									children: keyMessage || (isKeyStatusLoading ? "Checking saved key..." : keyStatus.hasKey ? `Key saved ${keyStatus.storage ?? "locally"}` : "Paste a key or use one already saved on this machine")
-								})]
-							})]
-						})
-					}),
 					hasTools && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "grid grid-cols-2 gap-2",
 						"data-testid": "tool-simulation-row",
@@ -8682,6 +8813,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								value: selectedToolName,
 								onChange: (value) => {
 									setIsLiveMcpRender(false);
+									resetAppContextForSelectionChange();
 									setSelectedToolName(value);
 								},
 								options: toolNames.map((name) => {
@@ -8714,6 +8846,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								onChange: (value) => {
 									if (value === "__live__") return;
 									setIsLiveMcpRender(false);
+									resetAppContextForSelectionChange();
 									setActiveSimulationName(value === "__none__" ? null : value);
 								},
 								options: [
@@ -8775,6 +8908,116 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 							})
 						})]
 					}),
+					!hideInspectorModes && !demoMode && !isEmbedded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "py-1",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCheckbox, {
+							checked: prodResources,
+							onChange: setProdResources,
+							label: "Prod Resources",
+							tooltip: "Load resources from dist/ builds instead of HMR",
+							docsPath: "app-framework/cli/dev#prod-tools-and-prod-resources-flags"
+						})
+					}),
+					canUseModelChat && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
+						label: "Model Chat",
+						defaultCollapsed: false,
+						tooltip: "Talk to this MCP server through a model",
+						docsPath: "testing/evals",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "space-y-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "grid grid-cols-[0.7fr_minmax(0,1fr)_1.75rem] items-end gap-2",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+										label: "Provider",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarSelect, {
+											value: modelProvider,
+											onChange: handleModelProviderChange,
+											options: modelProviderOptions.map((provider) => ({
+												value: provider.id,
+												label: provider.label ?? provider.id
+											}))
+										})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarControl, {
+										label: "Model",
+										children: selectedProviderModelOptions.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarSelect, {
+											value: modelId,
+											onChange: setModelId,
+											options: selectedProviderModelOptions.map((model) => ({
+												value: model,
+												label: model
+											}))
+										}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+											value: modelId,
+											onChange: setModelId,
+											applyOnBlur: true,
+											placeholder: getDefaultModelId(modelProvider)
+										})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "group relative flex h-7 items-center self-end",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											onClick: handleResetModelConversation,
+											disabled: chatMessages.length === 0 && !isChatting && !chatStatus,
+											"aria-label": "Reset model conversation",
+											"aria-describedby": "reset-model-conversation-tooltip",
+											title: "Reset conversation",
+											className: "flex h-7 w-7 cursor-pointer items-center justify-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-40",
+											style: {
+												backgroundColor: "var(--color-background-primary)",
+												color: "var(--color-text-primary)"
+											},
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+												width: "18",
+												height: "18",
+												viewBox: "0 0 24 24",
+												fill: "currentColor",
+												"aria-hidden": "true",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h8V3z" })
+											})
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											id: "reset-model-conversation-tooltip",
+											role: "tooltip",
+											className: "pointer-events-none absolute right-0 top-full z-[1000] mt-1 hidden whitespace-nowrap rounded px-2 py-1 text-[11px] font-normal leading-tight group-focus-within:block group-hover:block",
+											style: {
+												backgroundColor: "var(--color-text-primary)",
+												color: "var(--color-background-primary)"
+											},
+											children: "Reset conversation"
+										})]
+									})
+								]
+							}), usesApiKeyUi && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SidebarControl, {
+								label: "API Key",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex gap-1",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+										type: "password",
+										autoComplete: "new-password",
+										value: apiKeyDraft,
+										onChange: setApiKeyDraft,
+										placeholder: keyStatus.hasKey ? "Saved locally" : `Paste ${modelProvider} key`
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										onClick: handleSaveApiKey,
+										disabled: isKeyStatusLoading || !apiKeyDraft && !keyStatus.hasKey,
+										className: "h-7 rounded-md px-2 text-xs font-medium transition-opacity disabled:opacity-40",
+										style: {
+											backgroundColor: "var(--color-text-primary)",
+											color: "var(--color-background-primary)"
+										},
+										children: apiKeyDraft ? "Save" : "Clear"
+									})]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "mt-1 text-[9px]",
+									style: { color: "var(--color-text-secondary)" },
+									children: keyMessage || (isKeyStatusLoading ? "Checking saved key..." : keyStatus.hasKey ? `Key saved ${keyStatus.storage ?? "locally"}` : "Paste a key or use one already saved on this machine")
+								})]
+							})]
+						})
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
 						label: "Host Context",
 						defaultCollapsed: false,
@@ -9037,14 +9280,24 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								})
 							]
 						})
-					}),
+					})
+				]
+			}),
+			rightControls: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex h-full min-h-0 flex-col gap-3",
+				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
 						label: "App Context",
-						defaultCollapsed: true,
+						defaultCollapsed: false,
 						tooltip: "App-provided context shared with the model",
 						docsPath: "app-framework/hooks/use-app-state",
+						className: "flex min-h-0 flex-col",
+						contentClassName: "min-h-0 flex-1",
+						style: { flex: `${getJsonPanelFlexGrow(state.modelContextJson)} 1 0` },
+						tooltipPlacement: "left",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarTextarea, {
 							value: state.modelContextJson,
+							"data-testid": "app-context-textarea",
 							onChange: (json) => state.validateJSON(json, state.setModelContextJson, state.setModelContextError),
 							onFocus: () => state.setEditingField("modelContext"),
 							onBlur: () => state.commitJSON(state.modelContextJson, state.setModelContextError, (parsed) => {
@@ -9055,7 +9308,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								});
 							}),
 							error: state.modelContextError,
-							maxRows: 8
+							fill: true
 						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
@@ -9063,6 +9316,10 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 						defaultCollapsed: false,
 						tooltip: "Arguments passed to the tool",
 						docsPath: "app-framework/hooks/use-tool-data",
+						className: "flex min-h-0 flex-col",
+						contentClassName: "min-h-0 flex-1",
+						style: { flex: `${getJsonPanelFlexGrow(state.toolInputJson)} 1 0` },
+						tooltipPlacement: "left",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarTextarea, {
 							value: state.toolInputJson,
 							"data-testid": "tool-input-textarea",
@@ -9070,7 +9327,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 							onFocus: () => state.setEditingField("toolInput"),
 							onBlur: () => state.commitJSON(state.toolInputJson, state.setToolInputError, (parsed) => state.setToolInput(parsed ?? {})),
 							error: state.toolInputError,
-							maxRows: 8
+							fill: true
 						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
@@ -9079,6 +9336,10 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 						tooltip: "Structured content returned by the tool",
 						docsPath: "app-framework/hooks/use-tool-data",
 						"data-testid": "tool-result-section",
+						className: "flex min-h-0 flex-col",
+						contentClassName: "min-h-0 flex-1",
+						style: { flex: `${getJsonPanelFlexGrow(state.toolResultJson)} 1 0` },
+						tooltipPlacement: "left",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarTextarea, {
 							value: state.toolResultJson,
 							"data-testid": "tool-result-textarea",
@@ -9096,7 +9357,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								}
 							}),
 							error: state.toolResultError,
-							maxRows: 8
+							fill: true
 						})
 					})
 				]
@@ -9258,4 +9519,4 @@ Object.defineProperty(exports, "useThemeContext", {
 	}
 });
 
-//# sourceMappingURL=inspector-DQ_vv1wj.cjs.map
+//# sourceMappingURL=inspector-DOmiG64-.cjs.map