sunpeak 0.20.23 → 0.20.29
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 +29 -4
- package/bin/commands/inspect.mjs +18 -0
- package/dist/chatgpt/index.cjs +1 -1
- package/dist/chatgpt/index.js +1 -1
- package/dist/claude/index.cjs +1 -1
- package/dist/claude/index.js +1 -1
- package/dist/embed.css +2 -0
- package/dist/host/chatgpt/index.cjs +1 -1
- package/dist/host/chatgpt/index.js +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/inspector/app-flatten.d.ts +7 -0
- package/dist/inspector/app-types.d.ts +83 -0
- package/dist/inspector/iframe-resource.d.ts +19 -1
- package/dist/inspector/index.cjs +3 -1
- package/dist/inspector/index.cjs.map +1 -1
- package/dist/inspector/index.d.ts +2 -0
- package/dist/inspector/index.js +3 -2
- package/dist/inspector/index.js.map +1 -1
- package/dist/inspector/inline-helper-script.d.ts +22 -0
- package/dist/inspector/inspector-api.d.ts +3 -0
- package/dist/inspector/inspector.d.ts +21 -1
- package/dist/inspector/simple-sidebar.d.ts +13 -1
- package/dist/inspector/use-inspector-state.d.ts +1 -0
- package/dist/inspector/use-mcp-connection.d.ts +1 -1
- package/dist/{inspector-CJNvLoHo.js → inspector-B1355aXh.js} +393 -49
- package/dist/inspector-B1355aXh.js.map +1 -0
- package/dist/{inspector-DtEighD9.cjs → inspector-CJPO4f12.cjs} +397 -47
- package/dist/inspector-CJPO4f12.cjs.map +1 -0
- 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/sandbox-proxy.html +173 -0
- package/dist/style.css +9 -1
- package/dist/types/simulation.d.ts +3 -8
- package/dist/{use-app-cSBm5Pjl.js → use-app-C2pGHlnF.js} +2 -2
- package/dist/{use-app-cSBm5Pjl.js.map → use-app-C2pGHlnF.js.map} +1 -1
- package/dist/{use-app-CxtSfkSF.cjs → use-app-DIWh7-3f.cjs} +2 -2
- package/dist/{use-app-CxtSfkSF.cjs.map → use-app-DIWh7-3f.cjs.map} +1 -1
- package/package.json +6 -3
- 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/node_modules/.vite/deps/_metadata.json +3 -3
- package/template/node_modules/.vite-mcp/deps/@modelcontextprotocol_ext-apps.js +1 -1
- package/template/node_modules/.vite-mcp/deps/@modelcontextprotocol_ext-apps.js.map +1 -1
- package/template/node_modules/.vite-mcp/deps/@modelcontextprotocol_ext-apps_app-bridge.js +1 -1
- package/template/node_modules/.vite-mcp/deps/@modelcontextprotocol_ext-apps_app-bridge.js.map +1 -1
- package/template/node_modules/.vite-mcp/deps/@modelcontextprotocol_ext-apps_react.js +1 -1
- package/template/node_modules/.vite-mcp/deps/@modelcontextprotocol_ext-apps_react.js.map +1 -1
- package/template/node_modules/.vite-mcp/deps/_metadata.json +22 -22
- package/template/tests/e2e/visual.spec.ts-snapshots/albums-page-light-claude-linux.png +0 -0
- package/dist/inspector-CJNvLoHo.js.map +0 -1
- package/dist/inspector-DtEighD9.cjs.map +0 -1
|
@@ -40,6 +40,15 @@ declare function isValidCspSource(source: string): boolean;
|
|
|
40
40
|
* Generates a Content Security Policy string.
|
|
41
41
|
*/
|
|
42
42
|
declare function generateCSP(csp: ResourceCSP | undefined, scriptSrc: string): string;
|
|
43
|
+
/**
|
|
44
|
+
* Inject the paint-fence responder and (optionally) a platform runtime script
|
|
45
|
+
* into a user-provided HTML document. Used for the `html` prop mode where the
|
|
46
|
+
* embedder hands us a complete document from `mcpClient.readResource(...)` and
|
|
47
|
+
* we need to splice in the same infrastructure that the `scriptSrc` wrapper
|
|
48
|
+
* provides. The injection is placed before `</head>` when present, falling
|
|
49
|
+
* back to the start of `<body>` or the document start.
|
|
50
|
+
*/
|
|
51
|
+
export declare function injectInfraScripts(html: string, platformScript?: string): string;
|
|
43
52
|
/**
|
|
44
53
|
* Generates HTML wrapper for a script URL.
|
|
45
54
|
* The MCP Apps SDK in the loaded script handles communication via PostMessageTransport.
|
|
@@ -64,6 +73,15 @@ interface IframeResourceProps {
|
|
|
64
73
|
* Mutually exclusive with src.
|
|
65
74
|
*/
|
|
66
75
|
scriptSrc?: string;
|
|
76
|
+
/**
|
|
77
|
+
* Resource HTML to render directly — typically the string returned by
|
|
78
|
+
* `mcpClient.readResource(...)`. The Inspector hands the HTML to the
|
|
79
|
+
* sandbox proxy via PostMessage; the host page never hosts it at a URL.
|
|
80
|
+
* The Inspector injects its paint-fence responder and (when enabled) the
|
|
81
|
+
* platform runtime script before delivery.
|
|
82
|
+
* Mutually exclusive with src and scriptSrc.
|
|
83
|
+
*/
|
|
84
|
+
html?: string;
|
|
67
85
|
/** Initial host context for the MCP Apps bridge */
|
|
68
86
|
hostContext?: McpUiHostContext;
|
|
69
87
|
/** Tool input arguments to send after connection */
|
|
@@ -122,7 +140,7 @@ interface IframeResourceProps {
|
|
|
122
140
|
* connects via PostMessageTransport to window.parent. The parent side uses
|
|
123
141
|
* McpAppHost (wrapping AppBridge) to communicate.
|
|
124
142
|
*/
|
|
125
|
-
export declare function IframeResource({ src, scriptSrc, hostContext, toolInput, toolInputPartial, toolResult, hostOptions, csp, permissions, prefersBorder, className, style, onDisplayModeReady, debugInjectState, injectOpenAIRuntime, sandboxUrl, }: IframeResourceProps): import("react/jsx-runtime").JSX.Element;
|
|
143
|
+
export declare function IframeResource({ src, scriptSrc, html, hostContext, toolInput, toolInputPartial, toolResult, hostOptions, csp, permissions, prefersBorder, className, style, onDisplayModeReady, debugInjectState, injectOpenAIRuntime, sandboxUrl, }: IframeResourceProps): import("react/jsx-runtime").JSX.Element;
|
|
126
144
|
export declare const _testExports: {
|
|
127
145
|
escapeHtml: typeof escapeHtml;
|
|
128
146
|
isAllowedUrl: typeof isAllowedUrl;
|
package/dist/inspector/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
2
|
const require_chunk = require("../chunk-CoPdw6nB.cjs");
|
|
3
|
-
const require_inspector = require("../inspector-
|
|
3
|
+
const require_inspector = require("../inspector-CJPO4f12.cjs");
|
|
4
4
|
const require_inspector_url = require("../inspector-url-CCgv8H74.cjs");
|
|
5
5
|
const require_discovery = require("../discovery-C9fQVb1u.cjs");
|
|
6
6
|
//#region src/inspector/index.ts
|
|
@@ -24,6 +24,7 @@ var inspector_exports = /* @__PURE__ */ require_chunk.__exportAll({
|
|
|
24
24
|
extractSimulationKey: () => require_discovery.extractSimulationKey,
|
|
25
25
|
findResourceDirs: () => require_discovery.findResourceDirs,
|
|
26
26
|
findResourceKey: () => require_discovery.findResourceKey,
|
|
27
|
+
flattenAppToSimulations: () => require_inspector.flattenAppToSimulations,
|
|
27
28
|
getComponentName: () => require_discovery.getComponentName,
|
|
28
29
|
getHostShell: () => require_inspector.getHostShell,
|
|
29
30
|
getRegisteredHosts: () => require_inspector.getRegisteredHosts,
|
|
@@ -54,6 +55,7 @@ exports.extractResourceKey = require_discovery.extractResourceKey;
|
|
|
54
55
|
exports.extractSimulationKey = require_discovery.extractSimulationKey;
|
|
55
56
|
exports.findResourceDirs = require_discovery.findResourceDirs;
|
|
56
57
|
exports.findResourceKey = require_discovery.findResourceKey;
|
|
58
|
+
exports.flattenAppToSimulations = require_inspector.flattenAppToSimulations;
|
|
57
59
|
exports.getComponentName = require_discovery.getComponentName;
|
|
58
60
|
exports.getHostShell = require_inspector.getHostShell;
|
|
59
61
|
exports.getRegisteredHosts = require_inspector.getRegisteredHosts;
|
|
@@ -1 +1 @@
|
|
|
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
|
+
{"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// Public input shape for embedding (App → resources + tools → simulations).\nexport type {\n InspectorApp,\n InspectorAppResource,\n InspectorAppTool,\n InspectorAppSimulation,\n} from './app-types';\nexport { flattenAppToSimulations } from './app-flatten';\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,5 +1,7 @@
|
|
|
1
1
|
export { Inspector } from './inspector';
|
|
2
2
|
export type { InspectorProps } from './inspector';
|
|
3
|
+
export type { InspectorApp, InspectorAppResource, InspectorAppTool, InspectorAppSimulation, } from './app-types';
|
|
4
|
+
export { flattenAppToSimulations } from './app-flatten';
|
|
3
5
|
export { useInspectorState } from './use-inspector-state';
|
|
4
6
|
export type { UseInspectorStateOptions, InspectorState } from './use-inspector-state';
|
|
5
7
|
export { registerHostShell, getHostShell, getRegisteredHosts } from './hosts';
|
package/dist/inspector/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { I as __exportAll } from "../v4-Bvhoa4sV.js";
|
|
2
|
-
import { _ as
|
|
2
|
+
import { S as registerHostShell, _ as extractResourceCSP, a as SidebarCollapsibleControl, b as getHostShell, c as SidebarSelect, d as SimpleSidebar, f as ThemeProvider, g as IframeResource, h as useInspectorState, i as SidebarCheckbox, l as SidebarTextarea, m as useMcpConnection, n as flattenAppToSimulations, o as SidebarControl, p as useThemeContext, r as resolveServerToolResult, s as SidebarInput, t as Inspector, u as SidebarToggle, v as McpAppHost, x as getRegisteredHosts, y as SCREEN_WIDTHS } from "../inspector-B1355aXh.js";
|
|
3
3
|
import { t as createInspectorUrl } from "../inspector-url-CyQcuBI9.js";
|
|
4
4
|
import { c as toPascalCase, i as findResourceKey, n as extractSimulationKey, r as findResourceDirs, s as getComponentName, t as extractResourceKey } from "../discovery-Cgoegt62.js";
|
|
5
5
|
//#region src/inspector/index.ts
|
|
@@ -23,6 +23,7 @@ var inspector_exports = /* @__PURE__ */ __exportAll({
|
|
|
23
23
|
extractSimulationKey: () => extractSimulationKey,
|
|
24
24
|
findResourceDirs: () => findResourceDirs,
|
|
25
25
|
findResourceKey: () => findResourceKey,
|
|
26
|
+
flattenAppToSimulations: () => flattenAppToSimulations,
|
|
26
27
|
getComponentName: () => getComponentName,
|
|
27
28
|
getHostShell: () => getHostShell,
|
|
28
29
|
getRegisteredHosts: () => getRegisteredHosts,
|
|
@@ -34,6 +35,6 @@ var inspector_exports = /* @__PURE__ */ __exportAll({
|
|
|
34
35
|
useThemeContext: () => useThemeContext
|
|
35
36
|
});
|
|
36
37
|
//#endregion
|
|
37
|
-
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 };
|
|
38
|
+
export { IframeResource, Inspector, McpAppHost, SCREEN_WIDTHS, SidebarCheckbox, SidebarCollapsibleControl, SidebarControl, SidebarInput, SidebarSelect, SidebarTextarea, SidebarToggle, SimpleSidebar, ThemeProvider, createInspectorUrl, extractResourceCSP, extractResourceKey, extractSimulationKey, findResourceDirs, findResourceKey, flattenAppToSimulations, getComponentName, getHostShell, getRegisteredHosts, registerHostShell, resolveServerToolResult, inspector_exports as t, toPascalCase, useInspectorState, useMcpConnection, useThemeContext };
|
|
38
39
|
|
|
39
40
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
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
|
+
{"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// Public input shape for embedding (App → resources + tools → simulations).\nexport type {\n InspectorApp,\n InspectorAppResource,\n InspectorAppTool,\n InspectorAppSimulation,\n} from './app-types';\nexport { flattenAppToSimulations } from './app-flatten';\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":""}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Inline helper script injected into resource HTML alongside the paint-fence
|
|
3
|
+
* and platform-runtime scripts. It performs the MCP Apps `ui/initialize`
|
|
4
|
+
* handshake on behalf of the resource and exposes a friendly callback API
|
|
5
|
+
* via `window.sunpeak.{onToolInput, onToolInputPartial, onToolResult,
|
|
6
|
+
* onToolCancelled, onHostContextChange}`.
|
|
7
|
+
*
|
|
8
|
+
* This exists so embedders can ship plain HTML resources (e.g. a hardcoded
|
|
9
|
+
* `<html>…</html>` string they pass via `app.resources[].html`) without
|
|
10
|
+
* bundling the MCP Apps SDK. Without this helper, the host buffers tool
|
|
11
|
+
* inputs and results forever — the SDK's initialize gate would never close.
|
|
12
|
+
*
|
|
13
|
+
* Opt-out: resource HTML that already uses the MCP Apps SDK can disable the
|
|
14
|
+
* helper by including `<meta name="sunpeak-helper" content="off">` in its
|
|
15
|
+
* `<head>`. Without the opt-out, the helper and the SDK both send
|
|
16
|
+
* `ui/initialize` and the host bridge logs a (harmless) double-init warning.
|
|
17
|
+
*
|
|
18
|
+
* The helper is intentionally protocol-compatible: from the host's view it
|
|
19
|
+
* looks like a regular MCP Apps client completing the handshake. The host
|
|
20
|
+
* then unbuffers and delivers the queued notifications normally.
|
|
21
|
+
*/
|
|
22
|
+
export declare const SUNPEAK_INLINE_HELPER_SCRIPT: string;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare function inspectorApiEndpoint(path: string, apiBaseUrl?: string): string;
|
|
2
|
+
export declare function readInspectorJson<T>(res: Response, endpoint: string): Promise<T>;
|
|
3
|
+
export declare function resolveInspectorResourceUrls<T>(simulations: T, apiBaseUrl?: string): T;
|
|
@@ -1,9 +1,22 @@
|
|
|
1
1
|
import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
|
|
2
2
|
import { HostId } from './hosts';
|
|
3
3
|
import { Simulation } from '../types/simulation';
|
|
4
|
+
import { InspectorApp } from './app-types';
|
|
4
5
|
import * as React from 'react';
|
|
5
6
|
export interface InspectorProps {
|
|
6
7
|
children?: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Hierarchical input for embedding: an MCP App with its resources, tools,
|
|
10
|
+
* and saved simulations. Mirrors the MCP App data model — resources are
|
|
11
|
+
* keyed by URI, and each tool's `_meta.openai.outputTemplate` selects the
|
|
12
|
+
* resource it renders. The Inspector flattens this internally; pass the
|
|
13
|
+
* shape you already have from `listTools` + `listResources` + your fixture
|
|
14
|
+
* store and the component renders it. See `InspectorApp`.
|
|
15
|
+
*
|
|
16
|
+
* Mutually exclusive with `simulations`. When both are provided, `app`
|
|
17
|
+
* wins — `simulations` stays for back-compat with the CLI codepath.
|
|
18
|
+
*/
|
|
19
|
+
app?: InspectorApp;
|
|
7
20
|
simulations?: Record<string, Simulation>;
|
|
8
21
|
appName?: string;
|
|
9
22
|
appIcon?: string;
|
|
@@ -43,5 +56,12 @@ export interface InspectorProps {
|
|
|
43
56
|
* to a different server.
|
|
44
57
|
*/
|
|
45
58
|
mcpServerUrl?: string;
|
|
59
|
+
/**
|
|
60
|
+
* Base URL for the sunpeak inspector backend endpoints (`/__sunpeak/*`).
|
|
61
|
+
* Defaults to same-origin. Embedders that serve the React Inspector from
|
|
62
|
+
* their own app can point this at a same-origin proxy or hosted inspector
|
|
63
|
+
* backend, for example `/api/sunpeak`.
|
|
64
|
+
*/
|
|
65
|
+
inspectorApiBaseUrl?: string;
|
|
46
66
|
}
|
|
47
|
-
export declare function Inspector({ children, simulations:
|
|
67
|
+
export declare function Inspector({ children, app, simulations: initialSimulationsProp, appName: appNameProp, appIcon: appIconProp, defaultHost, onCallTool, onCallToolDirect, defaultProdResources, hideInspectorModes, demoMode, sandboxUrl, mcpServerUrl, inspectorApiBaseUrl, }: InspectorProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,8 +4,20 @@ interface SimpleSidebarProps {
|
|
|
4
4
|
controls: React.ReactNode;
|
|
5
5
|
/** Optional element rendered right-aligned in the Controls header row */
|
|
6
6
|
headerRight?: React.ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Optional ref attached to the outer `.sunpeak-inspector-root` element.
|
|
9
|
+
* The Inspector uses this to scope host theming, CSS variables, and page
|
|
10
|
+
* styles to its own subtree rather than `document.documentElement`.
|
|
11
|
+
*/
|
|
12
|
+
rootRef?: React.Ref<HTMLDivElement>;
|
|
13
|
+
/**
|
|
14
|
+
* When true, the sidebar's outer root sizes to its parent (`h-full w-full`)
|
|
15
|
+
* instead of the viewport (`h-screen w-full`). Used by embedders who place
|
|
16
|
+
* the Inspector inside a sized container.
|
|
17
|
+
*/
|
|
18
|
+
fillParent?: boolean;
|
|
7
19
|
}
|
|
8
|
-
export declare function SimpleSidebar({ children, controls, headerRight }: SimpleSidebarProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare function SimpleSidebar({ children, controls, headerRight, rootRef, fillParent, }: SimpleSidebarProps): import("react/jsx-runtime").JSX.Element;
|
|
9
21
|
interface SidebarControlProps {
|
|
10
22
|
label: React.ReactNode;
|
|
11
23
|
children: React.ReactNode;
|
|
@@ -83,6 +83,7 @@ export interface InspectorState {
|
|
|
83
83
|
handleUpdateModelContext: (content: unknown[], structuredContent?: unknown) => void;
|
|
84
84
|
resourceUrl: string | undefined;
|
|
85
85
|
resourceScript: string | undefined;
|
|
86
|
+
resourceHtml: string | undefined;
|
|
86
87
|
csp: ResourceCSP | undefined;
|
|
87
88
|
permissions: McpUiResourcePermissions | undefined;
|
|
88
89
|
prefersBorder: boolean;
|
|
@@ -29,4 +29,4 @@ export interface McpConnectionState {
|
|
|
29
29
|
* once (or safely twice with cancellation), while explicit `reconnect()` calls
|
|
30
30
|
* are triggered by the Inspector's URL-change effect.
|
|
31
31
|
*/
|
|
32
|
-
export declare function useMcpConnection(initialServerUrl: string | undefined): McpConnectionState;
|
|
32
|
+
export declare function useMcpConnection(initialServerUrl: string | undefined, inspectorApiBaseUrl?: string): McpConnectionState;
|