sunpeak 0.20.35 → 0.20.36

package/dist/{inspector-DQ_vv1wj.cjs → inspector-BNWla95w.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:
@@ -6561,6 +6562,8 @@ 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));
 	return prefs;
 }
 function readStoredPrefs() {
@@ -6591,29 +6594,31 @@ 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);
@@ -6652,7 +6657,9 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 				platform,
 				hover,
 				touch,
-				screenWidth
+				screenWidth,
+				sidebarWidth,
+				rightSidebarWidth
 			};
 			localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
 		} catch {}
@@ -6668,7 +6675,9 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 		platform,
 		hover,
 		touch,
-		screenWidth
+		screenWidth,
+		sidebarWidth,
+		rightSidebarWidth
 	]);
 	const [measuredContentWidth, setMeasuredContentWidth] = (0, react.useState)(void 0);
 	const handleContentWidthChange = (0, react.useCallback)((width) => {
@@ -6753,6 +6762,8 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 		}
 		if (editingField !== "modelContext") {
 			setModelContext(null);
+			setModelAppContext(null);
+			setModelContextJson("null");
 			setModelContextError("");
 		}
 	}, [
@@ -6829,6 +6840,10 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 		setActiveHost,
 		screenWidth,
 		setScreenWidth,
+		sidebarWidth,
+		setSidebarWidth,
+		rightSidebarWidth,
+		setRightSidebarWidth,
 		theme,
 		setTheme,
 		displayMode,
@@ -7059,9 +7074,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 +7091,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 +7129,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 +7165,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 +7218,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 +7306,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 +7318,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 +7327,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 +7348,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 +7433,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 +7453,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 +7560,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 +7570,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
@@ -7544,7 +7651,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 +7659,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 +7672,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,
@@ -7585,12 +7693,12 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 		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 +7722,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("");
@@ -7629,7 +7743,6 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 	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);
@@ -7669,7 +7782,14 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 	const [chatStatus, setChatStatus] = react.useState("");
 	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]);
 	react.useEffect(() => {
 		setServerUrl(mcpServerUrl ?? "");
 	}, [mcpServerUrl]);
@@ -8089,7 +8209,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,
@@ -8309,10 +8429,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 +8565,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 +8590,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 +8610,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 +8638,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 +8722,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 +8734,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								value: selectedToolName,
 								onChange: (value) => {
 									setIsLiveMcpRender(false);
+									resetAppContextForSelectionChange();
 									setSelectedToolName(value);
 								},
 								options: toolNames.map((name) => {
@@ -8714,6 +8767,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 +8829,80 @@ 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-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")
+								})]
+							})]
+						})
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
 						label: "Host Context",
 						defaultCollapsed: false,
@@ -9037,14 +9165,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 +9193,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								});
 							}),
 							error: state.modelContextError,
-							maxRows: 8
+							fill: true
 						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
@@ -9063,6 +9201,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 +9212,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 +9221,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 +9242,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								}
 							}),
 							error: state.toolResultError,
-							maxRows: 8
+							fill: true
 						})
 					})
 				]
@@ -9258,4 +9404,4 @@ Object.defineProperty(exports, "useThemeContext", {
 	}
 });
 
-//# sourceMappingURL=inspector-DQ_vv1wj.cjs.map
+//# sourceMappingURL=inspector-BNWla95w.cjs.map