sunpeak 0.18.6 → 0.18.9

package/dist/{inspector-url-7qhtJwY6.cjs → inspector-url-C3LTKgXt.cjs}

@@ -38,6 +38,8 @@ function createInspectorUrl(params, basePath = "/") {
 	if (params.safeAreaLeft !== void 0) searchParams.set("safeAreaLeft", String(params.safeAreaLeft));
 	if (params.safeAreaRight !== void 0) searchParams.set("safeAreaRight", String(params.safeAreaRight));
 	if (params.prodResources !== void 0) searchParams.set("prodResources", String(params.prodResources));
+	if (params.sidebar !== void 0) searchParams.set("sidebar", String(params.sidebar));
+	if (params.devOverlay !== void 0) searchParams.set("devOverlay", String(params.devOverlay));
 	const queryString = searchParams.toString();
 	return queryString ? `${basePath}?${queryString}` : basePath;
 }
@@ -49,4 +51,4 @@ Object.defineProperty(exports, "createInspectorUrl", {
 	}
 });
 
-//# sourceMappingURL=inspector-url-7qhtJwY6.cjs.map
+//# sourceMappingURL=inspector-url-C3LTKgXt.cjs.map

package/dist/inspector-url-C3LTKgXt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspector-url-C3LTKgXt.cjs","names":[],"sources":["../src/inspector/inspector-url.ts"],"sourcesContent":["import type { Theme, DisplayMode, DeviceType } from '../types/runtime';\n\n/**\n * Strongly-typed URL parameters for the Inspector.\n *\n * Use with `createInspectorUrl()` to generate type-safe URL paths for e2e tests.\n *\n * The two primary selectors mirror the sidebar dropdowns:\n * - `tool` — which tool to inspect (Tool dropdown)\n * - `simulation` — which simulation fixture to load (Simulation dropdown)\n *\n * When only `tool` is specified, no mock data is loaded (\"Press Run\" state).\n * When `simulation` is specified, mock data from that fixture renders immediately.\n * When both are specified, the tool is selected and the simulation provides mock data.\n *\n * @example\n * ```ts\n * import { createInspectorUrl } from 'sunpeak/inspector';\n *\n * // Select a tool with no mock data (user must click Run):\n * await page.goto(createInspectorUrl({ tool: 'show-albums' }));\n *\n * // Select a simulation (mock data renders immediately):\n * await page.goto(createInspectorUrl({ simulation: 'show-albums' }));\n *\n * // Full options:\n * await page.goto(createInspectorUrl({\n *   simulation: 'show-albums',\n *   theme: 'dark',\n *   host: 'claude',\n * }));\n * ```\n */\nexport interface InspectorUrlParams {\n  /**\n   * The simulation name to load (e.g., 'show-albums', 'review-diff').\n   * Corresponds to the simulation JSON filename without the `.json` extension.\n   * When specified, mock data from the simulation fixture renders immediately.\n   */\n  simulation?: string;\n\n  /**\n   * The tool name to select (e.g., 'show-albums', 'show-map').\n   * When specified without `simulation`, no mock data is loaded — the user\n   * must click Run to call the real handler.\n   */\n  tool?: string;\n\n  /**\n   * The host shell to use (e.g., 'chatgpt', 'claude').\n   * Switches conversation chrome, theming, and reported host info/capabilities.\n   * @default 'chatgpt'\n   */\n  host?: string;\n\n  /**\n   * The color theme for the inspector.\n   * @default 'dark'\n   */\n  theme?: Theme;\n\n  /**\n   * The display mode for the widget.\n   * - 'inline': Embedded in the conversation\n   * - 'pip': Picture-in-picture mode with max height\n   * - 'fullscreen': Full screen overlay\n   * @default 'inline'\n   */\n  displayMode?: DisplayMode;\n\n  /**\n   * The locale for the inspector (e.g., 'en-US', 'ja-JP').\n   * @default 'en-US'\n   */\n  locale?: string;\n\n  /**\n   * Maximum height in pixels for PiP mode.\n   * Only applicable when displayMode is 'pip'.\n   */\n  maxHeight?: number;\n\n  /**\n   * The device type to simulate.\n   * Affects default hover/touch capabilities.\n   */\n  deviceType?: DeviceType;\n\n  /**\n   * Whether the device supports hover interactions.\n   * @default true for desktop, false for mobile/tablet\n   */\n  hover?: boolean;\n\n  /**\n   * Whether the device supports touch interactions.\n   * @default false for desktop, true for mobile/tablet\n   */\n  touch?: boolean;\n\n  /**\n   * Safe area inset from the top of the screen (in pixels).\n   * Used for devices with notches or status bars.\n   */\n  safeAreaTop?: number;\n\n  /**\n   * Safe area inset from the bottom of the screen (in pixels).\n   * Used for devices with home indicators.\n   */\n  safeAreaBottom?: number;\n\n  /**\n   * Safe area inset from the left of the screen (in pixels).\n   */\n  safeAreaLeft?: number;\n\n  /**\n   * Safe area inset from the right of the screen (in pixels).\n   */\n  safeAreaRight?: number;\n\n  /**\n   * Enable Prod Resources mode (production dist/ bundles instead of HMR).\n   */\n  prodResources?: boolean;\n\n  /**\n   * Show the inspector sidebar. Useful for headless testing or embedding\n   * the inspector as a pure resource viewer.\n   * @default true\n   */\n  sidebar?: boolean;\n\n  /**\n   * Show the dev overlay (resource timestamp + tool timing) inside resources.\n   * Set to false to hide it during e2e tests so it doesn't interfere with\n   * element assertions.\n   * @default true\n   */\n  devOverlay?: boolean;\n}\n\n/**\n * Creates a URL path with query parameters for the Inspector.\n *\n * @param params - The inspector parameters to encode\n * @param basePath - The base path for the URL (default: '/')\n * @returns A URL path string with encoded query parameters\n *\n * @example\n * ```ts\n * // Tool only (no mock data, \"Press Run\" state):\n * createInspectorUrl({ tool: 'show-albums' })\n * // Returns: '/?tool=show-albums'\n *\n * // Simulation (mock data renders immediately):\n * createInspectorUrl({ simulation: 'show-albums', theme: 'light' })\n * // Returns: '/?simulation=show-albums&theme=light'\n *\n * // Both tool and simulation:\n * createInspectorUrl({ tool: 'show-albums', simulation: 'show-albums' })\n * // Returns: '/?tool=show-albums&simulation=show-albums'\n * ```\n */\nexport function createInspectorUrl(params: InspectorUrlParams, basePath = '/'): string {\n  const searchParams = new URLSearchParams();\n\n  if (params.tool !== undefined) {\n    searchParams.set('tool', params.tool);\n  }\n  if (params.simulation !== undefined) {\n    searchParams.set('simulation', params.simulation);\n  }\n  if (params.host !== undefined) {\n    searchParams.set('host', params.host);\n  }\n  if (params.theme !== undefined) {\n    searchParams.set('theme', params.theme);\n  }\n  if (params.displayMode !== undefined) {\n    searchParams.set('displayMode', params.displayMode);\n  }\n  if (params.locale !== undefined) {\n    searchParams.set('locale', params.locale);\n  }\n  if (params.maxHeight !== undefined) {\n    searchParams.set('maxHeight', String(params.maxHeight));\n  }\n  if (params.deviceType !== undefined) {\n    searchParams.set('deviceType', params.deviceType);\n  }\n  if (params.hover !== undefined) {\n    searchParams.set('hover', String(params.hover));\n  }\n  if (params.touch !== undefined) {\n    searchParams.set('touch', String(params.touch));\n  }\n  if (params.safeAreaTop !== undefined) {\n    searchParams.set('safeAreaTop', String(params.safeAreaTop));\n  }\n  if (params.safeAreaBottom !== undefined) {\n    searchParams.set('safeAreaBottom', String(params.safeAreaBottom));\n  }\n  if (params.safeAreaLeft !== undefined) {\n    searchParams.set('safeAreaLeft', String(params.safeAreaLeft));\n  }\n  if (params.safeAreaRight !== undefined) {\n    searchParams.set('safeAreaRight', String(params.safeAreaRight));\n  }\n  if (params.prodResources !== undefined) {\n    searchParams.set('prodResources', String(params.prodResources));\n  }\n  if (params.sidebar !== undefined) {\n    searchParams.set('sidebar', String(params.sidebar));\n  }\n  if (params.devOverlay !== undefined) {\n    searchParams.set('devOverlay', String(params.devOverlay));\n  }\n\n  const queryString = searchParams.toString();\n  return queryString ? `${basePath}?${queryString}` : basePath;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqKA,SAAgB,mBAAmB,QAA4B,WAAW,KAAa;CACrF,MAAM,eAAe,IAAI,iBAAiB;AAE1C,KAAI,OAAO,SAAS,KAAA,EAClB,cAAa,IAAI,QAAQ,OAAO,KAAK;AAEvC,KAAI,OAAO,eAAe,KAAA,EACxB,cAAa,IAAI,cAAc,OAAO,WAAW;AAEnD,KAAI,OAAO,SAAS,KAAA,EAClB,cAAa,IAAI,QAAQ,OAAO,KAAK;AAEvC,KAAI,OAAO,UAAU,KAAA,EACnB,cAAa,IAAI,SAAS,OAAO,MAAM;AAEzC,KAAI,OAAO,gBAAgB,KAAA,EACzB,cAAa,IAAI,eAAe,OAAO,YAAY;AAErD,KAAI,OAAO,WAAW,KAAA,EACpB,cAAa,IAAI,UAAU,OAAO,OAAO;AAE3C,KAAI,OAAO,cAAc,KAAA,EACvB,cAAa,IAAI,aAAa,OAAO,OAAO,UAAU,CAAC;AAEzD,KAAI,OAAO,eAAe,KAAA,EACxB,cAAa,IAAI,cAAc,OAAO,WAAW;AAEnD,KAAI,OAAO,UAAU,KAAA,EACnB,cAAa,IAAI,SAAS,OAAO,OAAO,MAAM,CAAC;AAEjD,KAAI,OAAO,UAAU,KAAA,EACnB,cAAa,IAAI,SAAS,OAAO,OAAO,MAAM,CAAC;AAEjD,KAAI,OAAO,gBAAgB,KAAA,EACzB,cAAa,IAAI,eAAe,OAAO,OAAO,YAAY,CAAC;AAE7D,KAAI,OAAO,mBAAmB,KAAA,EAC5B,cAAa,IAAI,kBAAkB,OAAO,OAAO,eAAe,CAAC;AAEnE,KAAI,OAAO,iBAAiB,KAAA,EAC1B,cAAa,IAAI,gBAAgB,OAAO,OAAO,aAAa,CAAC;AAE/D,KAAI,OAAO,kBAAkB,KAAA,EAC3B,cAAa,IAAI,iBAAiB,OAAO,OAAO,cAAc,CAAC;AAEjE,KAAI,OAAO,kBAAkB,KAAA,EAC3B,cAAa,IAAI,iBAAiB,OAAO,OAAO,cAAc,CAAC;AAEjE,KAAI,OAAO,YAAY,KAAA,EACrB,cAAa,IAAI,WAAW,OAAO,OAAO,QAAQ,CAAC;AAErD,KAAI,OAAO,eAAe,KAAA,EACxB,cAAa,IAAI,cAAc,OAAO,OAAO,WAAW,CAAC;CAG3D,MAAM,cAAc,aAAa,UAAU;AAC3C,QAAO,cAAc,GAAG,SAAS,GAAG,gBAAgB"}

package/dist/{inspector-url-DuEFmxLP.js → inspector-url-CyQcuBI9.js}

@@ -38,10 +38,12 @@ function createInspectorUrl(params, basePath = "/") {
 	if (params.safeAreaLeft !== void 0) searchParams.set("safeAreaLeft", String(params.safeAreaLeft));
 	if (params.safeAreaRight !== void 0) searchParams.set("safeAreaRight", String(params.safeAreaRight));
 	if (params.prodResources !== void 0) searchParams.set("prodResources", String(params.prodResources));
+	if (params.sidebar !== void 0) searchParams.set("sidebar", String(params.sidebar));
+	if (params.devOverlay !== void 0) searchParams.set("devOverlay", String(params.devOverlay));
 	const queryString = searchParams.toString();
 	return queryString ? `${basePath}?${queryString}` : basePath;
 }
 //#endregion
 export { createInspectorUrl as t };
 
-//# sourceMappingURL=inspector-url-DuEFmxLP.js.map
+//# sourceMappingURL=inspector-url-CyQcuBI9.js.map

package/dist/inspector-url-CyQcuBI9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspector-url-CyQcuBI9.js","names":[],"sources":["../src/inspector/inspector-url.ts"],"sourcesContent":["import type { Theme, DisplayMode, DeviceType } from '../types/runtime';\n\n/**\n * Strongly-typed URL parameters for the Inspector.\n *\n * Use with `createInspectorUrl()` to generate type-safe URL paths for e2e tests.\n *\n * The two primary selectors mirror the sidebar dropdowns:\n * - `tool` — which tool to inspect (Tool dropdown)\n * - `simulation` — which simulation fixture to load (Simulation dropdown)\n *\n * When only `tool` is specified, no mock data is loaded (\"Press Run\" state).\n * When `simulation` is specified, mock data from that fixture renders immediately.\n * When both are specified, the tool is selected and the simulation provides mock data.\n *\n * @example\n * ```ts\n * import { createInspectorUrl } from 'sunpeak/inspector';\n *\n * // Select a tool with no mock data (user must click Run):\n * await page.goto(createInspectorUrl({ tool: 'show-albums' }));\n *\n * // Select a simulation (mock data renders immediately):\n * await page.goto(createInspectorUrl({ simulation: 'show-albums' }));\n *\n * // Full options:\n * await page.goto(createInspectorUrl({\n *   simulation: 'show-albums',\n *   theme: 'dark',\n *   host: 'claude',\n * }));\n * ```\n */\nexport interface InspectorUrlParams {\n  /**\n   * The simulation name to load (e.g., 'show-albums', 'review-diff').\n   * Corresponds to the simulation JSON filename without the `.json` extension.\n   * When specified, mock data from the simulation fixture renders immediately.\n   */\n  simulation?: string;\n\n  /**\n   * The tool name to select (e.g., 'show-albums', 'show-map').\n   * When specified without `simulation`, no mock data is loaded — the user\n   * must click Run to call the real handler.\n   */\n  tool?: string;\n\n  /**\n   * The host shell to use (e.g., 'chatgpt', 'claude').\n   * Switches conversation chrome, theming, and reported host info/capabilities.\n   * @default 'chatgpt'\n   */\n  host?: string;\n\n  /**\n   * The color theme for the inspector.\n   * @default 'dark'\n   */\n  theme?: Theme;\n\n  /**\n   * The display mode for the widget.\n   * - 'inline': Embedded in the conversation\n   * - 'pip': Picture-in-picture mode with max height\n   * - 'fullscreen': Full screen overlay\n   * @default 'inline'\n   */\n  displayMode?: DisplayMode;\n\n  /**\n   * The locale for the inspector (e.g., 'en-US', 'ja-JP').\n   * @default 'en-US'\n   */\n  locale?: string;\n\n  /**\n   * Maximum height in pixels for PiP mode.\n   * Only applicable when displayMode is 'pip'.\n   */\n  maxHeight?: number;\n\n  /**\n   * The device type to simulate.\n   * Affects default hover/touch capabilities.\n   */\n  deviceType?: DeviceType;\n\n  /**\n   * Whether the device supports hover interactions.\n   * @default true for desktop, false for mobile/tablet\n   */\n  hover?: boolean;\n\n  /**\n   * Whether the device supports touch interactions.\n   * @default false for desktop, true for mobile/tablet\n   */\n  touch?: boolean;\n\n  /**\n   * Safe area inset from the top of the screen (in pixels).\n   * Used for devices with notches or status bars.\n   */\n  safeAreaTop?: number;\n\n  /**\n   * Safe area inset from the bottom of the screen (in pixels).\n   * Used for devices with home indicators.\n   */\n  safeAreaBottom?: number;\n\n  /**\n   * Safe area inset from the left of the screen (in pixels).\n   */\n  safeAreaLeft?: number;\n\n  /**\n   * Safe area inset from the right of the screen (in pixels).\n   */\n  safeAreaRight?: number;\n\n  /**\n   * Enable Prod Resources mode (production dist/ bundles instead of HMR).\n   */\n  prodResources?: boolean;\n\n  /**\n   * Show the inspector sidebar. Useful for headless testing or embedding\n   * the inspector as a pure resource viewer.\n   * @default true\n   */\n  sidebar?: boolean;\n\n  /**\n   * Show the dev overlay (resource timestamp + tool timing) inside resources.\n   * Set to false to hide it during e2e tests so it doesn't interfere with\n   * element assertions.\n   * @default true\n   */\n  devOverlay?: boolean;\n}\n\n/**\n * Creates a URL path with query parameters for the Inspector.\n *\n * @param params - The inspector parameters to encode\n * @param basePath - The base path for the URL (default: '/')\n * @returns A URL path string with encoded query parameters\n *\n * @example\n * ```ts\n * // Tool only (no mock data, \"Press Run\" state):\n * createInspectorUrl({ tool: 'show-albums' })\n * // Returns: '/?tool=show-albums'\n *\n * // Simulation (mock data renders immediately):\n * createInspectorUrl({ simulation: 'show-albums', theme: 'light' })\n * // Returns: '/?simulation=show-albums&theme=light'\n *\n * // Both tool and simulation:\n * createInspectorUrl({ tool: 'show-albums', simulation: 'show-albums' })\n * // Returns: '/?tool=show-albums&simulation=show-albums'\n * ```\n */\nexport function createInspectorUrl(params: InspectorUrlParams, basePath = '/'): string {\n  const searchParams = new URLSearchParams();\n\n  if (params.tool !== undefined) {\n    searchParams.set('tool', params.tool);\n  }\n  if (params.simulation !== undefined) {\n    searchParams.set('simulation', params.simulation);\n  }\n  if (params.host !== undefined) {\n    searchParams.set('host', params.host);\n  }\n  if (params.theme !== undefined) {\n    searchParams.set('theme', params.theme);\n  }\n  if (params.displayMode !== undefined) {\n    searchParams.set('displayMode', params.displayMode);\n  }\n  if (params.locale !== undefined) {\n    searchParams.set('locale', params.locale);\n  }\n  if (params.maxHeight !== undefined) {\n    searchParams.set('maxHeight', String(params.maxHeight));\n  }\n  if (params.deviceType !== undefined) {\n    searchParams.set('deviceType', params.deviceType);\n  }\n  if (params.hover !== undefined) {\n    searchParams.set('hover', String(params.hover));\n  }\n  if (params.touch !== undefined) {\n    searchParams.set('touch', String(params.touch));\n  }\n  if (params.safeAreaTop !== undefined) {\n    searchParams.set('safeAreaTop', String(params.safeAreaTop));\n  }\n  if (params.safeAreaBottom !== undefined) {\n    searchParams.set('safeAreaBottom', String(params.safeAreaBottom));\n  }\n  if (params.safeAreaLeft !== undefined) {\n    searchParams.set('safeAreaLeft', String(params.safeAreaLeft));\n  }\n  if (params.safeAreaRight !== undefined) {\n    searchParams.set('safeAreaRight', String(params.safeAreaRight));\n  }\n  if (params.prodResources !== undefined) {\n    searchParams.set('prodResources', String(params.prodResources));\n  }\n  if (params.sidebar !== undefined) {\n    searchParams.set('sidebar', String(params.sidebar));\n  }\n  if (params.devOverlay !== undefined) {\n    searchParams.set('devOverlay', String(params.devOverlay));\n  }\n\n  const queryString = searchParams.toString();\n  return queryString ? `${basePath}?${queryString}` : basePath;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqKA,SAAgB,mBAAmB,QAA4B,WAAW,KAAa;CACrF,MAAM,eAAe,IAAI,iBAAiB;AAE1C,KAAI,OAAO,SAAS,KAAA,EAClB,cAAa,IAAI,QAAQ,OAAO,KAAK;AAEvC,KAAI,OAAO,eAAe,KAAA,EACxB,cAAa,IAAI,cAAc,OAAO,WAAW;AAEnD,KAAI,OAAO,SAAS,KAAA,EAClB,cAAa,IAAI,QAAQ,OAAO,KAAK;AAEvC,KAAI,OAAO,UAAU,KAAA,EACnB,cAAa,IAAI,SAAS,OAAO,MAAM;AAEzC,KAAI,OAAO,gBAAgB,KAAA,EACzB,cAAa,IAAI,eAAe,OAAO,YAAY;AAErD,KAAI,OAAO,WAAW,KAAA,EACpB,cAAa,IAAI,UAAU,OAAO,OAAO;AAE3C,KAAI,OAAO,cAAc,KAAA,EACvB,cAAa,IAAI,aAAa,OAAO,OAAO,UAAU,CAAC;AAEzD,KAAI,OAAO,eAAe,KAAA,EACxB,cAAa,IAAI,cAAc,OAAO,WAAW;AAEnD,KAAI,OAAO,UAAU,KAAA,EACnB,cAAa,IAAI,SAAS,OAAO,OAAO,MAAM,CAAC;AAEjD,KAAI,OAAO,UAAU,KAAA,EACnB,cAAa,IAAI,SAAS,OAAO,OAAO,MAAM,CAAC;AAEjD,KAAI,OAAO,gBAAgB,KAAA,EACzB,cAAa,IAAI,eAAe,OAAO,OAAO,YAAY,CAAC;AAE7D,KAAI,OAAO,mBAAmB,KAAA,EAC5B,cAAa,IAAI,kBAAkB,OAAO,OAAO,eAAe,CAAC;AAEnE,KAAI,OAAO,iBAAiB,KAAA,EAC1B,cAAa,IAAI,gBAAgB,OAAO,OAAO,aAAa,CAAC;AAE/D,KAAI,OAAO,kBAAkB,KAAA,EAC3B,cAAa,IAAI,iBAAiB,OAAO,OAAO,cAAc,CAAC;AAEjE,KAAI,OAAO,kBAAkB,KAAA,EAC3B,cAAa,IAAI,iBAAiB,OAAO,OAAO,cAAc,CAAC;AAEjE,KAAI,OAAO,YAAY,KAAA,EACrB,cAAa,IAAI,WAAW,OAAO,OAAO,QAAQ,CAAC;AAErD,KAAI,OAAO,eAAe,KAAA,EACxB,cAAa,IAAI,cAAc,OAAO,OAAO,WAAW,CAAC;CAG3D,MAAM,cAAc,aAAa,UAAU;AAC3C,QAAO,cAAc,GAAG,SAAS,GAAG,gBAAgB"}

package/dist/mcp/index.cjs

@@ -9109,6 +9109,10 @@ function injectDefaultDomain(meta, clientName, serverUrl) {
 //#region src/mcp/server.ts
 var localDevServerUrl = "http://localhost:8000";
 var localHmrWsUrl = "ws://localhost:24678";
+var lastToolTimingMs = null;
+function isDevOverlayEnabled() {
+	return process.env.SUNPEAK_DEV_OVERLAY !== "false";
+}
 /**
 * Detect whether this request needs pre-built HTML (no Vite HMR).
 *
@@ -9128,12 +9132,66 @@ function needsProdBuild(headers) {
 * Read pre-built resource HTML (production mode).
 * The HTML file is generated by `sunpeak build` with JS and CSS inlined.
 */
-function readResourceHtmlProd(distPath) {
+function readResourceHtmlProd(distPath, resourceName) {
 	const htmlPath = node_path.default.resolve(distPath);
-	if (!node_fs.default.existsSync(htmlPath)) throw new Error(`Resource HTML file not found at ${htmlPath}. Run "sunpeak build" to generate the built app.`);
+	if (!node_fs.default.existsSync(htmlPath)) {
+		const label = resourceName ? `Resource "${resourceName}"` : "Resource";
+		throw new Error(`${label}: built HTML not found at ${htmlPath}. Run "sunpeak build" to generate it.`);
+	}
 	return node_fs.default.readFileSync(htmlPath, "utf8");
 }
 /**
+* Generate an inline script that shows a dev overlay with resource served timestamp
+* and tool call request timing.
+*
+* The resource timestamp is baked into the HTML at readResource time. Tool timing
+* arrives two ways:
+* 1. Baked-in `toolMs` from readResource time (works when the tool call precedes the
+*    resource read, which is the case for Claude and the inspector's initial render).
+* 2. `_meta._sunpeak.requestTimeMs` on the tool result PostMessage (handles inspector
+*    Re-run and hosts that pass `_meta` through to the resource iframe).
+*
+* NOTE: Keep in sync with bin/lib/dev-overlay.mjs (used by the standalone inspector).
+*
+* @param servedAt - Unix timestamp (ms) when the resource HTML was generated/served.
+* @param toolMs - Most recent tool call duration (ms), or null if no call yet.
+*/
+function getDevOverlayScript(servedAt, toolMs) {
+	return `<script>
+(function(){
+  var servedAt=${servedAt};
+  var el=null,hidden=false,lastMs=${toolMs ?? "null"};
+  function fmt(ts){var d=new Date(ts);var h=d.getHours(),m=d.getMinutes(),s=d.getSeconds();return (h<10?'0':'')+h+':'+(m<10?'0':'')+m+':'+(s<10?'0':'')+s}
+  function make(){
+    var existing=document.getElementById('__sunpeak-dev-timing');
+    if(existing)return existing;
+    var b=document.createElement('button');b.id='__sunpeak-dev-timing';
+    b.style.cssText='position:fixed;bottom:8px;right:8px;z-index:2147483647;display:grid;grid-template-columns:auto auto;gap:0 6px;align-items:baseline;padding:5px 8px;border-radius:6px;border:1px solid rgba(128,128,128,0.25);background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);color:#e5e5e5;font-size:11px;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;line-height:1.4;cursor:pointer;user-select:none;opacity:0.85;transition:opacity 150ms;';
+    b.onmouseenter=function(){b.style.opacity='1'};
+    b.onmouseleave=function(){b.style.opacity='0.85'};
+    b.onclick=function(){hidden=!hidden;upd()};
+    document.body.appendChild(b);return b;
+  }
+  function upd(){
+    if(!el)el=make();
+    if(hidden){el.title='Show dev info';el.innerHTML='<span style="grid-column:1/-1;font-size:9px;text-align:center">DEV</span>';return}
+    var h='';
+    h+='<span style="text-align:right;color:rgba(255,255,255,0.5);white-space:nowrap">Resource:</span><span style="white-space:nowrap">'+fmt(servedAt)+'</span>';
+    if(lastMs!=null)h+='<span style="text-align:right;color:rgba(255,255,255,0.5);white-space:nowrap">Tool:</span><span style="white-space:nowrap">'+(lastMs%1===0?lastMs:lastMs.toFixed(1))+'ms</span>';
+    el.title='Hide dev info';el.innerHTML=h;
+  }
+  upd();
+  window.addEventListener('message',function(e){
+    var d=e.data;if(!d||typeof d!=='object')return;
+    if(d.method!=='ui/notifications/tool-result')return;
+    var p=d.params;if(!p)return;
+    var ms=p._meta&&p._meta._sunpeak&&p._meta._sunpeak.requestTimeMs;
+    if(typeof ms==='number'){lastMs=ms;upd()}
+  });
+})();
+<\/script>`;
+}
+/**
 * Generate HTML that loads from Vite dev server with HMR.
 * Used for direct connections (e.g. ChatGPT connecting to localhost).
 */
@@ -9176,6 +9234,7 @@ function getViteResourceHtml(srcPath) {
 		src: srcPath,
 		component: componentName
 	}).toString()}`}"><\/script>
+  ${isDevOverlayEnabled() ? getDevOverlayScript(Date.now(), lastToolTimingMs) : ""}
 </body>
 </html>`;
 }
@@ -9187,7 +9246,9 @@ function getViteResourceHtml(srcPath) {
 */
 function getResourceHtml(simulation, viteMode, prodBuild) {
 	if (viteMode && simulation.srcPath && !prodBuild) return getViteResourceHtml(simulation.srcPath);
-	return readResourceHtmlProd(simulation.distPath);
+	let html = readResourceHtmlProd(simulation.distPath, simulation.name);
+	if (isDevOverlayEnabled()) html = html.replace("</body>", `${getDevOverlayScript(Date.now(), lastToolTimingMs)}\n</body>`);
+	return html;
 }
 /**
 * Inject localhost Vite dev server URLs into CSP metadata.
@@ -9308,14 +9369,29 @@ function createAppServer(config, simulations, viteMode) {
 				const realHandler = simulation.handler;
 				if (realHandler && (config.prodTools || !hasMockResult)) {
 					console.log(`[MCP] CallTool: ${tool.name}${argsStr} → live handler`);
+					const startTime = performance.now();
 					try {
 						const result = await realHandler(args, extra);
-						if (typeof result === "string") return { content: [{
-							type: "text",
-							text: result
-						}] };
-						return result;
+						const durationMs = Math.round((performance.now() - startTime) * 10) / 10;
+						lastToolTimingMs = durationMs;
+						if (typeof result === "string") return {
+							content: [{
+								type: "text",
+								text: result
+							}],
+							_meta: { _sunpeak: { requestTimeMs: durationMs } }
+						};
+						const typed = result;
+						return {
+							...typed,
+							_meta: {
+								...typed._meta,
+								_sunpeak: { requestTimeMs: durationMs }
+							}
+						};
 					} catch (error) {
+						const durationMs = Math.round((performance.now() - startTime) * 10) / 10;
+						lastToolTimingMs = durationMs;
 						const msg = error instanceof Error ? error.message : String(error);
 						console.error(`[MCP] CallTool error (${tool.name}): ${msg}`);
 						return {
@@ -9323,7 +9399,8 @@ function createAppServer(config, simulations, viteMode) {
 								type: "text",
 								text: `Error: ${msg}`
 							}],
-							isError: true
+							isError: true,
+							_meta: { _sunpeak: { requestTimeMs: durationMs } }
 						};
 					}
 				}
@@ -9565,7 +9642,8 @@ function runMCPServer(config) {
 		viteServer.ws.handleUpgrade(request, socket, head);
 	});
 	httpServer.on("clientError", (err, socket) => {
-		if (err.code !== "ECONNRESET") console.error("HTTP client error", err);
+		if (err.code === "ECONNRESET") {} else if (err.code === "HPE_INVALID_METHOD" && "rawPacket" in err && Buffer.isBuffer(err.rawPacket) && err.rawPacket[0] === 22) console.error("Received HTTPS request on HTTP server. If you're using ngrok, make sure the upstream is http:// (not https://). Example: ngrok http 8000");
+		else console.error("HTTP client error", err);
 		socket.end("HTTP/1.1 400 Bad Request\r\n\r\n");
 	});
 	let resolveReady;
@@ -9575,14 +9653,16 @@ function runMCPServer(config) {
 	const onListening = () => {
 		const actualPort = httpServer.address().port;
 		localDevServerUrl = `http://localhost:${actualPort}`;
-		console.log(`Sunpeak MCP server listening on http://localhost:${actualPort}`);
+		if (actualPort !== requestedPort) console.log(`Sunpeak MCP server listening on http://localhost:${actualPort} (port ${requestedPort} was in use)`);
+		else console.log(`Sunpeak MCP server listening on http://localhost:${actualPort}`);
 		console.log(`  MCP endpoint: http://localhost:${actualPort}${MCP_PATH$1}`);
 		if (viteMode) console.log(`  Vite HMR: enabled (source files served with hot reload)`);
 		resolveReady();
 	};
+	const requestedPort = port;
 	httpServer.on("error", (err) => {
 		if (err.code === "EADDRINUSE") {
-			console.warn(`Port ${port} in use, finding an available port...`);
+			console.warn(`Port ${requestedPort} is in use, trying another port...`);
 			httpServer.listen(0);
 		} else throw err;
 	});
@@ -10135,19 +10215,22 @@ function startProductionHttpServer(config, portOrOptions) {
 		}
 	});
 	httpServer.on("clientError", (err, socket) => {
-		log("error", "HTTP client error", { error: err.message });
+		if (err.code === "HPE_INVALID_METHOD" && "rawPacket" in err && Buffer.isBuffer(err.rawPacket) && err.rawPacket[0] === 22) log("error", "Received HTTPS request on HTTP server. If you're using ngrok, make sure the upstream is http:// (not https://). Example: ngrok http 8000");
+		else log("error", "HTTP client error", { error: err.message });
 		socket.end("HTTP/1.1 400 Bad Request\r\n\r\n");
 	});
 	const displayHost = host === "0.0.0.0" ? "localhost" : host;
+	const requestedPort = port;
 	const onListening = () => {
 		const addr = httpServer.address();
-		log("info", `Server listening on http://${displayHost}:${addr.port}`);
+		if (addr.port !== requestedPort) log("info", `Server listening on http://${displayHost}:${addr.port} (port ${requestedPort} was in use)`);
+		else log("info", `Server listening on http://${displayHost}:${addr.port}`);
 		log("info", `MCP endpoint: http://${displayHost}:${addr.port}${MCP_PATH}`);
 		log("info", `Health check: http://${displayHost}:${addr.port}/health`);
 	};
 	httpServer.on("error", (err) => {
 		if (err.code === "EADDRINUSE") {
-			log("warn", `Port ${port} in use, finding an available port...`);
+			log("warn", `Port ${requestedPort} is in use, trying another port...`);
 			httpServer.listen(0, host);
 		} else throw err;
 	});