sunpeak 0.20.34 → 0.20.36

package/dist/{inspector-mGvDvMCR.js → inspector-CiuT_2yA.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:
@@ -6560,6 +6561,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() {
@@ -6590,29 +6593,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 = 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);
@@ -6651,7 +6656,9 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 				platform,
 				hover,
 				touch,
-				screenWidth
+				screenWidth,
+				sidebarWidth,
+				rightSidebarWidth
 			};
 			localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
 		} catch {}
@@ -6667,7 +6674,9 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 		platform,
 		hover,
 		touch,
-		screenWidth
+		screenWidth,
+		sidebarWidth,
+		rightSidebarWidth
 	]);
 	const [measuredContentWidth, setMeasuredContentWidth] = useState(void 0);
 	const handleContentWidthChange = useCallback((width) => {
@@ -6731,6 +6740,7 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 	const [toolResultJson, setToolResultJson] = useState(() => JSON.stringify(toolResult ?? null, null, 2));
 	const [modelContextJson, setModelContextJson] = useState("null");
 	const [modelContext, setModelContext] = useState(null);
+	const [modelAppContext, setModelAppContext] = useState(null);
 	const [editingField, setEditingField] = useState(null);
 	const [toolInputError, setToolInputError] = useState("");
 	const [toolResultError, setToolResultError] = useState("");
@@ -6750,8 +6760,9 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 			setToolResultError("");
 		}
 		if (editingField !== "modelContext") {
-			setModelContextJson("null");
 			setModelContext(null);
+			setModelAppContext(null);
+			setModelContextJson("null");
 			setModelContextError("");
 		}
 	}, [
@@ -6776,6 +6787,10 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 	};
 	const handleUpdateModelContext = (content, structuredContent) => {
 		setModelContextJson(JSON.stringify(structuredContent ?? content, null, 2));
+		setModelAppContext(structuredContent === void 0 && content.length === 0 ? null : {
+			content,
+			...structuredContent !== void 0 ? { structuredContent } : {}
+		});
 	};
 	const validateJSON = (json, setJson, setError) => {
 		setJson(json);
@@ -6824,6 +6839,10 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 		setActiveHost,
 		screenWidth,
 		setScreenWidth,
+		sidebarWidth,
+		setSidebarWidth,
+		rightSidebarWidth,
+		setRightSidebarWidth,
 		theme,
 		setTheme,
 		displayMode,
@@ -6857,6 +6876,8 @@ function useInspectorState({ simulations, defaultHost = "chatgpt", preserveToolD
 		effectiveToolResult,
 		modelContext,
 		setModelContext,
+		modelAppContext,
+		setModelAppContext,
 		toolInputJson,
 		setToolInputJson,
 		toolInputError,
@@ -7052,9 +7073,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",
@@ -7068,19 +7090,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);
@@ -7091,12 +7128,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) => {
@@ -7112,7 +7164,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", {
@@ -7165,19 +7217,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",
@@ -7203,8 +7305,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)"
 			},
@@ -7212,7 +7317,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,
@@ -7221,15 +7326,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),
@@ -7240,13 +7347,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 = {
@@ -7321,7 +7432,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",
@@ -7341,24 +7452,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",
@@ -7447,10 +7559,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}`;
@@ -7458,10 +7569,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
@@ -7537,7 +7650,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,
@@ -7546,6 +7658,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);
 		}
@@ -7558,6 +7671,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,
@@ -7578,12 +7692,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(() => {
@@ -7607,6 +7721,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,7 +7742,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);
@@ -7662,7 +7781,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]);
@@ -8042,7 +8168,8 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 				provider: modelProvider,
 				modelId,
 				messages,
-				tools: modelCallableTools
+				tools: modelCallableTools,
+				appContext: state.modelAppContext ?? void 0
 			});
 			else {
 				const endpoint = inspectorApiEndpoint("/__sunpeak/model-chat", inspectorApiBaseUrl);
@@ -8052,7 +8179,8 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 					body: JSON.stringify({
 						provider: modelProvider,
 						modelId,
-						messages
+						messages,
+						appContext: state.modelAppContext ?? void 0
 					})
 				});
 				data = await readInspectorJson(res, endpoint);
@@ -8080,7 +8208,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,
@@ -8300,10 +8428,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", {
@@ -8427,31 +8564,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,
@@ -8474,6 +8589,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,
@@ -8489,6 +8609,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: [
@@ -8513,7 +8637,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: [
@@ -8597,70 +8721,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",
@@ -8673,6 +8733,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								value: selectedToolName,
 								onChange: (value) => {
 									setIsLiveMcpRender(false);
+									resetAppContextForSelectionChange();
 									setSelectedToolName(value);
 								},
 								options: toolNames.map((name) => {
@@ -8705,6 +8766,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								onChange: (value) => {
 									if (value === "__live__") return;
 									setIsLiveMcpRender(false);
+									resetAppContextForSelectionChange();
 									setActiveSimulationName(value === "__none__" ? null : value);
 								},
 								options: [
@@ -8766,6 +8828,80 @@ 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-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")
+								})]
+							})]
+						})
+					}),
 					/* @__PURE__ */ jsx(SidebarCollapsibleControl, {
 						label: "Host Context",
 						defaultCollapsed: false,
@@ -9028,21 +9164,35 @@ 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) => {
-								state.setModelContext(parsed);
+								state.setModelContext(parsed != null && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : null);
+								state.setModelAppContext(parsed == null ? null : {
+									content: [],
+									structuredContent: parsed
+								});
 							}),
 							error: state.modelContextError,
-							maxRows: 8
+							fill: true
 						})
 					}),
 					/* @__PURE__ */ jsx(SidebarCollapsibleControl, {
@@ -9050,6 +9200,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",
@@ -9057,7 +9211,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, {
@@ -9066,6 +9220,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",
@@ -9083,7 +9241,7 @@ function Inspector({ children, app, simulations: initialSimulationsProp = EMPTY_
 								}
 							}),
 							error: state.toolResultError,
-							maxRows: 8
+							fill: true
 						})
 					})
 				]
@@ -9102,4 +9260,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-mGvDvMCR.js.map
+//# sourceMappingURL=inspector-CiuT_2yA.js.map