sunpeak 0.11.1 → 0.12.1

package/bin/sunpeak.js

@@ -1,49 +1,13 @@
 #!/usr/bin/env node
 
-import {
-  existsSync,
-  mkdirSync,
-  cpSync,
-  readFileSync,
-  writeFileSync,
-  renameSync,
-  readdirSync,
-} from 'fs';
-import { join, dirname, basename } from 'path';
+import { existsSync, readFileSync } from 'fs';
+import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
-import { createInterface } from 'readline';
+import { discoverResources } from './lib/patterns.mjs';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const COMMANDS_DIR = join(__dirname, 'commands');
 
-/**
- * Auto-discover available resources from template/src/resources directories.
- * Each subdirectory containing a {name}-resource.tsx file is a valid resource.
- */
-function discoverResources() {
-  const resourcesDir = join(__dirname, '..', 'template', 'src', 'resources');
-  if (!existsSync(resourcesDir)) {
-    return [];
-  }
-  return readdirSync(resourcesDir, { withFileTypes: true })
-    .filter((entry) => entry.isDirectory())
-    .filter((entry) => {
-      const resourceFile = join(resourcesDir, entry.name, `${entry.name}-resource.tsx`);
-      return existsSync(resourceFile);
-    })
-    .map((entry) => entry.name);
-}
-
-function prompt(question) {
-  const rl = createInterface({ input: process.stdin, output: process.stdout });
-  return new Promise((resolve) => {
-    rl.question(question, (answer) => {
-      rl.close();
-      resolve(answer.trim());
-    });
-  });
-}
-
 function checkPackageJson() {
   const pkgPath = join(process.cwd(), 'package.json');
   if (!existsSync(pkgPath)) {
@@ -53,148 +17,6 @@ function checkPackageJson() {
   }
 }
 
-function parseResourcesInput(input, validResources) {
-  // If no input, return all resources
-  if (!input || input.trim() === '') {
-    return validResources;
-  }
-
-  // Split by comma or space and trim
-  const tokens = input
-    .toLowerCase()
-    .split(/[,\s]+/)
-    .map((s) => s.trim())
-    .filter((s) => s.length > 0);
-
-  // Validate tokens
-  const invalid = tokens.filter((t) => !validResources.includes(t));
-  if (invalid.length > 0) {
-    console.error(`Error: Invalid resource(s): ${invalid.join(', ')}`);
-    console.error(`Valid resources are: ${validResources.join(', ')}`);
-    process.exit(1);
-  }
-
-  // Remove duplicates
-  return [...new Set(tokens)];
-}
-
-async function init(projectName, resourcesArg) {
-  // Discover available resources from template
-  const availableResources = discoverResources();
-  if (availableResources.length === 0) {
-    console.error('Error: No resources found in template/src/resources/');
-    process.exit(1);
-  }
-
-  if (!projectName) {
-    projectName = await prompt('☀️ 🏔️ Project name [my-app]: ');
-    if (!projectName) {
-      projectName = 'my-app';
-    }
-  }
-
-  if (projectName === 'template') {
-    console.error('Error: "template" is a reserved name. Please choose another name.');
-    process.exit(1);
-  }
-
-  // Use resources from args or ask for them
-  let resourcesInput;
-  if (resourcesArg) {
-    resourcesInput = resourcesArg;
-    console.log(`☀️ 🏔️ Resources: ${resourcesArg}`);
-  } else {
-    resourcesInput = await prompt(
-      `☀️ 🏔️ Resources (UIs) to include [${availableResources.join(', ')}]: `
-    );
-  }
-  const selectedResources = parseResourcesInput(resourcesInput, availableResources);
-
-  const targetDir = join(process.cwd(), projectName);
-
-  if (existsSync(targetDir)) {
-    console.error(`Error: Directory "${projectName}" already exists`);
-    process.exit(1);
-  }
-
-  const templateDir = join(__dirname, '..', 'template');
-
-  console.log(`☀️ 🏔️ Creating ${projectName}...`);
-
-  mkdirSync(targetDir, { recursive: true });
-
-  // Filter resource directories based on selection
-  const excludedResources = availableResources.filter((r) => !selectedResources.includes(r));
-
-  cpSync(templateDir, targetDir, {
-    recursive: true,
-    filter: (src) => {
-      const name = basename(src);
-
-      // Skip node_modules and lock file
-      if (name === 'node_modules' || name === 'pnpm-lock.yaml') {
-        return false;
-      }
-
-      for (const resource of excludedResources) {
-        // Skip entire resource directory: src/resources/{resource}/
-        if (src.includes('/resources/') && name === resource) {
-          return false;
-        }
-        // Skip e2e test files for excluded resources
-        if (src.includes('/tests/e2e/') && name === `${resource}.spec.ts`) {
-          return false;
-        }
-      }
-
-      return true;
-    },
-  });
-
-  // Rename underscore-prefixed files to dotfiles
-  const dotfiles = ['_gitignore', '_prettierignore', '_prettierrc'];
-  for (const file of dotfiles) {
-    const srcPath = join(targetDir, file);
-    const destPath = join(targetDir, file.replace(/^_/, '.'));
-    if (existsSync(srcPath)) {
-      renameSync(srcPath, destPath);
-    }
-  }
-
-  // Read sunpeak version from root package.json
-  const rootPkgPath = join(__dirname, '..', 'package.json');
-  const rootPkg = JSON.parse(readFileSync(rootPkgPath, 'utf-8'));
-  const sunpeakVersion = `^${rootPkg.version}`;
-
-  // Update project package.json
-  const pkgPath = join(targetDir, 'package.json');
-  const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
-  pkg.name = projectName;
-
-  // Replace workspace:* with actual version
-  if (pkg.dependencies?.sunpeak === 'workspace:*') {
-    pkg.dependencies.sunpeak = sunpeakVersion;
-  }
-
-  writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
-
-  console.log(`
-Done! To get started:
-
-  cd ${projectName}
-  pnpm install
-  sunpeak dev
-
-That's it! Your project commands:
-
-  sunpeak dev       # Start dev server + MCP endpoint
-  sunpeak build     # Build for production
-  pnpm test         # Run tests
-
-See README.md for more details.
-`);
-}
-
 const [, , command, ...args] = process.argv;
 
 /**
@@ -206,40 +28,6 @@ function getVersion() {
   return pkg.version;
 }
 
-/**
- * Parse arguments for resource commands (push, pull, deploy)
- */
-function parseResourceArgs(args) {
-  const options = { tags: [] };
-  let i = 0;
-
-  while (i < args.length) {
-    const arg = args[i];
-
-    if (arg === '--repository' || arg === '-r') {
-      options.repository = args[++i];
-    } else if (arg === '--tag' || arg === '-t') {
-      options.tags.push(args[++i]);
-    } else if (arg === '--name' || arg === '-n') {
-      options.name = args[++i];
-    } else if (arg === '--output' || arg === '-o') {
-      options.output = args[++i];
-    } else if (arg === '--help' || arg === '-h') {
-      options.help = true;
-    } else if (!arg.startsWith('-')) {
-      // Positional argument - treat as file path
-      options.file = arg;
-    }
-
-    i++;
-  }
-
-  // Set singular tag for commands that expect it (e.g., pull)
-  options.tag = options.tags[0];
-
-  return options;
-}
-
 // Main CLI handler
 (async () => {
   // Handle --version / -v flags early
@@ -267,7 +55,10 @@ function parseResourceArgs(args) {
 
   switch (command) {
     case 'new':
-      await init(args[0], args[1]);
+      {
+        const { init } = await import(join(COMMANDS_DIR, 'new.mjs'));
+        await init(args[0], args[1]);
+      }
       break;
 
     case 'dev':
@@ -300,22 +91,22 @@ function parseResourceArgs(args) {
 
     case 'push':
       {
-        const { push } = await import(join(COMMANDS_DIR, 'push.mjs'));
-        await push(process.cwd(), parseResourceArgs(args));
+        const { push, parseArgs } = await import(join(COMMANDS_DIR, 'push.mjs'));
+        await push(process.cwd(), parseArgs(args));
       }
       break;
 
     case 'pull':
       {
-        const { pull } = await import(join(COMMANDS_DIR, 'pull.mjs'));
-        await pull(process.cwd(), parseResourceArgs(args));
+        const { pull, parseArgs } = await import(join(COMMANDS_DIR, 'pull.mjs'));
+        await pull(process.cwd(), parseArgs(args));
       }
       break;
 
     case 'deploy':
       {
-        const { deploy } = await import(join(COMMANDS_DIR, 'deploy.mjs'));
-        await deploy(process.cwd(), parseResourceArgs(args));
+        const { deploy, parseArgs } = await import(join(COMMANDS_DIR, 'deploy.mjs'));
+        await deploy(process.cwd(), parseArgs(args));
       }
       break;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunpeak",
-  "version": "0.11.1",
+  "version": "0.12.1",
   "description": "The ChatGPT App framework. Quickstart, build, & test your ChatGPT App locally!",
   "type": "module",
   "main": "./dist/index.cjs",

package/template/.sunpeak/dev.tsx

@@ -4,9 +4,9 @@
  * This file bootstraps the ChatGPT simulator for development
  *
  * Auto-discovers simulations and resources by file naming convention:
- * - resources/{resource}/{resource}-{scenario}-simulation.json (e.g., resources/albums/albums-show-simulation.json)
- * - resources/{resource}/{resource}-resource.json
- * - resources/{resource}/{Resource}Resource component (PascalCase)
+ * - tests/simulations/{resource}/{resource}-{scenario}-simulation.json
+ * - src/resources/{resource}/{resource}-resource.json
+ * - src/resources/{resource}/{Resource}Resource component (PascalCase)
  */
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
@@ -16,7 +16,7 @@ import '../src/styles/globals.css';
 
 // Build simulations from discovered files
 const simulations = buildDevSimulations({
-  simulationModules: import.meta.glob('../src/resources/*/*-simulation.json', { eager: true }),
+  simulationModules: import.meta.glob('../tests/simulations/*/*-simulation.json', { eager: true }),
   resourceModules: import.meta.glob('../src/resources/*/*-resource.json', { eager: true }),
   resourceComponents: resourceComponents as Record<string, React.ComponentType>,
 });

package/template/README.md

@@ -1,6 +1,6 @@
 # sunpeak-app
 
-A ChatGPT App UI built with [sunpeak](https://github.com/Sunpeak-AI/sunpeak).
+A ChatGPT App built with [sunpeak](https://github.com/Sunpeak-AI/sunpeak).
 
 For an initial overview of your new app and a detailed API reference, refer to the [documentation](https://docs.sunpeak.ai/template/project-structure).
 
@@ -32,15 +32,20 @@ The template includes a minimal test setup with Vitest. You can add additional t
 
 ## Project Structure
 
-- `src/resources/` - Directory containing all your MCP Resources (ChatGPT App UIs).
-  - Each resource is a subdirectory containing all files for that resource.
-  - Example: `src/resources/albums/` contains:
-    - `albums-resource.tsx` - The React component.
-    - `albums-resource.json` - Resource metadata (name, title, description, etc.).
-    - `albums-resource.test.tsx` - Unit tests for the resource.
-    - `albums-show-simulation.json` - Simulation data for testing.
-    - `components/` - UI components used by the resource.
-- `tests/e2e/` - Directory containing end-to-end Playwright tests for each resource. Uses the ChatGPTSimulator to test your resources render properly with any state (tool calls, saved state, dark mode, pip display mode, etc.).
+Using a Review page as an example, sunpeak projects look like:
+
+```bash
+my-app/
+├── src/resources/
+│   └── review/
+│       ├── review-resource.tsx                 # Review UI component.
+│       └── review-resource.json                # Review UI MCP metadata.
+├── tests/simulations/
+│   └── review/
+│       ├── review-{scenario1}-simulation.json  # Mock state for testing.
+│       └── review-{scenario2}-simulation.json  # Mock state for testing.
+└── package.json
+```
 
 ## Testing in ChatGPT
 
@@ -58,8 +63,6 @@ You can then connect to the tunnel forwarding URL at the `/mcp` path from ChatGP
 
 Once your app is connected, send the name of the app and a tool, like `/sunpeak show review`, to ChatGPT.
 
-When you make changes to the UI, refresh your app in ChatGPT after the dev server has finished rebuilding: `User > Settings > Apps & Connectors > My App > Refresh`
-
 ## Build & Deploy
 
 Build your app for production:
@@ -73,15 +76,11 @@ This creates optimized builds in `dist/`, organized by resource:
 ```bash
 dist/
 ├── albums/
-│   ├── albums.js                     # Built resource component.
-│   ├── albums.json                   # Resource metadata.
-│   └── albums-show-simulation.json   # Resource mock data for testing.
+│   ├── albums.js             # Built resource component.
+│   └── albums.json           # Resource metadata.
 ├── review/
 │   ├── review.js
-│   ├── review.json
-│   ├── review-diff-simulation.json
-│   ├── review-post-simulation.json
-│   └── review-purchase-simulation.json
+│   └── review.json
 └── ...
 ```
 
@@ -89,7 +88,6 @@ Each resource folder contains:
 
 - **`.js` file**: Self-contained bundle with CSS inlined
 - **`.json` file**: Resource metadata with unique `uri` for cache-busting
-- **`*-simulation.json` files**: All affiliated simulation files for the resource. These are not needed for the production runtime, but are used in the sunpeak repository for testing.
 
 Host these files and reference them as resources in your production MCP server.
 Use the sunpeak resource repository for built-in resource hosting.
@@ -103,11 +101,12 @@ src/resources/NAME/
 ├── NAME-resource.tsx              # React component (required)
 ├── NAME-resource.json             # Resource metadata (required)
 ├── NAME-resource.test.tsx         # Unit tests (optional)
-├── NAME-SCENARIO-simulation.json  # Simulation data (optional)
 └── components/                    # UI components (optional)
 ```
 
-Only the resource files (`.tsx` and `.json`) are required to generate a production build and ship a UI. Create the simulation file if you want to preview your resource in `sunpeak dev`.
+Only the resource files (`.tsx` and `.json`) are required to generate a production build and ship a UI.
+
+Create the simulation file(s) in `tests/simulations/` if you want to preview your resource in `sunpeak dev`.
 
 ## Resources
 

package/template/dist/albums/albums.json

@@ -12,5 +12,5 @@
       ]
     }
   },
-  "uri": "ui://albums-mkixiljp"
+  "uri": "ui://albums-mkk7xzee"
 }

package/template/dist/carousel/carousel.json

@@ -12,5 +12,5 @@
       ]
     }
   },
-  "uri": "ui://carousel-mkixiljp"
+  "uri": "ui://carousel-mkk7xzee"
 }

package/template/dist/map/map.json

@@ -18,5 +18,5 @@
       ]
     }
   },
-  "uri": "ui://map-mkixiljp"
+  "uri": "ui://map-mkk7xzee"
 }

package/template/dist/review/review.json

@@ -12,5 +12,5 @@
       ]
     }
   },
-  "uri": "ui://review-mkixiljp"
+  "uri": "ui://review-mkk7xzee"
 }

package/template/node_modules/.vite/deps/@openai_apps-sdk-ui_components_Button.js

@@ -1,10 +1,9 @@
-import {
-  Check_default,
-  Copy_default
-} from "./chunk-UM3ZGDFR.js";
 import {
   useTimeout
 } from "./chunk-JAGHY6H6.js";
+import {
+  o
+} from "./chunk-QPJAV452.js";
 import {
   handlePressableMouseEnter,
   isDev,
@@ -16,12 +15,13 @@ import {
   toTransformProperty,
   waitForAnimationFrame
 } from "./chunk-RYYR2YMB.js";
-import {
-  o
-} from "./chunk-QPJAV452.js";
 import {
   clsx_default
 } from "./chunk-CNYJBM5F.js";
+import {
+  Check_default,
+  Copy_default
+} from "./chunk-UM3ZGDFR.js";
 import {
   require_jsx_runtime
 } from "./chunk-JGVISENQ.js";

package/template/node_modules/.vite/deps/@openai_apps-sdk-ui_components_SegmentedControl.js

@@ -2,6 +2,7 @@ import {
   handlePressableMouseEnter,
   waitForAnimationFrame
 } from "./chunk-6QVG4F2X.js";
+import "./chunk-EGRHWZRV.js";
 import {
   useResizeObserver
 } from "./chunk-JAGHY6H6.js";
@@ -9,7 +10,6 @@ import {
   dist_exports4 as dist_exports
 } from "./chunk-2UDYPUBJ.js";
 import "./chunk-XZTIOEPG.js";
-import "./chunk-EGRHWZRV.js";
 import {
   clsx_default
 } from "./chunk-CNYJBM5F.js";

package/template/node_modules/.vite/deps/@openai_apps-sdk-ui_components_Select.js

@@ -1,3 +1,6 @@
+import {
+  Input
+} from "./chunk-P5LK4A7U.js";
 import {
   handlePressableMouseEnter,
   isDev,
@@ -6,22 +9,19 @@ import {
   toCssVariables,
   waitForAnimationFrame
 } from "./chunk-6QVG4F2X.js";
+import "./chunk-EGRHWZRV.js";
 import {
   useTimeout
 } from "./chunk-JAGHY6H6.js";
+import {
+  o
+} from "./chunk-QPJAV452.js";
 import {
   dist_exports,
   dist_exports3 as dist_exports2,
   dist_exports5 as dist_exports3
 } from "./chunk-2UDYPUBJ.js";
 import "./chunk-XZTIOEPG.js";
-import {
-  Input
-} from "./chunk-P5LK4A7U.js";
-import "./chunk-EGRHWZRV.js";
-import {
-  o
-} from "./chunk-QPJAV452.js";
 import {
   clsx_default
 } from "./chunk-CNYJBM5F.js";