sunpeak 0.18.6 → 0.18.9

package/bin/commands/dev.mjs

@@ -239,7 +239,7 @@ export async function dev(projectRoot = process.cwd(), args = []) {
       const { tool } = await extractToolExport(toolPath);
       toolMap.set(toolName, { tool, path: toolPath });
     } catch (err) {
-      console.warn(`Warning: Could not extract metadata from tool ${toolName}: ${err.message}`);
+      console.warn(`Warning: Could not extract metadata from tool "${toolName}" (${toolPath}):\n  ${err.message}\n  Expected: export const tool: AppToolConfig = { ... }`);
     }
   }
 
@@ -271,7 +271,7 @@ export async function dev(projectRoot = process.cwd(), args = []) {
         toolHandlerMap.set(toolName, { handler: mod.default, outputSchema: mod.outputSchema });
       }
     } catch (err) {
-      console.warn(`Warning: Could not load handler for tool "${toolName}": ${err.message}`);
+      console.warn(`Warning: Could not load handler for tool "${toolName}" (${relativePath}):\n  ${err.message}`);
     }
   }
 
@@ -287,7 +287,7 @@ export async function dev(projectRoot = process.cwd(), args = []) {
     const toolEntry = toolMap.get(toolName);
     const tool = toolEntry?.tool;
     if (!tool) {
-      console.warn(`Warning: Tool "${toolName}" not found for simulation "${simName}". Skipping.`);
+      console.warn(`Warning: Tool "${toolName}" not found for simulation "${simName}". Expected file: src/tools/${toolName}.ts`);
       continue;
     }
 
@@ -412,6 +412,7 @@ if (!Component) {
 if (import.meta.hot) {
   import.meta.hot.accept();
 }
+
 `;
       }
     },
@@ -547,11 +548,14 @@ if (import.meta.hot) {
         if (typeof mod.default !== 'function') {
           throw new Error(`Tool "${name}" has no default export handler`);
         }
+        const startTime = performance.now();
         const result = await mod.default(args, {});
+        const durationMs = Math.round((performance.now() - startTime) * 10) / 10;
         if (typeof result === 'string') {
-          return { content: [{ type: 'text', text: result }] };
+          return { content: [{ type: 'text', text: result }], _meta: { _sunpeak: { requestTimeMs: durationMs } } };
         }
-        return result;
+        const typed = result ?? {};
+        return { ...typed, _meta: { ...typed._meta, _sunpeak: { requestTimeMs: durationMs } } };
       }
       throw new Error(`Tool "${name}" not found`);
     },

package/bin/commands/inspect.mjs

@@ -20,6 +20,7 @@ const { join, resolve, dirname } = path;
 import { fileURLToPath, pathToFileURL } from 'url';
 import { getPort } from '../lib/get-port.mjs';
 import { startSandboxServer } from '../lib/sandbox-server.mjs';
+import { getDevOverlayScript } from '../lib/dev-overlay.mjs';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const SUNPEAK_PKG_DIR = resolve(__dirname, '..', '..');
@@ -850,7 +851,18 @@ function sunpeakInspectEndpointsPlugin(getClient, setClient, pluginOpts = {}) {
             'X-Content-Type-Options': 'nosniff',
           });
           if (typeof content.text === 'string') {
-            res.end(content.text);
+            const stripOverlay = url.searchParams.get('devOverlay') === 'false';
+            let text = content.text;
+            if (stripOverlay) {
+              // Strip dev overlay (e.g., for e2e tests)
+              text = text.replace(/<script>(?:(?!<\/script>)[\s\S])*?__sunpeak-dev-timing(?:(?!<\/script>)[\s\S])*?<\/script>/g, '');
+            } else if (process.env.SUNPEAK_DEV_OVERLAY !== 'false' && !text.includes('__sunpeak-dev-timing') && text.includes('</body>')) {
+              // Inject dev overlay into resources from non-sunpeak servers.
+              // The overlay shows resource served timestamp and tool timing (from
+              // _meta._sunpeak.requestTimeMs on the PostMessage tool-result notification).
+              text = text.replace('</body>', `${getDevOverlayScript(Date.now(), null)}\n</body>`);
+            }
+            res.end(text);
           } else if (content.blob) {
             res.end(Buffer.from(content.blob, 'base64'));
           } else {

package/bin/commands/new.mjs

@@ -175,6 +175,11 @@ export async function init(projectName, resourcesArg, deps = defaultDeps) {
         return false;
       }
 
+      // Skip framework-internal test files (dev overlay tests are for sunpeak development, not user projects)
+      if ((src.includes('/tests/e2e/') || src.includes('/tests/live/')) && name.startsWith('dev-')) {
+        return false;
+      }
+
       // Skip deps.json files (build-time metadata, not needed in scaffolded projects)
       if (name === 'deps.json' && src.includes('/resources/')) {
         return false;

package/bin/lib/dev-overlay.mjs

@@ -0,0 +1,50 @@
+/**
+ * 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).
+ *
+ * @param {number} servedAt - Unix timestamp (ms) when the resource HTML was generated/served.
+ * @param {number | null} toolMs - Most recent tool call duration (ms), or null if no call yet.
+ * @returns {string} HTML script tag with the dev overlay.
+ */
+export 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>`;
+}

package/bin/lib/live/live-config.d.mts

@@ -23,6 +23,9 @@ export interface LiveConfigOptions {
   /** Browser permissions to grant (e.g., ['geolocation']). */
   permissions?: string[];
 
+  /** Show the dev overlay (resource timestamp + tool timing) in resources. Default: true */
+  devOverlay?: boolean;
+
   /** Additional Playwright `use` options, merged with defaults. */
   use?: Record<string, unknown>;
 }

package/bin/lib/live/live-config.mjs

@@ -32,6 +32,7 @@ const GLOBAL_SETUP_PATH = join(__dirname, 'global-setup.mjs');
  * @param {string} [options.timezoneId] - Timezone (e.g., 'America/New_York')
  * @param {{ latitude: number, longitude: number }} [options.geolocation] - Geolocation coordinates
  * @param {string[]} [options.permissions] - Browser permissions to grant (e.g., ['geolocation'])
+ * @param {boolean} [options.devOverlay=true] - Show the dev overlay (resource timestamp + tool timing) in resources
  * @param {Object} [options.use] - Additional Playwright `use` options (merged with defaults)
  */
 export function createLiveConfig(hostOptions, options = {}) {
@@ -40,6 +41,7 @@ export function createLiveConfig(hostOptions, options = {}) {
     testDir = '.',
     authDir,
     vitePort = getPortSync(3456),
+    devOverlay = true,
     colorScheme,
     viewport,
     locale,
@@ -89,7 +91,7 @@ export function createLiveConfig(hostOptions, options = {}) {
       },
     ],
     webServer: {
-      command: `SUNPEAK_LIVE_TEST=1 SUNPEAK_SANDBOX_PORT=${getPortSync(24680)} pnpm dev -- --prod-resources --port ${vitePort}`,
+      command: `SUNPEAK_LIVE_TEST=1 SUNPEAK_SANDBOX_PORT=${getPortSync(24680)}${devOverlay ? '' : ' SUNPEAK_DEV_OVERLAY=false'} pnpm dev -- --prod-resources --port ${vitePort}`,
       url: `http://localhost:${vitePort}/health`,
       reuseExistingServer: !process.env.CI,
       timeout: 60_000,

package/bin/lib/sandbox-server.mjs

@@ -59,6 +59,25 @@ export async function startSandboxServer({ preferredPort = 24680 } = {}) {
     res.end('Not found');
   });
 
+  server.on('clientError', (err, socket) => {
+    if (err.code === 'ECONNRESET') {
+      // Normal when browser tabs close abruptly
+    } else if (
+      err.code === 'HPE_INVALID_METHOD' &&
+      err.rawPacket instanceof Buffer &&
+      err.rawPacket[0] === 0x16
+    ) {
+      console.error(
+        'Received HTTPS request on sandbox server (port ' + port + '). ' +
+        'If you\'re using ngrok, make sure the upstream is http:// (not https://). ' +
+        'Example: ngrok http 8000'
+      );
+    } else {
+      console.error('Sandbox server client error', err);
+    }
+    socket.end('HTTP/1.1 400 Bad Request\r\n\r\n');
+  });
+
   await new Promise((resolve, reject) => {
     server.listen(port, () => resolve());
     server.on('error', reject);

package/dist/chatgpt/index.cjs

@@ -1,8 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-9hOWP6kD.cjs");
-require("../protocol-jbxhzcnS.cjs");
-const require_inspector = require("../inspector-DRD_Q66E.cjs");
-const require_inspector_url = require("../inspector-url-7qhtJwY6.cjs");
+const require_inspector = require("../inspector-CTMccsz9.cjs");
+const require_inspector_url = require("../inspector-url-C3LTKgXt.cjs");
 const require_discovery = require("../discovery-Clu4uHp1.cjs");
 //#region src/chatgpt/index.ts
 var chatgpt_exports = /* @__PURE__ */ require_chunk.__exportAll({

package/dist/chatgpt/index.js

@@ -1,7 +1,6 @@
 import { r as __exportAll } from "../chunk-D6g4UhsZ.js";
-import "../protocol-DJmRaBzO.js";
-import { _ as McpAppHost, d as ThemeProvider, f as useThemeContext, g as extractResourceCSP, h as IframeResource, n as resolveServerToolResult, t as Inspector, v as SCREEN_WIDTHS } from "../inspector-CjSoXm6N.js";
-import { t as createInspectorUrl } from "../inspector-url-DuEFmxLP.js";
+import { _ as McpAppHost, d as ThemeProvider, f as useThemeContext, g as extractResourceCSP, h as IframeResource, n as resolveServerToolResult, t as Inspector, v as SCREEN_WIDTHS } from "../inspector-DkS75JCk.js";
+import { t as createInspectorUrl } from "../inspector-url-CyQcuBI9.js";
 import { c as toPascalCase, i as findResourceKey, n as extractSimulationKey, r as findResourceDirs, s as getComponentName, t as extractResourceKey } from "../discovery-Cgoegt62.js";
 //#region src/chatgpt/index.ts
 var chatgpt_exports = /* @__PURE__ */ __exportAll({

package/dist/claude/index.cjs

@@ -1,5 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../chunk-9hOWP6kD.cjs");
-require("../protocol-jbxhzcnS.cjs");
-const require_inspector = require("../inspector-DRD_Q66E.cjs");
+const require_inspector = require("../inspector-CTMccsz9.cjs");
 exports.Inspector = require_inspector.Inspector;

package/dist/claude/index.js

@@ -1,3 +1,2 @@
-import "../protocol-DJmRaBzO.js";
-import { t as Inspector } from "../inspector-CjSoXm6N.js";
+import { t as Inspector } from "../inspector-DkS75JCk.js";
 export { Inspector };

package/dist/host/chatgpt/index.cjs

@@ -1,6 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../chunk-9hOWP6kD.cjs");
-require("../../protocol-jbxhzcnS.cjs");
 const require_use_app = require("../../use-app-Dqh20JPP.cjs");
 let react = require("react");
 //#region src/host/chatgpt/openai-types.ts

package/dist/host/chatgpt/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/host/chatgpt/openai-types.ts","../../../src/host/chatgpt/use-create-file.ts","../../../src/host/chatgpt/use-open-modal.ts","../../../src/host/chatgpt/use-request-checkout.ts"],"sourcesContent":["/**\n * TypeScript declarations for the `window.openai` ChatGPT runtime.\n *\n * These APIs are available inside ChatGPT-hosted iframes and provide\n * platform-specific capabilities beyond the MCP Apps standard.\n *\n * @see https://developers.openai.com/apps-sdk/mcp-apps-in-chatgpt\n */\n\nexport interface OpenAIUploadFileResult {\n  fileId: string;\n}\n\nexport interface OpenAIFileDownloadUrlResult {\n  downloadUrl: string;\n}\n\nexport interface OpenAIRequestModalParams {\n  /** URL of an alternate UI template to load in the modal. Omit to reuse the current UI. */\n  template?: string;\n  /** Arbitrary params forwarded to the modal content. */\n  params?: Record<string, unknown>;\n}\n\nexport interface OpenAICheckoutPaymentProvider {\n  provider: string;\n  merchant_id: string;\n  supported_payment_methods: string[];\n}\n\nexport interface OpenAICheckoutTotal {\n  type: string;\n  display_text: string;\n  amount: number;\n}\n\nexport interface OpenAICheckoutLink {\n  type: 'terms_of_use' | 'privacy_policy' | string;\n  url: string;\n}\n\nexport interface OpenAICheckoutSession {\n  id: string;\n  payment_provider: OpenAICheckoutPaymentProvider;\n  status: 'ready_for_payment';\n  currency: string;\n  totals: OpenAICheckoutTotal[];\n  links: OpenAICheckoutLink[];\n  payment_mode: 'live' | 'test';\n}\n\nexport interface OpenAICheckoutOrder {\n  id: string;\n  checkout_session_id: string;\n  status: 'completed' | string;\n  permalink_url?: string;\n}\n\n/**\n * The `window.openai` runtime object injected by ChatGPT into hosted iframes.\n */\nexport interface OpenAIRuntime {\n  // --- File APIs ---\n  uploadFile?(file: File): Promise<OpenAIUploadFileResult>;\n  getFileDownloadUrl?(params: { fileId: string }): Promise<OpenAIFileDownloadUrlResult>;\n\n  // --- Modal API ---\n  requestModal?(params: OpenAIRequestModalParams): Promise<void>;\n\n  // --- Checkout API ---\n  requestCheckout?(session: OpenAICheckoutSession): Promise<OpenAICheckoutOrder>;\n\n  // --- Display ---\n  requestClose?(): void;\n  requestDisplayMode?(params: { mode: 'inline' | 'PiP' | 'fullscreen' }): Promise<void>;\n\n  // --- Messaging ---\n  sendFollowUpMessage?(params: { prompt: string }): void;\n\n  // --- Other ---\n  openExternal?(params: { href: string }): void;\n}\n\n/**\n * Get the `window.openai` runtime if available.\n * Returns `undefined` outside of ChatGPT or in SSR.\n */\nexport function getOpenAIRuntime(): OpenAIRuntime | undefined {\n  if (typeof window !== 'undefined' && 'openai' in window) {\n    return (window as unknown as { openai: OpenAIRuntime }).openai;\n  }\n  return undefined;\n}\n","import { useCallback } from 'react';\nimport { useApp } from '../../hooks/use-app';\nimport { getOpenAIRuntime, type OpenAIUploadFileResult } from './openai-types';\n\nexport type { OpenAIUploadFileResult as CreateFileResult };\n\n/**\n * Upload a file from the app UI into the ChatGPT conversation.\n *\n * Wraps `window.openai.uploadFile` which is only available inside ChatGPT.\n * Supported formats: `image/png`, `image/jpeg`, `image/webp`.\n *\n * Import from `sunpeak/host/chatgpt`:\n *\n * @example\n * ```tsx\n * import { useUploadFile } from 'sunpeak/host/chatgpt';\n *\n * function ImageUploader() {\n *   const uploadFile = useUploadFile();\n *\n *   const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {\n *     const file = e.currentTarget.files?.[0];\n *     if (!file) return;\n *     const { fileId } = await uploadFile(file);\n *     console.log('Uploaded:', fileId);\n *   };\n *\n *   return <input type=\"file\" accept=\"image/*\" onChange={handleChange} />;\n * }\n * ```\n */\nexport function useUploadFile(): (file: File) => Promise<OpenAIUploadFileResult> {\n  const app = useApp();\n  return useCallback(\n    async (file: File) => {\n      if (!app) {\n        throw new Error('[useUploadFile] App not connected');\n      }\n      const runtime = getOpenAIRuntime();\n      if (!runtime?.uploadFile) {\n        throw new Error('[useUploadFile] window.openai.uploadFile not available');\n      }\n      return runtime.uploadFile(file);\n    },\n    [app]\n  );\n}\n","import { useCallback } from 'react';\nimport { useApp } from '../../hooks/use-app';\nimport { getOpenAIRuntime, type OpenAIRequestModalParams } from './openai-types';\n\nexport type { OpenAIRequestModalParams as OpenModalParams };\n\n/**\n * Open a host-controlled modal in ChatGPT.\n *\n * Wraps `window.openai.requestModal` which is only available inside ChatGPT.\n * Pass a `template` URL to load alternate UI content in the modal, or omit\n * it to reuse the current UI.\n *\n * Import from `sunpeak/host/chatgpt`:\n *\n * @example\n * ```tsx\n * import { useRequestModal } from 'sunpeak/host/chatgpt';\n *\n * function CheckoutButton() {\n *   const requestModal = useRequestModal();\n *\n *   return (\n *     <button onClick={() => requestModal({ template: 'ui://widget/checkout.html' })}>\n *       Checkout\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useRequestModal(): (params: OpenAIRequestModalParams) => Promise<void> {\n  const app = useApp();\n  return useCallback(\n    async (params: OpenAIRequestModalParams) => {\n      if (!app) {\n        console.warn('[useRequestModal] App not connected');\n        return;\n      }\n      const runtime = getOpenAIRuntime();\n      if (!runtime?.requestModal) {\n        throw new Error('[useRequestModal] window.openai.requestModal not available');\n      }\n      return runtime.requestModal(params);\n    },\n    [app]\n  );\n}\n","import { useCallback } from 'react';\nimport { useApp } from '../../hooks/use-app';\nimport {\n  getOpenAIRuntime,\n  type OpenAICheckoutSession,\n  type OpenAICheckoutOrder,\n} from './openai-types';\n\nexport type { OpenAICheckoutSession as CheckoutSession };\nexport type { OpenAICheckoutOrder as CheckoutOrder };\n\n/**\n * Trigger the ChatGPT instant checkout flow.\n *\n * Wraps `window.openai.requestCheckout` which is only available inside\n * ChatGPT. Opens the host checkout UI, handles payment display, and\n * resolves with the finalized order. Rejects on error or user cancel.\n *\n * Import from `sunpeak/host/chatgpt`:\n *\n * @example\n * ```tsx\n * import { useRequestCheckout } from 'sunpeak/host/chatgpt';\n *\n * function BuyButton() {\n *   const requestCheckout = useRequestCheckout();\n *\n *   const handleBuy = async () => {\n *     try {\n *       const order = await requestCheckout({\n *         id: 'session-1',\n *         payment_provider: {\n *           provider: 'stripe',\n *           merchant_id: 'acct_xxx',\n *           supported_payment_methods: ['card', 'apple_pay'],\n *         },\n *         status: 'ready_for_payment',\n *         currency: 'USD',\n *         totals: [{ type: 'total', display_text: 'Total', amount: 999 }],\n *         links: [],\n *         payment_mode: 'live',\n *       });\n *       console.log('Order completed:', order.id);\n *     } catch {\n *       console.log('Checkout cancelled or failed');\n *     }\n *   };\n *\n *   return <button onClick={handleBuy}>Buy Now</button>;\n * }\n * ```\n */\nexport function useRequestCheckout(): (\n  session: OpenAICheckoutSession\n) => Promise<OpenAICheckoutOrder> {\n  const app = useApp();\n  return useCallback(\n    async (session: OpenAICheckoutSession) => {\n      if (!app) {\n        throw new Error('[useRequestCheckout] App not connected');\n      }\n      const runtime = getOpenAIRuntime();\n      if (!runtime?.requestCheckout) {\n        throw new Error('[useRequestCheckout] window.openai.requestCheckout not available');\n      }\n      return runtime.requestCheckout(session);\n    },\n    [app]\n  );\n}\n"],"mappings":";;;;;;;;;;AAuFA,SAAgB,mBAA8C;AAC5D,KAAI,OAAO,WAAW,eAAe,YAAY,OAC/C,QAAQ,OAAgD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACzD5D,SAAgB,gBAAiE;CAC/E,MAAM,MAAM,gBAAA,QAAQ;AACpB,SAAA,GAAA,MAAA,aACE,OAAO,SAAe;AACpB,MAAI,CAAC,IACH,OAAM,IAAI,MAAM,oCAAoC;EAEtD,MAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS,WACZ,OAAM,IAAI,MAAM,yDAAyD;AAE3E,SAAO,QAAQ,WAAW,KAAK;IAEjC,CAAC,IAAI,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;AChBH,SAAgB,kBAAuE;CACrF,MAAM,MAAM,gBAAA,QAAQ;AACpB,SAAA,GAAA,MAAA,aACE,OAAO,WAAqC;AAC1C,MAAI,CAAC,KAAK;AACR,WAAQ,KAAK,sCAAsC;AACnD;;EAEF,MAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS,aACZ,OAAM,IAAI,MAAM,6DAA6D;AAE/E,SAAO,QAAQ,aAAa,OAAO;IAErC,CAAC,IAAI,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACOH,SAAgB,qBAEkB;CAChC,MAAM,MAAM,gBAAA,QAAQ;AACpB,SAAA,GAAA,MAAA,aACE,OAAO,YAAmC;AACxC,MAAI,CAAC,IACH,OAAM,IAAI,MAAM,yCAAyC;EAE3D,MAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS,gBACZ,OAAM,IAAI,MAAM,mEAAmE;AAErF,SAAO,QAAQ,gBAAgB,QAAQ;IAEzC,CAAC,IAAI,CACN"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/host/chatgpt/openai-types.ts","../../../src/host/chatgpt/use-create-file.ts","../../../src/host/chatgpt/use-open-modal.ts","../../../src/host/chatgpt/use-request-checkout.ts"],"sourcesContent":["/**\n * TypeScript declarations for the `window.openai` ChatGPT runtime.\n *\n * These APIs are available inside ChatGPT-hosted iframes and provide\n * platform-specific capabilities beyond the MCP Apps standard.\n *\n * @see https://developers.openai.com/apps-sdk/mcp-apps-in-chatgpt\n */\n\nexport interface OpenAIUploadFileResult {\n  fileId: string;\n}\n\nexport interface OpenAIFileDownloadUrlResult {\n  downloadUrl: string;\n}\n\nexport interface OpenAIRequestModalParams {\n  /** URL of an alternate UI template to load in the modal. Omit to reuse the current UI. */\n  template?: string;\n  /** Arbitrary params forwarded to the modal content. */\n  params?: Record<string, unknown>;\n}\n\nexport interface OpenAICheckoutPaymentProvider {\n  provider: string;\n  merchant_id: string;\n  supported_payment_methods: string[];\n}\n\nexport interface OpenAICheckoutTotal {\n  type: string;\n  display_text: string;\n  amount: number;\n}\n\nexport interface OpenAICheckoutLink {\n  type: 'terms_of_use' | 'privacy_policy' | string;\n  url: string;\n}\n\nexport interface OpenAICheckoutSession {\n  id: string;\n  payment_provider: OpenAICheckoutPaymentProvider;\n  status: 'ready_for_payment';\n  currency: string;\n  totals: OpenAICheckoutTotal[];\n  links: OpenAICheckoutLink[];\n  payment_mode: 'live' | 'test';\n}\n\nexport interface OpenAICheckoutOrder {\n  id: string;\n  checkout_session_id: string;\n  status: 'completed' | string;\n  permalink_url?: string;\n}\n\n/**\n * The `window.openai` runtime object injected by ChatGPT into hosted iframes.\n */\nexport interface OpenAIRuntime {\n  // --- File APIs ---\n  uploadFile?(file: File): Promise<OpenAIUploadFileResult>;\n  getFileDownloadUrl?(params: { fileId: string }): Promise<OpenAIFileDownloadUrlResult>;\n\n  // --- Modal API ---\n  requestModal?(params: OpenAIRequestModalParams): Promise<void>;\n\n  // --- Checkout API ---\n  requestCheckout?(session: OpenAICheckoutSession): Promise<OpenAICheckoutOrder>;\n\n  // --- Display ---\n  requestClose?(): void;\n  requestDisplayMode?(params: { mode: 'inline' | 'PiP' | 'fullscreen' }): Promise<void>;\n\n  // --- Messaging ---\n  sendFollowUpMessage?(params: { prompt: string }): void;\n\n  // --- Other ---\n  openExternal?(params: { href: string }): void;\n}\n\n/**\n * Get the `window.openai` runtime if available.\n * Returns `undefined` outside of ChatGPT or in SSR.\n */\nexport function getOpenAIRuntime(): OpenAIRuntime | undefined {\n  if (typeof window !== 'undefined' && 'openai' in window) {\n    return (window as unknown as { openai: OpenAIRuntime }).openai;\n  }\n  return undefined;\n}\n","import { useCallback } from 'react';\nimport { useApp } from '../../hooks/use-app';\nimport { getOpenAIRuntime, type OpenAIUploadFileResult } from './openai-types';\n\nexport type { OpenAIUploadFileResult as CreateFileResult };\n\n/**\n * Upload a file from the app UI into the ChatGPT conversation.\n *\n * Wraps `window.openai.uploadFile` which is only available inside ChatGPT.\n * Supported formats: `image/png`, `image/jpeg`, `image/webp`.\n *\n * Import from `sunpeak/host/chatgpt`:\n *\n * @example\n * ```tsx\n * import { useUploadFile } from 'sunpeak/host/chatgpt';\n *\n * function ImageUploader() {\n *   const uploadFile = useUploadFile();\n *\n *   const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {\n *     const file = e.currentTarget.files?.[0];\n *     if (!file) return;\n *     const { fileId } = await uploadFile(file);\n *     console.log('Uploaded:', fileId);\n *   };\n *\n *   return <input type=\"file\" accept=\"image/*\" onChange={handleChange} />;\n * }\n * ```\n */\nexport function useUploadFile(): (file: File) => Promise<OpenAIUploadFileResult> {\n  const app = useApp();\n  return useCallback(\n    async (file: File) => {\n      if (!app) {\n        throw new Error('[useUploadFile] App not connected');\n      }\n      const runtime = getOpenAIRuntime();\n      if (!runtime?.uploadFile) {\n        throw new Error('[useUploadFile] window.openai.uploadFile not available');\n      }\n      return runtime.uploadFile(file);\n    },\n    [app]\n  );\n}\n","import { useCallback } from 'react';\nimport { useApp } from '../../hooks/use-app';\nimport { getOpenAIRuntime, type OpenAIRequestModalParams } from './openai-types';\n\nexport type { OpenAIRequestModalParams as OpenModalParams };\n\n/**\n * Open a host-controlled modal in ChatGPT.\n *\n * Wraps `window.openai.requestModal` which is only available inside ChatGPT.\n * Pass a `template` URL to load alternate UI content in the modal, or omit\n * it to reuse the current UI.\n *\n * Import from `sunpeak/host/chatgpt`:\n *\n * @example\n * ```tsx\n * import { useRequestModal } from 'sunpeak/host/chatgpt';\n *\n * function CheckoutButton() {\n *   const requestModal = useRequestModal();\n *\n *   return (\n *     <button onClick={() => requestModal({ template: 'ui://widget/checkout.html' })}>\n *       Checkout\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useRequestModal(): (params: OpenAIRequestModalParams) => Promise<void> {\n  const app = useApp();\n  return useCallback(\n    async (params: OpenAIRequestModalParams) => {\n      if (!app) {\n        console.warn('[useRequestModal] App not connected');\n        return;\n      }\n      const runtime = getOpenAIRuntime();\n      if (!runtime?.requestModal) {\n        throw new Error('[useRequestModal] window.openai.requestModal not available');\n      }\n      return runtime.requestModal(params);\n    },\n    [app]\n  );\n}\n","import { useCallback } from 'react';\nimport { useApp } from '../../hooks/use-app';\nimport {\n  getOpenAIRuntime,\n  type OpenAICheckoutSession,\n  type OpenAICheckoutOrder,\n} from './openai-types';\n\nexport type { OpenAICheckoutSession as CheckoutSession };\nexport type { OpenAICheckoutOrder as CheckoutOrder };\n\n/**\n * Trigger the ChatGPT instant checkout flow.\n *\n * Wraps `window.openai.requestCheckout` which is only available inside\n * ChatGPT. Opens the host checkout UI, handles payment display, and\n * resolves with the finalized order. Rejects on error or user cancel.\n *\n * Import from `sunpeak/host/chatgpt`:\n *\n * @example\n * ```tsx\n * import { useRequestCheckout } from 'sunpeak/host/chatgpt';\n *\n * function BuyButton() {\n *   const requestCheckout = useRequestCheckout();\n *\n *   const handleBuy = async () => {\n *     try {\n *       const order = await requestCheckout({\n *         id: 'session-1',\n *         payment_provider: {\n *           provider: 'stripe',\n *           merchant_id: 'acct_xxx',\n *           supported_payment_methods: ['card', 'apple_pay'],\n *         },\n *         status: 'ready_for_payment',\n *         currency: 'USD',\n *         totals: [{ type: 'total', display_text: 'Total', amount: 999 }],\n *         links: [],\n *         payment_mode: 'live',\n *       });\n *       console.log('Order completed:', order.id);\n *     } catch {\n *       console.log('Checkout cancelled or failed');\n *     }\n *   };\n *\n *   return <button onClick={handleBuy}>Buy Now</button>;\n * }\n * ```\n */\nexport function useRequestCheckout(): (\n  session: OpenAICheckoutSession\n) => Promise<OpenAICheckoutOrder> {\n  const app = useApp();\n  return useCallback(\n    async (session: OpenAICheckoutSession) => {\n      if (!app) {\n        throw new Error('[useRequestCheckout] App not connected');\n      }\n      const runtime = getOpenAIRuntime();\n      if (!runtime?.requestCheckout) {\n        throw new Error('[useRequestCheckout] window.openai.requestCheckout not available');\n      }\n      return runtime.requestCheckout(session);\n    },\n    [app]\n  );\n}\n"],"mappings":";;;;;;;;;AAuFA,SAAgB,mBAA8C;AAC5D,KAAI,OAAO,WAAW,eAAe,YAAY,OAC/C,QAAQ,OAAgD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACzD5D,SAAgB,gBAAiE;CAC/E,MAAM,MAAM,gBAAA,QAAQ;AACpB,SAAA,GAAA,MAAA,aACE,OAAO,SAAe;AACpB,MAAI,CAAC,IACH,OAAM,IAAI,MAAM,oCAAoC;EAEtD,MAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS,WACZ,OAAM,IAAI,MAAM,yDAAyD;AAE3E,SAAO,QAAQ,WAAW,KAAK;IAEjC,CAAC,IAAI,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;AChBH,SAAgB,kBAAuE;CACrF,MAAM,MAAM,gBAAA,QAAQ;AACpB,SAAA,GAAA,MAAA,aACE,OAAO,WAAqC;AAC1C,MAAI,CAAC,KAAK;AACR,WAAQ,KAAK,sCAAsC;AACnD;;EAEF,MAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS,aACZ,OAAM,IAAI,MAAM,6DAA6D;AAE/E,SAAO,QAAQ,aAAa,OAAO;IAErC,CAAC,IAAI,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACOH,SAAgB,qBAEkB;CAChC,MAAM,MAAM,gBAAA,QAAQ;AACpB,SAAA,GAAA,MAAA,aACE,OAAO,YAAmC;AACxC,MAAI,CAAC,IACH,OAAM,IAAI,MAAM,yCAAyC;EAE3D,MAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS,gBACZ,OAAM,IAAI,MAAM,mEAAmE;AAErF,SAAO,QAAQ,gBAAgB,QAAQ;IAEzC,CAAC,IAAI,CACN"}

package/dist/host/chatgpt/index.js

@@ -1,4 +1,3 @@
-import "../../protocol-DJmRaBzO.js";
 import { t as useApp } from "../../use-app-BNbz1uzj.js";
 import { useCallback } from "react";
 //#region src/host/chatgpt/openai-types.ts

package/dist/host/chatgpt/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/host/chatgpt/openai-types.ts","../../../src/host/chatgpt/use-create-file.ts","../../../src/host/chatgpt/use-open-modal.ts","../../../src/host/chatgpt/use-request-checkout.ts"],"sourcesContent":["/**\n * TypeScript declarations for the `window.openai` ChatGPT runtime.\n *\n * These APIs are available inside ChatGPT-hosted iframes and provide\n * platform-specific capabilities beyond the MCP Apps standard.\n *\n * @see https://developers.openai.com/apps-sdk/mcp-apps-in-chatgpt\n */\n\nexport interface OpenAIUploadFileResult {\n  fileId: string;\n}\n\nexport interface OpenAIFileDownloadUrlResult {\n  downloadUrl: string;\n}\n\nexport interface OpenAIRequestModalParams {\n  /** URL of an alternate UI template to load in the modal. Omit to reuse the current UI. */\n  template?: string;\n  /** Arbitrary params forwarded to the modal content. */\n  params?: Record<string, unknown>;\n}\n\nexport interface OpenAICheckoutPaymentProvider {\n  provider: string;\n  merchant_id: string;\n  supported_payment_methods: string[];\n}\n\nexport interface OpenAICheckoutTotal {\n  type: string;\n  display_text: string;\n  amount: number;\n}\n\nexport interface OpenAICheckoutLink {\n  type: 'terms_of_use' | 'privacy_policy' | string;\n  url: string;\n}\n\nexport interface OpenAICheckoutSession {\n  id: string;\n  payment_provider: OpenAICheckoutPaymentProvider;\n  status: 'ready_for_payment';\n  currency: string;\n  totals: OpenAICheckoutTotal[];\n  links: OpenAICheckoutLink[];\n  payment_mode: 'live' | 'test';\n}\n\nexport interface OpenAICheckoutOrder {\n  id: string;\n  checkout_session_id: string;\n  status: 'completed' | string;\n  permalink_url?: string;\n}\n\n/**\n * The `window.openai` runtime object injected by ChatGPT into hosted iframes.\n */\nexport interface OpenAIRuntime {\n  // --- File APIs ---\n  uploadFile?(file: File): Promise<OpenAIUploadFileResult>;\n  getFileDownloadUrl?(params: { fileId: string }): Promise<OpenAIFileDownloadUrlResult>;\n\n  // --- Modal API ---\n  requestModal?(params: OpenAIRequestModalParams): Promise<void>;\n\n  // --- Checkout API ---\n  requestCheckout?(session: OpenAICheckoutSession): Promise<OpenAICheckoutOrder>;\n\n  // --- Display ---\n  requestClose?(): void;\n  requestDisplayMode?(params: { mode: 'inline' | 'PiP' | 'fullscreen' }): Promise<void>;\n\n  // --- Messaging ---\n  sendFollowUpMessage?(params: { prompt: string }): void;\n\n  // --- Other ---\n  openExternal?(params: { href: string }): void;\n}\n\n/**\n * Get the `window.openai` runtime if available.\n * Returns `undefined` outside of ChatGPT or in SSR.\n */\nexport function getOpenAIRuntime(): OpenAIRuntime | undefined {\n  if (typeof window !== 'undefined' && 'openai' in window) {\n    return (window as unknown as { openai: OpenAIRuntime }).openai;\n  }\n  return undefined;\n}\n","import { useCallback } from 'react';\nimport { useApp } from '../../hooks/use-app';\nimport { getOpenAIRuntime, type OpenAIUploadFileResult } from './openai-types';\n\nexport type { OpenAIUploadFileResult as CreateFileResult };\n\n/**\n * Upload a file from the app UI into the ChatGPT conversation.\n *\n * Wraps `window.openai.uploadFile` which is only available inside ChatGPT.\n * Supported formats: `image/png`, `image/jpeg`, `image/webp`.\n *\n * Import from `sunpeak/host/chatgpt`:\n *\n * @example\n * ```tsx\n * import { useUploadFile } from 'sunpeak/host/chatgpt';\n *\n * function ImageUploader() {\n *   const uploadFile = useUploadFile();\n *\n *   const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {\n *     const file = e.currentTarget.files?.[0];\n *     if (!file) return;\n *     const { fileId } = await uploadFile(file);\n *     console.log('Uploaded:', fileId);\n *   };\n *\n *   return <input type=\"file\" accept=\"image/*\" onChange={handleChange} />;\n * }\n * ```\n */\nexport function useUploadFile(): (file: File) => Promise<OpenAIUploadFileResult> {\n  const app = useApp();\n  return useCallback(\n    async (file: File) => {\n      if (!app) {\n        throw new Error('[useUploadFile] App not connected');\n      }\n      const runtime = getOpenAIRuntime();\n      if (!runtime?.uploadFile) {\n        throw new Error('[useUploadFile] window.openai.uploadFile not available');\n      }\n      return runtime.uploadFile(file);\n    },\n    [app]\n  );\n}\n","import { useCallback } from 'react';\nimport { useApp } from '../../hooks/use-app';\nimport { getOpenAIRuntime, type OpenAIRequestModalParams } from './openai-types';\n\nexport type { OpenAIRequestModalParams as OpenModalParams };\n\n/**\n * Open a host-controlled modal in ChatGPT.\n *\n * Wraps `window.openai.requestModal` which is only available inside ChatGPT.\n * Pass a `template` URL to load alternate UI content in the modal, or omit\n * it to reuse the current UI.\n *\n * Import from `sunpeak/host/chatgpt`:\n *\n * @example\n * ```tsx\n * import { useRequestModal } from 'sunpeak/host/chatgpt';\n *\n * function CheckoutButton() {\n *   const requestModal = useRequestModal();\n *\n *   return (\n *     <button onClick={() => requestModal({ template: 'ui://widget/checkout.html' })}>\n *       Checkout\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useRequestModal(): (params: OpenAIRequestModalParams) => Promise<void> {\n  const app = useApp();\n  return useCallback(\n    async (params: OpenAIRequestModalParams) => {\n      if (!app) {\n        console.warn('[useRequestModal] App not connected');\n        return;\n      }\n      const runtime = getOpenAIRuntime();\n      if (!runtime?.requestModal) {\n        throw new Error('[useRequestModal] window.openai.requestModal not available');\n      }\n      return runtime.requestModal(params);\n    },\n    [app]\n  );\n}\n","import { useCallback } from 'react';\nimport { useApp } from '../../hooks/use-app';\nimport {\n  getOpenAIRuntime,\n  type OpenAICheckoutSession,\n  type OpenAICheckoutOrder,\n} from './openai-types';\n\nexport type { OpenAICheckoutSession as CheckoutSession };\nexport type { OpenAICheckoutOrder as CheckoutOrder };\n\n/**\n * Trigger the ChatGPT instant checkout flow.\n *\n * Wraps `window.openai.requestCheckout` which is only available inside\n * ChatGPT. Opens the host checkout UI, handles payment display, and\n * resolves with the finalized order. Rejects on error or user cancel.\n *\n * Import from `sunpeak/host/chatgpt`:\n *\n * @example\n * ```tsx\n * import { useRequestCheckout } from 'sunpeak/host/chatgpt';\n *\n * function BuyButton() {\n *   const requestCheckout = useRequestCheckout();\n *\n *   const handleBuy = async () => {\n *     try {\n *       const order = await requestCheckout({\n *         id: 'session-1',\n *         payment_provider: {\n *           provider: 'stripe',\n *           merchant_id: 'acct_xxx',\n *           supported_payment_methods: ['card', 'apple_pay'],\n *         },\n *         status: 'ready_for_payment',\n *         currency: 'USD',\n *         totals: [{ type: 'total', display_text: 'Total', amount: 999 }],\n *         links: [],\n *         payment_mode: 'live',\n *       });\n *       console.log('Order completed:', order.id);\n *     } catch {\n *       console.log('Checkout cancelled or failed');\n *     }\n *   };\n *\n *   return <button onClick={handleBuy}>Buy Now</button>;\n * }\n * ```\n */\nexport function useRequestCheckout(): (\n  session: OpenAICheckoutSession\n) => Promise<OpenAICheckoutOrder> {\n  const app = useApp();\n  return useCallback(\n    async (session: OpenAICheckoutSession) => {\n      if (!app) {\n        throw new Error('[useRequestCheckout] App not connected');\n      }\n      const runtime = getOpenAIRuntime();\n      if (!runtime?.requestCheckout) {\n        throw new Error('[useRequestCheckout] window.openai.requestCheckout not available');\n      }\n      return runtime.requestCheckout(session);\n    },\n    [app]\n  );\n}\n"],"mappings":";;;;;;;;AAuFA,SAAgB,mBAA8C;AAC5D,KAAI,OAAO,WAAW,eAAe,YAAY,OAC/C,QAAQ,OAAgD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACzD5D,SAAgB,gBAAiE;CAC/E,MAAM,MAAM,QAAQ;AACpB,QAAO,YACL,OAAO,SAAe;AACpB,MAAI,CAAC,IACH,OAAM,IAAI,MAAM,oCAAoC;EAEtD,MAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS,WACZ,OAAM,IAAI,MAAM,yDAAyD;AAE3E,SAAO,QAAQ,WAAW,KAAK;IAEjC,CAAC,IAAI,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;AChBH,SAAgB,kBAAuE;CACrF,MAAM,MAAM,QAAQ;AACpB,QAAO,YACL,OAAO,WAAqC;AAC1C,MAAI,CAAC,KAAK;AACR,WAAQ,KAAK,sCAAsC;AACnD;;EAEF,MAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS,aACZ,OAAM,IAAI,MAAM,6DAA6D;AAE/E,SAAO,QAAQ,aAAa,OAAO;IAErC,CAAC,IAAI,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACOH,SAAgB,qBAEkB;CAChC,MAAM,MAAM,QAAQ;AACpB,QAAO,YACL,OAAO,YAAmC;AACxC,MAAI,CAAC,IACH,OAAM,IAAI,MAAM,yCAAyC;EAE3D,MAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS,gBACZ,OAAM,IAAI,MAAM,mEAAmE;AAErF,SAAO,QAAQ,gBAAgB,QAAQ;IAEzC,CAAC,IAAI,CACN"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/host/chatgpt/openai-types.ts","../../../src/host/chatgpt/use-create-file.ts","../../../src/host/chatgpt/use-open-modal.ts","../../../src/host/chatgpt/use-request-checkout.ts"],"sourcesContent":["/**\n * TypeScript declarations for the `window.openai` ChatGPT runtime.\n *\n * These APIs are available inside ChatGPT-hosted iframes and provide\n * platform-specific capabilities beyond the MCP Apps standard.\n *\n * @see https://developers.openai.com/apps-sdk/mcp-apps-in-chatgpt\n */\n\nexport interface OpenAIUploadFileResult {\n  fileId: string;\n}\n\nexport interface OpenAIFileDownloadUrlResult {\n  downloadUrl: string;\n}\n\nexport interface OpenAIRequestModalParams {\n  /** URL of an alternate UI template to load in the modal. Omit to reuse the current UI. */\n  template?: string;\n  /** Arbitrary params forwarded to the modal content. */\n  params?: Record<string, unknown>;\n}\n\nexport interface OpenAICheckoutPaymentProvider {\n  provider: string;\n  merchant_id: string;\n  supported_payment_methods: string[];\n}\n\nexport interface OpenAICheckoutTotal {\n  type: string;\n  display_text: string;\n  amount: number;\n}\n\nexport interface OpenAICheckoutLink {\n  type: 'terms_of_use' | 'privacy_policy' | string;\n  url: string;\n}\n\nexport interface OpenAICheckoutSession {\n  id: string;\n  payment_provider: OpenAICheckoutPaymentProvider;\n  status: 'ready_for_payment';\n  currency: string;\n  totals: OpenAICheckoutTotal[];\n  links: OpenAICheckoutLink[];\n  payment_mode: 'live' | 'test';\n}\n\nexport interface OpenAICheckoutOrder {\n  id: string;\n  checkout_session_id: string;\n  status: 'completed' | string;\n  permalink_url?: string;\n}\n\n/**\n * The `window.openai` runtime object injected by ChatGPT into hosted iframes.\n */\nexport interface OpenAIRuntime {\n  // --- File APIs ---\n  uploadFile?(file: File): Promise<OpenAIUploadFileResult>;\n  getFileDownloadUrl?(params: { fileId: string }): Promise<OpenAIFileDownloadUrlResult>;\n\n  // --- Modal API ---\n  requestModal?(params: OpenAIRequestModalParams): Promise<void>;\n\n  // --- Checkout API ---\n  requestCheckout?(session: OpenAICheckoutSession): Promise<OpenAICheckoutOrder>;\n\n  // --- Display ---\n  requestClose?(): void;\n  requestDisplayMode?(params: { mode: 'inline' | 'PiP' | 'fullscreen' }): Promise<void>;\n\n  // --- Messaging ---\n  sendFollowUpMessage?(params: { prompt: string }): void;\n\n  // --- Other ---\n  openExternal?(params: { href: string }): void;\n}\n\n/**\n * Get the `window.openai` runtime if available.\n * Returns `undefined` outside of ChatGPT or in SSR.\n */\nexport function getOpenAIRuntime(): OpenAIRuntime | undefined {\n  if (typeof window !== 'undefined' && 'openai' in window) {\n    return (window as unknown as { openai: OpenAIRuntime }).openai;\n  }\n  return undefined;\n}\n","import { useCallback } from 'react';\nimport { useApp } from '../../hooks/use-app';\nimport { getOpenAIRuntime, type OpenAIUploadFileResult } from './openai-types';\n\nexport type { OpenAIUploadFileResult as CreateFileResult };\n\n/**\n * Upload a file from the app UI into the ChatGPT conversation.\n *\n * Wraps `window.openai.uploadFile` which is only available inside ChatGPT.\n * Supported formats: `image/png`, `image/jpeg`, `image/webp`.\n *\n * Import from `sunpeak/host/chatgpt`:\n *\n * @example\n * ```tsx\n * import { useUploadFile } from 'sunpeak/host/chatgpt';\n *\n * function ImageUploader() {\n *   const uploadFile = useUploadFile();\n *\n *   const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {\n *     const file = e.currentTarget.files?.[0];\n *     if (!file) return;\n *     const { fileId } = await uploadFile(file);\n *     console.log('Uploaded:', fileId);\n *   };\n *\n *   return <input type=\"file\" accept=\"image/*\" onChange={handleChange} />;\n * }\n * ```\n */\nexport function useUploadFile(): (file: File) => Promise<OpenAIUploadFileResult> {\n  const app = useApp();\n  return useCallback(\n    async (file: File) => {\n      if (!app) {\n        throw new Error('[useUploadFile] App not connected');\n      }\n      const runtime = getOpenAIRuntime();\n      if (!runtime?.uploadFile) {\n        throw new Error('[useUploadFile] window.openai.uploadFile not available');\n      }\n      return runtime.uploadFile(file);\n    },\n    [app]\n  );\n}\n","import { useCallback } from 'react';\nimport { useApp } from '../../hooks/use-app';\nimport { getOpenAIRuntime, type OpenAIRequestModalParams } from './openai-types';\n\nexport type { OpenAIRequestModalParams as OpenModalParams };\n\n/**\n * Open a host-controlled modal in ChatGPT.\n *\n * Wraps `window.openai.requestModal` which is only available inside ChatGPT.\n * Pass a `template` URL to load alternate UI content in the modal, or omit\n * it to reuse the current UI.\n *\n * Import from `sunpeak/host/chatgpt`:\n *\n * @example\n * ```tsx\n * import { useRequestModal } from 'sunpeak/host/chatgpt';\n *\n * function CheckoutButton() {\n *   const requestModal = useRequestModal();\n *\n *   return (\n *     <button onClick={() => requestModal({ template: 'ui://widget/checkout.html' })}>\n *       Checkout\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useRequestModal(): (params: OpenAIRequestModalParams) => Promise<void> {\n  const app = useApp();\n  return useCallback(\n    async (params: OpenAIRequestModalParams) => {\n      if (!app) {\n        console.warn('[useRequestModal] App not connected');\n        return;\n      }\n      const runtime = getOpenAIRuntime();\n      if (!runtime?.requestModal) {\n        throw new Error('[useRequestModal] window.openai.requestModal not available');\n      }\n      return runtime.requestModal(params);\n    },\n    [app]\n  );\n}\n","import { useCallback } from 'react';\nimport { useApp } from '../../hooks/use-app';\nimport {\n  getOpenAIRuntime,\n  type OpenAICheckoutSession,\n  type OpenAICheckoutOrder,\n} from './openai-types';\n\nexport type { OpenAICheckoutSession as CheckoutSession };\nexport type { OpenAICheckoutOrder as CheckoutOrder };\n\n/**\n * Trigger the ChatGPT instant checkout flow.\n *\n * Wraps `window.openai.requestCheckout` which is only available inside\n * ChatGPT. Opens the host checkout UI, handles payment display, and\n * resolves with the finalized order. Rejects on error or user cancel.\n *\n * Import from `sunpeak/host/chatgpt`:\n *\n * @example\n * ```tsx\n * import { useRequestCheckout } from 'sunpeak/host/chatgpt';\n *\n * function BuyButton() {\n *   const requestCheckout = useRequestCheckout();\n *\n *   const handleBuy = async () => {\n *     try {\n *       const order = await requestCheckout({\n *         id: 'session-1',\n *         payment_provider: {\n *           provider: 'stripe',\n *           merchant_id: 'acct_xxx',\n *           supported_payment_methods: ['card', 'apple_pay'],\n *         },\n *         status: 'ready_for_payment',\n *         currency: 'USD',\n *         totals: [{ type: 'total', display_text: 'Total', amount: 999 }],\n *         links: [],\n *         payment_mode: 'live',\n *       });\n *       console.log('Order completed:', order.id);\n *     } catch {\n *       console.log('Checkout cancelled or failed');\n *     }\n *   };\n *\n *   return <button onClick={handleBuy}>Buy Now</button>;\n * }\n * ```\n */\nexport function useRequestCheckout(): (\n  session: OpenAICheckoutSession\n) => Promise<OpenAICheckoutOrder> {\n  const app = useApp();\n  return useCallback(\n    async (session: OpenAICheckoutSession) => {\n      if (!app) {\n        throw new Error('[useRequestCheckout] App not connected');\n      }\n      const runtime = getOpenAIRuntime();\n      if (!runtime?.requestCheckout) {\n        throw new Error('[useRequestCheckout] window.openai.requestCheckout not available');\n      }\n      return runtime.requestCheckout(session);\n    },\n    [app]\n  );\n}\n"],"mappings":";;;;;;;AAuFA,SAAgB,mBAA8C;AAC5D,KAAI,OAAO,WAAW,eAAe,YAAY,OAC/C,QAAQ,OAAgD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACzD5D,SAAgB,gBAAiE;CAC/E,MAAM,MAAM,QAAQ;AACpB,QAAO,YACL,OAAO,SAAe;AACpB,MAAI,CAAC,IACH,OAAM,IAAI,MAAM,oCAAoC;EAEtD,MAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS,WACZ,OAAM,IAAI,MAAM,yDAAyD;AAE3E,SAAO,QAAQ,WAAW,KAAK;IAEjC,CAAC,IAAI,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;AChBH,SAAgB,kBAAuE;CACrF,MAAM,MAAM,QAAQ;AACpB,QAAO,YACL,OAAO,WAAqC;AAC1C,MAAI,CAAC,KAAK;AACR,WAAQ,KAAK,sCAAsC;AACnD;;EAEF,MAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS,aACZ,OAAM,IAAI,MAAM,6DAA6D;AAE/E,SAAO,QAAQ,aAAa,OAAO;IAErC,CAAC,IAAI,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACOH,SAAgB,qBAEkB;CAChC,MAAM,MAAM,QAAQ;AACpB,QAAO,YACL,OAAO,YAAmC;AACxC,MAAI,CAAC,IACH,OAAM,IAAI,MAAM,yCAAyC;EAE3D,MAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS,gBACZ,OAAM,IAAI,MAAM,mEAAmE;AAErF,SAAO,QAAQ,gBAAgB,QAAQ;IAEzC,CAAC,IAAI,CACN"}

package/dist/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("./chunk-9hOWP6kD.cjs");
 const require_protocol = require("./protocol-jbxhzcnS.cjs");
 const require_use_app = require("./use-app-Dqh20JPP.cjs");
-const require_inspector = require("./inspector-DRD_Q66E.cjs");
+const require_inspector = require("./inspector-CTMccsz9.cjs");
 const require_host_index = require("./host/index.cjs");
 const require_inspector_index = require("./inspector/index.cjs");
 const require_chatgpt_index = require("./chatgpt/index.cjs");

package/dist/index.js

@@ -1,6 +1,6 @@
 import { $ as literal, L as RequestIdSchema, Q as boolean, R as ResourceLinkSchema, U as ToolSchema, X as _undefined, Z as array, _ as ImplementationSchema, a as CallToolResultSchema, at as unknown, et as number, it as union, nt as record, p as EmbeddedResourceSchema, rt as string, s as ContentBlockSchema, tt as object } from "./protocol-DJmRaBzO.js";
 import { $ as s, A as V, B as e, C as QQ, D as T, E as S, F as _Q, G as k, H as gQ, I as a, J as o, K as m, L as b, M as W, N as WQ, O as TQ, P as _, Q as r, R as c, S as PQ, T as RQ, U as h, V as g, W as jQ, X as q, Y as p, Z as qQ, _ as LQ, a as B, at as zQ, b as OQ, c as EQ, d as G, et as t, f as I, g as L, h as K, i as AQ, it as z, j as VQ, k as U, l as F, m as J, n as AppProvider, nt as w, o as BQ, p as IQ, q as n, r as A, rt as x, s as C, t as useApp, tt as vX, u as FQ, v as MX, w as R, x as P, y as O, z as d } from "./use-app-BNbz1uzj.js";
-import { S as DEFAULT_STYLE_VARIABLES } from "./inspector-CjSoXm6N.js";
+import { S as DEFAULT_STYLE_VARIABLES } from "./inspector-DkS75JCk.js";
 import { detectHost, isChatGPT, isClaude } from "./host/index.js";
 import { t as inspector_exports } from "./inspector/index.js";
 import { t as chatgpt_exports } from "./chatgpt/index.js";

package/dist/inspector/index.cjs

@@ -1,8 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-9hOWP6kD.cjs");
-require("../protocol-jbxhzcnS.cjs");
-const require_inspector = require("../inspector-DRD_Q66E.cjs");
-const require_inspector_url = require("../inspector-url-7qhtJwY6.cjs");
+const require_inspector = require("../inspector-CTMccsz9.cjs");
+const require_inspector_url = require("../inspector-url-C3LTKgXt.cjs");
 const require_discovery = require("../discovery-Clu4uHp1.cjs");
 //#region src/inspector/index.ts
 var inspector_exports = /* @__PURE__ */ require_chunk.__exportAll({

package/dist/inspector/index.js

@@ -1,7 +1,6 @@
 import { r as __exportAll } from "../chunk-D6g4UhsZ.js";
-import "../protocol-DJmRaBzO.js";
-import { _ as McpAppHost, a as SidebarControl, b as getRegisteredHosts, c as SidebarTextarea, d as ThemeProvider, f as useThemeContext, g as extractResourceCSP, h as IframeResource, i as SidebarCollapsibleControl, l as SidebarToggle, m as useInspectorState, n as resolveServerToolResult, o as SidebarInput, p as useMcpConnection, r as SidebarCheckbox, s as SidebarSelect, t as Inspector, u as SimpleSidebar, v as SCREEN_WIDTHS, x as registerHostShell, y as getHostShell } from "../inspector-CjSoXm6N.js";
-import { t as createInspectorUrl } from "../inspector-url-DuEFmxLP.js";
+import { _ as McpAppHost, a as SidebarControl, b as getRegisteredHosts, c as SidebarTextarea, d as ThemeProvider, f as useThemeContext, g as extractResourceCSP, h as IframeResource, i as SidebarCollapsibleControl, l as SidebarToggle, m as useInspectorState, n as resolveServerToolResult, o as SidebarInput, p as useMcpConnection, r as SidebarCheckbox, s as SidebarSelect, t as Inspector, u as SimpleSidebar, v as SCREEN_WIDTHS, x as registerHostShell, y as getHostShell } from "../inspector-DkS75JCk.js";
+import { t as createInspectorUrl } from "../inspector-url-CyQcuBI9.js";
 import { c as toPascalCase, i as findResourceKey, n as extractSimulationKey, r as findResourceDirs, s as getComponentName, t as extractResourceKey } from "../discovery-Cgoegt62.js";
 //#region src/inspector/index.ts
 var inspector_exports = /* @__PURE__ */ __exportAll({

package/dist/inspector/inspector-url.d.ts

@@ -109,6 +109,19 @@ export interface InspectorUrlParams {
      * Enable Prod Resources mode (production dist/ bundles instead of HMR).
      */
     prodResources?: boolean;
+    /**
+     * Show the inspector sidebar. Useful for headless testing or embedding
+     * the inspector as a pure resource viewer.
+     * @default true
+     */
+    sidebar?: boolean;
+    /**
+     * Show the dev overlay (resource timestamp + tool timing) inside resources.
+     * Set to false to hide it during e2e tests so it doesn't interfere with
+     * element assertions.
+     * @default true
+     */
+    devOverlay?: boolean;
 }
 /**
  * Creates a URL path with query parameters for the Inspector.

package/dist/inspector/use-inspector-state.d.ts

@@ -88,6 +88,8 @@ export interface InspectorState {
     prefersBorder: boolean;
     urlTool: string | undefined;
     urlProdResources: boolean | undefined;
+    urlSidebar: boolean | undefined;
+    urlDevOverlay: boolean | undefined;
 }
 export declare function useInspectorState({ simulations, defaultHost, }: UseInspectorStateOptions): InspectorState;
 export {};

package/dist/{inspector-DRD_Q66E.cjs → inspector-CTMccsz9.cjs}

@@ -2338,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";
@@ -2370,7 +2374,9 @@ function parseUrlParams() {
 		deviceCapabilities,
 		safeAreaInsets,
 		host: host ?? void 0,
-		prodResources
+		prodResources,
+		sidebar,
+		devOverlay
 	};
 }
 function useInspectorState({ simulations, defaultHost = "chatgpt" }) {
@@ -2621,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
@@ -2655,18 +2663,23 @@ function useMcpConnection(initialServerUrl) {
 				body: JSON.stringify(body)
 			});
 			if (!res.ok) {
-				let message = `Connection failed (${res.status})`;
+				let message;
 				try {
 					const json = await res.json();
 					if (json.error) message = json.error;
 				} catch {}
+				if (!message) if (res.status === 404) message = "Server not found at this URL. Check the URL and make sure the server is running.";
+				else if (res.status >= 500) message = `Server error (${res.status}). Check the MCP server logs for details.`;
+				else message = `Connection failed (${res.status})`;
 				throw new Error(message);
 			}
 			const data = await res.json();
 			setStatus("connected");
 			setSimulations(data.simulations ?? void 0);
 		} catch (err) {
-			setError(err instanceof Error ? err.message : String(err));
+			let message = err instanceof Error ? err.message : String(err);
+			if (err instanceof TypeError && message === "Failed to fetch") message = "Cannot reach MCP server. Is it running?";
+			setError(message);
 			setStatus("error");
 			setSimulations(void 0);
 		}
@@ -2685,7 +2698,10 @@ function useMcpConnection(initialServerUrl) {
 			try {
 				const res = await fetch("/__sunpeak/list-tools");
 				if (cancelled) return;
-				if (!res.ok) throw new Error(`Health check failed (${res.status})`);
+				if (!res.ok) {
+					const msg = res.status === 404 ? "MCP server not reachable. Is it running?" : `Health check failed (${res.status}). Check the MCP server logs.`;
+					throw new Error(msg);
+				}
 				setStatus("connected");
 			} catch (err) {
 				if (cancelled) return;
@@ -3196,6 +3212,8 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 	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);
@@ -3366,26 +3384,47 @@ function Inspector({ children, simulations: initialSimulations = {}, appName = "
 		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: [{
@@ -3520,7 +3559,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;
@@ -3638,6 +3678,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,
@@ -4170,18 +4230,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
 		})
 	});
 }
@@ -4319,4 +4368,4 @@ Object.defineProperty(exports, "useThemeContext", {
 	}
 });
 
-//# sourceMappingURL=inspector-DRD_Q66E.cjs.map
+//# sourceMappingURL=inspector-CTMccsz9.cjs.map