sunpeak 0.18.6 → 0.18.9

package/dist/mcp/index.js

@@ -9105,6 +9105,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).
 *
@@ -9124,12 +9128,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 = path.resolve(distPath);
-	if (!fs.existsSync(htmlPath)) throw new Error(`Resource HTML file not found at ${htmlPath}. Run "sunpeak build" to generate the built app.`);
+	if (!fs.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 fs.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).
 */
@@ -9172,6 +9230,7 @@ function getViteResourceHtml(srcPath) {
 		src: srcPath,
 		component: componentName
 	}).toString()}`}"><\/script>
+  ${isDevOverlayEnabled() ? getDevOverlayScript(Date.now(), lastToolTimingMs) : ""}
 </body>
 </html>`;
 }
@@ -9183,7 +9242,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.
@@ -9304,14 +9365,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 {
@@ -9319,7 +9395,8 @@ function createAppServer(config, simulations, viteMode) {
 								type: "text",
 								text: `Error: ${msg}`
 							}],
-							isError: true
+							isError: true,
+							_meta: { _sunpeak: { requestTimeMs: durationMs } }
 						};
 					}
 				}
@@ -9561,7 +9638,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;
@@ -9571,14 +9649,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;
 	});
@@ -10131,19 +10211,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;
 	});