sunpeak 0.18.2 → 0.18.7

package/dist/{inspector-CByJjmPD.cjs → inspector-CKc58UuI.cjs}

@@ -487,7 +487,9 @@ function ClaudeConversation({ children, screenWidth, displayMode, platform, onRe
 		style: {
 			transform: "translate(0)",
 			backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))",
-			color: "var(--color-text-primary)"
+			color: "var(--color-text-primary)",
+			fontFamily: "var(--font-sans)",
+			WebkitFontSmoothing: "antialiased"
 		},
 		children: [
 			isFullscreen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -521,17 +523,20 @@ function ClaudeConversation({ children, screenWidth, displayMode, platform, onRe
 						style: { backgroundColor: "var(--sim-bg-conversation, var(--color-background-primary))" },
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "max-w-[48rem] mx-auto",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								type: "text",
-								name: "userInput",
-								disabled: true,
-								placeholder: "Reply to sunpeak...",
-								className: "w-full rounded-xl px-4 py-2.5 text-sm",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "relative rounded-[20px] px-4 py-2.5",
 								style: {
 									backgroundColor: "var(--sim-bg-reply-input, var(--color-background-secondary))",
-									border: "1px solid var(--color-border-primary)",
-									color: "var(--color-text-primary)"
-								}
+									boxShadow: "0 4px 20px rgba(0, 0, 0, 0.035), 0 0 0 0.5px var(--color-border-tertiary)"
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "w-full text-base outline-none opacity-50",
+									style: {
+										lineHeight: "1.4",
+										color: "var(--color-text-tertiary)"
+									},
+									children: "Reply to sunpeak..."
+								})
 							})
 						})
 					})
@@ -559,8 +564,14 @@ function ClaudeConversation({ children, screenWidth, displayMode, platform, onRe
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "max-w-[48rem] mx-auto flex justify-end",
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "inline-block rounded-2xl px-4 py-2.5 text-sm max-w-[85%]",
-									style: { backgroundColor: "var(--sim-bg-user-bubble, var(--color-background-tertiary))" },
+									className: "inline-flex rounded-xl max-w-[85%] break-words",
+									style: {
+										padding: "10px 16px",
+										lineHeight: "22.4px",
+										fontSize: "16px",
+										fontWeight: 430,
+										backgroundColor: "var(--sim-bg-user-bubble, var(--color-background-tertiary))"
+									},
 									children: userMessage
 								})
 							})
@@ -630,17 +641,18 @@ function ClaudeConversation({ children, screenWidth, displayMode, platform, onRe
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "max-w-[48rem] mx-auto px-4 py-4",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "relative",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								type: "text",
-								name: "userInput",
-								disabled: true,
-								placeholder: "Reply to sunpeak...",
-								className: "w-full rounded-xl px-4 py-2.5 text-sm",
+							className: "relative rounded-[20px] px-4 py-2.5",
+							style: {
+								backgroundColor: "var(--sim-bg-reply-input, var(--color-background-secondary))",
+								boxShadow: "0 4px 20px rgba(0, 0, 0, 0.035), 0 0 0 0.5px var(--color-border-tertiary)"
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "w-full text-base outline-none opacity-50",
 								style: {
-									backgroundColor: "var(--sim-bg-reply-input, var(--color-background-secondary))",
-									border: "1px solid var(--color-border-primary)"
-								}
+									lineHeight: "1.4",
+									color: "var(--color-text-tertiary)"
+								},
+								children: "Reply to sunpeak..."
 							})
 						})
 					})
@@ -651,17 +663,32 @@ function ClaudeConversation({ children, screenWidth, displayMode, platform, onRe
 }
 //#endregion
 //#region src/claude/claude-host.ts
+/**
+* Claude host version info — matches what Claude reports via the MCP protocol.
+* Verified against production Claude on 2026-03-25.
+*/
 var CLAUDE_HOST_INFO = {
 	name: "Claude",
 	version: "1.0.0"
 };
+/**
+* Claude host capabilities — matches what Claude reports via the MCP protocol.
+* Verified against production Claude on 2026-03-25.
+*
+* Notable: Claude supports downloadFile, updateModelContext.image, and
+* message.text. serverTools and serverResources both report listChanged.
+* No sandbox.permissions (no microphone etc.). No PiP display mode.
+*/
 var CLAUDE_HOST_CAPABILITIES = {
 	openLinks: {},
-	serverTools: {},
-	serverResources: {},
 	downloadFile: {},
+	serverTools: { listChanged: true },
+	serverResources: { listChanged: true },
 	logging: {},
-	updateModelContext: { text: {} },
+	updateModelContext: {
+		text: {},
+		image: {}
+	},
 	message: { text: {} },
 	sandbox: {}
 };
@@ -680,35 +707,100 @@ registerHostShell({
 	applyTheme: applyClaudeTheme,
 	hostInfo: CLAUDE_HOST_INFO,
 	hostCapabilities: CLAUDE_HOST_CAPABILITIES,
-	userAgent: "claude",
 	styleVariables: {
 		...DEFAULT_STYLE_VARIABLES,
-		"--color-background-primary": "light-dark(#faf9f5, #262624)",
-		"--color-background-secondary": "light-dark(#ffffff, #3a3935)",
-		"--color-background-tertiary": "light-dark(#e8e4dc, #4a4843)",
-		"--color-background-inverse": "light-dark(#2b2a27, #f3f0e8)",
-		"--color-text-primary": "light-dark(#2d2b27, #e8e4dc)",
-		"--color-text-secondary": "light-dark(#6b6560, #9b9690)",
-		"--color-text-tertiary": "light-dark(#9b9690, #6b6560)",
-		"--color-text-inverse": "light-dark(#e8e4dc, #2d2b27)",
-		"--color-border-primary": "light-dark(#e0ddd5, #4a4843)",
-		"--color-border-secondary": "light-dark(#d5d1c8, #5a5753)",
-		"--color-border-tertiary": "light-dark(#f0ede5, #3a3935)"
+		"--color-background-primary": "light-dark(rgba(255, 255, 255, 1), rgba(48, 48, 46, 1))",
+		"--color-background-secondary": "light-dark(rgba(245, 244, 237, 1), rgba(38, 38, 36, 1))",
+		"--color-background-tertiary": "light-dark(rgba(250, 249, 245, 1), rgba(20, 20, 19, 1))",
+		"--color-background-inverse": "light-dark(rgba(20, 20, 19, 1), rgba(250, 249, 245, 1))",
+		"--color-background-ghost": "light-dark(rgba(255, 255, 255, 0), rgba(48, 48, 46, 0))",
+		"--color-background-info": "light-dark(rgba(214, 228, 246, 1), rgba(37, 62, 95, 1))",
+		"--color-background-danger": "light-dark(rgba(247, 236, 236, 1), rgba(96, 42, 40, 1))",
+		"--color-background-success": "light-dark(rgba(233, 241, 220, 1), rgba(27, 70, 20, 1))",
+		"--color-background-warning": "light-dark(rgba(246, 238, 223, 1), rgba(72, 58, 15, 1))",
+		"--color-background-disabled": "light-dark(rgba(255, 255, 255, 0.5), rgba(48, 48, 46, 0.5))",
+		"--color-text-primary": "light-dark(rgba(20, 20, 19, 1), rgba(250, 249, 245, 1))",
+		"--color-text-secondary": "light-dark(rgba(61, 61, 58, 1), rgba(194, 192, 182, 1))",
+		"--color-text-tertiary": "light-dark(rgba(115, 114, 108, 1), rgba(156, 154, 146, 1))",
+		"--color-text-inverse": "light-dark(rgba(255, 255, 255, 1), rgba(20, 20, 19, 1))",
+		"--color-text-ghost": "light-dark(rgba(115, 114, 108, 0.5), rgba(156, 154, 146, 0.5))",
+		"--color-text-info": "light-dark(rgba(50, 102, 173, 1), rgba(128, 170, 221, 1))",
+		"--color-text-danger": "light-dark(rgba(127, 44, 40, 1), rgba(238, 136, 132, 1))",
+		"--color-text-success": "light-dark(rgba(38, 91, 25, 1), rgba(122, 185, 72, 1))",
+		"--color-text-warning": "light-dark(rgba(90, 72, 21, 1), rgba(209, 160, 65, 1))",
+		"--color-text-disabled": "light-dark(rgba(20, 20, 19, 0.5), rgba(250, 249, 245, 0.5))",
+		"--color-border-primary": "light-dark(rgba(31, 30, 29, 0.4), rgba(222, 220, 209, 0.4))",
+		"--color-border-secondary": "light-dark(rgba(31, 30, 29, 0.3), rgba(222, 220, 209, 0.3))",
+		"--color-border-tertiary": "light-dark(rgba(31, 30, 29, 0.15), rgba(222, 220, 209, 0.15))",
+		"--color-border-inverse": "light-dark(rgba(255, 255, 255, 0.3), rgba(20, 20, 19, 0.15))",
+		"--color-border-ghost": "light-dark(rgba(31, 30, 29, 0), rgba(222, 220, 209, 0))",
+		"--color-border-info": "light-dark(rgba(70, 130, 213, 1), rgba(70, 130, 213, 1))",
+		"--color-border-danger": "light-dark(rgba(167, 61, 57, 1), rgba(205, 92, 88, 1))",
+		"--color-border-success": "light-dark(rgba(67, 116, 38, 1), rgba(89, 145, 48, 1))",
+		"--color-border-warning": "light-dark(rgba(128, 92, 31, 1), rgba(168, 120, 41, 1))",
+		"--color-border-disabled": "light-dark(rgba(31, 30, 29, 0.1), rgba(222, 220, 209, 0.1))",
+		"--color-ring-primary": "light-dark(rgba(20, 20, 19, 0.7), rgba(250, 249, 245, 0.7))",
+		"--color-ring-secondary": "light-dark(rgba(61, 61, 58, 0.7), rgba(194, 192, 182, 0.7))",
+		"--color-ring-inverse": "light-dark(rgba(255, 255, 255, 0.7), rgba(20, 20, 19, 0.7))",
+		"--color-ring-info": "light-dark(rgba(50, 102, 173, 0.5), rgba(128, 170, 221, 0.5))",
+		"--color-ring-danger": "light-dark(rgba(167, 61, 57, 0.5), rgba(205, 92, 88, 0.5))",
+		"--color-ring-success": "light-dark(rgba(67, 116, 38, 0.5), rgba(89, 145, 48, 0.5))",
+		"--color-ring-warning": "light-dark(rgba(128, 92, 31, 0.5), rgba(168, 120, 41, 0.5))",
+		"--font-sans": "\"Anthropic Sans\", system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
+		"--font-mono": "ui-monospace, monospace",
+		"--font-text-xs-size": "12px",
+		"--font-text-sm-size": "14px",
+		"--font-text-md-size": "16px",
+		"--font-text-lg-size": "20px",
+		"--font-heading-xs-size": "12px",
+		"--font-heading-sm-size": "14px",
+		"--font-heading-md-size": "16px",
+		"--font-heading-lg-size": "20px",
+		"--font-heading-xl-size": "24px",
+		"--font-heading-2xl-size": "28px",
+		"--font-heading-3xl-size": "36px",
+		"--font-text-md-line-height": "1.4",
+		"--font-text-lg-line-height": "1.25",
+		"--font-heading-lg-line-height": "1.25",
+		"--font-heading-2xl-line-height": "1.1",
+		"--font-heading-3xl-line-height": "1",
+		"--border-radius-xs": "4px",
+		"--border-radius-sm": "6px",
+		"--border-radius-md": "8px",
+		"--border-radius-lg": "10px",
+		"--border-width-regular": "0.5px"
 	},
 	pageStyles: {
-		"--sim-bg-sidebar": "light-dark(#f9f8f3, #252523)",
-		"--sim-bg-conversation": "light-dark(#faf9f5, #262624)",
-		"--sim-bg-user-bubble": "light-dark(#f1eee6, #141413)",
-		"--sim-bg-reply-input": "light-dark(#ffffff, #30302e)"
-	}
+		"--sim-bg-sidebar": "light-dark(rgb(250, 249, 245), rgb(38, 38, 36))",
+		"--sim-bg-conversation": "light-dark(rgb(250, 249, 245), rgb(38, 38, 36))",
+		"--sim-bg-user-bubble": "light-dark(rgb(240, 238, 230), rgb(20, 20, 19))",
+		"--sim-bg-reply-input": "light-dark(rgb(255, 255, 255), rgb(48, 48, 46))"
+	},
+	availableDisplayModes: ["inline", "fullscreen"],
+	fontCss: `@font-face {
+  font-family: "Anthropic Sans";
+  src: url("https://assets-proxy.anthropic.com/claude-ai/v2/assets/v1/cc27851ad-CFxw3nG7.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: normal;
+  font-display: swap;
+  font-feature-settings: "dlig" 0;
+}
+@font-face {
+  font-family: "Anthropic Sans";
+  src: url("https://assets-proxy.anthropic.com/claude-ai/v2/assets/v1/c9d3a3a49-BI1hrwN4.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: italic;
+  font-display: swap;
+  font-feature-settings: "dlig" 0;
+}`
 });
 //#endregion
-//#region ../../node_modules/.pnpm/@modelcontextprotocol+ext-apps@1.2.2_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__react-_e9bf7657371391a829fe8b4e289b253c/node_modules/@modelcontextprotocol/ext-apps/dist/src/app-bridge.js
-var G = "2026-01-26", m = require_protocol.union([require_protocol.literal("light"), require_protocol.literal("dark")]).describe("Color theme preference for the host environment."), D = require_protocol.union([
+//#region ../../node_modules/.pnpm/@modelcontextprotocol+ext-apps@1.3.1_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__react-_cd1fb28fd87e0bddd0a29eba0721855d/node_modules/@modelcontextprotocol/ext-apps/dist/src/app-bridge.js
+var G = "2026-01-26", p = require_protocol.union([require_protocol.literal("light"), require_protocol.literal("dark")]).describe("Color theme preference for the host environment."), D = require_protocol.union([
 	require_protocol.literal("inline"),
 	require_protocol.literal("fullscreen"),
 	require_protocol.literal("pip")
-]).describe("Display mode for UI presentation."), OQ = require_protocol.union([
+]).describe("Display mode for UI presentation."), IQ = require_protocol.union([
 	require_protocol.literal("--color-background-primary"),
 	require_protocol.literal("--color-background-secondary"),
 	require_protocol.literal("--color-background-tertiary"),
@@ -785,7 +877,7 @@ var G = "2026-01-26", m = require_protocol.union([require_protocol.literal("ligh
 	require_protocol.literal("--shadow-sm"),
 	require_protocol.literal("--shadow-md"),
 	require_protocol.literal("--shadow-lg")
-]).describe("CSS variable keys available to MCP apps for theming."), VQ = require_protocol.record(OQ.describe(`Style variables for theming MCP apps.
+]).describe("CSS variable keys available to MCP apps for theming."), AQ = require_protocol.record(IQ.describe(`Style variables for theming MCP apps.
 
 Individual style keys are optional - hosts may provide any subset of these values.
 Values are strings containing CSS values (colors, sizes, font stacks, etc.).
@@ -810,7 +902,7 @@ for compatibility with Zod schema generation. Both are functionally equivalent f
 require_protocol.object({ isError: require_protocol.boolean().optional().describe("True if the host failed to open the URL (e.g., due to security policy).") }).passthrough();
 require_protocol.object({ isError: require_protocol.boolean().optional().describe("True if the download failed (e.g., user cancelled or host denied).") }).passthrough();
 require_protocol.object({ isError: require_protocol.boolean().optional().describe("True if the host rejected or failed to deliver the message.") }).passthrough();
-var F = require_protocol.object({
+var L = require_protocol.object({
 	method: require_protocol.literal("ui/notifications/sandbox-proxy-ready"),
 	params: require_protocol.object({})
 }), j = require_protocol.object({
@@ -845,22 +937,25 @@ require_protocol.object({
 	method: require_protocol.literal("ui/notifications/tool-cancelled"),
 	params: require_protocol.object({ reason: require_protocol.string().optional().describe("Optional reason for the cancellation (e.g., \"user action\", \"timeout\").") })
 });
-var p = require_protocol.object({ fonts: require_protocol.string().optional() }), c = require_protocol.object({
-	variables: VQ.optional().describe("CSS variables for theming the app."),
-	css: p.optional().describe("CSS blocks that apps can inject.")
+var c = require_protocol.object({ fonts: require_protocol.string().optional() }), n = require_protocol.object({
+	variables: AQ.optional().describe("CSS variables for theming the app."),
+	css: c.optional().describe("CSS blocks that apps can inject.")
 });
 require_protocol.object({
 	method: require_protocol.literal("ui/resource-teardown"),
 	params: require_protocol.object({})
 });
-var R = require_protocol.record(require_protocol.string(), require_protocol.unknown()), O = require_protocol.object({
+var H = require_protocol.record(require_protocol.string(), require_protocol.unknown()), O = require_protocol.object({
 	text: require_protocol.object({}).optional().describe("Host supports text content blocks."),
 	image: require_protocol.object({}).optional().describe("Host supports image content blocks."),
 	audio: require_protocol.object({}).optional().describe("Host supports audio content blocks."),
 	resource: require_protocol.object({}).optional().describe("Host supports resource content blocks."),
 	resourceLink: require_protocol.object({}).optional().describe("Host supports resource link content blocks."),
 	structuredContent: require_protocol.object({}).optional().describe("Host supports structured content.")
-}), n = require_protocol.object({
+}), M = require_protocol.object({
+	method: require_protocol.literal("ui/notifications/request-teardown"),
+	params: require_protocol.object({}).optional()
+}), i = require_protocol.object({
 	experimental: require_protocol.object({}).optional().describe("Experimental features (structure TBD)."),
 	openLinks: require_protocol.object({}).optional().describe("Host supports opening external URLs."),
 	downloadFile: require_protocol.object({}).optional().describe("Host supports file downloads via ui/download-file."),
@@ -873,11 +968,11 @@ var R = require_protocol.record(require_protocol.string(), require_protocol.unkn
 	}).optional().describe("Sandbox configuration applied by the host."),
 	updateModelContext: O.optional().describe("Host accepts context updates (ui/update-model-context) to be included in the model's context for future turns."),
 	message: O.optional().describe("Host supports receiving content messages (ui/message) from the view.")
-}), i = require_protocol.object({
+}), l = require_protocol.object({
 	experimental: require_protocol.object({}).optional().describe("Experimental features (structure TBD)."),
 	tools: require_protocol.object({ listChanged: require_protocol.boolean().optional().describe("App supports tools/list_changed notifications.") }).optional().describe("App exposes MCP-style tools that the host can call."),
 	availableDisplayModes: require_protocol.array(D).optional().describe("Display modes the app supports.")
-}), M = require_protocol.object({
+}), v = require_protocol.object({
 	method: require_protocol.literal("ui/notifications/initialized"),
 	params: require_protocol.object({}).optional()
 });
@@ -906,18 +1001,18 @@ var W = require_protocol.object({
 	params: require_protocol.object({ mode: D.describe("The display mode being requested.") })
 });
 require_protocol.object({ mode: D.describe("The display mode that was actually set. May differ from requested if not supported.") }).passthrough();
-var l = require_protocol.union([require_protocol.literal("model"), require_protocol.literal("app")]).describe("Tool visibility scope - who can access the tool.");
+var r = require_protocol.union([require_protocol.literal("model"), require_protocol.literal("app")]).describe("Tool visibility scope - who can access the tool.");
 require_protocol.object({
 	resourceUri: require_protocol.string().optional(),
-	visibility: require_protocol.array(l).optional().describe(`Who can access this tool. Default: ["model", "app"]
+	visibility: require_protocol.array(r).optional().describe(`Who can access this tool. Default: ["model", "app"]
 - "model": Tool visible to and callable by the agent
 - "app": Tool callable by the app from this server only`)
 });
 require_protocol.object({ mimeTypes: require_protocol.array(require_protocol.string()).optional().describe("Array of supported MIME types for UI resources.\nMust include `\"text/html;profile=mcp-app\"` for MCP Apps support.") });
-var S = require_protocol.object({
+var C = require_protocol.object({
 	method: require_protocol.literal("ui/download-file"),
 	params: require_protocol.object({ contents: require_protocol.array(require_protocol.union([require_protocol.EmbeddedResourceSchema, require_protocol.ResourceLinkSchema])).describe("Resource contents to download — embedded (inline data) or linked (host fetches). Uses standard MCP resource types.") })
-}), C = require_protocol.object({
+}), S = require_protocol.object({
 	method: require_protocol.literal("ui/message"),
 	params: require_protocol.object({
 		role: require_protocol.literal("user").describe("Message role, currently only \"user\" is supported."),
@@ -937,13 +1032,13 @@ require_protocol.object({
 	method: require_protocol.literal("ui/notifications/tool-result"),
 	params: require_protocol.CallToolResultSchema.describe("Standard MCP tool execution result.")
 });
-var q = require_protocol.object({
+var y = require_protocol.object({
 	toolInfo: require_protocol.object({
 		id: require_protocol.RequestIdSchema.optional().describe("JSON-RPC id of the tools/call request."),
 		tool: require_protocol.ToolSchema.describe("Tool definition including name, inputSchema, etc.")
 	}).optional().describe("Metadata of the tool call that instantiated this App."),
-	theme: m.optional().describe("Current color theme preference."),
-	styles: c.optional().describe("Style configuration for theming the app."),
+	theme: p.optional().describe("Current color theme preference."),
+	styles: n.optional().describe("Style configuration for theming the app."),
 	displayMode: D.optional().describe("How the UI is currently displayed."),
 	availableDisplayModes: require_protocol.array(D).optional().describe("Display modes the host supports."),
 	containerDimensions: require_protocol.union([require_protocol.object({ height: require_protocol.number().describe("Fixed container height in pixels.") }), require_protocol.object({ maxHeight: require_protocol.union([require_protocol.number(), require_protocol._undefined()]).optional().describe("Maximum container height in pixels.") })]).and(require_protocol.union([require_protocol.object({ width: require_protocol.number().describe("Fixed container width in pixels.") }), require_protocol.object({ maxWidth: require_protocol.union([require_protocol.number(), require_protocol._undefined()]).optional().describe("Maximum container width in pixels.") })])).optional().describe(`Container dimensions. Represents the dimensions of the iframe or other
@@ -969,27 +1064,27 @@ container holding the app. Specify either width or maxWidth, and either height o
 }).passthrough();
 require_protocol.object({
 	method: require_protocol.literal("ui/notifications/host-context-changed"),
-	params: q.describe("Partial context update containing only changed fields.")
+	params: y.describe("Partial context update containing only changed fields.")
 });
-var y = require_protocol.object({
+var f = require_protocol.object({
 	method: require_protocol.literal("ui/update-model-context"),
 	params: require_protocol.object({
 		content: require_protocol.array(require_protocol.ContentBlockSchema).optional().describe("Context content blocks (text, image, etc.)."),
 		structuredContent: require_protocol.record(require_protocol.string(), require_protocol.unknown().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")
 	})
-}), f = require_protocol.object({
+}), d = require_protocol.object({
 	method: require_protocol.literal("ui/initialize"),
 	params: require_protocol.object({
 		appInfo: require_protocol.ImplementationSchema.describe("App identification (name and version)."),
-		appCapabilities: i.describe("Features and capabilities this app provides."),
+		appCapabilities: l.describe("Features and capabilities this app provides."),
 		protocolVersion: require_protocol.string().describe("Protocol version this app supports.")
 	})
 });
 require_protocol.object({
 	protocolVersion: require_protocol.string().describe("Negotiated protocol version string (e.g., \"2025-11-21\")."),
 	hostInfo: require_protocol.ImplementationSchema.describe("Host application identification and version."),
-	hostCapabilities: n.describe("Features and capabilities provided by the host."),
-	hostContext: q.describe("Rich context about the host environment.")
+	hostCapabilities: i.describe("Features and capabilities provided by the host."),
+	hostContext: y.describe("Rich context about the host environment.")
 }).passthrough();
 var N = class {
 	eventTarget;
@@ -1025,8 +1120,8 @@ var N = class {
 	sessionId;
 	setProtocolVersion;
 };
-var rQ = [G];
-var oQ = class extends require_protocol.Protocol {
+var aQ = [G];
+var tQ = class extends require_protocol.Protocol {
 	_client;
 	_hostInfo;
 	_capabilities;
@@ -1038,7 +1133,7 @@ var oQ = class extends require_protocol.Protocol {
 		this._client = X;
 		this._hostInfo = Y;
 		this._capabilities = Z;
-		this._hostContext = $?.hostContext || {}, this.setRequestHandler(f, (K) => this._oninitialize(K)), this.setRequestHandler(require_protocol.PingRequestSchema, (K, J) => {
+		this._hostContext = $?.hostContext || {}, this.setRequestHandler(d, (K) => this._oninitialize(K)), this.setRequestHandler(require_protocol.PingRequestSchema, (K, J) => {
 			return this.onping?.(K.params, J), {};
 		}), this.setRequestHandler(W, (K) => {
 			return { mode: this._hostContext.displayMode ?? "inline" };
@@ -1055,13 +1150,13 @@ var oQ = class extends require_protocol.Protocol {
 		this.setNotificationHandler(P, (Y) => X(Y.params));
 	}
 	set onsandboxready(X) {
-		this.setNotificationHandler(F, (Y) => X(Y.params));
+		this.setNotificationHandler(L, (Y) => X(Y.params));
 	}
 	set oninitialized(X) {
-		this.setNotificationHandler(M, (Y) => X(Y.params));
+		this.setNotificationHandler(v, (Y) => X(Y.params));
 	}
 	set onmessage(X) {
-		this.setRequestHandler(C, async (Y, Z) => {
+		this.setRequestHandler(S, async (Y, Z) => {
 			return X(Y.params, Z);
 		});
 	}
@@ -1071,10 +1166,13 @@ var oQ = class extends require_protocol.Protocol {
 		});
 	}
 	set ondownloadfile(X) {
-		this.setRequestHandler(S, async (Y, Z) => {
+		this.setRequestHandler(C, async (Y, Z) => {
 			return X(Y.params, Z);
 		});
 	}
+	set onrequestteardown(X) {
+		this.setNotificationHandler(M, (Y) => X(Y.params));
+	}
 	set onrequestdisplaymode(X) {
 		this.setRequestHandler(W, async (Y, Z) => {
 			return X(Y.params, Z);
@@ -1086,7 +1184,7 @@ var oQ = class extends require_protocol.Protocol {
 		});
 	}
 	set onupdatemodelcontext(X) {
-		this.setRequestHandler(y, async (Y, Z) => {
+		this.setRequestHandler(f, async (Y, Z) => {
 			return X(Y.params, Z);
 		});
 	}
@@ -1148,7 +1246,7 @@ var oQ = class extends require_protocol.Protocol {
 	async _oninitialize(X) {
 		let Y = X.params.protocolVersion;
 		return this._appCapabilities = X.params.appCapabilities, this._appInfo = X.params.appInfo, {
-			protocolVersion: rQ.includes(Y) ? Y : G,
+			protocolVersion: aQ.includes(Y) ? Y : G,
 			hostCapabilities: this.getCapabilities(),
 			hostInfo: this._hostInfo,
 			hostContext: this._hostContext
@@ -1158,7 +1256,7 @@ var oQ = class extends require_protocol.Protocol {
 		let Y = {}, Z = !1;
 		for (let $ of Object.keys(X)) {
 			let K = this._hostContext[$], J = X[$];
-			if (aQ(K, J)) continue;
+			if (sQ(K, J)) continue;
 			Y[$] = J, Z = !0;
 		}
 		if (Z) this._hostContext = X, this.sendHostContextChange(Y);
@@ -1203,7 +1301,7 @@ var oQ = class extends require_protocol.Protocol {
 		return this.request({
 			method: "ui/resource-teardown",
 			params: X
-		}, R, Y);
+		}, H, Y);
 	}
 	sendResourceTeardown = this.teardownResource;
 	async connect(X) {
@@ -1249,7 +1347,7 @@ var oQ = class extends require_protocol.Protocol {
 		return super.connect(X);
 	}
 };
-function aQ(X, Y) {
+function sQ(X, Y) {
 	return JSON.stringify(X) === JSON.stringify(Y);
 }
 //#endregion
@@ -1283,10 +1381,11 @@ var McpAppHost = class {
 	_prevDisplayMode;
 	_pendingToolInput = null;
 	_pendingToolResult = null;
+	_messageListener = null;
 	constructor(options = {}) {
 		this.options = options;
 		this._prevDisplayMode = options.hostContext?.displayMode;
-		this.bridge = new oQ(null, options.hostInfo ?? DEFAULT_HOST_INFO, options.hostCapabilities ?? DEFAULT_HOST_CAPABILITIES, { hostContext: options.hostContext });
+		this.bridge = new tQ(null, options.hostInfo ?? DEFAULT_HOST_INFO, options.hostCapabilities ?? DEFAULT_HOST_CAPABILITIES, { hostContext: options.hostContext });
 		this.bridge.oninitialized = () => {
 			this._initialized = true;
 			if (this._pendingToolInput) {
@@ -1299,38 +1398,35 @@ var McpAppHost = class {
 			}
 		};
 		this.bridge.onopenlink = async ({ url }) => {
-			console.log("[MCP App] openLink:", url);
 			if (this.options.onOpenLink) this.options.onOpenLink(url);
-			else {
-				try {
-					const parsed = new URL(url);
-					if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
-						console.warn("[MCP App] openLink blocked non-http(s) URL:", url);
-						return {};
-					}
-				} catch {
-					console.warn("[MCP App] openLink blocked invalid URL:", url);
-					return {};
-				}
-				window.open(url, "_blank");
+			else try {
+				const parsed = new URL(url);
+				if (parsed.protocol !== "http:" && parsed.protocol !== "https:") console.warn("[MCP App] openLink blocked non-http(s) URL:", url);
+				else window.open(url, "_blank");
+			} catch {
+				console.warn("[MCP App] openLink blocked invalid URL:", url);
 			}
-			return {};
+			const ack = {};
+			console.log(`%c[MCP ↓]%c host → app: %copenLink ack`, "color:#f9a8d4", "color:inherit", "color:#93c5fd", ack);
+			return ack;
 		};
 		this.bridge.onmessage = async ({ role, content }) => {
 			if (this.options.onMessage) this.options.onMessage(role, content);
-			else console.log("[MCP App] sendMessage:", {
-				role,
-				content
-			});
-			return {};
+			const ack = {};
+			console.log(`%c[MCP ↓]%c host → app: %csendMessage ack`, "color:#f9a8d4", "color:inherit", "color:#93c5fd", ack);
+			return ack;
 		};
 		this.bridge.onrequestdisplaymode = async ({ mode }) => {
 			this.options.onDisplayModeChange?.(mode);
-			return { mode };
+			const result = { mode };
+			console.log(`%c[MCP ↓]%c host → app: %crequestDisplayMode result`, "color:#f9a8d4", "color:inherit", "color:#93c5fd", result);
+			return result;
 		};
 		this.bridge.onupdatemodelcontext = async ({ content, structuredContent }) => {
 			this.options.onUpdateModelContext?.(content ?? [], structuredContent);
-			return {};
+			const ack = {};
+			console.log(`%c[MCP ↓]%c host → app: %cupdateModelContext ack`, "color:#f9a8d4", "color:inherit", "color:#93c5fd", ack);
+			return ack;
 		};
 		this.bridge.onsizechange = (params) => {
 			this.options.onSizeChanged?.(params);
@@ -1347,17 +1443,24 @@ var McpAppHost = class {
 			}
 		};
 		this.bridge.oncalltool = async (params) => {
-			if (this.options.onCallTool) return this.options.onCallTool(params);
-			console.log("[MCP App] callServerTool:", params.name, params.arguments);
-			return { content: [{
+			let result;
+			if (this.options.onCallTool) result = await this.options.onCallTool(params);
+			else result = { content: [{
 				type: "text",
 				text: `[Inspector] Tool "${params.name}" called (no handler configured)`
 			}] };
+			console.log(`%c[MCP ↓]%c host → app: %ccallServerTool result(${params.name})`, "color:#f9a8d4", "color:inherit", "color:#93c5fd", result);
+			return result;
 		};
 		this.bridge.ondownloadfile = async ({ contents }) => {
 			if (this.options.onDownloadFile) this.options.onDownloadFile(contents);
-			else console.log("[MCP App] downloadFile:", contents.length, "item(s)");
-			return {};
+			const ack = {};
+			console.log(`%c[MCP ↓]%c host → app: %cdownloadFile ack`, "color:#f9a8d4", "color:inherit", "color:#93c5fd", ack);
+			return ack;
+		};
+		this.bridge.onrequestteardown = () => {
+			if (this.options.onRequestTeardown) this.options.onRequestTeardown();
+			else console.log("[MCP App] requestTeardown (app requested close)");
 		};
 		this.bridge.onsandboxready = () => {
 			this.options.onSandboxReady?.();
@@ -1367,7 +1470,18 @@ var McpAppHost = class {
 	* Connect to an iframe's contentWindow.
 	*/
 	async connectToIframe(contentWindow) {
+		if (this._messageListener) window.removeEventListener("message", this._messageListener);
 		this._contentWindow = contentWindow;
+		this._messageListener = (event) => {
+			if (event.source !== contentWindow) return;
+			const data = event.data;
+			if (!data || typeof data !== "object") return;
+			const method = data.method;
+			if (method?.startsWith("sunpeak/") || method === "ui/notifications/sandbox-proxy-ready") return;
+			const label = method ?? (data.id != null ? `response #${data.id}` : "unknown");
+			console.log(`%c[MCP ↑]%c app → host: %c${label}`, "color:#6ee7b7", "color:inherit", "color:#93c5fd", data);
+		};
+		window.addEventListener("message", this._messageListener);
 		const transport = new N(contentWindow, contentWindow);
 		await this.bridge.connect(transport);
 	}
@@ -1402,11 +1516,12 @@ var McpAppHost = class {
 			this._fenceCleanup = cleanup;
 			window.addEventListener("message", handler);
 			try {
-				win.postMessage({
+				const fenceMsg = {
 					jsonrpc: "2.0",
 					method: "sunpeak/fence",
 					params: { fenceId: id }
-				}, "*");
+				};
+				win.postMessage(fenceMsg, "*");
 			} catch {
 				cleanup();
 				resolve();
@@ -1419,6 +1534,7 @@ var McpAppHost = class {
 	* to commit its DOM before firing onDisplayModeReady.
 	*/
 	setHostContext(context) {
+		console.log(`%c[MCP ↓]%c host → app: %csetHostContext`, "color:#f9a8d4", "color:inherit", "color:#93c5fd", context);
 		this.bridge.setHostContext(context);
 		const currentMode = context.displayMode;
 		if (currentMode && currentMode !== this._prevDisplayMode) {
@@ -1435,6 +1551,7 @@ var McpAppHost = class {
 	*/
 	sendToolInput(args) {
 		const params = { arguments: args };
+		console.log(`%c[MCP ↓]%c host → app: %csendToolInput`, "color:#f9a8d4", "color:inherit", "color:#93c5fd", params);
 		if (this._initialized) this.bridge.sendToolInput(params);
 		else this._pendingToolInput = params;
 	}
@@ -1443,6 +1560,7 @@ var McpAppHost = class {
 	* If the app hasn't initialized yet, the result is queued.
 	*/
 	sendToolResult(result) {
+		console.log(`%c[MCP ↓]%c host → app: %csendToolResult`, "color:#f9a8d4", "color:inherit", "color:#93c5fd", result);
 		if (this._initialized) this.bridge.sendToolResult(result);
 		else this._pendingToolResult = result;
 	}
@@ -1452,6 +1570,7 @@ var McpAppHost = class {
 	*/
 	sendToolInputPartial(args) {
 		const params = { arguments: args };
+		console.log(`%c[MCP ↓]%c host → app: %csendToolInputPartial`, "color:#f9a8d4", "color:inherit", "color:#93c5fd", params);
 		if (this._initialized) this.bridge.sendToolInputPartial(params);
 	}
 	/**
@@ -1460,6 +1579,7 @@ var McpAppHost = class {
 	*/
 	sendToolCancelled(reason) {
 		const params = reason ? { reason } : {};
+		console.log(`%c[MCP ↓]%c host → app: %csendToolCancelled`, "color:#f9a8d4", "color:inherit", "color:#93c5fd", params);
 		if (this._initialized) this.bridge.sendToolCancelled(params);
 	}
 	/**
@@ -1483,6 +1603,10 @@ var McpAppHost = class {
 	* Close the connection.
 	*/
 	async close() {
+		if (this._messageListener) {
+			window.removeEventListener("message", this._messageListener);
+			this._messageListener = null;
+		}
 		this._fenceCleanup?.();
 		this._fenceCleanup = null;
 		try {
@@ -1593,7 +1717,7 @@ function generateSandboxProxyHtml(platformScript) {
 <head>
 <meta name="color-scheme" content="${colorScheme}" />
 <style>
-html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
+html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; }
 iframe { border: none; width: 100%; height: 100%; display: block; }
 </style>
 </head>
@@ -1656,6 +1780,16 @@ iframe { border: none; width: 100%; height: 100%; display: block; }
         return;
       }
 
+      // Sync color-scheme on the inner iframe element when theme changes.
+      // This ensures prefers-color-scheme resolves correctly inside the app.
+      // Important: do NOT set color-scheme on the proxy's own document —
+      // changing it from the initial 'dark' causes Chrome to re-evaluate
+      // the CSS Canvas as opaque white, blocking the host's conversation
+      // background from showing through the transparent proxy.
+      if (data.method === 'ui/notifications/host-context-changed' && data.params && data.params.theme) {
+        if (innerFrame) innerFrame.style.colorScheme = data.params.theme;
+      }
+
       // Forward all other messages to the inner iframe
       if (innerWindow) {
         try { innerWindow.postMessage(data, '*'); } catch(e) { /* detached */ }
@@ -2204,6 +2338,10 @@ function parseUrlParams() {
 	const host = params.get("host") ?? void 0;
 	const prodResourcesParam = params.get("prodResources");
 	const prodResources = prodResourcesParam === "true" ? true : prodResourcesParam === "false" ? false : void 0;
+	const sidebarParam = params.get("sidebar");
+	const sidebar = sidebarParam === "false" ? false : sidebarParam === "true" ? true : void 0;
+	const devOverlayParam = params.get("devOverlay");
+	const devOverlay = devOverlayParam === "false" ? false : devOverlayParam === "true" ? true : void 0;
 	const deviceType = params.get("deviceType");
 	let platform;
 	if (deviceType === "mobile" || deviceType === "tablet") platform = "mobile";
@@ -2236,7 +2374,9 @@ function parseUrlParams() {
 		deviceCapabilities,
 		safeAreaInsets,
 		host: host ?? void 0,
-		prodResources
+		prodResources,
+		sidebar,
+		devOverlay
 	};
 }
 function useInspectorState({ simulations, defaultHost = "chatgpt" }) {
@@ -2487,7 +2627,9 @@ function useInspectorState({ simulations, defaultHost = "chatgpt" }) {
 		permissions: resourceMeta?.permissions,
 		prefersBorder: resourceMeta?.prefersBorder ?? false,
 		urlTool: urlParams.tool,
-		urlProdResources: urlParams.prodResources
+		urlProdResources: urlParams.prodResources,
+		urlSidebar: urlParams.sidebar,
+		urlDevOverlay: urlParams.devOverlay
 	};
 }
 //#endregion
@@ -2508,15 +2650,17 @@ function useMcpConnection(initialServerUrl) {
 	const [error, setError] = (0, react.useState)();
 	const [simulations, setSimulations] = (0, react.useState)();
 	const [hasReconnected, setHasReconnected] = (0, react.useState)(false);
-	const reconnect = (0, react.useCallback)(async (url) => {
+	const reconnect = (0, react.useCallback)(async (url, auth) => {
 		setHasReconnected(true);
 		setStatus("connecting");
 		setError(void 0);
 		try {
+			const body = { url };
+			if (auth && auth.type !== "none") body.auth = auth;
 			const res = await fetch("/__sunpeak/connect", {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ url })
+				body: JSON.stringify(body)
 			});
 			if (!res.ok) {
 				let message = `Connection failed (${res.status})`;
@@ -2535,6 +2679,12 @@ function useMcpConnection(initialServerUrl) {
 			setSimulations(void 0);
 		}
 	}, []);
+	const setConnected = (0, react.useCallback)((sims) => {
+		setHasReconnected(true);
+		setStatus("connected");
+		setError(void 0);
+		setSimulations(sims);
+	}, []);
 	(0, react.useEffect)(() => {
 		if (!initialServerUrl) return;
 		let cancelled = false;
@@ -2560,7 +2710,8 @@ function useMcpConnection(initialServerUrl) {
 		error,
 		simulations,
 		hasReconnected,
-		reconnect
+		reconnect,
+		setConnected
 	};
 }
 //#endregion
@@ -3044,22 +3195,146 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 		defaultHost
 	});
 	const [serverUrl, setServerUrl] = react.useState(mcpServerUrl ?? "");
+	const [authType, setAuthType] = react.useState("none");
+	const [bearerToken, setBearerToken] = react.useState("");
+	const [oauthScopes, setOauthScopes] = react.useState("");
+	const [oauthClientId, setOauthClientId] = react.useState("");
+	const [oauthClientSecret, setOauthClientSecret] = react.useState("");
+	const [oauthStatus, setOauthStatus] = react.useState("none");
+	const [oauthError, setOauthError] = react.useState();
 	const connection = useMcpConnection(mcpServerUrl || void 0);
 	const [prodResources, setProdResources] = react.useState(state.urlProdResources ?? 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 checkTimerRef = react.useRef(void 0);
+	const oauthCleanupRef = react.useRef(void 0);
 	react.useEffect(() => {
 		state.setSelectedSimulationName(effectiveSimulationName);
 	}, [effectiveSimulationName]);
+	const currentAuthConfig = react.useMemo(() => {
+		if (authType === "bearer" && bearerToken) return {
+			type: "bearer",
+			bearerToken
+		};
+		if (authType === "oauth") return { type: "oauth" };
+	}, [authType, bearerToken]);
 	const prevServerUrlRef = react.useRef(serverUrl);
 	react.useEffect(() => {
 		const urlChanged = serverUrl !== prevServerUrlRef.current;
 		prevServerUrlRef.current = serverUrl;
 		if (!urlChanged) return;
-		if (serverUrl) connection.reconnect(serverUrl);
-	}, [serverUrl, connection.reconnect]);
+		if (serverUrl) {
+			setOauthStatus("none");
+			setOauthError(void 0);
+			if (authType === "oauth") return;
+			connection.reconnect(serverUrl, currentAuthConfig);
+		}
+	}, [
+		serverUrl,
+		connection.reconnect,
+		authType,
+		currentAuthConfig
+	]);
+	const handleStartOAuth = react.useCallback(async () => {
+		if (!serverUrl || demoMode) return;
+		setOauthStatus("authorizing");
+		setOauthError(void 0);
+		const popup = window.open("about:blank", `sunpeak-oauth-${Date.now()}`, "width=600,height=700,popup=yes");
+		try {
+			const res = await fetch("/__sunpeak/oauth/start", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					url: serverUrl,
+					scope: oauthScopes || void 0,
+					clientId: oauthClientId || void 0,
+					clientSecret: oauthClientSecret || void 0
+				})
+			});
+			if (!res.ok) {
+				let message = `OAuth start failed (${res.status})`;
+				try {
+					const json = await res.json();
+					if (json.error) message = json.error;
+				} catch {}
+				throw new Error(message);
+			}
+			const data = await res.json();
+			if (data.error) {
+				popup?.close();
+				setOauthError(data.error);
+				setOauthStatus("error");
+				return;
+			}
+			if (data.status === "authorized") {
+				popup?.close();
+				setOauthStatus("authorized");
+				connection.setConnected(data.simulations);
+				return;
+			}
+			if (data.status === "redirect" && data.authUrl) {
+				if (!popup || popup.closed) {
+					setOauthError("Popup was blocked. Allow popups for this site and try again.");
+					setOauthStatus("error");
+					return;
+				}
+				popup.location.href = data.authUrl;
+				let checkClosed;
+				let bc;
+				const cleanup = () => {
+					clearInterval(checkClosed);
+					window.removeEventListener("message", handleMessage);
+					bc?.close();
+					oauthCleanupRef.current = void 0;
+				};
+				oauthCleanupRef.current?.();
+				oauthCleanupRef.current = cleanup;
+				const handleOAuthResult = (result) => {
+					cleanup();
+					if (result.error) {
+						setOauthError(result.errorDescription || result.error);
+						setOauthStatus("error");
+					} else if (result.success) {
+						setOauthStatus("authorized");
+						connection.setConnected(result.simulations);
+					}
+				};
+				const handleMessage = (event) => {
+					if (event.origin !== window.location.origin) return;
+					if (event.data?.type !== "sunpeak-oauth-callback") return;
+					handleOAuthResult(event.data);
+				};
+				window.addEventListener("message", handleMessage);
+				if (typeof BroadcastChannel !== "undefined") {
+					bc = new BroadcastChannel("sunpeak-oauth");
+					bc.onmessage = (event) => {
+						if (event.data?.type !== "sunpeak-oauth-callback") return;
+						handleOAuthResult(event.data);
+					};
+				}
+				checkClosed = setInterval(() => {
+					if (popup?.closed) {
+						cleanup();
+						setOauthStatus((prev) => prev === "authorizing" ? "none" : prev);
+					}
+				}, 500);
+			}
+		} catch (err) {
+			popup?.close();
+			setOauthError(err instanceof Error ? err.message : String(err));
+			setOauthStatus("error");
+		}
+	}, [
+		serverUrl,
+		oauthScopes,
+		oauthClientId,
+		oauthClientSecret,
+		demoMode,
+		connection
+	]);
 	react.useEffect(() => {
 		if (connection.simulations) setSimulations(connection.simulations);
 		else if (connection.status === "error" && connection.hasReconnected) setSimulations({});
@@ -3091,33 +3366,57 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 	react.useEffect(() => {
 		setHasRun(false);
 	}, [effectiveSimulationName]);
-	react.useEffect(() => () => clearTimeout(checkTimerRef.current), []);
+	react.useEffect(() => () => {
+		clearTimeout(checkTimerRef.current);
+		oauthCleanupRef.current?.();
+	}, []);
 	const handleRun = react.useCallback(async () => {
 		const caller = onCallToolDirect ?? onCallTool;
 		const sim = simulations[effectiveSimulationName];
 		if (!caller || !sim) return;
 		const toolName = sim.tool.name;
 		setIsRunning(true);
+		const startTime = performance.now();
 		try {
 			const result = await caller({
 				name: toolName,
 				arguments: state.toolInput
 			});
-			state.setToolResult(result);
-			state.setToolResultJson(JSON.stringify(result, null, 2));
+			const clientMs = Math.round((performance.now() - startTime) * 10) / 10;
+			const resultMeta = result?._meta;
+			const serverMs = (resultMeta?._sunpeak)?.requestTimeMs;
+			const durationMs = typeof serverMs === "number" ? serverMs : clientMs;
+			const resultWithTiming = {
+				...result,
+				_meta: {
+					...resultMeta,
+					_sunpeak: { requestTimeMs: durationMs }
+				}
+			};
+			state.setToolResult(resultWithTiming);
+			const displayResult = resultMeta?._sunpeak ? (() => {
+				const { _sunpeak: _, ...cleanMeta } = resultMeta;
+				const clean = { ...result };
+				clean._meta = Object.keys(cleanMeta).length > 0 ? cleanMeta : void 0;
+				if (clean._meta === void 0) delete clean._meta;
+				return clean;
+			})() : result;
+			state.setToolResultJson(JSON.stringify(displayResult, null, 2));
 			state.setToolResultError("");
 			setHasRun(true);
 			setShowCheck(true);
 			clearTimeout(checkTimerRef.current);
 			checkTimerRef.current = setTimeout(() => setShowCheck(false), 2e3);
 		} catch (err) {
+			const durationMs = Math.round((performance.now() - startTime) * 10) / 10;
 			const message = err instanceof Error ? err.message : String(err);
 			state.setToolResult({
 				content: [{
 					type: "text",
 					text: `Error: ${message}`
 				}],
-				isError: true
+				isError: true,
+				_meta: { _sunpeak: { requestTimeMs: durationMs } }
 			});
 			state.setToolResultJson(JSON.stringify({
 				content: [{
@@ -3146,16 +3445,26 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 		const ctx = { ...state.hostContext };
 		if (styleVars) ctx.styles = { variables: styleVars };
 		if (userAgent) ctx.userAgent = userAgent;
+		if (activeShell?.availableDisplayModes) ctx.availableDisplayModes = activeShell.availableDisplayModes;
 		return ctx;
 	}, [state.hostContext, activeShell]);
+	const { displayMode, setDisplayMode } = state;
 	react.useEffect(() => {
+		const modes = activeShell?.availableDisplayModes;
+		if (modes && !modes.includes(displayMode)) setDisplayMode("inline");
+	}, [
+		activeShell,
+		displayMode,
+		setDisplayMode
+	]);
+	react.useLayoutEffect(() => {
 		const vars = activeShell?.styleVariables;
 		if (!vars) return;
 		const root = document.documentElement;
 		for (const [key, value] of Object.entries(vars)) if (value) root.style.setProperty(key, value);
 	}, [activeShell]);
 	const prevPageStyleKeysRef = react.useRef([]);
-	react.useEffect(() => {
+	react.useLayoutEffect(() => {
 		const root = document.documentElement;
 		for (const key of prevPageStyleKeysRef.current) root.style.removeProperty(key);
 		const pageStyles = activeShell?.pageStyles;
@@ -3168,6 +3477,22 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 			prevPageStyleKeysRef.current = keys;
 		} else prevPageStyleKeysRef.current = [];
 	}, [activeShell]);
+	react.useLayoutEffect(() => {
+		const fontCss = activeShell?.fontCss;
+		const id = "sunpeak-host-fonts";
+		const existing = document.getElementById(id);
+		if (!fontCss) {
+			existing?.remove();
+			return;
+		}
+		if (existing) existing.textContent = fontCss;
+		else {
+			const style = document.createElement("style");
+			style.id = id;
+			style.textContent = fontCss;
+			document.head.appendChild(style);
+		}
+	}, [activeShell]);
 	const handleCallTool = react.useCallback((params) => {
 		if (activeSimulationName) {
 			const mock = simulations[activeSimulationName]?.serverTools?.[params.name];
@@ -3226,7 +3551,8 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 			clearTimeout(timer);
 		};
 	}, [prodResourcesPath]);
-	const effectiveResourceUrl = (prodResourcesPath && prodResourcesReady ? prodResourcesPath : void 0) ?? state.resourceUrl;
+	const baseResourceUrl = (prodResourcesPath && prodResourcesReady ? prodResourcesPath : void 0) ?? state.resourceUrl;
+	const effectiveResourceUrl = baseResourceUrl && !showDevOverlay ? `${baseResourceUrl}${baseResourceUrl.includes("?") ? "&" : "?"}devOverlay=false` : baseResourceUrl;
 	const prodResourcesLoading = !!prodResourcesPath && !prodResourcesReady;
 	const hasTools = toolNames.length > 0;
 	const showEmptyState = !(activeSimulationName !== null && currentSim?.toolResult != null) && !hasRun;
@@ -3344,6 +3670,26 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M0 0L10 6L0 12V0Z" })
 		}), "Run"]
 	}) : void 0;
+	const conversationContent = ShellConversation ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShellConversation, {
+		screenWidth: state.screenWidth,
+		displayMode: state.displayMode,
+		platform: state.platform,
+		onRequestDisplayMode: state.handleDisplayModeChange,
+		appName,
+		appIcon,
+		userMessage,
+		onContentWidthChange: state.handleContentWidthChange,
+		headerAction: runButton,
+		children: content
+	}) : content;
+	if (!showSidebar) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeProvider, {
+		theme: state.theme,
+		applyTheme,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex h-screen w-screen",
+			children: conversationContent
+		})
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeProvider, {
 		theme: state.theme,
 		applyTheme,
@@ -3371,6 +3717,92 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 							disabled: demoMode
 						})
 					}),
+					!demoMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCollapsibleControl, {
+						label: "Authentication",
+						defaultCollapsed: authType === "none",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "space-y-1",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarSelect, {
+									value: authType,
+									onChange: (value) => {
+										const newType = value;
+										setAuthType(newType);
+										setOauthStatus("none");
+										setOauthError(void 0);
+										if (newType === "none" && serverUrl) connection.reconnect(serverUrl);
+									},
+									options: [
+										{
+											value: "none",
+											label: "None"
+										},
+										{
+											value: "bearer",
+											label: "Bearer Token"
+										},
+										{
+											value: "oauth",
+											label: "OAuth"
+										}
+									]
+								}),
+								authType === "bearer" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+									type: "password",
+									value: bearerToken,
+									onChange: (value) => {
+										setBearerToken(value);
+										if (serverUrl && value) connection.reconnect(serverUrl, {
+											type: "bearer",
+											bearerToken: value
+										});
+									},
+									applyOnBlur: true,
+									placeholder: "Paste your token"
+								}),
+								authType === "oauth" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "space-y-1",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+											value: oauthClientId,
+											onChange: setOauthClientId,
+											applyOnBlur: true,
+											placeholder: "Client ID (optional)"
+										}),
+										oauthClientId && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+											type: "password",
+											value: oauthClientSecret,
+											onChange: setOauthClientSecret,
+											applyOnBlur: true,
+											placeholder: "Client Secret (optional)"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarInput, {
+											value: oauthScopes,
+											onChange: setOauthScopes,
+											applyOnBlur: true,
+											placeholder: "Scopes (optional)"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											onClick: handleStartOAuth,
+											disabled: !serverUrl || oauthStatus === "authorizing",
+											className: "w-full h-7 text-xs rounded-md px-2 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+											style: {
+												backgroundColor: oauthStatus === "authorized" ? "#22c55e" : "var(--color-text-primary)",
+												color: "var(--color-background-primary)"
+											},
+											children: oauthStatus === "authorizing" ? "Authorizing…" : oauthStatus === "authorized" ? "Authorized" : "Authorize"
+										}),
+										oauthError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: "text-[9px]",
+											style: { color: "var(--color-text-danger, #dc2626)" },
+											children: oauthError
+										})
+									]
+								})
+							]
+						})
+					}, `auth-${authType === "none" ? "none" : "active"}`),
 					!hideInspectorModes && !demoMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarCheckbox, {
 						checked: prodResources,
 						onChange: setProdResources,
@@ -3526,7 +3958,7 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 												value: "fullscreen",
 												label: "Full"
 											}
-										]
+										].filter((opt) => !activeShell?.availableDisplayModes || activeShell.availableDisplayModes.includes(opt.value))
 									})
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3790,18 +4222,7 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 					})
 				]
 			}),
-			children: ShellConversation ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShellConversation, {
-				screenWidth: state.screenWidth,
-				displayMode: state.displayMode,
-				platform: state.platform,
-				onRequestDisplayMode: state.handleDisplayModeChange,
-				appName,
-				appIcon,
-				userMessage,
-				onContentWidthChange: state.handleContentWidthChange,
-				headerAction: runButton,
-				children: content
-			}) : content
+			children: conversationContent
 		})
 	});
 }
@@ -3939,4 +4360,4 @@ Object.defineProperty(exports, "useThemeContext", {
 	}
 });
 
-//# sourceMappingURL=inspector-CByJjmPD.cjs.map
+//# sourceMappingURL=inspector-CKc58UuI.cjs.map