sunpeak 0.7.11 → 0.8.4

package/dist/style.css

@@ -27,6 +27,7 @@
       --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -118,6 +119,10 @@
     --text-xs--line-height: var(--font-text-xs-line-height);
     --text-xs--font-weight: var(--font-text-xs-weight);
     --text-xs--letter-spacing: var(--font-text-xs-tracking);
+    --text-xl: var(--font-heading-md-size);
+    --text-xl--line-height: var(--font-heading-md-line-height);
+    --text-xl--font-weight: var(--font-text-lg-weight);
+    --text-xl--letter-spacing: var(--font-heading-md-tracking);
     --text-2xl: var(--font-heading-lg-size);
     --text-2xl--line-height: var(--font-heading-lg-line-height);
     --text-2xl--font-weight: var(--font-text-lg-weight);
@@ -3318,6 +3323,10 @@
     margin-inline-end: calc(var(--spacing) * 2);
   }
 
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * .5);
+  }
+
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -3381,6 +3390,10 @@
     display: inline;
   }
 
+  .table {
+    display: table;
+  }
+
   .aspect-\[4\/3\] {
     aspect-ratio: 4 / 3;
   }
@@ -3414,6 +3427,10 @@
     height: calc(var(--spacing) * 5);
   }
 
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+
   .h-7 {
     height: calc(var(--spacing) * 7);
   }
@@ -3490,6 +3507,10 @@
     width: calc(var(--spacing) * 5);
   }
 
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+
   .w-7 {
     width: calc(var(--spacing) * 7);
   }
@@ -3664,6 +3685,10 @@
     gap: calc(var(--spacing) * 3);
   }
 
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+
   :where(.space-y-0\.5 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
@@ -3959,6 +3984,10 @@
     padding: calc(var(--spacing) * 2);
   }
 
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -4015,6 +4044,10 @@
     padding-block: calc(var(--spacing) * 4);
   }
 
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
@@ -4023,6 +4056,10 @@
     padding-top: calc(var(--spacing) * 2);
   }
 
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+
   .pr-12 {
     padding-right: calc(var(--spacing) * 12);
   }
@@ -4101,6 +4138,13 @@
     font-weight: var(--tw-font-weight, var(--text-sm--font-weight));
   }
 
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+    letter-spacing: var(--tw-tracking, var(--text-xl--letter-spacing));
+    font-weight: var(--tw-font-weight, var(--text-xl--font-weight));
+  }
+
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -4150,6 +4194,11 @@
     font-weight: var(--font-weight-semibold);
   }
 
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
+
   .break-words {
     overflow-wrap: break-word;
   }
@@ -4170,6 +4219,10 @@
     white-space: pre-wrap;
   }
 
+  .text-\[\#000000\] {
+    color: #000;
+  }
+
   .text-\[var\(--color-error\)\] {
     color: var(--color-error);
   }
@@ -4186,6 +4239,10 @@
     color: var(--color-white);
   }
 
+  .uppercase {
+    text-transform: uppercase;
+  }
+
   .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -4754,6 +4811,11 @@
   inherits: false
 }
 
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false
+}
+
 @property --tw-shadow {
   syntax: "*";
   inherits: false;

package/dist/types/simulation.d.ts

@@ -42,6 +42,6 @@ export interface Simulation {
     userMessage?: string;
     simulationGlobals?: SimulationGlobals;
     tool: Tool;
-    resource: Resource;
+    resource?: Resource;
     toolCall?: SimulationCallToolResult;
 }

package/package.json

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

package/template/.sunpeak/dev.tsx

@@ -1,44 +1,107 @@
 /**
  * Bootstrap file for Sunpeak dev server
  * This file bootstraps the ChatGPT simulator for development
+ *
+ * Auto-discovers simulations and resources by file naming convention:
+ * - simulations/{resource}-{tool}-simulation.json (e.g., albums-show-simulation.json)
+ * - resources/{resource}-resource.json
+ * - resources/{Resource}Resource component (PascalCase)
  */
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { ChatGPTSimulator, type Simulation } from 'sunpeak';
-import { SIMULATIONS } from '../src/simulations';
-import * as Resources from '../src/resources';
+import resourceComponents from '../src/resources';
 import '../src/styles/globals.css';
 
+// Auto-discover all simulation and resource JSON files
+const simulationModules = import.meta.glob('../src/simulations/*-simulation.json', {
+  eager: true,
+});
+const resourceModules = import.meta.glob('../src/resources/*-resource.json', { eager: true });
+
+// Build resource map from discovered files
+type ResourceData = { name: string; [key: string]: unknown };
+const resourcesMap = new Map<string, ResourceData>();
+for (const [path, module] of Object.entries(resourceModules)) {
+  // Extract key from path: '../src/resources/counter-resource.json' -> 'counter'
+  const match = path.match(/\/([^/]+)-resource\.json$/);
+  const key = match?.[1];
+  if (key) {
+    resourcesMap.set(key, (module as { default: ResourceData }).default);
+  }
+}
+
+// Get sorted resource keys for best-match lookup (longest first)
+const resourceKeys = Array.from(resourcesMap.keys()).sort((a, b) => b.length - a.length);
+
+/**
+ * Find the best matching resource for a simulation key.
+ * Matches the longest resource name that is a prefix of the simulation key.
+ * e.g., 'albums-show' matches 'albums' (not 'album' if both exist)
+ */
+function findResourceKey(simulationKey: string): string | undefined {
+  // Simulation key format: {resource}-{tool} (e.g., 'albums-show')
+  // Find the longest resource name that matches as a prefix followed by '-'
+  for (const resourceKey of resourceKeys) {
+    if (simulationKey === resourceKey || simulationKey.startsWith(resourceKey + '-')) {
+      return resourceKey;
+    }
+  }
+  return undefined;
+}
+
 /**
  * Convert resource name to component name
  * Example: 'carousel' -> 'CarouselResource', 'counter' -> 'CounterResource'
  */
-function getResourceComponentFromName(name: string): React.ComponentType {
-  // Convert name to PascalCase and append 'Resource'
+function getResourceComponent(name: string): React.ComponentType {
   const pascalName = name.charAt(0).toUpperCase() + name.slice(1);
   const componentName = `${pascalName}Resource`;
 
-  const component = Resources[componentName as keyof typeof Resources];
+  const component = resourceComponents[componentName];
 
   if (!component) {
     throw new Error(
       `Resource component "${componentName}" not found for resource "${name}". ` +
-        `Make sure it's exported from src/resources/index.ts`
+        `Make sure src/resources/${name}-resource.tsx exists with a default export.`
     );
   }
 
-  return component as React.ComponentType;
+  return component;
 }
 
-// Package the resource component with the simulation
-const simulations: Simulation[] = Object.values(
-  SIMULATIONS as Record<string, Omit<Simulation, 'resourceComponent'>>
-).map((simulation) => ({
-  ...simulation,
-  resourceComponent: getResourceComponentFromName(simulation.resource.name),
-}));
+// Build simulations array from discovered files
+type SimulationData = Omit<Simulation, 'resourceComponent' | 'resource'>;
+const simulations: Simulation[] = [];
+
+for (const [path, module] of Object.entries(simulationModules)) {
+  // Extract simulation key from path: '../src/simulations/albums-show-simulation.json' -> 'albums-show'
+  const match = path.match(/\/([^/]+)-simulation\.json$/);
+  const simulationKey = match?.[1];
+  if (!simulationKey) continue;
+
+  const simulation = (module as { default: SimulationData }).default;
+
+  // Find matching resource by best prefix match
+  const resourceKey = findResourceKey(simulationKey);
+  if (!resourceKey) {
+    console.warn(
+      `No matching resource found for simulation "${simulationKey}". ` +
+        `Expected a resource file like src/resources/${simulationKey.split('-')[0]}-resource.json`
+    );
+    continue;
+  }
+
+  const resource = resourcesMap.get(resourceKey)!;
+
+  simulations.push({
+    ...simulation,
+    resource,
+    resourceComponent: getResourceComponent(resource.name),
+  });
+}
 
-// Read app config from package.json or use defaults
+// Read app config from environment or use defaults
 const appName = import.meta.env?.VITE_APP_NAME || 'Sunpeak';
 const appIcon = import.meta.env?.VITE_APP_ICON || '🌄';
 

package/template/.sunpeak/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/README.md

@@ -2,13 +2,13 @@
 
 A ChatGPT App UI built with [sunpeak](https://github.com/Sunpeak-AI/sunpeak).
 
-For an initial overview of your new app and the sunpeak API, refer to the [documentation](https://docs.sunpeak.ai/template/project-structure).
+For an initial overview of your new app and a detailed API reference, refer to the [documentation](https://docs.sunpeak.ai/template/project-structure).
 
 ## Quickstart
 
 ```bash
 pnpm install
-pnpm dev
+sunpeak dev
 ```
 
 That's it! Edit the resource files in [./src/resources/](./src/resources/) to build your resource UI.
@@ -16,29 +16,30 @@ That's it! Edit the resource files in [./src/resources/](./src/resources/) to bu
 ## Commands
 
 ```bash
-pnpm dev            # Start development server
-pnpm build          # Build all resources for production
-pnpm mcp            # Start MCP server with auto-reload
-pnpm test           # Run tests with Vitest
+sunpeak dev            # Start development server
+sunpeak build          # Build all resources for production
+sunpeak mcp            # Start MCP server with auto-reload
+pnpm test              # Run tests with Vitest
 ```
 
 The template includes a minimal test setup with Vitest. You can add additional tooling (linting, formatting, type-checking) as needed for your project.
 
 ### Customization
 
+**Do not customize (required by `sunpeak` commands):**
+
+- `src/resources/` - Resource files must be here
+- `src/simulations/` - Simulation files must be here
+- Resource file naming: `*-resource.tsx` (e.g., `counter-resource.tsx`)
+- Simulation file naming: `*-simulation.tsx` (e.g., `counter-simulation.tsx`)
+- `src/index-resource.tsx` - Build template (must have `// RESOURCE_IMPORT` and `// RESOURCE_MOUNT` comments)
+
 **You can customize:**
 
 - Package.json scripts - Add your own tooling (lint, format, typecheck, etc.)
 - Component structure within `src/components/`
 - Package manager (pnpm, npm, or yarn auto-detected)
-
-**Do not customize (required by `sunpeak build`):**
-
-- `src/resources/` - Resource files must be here
-- `src/index-resource.tsx` - Build template (must have `// RESOURCE_IMPORT` and `// RESOURCE_MOUNT` comments)
-- Resource file naming: `*-resource.tsx` (e.g., `counter-resource.tsx`)
-
-If you need to customize these paths, create a custom build script instead of using `sunpeak build`.
+- Pretty much everything else!
 
 ## Testing
 
@@ -62,7 +63,7 @@ Test your app directly in ChatGPT using the built-in MCP server:
 
 ```bash
 # Start the MCP server (rebuilds and restarts on file changes).
-pnpm mcp
+sunpeak mcp
 
 # In another terminal, run a tunnel. For example:
 ngrok http 6766
@@ -70,7 +71,7 @@ ngrok http 6766
 
 You can then connect to the tunnel forwarding URL at the `/mcp` path from ChatGPT **in developer mode** to see your UI in action: `User > Settings > Apps & Connectors > Create`
 
-Once your app is connected, send the name of a tool, like `show counter`, to ChatGPT.
+Once your app is connected, send the name of the app and a tool, like `/sunpeak show counter`, to ChatGPT.
 
 When you make changes to the UI, refresh your app in ChatGPT after the MCP server has finished rebuilding your app: `User > Settings > Apps & Connectors > My App > Refresh`
 
@@ -79,17 +80,31 @@ When you make changes to the UI, refresh your app in ChatGPT after the MCP serve
 Build your app for production:
 
 ```bash
-pnpm build
+sunpeak build
 ```
 
 This creates optimized builds in `dist/`:
 
-- `dist/counter.js`
 - `dist/albums.js`
-- `dist/carousel.js`
+- `dist/albums.json`
+- `dist/counter.js`
+- `dist/counter.json`
 - _(One .js file per resource in src/resources/)_
+- _(One .json file per resource in src/resources/)_
+
+Each `.js` file is a self-contained bundle with CSS inlined. Host these files and reference them as resources in your production MCP server.
+
+Each `.json` file is a copy of each of your resource MCP metadata files `src/resource/*-resource.json`. The copy is identical, but with a unique `uri` field added that will cache-bust earlier resource versions pre-loaded in ChatGPT.
+
+## Add a new UI (Resource)
+
+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-simulation.json`
 
-Each file is a self-contained bundle with CSS inlined. Host these files and reference them as resources in your production MCP server.
+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`.
 
 ## Resources