sunpeak 0.16.5 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.16.5",
+  "version": "0.16.7",
   "description": "Local-first MCP Apps framework. Quickstart, build, test, and ship your Claude or ChatGPT App!",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -93,11 +93,12 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
+    "@clack/prompts": "^1.1.0",
     "@modelcontextprotocol/ext-apps": "^1.0.1",
     "@modelcontextprotocol/sdk": "^1.25.2",
     "clsx": "^2.1.1",
-    "tailwind-merge": "^3.4.0",
     "esbuild": "^0.27.0",
+    "tailwind-merge": "^3.4.0",
     "zod": "^3.25.76"
   },
   "devDependencies": {

package/template/src/resources/review/review.tsx

@@ -354,7 +354,7 @@ function AlertBanner({ alert }: { alert: Alert }) {
   const config = alertTypeConfig[alert.type];
   return (
     <div
-      className="flex items-start gap-2 p-3 rounded-lg"
+      className="flex items-center gap-2 p-3 rounded-lg"
       style={{
         backgroundColor: config.bg,
         borderWidth: 1,
@@ -362,12 +362,12 @@ function AlertBanner({ alert }: { alert: Alert }) {
         borderColor: config.border,
       }}
     >
-      <span className="flex-shrink-0" style={{ color: config.text }}>
+      <span className="flex-shrink-0 text-base leading-none" style={{ color: config.text }}>
         {config.icon}
       </span>
-      <p className="text-sm" style={{ color: config.text }}>
+      <span className="text-sm" style={{ color: config.text }}>
         {alert.message}
-      </p>
+      </span>
     </div>
   );
 }