sunpeak 0.20.35 → 0.20.42

package/dist/{inspector-D0TWNx_T.js → inspector-C6n8zap3.js}

@@ -6434,6 +6434,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:
@@ -6537,6 +6538,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;
@@ -6544,6 +6548,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") {
@@ -6560,6 +6566,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() {
@@ -6572,6 +6584,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 } : {},
@@ -6590,36 +6608,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 = useMemo(() => parseUrlParams(), []);
 	const autoRun = urlParams.autoRun === true;
 	const storedPrefs = useMemo(() => autoRun ? {} : readStoredPrefs(), [autoRun]);
 	const [screenWidth, setScreenWidth] = useState(storedPrefs.screenWidth ?? "full");
+	const [sidebarWidth, setSidebarWidth] = useState(storedPrefs.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH$1);
+	const [rightSidebarWidth, setRightSidebarWidth] = useState(storedPrefs.rightSidebarWidth ?? DEFAULT_SIDEBAR_WIDTH$1);
 	const isMobileWidth = (width) => width === "mobile-s" || width === "mobile-l";
 	const [activeHost, setActiveHost] = useState(urlParams.host ?? storedPrefs.activeHost ?? defaultHost);
 	const [selectedSimulationName, setSelectedSimulationName] = useState(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] = useState(urlParams.theme ?? storedPrefs.theme ?? DEFAULT_THEME);
 	const [displayMode, _setDisplayMode] = useState(urlParams.displayMode ?? storedPrefs.displayMode ?? DEFAULT_DISPLAY_MODE);
 	const [locale, setLocale] = useState(urlParams.locale ?? storedPrefs.locale ?? "en-US");
-	const [containerHeight, setContainerHeight] = useState(void 0);
-	const [containerWidth, setContainerWidth] = useState(void 0);
+	const [containerHeight, setContainerHeight] = useState(storedPrefs.containerHeight);
+	const [containerWidth, setContainerWidth] = useState(storedPrefs.containerWidth);
 	const [containerMaxHeight, setContainerMaxHeight] = useState(urlParams.containerMaxHeight ?? storedPrefs.containerMaxHeight);
 	const [containerMaxWidth, setContainerMaxWidth] = useState(urlParams.containerMaxWidth ?? storedPrefs.containerMaxWidth);
 	const [platform, setPlatform] = useState(urlParams.platform ?? storedPrefs.platform ?? DEFAULT_PLATFORM);
@@ -6631,7 +6651,7 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 		left: 0,
 		right: 0
 	});
-	const [timeZone, setTimeZone] = useState(() => Intl.DateTimeFormat().resolvedOptions().timeZone);
+	const [timeZone, setTimeZone] = useState(() => storedPrefs.timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone);
 	const isFirstRender = useRef(true);
 	useEffect(() => {
 		if (isFirstRender.current) {
@@ -6639,27 +6659,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,
@@ -6667,7 +6692,10 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 		platform,
 		hover,
 		touch,
-		screenWidth
+		screenWidth,
+		sidebarWidth,
+		rightSidebarWidth,
+		timeZone
 	]);
 	const [measuredContentWidth, setMeasuredContentWidth] = useState(void 0);
 	const handleContentWidthChange = useCallback((width) => {
@@ -6752,6 +6780,8 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 		}
 		if (editingField !== "modelContext") {
 			setModelContext(null);
+			setModelAppContext(null);
+			setModelContextJson("null");
 			setModelContextError("");
 		}
 	}, [
@@ -6828,6 +6858,10 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 		setActiveHost,
 		screenWidth,
 		setScreenWidth,
+		sidebarWidth,
+		setSidebarWidth,
+		rightSidebarWidth,
+		setRightSidebarWidth,
 		theme,
 		setTheme,
 		displayMode,
@@ -7058,9 +7092,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__ */ jsx("svg", {
 		width: "1em",
@@ -7074,19 +7109,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);
@@ -7097,12 +7147,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__ */ jsxs("div", {
 		ref: rootRef,
 		className: `sunpeak-inspector-root flex ${fillParent ? "h-full w-full" : "h-screen w-full"} overflow-hidden relative`,
 		children: [
-			isResizing && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 cursor-col-resize" }),
+			(isResizing || isResizingRight) && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 cursor-col-resize" }),
 			isDrawerOpen && /* @__PURE__ */ jsx("div", {
 				className: "md:hidden fixed inset-0 bg-black/50 z-40 pointer-events-auto",
 				onClick: (e) => {
@@ -7118,7 +7183,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__ */ jsx("div", {
@@ -7171,19 +7236,69 @@ function SimpleSidebar({ children, controls, headerRight, rootRef, fillParent =
 					"aria-label": "Open sidebar",
 					children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 				}), children]
+			}),
+			rightControls && /* @__PURE__ */ jsxs("aside", {
+				className: "relative hidden md:flex flex-col bg-sidebar",
+				style: {
+					width: effectiveRightSidebarWidth,
+					borderLeft: "1px solid var(--color-border-primary)"
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1 min-h-0 overflow-y-auto px-3 pb-3 pt-2",
+					children: rightControls
+				}), /* @__PURE__ */ 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__ */ 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__ */ jsxs("svg", {
 			width: "12",
@@ -7209,8 +7324,11 @@ function HelpIcon({ tooltip, docsPath }) {
 			})]
 		}), /* @__PURE__ */ 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)"
 			},
@@ -7218,7 +7336,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__ */ jsxs("div", {
 		className: "space-y-1",
 		"data-testid": testId,
@@ -7227,15 +7345,17 @@ function SidebarControl({ label, children, tooltip, docsPath, "data-testid": tes
 			style: { color: "var(--color-text-secondary)" },
 			children: [label, tooltip && docsPath && /* @__PURE__ */ 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__ */ 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__ */ jsxs("button", {
 			onClick: () => setIsCollapsed(!isCollapsed),
@@ -7246,13 +7366,17 @@ function SidebarCollapsibleControl({ label, children, defaultCollapsed = true, t
 				className: "inline-flex items-center gap-1",
 				children: [label, tooltip && docsPath && /* @__PURE__ */ jsx(HelpIcon, {
 					tooltip,
-					docsPath
+					docsPath,
+					placement: tooltipPlacement
 				})]
 			}), /* @__PURE__ */ jsx("span", {
 				className: "text-[8px]",
 				children: isCollapsed ? "▶" : "▼"
 			})]
-		}), !isCollapsed && children]
+		}), !isCollapsed && /* @__PURE__ */ jsx("div", {
+			className: contentClassName,
+			children
+		})]
 	});
 }
 var formElementStyle = {
@@ -7327,7 +7451,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__ */ jsxs("div", {
 		className: "flex items-center gap-1.5",
@@ -7347,24 +7471,25 @@ function SidebarCheckbox({ checked, onChange, label, tooltip, docsPath }) {
 			}),
 			tooltip && docsPath && /* @__PURE__ */ 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__ */ 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__ */ 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",
@@ -7453,10 +7578,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}`;
@@ -7464,10 +7588,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
@@ -7482,12 +7608,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;
@@ -7543,7 +7673,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,
@@ -7552,6 +7681,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);
 		}
@@ -7564,6 +7694,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,
@@ -7579,17 +7710,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(() => {
@@ -7613,6 +7745,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("");
@@ -7622,13 +7760,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);
@@ -7645,6 +7782,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 = [
@@ -7656,8 +7802,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);
@@ -7666,9 +7824,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]);
@@ -7778,6 +7963,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]);
@@ -8038,15 +8230,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
@@ -8057,8 +8252,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
 					})
@@ -8067,6 +8264,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--) {
@@ -8088,7 +8286,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,
@@ -8104,6 +8302,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()}`,
@@ -8112,7 +8311,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 			}]);
 			setChatStatus(message);
 		} finally {
-			setIsChatting(false);
+			if (requestConversationId === modelConversationIdRef.current) setIsChatting(false);
 		}
 	}, [
 		canUseModelChat,
@@ -8308,10 +8507,19 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 			children: /* @__PURE__ */ 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__ */ jsx("div", {
+	} else if (!selectedToolInfo?.resource) content = /* @__PURE__ */ jsx("div", {
+		className: "h-full w-full flex items-center justify-center",
+		style: { background: iframeBg },
+		children: /* @__PURE__ */ jsx("span", {
+			className: "text-sm text-center max-w-xs",
+			style: { color: "var(--color-text-secondary)" },
+			children: "Tool does not render a UI"
+		})
+	});
+	else if (showEmptyState) content = /* @__PURE__ */ jsx("div", {
 		className: "h-full w-full flex items-center justify-center",
 		style: { background: iframeBg },
 		children: /* @__PURE__ */ jsxs("span", {
@@ -8435,31 +8643,9 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 			children: /* @__PURE__ */ jsx("path", { d: "M0 0L10 6L0 12V0Z" })
 		}), "Run"]
 	}) : void 0;
-	const headerProdResourcesControl = !hideInspectorModes && !demoMode && !isEmbedded ? /* @__PURE__ */ jsxs("div", {
-		className: "flex shrink-0 items-center gap-1.5 text-[11px] font-medium",
-		style: { color: "var(--color-text-secondary)" },
-		children: [
-			/* @__PURE__ */ 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__ */ jsx("label", {
-				htmlFor: prodResourcesId,
-				className: "cursor-pointer select-none",
-				children: "Prod Resources"
-			}),
-			/* @__PURE__ */ 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__ */ jsxs("div", {
-		className: "flex min-w-0 items-center gap-2",
-		children: [runButton, headerProdResourcesControl]
+	const headerAction = runButton ? /* @__PURE__ */ jsx("div", {
+		className: "flex min-w-0 items-center",
+		children: runButton
 	}) : void 0;
 	const conversationContent = ShellConversation ? /* @__PURE__ */ jsx(ShellConversation, {
 		screenWidth: state.screenWidth,
@@ -8482,6 +8668,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__ */ jsx(ThemeProvider, {
 		theme: state.theme,
 		applyTheme,
@@ -8497,6 +8688,10 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 		children: [/* @__PURE__ */ jsx(SimpleSidebar, {
 			rootRef,
 			fillParent: isEmbedded,
+			sidebarWidth: state.sidebarWidth,
+			rightSidebarWidth: state.rightSidebarWidth,
+			onSidebarWidthChange: state.setSidebarWidth,
+			onRightSidebarWidthChange: state.setRightSidebarWidth,
 			controls: /* @__PURE__ */ jsxs("div", {
 				className: "space-y-1",
 				children: [
@@ -8521,7 +8716,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 						})
 					}), !demoMode && /* @__PURE__ */ jsx(SidebarCollapsibleControl, {
 						label: "Authentication",
-						defaultCollapsed: authType === "none",
+						defaultCollapsed: false,
 						children: /* @__PURE__ */ jsxs("div", {
 							className: "space-y-1",
 							children: [
@@ -8605,70 +8800,6 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 							]
 						})
 					}, `auth-${authType === "none" ? "none" : "active"}`)] }),
-					canUseModelChat && /* @__PURE__ */ jsx(SidebarCollapsibleControl, {
-						label: "Model Chat",
-						defaultCollapsed: true,
-						tooltip: "Talk to this MCP server through a model",
-						docsPath: "testing/evals",
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "space-y-2",
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "grid grid-cols-2 gap-2",
-								children: [/* @__PURE__ */ jsx(SidebarControl, {
-									label: "Provider",
-									children: /* @__PURE__ */ jsx(SidebarSelect, {
-										value: modelProvider,
-										onChange: handleModelProviderChange,
-										options: modelProviderOptions.map((provider) => ({
-											value: provider.id,
-											label: provider.label ?? provider.id
-										}))
-									})
-								}), /* @__PURE__ */ jsx(SidebarControl, {
-									label: "Model",
-									children: selectedProviderModelOptions.length > 0 ? /* @__PURE__ */ jsx(SidebarSelect, {
-										value: modelId,
-										onChange: setModelId,
-										options: selectedProviderModelOptions.map((model) => ({
-											value: model,
-											label: model
-										}))
-									}) : /* @__PURE__ */ jsx(SidebarInput, {
-										value: modelId,
-										onChange: setModelId,
-										applyOnBlur: true,
-										placeholder: getDefaultModelId(modelProvider)
-									})
-								})]
-							}), usesApiKeyUi && /* @__PURE__ */ jsxs(SidebarControl, {
-								label: "API Key",
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: "flex gap-1",
-									children: [/* @__PURE__ */ jsx(SidebarInput, {
-										type: "password",
-										autoComplete: "new-password",
-										value: apiKeyDraft,
-										onChange: setApiKeyDraft,
-										placeholder: keyStatus.hasKey ? "Saved locally" : `Paste ${modelProvider} key`
-									}), /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", {
 						className: "grid grid-cols-2 gap-2",
 						"data-testid": "tool-simulation-row",
@@ -8681,6 +8812,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								value: selectedToolName,
 								onChange: (value) => {
 									setIsLiveMcpRender(false);
+									resetAppContextForSelectionChange();
 									setSelectedToolName(value);
 								},
 								options: toolNames.map((name) => {
@@ -8713,6 +8845,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								onChange: (value) => {
 									if (value === "__live__") return;
 									setIsLiveMcpRender(false);
+									resetAppContextForSelectionChange();
 									setActiveSimulationName(value === "__none__" ? null : value);
 								},
 								options: [
@@ -8774,6 +8907,116 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 							})
 						})]
 					}),
+					!hideInspectorModes && !demoMode && !isEmbedded && /* @__PURE__ */ jsx("div", {
+						className: "py-1",
+						children: /* @__PURE__ */ 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__ */ jsx(SidebarCollapsibleControl, {
+						label: "Model Chat",
+						defaultCollapsed: false,
+						tooltip: "Talk to this MCP server through a model",
+						docsPath: "testing/evals",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "space-y-1",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "grid grid-cols-[0.7fr_minmax(0,1fr)_1.75rem] items-end gap-2",
+								children: [
+									/* @__PURE__ */ jsx(SidebarControl, {
+										label: "Provider",
+										children: /* @__PURE__ */ jsx(SidebarSelect, {
+											value: modelProvider,
+											onChange: handleModelProviderChange,
+											options: modelProviderOptions.map((provider) => ({
+												value: provider.id,
+												label: provider.label ?? provider.id
+											}))
+										})
+									}),
+									/* @__PURE__ */ jsx(SidebarControl, {
+										label: "Model",
+										children: selectedProviderModelOptions.length > 0 ? /* @__PURE__ */ jsx(SidebarSelect, {
+											value: modelId,
+											onChange: setModelId,
+											options: selectedProviderModelOptions.map((model) => ({
+												value: model,
+												label: model
+											}))
+										}) : /* @__PURE__ */ jsx(SidebarInput, {
+											value: modelId,
+											onChange: setModelId,
+											applyOnBlur: true,
+											placeholder: getDefaultModelId(modelProvider)
+										})
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "group relative flex h-7 items-center self-end",
+										children: [/* @__PURE__ */ 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__ */ jsx("svg", {
+												width: "18",
+												height: "18",
+												viewBox: "0 0 24 24",
+												fill: "currentColor",
+												"aria-hidden": "true",
+												children: /* @__PURE__ */ 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__ */ 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__ */ jsxs(SidebarControl, {
+								label: "API Key",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex gap-1",
+									children: [/* @__PURE__ */ jsx(SidebarInput, {
+										type: "password",
+										autoComplete: "new-password",
+										value: apiKeyDraft,
+										onChange: setApiKeyDraft,
+										placeholder: keyStatus.hasKey ? "Saved locally" : `Paste ${modelProvider} key`
+									}), /* @__PURE__ */ 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__ */ 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__ */ jsx(SidebarCollapsibleControl, {
 						label: "Host Context",
 						defaultCollapsed: false,
@@ -9036,14 +9279,24 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								})
 							]
 						})
-					}),
+					})
+				]
+			}),
+			rightControls: /* @__PURE__ */ jsxs("div", {
+				className: "flex h-full min-h-0 flex-col gap-3",
+				children: [
 					/* @__PURE__ */ 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__ */ 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) => {
@@ -9054,7 +9307,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								});
 							}),
 							error: state.modelContextError,
-							maxRows: 8
+							fill: true
 						})
 					}),
 					/* @__PURE__ */ jsx(SidebarCollapsibleControl, {
@@ -9062,6 +9315,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__ */ jsx(SidebarTextarea, {
 							value: state.toolInputJson,
 							"data-testid": "tool-input-textarea",
@@ -9069,7 +9326,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__ */ jsx(SidebarCollapsibleControl, {
@@ -9078,6 +9335,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__ */ jsx(SidebarTextarea, {
 							value: state.toolResultJson,
 							"data-testid": "tool-result-textarea",
@@ -9095,7 +9356,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								}
 							}),
 							error: state.toolResultError,
-							maxRows: 8
+							fill: true
 						})
 					})
 				]
@@ -9114,4 +9375,4 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 //#endregion
 export { cn as C, registerHostShell as S, extractResourceCSP as _, SidebarCollapsibleControl as a, getHostShell as b, SidebarSelect as c, SimpleSidebar as d, ThemeProvider as f, IframeResource as g, useInspectorState as h, SidebarCheckbox as i, SidebarTextarea as l, useMcpConnection as m, flattenAppToSimulations as n, SidebarControl as o, useThemeContext as p, resolveServerToolResult as r, SidebarInput as s, Inspector as t, SidebarToggle as u, McpAppHost as v, DEFAULT_STYLE_VARIABLES as w, getRegisteredHosts as x, SCREEN_WIDTHS as y };
 
-//# sourceMappingURL=inspector-D0TWNx_T.js.map
+//# sourceMappingURL=inspector-C6n8zap3.js.map