sunpeak 0.17.6 → 0.18.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -44
- package/bin/commands/dev.mjs +15 -4
- package/bin/commands/inspect.mjs +26 -18
- package/bin/lib/inspect/inspect-config.d.mts +2 -2
- package/bin/lib/inspect/inspect-config.mjs +2 -2
- package/bin/lib/live/chatgpt-page.mjs +2 -2
- package/bin/lib/live/host-page.mjs +3 -8
- package/bin/lib/sandbox-server.mjs +11 -11
- package/bin/sunpeak.js +3 -3
- package/dist/chatgpt/chatgpt-conversation.d.ts +1 -1
- package/dist/chatgpt/index.cjs +20 -20
- package/dist/chatgpt/index.cjs.map +1 -1
- package/dist/chatgpt/index.d.ts +10 -10
- package/dist/chatgpt/index.js +5 -5
- package/dist/chatgpt/index.js.map +1 -1
- package/dist/claude/claude-conversation.d.ts +1 -1
- package/dist/claude/index.cjs +2 -2
- package/dist/claude/index.d.ts +1 -1
- package/dist/claude/index.js +2 -2
- package/dist/host/chatgpt/index.cjs +0 -40
- package/dist/host/chatgpt/index.cjs.map +1 -1
- package/dist/host/chatgpt/index.d.ts +0 -3
- package/dist/host/chatgpt/index.js +1 -40
- package/dist/host/chatgpt/index.js.map +1 -1
- package/dist/host/index.cjs +1 -4
- package/dist/host/index.cjs.map +1 -1
- package/dist/host/index.d.ts +1 -5
- package/dist/host/index.js +2 -4
- package/dist/host/index.js.map +1 -1
- package/dist/index.cjs +9 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -3
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/dist/{simulator → inspector}/hosts.d.ts +3 -3
- package/dist/{simulator → inspector}/iframe-resource.d.ts +3 -3
- package/dist/inspector/index.cjs +74 -0
- package/dist/{simulator → inspector}/index.cjs.map +1 -1
- package/dist/{simulator → inspector}/index.d.ts +8 -8
- package/dist/{simulator → inspector}/index.js +8 -8
- package/dist/{simulator → inspector}/index.js.map +1 -1
- package/dist/{simulator/simulator-types.d.ts → inspector/inspector-types.d.ts} +1 -1
- package/dist/{simulator/simulator-url.d.ts → inspector/inspector-url.d.ts} +15 -15
- package/dist/{simulator/simulator.d.ts → inspector/inspector.d.ts} +3 -3
- package/dist/{simulator → inspector}/mcp-app-host.d.ts +5 -5
- package/dist/{simulator → inspector}/mock-openai-runtime.d.ts +2 -2
- package/dist/{simulator → inspector}/sandbox-proxy.d.ts +1 -1
- package/dist/{simulator/use-simulator-state.d.ts → inspector/use-inspector-state.d.ts} +4 -4
- package/dist/{simulator → inspector}/use-mcp-connection.d.ts +1 -1
- package/dist/{simulator-DqWETA_1.cjs → inspector-CByJjmPD.cjs} +53 -54
- package/dist/{simulator-DqWETA_1.cjs.map → inspector-CByJjmPD.cjs.map} +1 -1
- package/dist/{simulator-BijjlOXb.js → inspector-ClhpqKLi.js} +44 -45
- package/dist/{simulator-BijjlOXb.js.map → inspector-ClhpqKLi.js.map} +1 -1
- package/dist/{simulator-url-3ATCsPOT.cjs → inspector-url-7qhtJwY6.cjs} +10 -10
- package/dist/{simulator-url-3ATCsPOT.cjs.map → inspector-url-7qhtJwY6.cjs.map} +1 -1
- package/dist/{simulator-url-BbuuWa7S.js → inspector-url-DuEFmxLP.js} +9 -9
- package/dist/{simulator-url-BbuuWa7S.js.map → inspector-url-DuEFmxLP.js.map} +1 -1
- package/dist/mcp/index.cjs +1 -1
- package/dist/mcp/index.cjs.map +1 -1
- package/dist/mcp/index.js +1 -1
- package/dist/mcp/index.js.map +1 -1
- package/dist/mcp/types.d.ts +1 -1
- package/dist/style.css +12 -12
- package/dist/types/simulation.d.ts +1 -1
- package/package.json +7 -20
- package/template/dist/albums/albums.html +1 -1
- package/template/dist/albums/albums.json +1 -1
- package/template/dist/carousel/carousel.html +1 -1
- package/template/dist/carousel/carousel.json +1 -1
- package/template/dist/map/map.html +1 -1
- package/template/dist/map/map.json +1 -1
- package/template/dist/review/review.html +1 -1
- package/template/dist/review/review.json +1 -1
- package/template/playwright.config.ts +1 -1
- package/template/src/index-resource.tsx +1 -1
- package/template/src/styles/globals.css +2 -2
- package/template/tests/e2e/albums.spec.ts +13 -13
- package/template/tests/e2e/carousel.spec.ts +11 -11
- package/template/tests/e2e/map.spec.ts +16 -16
- package/template/tests/e2e/review.spec.ts +25 -25
- package/dist/chatgpt/globals.css +0 -2642
- package/dist/host/chatgpt/use-file-download.d.ts +0 -33
- package/dist/simulator/index.cjs +0 -74
- /package/dist/{simulator → inspector}/host-styles.d.ts +0 -0
- /package/dist/{simulator → inspector}/simple-sidebar.d.ts +0 -0
- /package/dist/{simulator → inspector}/theme-provider.d.ts +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { McpUiDisplayMode, McpUiHostContext, McpUiHostCapabilities, McpUiStyles } from '@modelcontextprotocol/ext-apps';
|
|
2
|
-
import { ScreenWidth } from './
|
|
2
|
+
import { ScreenWidth } from './inspector-types';
|
|
3
3
|
type Platform = NonNullable<McpUiHostContext['platform']>;
|
|
4
4
|
/**
|
|
5
5
|
* Props passed to a host shell (conversation chrome) component.
|
|
@@ -26,7 +26,7 @@ export interface HostConversationProps {
|
|
|
26
26
|
headerAction?: React.ReactNode;
|
|
27
27
|
/**
|
|
28
28
|
* Called when the content container width changes (via ResizeObserver).
|
|
29
|
-
* The
|
|
29
|
+
* The inspector uses this to set containerDimensions.maxWidth in hostContext,
|
|
30
30
|
* matching what real hosts report to apps.
|
|
31
31
|
*/
|
|
32
32
|
onContentWidthChange?: (width: number) => void;
|
|
@@ -66,7 +66,7 @@ export interface HostShell {
|
|
|
66
66
|
*/
|
|
67
67
|
styleVariables?: McpUiStyles;
|
|
68
68
|
/**
|
|
69
|
-
* CSS custom properties for the
|
|
69
|
+
* CSS custom properties for the inspector page chrome (sidebar, conversation area).
|
|
70
70
|
* These are applied to the document root and can override the defaults:
|
|
71
71
|
* --sim-bg-sidebar (fallback: var(--color-background-secondary))
|
|
72
72
|
* --sim-bg-conversation (fallback: var(--color-background-primary))
|
|
@@ -48,7 +48,7 @@ declare function generateScriptHtml(scriptSrc: string, theme: string, cspPolicy:
|
|
|
48
48
|
/**
|
|
49
49
|
* Build the iframe `allow` attribute from resource-declared permissions.
|
|
50
50
|
* Maps McpUiResourcePermissions to Permission Policy directives and
|
|
51
|
-
* combines them with
|
|
51
|
+
* combines them with inspector baseline permissions.
|
|
52
52
|
*/
|
|
53
53
|
declare function buildIframeAllow(permissions: McpUiResourcePermissions | undefined): string;
|
|
54
54
|
interface IframeResourceProps {
|
|
@@ -87,13 +87,13 @@ interface IframeResourceProps {
|
|
|
87
87
|
/**
|
|
88
88
|
* Called after the iframe has rendered following a display mode change.
|
|
89
89
|
* The callback receives the display mode that was confirmed.
|
|
90
|
-
* Used by the
|
|
90
|
+
* Used by the inspector to hide content during transitions and only
|
|
91
91
|
* reveal it once the app has committed its DOM for the new mode.
|
|
92
92
|
*/
|
|
93
93
|
onDisplayModeReady?: (mode: string) => void;
|
|
94
94
|
/**
|
|
95
95
|
* Debug: State to inject directly into the app's useAppState hook.
|
|
96
|
-
* This bypasses the normal MCP Apps protocol and is for
|
|
96
|
+
* This bypasses the normal MCP Apps protocol and is for inspector testing.
|
|
97
97
|
*/
|
|
98
98
|
debugInjectState?: Record<string, unknown> | null;
|
|
99
99
|
/**
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_chunk = require("../chunk-9hOWP6kD.cjs");
|
|
3
|
+
require("../protocol-jbxhzcnS.cjs");
|
|
4
|
+
const require_inspector = require("../inspector-CByJjmPD.cjs");
|
|
5
|
+
const require_inspector_url = require("../inspector-url-7qhtJwY6.cjs");
|
|
6
|
+
const require_discovery = require("../discovery-Clu4uHp1.cjs");
|
|
7
|
+
//#region src/inspector/index.ts
|
|
8
|
+
var inspector_exports = /* @__PURE__ */ require_chunk.__exportAll({
|
|
9
|
+
IframeResource: () => require_inspector.IframeResource,
|
|
10
|
+
Inspector: () => require_inspector.Inspector,
|
|
11
|
+
McpAppHost: () => require_inspector.McpAppHost,
|
|
12
|
+
SCREEN_WIDTHS: () => require_inspector.SCREEN_WIDTHS,
|
|
13
|
+
SidebarCheckbox: () => require_inspector.SidebarCheckbox,
|
|
14
|
+
SidebarCollapsibleControl: () => require_inspector.SidebarCollapsibleControl,
|
|
15
|
+
SidebarControl: () => require_inspector.SidebarControl,
|
|
16
|
+
SidebarInput: () => require_inspector.SidebarInput,
|
|
17
|
+
SidebarSelect: () => require_inspector.SidebarSelect,
|
|
18
|
+
SidebarTextarea: () => require_inspector.SidebarTextarea,
|
|
19
|
+
SidebarToggle: () => require_inspector.SidebarToggle,
|
|
20
|
+
SimpleSidebar: () => require_inspector.SimpleSidebar,
|
|
21
|
+
ThemeProvider: () => require_inspector.ThemeProvider,
|
|
22
|
+
createInspectorUrl: () => require_inspector_url.createInspectorUrl,
|
|
23
|
+
extractResourceCSP: () => require_inspector.extractResourceCSP,
|
|
24
|
+
extractResourceKey: () => require_discovery.extractResourceKey,
|
|
25
|
+
extractSimulationKey: () => require_discovery.extractSimulationKey,
|
|
26
|
+
findResourceDirs: () => require_discovery.findResourceDirs,
|
|
27
|
+
findResourceKey: () => require_discovery.findResourceKey,
|
|
28
|
+
getComponentName: () => require_discovery.getComponentName,
|
|
29
|
+
getHostShell: () => require_inspector.getHostShell,
|
|
30
|
+
getRegisteredHosts: () => require_inspector.getRegisteredHosts,
|
|
31
|
+
registerHostShell: () => require_inspector.registerHostShell,
|
|
32
|
+
resolveServerToolResult: () => require_inspector.resolveServerToolResult,
|
|
33
|
+
toPascalCase: () => require_discovery.toPascalCase,
|
|
34
|
+
useInspectorState: () => require_inspector.useInspectorState,
|
|
35
|
+
useMcpConnection: () => require_inspector.useMcpConnection,
|
|
36
|
+
useThemeContext: () => require_inspector.useThemeContext
|
|
37
|
+
});
|
|
38
|
+
//#endregion
|
|
39
|
+
exports.IframeResource = require_inspector.IframeResource;
|
|
40
|
+
exports.Inspector = require_inspector.Inspector;
|
|
41
|
+
exports.McpAppHost = require_inspector.McpAppHost;
|
|
42
|
+
exports.SCREEN_WIDTHS = require_inspector.SCREEN_WIDTHS;
|
|
43
|
+
exports.SidebarCheckbox = require_inspector.SidebarCheckbox;
|
|
44
|
+
exports.SidebarCollapsibleControl = require_inspector.SidebarCollapsibleControl;
|
|
45
|
+
exports.SidebarControl = require_inspector.SidebarControl;
|
|
46
|
+
exports.SidebarInput = require_inspector.SidebarInput;
|
|
47
|
+
exports.SidebarSelect = require_inspector.SidebarSelect;
|
|
48
|
+
exports.SidebarTextarea = require_inspector.SidebarTextarea;
|
|
49
|
+
exports.SidebarToggle = require_inspector.SidebarToggle;
|
|
50
|
+
exports.SimpleSidebar = require_inspector.SimpleSidebar;
|
|
51
|
+
exports.ThemeProvider = require_inspector.ThemeProvider;
|
|
52
|
+
exports.createInspectorUrl = require_inspector_url.createInspectorUrl;
|
|
53
|
+
exports.extractResourceCSP = require_inspector.extractResourceCSP;
|
|
54
|
+
exports.extractResourceKey = require_discovery.extractResourceKey;
|
|
55
|
+
exports.extractSimulationKey = require_discovery.extractSimulationKey;
|
|
56
|
+
exports.findResourceDirs = require_discovery.findResourceDirs;
|
|
57
|
+
exports.findResourceKey = require_discovery.findResourceKey;
|
|
58
|
+
exports.getComponentName = require_discovery.getComponentName;
|
|
59
|
+
exports.getHostShell = require_inspector.getHostShell;
|
|
60
|
+
exports.getRegisteredHosts = require_inspector.getRegisteredHosts;
|
|
61
|
+
Object.defineProperty(exports, "inspector_exports", {
|
|
62
|
+
enumerable: true,
|
|
63
|
+
get: function() {
|
|
64
|
+
return inspector_exports;
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
exports.registerHostShell = require_inspector.registerHostShell;
|
|
68
|
+
exports.resolveServerToolResult = require_inspector.resolveServerToolResult;
|
|
69
|
+
exports.toPascalCase = require_discovery.toPascalCase;
|
|
70
|
+
exports.useInspectorState = require_inspector.useInspectorState;
|
|
71
|
+
exports.useMcpConnection = require_inspector.useMcpConnection;
|
|
72
|
+
exports.useThemeContext = require_inspector.useThemeContext;
|
|
73
|
+
|
|
74
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/inspector/index.ts"],"sourcesContent":["/**\n * Generic multi-host inspector for Sunpeak MCP Apps.\n *\n * The Inspector component provides a dev environment for testing MCP Apps\n * against multiple host platforms (ChatGPT, Claude, etc.).\n *\n * @example\n * ```tsx\n * import { inspector } from 'sunpeak';\n * const { Inspector } = inspector;\n *\n * <Inspector simulations={simulations} appName=\"My App\" />\n * ```\n *\n * @module sunpeak/inspector\n */\n\n// Register built-in host shells\nimport '../chatgpt/chatgpt-host';\nimport '../claude/claude-host';\n\n// Core inspector component\nexport { Inspector } from './inspector';\nexport type { InspectorProps } from './inspector';\n\n// State hook (for custom inspector builds)\nexport { useInspectorState } from './use-inspector-state';\nexport type { UseInspectorStateOptions, InspectorState } from './use-inspector-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, InspectorConfig } from './inspector-types';\nexport { SCREEN_WIDTHS } from './inspector-types';\nexport { createInspectorUrl } from './inspector-url';\nexport type { InspectorUrlParams } from './inspector-url';\n\n// Sidebar components (for building custom inspectors)\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":""}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export type {
|
|
3
|
-
export {
|
|
4
|
-
export type {
|
|
1
|
+
export { Inspector } from './inspector';
|
|
2
|
+
export type { InspectorProps } from './inspector';
|
|
3
|
+
export { useInspectorState } from './use-inspector-state';
|
|
4
|
+
export type { UseInspectorStateOptions, InspectorState } from './use-inspector-state';
|
|
5
5
|
export { registerHostShell, getHostShell, getRegisteredHosts } from './hosts';
|
|
6
6
|
export type { HostConversationProps, HostShell, HostId } from './hosts';
|
|
7
7
|
export { McpAppHost } from './mcp-app-host';
|
|
@@ -13,10 +13,10 @@ export { useMcpConnection } from './use-mcp-connection';
|
|
|
13
13
|
export type { McpConnectionState } from './use-mcp-connection';
|
|
14
14
|
export type { Simulation, ServerToolMock } from '../types/simulation';
|
|
15
15
|
export { resolveServerToolResult } from '../types/simulation';
|
|
16
|
-
export type { ScreenWidth,
|
|
17
|
-
export { SCREEN_WIDTHS } from './
|
|
18
|
-
export {
|
|
19
|
-
export type {
|
|
16
|
+
export type { ScreenWidth, InspectorConfig } from './inspector-types';
|
|
17
|
+
export { SCREEN_WIDTHS } from './inspector-types';
|
|
18
|
+
export { createInspectorUrl } from './inspector-url';
|
|
19
|
+
export type { InspectorUrlParams } from './inspector-url';
|
|
20
20
|
export { SimpleSidebar, SidebarControl, SidebarCollapsibleControl, SidebarSelect, SidebarInput, SidebarCheckbox, SidebarTextarea, SidebarToggle, } from './simple-sidebar';
|
|
21
21
|
export { toPascalCase, extractResourceKey, extractSimulationKey, findResourceKey, getComponentName, findResourceDirs, } from '../lib/discovery';
|
|
22
22
|
export type { ResourceDirInfo, FsOps } from '../lib/discovery';
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { r as __exportAll } from "../chunk-D6g4UhsZ.js";
|
|
2
2
|
import "../protocol-DJmRaBzO.js";
|
|
3
|
-
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
|
|
4
|
-
import { t as
|
|
3
|
+
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 useInspectorState, n as resolveServerToolResult, o as SidebarInput, p as useMcpConnection, r as SidebarCheckbox, s as SidebarSelect, t as Inspector, u as SimpleSidebar, v as SCREEN_WIDTHS, x as registerHostShell, y as getHostShell } from "../inspector-ClhpqKLi.js";
|
|
4
|
+
import { t as createInspectorUrl } from "../inspector-url-DuEFmxLP.js";
|
|
5
5
|
import { c as toPascalCase, i as findResourceKey, n as extractSimulationKey, r as findResourceDirs, s as getComponentName, t as extractResourceKey } from "../discovery-Cgoegt62.js";
|
|
6
|
-
//#region src/
|
|
7
|
-
var
|
|
6
|
+
//#region src/inspector/index.ts
|
|
7
|
+
var inspector_exports = /* @__PURE__ */ __exportAll({
|
|
8
8
|
IframeResource: () => IframeResource,
|
|
9
|
+
Inspector: () => Inspector,
|
|
9
10
|
McpAppHost: () => McpAppHost,
|
|
10
11
|
SCREEN_WIDTHS: () => SCREEN_WIDTHS,
|
|
11
12
|
SidebarCheckbox: () => SidebarCheckbox,
|
|
@@ -16,9 +17,8 @@ var simulator_exports = /* @__PURE__ */ __exportAll({
|
|
|
16
17
|
SidebarTextarea: () => SidebarTextarea,
|
|
17
18
|
SidebarToggle: () => SidebarToggle,
|
|
18
19
|
SimpleSidebar: () => SimpleSidebar,
|
|
19
|
-
Simulator: () => Simulator,
|
|
20
20
|
ThemeProvider: () => ThemeProvider,
|
|
21
|
-
|
|
21
|
+
createInspectorUrl: () => createInspectorUrl,
|
|
22
22
|
extractResourceCSP: () => extractResourceCSP,
|
|
23
23
|
extractResourceKey: () => extractResourceKey,
|
|
24
24
|
extractSimulationKey: () => extractSimulationKey,
|
|
@@ -30,11 +30,11 @@ var simulator_exports = /* @__PURE__ */ __exportAll({
|
|
|
30
30
|
registerHostShell: () => registerHostShell,
|
|
31
31
|
resolveServerToolResult: () => resolveServerToolResult,
|
|
32
32
|
toPascalCase: () => toPascalCase,
|
|
33
|
+
useInspectorState: () => useInspectorState,
|
|
33
34
|
useMcpConnection: () => useMcpConnection,
|
|
34
|
-
useSimulatorState: () => useSimulatorState,
|
|
35
35
|
useThemeContext: () => useThemeContext
|
|
36
36
|
});
|
|
37
37
|
//#endregion
|
|
38
|
-
export { IframeResource, McpAppHost, SCREEN_WIDTHS, SidebarCheckbox, SidebarCollapsibleControl, SidebarControl, SidebarInput, SidebarSelect, SidebarTextarea, SidebarToggle, SimpleSidebar,
|
|
38
|
+
export { IframeResource, Inspector, McpAppHost, SCREEN_WIDTHS, SidebarCheckbox, SidebarCollapsibleControl, SidebarControl, SidebarInput, SidebarSelect, SidebarTextarea, SidebarToggle, SimpleSidebar, ThemeProvider, createInspectorUrl, extractResourceCSP, extractResourceKey, extractSimulationKey, findResourceDirs, findResourceKey, getComponentName, getHostShell, getRegisteredHosts, registerHostShell, resolveServerToolResult, inspector_exports as t, toPascalCase, useInspectorState, useMcpConnection, useThemeContext };
|
|
39
39
|
|
|
40
40
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/inspector/index.ts"],"sourcesContent":["/**\n * Generic multi-host inspector for Sunpeak MCP Apps.\n *\n * The Inspector component provides a dev environment for testing MCP Apps\n * against multiple host platforms (ChatGPT, Claude, etc.).\n *\n * @example\n * ```tsx\n * import { inspector } from 'sunpeak';\n * const { Inspector } = inspector;\n *\n * <Inspector simulations={simulations} appName=\"My App\" />\n * ```\n *\n * @module sunpeak/inspector\n */\n\n// Register built-in host shells\nimport '../chatgpt/chatgpt-host';\nimport '../claude/claude-host';\n\n// Core inspector component\nexport { Inspector } from './inspector';\nexport type { InspectorProps } from './inspector';\n\n// State hook (for custom inspector builds)\nexport { useInspectorState } from './use-inspector-state';\nexport type { UseInspectorStateOptions, InspectorState } from './use-inspector-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, InspectorConfig } from './inspector-types';\nexport { SCREEN_WIDTHS } from './inspector-types';\nexport { createInspectorUrl } from './inspector-url';\nexport type { InspectorUrlParams } from './inspector-url';\n\n// Sidebar components (for building custom inspectors)\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":""}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Theme, DisplayMode, DeviceType } from '../types/runtime';
|
|
2
2
|
/**
|
|
3
|
-
* Strongly-typed URL parameters for the
|
|
3
|
+
* Strongly-typed URL parameters for the Inspector.
|
|
4
4
|
*
|
|
5
|
-
* Use with `
|
|
5
|
+
* Use with `createInspectorUrl()` to generate type-safe URL paths for e2e tests.
|
|
6
6
|
*
|
|
7
7
|
* The two primary selectors mirror the sidebar dropdowns:
|
|
8
8
|
* - `tool` — which tool to inspect (Tool dropdown)
|
|
@@ -14,23 +14,23 @@ import { Theme, DisplayMode, DeviceType } from '../types/runtime';
|
|
|
14
14
|
*
|
|
15
15
|
* @example
|
|
16
16
|
* ```ts
|
|
17
|
-
* import {
|
|
17
|
+
* import { createInspectorUrl } from 'sunpeak/inspector';
|
|
18
18
|
*
|
|
19
19
|
* // Select a tool with no mock data (user must click Run):
|
|
20
|
-
* await page.goto(
|
|
20
|
+
* await page.goto(createInspectorUrl({ tool: 'show-albums' }));
|
|
21
21
|
*
|
|
22
22
|
* // Select a simulation (mock data renders immediately):
|
|
23
|
-
* await page.goto(
|
|
23
|
+
* await page.goto(createInspectorUrl({ simulation: 'show-albums' }));
|
|
24
24
|
*
|
|
25
25
|
* // Full options:
|
|
26
|
-
* await page.goto(
|
|
26
|
+
* await page.goto(createInspectorUrl({
|
|
27
27
|
* simulation: 'show-albums',
|
|
28
28
|
* theme: 'dark',
|
|
29
29
|
* host: 'claude',
|
|
30
30
|
* }));
|
|
31
31
|
* ```
|
|
32
32
|
*/
|
|
33
|
-
export interface
|
|
33
|
+
export interface InspectorUrlParams {
|
|
34
34
|
/**
|
|
35
35
|
* The simulation name to load (e.g., 'show-albums', 'review-diff').
|
|
36
36
|
* Corresponds to the simulation JSON filename without the `.json` extension.
|
|
@@ -50,7 +50,7 @@ export interface SimulatorUrlParams {
|
|
|
50
50
|
*/
|
|
51
51
|
host?: string;
|
|
52
52
|
/**
|
|
53
|
-
* The color theme for the
|
|
53
|
+
* The color theme for the inspector.
|
|
54
54
|
* @default 'dark'
|
|
55
55
|
*/
|
|
56
56
|
theme?: Theme;
|
|
@@ -63,7 +63,7 @@ export interface SimulatorUrlParams {
|
|
|
63
63
|
*/
|
|
64
64
|
displayMode?: DisplayMode;
|
|
65
65
|
/**
|
|
66
|
-
* The locale for the
|
|
66
|
+
* The locale for the inspector (e.g., 'en-US', 'ja-JP').
|
|
67
67
|
* @default 'en-US'
|
|
68
68
|
*/
|
|
69
69
|
locale?: string;
|
|
@@ -111,25 +111,25 @@ export interface SimulatorUrlParams {
|
|
|
111
111
|
prodResources?: boolean;
|
|
112
112
|
}
|
|
113
113
|
/**
|
|
114
|
-
* Creates a URL path with query parameters for the
|
|
114
|
+
* Creates a URL path with query parameters for the Inspector.
|
|
115
115
|
*
|
|
116
|
-
* @param params - The
|
|
116
|
+
* @param params - The inspector parameters to encode
|
|
117
117
|
* @param basePath - The base path for the URL (default: '/')
|
|
118
118
|
* @returns A URL path string with encoded query parameters
|
|
119
119
|
*
|
|
120
120
|
* @example
|
|
121
121
|
* ```ts
|
|
122
122
|
* // Tool only (no mock data, "Press Run" state):
|
|
123
|
-
*
|
|
123
|
+
* createInspectorUrl({ tool: 'show-albums' })
|
|
124
124
|
* // Returns: '/?tool=show-albums'
|
|
125
125
|
*
|
|
126
126
|
* // Simulation (mock data renders immediately):
|
|
127
|
-
*
|
|
127
|
+
* createInspectorUrl({ simulation: 'show-albums', theme: 'light' })
|
|
128
128
|
* // Returns: '/?simulation=show-albums&theme=light'
|
|
129
129
|
*
|
|
130
130
|
* // Both tool and simulation:
|
|
131
|
-
*
|
|
131
|
+
* createInspectorUrl({ tool: 'show-albums', simulation: 'show-albums' })
|
|
132
132
|
* // Returns: '/?tool=show-albums&simulation=show-albums'
|
|
133
133
|
* ```
|
|
134
134
|
*/
|
|
135
|
-
export declare function
|
|
135
|
+
export declare function createInspectorUrl(params: InspectorUrlParams, basePath?: string): string;
|
|
@@ -2,7 +2,7 @@ import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
|
|
|
2
2
|
import { HostId } from './hosts';
|
|
3
3
|
import { Simulation } from '../types/simulation';
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
export interface
|
|
5
|
+
export interface InspectorProps {
|
|
6
6
|
children?: React.ReactNode;
|
|
7
7
|
simulations?: Record<string, Simulation>;
|
|
8
8
|
appName?: string;
|
|
@@ -22,7 +22,7 @@ export interface SimulatorProps {
|
|
|
22
22
|
/** Initial prod-resources mode state. When true, resources load from dist/ instead of HMR. Defaults to false. */
|
|
23
23
|
defaultProdResources?: boolean;
|
|
24
24
|
/** Hide framework-only controls (Prod Resources) in the sidebar. */
|
|
25
|
-
|
|
25
|
+
hideInspectorModes?: boolean;
|
|
26
26
|
/**
|
|
27
27
|
* Demo mode for embedding on marketing sites. When true:
|
|
28
28
|
* - Hides Prod Resources checkbox
|
|
@@ -44,4 +44,4 @@ export interface SimulatorProps {
|
|
|
44
44
|
*/
|
|
45
45
|
mcpServerUrl?: string;
|
|
46
46
|
}
|
|
47
|
-
export declare function
|
|
47
|
+
export declare function Inspector({ children, simulations: initialSimulations, appName, appIcon, defaultHost, onCallTool, onCallToolDirect, defaultProdResources, hideInspectorModes, demoMode, sandboxUrl, mcpServerUrl, }: InspectorProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,7 +2,7 @@ import { McpUiHostContext, McpUiDisplayMode, McpUiHostCapabilities } from '@mode
|
|
|
2
2
|
import { CallToolRequest, CallToolResult, LoggingMessageNotification } from '@modelcontextprotocol/sdk/types.js';
|
|
3
3
|
export interface McpAppHostOptions {
|
|
4
4
|
hostContext?: McpUiHostContext;
|
|
5
|
-
/** Host info reported to the app via MCP protocol. Defaults to
|
|
5
|
+
/** Host info reported to the app via MCP protocol. Defaults to SunpeakInspector. */
|
|
6
6
|
hostInfo?: {
|
|
7
7
|
name: string;
|
|
8
8
|
version: string;
|
|
@@ -29,8 +29,8 @@ export interface McpAppHostOptions {
|
|
|
29
29
|
onSandboxReady?: () => void;
|
|
30
30
|
}
|
|
31
31
|
/**
|
|
32
|
-
* MCP Apps host for the Sunpeak
|
|
33
|
-
* Wraps AppBridge to provide a simpler API for the
|
|
32
|
+
* MCP Apps host for the Sunpeak inspector.
|
|
33
|
+
* Wraps AppBridge to provide a simpler API for the inspector.
|
|
34
34
|
* Connects to an iframe via PostMessageTransport.
|
|
35
35
|
*/
|
|
36
36
|
export declare class McpAppHost {
|
|
@@ -105,12 +105,12 @@ export declare class McpAppHost {
|
|
|
105
105
|
/**
|
|
106
106
|
* Debug: Inject state directly into the app's useAppState hook.
|
|
107
107
|
* This bypasses the normal MCP Apps protocol and is intended for
|
|
108
|
-
*
|
|
108
|
+
* inspector testing/debugging only.
|
|
109
109
|
*/
|
|
110
110
|
injectState(state: Record<string, unknown>): void;
|
|
111
111
|
/**
|
|
112
112
|
* Update mutable options (callbacks) after construction.
|
|
113
|
-
* Allows the
|
|
113
|
+
* Allows the inspector to swap handlers (e.g. onCallTool) without
|
|
114
114
|
* recreating the host and tearing down the iframe connection.
|
|
115
115
|
*/
|
|
116
116
|
updateOptions(partial: Partial<McpAppHostOptions>): void;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Mock OpenAI runtime for the
|
|
2
|
+
* Mock OpenAI runtime for the inspector.
|
|
3
3
|
*
|
|
4
4
|
* ChatGPT-specific hooks (useUploadFile, useRequestModal, etc.) call
|
|
5
5
|
* `window.openai` directly — they don't use the MCP protocol. When the
|
|
6
|
-
* ChatGPT host is selected in the
|
|
6
|
+
* ChatGPT host is selected in the inspector, we inject this mock into
|
|
7
7
|
* the iframe's window so those hooks work during local development.
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* The proxy relays PostMessage between the host (parent) and the app (inner iframe),
|
|
9
9
|
* providing origin isolation and security boundaries.
|
|
10
10
|
*
|
|
11
|
-
* The
|
|
11
|
+
* The inspector replicates this architecture so apps are tested under the same
|
|
12
12
|
* iframe nesting they'll encounter in production.
|
|
13
13
|
*
|
|
14
14
|
* Protocol:
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { McpUiHostContext, McpUiDisplayMode, McpUiTheme, McpUiResourcePermissions } from '@modelcontextprotocol/ext-apps';
|
|
2
2
|
import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
|
|
3
3
|
import { Simulation } from '../types/simulation';
|
|
4
|
-
import { ScreenWidth } from './
|
|
4
|
+
import { ScreenWidth } from './inspector-types';
|
|
5
5
|
import { HostId } from './hosts';
|
|
6
6
|
import { ResourceCSP } from './iframe-resource';
|
|
7
7
|
type Platform = NonNullable<McpUiHostContext['platform']>;
|
|
8
|
-
export interface
|
|
8
|
+
export interface UseInspectorStateOptions {
|
|
9
9
|
simulations: Record<string, Simulation>;
|
|
10
10
|
defaultHost?: HostId;
|
|
11
11
|
}
|
|
12
|
-
export interface
|
|
12
|
+
export interface InspectorState {
|
|
13
13
|
simulationNames: string[];
|
|
14
14
|
selectedSimulationName: string;
|
|
15
15
|
setSelectedSimulationName: (name: string) => void;
|
|
@@ -89,5 +89,5 @@ export interface SimulatorState {
|
|
|
89
89
|
urlTool: string | undefined;
|
|
90
90
|
urlProdResources: boolean | undefined;
|
|
91
91
|
}
|
|
92
|
-
export declare function
|
|
92
|
+
export declare function useInspectorState({ simulations, defaultHost, }: UseInspectorStateOptions): InspectorState;
|
|
93
93
|
export {};
|
|
@@ -19,6 +19,6 @@ export interface McpConnectionState {
|
|
|
19
19
|
*
|
|
20
20
|
* This split avoids React StrictMode issues: the mount-only health check runs
|
|
21
21
|
* once (or safely twice with cancellation), while explicit `reconnect()` calls
|
|
22
|
-
* are triggered by the
|
|
22
|
+
* are triggered by the Inspector's URL-change effect.
|
|
23
23
|
*/
|
|
24
24
|
export declare function useMcpConnection(initialServerUrl: string | undefined): McpConnectionState;
|