sunpeak 0.16.4 → 0.16.7

package/README.md

@@ -43,8 +43,6 @@ pnpm add -g sunpeak
 sunpeak new
 ```
 
-To add `sunpeak` to an existing project, refer to the [documentation](https://sunpeak.ai/docs/add-to-existing-project).
-
 ## Overview
 
 `sunpeak` is an npm package that helps you build MCP Apps (interactive UI resources) while keeping your MCP server client-agnostic. Built on the [MCP Apps SDK](https://github.com/modelcontextprotocol/ext-apps) (`@modelcontextprotocol/ext-apps`). `sunpeak` consists of:

package/bin/commands/build.mjs

@@ -49,7 +49,8 @@ function resolveEsmEntry(require, packageName) {
  * Build all resources for a Sunpeak project
  * Runs in the context of a user's project directory
  */
-export async function build(projectRoot = process.cwd()) {
+export async function build(projectRoot = process.cwd(), { quiet = false } = {}) {
+  const log = quiet ? () => {} : console.log.bind(console);
 
   // Check for package.json first
   const pkgJsonPath = path.join(projectRoot, 'package.json');
@@ -191,7 +192,7 @@ export async function build(projectRoot = process.cwd()) {
     process.exit(1);
   }
 
-  console.log('Building all resources...\n');
+  log('Building all resources...\n');
 
   // Read and validate the template
   const template = readFileSync(templateFile, 'utf-8');
@@ -214,7 +215,7 @@ export async function build(projectRoot = process.cwd()) {
   // Build all resources (but don't copy yet)
   for (let i = 0; i < resourceFiles.length; i++) {
     const { componentName, componentFile, kebabName, entry, jsOutput, buildOutDir } = resourceFiles[i];
-    console.log(`[${i + 1}/${resourceFiles.length}] Building ${kebabName}...`);
+    log(`[${i + 1}/${resourceFiles.length}] Building ${kebabName}...`);
 
     try {
       // Create build directory if it doesn't exist
@@ -234,6 +235,7 @@ export async function build(projectRoot = process.cwd()) {
       await viteBuild({
         mode: 'production',
         root: projectRoot,
+        ...(quiet && { logLevel: 'silent' }),
         plugins: [react(), tailwindcss(), inlineCssPlugin(buildOutDir)],
         define: {
           'process.env.NODE_ENV': JSON.stringify('production'),
@@ -277,7 +279,7 @@ export async function build(projectRoot = process.cwd()) {
   }
 
   // Now copy all files from build-output to dist/{resource}/
-  console.log('\nCopying built files to dist/...');
+  log('\nCopying built files to dist/...');
   const timestamp = Date.now().toString(36);
 
   for (const { jsOutput, htmlOutput, buildOutDir, distOutDir, kebabName, componentFile, resourceDir } of resourceFiles) {
@@ -296,7 +298,7 @@ export async function build(projectRoot = process.cwd()) {
     // Generate URI using resource name and build timestamp
     meta.uri = `ui://${meta.name}-${timestamp}`;
     writeFileSync(destJson, JSON.stringify(meta, null, 2));
-    console.log(`✓ Generated ${kebabName}/${kebabName}.json (uri: ${meta.uri})`);
+    log(`✓ Generated ${kebabName}/${kebabName}.json (uri: ${meta.uri})`);
 
     // Read built JS file and wrap in HTML shell
     const builtJsFile = path.join(buildOutDir, jsOutput);
@@ -318,13 +320,13 @@ ${jsContents}
 </body>
 </html>`;
       writeFileSync(destHtmlFile, html);
-      console.log(`✓ Built ${kebabName}/${htmlOutput}`);
+      log(`✓ Built ${kebabName}/${htmlOutput}`);
     } else {
       console.error(`Built file not found: ${builtJsFile}`);
       if (existsSync(buildOutDir)) {
-        console.log(`  Files in ${buildOutDir}:`, readdirSync(buildOutDir));
+        log(`  Files in ${buildOutDir}:`, readdirSync(buildOutDir));
       } else {
-        console.log(`  Build directory doesn't exist: ${buildOutDir}`);
+        log(`  Build directory doesn't exist: ${buildOutDir}`);
       }
       process.exit(1);
     }
@@ -339,10 +341,10 @@ ${jsContents}
     rmSync(buildDir, { recursive: true });
   }
 
-  console.log('\n✓ All resources built successfully!');
-  console.log('\nBuilt resources:');
+  log('\n✓ All resources built successfully!');
+  log('\nBuilt resources:');
   for (const { kebabName } of resourceFiles) {
-    console.log(`  ${kebabName}`);
+    log(`  ${kebabName}`);
   }
 
   // ========================================================================
@@ -360,7 +362,7 @@ ${jsContents}
   const hasServerEntry = existsSync(serverEntryPath);
 
   if (toolFiles.length > 0 || hasServerEntry) {
-    console.log('\nCompiling server-side code...');
+    log('\nCompiling server-side code...');
 
     let esbuild;
     try {
@@ -407,7 +409,7 @@ ${jsContents}
             loader: { '.tsx': 'tsx', '.ts': 'ts' },
             logLevel: 'warning',
           });
-          console.log(`✓ Compiled tools/${toolName}.js`);
+          log(`✓ Compiled tools/${toolName}.js`);
         } catch (err) {
           console.error(`Failed to compile tool ${toolName}:`, err.message);
           process.exit(1);
@@ -439,7 +441,7 @@ ${jsContents}
             loader: { '.tsx': 'tsx', '.ts': 'ts' },
             logLevel: 'warning',
           });
-          console.log(`✓ Compiled server.js`);
+          log(`✓ Compiled server.js`);
         } catch (err) {
           console.error(`Failed to compile server entry:`, err.message);
           process.exit(1);
@@ -448,12 +450,13 @@ ${jsContents}
     }
   }
 
-  console.log('\n✓ Build complete!');
+  log('\n✓ Build complete!');
 }
 
 // Allow running directly
 if (import.meta.url === `file://${process.argv[1]}`) {
-  build().catch(error => {
+  const quiet = process.argv.includes('--quiet');
+  build(process.cwd(), { quiet }).catch(error => {
     console.error(error);
     process.exit(1);
   });

package/bin/commands/dev.mjs

@@ -66,17 +66,17 @@ function startBuildWatcher(projectRoot, resourcesDir, mcpHandle) {
   let activeChild = null;
   const sunpeakBin = join(dirname(new URL(import.meta.url).pathname), '..', 'sunpeak.js');
 
-  const runBuild = (reason) => {
+  const runBuild = () => {
     // Kill any in-progress build and start fresh
     if (activeChild) {
       activeChild.kill('SIGTERM');
       activeChild = null;
     }
 
-    console.log(`[build] ${reason}`);
-    const child = spawn(process.execPath, [sunpeakBin, 'build'], {
+    console.log(`[build] Building resources for the MCP server for non-ChatGPT hosts...`);
+    const child = spawn(process.execPath, [sunpeakBin, 'build', '--quiet'], {
       cwd: projectRoot,
-      stdio: ['ignore', 'inherit', 'inherit'],
+      stdio: ['ignore', 'pipe', 'inherit'],
       env: { ...process.env, NODE_ENV: 'production' },
     });
     activeChild = child;
@@ -85,6 +85,7 @@ function startBuildWatcher(projectRoot, resourcesDir, mcpHandle) {
       if (child !== activeChild) return; // Superseded by a newer build
       activeChild = null;
       if (code === 0) {
+        console.log(`[build] Built resources for the MCP server for non-ChatGPT hosts.`);
         // Notify non-local sessions (Claude, etc.) that resources changed
         mcpHandle?.invalidateResources();
       } else if (code !== null) {
@@ -94,7 +95,7 @@ function startBuildWatcher(projectRoot, resourcesDir, mcpHandle) {
   };
 
   // Initial build
-  runBuild('Initial production build for tunnel clients...');
+  runBuild();
 
   // Watch src/resources/ for changes using fs.watch (recursive supported on macOS/Windows)
   let debounceTimer = null;
@@ -108,7 +109,7 @@ function startBuildWatcher(projectRoot, resourcesDir, mcpHandle) {
 
       clearTimeout(debounceTimer);
       debounceTimer = setTimeout(() => {
-        runBuild(`Rebuilding (${filename} changed)...`);
+        runBuild();
       }, 500);
     });
     console.log('[build] Watching src/resources/ for changes...');

package/bin/commands/new.mjs

@@ -2,26 +2,59 @@
 import { existsSync, mkdirSync, cpSync, readFileSync, writeFileSync, renameSync } from 'fs';
 import { join, dirname, basename } from 'path';
 import { fileURLToPath } from 'url';
-import { createInterface } from 'readline';
-import { execSync } from 'child_process';
+import { execSync, exec } from 'child_process';
+import { promisify } from 'util';
+
+const execAsync = promisify(exec);
+import * as clack from '@clack/prompts';
 import { discoverResources } from '../lib/patterns.mjs';
 import { detectPackageManager } from '../utils.mjs';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
 /**
- * Default prompt implementation using readline
- * @param {string} question
+ * Default prompt for project name using clack text input.
  * @returns {Promise<string>}
  */
-function defaultPrompt(question) {
-  const rl = createInterface({ input: process.stdin, output: process.stdout });
-  return new Promise((resolve) => {
-    rl.question(question, (answer) => {
-      rl.close();
-      resolve(answer.trim());
-    });
+async function defaultPromptName() {
+  const value = await clack.text({
+    message: 'Project name',
+    placeholder: 'my-app',
+    defaultValue: 'my-app',
+    validate: (v) => {
+      if (v === 'template') return '"template" is a reserved name';
+    },
   });
+  if (clack.isCancel(value)) {
+    clack.cancel('Cancelled.');
+    process.exit(0);
+  }
+  return value;
+}
+
+/**
+ * Default resource selection using clack multiselect.
+ * @param {string[]} availableResources
+ * @returns {Promise<string[]>}
+ */
+async function defaultSelectResources(availableResources) {
+  const selected = await clack.multiselect({
+    message: 'Resources (UIs) to include (space to toggle)',
+    options: (() => {
+      const maxLen = Math.max(...availableResources.map((r) => r.length));
+      return availableResources.map((r) => ({
+        value: r,
+        label: `${r.padEnd(maxLen)}  (https://sunpeak.ai/docs/api-reference/resources/${r})`,
+      }));
+    })(),
+    initialValues: availableResources,
+    required: true,
+  });
+  if (clack.isCancel(selected)) {
+    clack.cancel('Cancelled.');
+    process.exit(0);
+  }
+  return selected;
 }
 
 /**
@@ -37,7 +70,12 @@ export const defaultDeps = {
   writeFileSync,
   renameSync,
   execSync,
-  prompt: defaultPrompt,
+  execAsync,
+  promptName: defaultPromptName,
+  selectResources: defaultSelectResources,
+  intro: clack.intro,
+  outro: clack.outro,
+  spinner: clack.spinner,
   console,
   process,
   cwd: () => process.cwd(),
@@ -88,6 +126,8 @@ export function parseResourcesInput(input, validResources, deps = defaultDeps) {
 export async function init(projectName, resourcesArg, deps = defaultDeps) {
   const d = { ...defaultDeps, ...deps };
 
+  d.intro('☀️ sunpeak');
+
   // Discover available resources from template
   const availableResources = d.discoverResources();
   if (availableResources.length === 0) {
@@ -96,10 +136,7 @@ export async function init(projectName, resourcesArg, deps = defaultDeps) {
   }
 
   if (!projectName) {
-    projectName = await d.prompt('☀️ 🏔️ Project name [my-app]: ');
-    if (!projectName) {
-      projectName = 'my-app';
-    }
+    projectName = await d.promptName();
   }
 
   if (projectName === 'template') {
@@ -107,17 +144,13 @@ export async function init(projectName, resourcesArg, deps = defaultDeps) {
     d.process.exit(1);
   }
 
-  // Use resources from args or ask for them
-  let resourcesInput;
-  if (resourcesArg) {
-    resourcesInput = resourcesArg;
-    d.console.log(`☀️ 🏔️ Resources: ${resourcesArg}`);
+  // Use resources from args or interactively select them
+  let selectedResources;
+  if (resourcesArg !== undefined) {
+    selectedResources = parseResourcesInput(resourcesArg, availableResources, d);
   } else {
-    resourcesInput = await d.prompt(
-      `☀️ 🏔️ Resources (UIs) to include [${availableResources.join(', ')}]: `
-    );
+    selectedResources = await d.selectResources(availableResources);
   }
-  const selectedResources = parseResourcesInput(resourcesInput, availableResources, d);
 
   const targetDir = join(d.cwd(), projectName);
 
@@ -126,13 +159,11 @@ export async function init(projectName, resourcesArg, deps = defaultDeps) {
     d.process.exit(1);
   }
 
-  d.console.log(`☀️ 🏔️ Creating ${projectName}...`);
-
-  d.mkdirSync(targetDir, { recursive: true });
-
   // Filter resource directories based on selection
   const excludedResources = availableResources.filter((r) => !selectedResources.includes(r));
 
+  d.mkdirSync(targetDir, { recursive: true });
+
   d.cpSync(d.templateDir, targetDir, {
     recursive: true,
     filter: (src) => {
@@ -223,32 +254,30 @@ export async function init(projectName, resourcesArg, deps = defaultDeps) {
 
   d.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
 
-  // Detect package manager and run install
+  // Install dependencies with spinner
   const pm = d.detectPackageManager();
-  d.console.log(`☀️ 🏔️ Installing dependencies with ${pm}...`);
+  const s = d.spinner();
+  s.start(`Installing dependencies with ${pm}...`);
 
   try {
-    d.execSync(`${pm} install`, { cwd: targetDir, stdio: 'inherit' });
+    await d.execAsync(`${pm} install`, { cwd: targetDir });
+    s.stop(`Installed dependencies with ${pm}`);
   } catch {
-    d.console.error(`\nInstall failed. You can try running "${pm} install" manually in the project directory.`);
+    s.stop(`Install failed. You can try running "${pm} install" manually.`);
   }
 
   const runCmd = pm === 'npm' ? 'npm run' : pm;
 
-  d.console.log(`
-Done! To get started:
+  d.outro(`Done! To get started:
 
   cd ${projectName}
   sunpeak dev
 
-That's it! Your project commands:
+Your project commands:
 
   sunpeak dev       # Start dev server + MCP endpoint
   sunpeak build     # Build for production
-  ${runCmd} test         # Run tests
-
-See README.md for more details.
-`);
+  ${runCmd} test         # Run tests`);
 }
 
 // Allow running directly

package/dist/mcp/index.cjs

@@ -15520,27 +15520,30 @@ function createAppServer(config, simulations, viteMode) {
     },
     { capabilities: { resources: {}, tools: {} } }
   );
-  const registeredResources = /* @__PURE__ */ new Set();
+  const registeredUriSet = /* @__PURE__ */ new Set();
+  const resourceHandles = /* @__PURE__ */ new Map();
+  const toolHandles = [];
   for (const simulation of simulations) {
     const resource = simulation.resource;
     const tool = simulation.tool;
     const toolResult = simulation.toolResult ?? { structuredContent: null };
     const uri2 = resource.uri ?? `ui://${resource.name}`;
+    const resourceName = resource.name;
     const resourceMeta = resource._meta ?? {};
     const toolMeta = tool._meta ?? {};
-    if (!registeredResources.has(uri2)) {
-      registeredResources.add(uri2);
+    if (!registeredUriSet.has(uri2)) {
+      registeredUriSet.add(uri2);
       const listMeta = viteMode ? injectViteCSP(resourceMeta) : resourceMeta;
       console.log(`[MCP] RegisterResource: ${uri2}`);
-      ak(
-        mcpServer,
-        resource.name,
+      const handle = mcpServer.registerResource(
+        resourceName,
         uri2,
         {
+          mimeType: EI,
           description: resource.description,
           _meta: listMeta
         },
-        async (_uri, extra) => {
+        async (readUri, extra) => {
           const prodBuild = needsProdBuild(
             extra?.requestInfo?.headers ?? {}
           );
@@ -15549,17 +15552,18 @@ function createAppServer(config, simulations, viteMode) {
           try {
             content = getResourceHtml(simulation, viteMode, prodBuild);
           } catch (error) {
-            console.error(`[MCP] ReadResource error for ${uri2}:`, error);
+            console.error(`[MCP] ReadResource error for ${readUri.href}:`, error);
             throw error;
           }
           const sizeKB = (content.length / 1024).toFixed(1);
           console.log(
-            `[MCP] ReadResource: ${uri2} → ${sizeKB}KB${prodBuild ? " (prod build)" : " (vite)"}`
+            `[MCP] ReadResource: ${readUri.href} → ${sizeKB}KB${prodBuild ? " (prod build)" : " (vite)"}`
           );
           return {
             contents: [
               {
-                uri: uri2,
+                // Use readUri (not closure variable) so the response URI matches after updates
+                uri: readUri.href,
                 mimeType: EI,
                 text: content,
                 _meta: readMeta
@@ -15568,20 +15572,22 @@ function createAppServer(config, simulations, viteMode) {
           };
         }
       );
+      resourceHandles.set(resourceName, handle);
     }
-    hk(
+    const fullToolMeta = {
+      ...toolMeta,
+      ui: {
+        resourceUri: uri2,
+        // Preserve tool visibility from simulation metadata if declared
+        ...toolMeta.ui?.visibility ? { visibility: toolMeta.ui.visibility } : {}
+      }
+    };
+    const toolHandle = hk(
       mcpServer,
       tool.name,
       {
         description: tool.description,
-        _meta: {
-          ...toolMeta,
-          ui: {
-            resourceUri: uri2,
-            // Preserve tool visibility from simulation metadata if declared
-            ...toolMeta.ui?.visibility ? { visibility: toolMeta.ui.visibility } : {}
-          }
-        }
+        _meta: fullToolMeta
       },
       async (extra) => {
         const args = extra.request?.params?.arguments ?? {};
@@ -15602,12 +15608,13 @@ function createAppServer(config, simulations, viteMode) {
         };
       }
     );
+    toolHandles.push({ handle: toolHandle, resourceName, toolMeta: fullToolMeta });
   }
-  const registeredUris = Array.from(registeredResources).join(", ");
+  const registeredUris = Array.from(registeredUriSet).join(", ");
   console.log(
     `[MCP] Registered ${simulations.length} tool(s) and resource(s)${viteMode ? " (vite mode)" : ""}: ${registeredUris}`
   );
-  return mcpServer;
+  return { server: mcpServer, resourceHandles, toolHandles };
 }
 const SESSION_IDLE_TIMEOUT_MS$1 = 5 * 60 * 1e3;
 function isLocalConnection(req) {
@@ -15674,11 +15681,18 @@ async function handleMcpRequest(req, res, config, simulations, viteMode) {
   }
   if (req.method === "POST") {
     const isLocal = isLocalConnection(req);
-    const server = createAppServer(config, simulations, viteMode);
+    const { server, resourceHandles, toolHandles } = createAppServer(config, simulations, viteMode);
     const transport = new StreamableHTTPServerTransport({
       sessionIdGenerator: () => node_crypto.randomUUID(),
       onsessioninitialized: (id2) => {
-        sessions.set(id2, { server, transport, isLocal, lastActivity: Date.now() });
+        sessions.set(id2, {
+          server,
+          transport,
+          isLocal,
+          lastActivity: Date.now(),
+          resourceHandles,
+          toolHandles
+        });
         const origin = isLocal ? "local" : "tunnel";
         console.log(
           `[MCP] Session started: ${id2.substring(0, 8)}... (${origin}, ${sessions.size} active)`
@@ -15793,16 +15807,24 @@ function runMCPServer(config) {
   process.on("SIGINT", () => void shutdown());
   return {
     invalidateResources() {
-      let notified = 0;
+      if (sessions.size === 0) return;
+      const timestamp = Date.now();
       for (const [, session] of sessions) {
-        if (!session.isLocal) {
-          session.server.sendResourceListChanged();
-          notified++;
+        for (const [name, handle] of session.resourceHandles) {
+          handle.update({ uri: `ui://${name}-${timestamp}` });
+        }
+        for (const { handle, resourceName, toolMeta } of session.toolHandles) {
+          const newUri = `ui://${resourceName}-${timestamp}`;
+          handle.update({
+            _meta: {
+              ...toolMeta,
+              ui: { ...toolMeta.ui, resourceUri: newUri },
+              "ui/resourceUri": newUri
+            }
+          });
         }
       }
-      if (notified > 0) {
-        console.log(`[MCP] Notified ${notified} session(s) of resource changes`);
-      }
+      console.log(`[MCP] Cache-busted ${sessions.size} session(s) with timestamp ${timestamp}`);
     }
   };
 }