Reset app state on simulation switch, fix dev without dist (#20)

* Reset app state when switching simulations, fix dev without dist/

- Add selectedSimulationName to IframeResource key so iframe remounts
  when switching between simulations that share the same resource URL.
  Fixes review Approve/Cancel status persisting across simulation switches.

- Add resolveAlias option to inspectServer and pass sunpeak/simulator
  source alias in workspace dev mode so pnpm dev works without a
  pre-built dist/ directory.

* chore: bump sunpeak version in examples to 0.17.6

* Fix dev without dist/ for CSS: pass Tailwind plugin to inspector

Also alias sunpeak/style.css and sunpeak/chatgpt/globals.css to source,
and pass the Tailwind Vite plugin + lightningcss config so source CSS
with @import "tailwindcss" is processed correctly.

Author: abewheel

examples/albums-example/package.json

@@ -15,7 +15,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
-    "sunpeak": "^0.17.3",
+    "sunpeak": "^0.17.6",
     "tailwind-merge": "^3.5.0",
     "zod": "^4.3.6"
   },

examples/carousel-example/package.json

@@ -15,7 +15,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
-    "sunpeak": "^0.17.3",
+    "sunpeak": "^0.17.6",
     "tailwind-merge": "^3.5.0",
     "zod": "^4.3.6"
   },

examples/map-example/package.json

@@ -15,7 +15,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "mapbox-gl": "^3.20.0",
-    "sunpeak": "^0.17.3",
+    "sunpeak": "^0.17.6",
     "tailwind-merge": "^3.5.0",
     "zod": "^4.3.6"
   },

examples/review-example/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "sunpeak": "^0.17.3",
+    "sunpeak": "^0.17.6",
     "tailwind-merge": "^3.5.0",
     "zod": "^4.3.6"
   },

packages/sunpeak/bin/commands/dev.mjs

@@ -526,6 +526,18 @@ if (import.meta.hot) {
     projectRoot,
     noBegging,
     open: !process.env.CI && !process.env.SUNPEAK_LIVE_TEST,
+    // In workspace dev mode, resolve sunpeak imports to source files so the
+    // inspector's Vite server works without a pre-built dist/ directory.
+    // The Tailwind plugin is also passed so source CSS (@import "tailwindcss") is processed.
+    ...(isTemplate && {
+      resolveAlias: {
+        'sunpeak/simulator': resolve(parentSrc, 'simulator/index.ts'),
+        'sunpeak/style.css': resolve(parentSrc, 'style.css'),
+        'sunpeak/chatgpt/globals.css': resolve(parentSrc, 'chatgpt/globals.css'),
+      },
+      vitePlugins: [tailwindcss()],
+      viteCssConfig: lightningcssConfig,
+    }),
     // Direct tool handler call for Prod Tools Run button.
     // Re-imports via Vite SSR on each call so handlers pick up HMR changes.
     callToolDirect: async (name, args) => {

packages/sunpeak/bin/commands/inspect.mjs

@@ -509,6 +509,9 @@ function readRequestBody(req) {
  * @param {boolean} [opts.open] - Whether to open browser (default: !CI && !SUNPEAK_LIVE_TEST)
  * @param {(name: string, args: Record<string, unknown>) => Promise<object>} [opts.callToolDirect] - Direct handler call (bypasses MCP, for prod-tools)
  * @param {() => Promise<void>} [opts.onCleanup] - Additional cleanup callback on exit
+ * @param {Record<string, string>} [opts.resolveAlias] - Vite resolve aliases (e.g., to map sunpeak imports to source)
+ * @param {object[]} [opts.vitePlugins] - Additional Vite plugins (e.g., Tailwind for source CSS)
+ * @param {object} [opts.viteCssConfig] - Vite css config override (e.g., lightningcss customAtRules)
  */
 export async function inspectServer(opts) {
   const {
@@ -523,6 +526,9 @@ export async function inspectServer(opts) {
     noBegging = false,
     open,
     onCleanup,
+    resolveAlias,
+    vitePlugins: extraVitePlugins = [],
+    viteCssConfig,
   } = opts;
 
   // Load favicon from sunpeak package for the inspector UI.
@@ -623,8 +629,11 @@ export async function inspectServer(opts) {
   const server = await createServer({
     root: SUNPEAK_PKG_DIR,
     configFile: false,
+    ...(resolveAlias ? { resolve: { alias: resolveAlias } } : {}),
+    ...(viteCssConfig ? { css: { lightningcss: viteCssConfig } } : {}),
     plugins: [
       react(),
+      ...extraVitePlugins,
       sunpeakInspectVirtualPlugin(
         simulations,
         simulatorServerUrl,

packages/sunpeak/src/simulator/simulator.tsx

@@ -533,7 +533,7 @@ export function Simulator({
     content = (
       <div className="h-full w-full" style={{ background: iframeBg }}>
         <IframeResource
-          key={`${state.activeHost}-${effectiveResourceUrl}-${prodResources}-${prodResourcesGeneration}`}
+          key={`${state.activeHost}-${state.selectedSimulationName}-${effectiveResourceUrl}-${prodResources}-${prodResourcesGeneration}`}
           src={effectiveResourceUrl}
           hostContext={hostContext}
           toolInput={state.toolInput}
@@ -559,7 +559,7 @@ export function Simulator({
     content = (
       <div className="h-full w-full" style={{ background: iframeBg }}>
         <IframeResource
-          key={`${state.activeHost}-${state.resourceScript}`}
+          key={`${state.activeHost}-${state.selectedSimulationName}-${state.resourceScript}`}
           scriptSrc={state.resourceScript}
           hostContext={hostContext}
           toolInput={state.toolInput}
@@ -741,8 +741,7 @@ export function Simulator({
                             {
                               value: '__none__',
                               label:
-                                selectedToolInfo &&
-                                selectedToolInfo.fixtureSimNames.length > 0
+                                selectedToolInfo && selectedToolInfo.fixtureSimNames.length > 0
                                   ? 'None (call server)'
                                   : 'None',
                             },