sunpeak 0.7.11 → 0.8.4

package/README.md

@@ -52,10 +52,11 @@ sunpeak is an npm package consisting of:
 1. **The `sunpeak` library** (`./src`). An npm package for running & testing ChatGPT Apps. This standalone library contains:
    1. Runtime APIs - Strongly typed, multi-platform APIs for interacting with the ChatGPT runtime, architected to support future platforms (Gemini, Claude).
    2. ChatGPT simulator - React component replicating ChatGPT's runtime.
-   3. MCP server - Mock data MCP server for testing local Resources in the real ChatGPT.
+   3. MCP server - Mock data MCP server for testing local UIs (resources) in the real ChatGPT.
 2. **The `sunpeak` framework** (`./template`). Next.js for ChatGPT Apps. This templated npm package includes:
    1. Project scaffold - Complete development setup with build, test, and mcp tooling, including the sunpeak library.
    2. UI components - Production-ready components following ChatGPT design guidelines and using OpenAI apps-sdk-ui React components.
+   3. Convention over configuration - Create UIs (resources) by simply creating a `resources/NAME-resource.tsx` React file and `resources/NAME-resource.json` metadata file.
 3. **The `sunpeak` CLI** (`./bin`). Commands for managing ChatGPT Apps. Includes a client for the [sunpeak Resource Repository](https://app.sunpeak.ai/) (ECR for ChatGPT Apps). The repository helps you & your CI/CD decouple your App from your client-agnostic MCP server:
    1. Tag your app builds with version numbers and environment names (like `v1.0.0` and `prod`)
    2. `push` built Apps to a central location

package/bin/commands/deploy.mjs

@@ -1,15 +1,25 @@
 #!/usr/bin/env node
-import { push, findResources } from './push.mjs';
+import { push, findResources, defaultDeps as pushDefaultDeps } from './push.mjs';
+
+/**
+ * Default dependencies (real implementations)
+ */
+export const defaultDeps = {
+  ...pushDefaultDeps,
+};
 
 /**
  * Deploy command - same as push but with tag="prod"
  * @param {string} projectRoot - Project root directory
  * @param {Object} options - Command options (same as push, but tag defaults to "prod")
+ * @param {Object} deps - Dependencies (for testing). Uses defaultDeps if not provided.
  */
-export async function deploy(projectRoot = process.cwd(), options = {}) {
+export async function deploy(projectRoot = process.cwd(), options = {}, deps = defaultDeps) {
+  const d = { ...defaultDeps, ...deps };
+
   // Handle help flag
   if (options.help) {
-    console.log(`
+    d.console.log(`
 sunpeak deploy - Push resources to production (push with "prod" tag)
 
 Usage:
@@ -43,23 +53,23 @@ This command is equivalent to: sunpeak push --tag prod
     tags: ['prod', ...additionalTags],
   };
 
-  console.log('Deploying to production...');
-  console.log();
+  d.console.log('Deploying to production...');
+  d.console.log();
 
   // If no specific file provided, check current directory first, then dist/
   if (!deployOptions.file) {
-    const cwdResources = findResources(projectRoot);
+    const cwdResources = findResources(projectRoot, d);
     if (cwdResources.length > 0) {
       // Found resources in current directory, push each one
       for (const resource of cwdResources) {
-        await push(projectRoot, { ...deployOptions, file: resource.jsPath });
+        await push(projectRoot, { ...deployOptions, file: resource.jsPath }, d);
       }
       return;
     }
     // Fall back to dist/ directory (handled by push)
   }
 
-  await push(projectRoot, deployOptions);
+  await push(projectRoot, deployOptions, d);
 }
 
 /**

package/bin/commands/dev.mjs

@@ -1,9 +1,56 @@
 #!/usr/bin/env node
-import { createServer } from 'vite';
-import react from '@vitejs/plugin-react';
-import tailwindcss from '@tailwindcss/vite';
 import { existsSync } from 'fs';
-import { join, resolve, basename } from 'path';
+import { join, resolve, basename, dirname } from 'path';
+import { createRequire } from 'module';
+import { pathToFileURL } from 'url';
+
+/**
+ * Import a module from the project's node_modules using ESM resolution
+ */
+async function importFromProject(require, moduleName) {
+  // Resolve the module's main entry to find its location
+  const resolvedPath = require.resolve(moduleName);
+
+  // Walk up to find package.json
+  const { readFileSync } = await import('fs');
+  let pkgDir = dirname(resolvedPath);
+  let pkg;
+  while (pkgDir !== dirname(pkgDir)) {
+    try {
+      const pkgJsonPath = join(pkgDir, 'package.json');
+      pkg = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'));
+      if (pkg.name === moduleName || moduleName.startsWith(pkg.name + '/')) {
+        break;
+      }
+    } catch {
+      // No package.json at this level, keep looking
+    }
+    pkgDir = dirname(pkgDir);
+  }
+
+  if (!pkg) {
+    // Fallback to CJS resolution if we can't find package.json
+    return import(resolvedPath);
+  }
+
+  // Determine ESM entry: exports.import > exports.default > module > main
+  let entry = pkg.main || 'index.js';
+  if (pkg.exports) {
+    const exp = pkg.exports['.'] || pkg.exports;
+    if (typeof exp === 'string') {
+      entry = exp;
+    } else if (exp.import) {
+      entry = typeof exp.import === 'string' ? exp.import : exp.import.default;
+    } else if (exp.default) {
+      entry = exp.default;
+    }
+  } else if (pkg.module) {
+    entry = pkg.module;
+  }
+
+  const entryPath = join(pkgDir, entry);
+  return import(pathToFileURL(entryPath).href);
+}
 
 /**
  * Start the Vite development server
@@ -18,6 +65,15 @@ export async function dev(projectRoot = process.cwd(), args = []) {
     process.exit(1);
   }
 
+  // Import vite and plugins from the project's node_modules (ESM)
+  const require = createRequire(join(projectRoot, 'package.json'));
+  const vite = await importFromProject(require, 'vite');
+  const createServer = vite.createServer;
+  const reactPlugin = await importFromProject(require, '@vitejs/plugin-react');
+  const react = reactPlugin.default;
+  const tailwindPlugin = await importFromProject(require, '@tailwindcss/vite');
+  const tailwindcss = tailwindPlugin.default;
+
   // Parse port from args or use default
   let port = parseInt(process.env.PORT || '6767');
   const portArgIndex = args.findIndex(arg => arg === '--port' || arg === '-p');

package/bin/commands/login.mjs

@@ -15,7 +15,7 @@ const MAX_POLL_DURATION_MS = 2 * 60 * 1000; // 2 minutes max.
 /**
  * Load existing credentials if present
  */
-function loadCredentials() {
+function loadCredentialsImpl() {
   if (!existsSync(CREDENTIALS_FILE)) {
     return null;
   }
@@ -29,18 +29,62 @@ function loadCredentials() {
 /**
  * Save credentials to disk
  */
-function saveCredentials(credentials) {
+function saveCredentialsImpl(credentials) {
   if (!existsSync(CREDENTIALS_DIR)) {
     mkdirSync(CREDENTIALS_DIR, { recursive: true, mode: 0o700 });
   }
   writeFileSync(CREDENTIALS_FILE, JSON.stringify(credentials, null, 2), { mode: 0o600 });
 }
 
+/**
+ * Open a URL in the default browser
+ * Returns true if successful, false otherwise
+ */
+function openBrowserImpl(url) {
+  return new Promise((resolve) => {
+    const os = platform();
+    let command;
+
+    // Platform-specific commands to open URLs
+    if (os === 'darwin') {
+      command = `open "${url}"`;
+    } else if (os === 'win32') {
+      command = `start "" "${url}"`;
+    } else {
+      // Linux and other Unix-like systems
+      command = `xdg-open "${url}"`;
+    }
+
+    exec(command, (error) => {
+      resolve(!error);
+    });
+  });
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Default dependencies (real implementations)
+ */
+export const defaultDeps = {
+  fetch: globalThis.fetch,
+  loadCredentials: loadCredentialsImpl,
+  saveCredentials: saveCredentialsImpl,
+  openBrowser: openBrowserImpl,
+  console,
+  sleep,
+  apiUrl: SUNPEAK_API_URL,
+  pollIntervalMs: POLL_INTERVAL_MS,
+  maxPollDurationMs: MAX_POLL_DURATION_MS,
+};
+
 /**
  * Request a device code from the authorization server
  */
-async function requestDeviceCode() {
-  const response = await fetch(`${SUNPEAK_API_URL}/oauth/device_authorization`, {
+async function requestDeviceCode(deps) {
+  const response = await deps.fetch(`${deps.apiUrl}/oauth/device_authorization`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
   });
@@ -56,13 +100,13 @@ async function requestDeviceCode() {
 /**
  * Poll for the access token
  */
-async function pollForToken(deviceCode) {
+async function pollForToken(deviceCode, deps) {
   const startTime = Date.now();
 
-  while (Date.now() - startTime < MAX_POLL_DURATION_MS) {
+  while (Date.now() - startTime < deps.maxPollDurationMs) {
     let response;
     try {
-      response = await fetch(`${SUNPEAK_API_URL}/oauth/token`, {
+      response = await deps.fetch(`${deps.apiUrl}/oauth/token`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
         body: new URLSearchParams({
@@ -72,7 +116,7 @@ async function pollForToken(deviceCode) {
       });
     } catch (err) {
       // Network error - wait and retry
-      await sleep(POLL_INTERVAL_MS);
+      await deps.sleep(deps.pollIntervalMs);
       continue;
     }
 
@@ -95,13 +139,13 @@ async function pollForToken(deviceCode) {
     // Handle standard OAuth 2.0 device flow errors (expected during polling)
     if (data.error === 'authorization_pending') {
       // User hasn't authorized yet, keep polling
-      await sleep(POLL_INTERVAL_MS);
+      await deps.sleep(deps.pollIntervalMs);
       continue;
     }
 
     if (data.error === 'slow_down') {
       // Server asking us to slow down, increase interval
-      await sleep(POLL_INTERVAL_MS * 2);
+      await deps.sleep(deps.pollIntervalMs * 2);
       continue;
     }
 
@@ -126,50 +170,24 @@ async function pollForToken(deviceCode) {
   throw new Error('Authorization timed out. Please try again.');
 }
 
-function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-/**
- * Open a URL in the default browser
- * Returns true if successful, false otherwise
- */
-function openBrowser(url) {
-  return new Promise((resolve) => {
-    const os = platform();
-    let command;
-
-    // Platform-specific commands to open URLs
-    if (os === 'darwin') {
-      command = `open "${url}"`;
-    } else if (os === 'win32') {
-      command = `start "" "${url}"`;
-    } else {
-      // Linux and other Unix-like systems
-      command = `xdg-open "${url}"`;
-    }
-
-    exec(command, (error) => {
-      resolve(!error);
-    });
-  });
-}
-
 /**
  * Main login command
+ * @param {Object} deps - Dependencies (for testing). Uses defaultDeps if not provided.
  */
-export async function login() {
+export async function login(deps = defaultDeps) {
+  const d = { ...defaultDeps, ...deps };
+
   // Check if already logged in
-  const existing = loadCredentials();
+  const existing = d.loadCredentials();
   if (existing?.access_token) {
-    console.log('Already logged in. Run "sunpeak logout" first to switch accounts.');
+    d.console.log('Already logged in. Run "sunpeak logout" first to switch accounts.');
     return;
   }
 
-  console.log('Starting device authorization flow...\n');
+  d.console.log('Starting device authorization flow...\n');
 
   // Step 1: Request device code
-  const deviceAuth = await requestDeviceCode();
+  const deviceAuth = await requestDeviceCode(d);
 
   // Step 2: Open browser and display instructions
   // Prefer verification_uri_complete which has the code pre-filled
@@ -177,21 +195,21 @@ export async function login() {
     deviceAuth.verification_uri_complete ||
     `${deviceAuth.verification_uri}?user_code=${encodeURIComponent(deviceAuth.user_code)}`;
 
-  const browserOpened = await openBrowser(authUrl);
+  const browserOpened = await d.openBrowser(authUrl);
 
   if (browserOpened) {
-    console.log('Opening browser for authentication...\n');
-    console.log(`If the browser didn't open, visit: ${deviceAuth.verification_uri}`);
-    console.log(`And enter code: ${deviceAuth.user_code}`);
+    d.console.log('Opening browser for authentication...\n');
+    d.console.log(`If the browser didn't open, visit: ${deviceAuth.verification_uri}`);
+    d.console.log(`And enter code: ${deviceAuth.user_code}`);
   } else {
-    console.log('To complete login, please:');
-    console.log(`  1. Visit: ${deviceAuth.verification_uri}`);
-    console.log(`  2. Enter code: ${deviceAuth.user_code}`);
+    d.console.log('To complete login, please:');
+    d.console.log(`  1. Visit: ${deviceAuth.verification_uri}`);
+    d.console.log(`  2. Enter code: ${deviceAuth.user_code}`);
   }
-  console.log('\nWaiting for authorization...');
+  d.console.log('\nWaiting for authorization...');
 
   // Step 3: Poll for token
-  const tokenResponse = await pollForToken(deviceAuth.device_code);
+  const tokenResponse = await pollForToken(deviceAuth.device_code, d);
 
   // Step 4: Save credentials
   const credentials = {
@@ -203,9 +221,9 @@ export async function login() {
     created_at: Date.now(),
   };
 
-  saveCredentials(credentials);
+  d.saveCredentials(credentials);
 
-  console.log('\n✓ Successfully logged in to Sunpeak!');
+  d.console.log('\n✓ Successfully logged in to Sunpeak!');
 }
 
 // Allow running directly

package/bin/commands/logout.mjs

@@ -10,7 +10,7 @@ const CREDENTIALS_FILE = join(CREDENTIALS_DIR, 'credentials.json');
 /**
  * Load existing credentials if present
  */
-function loadCredentials() {
+function loadCredentialsImpl() {
   if (!existsSync(CREDENTIALS_FILE)) {
     return null;
   }
@@ -24,18 +24,29 @@ function loadCredentials() {
 /**
  * Delete credentials file
  */
-function deleteCredentials() {
+function deleteCredentialsImpl() {
   if (existsSync(CREDENTIALS_FILE)) {
     unlinkSync(CREDENTIALS_FILE);
   }
 }
 
+/**
+ * Default dependencies (real implementations)
+ */
+export const defaultDeps = {
+  fetch: globalThis.fetch,
+  loadCredentials: loadCredentialsImpl,
+  deleteCredentials: deleteCredentialsImpl,
+  console,
+  apiUrl: SUNPEAK_API_URL,
+};
+
 /**
  * Revoke the access token on the server
  */
-async function revokeToken(accessToken) {
+async function revokeToken(accessToken, deps) {
   try {
-    const response = await fetch(`${SUNPEAK_API_URL}/oauth/revoke`, {
+    const response = await deps.fetch(`${deps.apiUrl}/oauth/revoke`, {
       method: 'POST',
       headers: {
         Authorization: `Bearer ${accessToken}`,
@@ -54,27 +65,30 @@ async function revokeToken(accessToken) {
 
 /**
  * Main logout command
+ * @param {Object} deps - Dependencies (for testing). Uses defaultDeps if not provided.
  */
-export async function logout() {
-  const credentials = loadCredentials();
+export async function logout(deps = defaultDeps) {
+  const d = { ...defaultDeps, ...deps };
+
+  const credentials = d.loadCredentials();
 
   if (!credentials?.access_token) {
-    console.log('Not logged in.');
+    d.console.log('Not logged in.');
     return;
   }
 
-  console.log('Logging out...');
+  d.console.log('Logging out...');
 
   // Revoke token on server
-  const revoked = await revokeToken(credentials.access_token);
+  const revoked = await revokeToken(credentials.access_token, d);
 
   // Always delete local credentials regardless of revocation result
-  deleteCredentials();
+  d.deleteCredentials();
 
   if (revoked) {
-    console.log('✓ Successfully logged out of Sunpeak.');
+    d.console.log('✓ Successfully logged out of Sunpeak.');
   } else {
-    console.log('✓ Logged out locally. (Server token revocation may have failed)');
+    d.console.log('✓ Logged out locally. (Server token revocation may have failed)');
   }
 }
 

package/bin/commands/mcp.mjs

@@ -29,7 +29,7 @@ export async function mcp(projectRoot = process.cwd(), args = []) {
   // Add inline nodemon configuration
   nodemonArgs.push(
     '--watch', 'src',
-    '--ext', 'ts,tsx,js,jsx,css',
+    '--ext', 'ts,tsx,js,jsx,css,json',
     '--ignore', 'dist',
     '--ignore', 'node_modules',
     '--ignore', '.tmp',

package/bin/commands/pull.mjs

@@ -10,7 +10,7 @@ const CREDENTIALS_FILE = join(CREDENTIALS_DIR, 'credentials.json');
 /**
  * Load credentials from disk
  */
-function loadCredentials() {
+function loadCredentialsImpl() {
   if (!existsSync(CREDENTIALS_FILE)) {
     return null;
   }
@@ -21,16 +21,32 @@ function loadCredentials() {
   }
 }
 
+/**
+ * Default dependencies (real implementations)
+ */
+export const defaultDeps = {
+  fetch: globalThis.fetch,
+  loadCredentials: loadCredentialsImpl,
+  existsSync,
+  mkdirSync,
+  writeFileSync,
+  console,
+  process,
+  apiUrl: SUNPEAK_API_URL,
+};
+
 /**
  * Lookup resources by tag and repository
  * @returns {Promise<Array>} Array of matching resources
  */
-async function lookupResources(tag, repository, accessToken, name = null) {
+async function lookupResources(tag, repository, accessToken, name = null, deps = defaultDeps) {
+  const d = { ...defaultDeps, ...deps };
+
   const params = new URLSearchParams({ tag, repository });
   if (name) {
     params.set('name', name);
   }
-  const response = await fetch(`${SUNPEAK_API_URL}/api/v1/resources/lookup?${params}`, {
+  const response = await d.fetch(`${d.apiUrl}/api/v1/resources/lookup?${params}`, {
     headers: {
       Authorization: `Bearer ${accessToken}`,
     },
@@ -48,13 +64,15 @@ async function lookupResources(tag, repository, accessToken, name = null) {
 /**
  * Download the JS file for a resource
  */
-async function downloadJsFile(resource) {
+async function downloadJsFile(resource, deps = defaultDeps) {
+  const d = { ...defaultDeps, ...deps };
+
   if (!resource.js_file?.url) {
     throw new Error('Resource has no JS file attached');
   }
 
   // The URL is a pre-signed S3 URL, no additional auth needed
-  const response = await fetch(resource.js_file.url);
+  const response = await d.fetch(resource.js_file.url);
 
   if (!response.ok) {
     throw new Error(`Failed to download JS file: HTTP ${response.status}`);
@@ -71,11 +89,14 @@ async function downloadJsFile(resource) {
  * @param {string} options.tag - Tag name to pull (required)
  * @param {string} options.name - Resource name to filter by (optional)
  * @param {string} options.output - Output directory (optional, defaults to current directory)
+ * @param {Object} deps - Dependencies (for testing). Uses defaultDeps if not provided.
  */
-export async function pull(projectRoot = process.cwd(), options = {}) {
+export async function pull(projectRoot = process.cwd(), options = {}, deps = defaultDeps) {
+  const d = { ...defaultDeps, ...deps };
+
   // Handle help flag
   if (options.help) {
-    console.log(`
+    d.console.log(`
 sunpeak pull - Pull resources from the Sunpeak repository
 
 Usage:
@@ -97,74 +118,74 @@ Examples:
   }
 
   // Check credentials
-  const credentials = loadCredentials();
+  const credentials = d.loadCredentials();
   if (!credentials?.access_token) {
-    console.error('Error: Not logged in. Run "sunpeak login" first.');
-    process.exit(1);
+    d.console.error('Error: Not logged in. Run "sunpeak login" first.');
+    d.process.exit(1);
   }
 
   // Require repository
   if (!options.repository) {
-    console.error('Error: Repository is required. Use --repository or -r to specify a repository.');
-    console.error('Example: sunpeak pull -r myorg/my-app -t prod');
-    process.exit(1);
+    d.console.error('Error: Repository is required. Use --repository or -r to specify a repository.');
+    d.console.error('Example: sunpeak pull -r myorg/my-app -t prod');
+    d.process.exit(1);
   }
 
   // Require tag
   if (!options.tag) {
-    console.error('Error: Tag is required. Use --tag or -t to specify a tag.');
-    console.error('Example: sunpeak pull -r myorg/my-app -t prod');
-    process.exit(1);
+    d.console.error('Error: Tag is required. Use --tag or -t to specify a tag.');
+    d.console.error('Example: sunpeak pull -r myorg/my-app -t prod');
+    d.process.exit(1);
   }
 
   const repository = options.repository;
 
   const nameFilter = options.name ? ` with name "${options.name}"` : '';
-  console.log(`Pulling resources from repository "${repository}" with tag "${options.tag}"${nameFilter}...`);
-  console.log();
+  d.console.log(`Pulling resources from repository "${repository}" with tag "${options.tag}"${nameFilter}...`);
+  d.console.log();
 
   try {
     // Lookup resources
-    const resources = await lookupResources(options.tag, repository, credentials.access_token, options.name);
+    const resources = await lookupResources(options.tag, repository, credentials.access_token, options.name, d);
 
     if (!resources || resources.length === 0) {
-      console.error('Error: No resources found matching the criteria.');
-      process.exit(1);
+      d.console.error('Error: No resources found matching the criteria.');
+      d.process.exit(1);
     }
 
-    console.log(`Found ${resources.length} resource(s):\n`);
+    d.console.log(`Found ${resources.length} resource(s):\n`);
 
     // Determine output directory
     const outputDir = options.output || projectRoot;
 
     // Create output directory if it doesn't exist
-    if (!existsSync(outputDir)) {
-      mkdirSync(outputDir, { recursive: true });
+    if (!d.existsSync(outputDir)) {
+      d.mkdirSync(outputDir, { recursive: true });
     }
 
     // Process each resource
     for (const resource of resources) {
-      console.log(`Resource: ${resource.name}`);
-      console.log(`  Title: ${resource.title}`);
-      console.log(`  URI: ${resource.uri}`);
-      console.log(`  Tags: ${resource.tags?.join(', ') || 'none'}`);
-      console.log(`  Created: ${resource.created_at}`);
+      d.console.log(`Resource: ${resource.name}`);
+      d.console.log(`  Title: ${resource.title}`);
+      d.console.log(`  URI: ${resource.uri}`);
+      d.console.log(`  Tags: ${resource.tags?.join(', ') || 'none'}`);
+      d.console.log(`  Created: ${resource.created_at}`);
 
       if (!resource.js_file) {
-        console.log(`  ⚠ Skipping: No JS file attached.\n`);
+        d.console.log(`  ⚠ Skipping: No JS file attached.\n`);
         continue;
       }
 
       // Download the JS file
-      console.log(`  Downloading JS file...`);
-      const jsContent = await downloadJsFile(resource);
+      d.console.log(`  Downloading JS file...`);
+      const jsContent = await downloadJsFile(resource, d);
 
       const outputFile = join(outputDir, `${resource.name}.js`);
       const metaFile = join(outputDir, `${resource.name}.json`);
 
       // Write the JS file
-      writeFileSync(outputFile, jsContent);
-      console.log(`  ✓ Saved ${resource.name}.js`);
+      d.writeFileSync(outputFile, jsContent);
+      d.console.log(`  ✓ Saved ${resource.name}.js`);
 
       // Write metadata JSON
       const meta = {
@@ -181,14 +202,14 @@ Examples:
           },
         },
       };
-      writeFileSync(metaFile, JSON.stringify(meta, null, 2));
-      console.log(`  ✓ Saved ${resource.name}.json\n`);
+      d.writeFileSync(metaFile, JSON.stringify(meta, null, 2));
+      d.console.log(`  ✓ Saved ${resource.name}.json\n`);
     }
 
-    console.log(`✓ Successfully pulled ${resources.length} resource(s) to ${outputDir}`);
+    d.console.log(`✓ Successfully pulled ${resources.length} resource(s) to ${outputDir}`);
   } catch (error) {
-    console.error(`Error: ${error.message}`);
-    process.exit(1);
+    d.console.error(`Error: ${error.message}`);
+    d.process.exit(1);
   }
 }