sunpeak 0.16.17 → 0.16.21

package/README.md

@@ -18,7 +18,7 @@
 
 Local-first MCP Apps framework.
 
-Quickstart, build, test, and ship your Claude or ChatGPT App!
+Quickstart, build, test, and ship your Claude Connector or ChatGPT App!
 
 [Demo (Hosted)](https://sunpeak.ai/simulator) ~
 [Demo (Video)](https://cdn.sunpeak.ai/sunpeak-demo-prod.mp4) ~
@@ -49,7 +49,7 @@ sunpeak new
 
 ### The `sunpeak` library
 
-1. Runtime APIs: Strongly typed React hooks for interacting with the host runtime (`useApp`, `useToolData`, `useAppState`, `useHostContext`, `useUpdateModelContext`, `useAppTools`), architected to **support generic and platform-specific features** (ChatGPT, Claude, etc.). Platform-specific hooks like `useUploadFile`, `useRequestModal`, and `useRequestCheckout` are available via `sunpeak/platform/chatgpt`, with `isChatGPT()` / `isClaude()` platform detection via `sunpeak/platform`.
+1. Runtime APIs: Strongly typed React hooks for interacting with the host runtime (`useApp`, `useToolData`, `useAppState`, `useHostContext`, `useUpdateModelContext`, `useAppTools`), architected to **support generic and platform-specific features** (ChatGPT, Claude, etc.). Host-specific hooks like `useUploadFile`, `useRequestModal`, and `useRequestCheckout` are available via `sunpeak/host/chatgpt`, with `isChatGPT()` / `isClaude()` host detection via `sunpeak/host`.
 2. Multi-host simulator: React component replicating host runtimes (ChatGPT, Claude) to **test Apps locally and automatically** via UI, props, or URL parameters.
 3. MCP server: Serve Resources with mock data to hosts like ChatGPT and Claude with HMR (**no more cache issues or 5-click manual refreshes**).
 

package/bin/commands/build.mjs

@@ -355,7 +355,7 @@ ${jsContents}
 
   // Find tool files
   const toolFiles = existsSync(toolsDir)
-    ? readdirSync(toolsDir).filter(f => f.endsWith('.ts'))
+    ? readdirSync(toolsDir).filter(f => f.endsWith('.ts') && !f.endsWith('.test.ts'))
     : [];
 
   const hasServerEntry = existsSync(serverEntryPath);

package/bin/commands/dev.mjs

@@ -62,7 +62,7 @@ async function importFromProject(require, moduleName) {
  *
  * When a file changes during a build, the current build is killed and restarted.
  */
-function startBuildWatcher(projectRoot, resourcesDir, mcpHandle) {
+function startBuildWatcher(projectRoot, resourcesDir, mcpHandle, { skipInitialBuild = false } = {}) {
   let activeChild = null;
   const sunpeakBin = join(dirname(new URL(import.meta.url).pathname), '..', 'sunpeak.js');
 
@@ -94,8 +94,10 @@ function startBuildWatcher(projectRoot, resourcesDir, mcpHandle) {
     });
   };
 
-  // Initial build
-  runBuild();
+  // Initial build (skip when --prod-resources already ran a synchronous build)
+  if (!skipInitialBuild) {
+    runBuild();
+  }
 
   // Watch src/resources/ for changes using fs.watch (recursive supported on macOS/Windows)
   let debounceTimer = null;
@@ -150,6 +152,13 @@ export async function dev(projectRoot = process.cwd(), args = []) {
   // Parse --no-begging flag
   const noBegging = args.includes('--no-begging');
 
+  // Parse --prod-tools and --prod-resources flags
+  const isProdTools = args.includes('--prod-tools');
+  const isProdResources = args.includes('--prod-resources');
+
+  if (isProdTools) console.log('Prod Tools enabled by default (toggle in simulator sidebar)');
+  if (isProdResources) console.log('Prod Resources: resources will use production-built HTML from dist/');
+
   console.log(`Starting Vite dev server on port ${port}...`);
 
   // Check if we're in the sunpeak workspace (directory is named "template")
@@ -197,10 +206,96 @@ export async function dev(projectRoot = process.cwd(), args = []) {
     },
   });
 
+  // Vite plugin that proxies callServerTool to real tool handlers
+  const sunpeakCallToolPlugin = () => ({
+    name: 'sunpeak-call-tool',
+    configureServer(server) {
+      server.middlewares.use('/__sunpeak/call-tool', async (req, res) => {
+        if (req.method !== 'POST') {
+          res.statusCode = 405;
+          res.end('Method not allowed');
+          return;
+        }
+        const chunks = [];
+        for await (const chunk of req) chunks.push(chunk);
+        const body = JSON.parse(Buffer.concat(chunks).toString());
+        const { name, arguments: args } = body;
+        const toolEntry = toolPathMap.get(name);
+        if (!toolEntry) {
+          res.setHeader('Content-Type', 'application/json');
+          res.end(JSON.stringify({
+            content: [{ type: 'text', text: `[Prod Tools] Tool "${name}" not found` }],
+            isError: true,
+          }));
+          return;
+        }
+        try {
+          // Re-load the handler module on each call so edits take effect without restart
+          const mod = await toolLoaderServer.ssrLoadModule(`./${toolEntry.relativePath}`);
+          const handler = mod.default;
+          if (typeof handler !== 'function') {
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({
+              content: [{ type: 'text', text: `[Prod Tools] Tool "${name}" has no default export handler` }],
+              isError: true,
+            }));
+            return;
+          }
+          let result = await handler(args ?? {}, {});
+          if (typeof result === 'string') {
+            result = { content: [{ type: 'text', text: result }] };
+          }
+          res.setHeader('Content-Type', 'application/json');
+          res.end(JSON.stringify(result));
+        } catch (err) {
+          res.setHeader('Content-Type', 'application/json');
+          res.end(JSON.stringify({
+            content: [{ type: 'text', text: `[Prod Tools] Tool error: ${err.message}` }],
+            isError: true,
+          }));
+        }
+      });
+    },
+  });
+
+  // Vite plugin that serves production-built HTML from dist/
+  const sunpeakDistPlugin = () => ({
+    name: 'sunpeak-dist',
+    configureServer(server) {
+      server.middlewares.use('/dist', (req, res, next) => {
+        const filePath = join(projectRoot, 'dist', req.url);
+        if (filePath.endsWith('.html')) {
+          if (existsSync(filePath)) {
+            res.setHeader('Content-Type', 'text/html');
+            res.setHeader('Cache-Control', 'no-cache');
+            res.end(readFileSync(filePath));
+          } else {
+            // Return 404 instead of falling through to Vite's SPA fallback,
+            // which would serve the simulator's own index.html.
+            res.statusCode = 404;
+            res.end();
+          }
+          return;
+        }
+        next();
+      });
+    },
+  });
+
   // Create and start Vite dev server programmatically
   const server = await createServer({
     root: projectRoot,
-    plugins: [react(), tailwindcss(), sunpeakFaviconPlugin()],
+    plugins: [
+      react(),
+      tailwindcss(),
+      sunpeakFaviconPlugin(),
+      sunpeakCallToolPlugin(),
+      sunpeakDistPlugin(),
+    ],
+    define: {
+      '__SUNPEAK_PROD_TOOLS__': JSON.stringify(isProdTools),
+      '__SUNPEAK_PROD_RESOURCES__': JSON.stringify(isProdResources),
+    },
     resolve: {
       alias: {
         '@': path.resolve(projectRoot, 'src'),
@@ -216,6 +311,23 @@ export async function dev(projectRoot = process.cwd(), args = []) {
     },
   });
 
+  // --prod-resources: Run initial production build so dist/ is ready before server starts
+  if (isProdResources) {
+    console.log('Building production resources...');
+    const sunpeakBin = join(dirname(new URL(import.meta.url).pathname), '..', 'sunpeak.js');
+    const { execSync } = await import('child_process');
+    try {
+      execSync(`${process.execPath} ${sunpeakBin} build`, {
+        cwd: projectRoot,
+        stdio: 'inherit',
+        env: { ...process.env, NODE_ENV: 'production' },
+      });
+    } catch {
+      console.error('Build failed. Run `sunpeak build` manually to debug.');
+      process.exit(1);
+    }
+  }
+
   await server.listen();
   server.printUrls();
   server.bindCLIShortcuts({ print: true });
@@ -270,19 +382,21 @@ export async function dev(projectRoot = process.cwd(), args = []) {
     logLevel: 'silent',
   });
 
-  // Load real handlers and schemas for backend-only tools
+  // Build path map for prod-tools handler reloading (re-imports on each call for HMR).
+  // Also do an initial load to validate handlers and populate toolHandlerMap for the MCP server.
+  const toolPathMap = new Map();
   const toolHandlerMap = new Map();
   for (const [toolName, { tool, path: toolPath }] of toolMap) {
-    if (!tool.resource) {
-      try {
-        const relativePath = path.relative(projectRoot, toolPath);
-        const mod = await toolLoaderServer.ssrLoadModule(`./${relativePath}`);
-        if (typeof mod.default === 'function') {
-          toolHandlerMap.set(toolName, { handler: mod.default });
-        }
-      } catch (err) {
-        console.warn(`Warning: Could not load handler for backend-only tool "${toolName}": ${err.message}`);
+    void tool; // Used for metadata; handler loaded unconditionally
+    const relativePath = path.relative(projectRoot, toolPath);
+    toolPathMap.set(toolName, { relativePath });
+    try {
+      const mod = await toolLoaderServer.ssrLoadModule(`./${relativePath}`);
+      if (typeof mod.default === 'function') {
+        toolHandlerMap.set(toolName, { handler: mod.default });
       }
+    } catch (err) {
+      console.warn(`Warning: Could not load handler for tool "${toolName}": ${err.message}`);
     }
   }
 
@@ -328,8 +442,10 @@ export async function dev(projectRoot = process.cwd(), args = []) {
         srcPath,
         resource: resourceMap.get(resourceKey),
       } : {}),
-      // Attach real handler + schema for backend-only tools (consumed by callServerTool)
-      ...(toolHandlerMap.has(toolName) ? {
+      // Attach real handler for tools consumed by the MCP server.
+      // Backend-only tools (no resource) always need handlers for callServerTool.
+      // UI tools only get handlers in --prod-tools mode (otherwise simulation mock data is used).
+      ...((toolHandlerMap.has(toolName) && (!resourceKey || isProdTools)) ? {
         handler: toolHandlerMap.get(toolName).handler,
       } : {}),
     });
@@ -422,7 +538,7 @@ if (import.meta.hot) {
       },
       server: {
         middlewareMode: true,
-        hmr: { port: 24679 },
+        hmr: { port: Number(process.env.SUNPEAK_HMR_PORT || 24679) },
         allowedHosts: true,
         watch: {
           // Only watch files that affect the UI bundle (not JSON, tests, etc.)
@@ -449,7 +565,9 @@ if (import.meta.hot) {
       version: pkg.version || '0.1.0',
       simulations,
       port: 8000,
-      viteServer: mcpViteServer,
+      // In --prod-resources mode, don't pass viteServer so the MCP server serves pre-built HTML.
+      // Otherwise, pass it so ChatGPT gets Vite HMR.
+      viteServer: isProdResources ? undefined : mcpViteServer,
     });
 
     // Build production bundles and watch for changes.
@@ -457,7 +575,7 @@ if (import.meta.hot) {
     // reach the local Vite dev server. The watcher rebuilds on source file changes
     // so the prod output stays fresh without manual `sunpeak build`.
     // On successful builds, mcpHandle.invalidateResources() notifies tunnel sessions.
-    startBuildWatcher(projectRoot, resourcesDir, mcpHandle);
+    startBuildWatcher(projectRoot, resourcesDir, mcpHandle, { skipInitialBuild: isProdResources });
 
     // Handle signals - close all servers
     process.on('SIGINT', async () => {

package/bin/commands/new.mjs

@@ -73,6 +73,7 @@ export const defaultDeps = {
   execAsync,
   promptName: defaultPromptName,
   selectResources: defaultSelectResources,
+  confirm: clack.confirm,
   intro: clack.intro,
   outro: clack.outro,
   spinner: clack.spinner,
@@ -191,9 +192,9 @@ export async function init(projectName, resourcesArg, deps = defaultDeps) {
             return false;
           }
         }
-        // Skip tool files for excluded resources: src/tools/*.ts
+        // Skip tool files (and their tests) for excluded resources: src/tools/*.ts
         if (src.includes('/src/tools/') && name.endsWith('.ts')) {
-          const baseName = name.replace(/\.ts$/, '');
+          const baseName = name.replace(/\.(test\.)?ts$/, '');
           if (baseName === resource || baseName.startsWith(resource + '-') || baseName.endsWith('-' + resource)) {
             return false;
           }
@@ -266,6 +267,24 @@ export async function init(projectName, resourcesArg, deps = defaultDeps) {
     s.stop(`Install failed. You can try running "${pm} install" manually.`);
   }
 
+  // Offer to install the sunpeak skill (only in interactive mode)
+  if (resourcesArg === undefined) {
+    const installSkill = await d.confirm({
+      message: 'Install the sunpeak skill? (helps your coding agent build your app)',
+      initialValue: true,
+    });
+    if (!clack.isCancel(installSkill) && installSkill) {
+      try {
+        d.execSync('npx skills add Sunpeak-AI/sunpeak@create-sunpeak-app', {
+          cwd: targetDir,
+          stdio: 'inherit',
+        });
+      } catch {
+        d.console.log('Skill install skipped. You can install later with: npx skills add Sunpeak-AI/sunpeak@create-sunpeak-app');
+      }
+    }
+  }
+
   const runCmd = pm === 'npm' ? 'npm run' : pm;
 
   d.outro(`Done! To get started:

package/bin/commands/start.mjs

@@ -114,7 +114,7 @@ export async function start(projectRoot = process.cwd(), args = []) {
   const tools = [];
 
   if (existsSync(toolsDir)) {
-    const toolFiles = readdirSync(toolsDir).filter(f => f.endsWith('.js'));
+    const toolFiles = readdirSync(toolsDir).filter(f => f.endsWith('.js') && !f.endsWith('.test.js'));
 
     for (const file of toolFiles) {
       const toolName = file.replace(/\.js$/, '');

package/dist/chatgpt/chatgpt-conversation.d.ts

@@ -17,6 +17,8 @@ interface ConversationProps {
      * border from flashing at a stale height before the iframe resizes.
      */
     isTransitioning?: boolean;
+    /** Optional action element rendered in the conversation header (e.g., Run button) */
+    headerAction?: React.ReactNode;
 }
 /**
  * Conversation layout that renders children (iframe) at a stable tree position.
@@ -31,5 +33,5 @@ interface ConversationProps {
  * - **fullscreen**: content wrapper becomes `position: fixed` covering the viewport;
  *   fullscreen chrome (header/footer) rendered as a separate fixed overlay
  */
-export declare function Conversation({ children, screenWidth, displayMode, platform, onRequestDisplayMode, appName, appIcon, userMessage, isTransitioning, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Conversation({ children, screenWidth, displayMode, platform, onRequestDisplayMode, appName, appIcon, userMessage, isTransitioning, headerAction, }: ConversationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/chatgpt/globals.css

@@ -618,6 +618,10 @@
     left: 340px;
   }
 
+  .-z-10 {
+    z-index: calc(10 * -1);
+  }
+
   .z-10 {
     z-index: 10;
   }
@@ -642,6 +646,18 @@
     z-index: 51;
   }
 
+  .z-\[200\] {
+    z-index: 200;
+  }
+
+  .col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+
+  .col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+
   .container {
     width: 100%;
   }
@@ -1034,10 +1050,18 @@
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
   .grid-cols-\[1fr_auto_1fr\] {
     grid-template-columns: 1fr auto 1fr;
   }
 
+  .grid-cols-\[2fr_1fr\] {
+    grid-template-columns: 2fr 1fr;
+  }
+
   .flex-col {
     flex-direction: column;
   }
@@ -1460,6 +1484,10 @@
     padding: calc(var(--spacing) * 5);
   }
 
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
+
   .p-\[1px\] {
     padding: 1px;
   }
@@ -1520,10 +1548,6 @@
     padding-block: calc(var(--spacing) * 4);
   }
 
-  .py-8 {
-    padding-block: calc(var(--spacing) * 8);
-  }
-
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
@@ -1552,10 +1576,6 @@
     padding-bottom: calc(var(--spacing) * 10);
   }
 
-  .pl-4 {
-    padding-left: calc(var(--spacing) * 4);
-  }
-
   .text-center {
     text-align: center;
   }
@@ -1710,6 +1730,10 @@
     text-transform: uppercase;
   }
 
+  .no-underline {
+    text-decoration-line: none;
+  }
+
   .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -1774,6 +1798,11 @@
     outline-width: 1px;
   }
 
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
+  }
+
   .filter {
     filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
   }

package/dist/chatgpt/index.cjs

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const simulator = require("../simulator-BEFsuj9Z.cjs");
-const chatgpt_index = require("../index-BFD3bAHd.cjs");
-const simulatorUrl = require("../simulator-url-rgg_KYOg.cjs");
-const discovery = require("../discovery-SviNiBkF.cjs");
+const simulator = require("../simulator-FFNttkqL.cjs");
+const simulatorUrl = require("../simulator-url-DcSYRl-P.cjs");
+const discovery = require("../discovery-D1gpaVz4.cjs");
 exports.IframeResource = simulator.IframeResource;
 exports.McpAppHost = simulator.McpAppHost;
 exports.SCREEN_WIDTHS = simulator.SCREEN_WIDTHS;
@@ -12,7 +11,6 @@ exports.ThemeProvider = simulator.ThemeProvider;
 exports.extractResourceCSP = simulator.extractResourceCSP;
 exports.resolveServerToolResult = simulator.resolveServerToolResult;
 exports.useThemeContext = simulator.useThemeContext;
-exports.ChatGPTSimulator = chatgpt_index.ChatGPTSimulator;
 exports.createSimulatorUrl = simulatorUrl.createSimulatorUrl;
 exports.buildDevSimulations = discovery.buildDevSimulations;
 exports.buildResourceMap = discovery.buildResourceMap;

package/dist/chatgpt/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chatgpt/index.d.ts

@@ -1,4 +1,3 @@
-export { ChatGPTSimulator } from './chatgpt-simulator';
 export { Simulator } from '../simulator/simulator';
 export type { Simulation, ServerToolMock } from '../types/simulation';
 export { resolveServerToolResult } from '../types/simulation';

package/dist/chatgpt/index.js

@@ -1,9 +1,7 @@
-import { I, M, a, S, T, j, m, n } from "../simulator-Da9iAupa.js";
-import { C } from "../index-wUvmyoCx.js";
-import { c } from "../simulator-url-CuLqtnSS.js";
-import { b, a as a2, c as c2, d, e, f, g, h, i, t } from "../discovery-DvIQWTez.js";
+import { I, M, a, S, T, j, m, n } from "../simulator-D8t-r7HH.js";
+import { c } from "../simulator-url-j_XV3EoP.js";
+import { b, a as a2, c as c2, d, e, f, g, h, i, t } from "../discovery-BVqD-JsT.js";
 export {
-  C as ChatGPTSimulator,
   I as IframeResource,
   M as McpAppHost,
   a as SCREEN_WIDTHS,

package/dist/chatgpt/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/claude/claude-conversation.d.ts

@@ -12,6 +12,8 @@ interface ClaudeConversationProps {
     appIcon?: string;
     userMessage?: string;
     isTransitioning?: boolean;
+    /** Optional action element rendered in the conversation header (e.g., Run button) */
+    headerAction?: React.ReactNode;
 }
 /**
  * Claude conversation shell — mimics Claude's chat UI chrome.
@@ -19,5 +21,5 @@ interface ClaudeConversationProps {
  * All three display modes (inline, pip, fullscreen) share the same React tree
  * shape so that the iframe never unmounts when switching modes.
  */
-export declare function ClaudeConversation({ children, screenWidth, displayMode, platform, onRequestDisplayMode, appName, appIcon, userMessage, isTransitioning, }: ClaudeConversationProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClaudeConversation({ children, screenWidth, displayMode, platform, onRequestDisplayMode, appName, appIcon, userMessage, isTransitioning, headerAction, }: ClaudeConversationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/claude/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const simulator = require("../simulator-BEFsuj9Z.cjs");
-exports.ClaudeSimulator = simulator.Simulator;
+const simulator = require("../simulator-FFNttkqL.cjs");
+exports.Simulator = simulator.Simulator;
 //# sourceMappingURL=index.cjs.map

package/dist/claude/index.d.ts

@@ -1 +1 @@
-export { Simulator as ClaudeSimulator } from '../simulator/simulator';
+export { Simulator } from '../simulator/simulator';

package/dist/claude/index.js

@@ -1,5 +1,5 @@
-import { S } from "../simulator-Da9iAupa.js";
+import { S } from "../simulator-D8t-r7HH.js";
 export {
-  S as ClaudeSimulator
+  S as Simulator
 };
 //# sourceMappingURL=index.js.map

package/dist/{discovery-DvIQWTez.js → discovery-BVqD-JsT.js}

@@ -190,7 +190,9 @@ function findToolFiles(toolsDir, fs) {
     return [];
   }
   const entries = fs.readdirSync(toolsDir, { withFileTypes: true });
-  return entries.filter((entry) => !entry.isDirectory() && entry.name.endsWith(".ts")).map((entry) => ({
+  return entries.filter(
+    (entry) => !entry.isDirectory() && entry.name.endsWith(".ts") && !entry.name.endsWith(".test.ts")
+  ).map((entry) => ({
     name: entry.name.replace(/\.ts$/, ""),
     path: `${toolsDir}/${entry.name}`
   }));
@@ -219,4 +221,4 @@ export {
   findToolFiles as k,
   toPascalCase as t
 };
-//# sourceMappingURL=discovery-DvIQWTez.js.map
+//# sourceMappingURL=discovery-BVqD-JsT.js.map