sunpeak 0.17.4 → 0.17.6

package/dist/mcp/types.d.ts

@@ -106,4 +106,11 @@ export interface MCPServerConfig {
      * When not provided, resources serve pre-built HTML (production mode).
      */
     viteServer?: unknown;
+    /**
+     * When true, UI tool calls always use the real handler (bypassing simulation
+     * mock data). When false (default), UI tools with structuredContent in their
+     * simulation return mock data — real handlers are only used for backend-only
+     * tools. Set by `--prod-tools` flag in `sunpeak dev`.
+     */
+    prodTools?: boolean;
 }

package/dist/simulator/index.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-9hOWP6kD.cjs");
 require("../protocol-jbxhzcnS.cjs");
-const require_simulator = require("../simulator-CH9hs0N6.cjs");
-const require_simulator_url = require("../simulator-url-CozKF1jf.cjs");
+const require_simulator = require("../simulator-DqWETA_1.cjs");
+const require_simulator_url = require("../simulator-url-3ATCsPOT.cjs");
 const require_discovery = require("../discovery-Clu4uHp1.cjs");
 //#region src/simulator/index.ts
 var simulator_exports = /* @__PURE__ */ require_chunk.__exportAll({

package/dist/simulator/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/simulator/index.ts"],"sourcesContent":["/**\n * Generic multi-host simulator for Sunpeak MCP Apps.\n *\n * The Simulator component provides a dev environment for testing MCP Apps\n * against multiple host platforms (ChatGPT, Claude, etc.).\n *\n * @example\n * ```tsx\n * import { simulator } from 'sunpeak';\n * const { Simulator } = simulator;\n *\n * <Simulator simulations={simulations} appName=\"My App\" />\n * ```\n *\n * @module sunpeak/simulator\n */\n\n// Register built-in host shells\nimport '../chatgpt/chatgpt-host';\nimport '../claude/claude-host';\n\n// Core simulator component\nexport { Simulator } from './simulator';\nexport type { SimulatorProps } from './simulator';\n\n// State hook (for custom simulator builds)\nexport { useSimulatorState } from './use-simulator-state';\nexport type { UseSimulatorStateOptions, SimulatorState } from './use-simulator-state';\n\n// Host shell system\nexport { registerHostShell, getHostShell, getRegisteredHosts } from './hosts';\nexport type { HostConversationProps, HostShell, HostId } from './hosts';\n\n// Infrastructure\nexport { McpAppHost } from './mcp-app-host';\nexport type { McpAppHostOptions } from './mcp-app-host';\nexport { IframeResource, extractResourceCSP } from './iframe-resource';\nexport type { ResourceCSP } from './iframe-resource';\nexport { ThemeProvider, useThemeContext } from './theme-provider';\n\n// MCP connection (inspect mode)\nexport { useMcpConnection } from './use-mcp-connection';\nexport type { McpConnectionState } from './use-mcp-connection';\n\n// Simulation types & resolution\nexport type { Simulation, ServerToolMock } from '../types/simulation';\nexport { resolveServerToolResult } from '../types/simulation';\n\n// Types & URL helpers\nexport type { ScreenWidth, SimulatorConfig } from './simulator-types';\nexport { SCREEN_WIDTHS } from './simulator-types';\nexport { createSimulatorUrl } from './simulator-url';\nexport type { SimulatorUrlParams } from './simulator-url';\n\n// Sidebar components (for building custom simulators)\nexport {\n  SimpleSidebar,\n  SidebarControl,\n  SidebarCollapsibleControl,\n  SidebarSelect,\n  SidebarInput,\n  SidebarCheckbox,\n  SidebarTextarea,\n  SidebarToggle,\n} from './simple-sidebar';\n\n// Discovery utilities\nexport {\n  toPascalCase,\n  extractResourceKey,\n  extractSimulationKey,\n  findResourceKey,\n  getComponentName,\n  findResourceDirs,\n} from '../lib/discovery';\nexport type { ResourceDirInfo, FsOps } from '../lib/discovery';\n"],"mappings":""}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/simulator/index.ts"],"sourcesContent":["/**\n * Generic multi-host simulator for Sunpeak MCP Apps.\n *\n * The Simulator component provides a dev environment for testing MCP Apps\n * against multiple host platforms (ChatGPT, Claude, etc.).\n *\n * @example\n * ```tsx\n * import { simulator } from 'sunpeak';\n * const { Simulator } = simulator;\n *\n * <Simulator simulations={simulations} appName=\"My App\" />\n * ```\n *\n * @module sunpeak/simulator\n */\n\n// Register built-in host shells\nimport '../chatgpt/chatgpt-host';\nimport '../claude/claude-host';\n\n// Core simulator component\nexport { Simulator } from './simulator';\nexport type { SimulatorProps } from './simulator';\n\n// State hook (for custom simulator builds)\nexport { useSimulatorState } from './use-simulator-state';\nexport type { UseSimulatorStateOptions, SimulatorState } from './use-simulator-state';\n\n// Host shell system\nexport { registerHostShell, getHostShell, getRegisteredHosts } from './hosts';\nexport type { HostConversationProps, HostShell, HostId } from './hosts';\n\n// Infrastructure\nexport { McpAppHost } from './mcp-app-host';\nexport type { McpAppHostOptions } from './mcp-app-host';\nexport { IframeResource, extractResourceCSP } from './iframe-resource';\nexport type { ResourceCSP } from './iframe-resource';\nexport { ThemeProvider, useThemeContext } from './theme-provider';\n\n// MCP connection\nexport { useMcpConnection } from './use-mcp-connection';\nexport type { McpConnectionState } from './use-mcp-connection';\n\n// Simulation types & resolution\nexport type { Simulation, ServerToolMock } from '../types/simulation';\nexport { resolveServerToolResult } from '../types/simulation';\n\n// Types & URL helpers\nexport type { ScreenWidth, SimulatorConfig } from './simulator-types';\nexport { SCREEN_WIDTHS } from './simulator-types';\nexport { createSimulatorUrl } from './simulator-url';\nexport type { SimulatorUrlParams } from './simulator-url';\n\n// Sidebar components (for building custom simulators)\nexport {\n  SimpleSidebar,\n  SidebarControl,\n  SidebarCollapsibleControl,\n  SidebarSelect,\n  SidebarInput,\n  SidebarCheckbox,\n  SidebarTextarea,\n  SidebarToggle,\n} from './simple-sidebar';\n\n// Discovery utilities\nexport {\n  toPascalCase,\n  extractResourceKey,\n  extractSimulationKey,\n  findResourceKey,\n  getComponentName,\n  findResourceDirs,\n} from '../lib/discovery';\nexport type { ResourceDirInfo, FsOps } from '../lib/discovery';\n"],"mappings":""}

package/dist/simulator/index.js

@@ -1,7 +1,7 @@
 import { r as __exportAll } from "../chunk-D6g4UhsZ.js";
 import "../protocol-DJmRaBzO.js";
-import { _ as McpAppHost, a as SidebarControl, b as getRegisteredHosts, c as SidebarTextarea, d as ThemeProvider, f as useThemeContext, g as extractResourceCSP, h as IframeResource, i as SidebarCollapsibleControl, l as SidebarToggle, m as useSimulatorState, n as resolveServerToolResult, o as SidebarInput, p as useMcpConnection, r as SidebarCheckbox, s as SidebarSelect, t as Simulator, u as SimpleSidebar, v as SCREEN_WIDTHS, x as registerHostShell, y as getHostShell } from "../simulator-Dl8B-Ljb.js";
-import { t as createSimulatorUrl } from "../simulator-url-KoS_ToP6.js";
+import { _ as McpAppHost, a as SidebarControl, b as getRegisteredHosts, c as SidebarTextarea, d as ThemeProvider, f as useThemeContext, g as extractResourceCSP, h as IframeResource, i as SidebarCollapsibleControl, l as SidebarToggle, m as useSimulatorState, n as resolveServerToolResult, o as SidebarInput, p as useMcpConnection, r as SidebarCheckbox, s as SidebarSelect, t as Simulator, u as SimpleSidebar, v as SCREEN_WIDTHS, x as registerHostShell, y as getHostShell } from "../simulator-BijjlOXb.js";
+import { t as createSimulatorUrl } from "../simulator-url-BbuuWa7S.js";
 import { c as toPascalCase, i as findResourceKey, n as extractSimulationKey, r as findResourceDirs, s as getComponentName, t as extractResourceKey } from "../discovery-Cgoegt62.js";
 //#region src/simulator/index.ts
 var simulator_exports = /* @__PURE__ */ __exportAll({

package/dist/simulator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/simulator/index.ts"],"sourcesContent":["/**\n * Generic multi-host simulator for Sunpeak MCP Apps.\n *\n * The Simulator component provides a dev environment for testing MCP Apps\n * against multiple host platforms (ChatGPT, Claude, etc.).\n *\n * @example\n * ```tsx\n * import { simulator } from 'sunpeak';\n * const { Simulator } = simulator;\n *\n * <Simulator simulations={simulations} appName=\"My App\" />\n * ```\n *\n * @module sunpeak/simulator\n */\n\n// Register built-in host shells\nimport '../chatgpt/chatgpt-host';\nimport '../claude/claude-host';\n\n// Core simulator component\nexport { Simulator } from './simulator';\nexport type { SimulatorProps } from './simulator';\n\n// State hook (for custom simulator builds)\nexport { useSimulatorState } from './use-simulator-state';\nexport type { UseSimulatorStateOptions, SimulatorState } from './use-simulator-state';\n\n// Host shell system\nexport { registerHostShell, getHostShell, getRegisteredHosts } from './hosts';\nexport type { HostConversationProps, HostShell, HostId } from './hosts';\n\n// Infrastructure\nexport { McpAppHost } from './mcp-app-host';\nexport type { McpAppHostOptions } from './mcp-app-host';\nexport { IframeResource, extractResourceCSP } from './iframe-resource';\nexport type { ResourceCSP } from './iframe-resource';\nexport { ThemeProvider, useThemeContext } from './theme-provider';\n\n// MCP connection (inspect mode)\nexport { useMcpConnection } from './use-mcp-connection';\nexport type { McpConnectionState } from './use-mcp-connection';\n\n// Simulation types & resolution\nexport type { Simulation, ServerToolMock } from '../types/simulation';\nexport { resolveServerToolResult } from '../types/simulation';\n\n// Types & URL helpers\nexport type { ScreenWidth, SimulatorConfig } from './simulator-types';\nexport { SCREEN_WIDTHS } from './simulator-types';\nexport { createSimulatorUrl } from './simulator-url';\nexport type { SimulatorUrlParams } from './simulator-url';\n\n// Sidebar components (for building custom simulators)\nexport {\n  SimpleSidebar,\n  SidebarControl,\n  SidebarCollapsibleControl,\n  SidebarSelect,\n  SidebarInput,\n  SidebarCheckbox,\n  SidebarTextarea,\n  SidebarToggle,\n} from './simple-sidebar';\n\n// Discovery utilities\nexport {\n  toPascalCase,\n  extractResourceKey,\n  extractSimulationKey,\n  findResourceKey,\n  getComponentName,\n  findResourceDirs,\n} from '../lib/discovery';\nexport type { ResourceDirInfo, FsOps } from '../lib/discovery';\n"],"mappings":""}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/simulator/index.ts"],"sourcesContent":["/**\n * Generic multi-host simulator for Sunpeak MCP Apps.\n *\n * The Simulator component provides a dev environment for testing MCP Apps\n * against multiple host platforms (ChatGPT, Claude, etc.).\n *\n * @example\n * ```tsx\n * import { simulator } from 'sunpeak';\n * const { Simulator } = simulator;\n *\n * <Simulator simulations={simulations} appName=\"My App\" />\n * ```\n *\n * @module sunpeak/simulator\n */\n\n// Register built-in host shells\nimport '../chatgpt/chatgpt-host';\nimport '../claude/claude-host';\n\n// Core simulator component\nexport { Simulator } from './simulator';\nexport type { SimulatorProps } from './simulator';\n\n// State hook (for custom simulator builds)\nexport { useSimulatorState } from './use-simulator-state';\nexport type { UseSimulatorStateOptions, SimulatorState } from './use-simulator-state';\n\n// Host shell system\nexport { registerHostShell, getHostShell, getRegisteredHosts } from './hosts';\nexport type { HostConversationProps, HostShell, HostId } from './hosts';\n\n// Infrastructure\nexport { McpAppHost } from './mcp-app-host';\nexport type { McpAppHostOptions } from './mcp-app-host';\nexport { IframeResource, extractResourceCSP } from './iframe-resource';\nexport type { ResourceCSP } from './iframe-resource';\nexport { ThemeProvider, useThemeContext } from './theme-provider';\n\n// MCP connection\nexport { useMcpConnection } from './use-mcp-connection';\nexport type { McpConnectionState } from './use-mcp-connection';\n\n// Simulation types & resolution\nexport type { Simulation, ServerToolMock } from '../types/simulation';\nexport { resolveServerToolResult } from '../types/simulation';\n\n// Types & URL helpers\nexport type { ScreenWidth, SimulatorConfig } from './simulator-types';\nexport { SCREEN_WIDTHS } from './simulator-types';\nexport { createSimulatorUrl } from './simulator-url';\nexport type { SimulatorUrlParams } from './simulator-url';\n\n// Sidebar components (for building custom simulators)\nexport {\n  SimpleSidebar,\n  SidebarControl,\n  SidebarCollapsibleControl,\n  SidebarSelect,\n  SidebarInput,\n  SidebarCheckbox,\n  SidebarTextarea,\n  SidebarToggle,\n} from './simple-sidebar';\n\n// Discovery utilities\nexport {\n  toPascalCase,\n  extractResourceKey,\n  extractSimulationKey,\n  findResourceKey,\n  getComponentName,\n  findResourceDirs,\n} from '../lib/discovery';\nexport type { ResourceDirInfo, FsOps } from '../lib/discovery';\n"],"mappings":""}

package/dist/simulator/simulator-url.d.ts

@@ -4,15 +4,28 @@ import { Theme, DisplayMode, DeviceType } from '../types/runtime';
  *
  * Use with `createSimulatorUrl()` to generate type-safe URL paths for e2e tests.
  *
+ * The two primary selectors mirror the sidebar dropdowns:
+ * - `tool` — which tool to inspect (Tool dropdown)
+ * - `simulation` — which simulation fixture to load (Simulation dropdown)
+ *
+ * When only `tool` is specified, no mock data is loaded ("Press Run" state).
+ * When `simulation` is specified, mock data from that fixture renders immediately.
+ * When both are specified, the tool is selected and the simulation provides mock data.
+ *
  * @example
  * ```ts
- * import { createSimulatorUrl } from 'sunpeak/chatgpt';
+ * import { createSimulatorUrl } from 'sunpeak/simulator';
+ *
+ * // Select a tool with no mock data (user must click Run):
+ * await page.goto(createSimulatorUrl({ tool: 'show-albums' }));
  *
- * // In e2e tests:
+ * // Select a simulation (mock data renders immediately):
+ * await page.goto(createSimulatorUrl({ simulation: 'show-albums' }));
+ *
+ * // Full options:
  * await page.goto(createSimulatorUrl({
  *   simulation: 'show-albums',
  *   theme: 'dark',
- *   displayMode: 'fullscreen',
  *   host: 'claude',
  * }));
  * ```
@@ -21,8 +34,15 @@ export interface SimulatorUrlParams {
     /**
      * The simulation name to load (e.g., 'show-albums', 'review-diff').
      * Corresponds to the simulation JSON filename without the `.json` extension.
+     * When specified, mock data from the simulation fixture renders immediately.
      */
     simulation?: string;
+    /**
+     * The tool name to select (e.g., 'show-albums', 'show-map').
+     * When specified without `simulation`, no mock data is loaded — the user
+     * must click Run to call the real handler.
+     */
+    tool?: string;
     /**
      * The host shell to use (e.g., 'chatgpt', 'claude').
      * Switches conversation chrome, theming, and reported host info/capabilities.
@@ -85,25 +105,13 @@ export interface SimulatorUrlParams {
      * Safe area inset from the right of the screen (in pixels).
      */
     safeAreaRight?: number;
-    /**
-     * Enable Prod Tools mode (real tool handlers instead of simulation mocks).
-     */
-    prodTools?: boolean;
     /**
      * Enable Prod Resources mode (production dist/ bundles instead of HMR).
      */
     prodResources?: boolean;
-    /**
-     * MCP server URL for inspect mode. Encoded into the URL for informational purposes.
-     */
-    serverUrl?: string;
-    /**
-     * Pre-select a tool by name (alternative to the `simulation` param).
-     */
-    tool?: string;
 }
 /**
- * Creates a URL path with query parameters for the ChatGPT Simulator.
+ * Creates a URL path with query parameters for the Simulator.
  *
  * @param params - The simulator parameters to encode
  * @param basePath - The base path for the URL (default: '/')
@@ -111,34 +119,17 @@ export interface SimulatorUrlParams {
  *
  * @example
  * ```ts
- * // Basic usage
+ * // Tool only (no mock data, "Press Run" state):
+ * createSimulatorUrl({ tool: 'show-albums' })
+ * // Returns: '/?tool=show-albums'
+ *
+ * // Simulation (mock data renders immediately):
  * createSimulatorUrl({ simulation: 'show-albums', theme: 'light' })
  * // Returns: '/?simulation=show-albums&theme=light'
  *
- * // With display mode
- * createSimulatorUrl({
- *   simulation: 'review-diff',
- *   theme: 'dark',
- *   displayMode: 'fullscreen',
- * })
- * // Returns: '/?simulation=review-diff&theme=dark&displayMode=fullscreen'
- *
- * // With device simulation
- * createSimulatorUrl({
- *   simulation: 'show-map',
- *   deviceType: 'mobile',
- *   touch: true,
- *   hover: false,
- * })
- * // Returns: '/?simulation=show-map&deviceType=mobile&touch=true&hover=false'
- *
- * // With safe area insets (for notch simulation)
- * createSimulatorUrl({
- *   simulation: 'show-carousel',
- *   safeAreaTop: 44,
- *   safeAreaBottom: 34,
- * })
- * // Returns: '/?simulation=show-carousel&safeAreaTop=44&safeAreaBottom=34'
+ * // Both tool and simulation:
+ * createSimulatorUrl({ tool: 'show-albums', simulation: 'show-albums' })
+ * // Returns: '/?tool=show-albums&simulation=show-albums'
  * ```
  */
 export declare function createSimulatorUrl(params: SimulatorUrlParams, basePath?: string): string;

package/dist/simulator/simulator.d.ts

@@ -14,17 +14,23 @@ export interface SimulatorProps {
         name: string;
         arguments?: Record<string, unknown>;
     }) => Promise<CallToolResult> | CallToolResult;
-    /** Direct tool handler call, bypassing MCP server mock data. Used by the Prod Tools Run button to call real handlers. Falls back to onCallTool if not provided. */
+    /** Direct tool handler call, bypassing MCP server mock data. Falls back to onCallTool if not provided. */
     onCallToolDirect?: (params: {
         name: string;
         arguments?: Record<string, unknown>;
     }) => Promise<CallToolResult> | CallToolResult;
-    /** Initial prod-tools mode state. Defaults to false. */
-    defaultProdTools?: boolean;
     /** Initial prod-resources mode state. When true, resources load from dist/ instead of HMR. Defaults to false. */
     defaultProdResources?: boolean;
-    /** Hide Prod Tools and Prod Resources toggles in the sidebar (e.g., for marketing/embedded use). */
+    /** Hide framework-only controls (Prod Resources) in the sidebar. */
     hideSimulatorModes?: boolean;
+    /**
+     * Demo mode for embedding on marketing sites. When true:
+     * - Hides Prod Resources checkbox
+     * - Disables the MCP Server URL input (shows a static example URL)
+     * - Hides the Run button (prevents sending real MCP requests)
+     * - Hides connection status indicator
+     */
+    demoMode?: boolean;
     /**
      * Base URL of the separate-origin sandbox server (e.g., "http://localhost:24680").
      * When provided, the outer iframe loads from this URL instead of using srcdoc,
@@ -32,12 +38,10 @@ export interface SimulatorProps {
      */
     sandboxUrl?: string;
     /**
-     * MCP server URL. When provided, the simulator enters "inspect" mode:
-     * shows a server URL input in the sidebar (replacing prod-tools/prod-resources
-     * checkboxes), routes tool calls to the real server, and always shows the
-     * Run button. Simulations still work — those with toolResult use mock data,
-     * those without call the real server.
+     * MCP server URL. Pre-populates the server URL field in the sidebar and
+     * shows connection status. Users can edit this URL at any time to connect
+     * to a different server.
      */
     mcpServerUrl?: string;
 }
-export declare function Simulator({ children, simulations, appName, appIcon, defaultHost, onCallTool, onCallToolDirect, defaultProdTools, defaultProdResources, hideSimulatorModes, sandboxUrl, mcpServerUrl, }: SimulatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function Simulator({ children, simulations: initialSimulations, appName, appIcon, defaultHost, onCallTool, onCallToolDirect, defaultProdResources, hideSimulatorModes, demoMode, sandboxUrl, mcpServerUrl, }: SimulatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/simulator/use-mcp-connection.d.ts

@@ -3,17 +3,22 @@ export interface McpConnectionState {
     status: 'disconnected' | 'connecting' | 'connected' | 'error';
     /** Error message if status is 'error' */
     error?: string;
-    /** Verify the server connection is alive. */
+    /** Simulations returned after a successful reconnect (undefined until first reconnect or after a failed reconnect) */
+    simulations?: Record<string, unknown>;
+    /** True after at least one user-initiated reconnect has been attempted (URL change). */
+    hasReconnected: boolean;
+    /** Connect to a new MCP server URL. Returns discovered simulations on success. */
     reconnect: (url: string) => Promise<void>;
 }
 /**
  * Hook for managing MCP server connection status via the dev server proxy.
  *
- * On mount (when `serverUrl` is provided), verifies the connection is alive
- * by fetching `/__sunpeak/list-tools`. Tracks connection status for display
- * in the sidebar (colored dot indicator).
+ * On mount (when `initialServerUrl` is provided), verifies the connection is alive
+ * by fetching `/__sunpeak/list-tools`. URL changes are handled by the caller
+ * via `reconnect()`, which posts to `/__sunpeak/connect`.
  *
- * Tool calling is handled separately via the `onCallTool` prop — this
- * hook only manages the connection lifecycle and status display.
+ * This split avoids React StrictMode issues: the mount-only health check runs
+ * once (or safely twice with cancellation), while explicit `reconnect()` calls
+ * are triggered by the Simulator's URL-change effect.
  */
-export declare function useMcpConnection(serverUrl: string | undefined): McpConnectionState;
+export declare function useMcpConnection(initialServerUrl: string | undefined): McpConnectionState;

package/dist/simulator/use-simulator-state.d.ts

@@ -86,7 +86,7 @@ export interface SimulatorState {
     csp: ResourceCSP | undefined;
     permissions: McpUiResourcePermissions | undefined;
     prefersBorder: boolean;
-    urlProdTools: boolean | undefined;
+    urlTool: string | undefined;
     urlProdResources: boolean | undefined;
 }
 export declare function useSimulatorState({ simulations, defaultHost, }: UseSimulatorStateOptions): SimulatorState;