Add confirmation resource, fix sunpeak dev

Author: abewheel

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');

bin/sunpeak.js

@@ -28,7 +28,7 @@ function checkPackageJson() {
 }
 
 function parseResourcesInput(input) {
-  const VALID_RESOURCES = ['albums', 'carousel', 'counter', 'map'];
+  const VALID_RESOURCES = ['albums', 'carousel', 'confirmation', 'counter', 'map'];
 
   // If no input, return all resources
   if (!input || input.trim() === '') {
@@ -59,6 +59,7 @@ function updateIndexFiles(targetDir, selectedResources) {
   const resourceMap = {
     albums: { component: 'album', resourceClass: 'AlbumsResource' },
     carousel: { component: 'carousel', resourceClass: 'CarouselResource' },
+    confirmation: { component: null, resourceClass: 'ConfirmationResource' },
     counter: { component: null, resourceClass: 'CounterResource' },
     map: { component: 'map', resourceClass: 'MapResource' },
   };
@@ -138,7 +139,7 @@ async function init(projectName, resourcesArg) {
     console.log(`☀️ 🏔️ Resources: ${resourcesArg}`);
   } else {
     resourcesInput = await prompt(
-      '☀️ 🏔️ Resources (UIs) to include [albums, carousel, counter, map]: '
+      '☀️ 🏔️ Resources (UIs) to include [albums, carousel, confirmation, counter, map]: '
     );
   }
   const selectedResources = parseResourcesInput(resourcesInput);
@@ -160,6 +161,7 @@ async function init(projectName, resourcesArg) {
   const resourceComponentMap = {
     albums: 'album',
     carousel: 'carousel',
+    confirmation: null, // Confirmation doesn't have a component directory
     counter: null, // Counter doesn't have a component directory
     map: 'map',
   };
@@ -175,7 +177,7 @@ async function init(projectName, resourcesArg) {
       }
 
       // Filter resource files based on selection
-      const VALID_RESOURCES = ['albums', 'carousel', 'counter', 'map'];
+      const VALID_RESOURCES = ['albums', 'carousel', 'confirmation', 'counter', 'map'];
       const excludedResources = VALID_RESOURCES.filter((r) => !selectedResources.includes(r));
 
       for (const resource of excludedResources) {
@@ -402,7 +404,7 @@ Usage:
   npx sunpeak new [name] [resources]   Create a new project (no install needed)
   pnpm dlx sunpeak new                  Alternative with pnpm
 
-  Resources: albums, carousel, counter, map (comma/space separated)
+  Resources: albums, carousel, confirmation, counter, map (comma/space separated)
   Example: npx sunpeak new my-app "albums,carousel"
 
 Inside your project, use npm scripts:

template/README.md

@@ -102,7 +102,7 @@ To add a new UI (MCP Resource), simply create the following files:
 
 - `src/resource/NAME-resource.tsx`
 - `src/resource/NAME-resource.json`
-- `src/simulations/NAME-TOOLNAME-resource.json`
+- `src/simulations/NAME-TOOLNAME-simulation.json`
 
 Only the resource files 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` or `sunpeak mcp`.
 

template/src/resources/confirmation-resource.json

@@ -0,0 +1,12 @@
+{
+  "name": "confirmation",
+  "title": "Confirmation",
+  "description": "Visualize and confirm a proposed set of changes or actions",
+  "mimeType": "text/html+skybridge",
+  "_meta": {
+    "openai/widgetDomain": "https://sunpeak.ai",
+    "openai/widgetCSP": {
+      "resource_domains": ["https://images.unsplash.com", "https://cdn.openai.com"]
+    }
+  }
+}