diff --git a/.oxlintrc.jsonc b/.oxlintrc.jsonc index 8ad145a68..7afb721ec 100644 --- a/.oxlintrc.jsonc +++ b/.oxlintrc.jsonc @@ -81,7 +81,25 @@ { "files": ["packages/core/vite-plugin/src/**/*.{ts,tsx}"], "rules": { + "executor/no-error-constructor": "off", + "executor/no-try-catch-or-throw": "off", + }, + }, + { + "files": [ + "packages/plugins/dynamic-ui/src/client.tsx", + "packages/plugins/dynamic-ui/src/shell/**/*.{ts,tsx}", + "packages/plugins/dynamic-ui/vite.config.shell.ts", + ], + "rules": { + "executor/no-double-cast": "off", + "executor/no-error-constructor": "off", + "executor/no-instanceof-error": "off", + "executor/no-json-parse": "off", + "executor/no-promise-catch": "off", + "executor/no-promise-reject": "off", "executor/no-try-catch-or-throw": "off", + "executor/no-unknown-error-message": "off", }, }, { diff --git a/apps/cli/src/main.ts b/apps/cli/src/main.ts index 33fe8519c..5b01a9d07 100644 --- a/apps/cli/src/main.ts +++ b/apps/cli/src/main.ts @@ -59,7 +59,14 @@ import * as Option from "effect/Option"; import * as Cause from "effect/Cause"; import { ExecutorApi } from "@executor-js/api"; -import { startServer, runMcpStdioServer, getExecutor } from "@executor-js/local"; +import { + startServer, + runMcpStdioServer, + getExecutorBundle, + filterDynamicUiMcpPlugins, + isGeneratedUiMcpAppsEnabled, + makeLocalEnvFeatureFlags, +} from "@executor-js/local"; import { makeQuickJsExecutor } from "@executor-js/runtime-quickjs"; import { fetchIntegrations } from "./integrations"; import { @@ -758,7 +765,7 @@ const runStdioMcpSession = (input: { readonly elicitationMode: "browser" | "mode const restoreWebBaseUrl = installDefaultExecutorWebBaseUrl(baseUrl); try { - const executor = await getExecutor(); + const executor = await getExecutorBundle(); const server = await startServer({ port, hostname: host, @@ -774,10 +781,20 @@ const runStdioMcpSession = (input: { readonly elicitationMode: "browser" | "mode ); try { + const featureFlags = makeLocalEnvFeatureFlags(); + const generatedUiMcpAppsEnabled = yield* isGeneratedUiMcpAppsEnabled(featureFlags); + const mcpPlugins = filterDynamicUiMcpPlugins(web.executor.plugins, generatedUiMcpAppsEnabled); + yield* Effect.promise(() => runMcpStdioServer({ - executor: web.executor, + executor: web.executor.executor, codeExecutor: makeQuickJsExecutor(), + plugins: mcpPlugins, + renderUiFallbackUrl: (code) => { + const url = new URL("/plugins/dynamic-ui/render", web.baseUrl); + url.hash = `code=${encodeURIComponent(code)}`; + return url.toString(); + }, elicitationMode: input.elicitationMode === "browser" ? { diff --git a/apps/cloud/executor.config.ts b/apps/cloud/executor.config.ts index 21d903cba..a93d73c8b 100644 --- a/apps/cloud/executor.config.ts +++ b/apps/cloud/executor.config.ts @@ -1,5 +1,6 @@ import { defineExecutorConfig } from "@executor-js/sdk"; import { openApiHttpPlugin } from "@executor-js/plugin-openapi/api"; +import { dynamicUiPlugin } from "@executor-js/plugin-dynamic-ui"; import { mcpHttpPlugin } from "@executor-js/plugin-mcp/api"; import { graphqlHttpPlugin } from "@executor-js/plugin-graphql/api"; import { workosVaultPlugin, type WorkOSVaultClient } from "@executor-js/plugin-workos-vault"; @@ -39,6 +40,7 @@ export default defineExecutorConfig({ plugins: ({ workosCredentials, workosVaultClient }: CloudPluginDeps = {}) => [ openApiHttpPlugin(), + dynamicUiPlugin(), mcpHttpPlugin({ dangerouslyAllowStdioMCP: false, }), diff --git a/apps/cloud/package.json b/apps/cloud/package.json index 93e2e88a6..960482efa 100644 --- a/apps/cloud/package.json +++ b/apps/cloud/package.json @@ -31,6 +31,7 @@ "@executor-js/api": "workspace:*", "@executor-js/execution": "workspace:*", "@executor-js/host-mcp": "workspace:*", + "@executor-js/plugin-dynamic-ui": "workspace:*", "@executor-js/plugin-graphql": "workspace:*", "@executor-js/plugin-mcp": "workspace:*", "@executor-js/plugin-openapi": "workspace:*", diff --git a/apps/cloud/src/env-augment.d.ts b/apps/cloud/src/env-augment.d.ts index e1c66a269..f98a2da9e 100644 --- a/apps/cloud/src/env-augment.d.ts +++ b/apps/cloud/src/env-augment.d.ts @@ -14,6 +14,7 @@ declare global { VITE_PUBLIC_SENTRY_DSN?: string; VITE_PUBLIC_POSTHOG_KEY?: string; VITE_PUBLIC_POSTHOG_HOST?: string; + POSTHOG_HOST?: string; // Datastore. Prod uses HYPERDRIVE when the binding exists; direct // DATABASE_URL is only selected when explicitly requested for local/test. diff --git a/apps/cloud/src/mcp-session.ts b/apps/cloud/src/mcp-session.ts index 25a55c635..ba7e545ba 100644 --- a/apps/cloud/src/mcp-session.ts +++ b/apps/cloud/src/mcp-session.ts @@ -13,6 +13,7 @@ import { drizzle } from "drizzle-orm/postgres-js"; import postgres, { type Sql } from "postgres"; import { createExecutorMcpServer } from "@executor-js/host-mcp"; +import { filterDynamicUiMcpPlugins } from "@executor-js/plugin-dynamic-ui"; import { buildExecuteDescription, formatPausedExecution, @@ -31,6 +32,7 @@ import { UserStoreService } from "./auth/context"; import { resolveOrganization } from "./auth/resolve-organization"; import { DbService, combinedSchema, resolveConnectionString } from "./services/db"; import { makeExecutionStack } from "./services/execution-stack"; +import { isGeneratedUiMcpAppsEnabled, PostHogFeatureFlags } from "./services/feature-flags"; import { makeMcpWorkerTransport, type McpWorkerTransport } from "./services/mcp-worker-transport"; import { DoTelemetryLive } from "./services/telemetry"; import { captureCause } from "./observability"; @@ -230,7 +232,8 @@ const makeResolveOrganizationServices = (dbHandle: DbHandle) => { // child span from the outer `McpSessionDO.init` / `McpSessionDO.handleRequest` // trace. Tracer comes from the outermost `Effect.provide(DoTelemetryLive)` // at the DO method boundary. -const makeSessionServices = (dbHandle: DbHandle) => makeResolveOrganizationServices(dbHandle); +const makeSessionServices = (dbHandle: DbHandle) => + Layer.mergeAll(makeResolveOrganizationServices(dbHandle), PostHogFeatureFlags); const resolveSessionMeta = Effect.fn("McpSessionDO.resolveSessionMeta")(function* ( organizationId: string, @@ -353,11 +356,30 @@ export class McpSessionDO extends DurableObject { ) { const self = this; return Effect.gen(function* () { - const { executor, engine } = yield* makeExecutionStack( + const featureFlagContext = { + distinctId: sessionMeta.userId, + accountId: sessionMeta.userId, + organizationId: sessionMeta.organizationId, + groups: { organization: sessionMeta.organizationId }, + }; + const generatedUiMcpAppsEnabled = yield* isGeneratedUiMcpAppsEnabled(featureFlagContext).pipe( + Effect.catch((error: unknown) => + Effect.sync(() => { + console.error("[executor:mcp] generated UI feature flag failed", error); + return false; + }), + ), + ); + yield* Effect.annotateCurrentSpan({ + "feature.generated_ui_mcp_apps.enabled": generatedUiMcpAppsEnabled, + }); + + const { executor, engine, plugins } = yield* makeExecutionStack( sessionMeta.userId, sessionMeta.organizationId, sessionMeta.organizationName, ); + const mcpPlugins = filterDynamicUiMcpPlugins(plugins, generatedUiMcpAppsEnabled); // Build the description here so the postgres query it runs // (`executor.sources.list`) lands as a child of // `McpSessionDO.createRuntime`. host-mcp would otherwise call @@ -368,8 +390,15 @@ export class McpSessionDO extends DurableObject { const mcpServer = yield* createExecutorMcpServer({ engine, description, + plugins: mcpPlugins, parentSpan: () => self.currentRequestSpan ?? undefined, debug: env.EXECUTOR_MCP_DEBUG === "true", + renderUiFallbackUrl: (code) => { + const origin = env.VITE_PUBLIC_SITE_URL ?? "https://executor.sh"; + const url = new URL("/plugins/dynamic-ui/render", origin); + url.hash = `code=${encodeURIComponent(code)}`; + return url.toString(); + }, browserApprovalStore: { takeResponse: (executionId) => self.takeApprovalResponse(executionId), waitForResponse: (executionId) => self.waitForApprovalResponse(executionId), diff --git a/apps/cloud/src/routeTree.gen.ts b/apps/cloud/src/routeTree.gen.ts index b4ee0efeb..1479cb009 100644 --- a/apps/cloud/src/routeTree.gen.ts +++ b/apps/cloud/src/routeTree.gen.ts @@ -23,6 +23,7 @@ import { Route as SourcesNamespaceRouteImport } from './routes/sources.$namespac import { Route as ResumeExecutionIdRouteImport } from './routes/resume.$executionId' import { Route as BillingPlansRouteImport } from './routes/billing_.plans' import { Route as SourcesAddPluginKeyRouteImport } from './routes/sources.add.$pluginKey' +import { Route as PluginsPluginIdSplatRouteImport } from './routes/plugins.$pluginId.$' const ToolsRoute = ToolsRouteImport.update({ id: '/tools', @@ -94,6 +95,11 @@ const SourcesAddPluginKeyRoute = SourcesAddPluginKeyRouteImport.update({ path: '/sources/add/$pluginKey', getParentRoute: () => rootRouteImport, } as any) +const PluginsPluginIdSplatRoute = PluginsPluginIdSplatRouteImport.update({ + id: '/plugins/$pluginId/$', + path: '/plugins/$pluginId/$', + getParentRoute: () => rootRouteImport, +} as any) export interface FileRoutesByFullPath { '/': typeof IndexRoute @@ -109,6 +115,7 @@ export interface FileRoutesByFullPath { '/billing/plans': typeof BillingPlansRoute '/resume/$executionId': typeof ResumeExecutionIdRoute '/sources/$namespace': typeof SourcesNamespaceRoute + '/plugins/$pluginId/$': typeof PluginsPluginIdSplatRoute '/sources/add/$pluginKey': typeof SourcesAddPluginKeyRoute } export interface FileRoutesByTo { @@ -125,6 +132,7 @@ export interface FileRoutesByTo { '/billing/plans': typeof BillingPlansRoute '/resume/$executionId': typeof ResumeExecutionIdRoute '/sources/$namespace': typeof SourcesNamespaceRoute + '/plugins/$pluginId/$': typeof PluginsPluginIdSplatRoute '/sources/add/$pluginKey': typeof SourcesAddPluginKeyRoute } export interface FileRoutesById { @@ -142,6 +150,7 @@ export interface FileRoutesById { '/billing_/plans': typeof BillingPlansRoute '/resume/$executionId': typeof ResumeExecutionIdRoute '/sources/$namespace': typeof SourcesNamespaceRoute + '/plugins/$pluginId/$': typeof PluginsPluginIdSplatRoute '/sources/add/$pluginKey': typeof SourcesAddPluginKeyRoute } export interface FileRouteTypes { @@ -160,6 +169,7 @@ export interface FileRouteTypes { | '/billing/plans' | '/resume/$executionId' | '/sources/$namespace' + | '/plugins/$pluginId/$' | '/sources/add/$pluginKey' fileRoutesByTo: FileRoutesByTo to: @@ -176,6 +186,7 @@ export interface FileRouteTypes { | '/billing/plans' | '/resume/$executionId' | '/sources/$namespace' + | '/plugins/$pluginId/$' | '/sources/add/$pluginKey' id: | '__root__' @@ -192,6 +203,7 @@ export interface FileRouteTypes { | '/billing_/plans' | '/resume/$executionId' | '/sources/$namespace' + | '/plugins/$pluginId/$' | '/sources/add/$pluginKey' fileRoutesById: FileRoutesById } @@ -209,6 +221,7 @@ export interface RootRouteChildren { BillingPlansRoute: typeof BillingPlansRoute ResumeExecutionIdRoute: typeof ResumeExecutionIdRoute SourcesNamespaceRoute: typeof SourcesNamespaceRoute + PluginsPluginIdSplatRoute: typeof PluginsPluginIdSplatRoute SourcesAddPluginKeyRoute: typeof SourcesAddPluginKeyRoute } @@ -291,6 +304,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof SourcesNamespaceRouteImport parentRoute: typeof rootRouteImport } + '/plugins/$pluginId/$': { + id: '/plugins/$pluginId/$' + path: '/plugins/$pluginId/$' + fullPath: '/plugins/$pluginId/$' + preLoaderRoute: typeof PluginsPluginIdSplatRouteImport + parentRoute: typeof rootRouteImport + } '/resume/$executionId': { id: '/resume/$executionId' path: '/resume/$executionId' @@ -329,6 +349,7 @@ const rootRouteChildren: RootRouteChildren = { BillingPlansRoute: BillingPlansRoute, ResumeExecutionIdRoute: ResumeExecutionIdRoute, SourcesNamespaceRoute: SourcesNamespaceRoute, + PluginsPluginIdSplatRoute: PluginsPluginIdSplatRoute, SourcesAddPluginKeyRoute: SourcesAddPluginKeyRoute, } export const routeTree = rootRouteImport diff --git a/apps/cloud/src/routes/plugins.$pluginId.$.tsx b/apps/cloud/src/routes/plugins.$pluginId.$.tsx new file mode 100644 index 000000000..e35fbd39a --- /dev/null +++ b/apps/cloud/src/routes/plugins.$pluginId.$.tsx @@ -0,0 +1,27 @@ +import { createFileRoute, notFound } from "@tanstack/react-router"; +import { useClientPlugins } from "@executor-js/sdk/client"; + +export const Route = createFileRoute("/plugins/$pluginId/$")({ + component: PluginRouteComponent, +}); + +function normalizePath(input: string): string { + if (!input || input === "/") return "/"; + return input.startsWith("/") ? input : `/${input}`; +} + +function PluginRouteComponent() { + const { pluginId, _splat: rest } = Route.useParams(); + const plugins = useClientPlugins(); + const plugin = plugins.find((p) => p.id === pluginId); + // oxlint-disable-next-line executor/no-try-catch-or-throw -- boundary: TanStack Router represents not-found from components by throwing notFound() + if (!plugin) throw notFound(); + + const target = normalizePath(rest ?? "/"); + const page = plugin.pages?.find((p) => normalizePath(p.path) === target); + // oxlint-disable-next-line executor/no-try-catch-or-throw -- boundary: TanStack Router represents not-found from components by throwing notFound() + if (!page) throw notFound(); + + const Component = page.component; + return ; +} diff --git a/apps/cloud/src/services/execution-stack.ts b/apps/cloud/src/services/execution-stack.ts index d901416c1..0110b6ef8 100644 --- a/apps/cloud/src/services/execution-stack.ts +++ b/apps/cloud/src/services/execution-stack.ts @@ -12,7 +12,7 @@ import { makeDynamicWorkerExecutor } from "@executor-js/runtime-dynamic-worker"; import { withExecutionUsageTracking } from "../api/execution-usage"; import { AutumnService } from "./autumn"; -import { createScopedExecutor } from "./executor"; +import { createCloudPlugins, createScopedExecutor } from "./executor"; export const makeExecutionStack = ( userId: string, @@ -20,9 +20,13 @@ export const makeExecutionStack = ( organizationName: string, ) => Effect.gen(function* () { - const executor = yield* createScopedExecutor(userId, organizationId, organizationName).pipe( - Effect.withSpan("McpSessionDO.createScopedExecutor"), - ); + const plugins = createCloudPlugins(); + const executor = yield* createScopedExecutor( + userId, + organizationId, + organizationName, + plugins, + ).pipe(Effect.withSpan("McpSessionDO.createScopedExecutor")); const codeExecutor = makeDynamicWorkerExecutor({ loader: env.LOADER }); const autumn = yield* AutumnService; const engine = withExecutionUsageTracking( @@ -30,5 +34,5 @@ export const makeExecutionStack = ( createExecutionEngine({ executor, codeExecutor }), (orgId) => Effect.runFork(autumn.trackExecution(orgId)), ); - return { executor, engine }; + return { executor, engine, plugins }; }).pipe(Effect.withSpan("McpSessionDO.makeExecutionStack")); diff --git a/apps/cloud/src/services/executor.ts b/apps/cloud/src/services/executor.ts index 049ea1444..e890a0f6f 100644 --- a/apps/cloud/src/services/executor.ts +++ b/apps/cloud/src/services/executor.ts @@ -32,7 +32,7 @@ import { createDrizzleFumaDb } from "./fuma"; export type CloudPlugins = ReturnType; -const orgPlugins = (): CloudPlugins => +export const createCloudPlugins = (): CloudPlugins => executorConfig.plugins({ workosCredentials: { apiKey: env.WORKOS_API_KEY, @@ -59,11 +59,11 @@ export const createScopedExecutor = ( userId: string, organizationId: string, organizationName: string, + plugins: CloudPlugins = createCloudPlugins(), ) => Effect.gen(function* () { const { db } = yield* DbService; - const plugins = orgPlugins(); const httpClientLayer = makeHostedHttpClientLayer({ allowLocalNetwork: env.NODE_ENV === "test", }); diff --git a/apps/cloud/src/services/feature-flags.ts b/apps/cloud/src/services/feature-flags.ts new file mode 100644 index 000000000..a2edad78d --- /dev/null +++ b/apps/cloud/src/services/feature-flags.ts @@ -0,0 +1,89 @@ +import { env } from "cloudflare:workers"; +import { Context, Data, Effect, Layer, Option, Schema } from "effect"; + +import { DYNAMIC_UI_MCP_APPS_FEATURE_FLAG } from "@executor-js/plugin-dynamic-ui"; + +class PostHogFeatureFlagError extends Data.TaggedError("PostHogFeatureFlagError")<{ + readonly cause: unknown; +}> {} + +const FeatureFlagsResponse = Schema.Struct({ + featureFlags: Schema.optional(Schema.Record(Schema.String, Schema.Unknown)), +}); +const decodeFeatureFlagsResponse = Schema.decodeUnknownOption(FeatureFlagsResponse); + +export type FeatureFlagContext = { + readonly distinctId?: string; + readonly accountId?: string; + readonly organizationId?: string; + readonly groups?: Record; +}; + +export type FeatureFlagsShape = { + readonly isEnabled: ( + flag: string, + context: FeatureFlagContext, + ) => Effect.Effect; +}; + +export class CloudFeatureFlags extends Context.Service()( + "executor.cloud/FeatureFlags", +) {} + +const postHogHost = (): string => + (env.POSTHOG_HOST ?? "https://us.i.posthog.com").replace(/\/$/, ""); + +const flagValueEnabled = (value: unknown): boolean => + value !== false && value !== null && value !== undefined; + +const distinctIdFor = (context: FeatureFlagContext): string => + context.distinctId ?? context.accountId ?? context.organizationId ?? "executor-cloud"; + +const groupsFor = (context: FeatureFlagContext): Record | undefined => { + const groups = { + ...(context.groups ?? {}), + ...(context.organizationId ? { organization: context.organizationId } : {}), + }; + return Object.keys(groups).length > 0 ? groups : undefined; +}; + +export const makePostHogFeatureFlags = (): FeatureFlagsShape => ({ + isEnabled: (flag, context) => + Effect.gen(function* () { + const apiKey = env.VITE_PUBLIC_POSTHOG_KEY; + if (!apiKey) return false; + + const response = yield* Effect.tryPromise({ + try: () => + fetch(`${postHogHost()}/decide/?v=3`, { + method: "POST", + headers: { "content-type": "application/json" }, + body: JSON.stringify({ + api_key: apiKey, + distinct_id: distinctIdFor(context), + groups: groupsFor(context), + }), + }), + catch: (cause) => new PostHogFeatureFlagError({ cause }), + }); + + if (!response.ok) return false; + + const raw = yield* Effect.tryPromise({ + try: () => response.json(), + catch: (cause) => new PostHogFeatureFlagError({ cause }), + }); + const decoded = decodeFeatureFlagsResponse(raw); + if (Option.isNone(decoded)) return false; + return flagValueEnabled(decoded.value.featureFlags?.[flag]); + }).pipe(Effect.withSpan("feature_flags.posthog.is_enabled", { attributes: { flag } })), +}); + +export const isGeneratedUiMcpAppsEnabled = (context: FeatureFlagContext) => + CloudFeatureFlags.asEffect().pipe( + Effect.flatMap((featureFlags) => + featureFlags.isEnabled(DYNAMIC_UI_MCP_APPS_FEATURE_FLAG, context), + ), + ); + +export const PostHogFeatureFlags = Layer.succeed(CloudFeatureFlags, makePostHogFeatureFlags()); diff --git a/apps/local/executor.config.ts b/apps/local/executor.config.ts index 2ab9827f4..d8cfc2199 100644 --- a/apps/local/executor.config.ts +++ b/apps/local/executor.config.ts @@ -1,6 +1,7 @@ import { defineExecutorConfig } from "@executor-js/sdk"; import { openApiHttpPlugin } from "@executor-js/plugin-openapi/api"; import { mcpHttpPlugin } from "@executor-js/plugin-mcp/api"; +import { dynamicUiPlugin } from "@executor-js/plugin-dynamic-ui"; import { googleDiscoveryHttpPlugin } from "@executor-js/plugin-google-discovery/api"; import { graphqlHttpPlugin } from "@executor-js/plugin-graphql/api"; import { keychainPlugin } from "@executor-js/plugin-keychain"; @@ -21,6 +22,7 @@ export default defineExecutorConfig({ plugins: () => [ openApiHttpPlugin(), + dynamicUiPlugin(), mcpHttpPlugin({ dangerouslyAllowStdioMCP: true }), googleDiscoveryHttpPlugin(), graphqlHttpPlugin(), diff --git a/apps/local/package.json b/apps/local/package.json index a7ba87765..f43079fc7 100644 --- a/apps/local/package.json +++ b/apps/local/package.json @@ -28,6 +28,7 @@ "@executor-js/host-mcp": "workspace:*", "@executor-js/integrations-registry": "workspace:*", "@executor-js/plugin-desktop-settings": "workspace:*", + "@executor-js/plugin-dynamic-ui": "workspace:*", "@executor-js/plugin-example": "workspace:*", "@executor-js/plugin-file-secrets": "workspace:*", "@executor-js/plugin-google-discovery": "workspace:*", diff --git a/apps/local/src/index.ts b/apps/local/src/index.ts index 14aca791e..dc7ffb3ad 100644 --- a/apps/local/src/index.ts +++ b/apps/local/src/index.ts @@ -8,9 +8,16 @@ export { createExecutorHandle, disposeExecutor, getExecutor, + getExecutorBundle, reloadExecutor, type ExecutorHandle, type LocalExecutor, } from "./server/executor"; export { createMcpRequestHandler, runMcpStdioServer, type McpRequestHandler } from "./server/mcp"; +export { + isGeneratedUiMcpAppsEnabled, + makeLocalEnvFeatureFlags, + LocalEnvFeatureFlags, +} from "./server/feature-flags"; +export { filterDynamicUiMcpPlugins } from "@executor-js/plugin-dynamic-ui"; export { startServer, type StartServerOptions, type ServerInstance } from "./serve"; diff --git a/apps/local/src/server/feature-flags.test.ts b/apps/local/src/server/feature-flags.test.ts new file mode 100644 index 000000000..d60c705cb --- /dev/null +++ b/apps/local/src/server/feature-flags.test.ts @@ -0,0 +1,34 @@ +import { describe, expect, it } from "@effect/vitest"; +import { Effect } from "effect"; + +import { isGeneratedUiMcpAppsEnabled, makeLocalEnvFeatureFlags } from "./feature-flags"; + +describe("local feature flags", () => { + it.effect("keeps generated UI MCP apps disabled by default", () => + Effect.gen(function* () { + const enabled = yield* isGeneratedUiMcpAppsEnabled(makeLocalEnvFeatureFlags({})); + + expect(enabled).toBe(false); + }), + ); + + it.effect("enables generated UI MCP apps from the canonical env flag", () => + Effect.gen(function* () { + const enabled = yield* isGeneratedUiMcpAppsEnabled( + makeLocalEnvFeatureFlags({ EXECUTOR_FEATURE_GENERATED_UI_MCP_APPS: "true" }), + ); + + expect(enabled).toBe(true); + }), + ); + + it.effect("ignores unrelated env variables", () => + Effect.gen(function* () { + const enabled = yield* isGeneratedUiMcpAppsEnabled( + makeLocalEnvFeatureFlags({ EXECUTOR_DYNAMIC_UI: "1" }), + ); + + expect(enabled).toBe(false); + }), + ); +}); diff --git a/apps/local/src/server/feature-flags.ts b/apps/local/src/server/feature-flags.ts new file mode 100644 index 000000000..6d6ca37c3 --- /dev/null +++ b/apps/local/src/server/feature-flags.ts @@ -0,0 +1,38 @@ +import { Context, Effect, Layer } from "effect"; + +import { DYNAMIC_UI_MCP_APPS_FEATURE_FLAG } from "@executor-js/plugin-dynamic-ui"; + +export type FeatureFlagContext = Record; + +export type FeatureFlagsShape = { + readonly isEnabled: (flag: string, context: FeatureFlagContext) => Effect.Effect; +}; + +export class LocalFeatureFlags extends Context.Service()( + "@executor-js/local/FeatureFlags", +) {} + +const truthy = (value: string | undefined): boolean => + value === "1" || value === "true" || value === "TRUE" || value === "yes" || value === "on"; + +const envNameForFlag = (flag: string): string => + `EXECUTOR_FEATURE_${flag + .replaceAll(/[^A-Za-z0-9]+/g, "_") + .replace(/^_+|_+$/g, "") + .toUpperCase()}`; + +const readFlag = (flag: string, env: NodeJS.ProcessEnv): boolean => { + const generic = env[envNameForFlag(flag)]; + return generic !== undefined ? truthy(generic) : false; +}; + +export const makeLocalEnvFeatureFlags = ( + env: NodeJS.ProcessEnv = process.env, +): FeatureFlagsShape => ({ + isEnabled: (flag) => Effect.sync(() => readFlag(flag, env)), +}); + +export const isGeneratedUiMcpAppsEnabled = (featureFlags: FeatureFlagsShape) => + featureFlags.isEnabled(DYNAMIC_UI_MCP_APPS_FEATURE_FLAG, {}); + +export const LocalEnvFeatureFlags = Layer.succeed(LocalFeatureFlags, makeLocalEnvFeatureFlags()); diff --git a/apps/local/src/server/main.ts b/apps/local/src/server/main.ts index 6644c4785..ceb8a0cbf 100644 --- a/apps/local/src/server/main.ts +++ b/apps/local/src/server/main.ts @@ -12,9 +12,11 @@ import { } from "@executor-js/api/server"; import { createExecutionEngine } from "@executor-js/execution"; import { makeQuickJsExecutor } from "@executor-js/runtime-quickjs"; +import { filterDynamicUiMcpPlugins } from "@executor-js/plugin-dynamic-ui"; import { getExecutorBundle } from "./executor"; import { createMcpRequestHandler, type McpRequestHandler } from "./mcp"; import { ErrorCaptureLive } from "./observability"; +import { isGeneratedUiMcpAppsEnabled, makeLocalEnvFeatureFlags } from "./feature-flags"; // --------------------------------------------------------------------------- // Local server API. @@ -98,7 +100,12 @@ export const createServerHandlers = async (): Promise => { dispose: api.dispose, }; - const mcp = createMcpRequestHandler({ engine }); + const featureFlags = makeLocalEnvFeatureFlags(); + const generatedUiMcpAppsEnabled = await Effect.runPromise( + isGeneratedUiMcpAppsEnabled(featureFlags), + ); + const mcpPlugins = filterDynamicUiMcpPlugins(plugins, generatedUiMcpAppsEnabled); + const mcp = createMcpRequestHandler({ engine, plugins: mcpPlugins }); return { api: apiHandler, mcp }; }; diff --git a/apps/local/src/server/mcp.ts b/apps/local/src/server/mcp.ts index b6c052cd8..d0929bd71 100644 --- a/apps/local/src/server/mcp.ts +++ b/apps/local/src/server/mcp.ts @@ -59,6 +59,12 @@ const approvalUrlForRequest = ( return url.toString(); }; +const renderUiFallbackUrlForRequest = (request: Request, code: string): string => { + const url = new URL("/plugins/dynamic-ui/render", new URL(request.url).origin); + url.hash = `code=${encodeURIComponent(code)}`; + return url.toString(); +}; + const ignoreClose = (close: (() => Promise) | undefined): Promise => close ? Effect.runPromise( @@ -162,6 +168,9 @@ export const createMcpRequestHandler = (config: ExecutorMcpServerConfig): McpReq created = await Effect.runPromise( createExecutorMcpServer({ ...config, + renderUiFallbackUrl: + config.renderUiFallbackUrl ?? + ((code) => renderUiFallbackUrlForRequest(request, code)), browserApprovalStore: { takeResponse: (executionId) => Effect.sync(() => { diff --git a/apps/local/vite.config.ts b/apps/local/vite.config.ts index 3b42a7bd2..c778237f6 100644 --- a/apps/local/vite.config.ts +++ b/apps/local/vite.config.ts @@ -136,6 +136,7 @@ export default defineConfig({ protocol: "ws", } : undefined, + allowedHosts: true, watch: { // Workspace packages live under packages/ and are symlinked into // node_modules. Without this, chokidar treats them as ordinary diff --git a/bun.lock b/bun.lock index c71770041..eee6773ab 100644 --- a/bun.lock +++ b/bun.lock @@ -58,6 +58,7 @@ "@executor-js/api": "workspace:*", "@executor-js/execution": "workspace:*", "@executor-js/host-mcp": "workspace:*", + "@executor-js/plugin-dynamic-ui": "workspace:*", "@executor-js/plugin-graphql": "workspace:*", "@executor-js/plugin-mcp": "workspace:*", "@executor-js/plugin-openapi": "workspace:*", @@ -161,6 +162,7 @@ "@executor-js/host-mcp": "workspace:*", "@executor-js/integrations-registry": "workspace:*", "@executor-js/plugin-desktop-settings": "workspace:*", + "@executor-js/plugin-dynamic-ui": "workspace:*", "@executor-js/plugin-example": "workspace:*", "@executor-js/plugin-file-secrets": "workspace:*", "@executor-js/plugin-google-discovery": "workspace:*", @@ -501,8 +503,13 @@ }, "devDependencies": { "@effect/vitest": "catalog:", + "@executor-js/runtime-quickjs": "workspace:*", + "@modelcontextprotocol/ext-apps": "^1.6.0", "@types/node": "catalog:", + "@types/react": "catalog:", + "@types/react-dom": "catalog:", "bun-types": "catalog:", + "vite": "^8.0.8", "vitest": "catalog:", }, }, @@ -606,6 +613,49 @@ "typescript": "catalog:", }, }, + "packages/plugins/dynamic-ui": { + "name": "@executor-js/plugin-dynamic-ui", + "version": "1.4.25", + "dependencies": { + "@executor-js/host-mcp": "workspace:*", + "@executor-js/react": "workspace:*", + "@executor-js/sdk": "workspace:*", + "@modelcontextprotocol/ext-apps": "^1.6.0", + "@modelcontextprotocol/sdk": "^1.12.1", + "@tanstack/react-query": "^5.99.0", + "effect": "catalog:", + "esbuild": "^0.27.7", + "sucrase": "^3.35.1", + "zod": "^4.3.0", + }, + "devDependencies": { + "@effect/vitest": "catalog:", + "@executor-js/execution": "workspace:*", + "@executor-js/runtime-quickjs": "workspace:*", + "@tailwindcss/browser": "^4.2.2", + "@tailwindcss/vite": "^4.2.2", + "@types/node": "catalog:", + "@types/react": "catalog:", + "@types/react-dom": "catalog:", + "@vitejs/plugin-react": "^6.0.1", + "bun-types": "catalog:", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-react": "^1.8.0", + "playwright-core": "^1.59.1", + "radix-ui": "^1.4.3", + "react": "^19.2.5", + "react-dom": "^19.2.5", + "recharts": "^3.8.1", + "tailwind-merge": "^3.5.0", + "tailwindcss": "^4.2.2", + "tsup": "catalog:", + "typescript": "catalog:", + "vite": "^8.0.8", + "vite-plugin-singlefile": "^2.3.2", + "vitest": "catalog:", + }, + }, "packages/plugins/example": { "name": "@executor-js/plugin-example", "version": "1.4.32", @@ -1366,6 +1416,8 @@ "@executor-js/plugin-desktop-settings": ["@executor-js/plugin-desktop-settings@workspace:packages/plugins/desktop-settings"], + "@executor-js/plugin-dynamic-ui": ["@executor-js/plugin-dynamic-ui@workspace:packages/plugins/dynamic-ui"], + "@executor-js/plugin-example": ["@executor-js/plugin-example@workspace:packages/plugins/example"], "@executor-js/plugin-file-secrets": ["@executor-js/plugin-file-secrets@workspace:packages/plugins/file-secrets"], @@ -1574,6 +1626,8 @@ "@mishieck/ink-titled-box": ["@mishieck/ink-titled-box@0.3.0", "", { "peerDependencies": { "ink": "^6.0.0", "react": "^19.1.0", "typescript": "^5" } }, "sha512-ugzVH9hixp3hwKfQ8On/qnsrdAxS3y9rTu/aGOFed4zVUvtZyGZNIR4rxAwXult8HKI4vJEh0OM8wib9NPrwUg=="], + "@modelcontextprotocol/ext-apps": ["@modelcontextprotocol/ext-apps@1.7.2", "", { "dependencies": { "@standard-schema/spec": "^1.1.0" }, "peerDependencies": { "@modelcontextprotocol/sdk": "^1.29.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0", "zod": "^3.25.0 || ^4.0.0" }, "optionalPeers": ["react", "react-dom"] }, "sha512-OOWKDxdAjYDcgHkmzVzccyyag3FK+jBWPaWu4WvTxFsU4R/cgOX4eep66zPRA5n4v6WfxUNibPyvX4iJ7egYTg=="], + "@modelcontextprotocol/sdk": ["@modelcontextprotocol/sdk@1.29.0", "", { "dependencies": { "@hono/node-server": "^1.19.9", "ajv": "^8.17.1", "ajv-formats": "^3.0.1", "content-type": "^1.0.5", "cors": "^2.8.5", "cross-spawn": "^7.0.5", "eventsource": "^3.0.2", "eventsource-parser": "^3.0.0", "express": "^5.2.1", "express-rate-limit": "^8.2.1", "hono": "^4.11.4", "jose": "^6.1.3", "json-schema-typed": "^8.0.2", "pkce-challenge": "^5.0.0", "raw-body": "^3.0.0", "zod": "^3.25 || ^4.0", "zod-to-json-schema": "^3.25.1" }, "peerDependencies": { "@cfworker/json-schema": "^4.1.1" }, "optionalPeers": ["@cfworker/json-schema"] }, "sha512-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ=="], "@msgpackr-extract/msgpackr-extract-darwin-arm64": ["@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw=="], @@ -1932,7 +1986,7 @@ "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="], - "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="], + "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], "@radix-ui/react-progress": ["@radix-ui/react-progress@1.1.7", "", { "dependencies": { "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg=="], @@ -2224,6 +2278,8 @@ "@tabby_ai/hijri-converter": ["@tabby_ai/hijri-converter@1.0.5", "", {}, "sha512-r5bClKrcIusDoo049dSL8CawnHR6mRdDwhlQuIgZRNty68q0x8k3Lf1BtPAMxRf/GgnHBnIO4ujd3+GQdLWzxQ=="], + "@tailwindcss/browser": ["@tailwindcss/browser@4.3.0", "", {}, "sha512-izCuCS1V4c18DH47BbJuAPoCi7LP9gSSanr4k42cL+GN3Km/H3QO3fpMVVPXUBpAatHYgfmQWOmrNJqq+bzAAQ=="], + "@tailwindcss/node": ["@tailwindcss/node@4.2.2", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.19.0", "jiti": "^2.6.1", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.2.2" } }, "sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA=="], "@tailwindcss/oxide": ["@tailwindcss/oxide@4.2.2", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.2.2", "@tailwindcss/oxide-darwin-arm64": "4.2.2", "@tailwindcss/oxide-darwin-x64": "4.2.2", "@tailwindcss/oxide-freebsd-x64": "4.2.2", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.2", "@tailwindcss/oxide-linux-arm64-gnu": "4.2.2", "@tailwindcss/oxide-linux-arm64-musl": "4.2.2", "@tailwindcss/oxide-linux-x64-gnu": "4.2.2", "@tailwindcss/oxide-linux-x64-musl": "4.2.2", "@tailwindcss/oxide-wasm32-wasi": "4.2.2", "@tailwindcss/oxide-win32-arm64-msvc": "4.2.2", "@tailwindcss/oxide-win32-x64-msvc": "4.2.2" } }, "sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg=="], @@ -4016,6 +4072,8 @@ "pkg-types": ["pkg-types@1.3.1", "", { "dependencies": { "confbox": "^0.1.8", "mlly": "^1.7.4", "pathe": "^2.0.1" } }, "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ=="], + "playwright-core": ["playwright-core@1.60.0", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA=="], + "plist": ["plist@3.1.0", "", { "dependencies": { "@xmldom/xmldom": "^0.8.8", "base64-js": "^1.5.1", "xmlbuilder": "^15.1.1" } }, "sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ=="], "points-on-curve": ["points-on-curve@0.2.0", "", {}, "sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A=="], @@ -4190,7 +4248,7 @@ "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="], - "recharts": ["recharts@3.8.0", "", { "dependencies": { "@reduxjs/toolkit": "^1.9.0 || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Z/m38DX3L73ExO4Tpc9/iZWHmHnlzWG4njQbxsF5aSjwqmHNDDIm0rdEBArkwsBvR8U6EirlEHiQNYWCVh9sGQ=="], + "recharts": ["recharts@3.8.1", "", { "dependencies": { "@reduxjs/toolkit": "^1.9.0 || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg=="], "recma-build-jsx": ["recma-build-jsx@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-build-jsx": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew=="], @@ -4680,6 +4738,8 @@ "vite": ["vite@8.0.8", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.4", "postcss": "^8.5.8", "rolldown": "1.0.0-rc.15", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-dbU7/iLVa8KZALJyLOBOQ88nOXtNG8vxKuOT4I2mD+Ya70KPceF4IAmDsmU0h1Qsn5bPrvsY9HJstCRh3hG6Uw=="], + "vite-plugin-singlefile": ["vite-plugin-singlefile@2.3.3", "", { "dependencies": { "micromatch": "^4.0.8" }, "peerDependencies": { "rollup": "^4.59.0", "vite": "^5.4.21 || ^6.0.0 || ^7.0.0 || ^8.0.0" }, "optionalPeers": ["rollup"] }, "sha512-XVnGH0QzbOa8fxRSsHdCarVN1BSBXNi7uLMQYlrGRN5apdHkk62XQWRJhVever0lnfuyBkwn+kvVChdm/OoOUg=="], + "vitefu": ["vitefu@1.1.3", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" }, "optionalPeers": ["vite"] }, "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg=="], "vitest": ["vitest@4.1.5", "", { "dependencies": { "@vitest/expect": "4.1.5", "@vitest/mocker": "4.1.5", "@vitest/pretty-format": "4.1.5", "@vitest/runner": "4.1.5", "@vitest/snapshot": "4.1.5", "@vitest/spy": "4.1.5", "@vitest/utils": "4.1.5", "es-module-lexer": "^2.0.0", "expect-type": "^1.3.0", "magic-string": "^0.30.21", "obug": "^2.1.1", "pathe": "^2.0.3", "picomatch": "^4.0.3", "std-env": "^4.0.0-rc.1", "tinybench": "^2.9.0", "tinyexec": "^1.0.2", "tinyglobby": "^0.2.15", "tinyrainbow": "^3.1.0", "vite": "^6.0.0 || ^7.0.0 || ^8.0.0", "why-is-node-running": "^2.3.0" }, "peerDependencies": { "@edge-runtime/vm": "*", "@opentelemetry/api": "^1.9.0", "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", "@vitest/browser-playwright": "4.1.5", "@vitest/browser-preview": "4.1.5", "@vitest/browser-webdriverio": "4.1.5", "@vitest/coverage-istanbul": "4.1.5", "@vitest/coverage-v8": "4.1.5", "@vitest/ui": "4.1.5", "happy-dom": "*", "jsdom": "*" }, "optionalPeers": ["@edge-runtime/vm", "@opentelemetry/api", "@types/node", "@vitest/browser-playwright", "@vitest/browser-preview", "@vitest/browser-webdriverio", "@vitest/coverage-istanbul", "@vitest/coverage-v8", "@vitest/ui", "happy-dom", "jsdom"], "bin": { "vitest": "vitest.mjs" } }, "sha512-9Xx1v3/ih3m9hN+SbfkUyy0JAs72ap3r7joc87XL6jwF0jGg6mFBvQ1SrwaX+h8BlkX6Hz9shdd1uo6AF+ZGpg=="], @@ -4872,6 +4932,8 @@ "@executor-js/example-promise-sdk/typescript": ["typescript@6.0.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw=="], + "@executor-js/react/recharts": ["recharts@3.8.0", "", { "dependencies": { "@reduxjs/toolkit": "^1.9.0 || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Z/m38DX3L73ExO4Tpc9/iZWHmHnlzWG4njQbxsF5aSjwqmHNDDIm0rdEBArkwsBvR8U6EirlEHiQNYWCVh9sGQ=="], + "@graphql-tools/executor/@graphql-tools/utils": ["@graphql-tools/utils@11.1.0", "", { "dependencies": { "@graphql-typed-document-node/core": "^3.1.1", "@whatwg-node/promise-helpers": "^1.0.0", "cross-inspect": "1.0.1", "tslib": "^2.4.0" }, "peerDependencies": { "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" } }, "sha512-PtFVG4r8Z2LEBSaPYQMusBiB3o6kjLVJyjCLbnWem/SpSuM21v6LTmgpkXfYU1qpBV2UGsFyuEnSJInl8fR1Ag=="], "@graphql-tools/merge/@graphql-tools/utils": ["@graphql-tools/utils@11.1.0", "", { "dependencies": { "@graphql-typed-document-node/core": "^3.1.1", "@whatwg-node/promise-helpers": "^1.0.0", "cross-inspect": "1.0.1", "tslib": "^2.4.0" }, "peerDependencies": { "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" } }, "sha512-PtFVG4r8Z2LEBSaPYQMusBiB3o6kjLVJyjCLbnWem/SpSuM21v6LTmgpkXfYU1qpBV2UGsFyuEnSJInl8fR1Ag=="], @@ -4930,86 +4992,6 @@ "@poppinss/dumper/supports-color": ["supports-color@10.2.2", "", {}, "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g=="], - "@radix-ui/react-accordion/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-alert-dialog/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-arrow/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-aspect-ratio/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-avatar/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-checkbox/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-collapsible/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-collection/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-context-menu/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-dialog/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-dismissable-layer/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-dropdown-menu/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-focus-scope/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-form/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-hover-card/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-label/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-menu/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-menubar/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-navigation-menu/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-one-time-password-field/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-password-toggle-field/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-popover/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-popper/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-portal/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="], - - "@radix-ui/react-progress/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-radio-group/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-roving-focus/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-scroll-area/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-select/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-separator/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-slider/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-switch/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-tabs/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-toast/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-toggle/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-toggle-group/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-toolbar/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-tooltip/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - - "@radix-ui/react-visually-hidden/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - "@rc-component/dialog/@rc-component/portal": ["@rc-component/portal@2.2.0", "", { "dependencies": { "@rc-component/util": "^1.2.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-oc6FlA+uXCMiwArHsJyHcIkX4q6uKyndrPol2eWX8YPkAnztHOPsFIRtmWG4BMlGE5h7YIRE3NiaJ5VS8Lb1QQ=="], "@rc-component/drawer/@rc-component/portal": ["@rc-component/portal@2.2.0", "", { "dependencies": { "@rc-component/util": "^1.2.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-oc6FlA+uXCMiwArHsJyHcIkX4q6uKyndrPol2eWX8YPkAnztHOPsFIRtmWG4BMlGE5h7YIRE3NiaJ5VS8Lb1QQ=="], @@ -5108,6 +5090,8 @@ "clone-response/mimic-response": ["mimic-response@1.0.1", "", {}, "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="], + "cmdk/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="], + "concurrently/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="], "cosmiconfig/yaml": ["yaml@1.10.3", "", {}, "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA=="], @@ -5254,8 +5238,6 @@ "protobufjs/@types/node": ["@types/node@25.6.0", "", { "dependencies": { "undici-types": "~7.19.0" } }, "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ=="], - "radix-ui/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="], - "rc/ini": ["ini@1.3.8", "", {}, "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="], "rc/strip-json-comments": ["strip-json-comments@2.0.1", "", {}, "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="], @@ -5562,6 +5544,8 @@ "cliui/wrap-ansi/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="], + "cmdk/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="], + "concurrently/chalk/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="], "concurrently/chalk/supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="], diff --git a/packages/core/execution/src/description.test.ts b/packages/core/execution/src/description.test.ts index 94a39111b..30ac7f3fb 100644 --- a/packages/core/execution/src/description.test.ts +++ b/packages/core/execution/src/description.test.ts @@ -67,6 +67,8 @@ describe("buildExecuteDescription", () => { // Stable anchor from the workflow preamble. expect(description).toContain("Execute TypeScript in a sandboxed runtime"); + expect(description).not.toContain("## Generative UI"); + expect(description).not.toContain("render-ui"); // The namespaces section header. expect(description).toContain("## Available namespaces"); // Each source renders with its ACTUAL id, without display labels or plugin ids. @@ -93,6 +95,7 @@ describe("buildExecuteDescription", () => { const description = yield* buildExecuteDescription(executor); expect(description).toContain("Execute TypeScript in a sandboxed runtime"); + expect(description).not.toContain("## Generative UI"); expect(description).not.toContain("## Available namespaces"); }), ); diff --git a/packages/core/sdk/src/plugin.ts b/packages/core/sdk/src/plugin.ts index 0f4723b92..f1154e93d 100644 --- a/packages/core/sdk/src/plugin.ts +++ b/packages/core/sdk/src/plugin.ts @@ -542,6 +542,13 @@ export interface PluginSpec< * `({ args }) => self.addSpec(args)`. */ readonly staticSources?: (self: NoInfer) => readonly StaticSourceDecl[]; + /** Optional host-protocol contributions. The core SDK intentionally + * treats this as opaque data so protocol packages can define their + * own contracts without pulling host-specific dependencies into every + * plugin. For MCP, `@executor-js/host-mcp` interprets this field as an + * MCP contribution factory. */ + readonly mcp?: unknown; + /** HttpApiGroup contributed by this plugin. Composed into the host's * `HttpApi` via the `addGroup` helper at runtime. The host mounts * the group at `/_executor/plugins/{id}/...` (or wherever the diff --git a/packages/core/vite-plugin/src/index.ts b/packages/core/vite-plugin/src/index.ts index 4b89e87dc..c9b9dc1b9 100644 --- a/packages/core/vite-plugin/src/index.ts +++ b/packages/core/vite-plugin/src/index.ts @@ -32,6 +32,8 @@ import type { ExecutorCliConfig } from "@executor-js/sdk"; const VIRTUAL_ID = "virtual:executor/plugins-client"; const RESOLVED_ID = `\0${VIRTUAL_ID}`; +const INNER_RENDERER_ID = "virtual:executor-inner-renderer"; +const RESOLVED_INNER_RENDERER_ID = `\0${INNER_RENDERER_ID}`; const DEFAULT_CONFIG_CANDIDATES = [ "executor.config.ts", @@ -65,6 +67,35 @@ const tryResolveClient = (packageName: string, fromDir: string): string | null = } }; +const tryResolveDynamicUiInnerRenderer = (fromDir: string): string | null => { + const require = createRequire(resolvePath(fromDir, "_anchor.js")); + try { + const clientEntry = require.resolve("@executor-js/plugin-dynamic-ui/client"); + return resolvePath(dirname(clientEntry), "shell/inner-renderer.tsx"); + } catch { + return null; + } +}; + +type EsbuildApi = { + readonly build: (options: { + readonly entryPoints: readonly string[]; + readonly absWorkingDir: string; + readonly bundle: boolean; + readonly write: boolean; + readonly format: "iife"; + readonly platform: "browser"; + readonly target: "es2022"; + readonly jsx: "automatic"; + readonly define: Record; + }) => Promise<{ readonly outputFiles: readonly { readonly text: string }[] }>; +}; + +const loadEsbuild = (anchor: string): EsbuildApi => { + const require = createRequire(anchor); + return require("esbuild") as EsbuildApi; +}; + interface ExecutorVitePluginOptions { /** * Path to the executor config file. Resolved relative to the Vite @@ -218,10 +249,39 @@ export default function executorVitePlugin(options: ExecutorVitePluginOptions = projectRoot = config.root; }, resolveId(id) { + if (id === INNER_RENDERER_ID) return RESOLVED_INNER_RENDERER_ID; if (id === VIRTUAL_ID) return RESOLVED_ID; return undefined; }, async load(id) { + if (id === RESOLVED_INNER_RENDERER_ID) { + const configPath = resolveConfigPath(); + const fromDir = configPath ? dirname(configPath) : projectRoot; + const entryPoint = tryResolveDynamicUiInnerRenderer(fromDir); + if (!entryPoint) { + throw new Error( + "virtual:executor-inner-renderer was requested but @executor-js/plugin-dynamic-ui could not be resolved.", + ); + } + + const result = await loadEsbuild(entryPoint).build({ + entryPoints: [entryPoint], + absWorkingDir: dirname(entryPoint), + bundle: true, + write: false, + format: "iife", + platform: "browser", + target: "es2022", + jsx: "automatic", + define: { + "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV ?? "development"), + }, + }); + + const js = result.outputFiles[0]; + if (!js) throw new Error("Failed to bundle Executor inner renderer."); + return `export default ${JSON.stringify(js.text)};`; + } if (id !== RESOLVED_ID) return undefined; return loadVirtualSource(); }, diff --git a/packages/hosts/mcp/package.json b/packages/hosts/mcp/package.json index 296bfa87a..32febc303 100644 --- a/packages/hosts/mcp/package.json +++ b/packages/hosts/mcp/package.json @@ -22,8 +22,13 @@ }, "devDependencies": { "@effect/vitest": "catalog:", + "@executor-js/runtime-quickjs": "workspace:*", + "@modelcontextprotocol/ext-apps": "^1.6.0", "@types/node": "catalog:", + "@types/react": "catalog:", + "@types/react-dom": "catalog:", "bun-types": "catalog:", + "vite": "^8.0.8", "vitest": "catalog:" } } diff --git a/packages/hosts/mcp/src/index.ts b/packages/hosts/mcp/src/index.ts index 2ad4b1e83..0fc78ffb8 100644 --- a/packages/hosts/mcp/src/index.ts +++ b/packages/hosts/mcp/src/index.ts @@ -1 +1,11 @@ export { createExecutorMcpServer, type ExecutorMcpServerConfig } from "./server"; +export { + defineMcpContribution, + type McpDebugLog, + type McpPluginClientCapabilitiesContext, + type McpPluginContribution, + type McpPluginContributionFactory, + type McpPluginRegisterContext, + type McpRunToolEffect, + type McpToolResult, +} from "./plugin"; diff --git a/packages/hosts/mcp/src/plugin.ts b/packages/hosts/mcp/src/plugin.ts new file mode 100644 index 000000000..b39706b3d --- /dev/null +++ b/packages/hosts/mcp/src/plugin.ts @@ -0,0 +1,64 @@ +import { Effect } from "effect"; +import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; +import type { ClientCapabilities } from "@modelcontextprotocol/sdk/types.js"; +import type * as Cause from "effect/Cause"; + +import type { AnyPlugin } from "@executor-js/sdk"; +import type { ExecutionEngine } from "@executor-js/execution"; + +export type McpToolResult = { + content: Array<{ type: "text"; text: string }>; + structuredContent?: Record; + isError?: boolean; +}; + +export type McpDebugLog = (event: string, data: Record) => void; + +export type McpRunToolEffect = ( + effect: Effect.Effect, +) => Promise; + +export type McpPluginRegisterContext = { + readonly server: McpServer; + readonly engine: ExecutionEngine; + readonly description: string; + readonly debugLog: McpDebugLog; + readonly runToolEffect: McpRunToolEffect; + readonly executeCodeFromApp: (code: string) => Effect.Effect; + readonly renderUiFallbackUrl?: (code: string) => string; + readonly resumeExecution: ( + executionId: string, + action: "accept" | "decline" | "cancel", + content: Record | undefined, + ) => Effect.Effect; + readonly parseJsonContent: (raw: string) => Record | undefined; +}; + +export type McpPluginClientCapabilitiesContext = { + readonly server: McpServer; + readonly clientCapabilities: ClientCapabilities | undefined; + readonly debugLog: McpDebugLog; +}; + +export type McpPluginContribution = { + readonly id: string; + readonly prepareExecuteDescription?: (description: string) => string; + readonly register: (ctx: McpPluginRegisterContext) => Effect.Effect; + readonly onClientCapabilitiesChanged?: (ctx: McpPluginClientCapabilitiesContext) => void; +}; + +export type McpPluginContributionFactory = () => McpPluginContribution; + +export const defineMcpContribution = (contribution: T): T => + contribution; + +const isMcpContributionFactory = (value: unknown): value is McpPluginContributionFactory => + typeof value === "function"; + +export const collectMcpContributions = ( + plugins: readonly AnyPlugin[] | undefined, +): readonly McpPluginContribution[] => + (plugins ?? []) + .map((plugin) => plugin.mcp) + .filter(isMcpContributionFactory) + .map((factory) => factory()); diff --git a/packages/hosts/mcp/src/server.test.ts b/packages/hosts/mcp/src/server.test.ts index 34a5b669e..70d5f92e2 100644 --- a/packages/hosts/mcp/src/server.test.ts +++ b/packages/hosts/mcp/src/server.test.ts @@ -4,10 +4,13 @@ import { Client } from "@modelcontextprotocol/sdk/client/index.js"; import { InMemoryTransport } from "@modelcontextprotocol/sdk/inMemory.js"; import { ElicitRequestSchema } from "@modelcontextprotocol/sdk/types.js"; import type { ClientCapabilities } from "@modelcontextprotocol/sdk/types.js"; +import { EXTENSION_ID, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server"; import type * as Cause from "effect/Cause"; import { FormElicitation, ToolId, UrlElicitation } from "@executor-js/sdk"; import type { ExecutionEngine, ExecutionResult } from "@executor-js/execution"; +// oxlint-disable-next-line executor/no-cross-package-relative-imports -- boundary: host integration test uses the real plugin without adding a package-graph cycle +import { dynamicUiPlugin, filterDynamicUiMcpPlugins } from "../../../plugins/dynamic-ui/src"; import { createExecutorMcpServer, type ExecutorMcpServerConfig } from "./server"; @@ -34,12 +37,17 @@ const makeStubEngine = (overrides: { getDescription: Effect.succeed(overrides.description ?? "test executor"), }); +const DYNAMIC_UI_PLUGIN = dynamicUiPlugin(); + /** Connect a real MCP Client to our executor MCP server over in-memory transports. */ const withClient = async ( engine: ExecutionEngine, capabilities: ClientCapabilities, fn: (client: Client) => Promise, - config?: Pick, "debug" | "elicitationMode" | "browserApprovalStore">, + config?: Pick< + ExecutorMcpServerConfig, + "debug" | "elicitationMode" | "browserApprovalStore" | "plugins" | "renderUiFallbackUrl" + >, ) => { const mcpServer = await Effect.runPromise(createExecutorMcpServer({ engine, ...config })); const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair(); @@ -66,6 +74,16 @@ const ELICITATION_CAPS: ClientCapabilities = { }; const FORM_ONLY_CAPS: ClientCapabilities = { elicitation: { form: {} } }; const NO_CAPS: ClientCapabilities = {}; +type AppsClientCapabilities = ClientCapabilities & { + readonly extensions: Record; +}; +const APPS_ELICITATION_CAPS: AppsClientCapabilities = { + ...ELICITATION_CAPS, + extensions: { [EXTENSION_ID]: { mimeTypes: [RESOURCE_MIME_TYPE] } }, +}; +const APPS_WITHOUT_ELICITATION_CAPS: AppsClientCapabilities = { + extensions: { [EXTENSION_ID]: { mimeTypes: [RESOURCE_MIME_TYPE] } }, +}; /** Extract the first text content from a callTool result. */ const textOf = (result: Awaited>): string => @@ -143,6 +161,172 @@ describe("MCP host server — native elicitation mode", () => { }); }); + it("does not expose dynamic UI tools unless a plugin contributes them", async () => { + await withClient(makeStubEngine({}), APPS_ELICITATION_CAPS, async (client) => { + const { tools } = await client.listTools(); + const names = tools.map((tool) => tool.name); + expect(names).not.toContain("render-ui"); + expect(names).not.toContain("execute-action"); + }); + }); + + it("does not expose dynamic UI tools when the host filters the plugin at its exit point", async () => { + await withClient( + makeStubEngine({}), + APPS_ELICITATION_CAPS, + async (client) => { + const { tools } = await client.listTools(); + const names = tools.map((tool) => tool.name); + expect(names).not.toContain("render-ui"); + expect(names).not.toContain("execute-action"); + expect(names).not.toContain("execute-action-resume"); + }, + { plugins: filterDynamicUiMcpPlugins([DYNAMIC_UI_PLUGIN], false) }, + ); + }); + + it("exposes render-ui fallback but not app-only tools to clients without MCP Apps support", async () => { + await withClient( + makeStubEngine({}), + NO_CAPS, + async (client) => { + const { tools } = await client.listTools(); + const names = tools.map((tool) => tool.name); + expect(names).toContain("render-ui"); + expect(names).not.toContain("execute-action"); + expect(names).not.toContain("execute-action-resume"); + + const result = await client.callTool({ + name: "render-ui", + arguments: { code: 'function App() { return ; }' }, + }); + expect(textOf(result)).toContain("https://executor.test/render?code=42"); + expect(result.structuredContent).toEqual({ + status: "fallback_url", + url: "https://executor.test/render?code=42", + }); + }, + { + plugins: [DYNAMIC_UI_PLUGIN], + renderUiFallbackUrl: () => "https://executor.test/render?code=42", + }, + ); + }); + + it("render-ui tool routes React code to the MCP app shell", async () => { + await withClient( + makeStubEngine({}), + APPS_ELICITATION_CAPS, + async (client) => { + const result = await client.callTool({ + name: "render-ui", + arguments: { code: 'function App() { return ; }' }, + }); + expect(result.content).toEqual([ + { type: "text", text: "Rendered interactive UI component." }, + ]); + expect(result.structuredContent).toEqual({ + code: 'function App() { return ; }', + }); + }, + { plugins: [DYNAMIC_UI_PLUGIN] }, + ); + }); + + it("serves the app shell resource with restrictive CSP metadata", async () => { + await withClient( + makeStubEngine({}), + APPS_ELICITATION_CAPS, + async (client) => { + const result = await client.readResource({ + uri: "ui://executor/shell-tanstack-query.html", + }); + expect(result.contents).toHaveLength(1); + expect(result.contents[0]).toMatchObject({ + uri: "ui://executor/shell-tanstack-query.html", + mimeType: RESOURCE_MIME_TYPE, + _meta: { + ui: { + csp: { + connectDomains: [], + resourceDomains: [], + }, + }, + }, + }); + }, + { plugins: [DYNAMIC_UI_PLUGIN] }, + ); + }); + + it("render-ui rejects obvious hardcoded live-data snapshots", async () => { + const code = [ + "const rows = [", + ' { service: "api", count: 100 },', + ' { service: "web", count: 80 },', + "];", + "function App() { return {rows.length}; }", + ].join("\n"); + + await withClient( + makeStubEngine({}), + APPS_ELICITATION_CAPS, + async (client) => { + const result = await client.callTool({ + name: "render-ui", + arguments: { code }, + }); + expect(result.isError).toBe(true); + expect(textOf(result)).toContain("Hardcoded live-data array"); + expect(textOf(result)).toContain("useQuery"); + }, + { plugins: [DYNAMIC_UI_PLUGIN] }, + ); + }); + + it("render-ui rejects redeclared provided globals before iframe evaluation", async () => { + const code = [ + "const { useState } = React;", + "function App() {", + " const [count, setCount] = useState(0);", + " return ;", + "}", + ].join("\n"); + + await withClient( + makeStubEngine({}), + APPS_ELICITATION_CAPS, + async (client) => { + const reactDestructure = await client.callTool({ + name: "render-ui", + arguments: { code }, + }); + expect(reactDestructure.isError).toBe(true); + expect(textOf(reactDestructure)).toContain("Do not destructure React"); + expect(textOf(reactDestructure)).toContain("useState"); + + const componentRedeclaration = await client.callTool({ + name: "render-ui", + arguments: { + code: "const Card = () => null;\nfunction App() { return ; }", + }, + }); + expect(componentRedeclaration.isError).toBe(true); + expect(textOf(componentRedeclaration)).toContain('Provided global "Card"'); + + const componentDestructure = await client.callTool({ + name: "render-ui", + arguments: { + code: 'const { Card } = require("./components");\nfunction App() { return ; }', + }, + }); + expect(componentDestructure.isError).toBe(true); + expect(textOf(componentDestructure)).toContain('Provided global "Card"'); + }, + { plugins: [DYNAMIC_UI_PLUGIN] }, + ); + }); + it("execute tool hides defect details in MCP error results", async () => { const engine = makeStubEngine({ // oxlint-disable-next-line executor/no-effect-escape-hatch, executor/no-error-constructor -- boundary: test injects a defect to verify MCP error redaction @@ -409,6 +593,89 @@ describe("MCP host server — native form-only elicitation", () => { // --------------------------------------------------------------------------- describe("MCP host server — client without elicitation (pause/resume)", () => { + it("exposes execute-action to MCP apps even when browser approval mode is enabled", async () => { + const engine = makeStubEngine({ + executeWithPause: (code) => + Effect.succeed({ status: "completed", result: { result: `app:${code}` } }), + }); + + await withClient( + engine, + APPS_WITHOUT_ELICITATION_CAPS, + async (client) => { + const { tools } = await client.listTools(); + expect(tools.map((t) => t.name)).toContain("execute-action"); + + const result = await client.callTool({ + name: "execute-action", + arguments: { code: "return await tools.axiom_mcp.listdatasets({})" }, + }); + expect(result.content).toEqual([ + { type: "text", text: "app:return await tools.axiom_mcp.listdatasets({})" }, + ]); + }, + { + elicitationMode: { + mode: "browser", + approvalUrl: (executionId) => `https://executor.test/resume/${executionId}`, + }, + plugins: [DYNAMIC_UI_PLUGIN], + }, + ); + }); + + it("execute-action pauses elicitations for shell-owned approval instead of browser approval URLs", async () => { + const engine = makeStubEngine({ + executeWithPause: () => + Effect.succeed( + makePausedResult( + "exec_app", + FormElicitation.make({ message: "Approve UI action?", requestedSchema: {} }), + ), + ), + resume: (executionId, response) => + Effect.succeed( + executionId === "exec_app" + ? { status: "completed", result: { result: `action:${response.action}` } } + : null, + ), + }); + + await withClient( + engine, + APPS_WITHOUT_ELICITATION_CAPS, + async (client) => { + const paused = await client.callTool({ + name: "execute-action", + arguments: { code: "return await tools.github.issues.create({})" }, + }); + expect(paused.structuredContent).toMatchObject({ + status: "waiting_for_interaction", + executionId: "exec_app", + interaction: { + kind: "form", + message: "Approve UI action?", + requestedSchema: {}, + }, + }); + expect(textOf(paused)).not.toContain("approvalUrl"); + + const resumed = await client.callTool({ + name: "execute-action-resume", + arguments: { executionId: "exec_app", action: "accept", content: "{}" }, + }); + expect(resumed.content).toEqual([{ type: "text", text: "action:accept" }]); + }, + { + elicitationMode: { + mode: "browser", + approvalUrl: (executionId) => `https://executor.test/resume/${executionId}`, + }, + plugins: [DYNAMIC_UI_PLUGIN], + }, + ); + }); + it("completed execution returns result directly", async () => { const engine = makeStubEngine({ executeWithPause: () => diff --git a/packages/hosts/mcp/src/server.ts b/packages/hosts/mcp/src/server.ts index 12e0201a7..2eaa3cd70 100644 --- a/packages/hosts/mcp/src/server.ts +++ b/packages/hosts/mcp/src/server.ts @@ -10,6 +10,7 @@ import { Validator } from "@cfworker/json-schema"; import * as z from "zod/v4"; import type { + AnyPlugin, ElicitationResponse, ElicitationHandler, ElicitationContext, @@ -24,6 +25,7 @@ import { type ExecutionEngineConfig, type ResumeResponse, } from "@executor-js/execution"; +import { collectMcpContributions, type McpToolResult } from "./plugin"; // --------------------------------------------------------------------------- // Workers-compatible JSON Schema validator (replaces Ajv which uses new Function()) @@ -88,6 +90,16 @@ type SharedMcpServerConfig = { readonly mode: "native"; }; readonly browserApprovalStore?: BrowserApprovalStore; + /** + * Browser URL used by generative UI MCP contributions when the connected + * client cannot mount MCP Apps resources directly. + */ + readonly renderUiFallbackUrl?: (code: string) => string; + /** + * Executor plugins whose host-protocol MCP contributions should be mounted. + * Core SDK treats the field as opaque; this host interprets `plugin.mcp`. + */ + readonly plugins?: readonly AnyPlugin[]; }; export type ExecutorMcpServerConfig = @@ -262,12 +274,6 @@ const formatBoundaryError = (err: unknown): { name?: string; message: string; st // MCP result formatting // --------------------------------------------------------------------------- -type McpToolResult = { - content: Array<{ type: "text"; text: string }>; - structuredContent?: Record; - isError?: boolean; -}; - const toMcpResult = (formatted: ReturnType): McpToolResult => ({ content: [{ type: "text", text: formatted.text }], structuredContent: formatted.structured, @@ -361,6 +367,11 @@ export const createExecutorMcpServer = ( const description = config.description ?? (yield* engine.getDescription.pipe(Effect.withSpan("mcp.host.get_description"))); + const mcpContributions = collectMcpContributions(config.plugins); + const executeDescription = mcpContributions.reduce( + (current, contribution) => contribution.prepareExecuteDescription?.(current) ?? current, + description, + ); // Captured at construction time. SDK callbacks fire later (often // deferred past the outer Effect's await), so we use the runtime to @@ -402,7 +413,7 @@ export const createExecutorMcpServer = ( new McpServer( { name: "executor", version: "1.0.0" }, { - capabilities: { tools: {} }, + capabilities: { resources: {}, tools: {} }, jsonSchemaValidator: new CfWorkerJsonSchemaValidator(), }, ), @@ -552,13 +563,50 @@ export const createExecutorMcpServer = ( }), ); + const executeCodeFromApp = (code: string): Effect.Effect => + Effect.gen(function* () { + debugLog("execute_action.call", { + elicitationMode: elicitationMode.mode, + elicitationSupport: getElicitationSupport(server), + clientCapabilities: server.server.getClientCapabilities() ?? null, + codeLength: code.length, + }); + + if (elicitationMode.mode === "native") { + const result = yield* engine.execute(code, { + onElicitation: makeMcpElicitationHandler(server, debugLog), + }); + return toMcpResult(formatExecuteResult(result)); + } + + const outcome = yield* engine.executeWithPause(code); + debugLog("execute_action.paused_flow_result", { + status: outcome.status, + executionId: outcome.status === "paused" ? outcome.execution.id : undefined, + interactionKind: + outcome.status === "paused" + ? pausedInteractionKind(outcome.execution.elicitationContext.request) + : undefined, + }); + return outcome.status === "completed" + ? toMcpResult(formatExecuteResult(outcome.result)) + : toMcpPausedResult(formatPausedExecution(outcome.execution)); + }).pipe( + Effect.withSpan("mcp.host.tool.execute_action", { + attributes: { + "mcp.tool.name": "execute-action", + "mcp.execute.code_length": code.length, + }, + }), + ); + // --- tools --- yield* Effect.sync(() => server.registerTool( "execute", { - description, + description: executeDescription, inputSchema: { code: z.string().trim().min(1) }, }, ({ code }) => runToolEffect(executeCode(code)), @@ -618,7 +666,40 @@ export const createExecutorMcpServer = ( }), ); - yield* Effect.sync(() => { + yield* Effect.forEach( + mcpContributions, + (contribution) => + contribution + .register({ + server, + engine, + description, + debugLog, + runToolEffect, + executeCodeFromApp, + renderUiFallbackUrl: config.renderUiFallbackUrl, + resumeExecution, + parseJsonContent, + }) + .pipe( + Effect.withSpan("mcp.host.plugin.register", { + attributes: { "mcp.plugin.id": contribution.id }, + }), + ), + { discard: true }, + ); + + // --- capability-based tool visibility --- + + const syncToolAvailability = () => { + const clientCapabilities = server.server.getClientCapabilities(); + for (const contribution of mcpContributions) { + contribution.onClientCapabilitiesChanged?.({ + server, + clientCapabilities, + debugLog, + }); + } console.error( "[executor] MCP session mode", JSON.stringify({ @@ -628,11 +709,16 @@ export const createExecutorMcpServer = ( }), ); debugLog("tool.visibility", { - clientCapabilities: server.server.getClientCapabilities() ?? null, + clientCapabilities: clientCapabilities ?? null, elicitationSupport: getElicitationSupport(server), elicitationMode: elicitationMode.mode, resumeEnabled: elicitationMode.mode !== "native", }); + }; + + yield* Effect.sync(() => { + syncToolAvailability(); + server.server.oninitialized = syncToolAvailability; }).pipe(Effect.withSpan("mcp.host.sync_tool_availability")); return server; diff --git a/packages/hosts/mcp/tsconfig.json b/packages/hosts/mcp/tsconfig.json index 42ef14d33..6c8d60b46 100644 --- a/packages/hosts/mcp/tsconfig.json +++ b/packages/hosts/mcp/tsconfig.json @@ -6,8 +6,9 @@ "strict": true, "skipLibCheck": true, "noEmit": true, - "lib": ["ES2022"], - "types": ["bun-types", "node"], + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "types": ["bun-types", "node", "react", "react-dom", "vite/client"], + "jsx": "react-jsx", "noUnusedLocals": true, "noImplicitOverride": true, "plugins": [ @@ -21,5 +22,5 @@ } ] }, - "include": ["src/**/*.ts"] + "include": ["src/**/*.ts", "src/**/*.tsx"] } diff --git a/packages/plugins/dynamic-ui/CHANGELOG.md b/packages/plugins/dynamic-ui/CHANGELOG.md new file mode 100644 index 000000000..c6676d888 --- /dev/null +++ b/packages/plugins/dynamic-ui/CHANGELOG.md @@ -0,0 +1,7 @@ +# @executor-js/plugin-dynamic-ui + +## 1.4.25 + +### Patch Changes + +- Initial dynamic UI plugin package. diff --git a/packages/plugins/dynamic-ui/package.json b/packages/plugins/dynamic-ui/package.json new file mode 100644 index 000000000..d903cbde0 --- /dev/null +++ b/packages/plugins/dynamic-ui/package.json @@ -0,0 +1,85 @@ +{ + "name": "@executor-js/plugin-dynamic-ui", + "version": "1.4.25", + "homepage": "https://github.com/RhysSullivan/executor/tree/main/packages/plugins/dynamic-ui", + "bugs": { + "url": "https://github.com/RhysSullivan/executor/issues" + }, + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/RhysSullivan/executor.git", + "directory": "packages/plugins/dynamic-ui" + }, + "files": [ + "dist" + ], + "type": "module", + "exports": { + ".": "./src/index.ts", + "./client": "./src/client.tsx" + }, + "publishConfig": { + "access": "public", + "exports": { + ".": { + "import": { + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + } + }, + "./client": { + "import": { + "types": "./dist/client.d.ts", + "default": "./dist/client.js" + } + } + } + }, + "scripts": { + "build": "tsup && bun run build:shell", + "build:shell": "vite build --config vite.config.shell.ts", + "typecheck": "tsgo --noEmit", + "test": "vitest run", + "typecheck:slow": "tsc --noEmit" + }, + "dependencies": { + "@executor-js/host-mcp": "workspace:*", + "@executor-js/react": "workspace:*", + "@executor-js/sdk": "workspace:*", + "@modelcontextprotocol/ext-apps": "^1.6.0", + "@modelcontextprotocol/sdk": "^1.12.1", + "@tanstack/react-query": "^5.99.0", + "effect": "catalog:", + "esbuild": "^0.27.7", + "sucrase": "^3.35.1", + "zod": "^4.3.0" + }, + "devDependencies": { + "@effect/vitest": "catalog:", + "@executor-js/execution": "workspace:*", + "@executor-js/runtime-quickjs": "workspace:*", + "@tailwindcss/browser": "^4.2.2", + "@tailwindcss/vite": "^4.2.2", + "@types/node": "catalog:", + "@types/react": "catalog:", + "@types/react-dom": "catalog:", + "@vitejs/plugin-react": "^6.0.1", + "bun-types": "catalog:", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-react": "^1.8.0", + "playwright-core": "^1.59.1", + "radix-ui": "^1.4.3", + "react": "^19.2.5", + "react-dom": "^19.2.5", + "recharts": "^3.8.1", + "tailwind-merge": "^3.5.0", + "tailwindcss": "^4.2.2", + "tsup": "catalog:", + "typescript": "catalog:", + "vite": "^8.0.8", + "vite-plugin-singlefile": "^2.3.2", + "vitest": "catalog:" + } +} diff --git a/packages/plugins/dynamic-ui/src/client.tsx b/packages/plugins/dynamic-ui/src/client.tsx new file mode 100644 index 000000000..d884eef3a --- /dev/null +++ b/packages/plugins/dynamic-ui/src/client.tsx @@ -0,0 +1,128 @@ +import { useMemo } from "react"; +import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js"; +import { defineClientPlugin } from "@executor-js/sdk/client"; +import { getAuthPassword, getBaseUrl } from "@executor-js/react/api/base-url"; +import { DynamicUiShell, type DynamicUiShellHost } from "./shell/shell-app"; + +type ExecutionResponse = + | { + readonly status: "completed"; + readonly text: string; + readonly structured: unknown; + readonly isError: boolean; + } + | { + readonly status: "paused"; + readonly text: string; + readonly structured: unknown; + }; + +const readInitialCode = (): string | undefined => { + if (typeof window === "undefined") return undefined; + const params = new URLSearchParams(window.location.hash.replace(/^#/, "")); + return params.get("code") ?? undefined; +}; + +const basicAuthHeader = (): string | null => { + const password = getAuthPassword(); + if (!password || typeof globalThis.btoa !== "function") return null; + return `Basic ${globalThis.btoa(`executor:${password}`)}`; +}; + +const postJson = async (path: string, payload: Record): Promise => { + const headers: Record = { "content-type": "application/json" }; + const basic = basicAuthHeader(); + if (basic) headers.authorization = basic; + + const response = await fetch(`${getBaseUrl()}${path}`, { + method: "POST", + headers, + body: JSON.stringify(payload), + }); + if (!response.ok) { + const text = await response.text(); + throw new Error(text || `Executor API request failed with ${response.status}`); + } + return response.json(); +}; + +const toCallToolResult = (response: ExecutionResponse): CallToolResult => ({ + content: [{ type: "text", text: response.text }], + structuredContent: + typeof response.structured === "object" && response.structured !== null + ? (response.structured as Record) + : { result: response.structured }, + isError: response.status === "completed" && response.isError ? true : undefined, +}); + +const parseContent = (raw: unknown): Record | undefined => { + if (raw === undefined || raw === "{}") return undefined; + if (typeof raw !== "string") return undefined; + try { + const parsed = JSON.parse(raw) as unknown; + return typeof parsed === "object" && parsed !== null && !Array.isArray(parsed) + ? (parsed as Record) + : undefined; + } catch { + return undefined; + } +}; + +const createFallbackHost = (): DynamicUiShellHost => ({ + getHostContext: () => ({ + theme: + typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light", + }), + openLink: async ({ url }) => { + window.open(url, "_blank", "noopener,noreferrer"); + return {}; + }, + callServerTool: async ({ name, arguments: args }) => { + const input = (args ?? {}) as Record; + + if (name === "execute-action") { + const code = input.code; + if (typeof code !== "string") throw new Error("Missing execute-action code."); + return toCallToolResult((await postJson("/executions", { code })) as ExecutionResponse); + } + + if (name === "execute-action-resume") { + const executionId = input.executionId; + const action = input.action; + if (typeof executionId !== "string") throw new Error("Missing execution id."); + if (action !== "accept" && action !== "decline" && action !== "cancel") { + throw new Error("Invalid resume action."); + } + return toCallToolResult( + (await postJson(`/executions/${encodeURIComponent(executionId)}/resume`, { + action, + content: parseContent(input.content), + })) as ExecutionResponse, + ); + } + + throw new Error(`Unsupported shell tool: ${name}`); + }, +}); + +function RenderPage() { + const initialCode = readInitialCode(); + const host = useMemo(() => createFallbackHost(), []); + + if (!initialCode) { + return ( +
+ No generated UI code was provided. +
+ ); + } + + return ; +} + +export default defineClientPlugin({ + id: "dynamic-ui", + pages: [{ path: "/render", component: RenderPage }], +}); diff --git a/packages/plugins/dynamic-ui/src/index.ts b/packages/plugins/dynamic-ui/src/index.ts new file mode 100644 index 000000000..a208f9b20 --- /dev/null +++ b/packages/plugins/dynamic-ui/src/index.ts @@ -0,0 +1,30 @@ +import { definePlugin, type AnyPlugin } from "@executor-js/sdk/core"; +import { dynamicUiMcpContribution } from "./mcp"; + +export { + DYNAMIC_UI_SHELL_RESOURCE_URI, + buildRenderUiDescription, + dynamicUiMcpContribution, + validateRenderUiCode, +} from "./mcp"; + +export const DYNAMIC_UI_PLUGIN_ID = "dynamic-ui"; +export const DYNAMIC_UI_MCP_APPS_FEATURE_FLAG = "generated-ui-mcp-apps"; + +export const filterDynamicUiMcpPlugins = ( + plugins: readonly AnyPlugin[], + enabled: boolean, +): readonly AnyPlugin[] => + enabled ? plugins : plugins.filter((plugin) => plugin.id !== DYNAMIC_UI_PLUGIN_ID); + +/** + * Dynamic UI is the product-level plugin. Its first contribution is the + * MCP `render-ui` surface; HTTP routes for saved views, component libraries, + * and fallback render sessions can live beside it on this plugin later. + */ +export const dynamicUiPlugin = definePlugin(() => ({ + id: DYNAMIC_UI_PLUGIN_ID, + packageName: "@executor-js/plugin-dynamic-ui", + storage: () => ({}), + mcp: () => dynamicUiMcpContribution(), +})); diff --git a/packages/plugins/dynamic-ui/src/mcp.ts b/packages/plugins/dynamic-ui/src/mcp.ts new file mode 100644 index 000000000..3f7c18b92 --- /dev/null +++ b/packages/plugins/dynamic-ui/src/mcp.ts @@ -0,0 +1,628 @@ +import { Effect } from "effect"; +import { + getUiCapability, + registerAppResource, + registerAppTool, + RESOURCE_MIME_TYPE, +} from "@modelcontextprotocol/ext-apps/server"; +import type { ClientCapabilities } from "@modelcontextprotocol/sdk/types.js"; +import { z } from "zod/v4"; + +import { + defineMcpContribution, + type McpPluginContribution, + type McpPluginRegisterContext, + type McpToolResult, +} from "@executor-js/host-mcp"; +import { loadDynamicUiShellHtml } from "./shell-html"; + +type ToggleableMcpRegistration = { + enable: () => void; + disable: () => void; +}; + +type McpAppsClientCapabilities = ClientCapabilities & { + readonly extensions?: Record; +}; + +export const DYNAMIC_UI_SHELL_RESOURCE_URI = "ui://executor/shell-tanstack-query.html"; + +const SHADCN_COMPONENTS = + "Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button, Input, Textarea, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Checkbox, Switch, Slider, Toggle, Tabs, TabsList, TabsTrigger, TabsContent, Table, TableHeader, TableBody, TableRow, TableHead, TableCell, Badge, Avatar, AvatarFallback, Alert, AlertTitle, AlertDescription, Dialog, Sheet, Popover, Tooltip, Separator, ScrollArea, Skeleton, Progress, Accordion, AccordionItem, AccordionTrigger, AccordionContent, DropdownMenu + sub-components"; + +const RECHARTS_COMPONENTS = + "BarChart, Bar, LineChart, Line, AreaChart, Area, PieChart, Pie, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Legend, ChartContainer, ChartTooltip, ChartTooltipContent"; + +const LUCIDE_ICONS = + "Plus, Minus, Check, X, Search, Loader2, AlertCircle, ExternalLink, Copy, Trash2, Edit, Settings, User, Globe, Star, TrendingUp, Activity, Database, Shield, Package, and more"; + +const PROVIDED_GLOBAL_NAMES = new Set([ + "React", + "useState", + "useEffect", + "useRef", + "useCallback", + "useMemo", + "useContext", + "Fragment", + "createContext", + "module", + "exports", + "require", + "fetch", + "XMLHttpRequest", + "WebSocket", + "EventSource", + "Worker", + "SharedWorker", + "useQuery", + "useMutation", + "useQueryClient", + "queryOptions", + "mutationOptions", + "skipToken", + "tools", + "run", + "Card", + "CardHeader", + "CardTitle", + "CardDescription", + "CardAction", + "CardContent", + "CardFooter", + "Button", + "Input", + "Textarea", + "Label", + "Select", + "SelectTrigger", + "SelectValue", + "SelectContent", + "SelectItem", + "Checkbox", + "Switch", + "Slider", + "Toggle", + "Tabs", + "TabsList", + "TabsTrigger", + "TabsContent", + "Table", + "TableHeader", + "TableBody", + "TableRow", + "TableHead", + "TableCell", + "Badge", + "Avatar", + "AvatarFallback", + "Alert", + "AlertTitle", + "AlertDescription", + "Dialog", + "Sheet", + "Popover", + "Tooltip", + "Separator", + "ScrollArea", + "Skeleton", + "Progress", + "Accordion", + "AccordionItem", + "AccordionTrigger", + "AccordionContent", + "ScrollBar", + "DropdownMenu", + "DialogTrigger", + "DialogContent", + "DialogHeader", + "DialogFooter", + "DialogTitle", + "DialogDescription", + "DialogClose", + "SheetTrigger", + "SheetContent", + "SheetHeader", + "SheetFooter", + "SheetTitle", + "SheetDescription", + "SheetClose", + "PopoverTrigger", + "PopoverContent", + "PopoverAnchor", + "TooltipTrigger", + "TooltipContent", + "TooltipProvider", + "DropdownMenuTrigger", + "DropdownMenuContent", + "DropdownMenuGroup", + "DropdownMenuLabel", + "DropdownMenuItem", + "DropdownMenuCheckboxItem", + "DropdownMenuRadioGroup", + "DropdownMenuRadioItem", + "DropdownMenuSeparator", + "DropdownMenuSub", + "DropdownMenuSubTrigger", + "DropdownMenuSubContent", + "SelectGroup", + "SelectLabel", + "RadioGroup", + "RadioGroupItem", + "ToggleGroup", + "ToggleGroupItem", + "TableFooter", + "TableCaption", + "AvatarImage", + "BarChart", + "Bar", + "LineChart", + "Line", + "AreaChart", + "Area", + "PieChart", + "Pie", + "Cell", + "RadarChart", + "Radar", + "PolarGrid", + "PolarAngleAxis", + "PolarRadiusAxis", + "RadialBarChart", + "RadialBar", + "ScatterChart", + "Scatter", + "ComposedChart", + "XAxis", + "YAxis", + "CartesianGrid", + "ResponsiveContainer", + "Legend", + "ReferenceLine", + "ReferenceArea", + "Brush", + "Funnel", + "FunnelChart", + "Treemap", + "ChartContainer", + "ChartTooltip", + "ChartTooltipContent", + "ChartLegend", + "ChartLegendContent", + "ChartStyle", + "Plus", + "Minus", + "Check", + "X", + "ChevronDown", + "ChevronUp", + "ChevronLeft", + "ChevronRight", + "ChevronsUpDown", + "Search", + "Loader2", + "AlertCircle", + "AlertTriangle", + "Info", + "ExternalLink", + "Copy", + "Trash2", + "Edit", + "Settings", + "User", + "Users", + "Mail", + "Calendar", + "Clock", + "ArrowUp", + "ArrowDown", + "ArrowLeft", + "ArrowRight", + "ArrowUpRight", + "Download", + "Upload", + "File", + "FileText", + "Folder", + "FolderOpen", + "Image", + "Link", + "Globe", + "Home", + "Star", + "Heart", + "Eye", + "EyeOff", + "Lock", + "Unlock", + "RefreshCw", + "RotateCcw", + "Filter", + "SortAsc", + "SortDesc", + "MoreHorizontal", + "MoreVertical", + "Menu", + "Grip", + "GripVertical", + "Code", + "Terminal", + "TrendingUp", + "TrendingDown", + "BarChart3", + "PieChartIcon", + "GitBranch", + "GitCommit", + "GitPullRequest", + "MessageSquare", + "Send", + "Bookmark", + "Tag", + "Hash", + "AtSign", + "Paperclip", + "MapPin", + "Phone", + "Video", + "Mic", + "Volume2", + "VolumeX", + "Play", + "Pause", + "Square", + "Circle", + "Triangle", + "Hexagon", + "Box", + "Activity", + "Database", + "Server", + "Cpu", + "Zap", + "Shield", + "Key", + "Wifi", + "WifiOff", + "Battery", + "Sun", + "Moon", + "CloudRain", + "Thermometer", + "Package", + "cn", +]); + +const sectionStart = (text: string, heading: string): number => { + const withNewline = text.indexOf(`\n${heading}`); + if (withNewline >= 0) return withNewline + 1; + return text.startsWith(heading) ? 0 : -1; +}; + +export const availableNamespacesSection = (description: string): string | undefined => { + const start = sectionStart(description, "## Available namespaces"); + return start >= 0 ? description.slice(start).trim() : undefined; +}; + +const extractGenerativeUiBody = (description: string): string | undefined => { + const start = sectionStart(description, "## Generative UI"); + if (start < 0) return undefined; + + const namespaces = availableNamespacesSection(description); + const end = namespaces ? description.indexOf(namespaces) : description.length; + const section = description.slice(start, end).trim(); + return section.replace(/^## Generative UI\s*/, "").trim(); +}; + +export const buildRenderUiDescription = (executeDescription: string): string => { + const uiBody = + extractGenerativeUiBody(executeDescription) ?? + [ + "Write a React component named `App` with JSX in the `code` parameter. It renders in an MCP app iframe alongside the conversation.", + "", + "**No imports** — everything is already in scope:", + "- React: `useState`, `useEffect`, `useRef`, `useCallback`, `useMemo`", + "- TanStack Query v5: `useQuery`, `useMutation`, `useQueryClient`, `queryOptions`, `mutationOptions`, `skipToken`; the component is already wrapped in `QueryClientProvider`.", + "- Do not redeclare or destructure provided globals. Do not write `const { useState } = React`; use `useState(...)` directly or `React.useState(...)`.", + "- Discovery: use the regular `execute` tool before calling `render-ui` when you need to inspect available tools, query syntax, response shapes, mutation inputs, IDs, field names, or example rows.", + "- Fetch live data with TanStack options from the tool proxy: `useQuery(tools...queryOptions(args))`.", + "- For user-triggered writes, use `useMutation(tools...mutationOptions({ onSuccess }))` and call `mutate(input)` from event handlers.", + "- Invalidate or refetch reads with `useQueryClient()` and stable keys from `tools...queryKey(args)`.", + "- Use the discovered output shape exactly. Do not invent wrapper fields like `data.domain` or `data.items` unless the schema/sample shows them.", + "- For toggles and switches, mutate with the checked value from the event instead of inverting possibly stale query data.", + "- For optimistic writes, use TanStack `onMutate` / `onError` / `onSettled`: cancel the query, snapshot old data, `setQueryData`, roll back on error, then invalidate.", + "- Only hardcode small display constants like labels, colors, tab names, and chart configuration. Never embed tool response rows, API results, summaries, or dashboard data as literals in the component.", + "- Always render loading and error states from `useQuery` / `useMutation`; do not replace them with hardcoded fallback data.", + `- shadcn/ui components available by name: ${SHADCN_COMPONENTS}`, + `- Recharts components available by name: ${RECHARTS_COMPONENTS}`, + `- Lucide icons available by name: ${LUCIDE_ICONS}`, + ].join("\n"); + + const namespaces = availableNamespacesSection(executeDescription); + return [ + "Render an interactive React UI component in an MCP app iframe.", + "", + "## Workflow", + "", + "1. If you need to understand tool names, query syntax, required arguments, response shapes, IDs, or mutation inputs, first use the regular `execute` tool to inspect them.", + "2. Then call `render-ui` with a component named `App` in the `code` parameter.", + "3. Recreate every read from the discovery step inside `App` with `useQuery(tools...queryOptions(args))` so the UI stays live.", + "4. Use `useMutation(tools...mutationOptions({ onSuccess }))` for user-triggered writes or actions.", + "5. Return only the component code.", + "", + "## Using Execute For Discovery", + "", + "- `execute` is for exploration: list datasets, inspect schemas, test a query, fetch one small sample row, or learn the exact mutation input shape.", + "- `render-ui` is for the final interactive surface. Do not paste discovery results into JSX as literal rows, cards, summaries, metrics, or chart series.", + "- After discovering an API call with `execute`, put the same call in TanStack Query options inside the generated component.", + "- Example discovery: call `execute` with `return await tools.axiom_mcp.querydataset({ ... })` to confirm columns, then call `render-ui` with `useQuery(tools.axiom_mcp.querydataset.queryOptions({ ... }))`.", + "- Use discovered result shapes exactly. If a sample or schema returns `{ renew, expiresAt }`, read `data?.renew`, not `data?.domain?.renew`.", + "- Keep discovery small. Use limits, narrow time ranges, or schema/list tools when possible.", + "", + "## TanStack Query State", + "", + "- Use `const queryClient = useQueryClient()` when a mutation changes data shown by a query.", + "- For simple writes, invalidate with `queryClient.invalidateQueries(tools...queryFilter(args))` in `onSuccess` or `onSettled`.", + "- For toggles and switches, pass the new checked value into `mutate`: `onCheckedChange={(checked) => mutation.mutate({ body: { enabled: checked } })}`.", + "- For optimistic UI, use `onMutate` to `cancelQueries`, snapshot `getQueryData`, and `setQueryData`; return the snapshot, restore it in `onError`, and invalidate in `onSettled`.", + "", + "## Available UI Components", + "", + `- shadcn/ui components available by name: ${SHADCN_COMPONENTS}`, + `- Recharts components available by name: ${RECHARTS_COMPONENTS}`, + `- Lucide icons available by name: ${LUCIDE_ICONS}`, + "", + "## Rules", + "", + "- Use this tool instead of `execute` whenever the output should be an interactive UI.", + "- Do not call API tools first and paste returned data into JSX.", + "- Do not embed tool response rows, API results, summaries, dashboard data, or copied query output as literals in the component.", + "- Keep data live by routing every API read/write through the provided `tools` proxy from TanStack Query or `run(code)`.", + "- Do not redeclare or destructure provided globals. Hooks, components, icons, `tools`, and `run` are already in scope; use them directly.", + "- Tool proxy helpers are TanStack-native: `.queryOptions(args, options)`, `.mutationOptions(options)`, `.queryKey(args)`, `.queryFilter(args, filters)`, `.pathKey()`, `.pathFilter(filters)`, and `.mutationKey()`.", + "- The server rejects obvious hardcoded live-data snapshots such as `const rows = [{...}, {...}]`; regenerate with `useQuery` instead.", + "- The server rejects redeclarations of provided globals such as `const { useState } = React` or `const Card = ...` before the UI reaches the iframe.", + "", + "## Generative UI", + "", + uiBody, + ...(namespaces ? ["", namespaces] : []), + ].join("\n"); +}; + +const DATA_SNAPSHOT_NAME = + /(?:^|_|\b)(?:data|rows|items|results|records|datasets|dashboards|logs|events|metrics|traces|services|endpoints|series|points|stats|summary|requests|errors|users|issues|tickets)(?:$|_|\b)/i; + +const OBJECT_ARRAY_LITERAL = + /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*\[((?:[^\][{}]|\{[^{}]*\})*)\]/gs; + +const REACT_DESTRUCTURING_DECLARATION = /\b(?:const|let|var)\s*\{[^{}]*\}\s*=\s*React\b/s; + +const OBJECT_DESTRUCTURING_DECLARATION = /\b(?:const|let|var)\s*\{([^{}]*)\}\s*=/gs; + +const PROVIDED_GLOBAL_DECLARATION = + /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\b|\bfunction\s+([A-Za-z_$][\w$]*)\s*\(|\bclass\s+([A-Za-z_$][\w$]*)\b/g; + +const firstDefined = (...values: Array): string | undefined => + values.find((value): value is string => value !== undefined); + +const localDestructuredName = (part: string): string | undefined => { + const binding = part + .replace(/^\s*\.\.\./, "") + .split("=")[0] + ?.trim(); + const alias = binding?.match(/:\s*([A-Za-z_$][\w$]*)\s*$/)?.[1]; + return alias ?? binding?.match(/^([A-Za-z_$][\w$]*)\b/)?.[1]; +}; + +export const validateRenderUiCode = (code: string): string | null => { + if (REACT_DESTRUCTURING_DECLARATION.test(code)) { + return [ + "Do not destructure React in render-ui.", + "Hooks such as useState are already in scope; use useState(...) directly or React.useState(...).", + ].join(" "); + } + + for (const match of code.matchAll(OBJECT_DESTRUCTURING_DECLARATION)) { + const names = match[1]?.split(",").flatMap((part) => { + const name = localDestructuredName(part); + return name ? [name] : []; + }); + const providedName = names?.find((name) => PROVIDED_GLOBAL_NAMES.has(name)); + if (providedName) { + return [ + `Provided global "${providedName}" is already in scope and cannot be redeclared.`, + "Remove the destructuring declaration and use the provided global directly.", + ].join(" "); + } + } + + for (const match of code.matchAll(PROVIDED_GLOBAL_DECLARATION)) { + const name = firstDefined(match[1], match[2], match[3]); + if (name && PROVIDED_GLOBAL_NAMES.has(name)) { + return [ + `Provided global "${name}" is already in scope and cannot be redeclared.`, + "Remove the local declaration and use the provided global directly.", + ].join(" "); + } + } + + for (const match of code.matchAll(OBJECT_ARRAY_LITERAL)) { + const name = match[1]; + const body = match[2] ?? ""; + const objectCount = body.match(/\{/g)?.length ?? 0; + if (DATA_SNAPSHOT_NAME.test(name) && objectCount >= 2) { + return [ + `Hardcoded live-data array "${name}" is not allowed in render-ui.`, + "Fetch the data inside App with useQuery(tools...queryOptions(args)) and derive rows/cards/charts from the query result.", + ].join(" "); + } + } + + return null; +}; + +const toMcpRenderUiRejectedResult = (reason: string): McpToolResult => ({ + content: [{ type: "text", text: `Render UI rejected: ${reason}` }], + structuredContent: { status: "error", error: reason }, + isError: true, +}); + +export const dynamicUiMcpContribution = (): McpPluginContribution => { + let renderUiTool: ToggleableMcpRegistration | undefined; + let executeActionTool: ToggleableMcpRegistration | undefined; + let executeActionResumeTool: ToggleableMcpRegistration | undefined; + let appsEnabled = false; + + return defineMcpContribution({ + id: "dynamic-ui", + register: (ctx: McpPluginRegisterContext) => + Effect.sync(() => { + renderUiTool = registerAppTool( + ctx.server, + "render-ui", + { + description: buildRenderUiDescription(ctx.description), + inputSchema: { code: z.string().trim().min(1) }, + _meta: { + ui: { + resourceUri: DYNAMIC_UI_SHELL_RESOURCE_URI, + visibility: ["model"], + }, + }, + }, + ({ code }) => { + const rejection = validateRenderUiCode(code); + if (rejection) { + return Promise.resolve(toMcpRenderUiRejectedResult(rejection)); + } + + if (!appsEnabled) { + const url = ctx.renderUiFallbackUrl?.(code); + return Promise.resolve( + url + ? ({ + content: [ + { + type: "text" as const, + text: `Rendered interactive UI component. Open this URL to view it in Executor:\n${url}`, + }, + ], + structuredContent: { status: "fallback_url", url }, + } satisfies McpToolResult) + : ({ + content: [ + { + type: "text" as const, + text: "Rendered interactive UI component, but this MCP client cannot display MCP Apps and no Executor fallback URL is configured.", + }, + ], + structuredContent: { + status: "fallback_unavailable", + reason: "mcp_apps_unsupported", + }, + isError: true, + } satisfies McpToolResult), + ); + } + + return Promise.resolve({ + content: [{ type: "text" as const, text: "Rendered interactive UI component." }], + structuredContent: { code }, + } satisfies McpToolResult); + }, + ); + + executeActionTool = registerAppTool( + ctx.server, + "execute-action", + { + description: + "Execute code from the UI shell. Used by interactive components to call tools and run mutations.", + inputSchema: { code: z.string().trim().min(1) }, + _meta: { + ui: { + resourceUri: DYNAMIC_UI_SHELL_RESOURCE_URI, + visibility: ["app"], + }, + }, + }, + ({ code }) => ctx.runToolEffect(ctx.executeCodeFromApp(code)), + ); + + executeActionResumeTool = registerAppTool( + ctx.server, + "execute-action-resume", + { + description: "Resume an interactive UI action after shell-owned user approval.", + inputSchema: { + executionId: z.string().describe("The execution ID from the paused UI action"), + action: z + .enum(["accept", "decline", "cancel"]) + .describe("How to respond to the interaction"), + content: z + .string() + .describe("Optional JSON-encoded response content for form elicitations") + .default("{}"), + }, + _meta: { + ui: { + resourceUri: DYNAMIC_UI_SHELL_RESOURCE_URI, + visibility: ["app"], + }, + }, + }, + ({ executionId, action, content: rawContent }) => + ctx.runToolEffect( + ctx.resumeExecution(executionId, action, ctx.parseJsonContent(rawContent)), + ), + ); + + registerAppResource( + ctx.server, + "Executor Shell", + DYNAMIC_UI_SHELL_RESOURCE_URI, + { mimeType: RESOURCE_MIME_TYPE }, + async () => { + const html = await loadDynamicUiShellHtml(); + return { + contents: [ + { + uri: DYNAMIC_UI_SHELL_RESOURCE_URI, + mimeType: RESOURCE_MIME_TYPE, + text: html, + _meta: { + ui: { + csp: { + connectDomains: [], + resourceDomains: [], + }, + }, + }, + }, + ], + }; + }, + ); + }).pipe(Effect.withSpan("mcp.host.dynamic_ui.register")), + onClientCapabilitiesChanged: ({ clientCapabilities, debugLog }) => { + const uiCap = getUiCapability(clientCapabilities as McpAppsClientCapabilities | undefined); + appsEnabled = Boolean(uiCap?.mimeTypes?.includes(RESOURCE_MIME_TYPE)); + + if (appsEnabled) { + renderUiTool?.enable(); + executeActionTool?.enable(); + executeActionResumeTool?.enable(); + } else { + renderUiTool?.enable(); + executeActionTool?.disable(); + executeActionResumeTool?.disable(); + } + + debugLog("dynamic_ui.visibility", { + appsSupport: uiCap ?? null, + renderUiEnabled: true, + executeActionEnabled: appsEnabled, + }); + }, + }); +}; diff --git a/packages/plugins/dynamic-ui/src/shell-html.ts b/packages/plugins/dynamic-ui/src/shell-html.ts new file mode 100644 index 000000000..62357cf1c --- /dev/null +++ b/packages/plugins/dynamic-ui/src/shell-html.ts @@ -0,0 +1,31 @@ +let shellHtmlCache: string | undefined; + +export const loadDynamicUiShellHtml = async (): Promise => { + if (shellHtmlCache) return shellHtmlCache; + + // oxlint-disable-next-line executor/no-try-catch-or-throw -- boundary: optional prebuilt shell asset is loaded from local filesystem when present + try { + const fs = await import("node:fs/promises"); + const path = await import("node:path"); + const candidates = [ + path.join(import.meta.dirname, "../dist/mcp-app.html"), + path.join(import.meta.dirname, "../../dist/mcp-app.html"), + ]; + + for (const candidate of candidates) { + // oxlint-disable-next-line executor/no-try-catch-or-throw -- boundary: try each possible emitted shell path before falling back + try { + shellHtmlCache = await fs.readFile(candidate, "utf-8"); + return shellHtmlCache; + } catch { + // Try the next candidate path. + } + } + } catch { + // Fall through to the development fallback below. + } + + shellHtmlCache = + "

Shell not built. Run: bun run --cwd packages/plugins/dynamic-ui build:shell

"; + return shellHtmlCache; +}; diff --git a/packages/plugins/dynamic-ui/src/shell/component-runtime.test.ts b/packages/plugins/dynamic-ui/src/shell/component-runtime.test.ts new file mode 100644 index 000000000..56c96fc58 --- /dev/null +++ b/packages/plugins/dynamic-ui/src/shell/component-runtime.test.ts @@ -0,0 +1,53 @@ +import { describe, expect, it } from "@effect/vitest"; + +import { compileJsx, evaluateComponent } from "./component-runtime"; + +describe("generated UI component runtime", () => { + it("accepts export default function components", () => { + const compiled = compileJsx(` + const config = { maxHeight: 500 }; + + export default function App() { + return ok; + } + `); + + const result = evaluateComponent(compiled, {}, () => Promise.resolve(null)); + + expect(compiled).not.toContain("export default"); + expect(result).not.toHaveProperty("error"); + if ("error" in result) return; + expect(typeof result.component).toBe("function"); + expect(result.config).toEqual({ maxHeight: 500 }); + }); + + it("accepts anonymous default exports", () => { + const compiled = compileJsx(` + export default function() { + return ok; + } + `); + + const result = evaluateComponent(compiled, {}, () => Promise.resolve(null)); + + expect(result).not.toHaveProperty("error"); + if ("error" in result) return; + expect(typeof result.component).toBe("function"); + }); + + it("shadows direct fetch attempts with a clear error", () => { + const compiled = compileJsx(` + fetch("https://example.com"); + function App() { + return ; + } + `); + + const result = evaluateComponent(compiled, {}, () => Promise.resolve(null)); + + expect(result).toEqual({ + error: + "Evaluation error: fetch is disabled in generated UI. Use tools.* via useQuery/useMutation.", + }); + }); +}); diff --git a/packages/plugins/dynamic-ui/src/shell/component-runtime.ts b/packages/plugins/dynamic-ui/src/shell/component-runtime.ts new file mode 100644 index 000000000..e8e17b1f4 --- /dev/null +++ b/packages/plugins/dynamic-ui/src/shell/component-runtime.ts @@ -0,0 +1,153 @@ +import React, { + useState, + useEffect, + useRef, + useCallback, + useMemo, + useContext, + Fragment, + createContext, +} from "react"; +import { transform } from "sucrase"; + +import { + mutationOptions, + queryOptions, + skipToken, + useMutation, + useQuery, + useQueryClient, +} from "./hooks"; +import * as Components from "./components"; +import * as QueryHooks from "./hooks"; + +export type EvaluatedComponent = + | { component: React.ComponentType; config: Record } + | { error: string }; + +const createGeneratedCodeRequire = + () => + (specifier: string): unknown => { + if (specifier === "react") return React; + if (specifier === "@tanstack/react-query") return QueryHooks; + if (specifier === "recharts" || specifier === "lucide-react" || specifier === "./components") { + return Components; + } + throw new Error( + `Generated UI cannot import "${specifier}". Everything needed is already in scope; remove the import.`, + ); + }; + +const blockedNetworkPrimitive = (name: string) => + function blockedNetworkPrimitive() { + throw new Error(`${name} is disabled in generated UI. Use tools.* via useQuery/useMutation.`); + }; + +/** Compile JSX source to plain JS using Sucrase. */ +export function compileJsx(code: string): string { + const result = transform(code, { + transforms: ["jsx", "typescript", "imports"], + jsxRuntime: "classic", + production: true, + }); + return result.code; +} + +/** + * Evaluate compiled JS in a scoped context providing React, hooks, + * components, tools proxy, useQuery/useMutation, and Lucide icons. + */ +export function evaluateComponent( + compiled: string, + tools: Record, + run: (code: string) => Promise, +): EvaluatedComponent { + const module = { exports: {} as Record | React.ComponentType }; + const exports = module.exports; + + const scope: Record = { + // React core + React, + useState, + useEffect, + useRef, + useCallback, + useMemo, + useContext, + Fragment, + createContext, + + // Common module globals for resilient generated code evaluation. + module, + exports, + require: createGeneratedCodeRequire(), + + // Defense in depth for direct network attempts. The inner iframe CSP is + // the browser boundary; these shadows produce clearer runtime errors. + fetch: blockedNetworkPrimitive("fetch"), + XMLHttpRequest: blockedNetworkPrimitive("XMLHttpRequest"), + WebSocket: blockedNetworkPrimitive("WebSocket"), + EventSource: blockedNetworkPrimitive("EventSource"), + Worker: blockedNetworkPrimitive("Worker"), + SharedWorker: blockedNetworkPrimitive("SharedWorker"), + + // Data fetching + useQuery, + useMutation, + useQueryClient, + queryOptions, + mutationOptions, + skipToken, + + // Tools proxy + escape hatch + tools, + run, + + // All UI components, icons, chart primitives + ...Components, + }; + + const scopeKeys = Object.keys(scope); + const scopeValues = scopeKeys.map((k) => scope[k]); + + // Execute the compiled code and look for a component + optional config. + // We check well-known names and common module export shapes so generated + // code stays resilient to `export default function App()` and friends. + const wrappedCode = ` + "use strict"; + ${compiled} + var __moduleExports = module && module.exports; + var __defaultExport = + __moduleExports && typeof __moduleExports === "object" && "default" in __moduleExports + ? __moduleExports.default + : exports && exports.default; + var __comp = null; + if (typeof App === "function") __comp = App; + else if (typeof Component === "function") __comp = Component; + else if (typeof Main === "function") __comp = Main; + else if (typeof __defaultExport === "function") __comp = __defaultExport; + else if (typeof __moduleExports === "function") __comp = __moduleExports; + else if (exports && typeof exports.App === "function") __comp = exports.App; + else if (exports && typeof exports.Component === "function") __comp = exports.Component; + else if (exports && typeof exports.Main === "function") __comp = exports.Main; + var __cfg = typeof config === "object" && config !== null ? config : {}; + return { component: __comp, config: __cfg }; + `; + + try { + // eslint-disable-next-line no-new-func + const factory = new Function(...scopeKeys, wrappedCode); + const result = factory(...scopeValues) as { + component: React.ComponentType | null; + config: Record; + }; + if (!result.component) { + return { error: "No component found. Export a function named App." }; + } + return { component: result.component, config: result.config }; + } catch (err) { + const msg = err instanceof Error ? err.message : String(err); + console.error("[executor-shell] Failed to evaluate component:", err); + return { error: `Evaluation error: ${msg}` }; + } +} diff --git a/packages/plugins/dynamic-ui/src/shell/components.ts b/packages/plugins/dynamic-ui/src/shell/components.ts new file mode 100644 index 000000000..d1d4fb192 --- /dev/null +++ b/packages/plugins/dynamic-ui/src/shell/components.ts @@ -0,0 +1,277 @@ +/** + * Barrel export of all UI components available to model-generated React code. + * These are re-exports of the existing shadcn components from @executor-js/react, + * plus Recharts primitives and Lucide icons. + */ + +// --------------------------------------------------------------------------- +// shadcn/ui components +// --------------------------------------------------------------------------- + +// Layout +export { + Card, + CardHeader, + CardTitle, + CardDescription, + CardAction, + CardContent, + CardFooter, +} from "@executor-js/react/components/card"; +export { Separator } from "@executor-js/react/components/separator"; +export { Tabs, TabsList, TabsTrigger, TabsContent } from "@executor-js/react/components/tabs"; +export { + Accordion, + AccordionItem, + AccordionTrigger, + AccordionContent, +} from "@executor-js/react/components/accordion"; +export { ScrollArea, ScrollBar } from "@executor-js/react/components/scroll-area"; + +// Overlay +export { + Dialog, + DialogTrigger, + DialogContent, + DialogHeader, + DialogFooter, + DialogTitle, + DialogDescription, + DialogClose, +} from "@executor-js/react/components/dialog"; +export { + Sheet, + SheetTrigger, + SheetContent, + SheetHeader, + SheetFooter, + SheetTitle, + SheetDescription, + SheetClose, +} from "@executor-js/react/components/sheet"; +export { + Popover, + PopoverTrigger, + PopoverContent, + PopoverAnchor, +} from "@executor-js/react/components/popover"; +export { + Tooltip, + TooltipTrigger, + TooltipContent, + TooltipProvider, +} from "@executor-js/react/components/tooltip"; +export { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuLabel, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, +} from "@executor-js/react/components/dropdown-menu"; + +// Input +export { Button } from "@executor-js/react/components/button"; +export { Input } from "@executor-js/react/components/input"; +export { Textarea } from "@executor-js/react/components/textarea"; +export { Label } from "@executor-js/react/components/label"; +export { + Select, + SelectTrigger, + SelectValue, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, +} from "@executor-js/react/components/select"; +export { Checkbox } from "@executor-js/react/components/checkbox"; +export { RadioGroup, RadioGroupItem } from "@executor-js/react/components/radio-group"; +export { Switch } from "@executor-js/react/components/switch"; +export { Slider } from "@executor-js/react/components/slider"; +export { Toggle } from "@executor-js/react/components/toggle"; +export { ToggleGroup, ToggleGroupItem } from "@executor-js/react/components/toggle-group"; + +// Data display +export { + Table, + TableHeader, + TableBody, + TableFooter, + TableRow, + TableHead, + TableCell, + TableCaption, +} from "@executor-js/react/components/table"; +export { Badge } from "@executor-js/react/components/badge"; +export { Avatar, AvatarImage, AvatarFallback } from "@executor-js/react/components/avatar"; +export { Progress } from "@executor-js/react/components/progress"; +export { Skeleton } from "@executor-js/react/components/skeleton"; + +// Feedback +export { Alert, AlertTitle, AlertDescription } from "@executor-js/react/components/alert"; + +// Charts (shadcn wrappers around Recharts) +export { + ChartContainer, + ChartTooltip, + ChartTooltipContent, + ChartLegend, + ChartLegendContent, + ChartStyle, +} from "@executor-js/react/components/chart"; + +// --------------------------------------------------------------------------- +// Recharts primitives (exposed directly for model use) +// --------------------------------------------------------------------------- + +export { + BarChart, + Bar, + LineChart, + Line, + AreaChart, + Area, + PieChart, + Pie, + Cell, + RadarChart, + Radar, + PolarGrid, + PolarAngleAxis, + PolarRadiusAxis, + RadialBarChart, + RadialBar, + ScatterChart, + Scatter, + ComposedChart, + XAxis, + YAxis, + CartesianGrid, + ResponsiveContainer, + Legend, + ReferenceLine, + ReferenceArea, + Brush, + Funnel, + FunnelChart, + Treemap, +} from "recharts"; + +// --------------------------------------------------------------------------- +// Lucide icons (common subset) +// --------------------------------------------------------------------------- + +export { + Plus, + Minus, + Check, + X, + ChevronDown, + ChevronUp, + ChevronLeft, + ChevronRight, + ChevronsUpDown, + Search, + Loader2, + AlertCircle, + AlertTriangle, + Info, + ExternalLink, + Copy, + Trash2, + Edit, + Settings, + User, + Users, + Mail, + Calendar, + Clock, + ArrowUp, + ArrowDown, + ArrowLeft, + ArrowRight, + ArrowUpRight, + Download, + Upload, + File, + FileText, + Folder, + FolderOpen, + Image, + Link, + Globe, + Home, + Star, + Heart, + Eye, + EyeOff, + Lock, + Unlock, + RefreshCw, + RotateCcw, + Filter, + SortAsc, + SortDesc, + MoreHorizontal, + MoreVertical, + Menu, + Grip, + GripVertical, + Code, + Terminal, + Database, + Server, + Cpu, + Zap, + Activity, + TrendingUp, + TrendingDown, + BarChart3, + PieChart as PieChartIcon, + GitBranch, + GitCommit, + GitPullRequest, + MessageSquare, + Send, + Bookmark, + Tag, + Hash, + AtSign, + Paperclip, + MapPin, + Phone, + Video, + Mic, + Volume2, + VolumeX, + Play, + Pause, + Square, + Circle, + Triangle, + Hexagon, + Box, + Package, + Shield, + Key, + Wifi, + WifiOff, + Battery, + Sun, + Moon, + CloudRain, + Thermometer, +} from "lucide-react"; + +// --------------------------------------------------------------------------- +// Utility +// --------------------------------------------------------------------------- + +export { cn } from "@executor-js/react/lib/utils"; diff --git a/packages/plugins/dynamic-ui/src/shell/globals.css b/packages/plugins/dynamic-ui/src/shell/globals.css new file mode 100644 index 000000000..9fb13129a --- /dev/null +++ b/packages/plugins/dynamic-ui/src/shell/globals.css @@ -0,0 +1,147 @@ +@import "tailwindcss"; + +@custom-variant dark (&:is(.dark *)); + +@source "./**/*.{ts,tsx}"; +@source "../../../../react/src/components/**/*.{ts,tsx}"; + +@theme inline { + --font-sans: ui-sans-serif, system-ui, -apple-system, sans-serif; + --font-mono: ui-monospace, monospace; + + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + + --radius-sm: calc(var(--radius) * 0.6); + --radius-md: calc(var(--radius) * 0.8); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) * 1.4); +} + +/* ——— Light theme ——— */ +:root { + color-scheme: light dark; + --radius: 0.625rem; + + --background: oklch(0.985 0.002 260); + --foreground: oklch(0.145 0.005 260); + --card: oklch(0.99 0.001 260); + --card-foreground: oklch(0.145 0.005 260); + --popover: oklch(0.99 0.001 260); + --popover-foreground: oklch(0.145 0.005 260); + --primary: oklch(0.55 0.17 175); + --primary-foreground: oklch(0.98 0.005 175); + --secondary: oklch(0.94 0.005 260); + --secondary-foreground: oklch(0.32 0.008 260); + --muted: oklch(0.955 0.004 260); + --muted-foreground: oklch(0.5 0.01 250); + --accent: oklch(0.94 0.006 260); + --accent-foreground: oklch(0.145 0.005 260); + --destructive: oklch(0.55 0.22 25); + --border: oklch(0.88 0.006 260); + --input: oklch(0.88 0.006 260); + --ring: oklch(0.55 0.17 175); + + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.714); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); +} + +/* ——— Dark theme ——— */ +@media (prefers-color-scheme: dark) { + :root { + --background: oklch(0.115 0.005 260); + --foreground: oklch(0.9 0.008 250); + --card: oklch(0.145 0.005 260); + --card-foreground: oklch(0.9 0.008 250); + --popover: oklch(0.145 0.005 260); + --popover-foreground: oklch(0.9 0.008 250); + --primary: oklch(0.72 0.15 175); + --primary-foreground: oklch(0.12 0.01 175); + --secondary: oklch(0.195 0.007 260); + --secondary-foreground: oklch(0.78 0.008 250); + --muted: oklch(0.175 0.005 260); + --muted-foreground: oklch(0.65 0.01 250); + --accent: oklch(0.195 0.008 260); + --accent-foreground: oklch(0.9 0.008 250); + --destructive: oklch(0.62 0.22 25); + --border: oklch(0.28 0.007 260); + --input: oklch(0.195 0.007 260); + --ring: oklch(0.72 0.15 175); + + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + } +} + +.dark { + --background: oklch(0.115 0.005 260); + --foreground: oklch(0.9 0.008 250); + --card: oklch(0.145 0.005 260); + --card-foreground: oklch(0.9 0.008 250); + --popover: oklch(0.145 0.005 260); + --popover-foreground: oklch(0.9 0.008 250); + --primary: oklch(0.72 0.15 175); + --primary-foreground: oklch(0.12 0.01 175); + --secondary: oklch(0.195 0.007 260); + --secondary-foreground: oklch(0.78 0.008 250); + --muted: oklch(0.175 0.005 260); + --muted-foreground: oklch(0.65 0.01 250); + --accent: oklch(0.195 0.008 260); + --accent-foreground: oklch(0.9 0.008 250); + --destructive: oklch(0.62 0.22 25); + --border: oklch(0.28 0.007 260); + --input: oklch(0.195 0.007 260); + --ring: oklch(0.72 0.15 175); + + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); +} + +@layer base { + * { + @apply border-border; + } + + html, + body, + #root { + min-height: 100%; + margin: 0; + padding: 0; + } + + body { + @apply bg-background font-sans text-foreground antialiased; + } +} diff --git a/packages/plugins/dynamic-ui/src/shell/hooks.ts b/packages/plugins/dynamic-ui/src/shell/hooks.ts new file mode 100644 index 000000000..873a64e9f --- /dev/null +++ b/packages/plugins/dynamic-ui/src/shell/hooks.ts @@ -0,0 +1,114 @@ +import { useRef } from "react"; +import { + QueryClient, + QueryClientProvider, + mutationOptions, + queryOptions, + skipToken, + useMutation as useTanStackMutation, + useQuery as useTanStackQuery, + useQueryClient as useTanStackQueryClient, + type QueryClient as QueryClientType, + type UseMutationOptions, + type UseMutationResult, + type UseQueryOptions, + type UseQueryResult, +} from "@tanstack/react-query"; + +export { QueryClient, QueryClientProvider, mutationOptions, queryOptions, skipToken }; + +const invalidationScopes: Array>> = []; + +const trackInvalidation = (promise: Promise) => { + for (const scope of invalidationScopes) { + scope.push(promise); + } + return promise; +}; + +const trackMutationCallback = async (callback: () => T | Promise): Promise => { + const scope: Array> = []; + invalidationScopes.push(scope); + try { + const result = await callback(); + await Promise.allSettled(scope); + return result; + } finally { + invalidationScopes.pop(); + } +}; + +const wrapQueryClient = (client: QueryClientType): QueryClientType => + new Proxy(client, { + get(target, prop, receiver) { + const value = Reflect.get(target, prop, receiver) as unknown; + if (prop === "invalidateQueries" && typeof value === "function") { + return (...args: unknown[]) => + trackInvalidation( + (value as (...args: unknown[]) => Promise).apply(target, args), + ); + } + return typeof value === "function" ? value.bind(target) : value; + }, + }) as QueryClientType; + +export const useQueryClient = (queryClient?: QueryClientType): QueryClientType => { + const client = useTanStackQueryClient(queryClient); + const wrappedRef = useRef<{ client: QueryClientType; wrapped: QueryClientType } | null>(null); + + if (wrappedRef.current?.client !== client) { + wrappedRef.current = { client, wrapped: wrapQueryClient(client) }; + } + + return wrappedRef.current.wrapped; +}; + +const wrapMutationOptions = ( + options: UseMutationOptions, +): UseMutationOptions => ({ + ...options, + onSuccess: options.onSuccess + ? (...args: Parameters>) => + trackMutationCallback(() => options.onSuccess?.(...args)) + : undefined, + onError: options.onError + ? (...args: Parameters>) => + trackMutationCallback(() => options.onError?.(...args)) + : undefined, + onSettled: options.onSettled + ? (...args: Parameters>) => + trackMutationCallback(() => options.onSettled?.(...args)) + : undefined, +}); + +export function useQuery< + TQueryFnData, + TError = Error, + TData = TQueryFnData, + TQueryKey extends readonly unknown[] = readonly unknown[], +>( + options: UseQueryOptions, + queryClient?: QueryClientType, +): UseQueryResult; +export function useQuery< + TQueryFnData, + TError = Error, + TData = TQueryFnData, + TQueryKey extends readonly unknown[] = readonly unknown[], +>( + options: UseQueryOptions, + queryClient?: QueryClientType, +): UseQueryResult { + return useTanStackQuery(options, queryClient); +} + +export function useMutation( + options: UseMutationOptions, + queryClient?: QueryClientType, +): UseMutationResult; +export function useMutation( + options: UseMutationOptions, + queryClient?: QueryClientType, +): UseMutationResult { + return useTanStackMutation(wrapMutationOptions(options), queryClient); +} diff --git a/packages/plugins/dynamic-ui/src/shell/inner-renderer-source.d.ts b/packages/plugins/dynamic-ui/src/shell/inner-renderer-source.d.ts new file mode 100644 index 000000000..8dce7ba81 --- /dev/null +++ b/packages/plugins/dynamic-ui/src/shell/inner-renderer-source.d.ts @@ -0,0 +1,4 @@ +declare module "virtual:executor-inner-renderer" { + const source: string; + export default source; +} diff --git a/packages/plugins/dynamic-ui/src/shell/inner-renderer.tsx b/packages/plugins/dynamic-ui/src/shell/inner-renderer.tsx new file mode 100644 index 000000000..37c5c3a15 --- /dev/null +++ b/packages/plugins/dynamic-ui/src/shell/inner-renderer.tsx @@ -0,0 +1,309 @@ +import React, { type ReactNode } from "react"; +import { createRoot } from "react-dom/client"; +import { + QueryClient, + QueryClientProvider, + mutationOptions, + queryOptions, + skipToken, + type MutationKey, + type QueryFilters, + type QueryKey, + type UseMutationOptions, + type UseQueryOptions, +} from "@tanstack/react-query"; + +import { compileJsx, evaluateComponent } from "./component-runtime"; +import * as Components from "./components"; + +type ParentRequestPayload = + | { type: "executor.toolCall"; path: string[]; args: unknown[] } + | { type: "executor.run"; code: string }; + +type ParentResponse = { + type: "executor.response"; + requestId: number; + token: string; + ok: boolean; + value?: unknown; + error?: string; +}; + +type RenderMessage = { + type: "executor.render"; + token: string; + code: string; + theme?: unknown; +}; + +type ThemeMessage = { + type: "executor.theme"; + token: string; + theme?: unknown; +}; + +type InboundMessage = ParentResponse | RenderMessage | ThemeMessage; + +const token = document.querySelector( + "meta[name='executor-render-token']", +)?.content; + +if (!token) { + throw new Error("Missing renderer token."); +} + +const pending = new Map< + number, + { + resolve: (value: unknown) => void; + reject: (reason: Error) => void; + } +>(); + +let nextRequestId = 0; +let root: ReturnType | null = null; + +const blockedNetwork = (name: string) => () => { + throw new Error(`${name} is disabled in generated UI. Use tools.* via useQuery/useMutation.`); +}; + +Object.assign(globalThis, { + fetch: blockedNetwork("fetch"), + XMLHttpRequest: blockedNetwork("XMLHttpRequest"), + WebSocket: blockedNetwork("WebSocket"), + EventSource: blockedNetwork("EventSource"), + Worker: blockedNetwork("Worker"), + SharedWorker: blockedNetwork("SharedWorker"), +}); + +const sendParent = (message: Record) => { + window.parent.postMessage({ ...message, token }, "*"); +}; + +const requestParent = (message: ParentRequestPayload): Promise => { + const requestId = ++nextRequestId; + return new Promise((resolve, reject) => { + pending.set(requestId, { resolve, reject }); + sendParent({ ...message, requestId }); + }); +}; + +function makeQueryClient(): QueryClient { + return new QueryClient({ + defaultOptions: { + queries: { + retry: false, + refetchOnWindowFocus: false, + }, + mutations: { + retry: false, + }, + }, + }); +} + +let queryClient: QueryClient = makeQueryClient(); + +const toolQueryKey = (path: readonly string[], input?: unknown): QueryKey => [ + "executor-tool", + path, + { input, type: "query" }, +]; + +const toolPathKey = (path: readonly string[]): QueryKey => ["executor-tool", path]; + +const toolMutationKey = (path: readonly string[]): MutationKey => [ + "executor-tool", + path, + { type: "mutation" }, +]; + +const queryFilter = ( + path: readonly string[], + input?: unknown, + filters?: Omit, +): QueryFilters => ({ + ...filters, + queryKey: toolQueryKey(path, input), +}); + +const pathFilter = ( + path: readonly string[], + filters?: Omit, +): QueryFilters => ({ + ...filters, + queryKey: toolPathKey(path), +}); + +const createToolsProxy = (): Record => { + const nest = (path: string[]): unknown => + new Proxy(function () {}, { + get(_target, key: string | symbol) { + if (key === "then" || key === "toJSON" || key === Symbol.toPrimitive) return undefined; + if (typeof key !== "string") return undefined; + if (key === "queryOptions") { + return (input?: unknown, options?: Omit) => + queryOptions({ + ...options, + queryKey: toolQueryKey(path, input === skipToken ? undefined : input), + queryFn: + input === skipToken + ? skipToken + : () => requestParent({ type: "executor.toolCall", path, args: [input ?? {}] }), + }); + } + if (key === "queryKey") { + return (input?: unknown) => toolQueryKey(path, input); + } + if (key === "queryFilter") { + return (input?: unknown, filters?: Omit) => + queryFilter(path, input, filters); + } + if (key === "pathKey") { + return () => toolPathKey(path); + } + if (key === "pathFilter") { + return (filters?: Omit) => pathFilter(path, filters); + } + if (key === "mutationOptions") { + return (options?: Omit) => + mutationOptions({ + ...options, + mutationKey: toolMutationKey(path), + mutationFn: (input?: unknown) => + requestParent({ type: "executor.toolCall", path, args: [input ?? {}] }), + }); + } + if (key === "mutationKey") { + return () => toolMutationKey(path); + } + return nest([...path, key]); + }, + apply(_target, _thisArg, args: unknown[]) { + return requestParent({ type: "executor.toolCall", path, args }); + }, + }); + + return nest([]) as Record; +}; + +const run = (code: string): Promise => requestParent({ type: "executor.run", code }); + +const applyTheme = (theme: unknown) => { + if (theme === "dark" || theme === "light") { + document.documentElement.classList.toggle("dark", theme === "dark"); + } +}; + +const renderNode = (node: ReactNode) => { + const mount = document.getElementById("root"); + if (!mount) return; + root ??= createRoot(mount); + root.render({node}); +}; + +const renderError = (title: string, message: string) => { + renderNode( +
+ + + {title} + + {message} + + +
, + ); + sendParent({ type: "executor.renderer.error", message }); +}; + +class ErrorBoundary extends React.Component<{ children: ReactNode }, { error: Error | null }> { + constructor(props: { children: ReactNode }) { + super(props); + this.state = { error: null }; + } + + static getDerivedStateFromError(error: Error) { + return { error }; + } + + override render() { + if (this.state.error) { + return ( + + + Runtime Error + + {this.state.error.message} + {this.state.error.stack && ( + 
{this.state.error.stack}
+ )} + + + ); + } + return this.props.children; + } +} + +const renderGeneratedCode = (code: string) => { + try { + const compiled = compileJsx(code); + const evalResult = evaluateComponent(compiled, createToolsProxy(), run); + + if ("error" in evalResult) { + renderError("Error", evalResult.error); + return; + } + + sendParent({ type: "executor.renderer.config", config: evalResult.config }); + const Component = evalResult.component; + queryClient = makeQueryClient(); + renderNode( + + + + + , + ); + } catch (err) { + renderError("Compilation Error", err instanceof Error ? err.message : String(err)); + } +}; + +window.addEventListener("message", (event: MessageEvent) => { + const data = event.data; + if (!data || typeof data !== "object" || data.token !== token) return; + + if (data.type === "executor.response") { + const entry = pending.get(data.requestId); + if (!entry) return; + pending.delete(data.requestId); + if (data.ok) { + entry.resolve(data.value); + } else { + entry.reject(new Error(data.error ?? "Renderer request failed")); + } + return; + } + + if (data.type === "executor.theme") { + applyTheme(data.theme); + return; + } + + if (data.type === "executor.render") { + applyTheme(data.theme); + renderGeneratedCode(data.code); + } +}); + +const resizeObserver = new ResizeObserver(([entry]) => { + sendParent({ + type: "executor.renderer.size", + height: Math.ceil(entry.contentRect.height), + }); +}); + +resizeObserver.observe(document.body); +sendParent({ type: "executor.renderer.ready" }); diff --git a/packages/plugins/dynamic-ui/src/shell/mcp-app.browser.test.ts b/packages/plugins/dynamic-ui/src/shell/mcp-app.browser.test.ts new file mode 100644 index 000000000..e78fe18db --- /dev/null +++ b/packages/plugins/dynamic-ui/src/shell/mcp-app.browser.test.ts @@ -0,0 +1,1449 @@ +import { createServer, type IncomingMessage, type Server } from "node:http"; +import type { AddressInfo } from "node:net"; +import { dirname, resolve } from "node:path"; +import { fileURLToPath } from "node:url"; + +import { afterAll, beforeAll, describe, expect, it } from "@effect/vitest"; +import { Effect, Schema } from "effect"; +import { Client } from "@modelcontextprotocol/sdk/client/index.js"; +import { InMemoryTransport } from "@modelcontextprotocol/sdk/inMemory.js"; +import { EXTENSION_ID, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server"; +import type { ClientCapabilities } from "@modelcontextprotocol/sdk/types.js"; +import { FormElicitation, ToolId, createExecutor, definePlugin, tool } from "@executor-js/sdk"; +import { makeTestConfig } from "@executor-js/sdk/testing"; +import { + createExecutionEngine, + type ExecutionEngine, + type ExecutionResult, +} from "@executor-js/execution"; +import { makeQuickJsExecutor } from "@executor-js/runtime-quickjs"; +import { dynamicUiPlugin } from "@executor-js/plugin-dynamic-ui"; +import { chromium, type Browser, type Frame, type Page } from "playwright-core"; +import { createServer as createViteServer } from "vite"; +import type * as Cause from "effect/Cause"; + +import { createExecutorMcpServer } from "@executor-js/host-mcp"; + +type ShellServer = { + readonly url: string; + readonly close: () => Promise; +}; + +type HostServer = ShellServer; + +type OpenApiServer = { + readonly specUrl: string; + readonly postRequests: string[]; + readonly close: () => Promise; +}; + +type McpHarness = { + readonly callTool: (params: HostToolCall) => Promise; + readonly close: () => Promise; +}; + +type HostToolCall = { + readonly name?: string; + readonly arguments?: Record; +}; + +type HostState = { + readonly initialized: boolean; + readonly toolCalls: HostToolCall[]; + readonly resumeCalls: HostToolCall[]; +}; + +type BrowserHostWindow = Window & { + __mcpHostState: HostState; + __sendGeneratedUi: (code: string) => void; +}; + +type AppsClientCapabilities = ClientCapabilities & { + readonly extensions: Record; +}; + +const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), "../.."); +const chromeExecutablePath = + process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH ?? "/usr/bin/google-chrome"; +const formToolId = ToolId.make("test.form"); + +const EmptySchema = Schema.toStandardSchemaV1(Schema.toStandardJSONSchemaV1(Schema.Struct({}))); +const CreateItemSchema = Schema.toStandardSchemaV1( + Schema.toStandardJSONSchemaV1( + Schema.Struct({ + body: Schema.Struct({ name: Schema.String }), + }), + ), +); +const DomainSchema = Schema.toStandardSchemaV1( + Schema.toStandardJSONSchemaV1(Schema.Struct({ domain: Schema.String })), +); +const UpdateAutoRenewSchema = Schema.toStandardSchemaV1( + Schema.toStandardJSONSchemaV1( + Schema.Struct({ + domain: Schema.String, + body: Schema.Struct({ autoRenew: Schema.Boolean }), + }), + ), +); + +const inventoryPlugin = (postRequests: string[]) => + definePlugin(() => ({ + id: "inventory-test" as const, + storage: () => ({}), + staticSources: () => { + let autoRenew = false; + return [ + { + id: "inventory.items", + kind: "in-memory", + name: "Inventory Items", + tools: [ + tool({ + name: "listItems", + description: "List inventory items", + inputSchema: EmptySchema, + execute: () => Effect.succeed([{ name: "Widget" }]), + }), + tool({ + name: "createItem", + description: "Create an inventory item", + annotations: { requiresApproval: true } as const, + inputSchema: CreateItemSchema, + execute: (args) => + Effect.sync(() => { + postRequests.push(JSON.stringify({ name: args.body.name })); + return { name: args.body.name, created: true }; + }), + }), + ], + }, + { + id: "inventory.domains", + kind: "in-memory", + name: "Inventory Domains", + tools: [ + tool({ + name: "getDomain", + description: "Get domain settings", + inputSchema: DomainSchema, + execute: (args) => Effect.succeed({ domain: args.domain, renew: autoRenew }), + }), + tool({ + name: "updateDomainAutoRenew", + description: "Update domain auto-renew", + annotations: { requiresApproval: true } as const, + inputSchema: UpdateAutoRenewSchema, + execute: (args) => + Effect.sync(() => { + autoRenew = args.body.autoRenew; + postRequests.push(JSON.stringify({ autoRenew })); + return { domain: args.domain, renew: autoRenew }; + }), + }), + ], + }, + ]; + }, + }))(); + +const appsWithoutElicitationCapabilities: AppsClientCapabilities = { + extensions: { [EXTENSION_ID]: { mimeTypes: [RESOURCE_MIME_TYPE] } }, +}; + +const networkPrimitives = [ + "fetch", + "XMLHttpRequest", + "WebSocket", + "EventSource", + "Worker", + "SharedWorker", +] as const; + +const generatedDataCode = ` +const primitiveNames = ${JSON.stringify(networkPrimitives)}; +const blockedMessages = primitiveNames.map((name) => { + try { + globalThis[name]("https://example.com/should-not-load"); + return name + ":allowed"; + } catch (err) { + return name + ":" + (err instanceof Error ? err.message : String(err)); + } +}); + +function App() { + const { data, error, isLoading } = useQuery( + tools.inventory.items.listItems.queryOptions({}) + ); + const items = data?.ok ? data.data : data; + return ( + + +
{isLoading ? "loading" : error ? error.message : items?.[0]?.name}
+ 
{blockedMessages.join("\\n")}
+ + + ); +} +`; + +const generatedStaticCode = ` +function App() { + return ( + + +
ready
+ + + ); +} +`; + +const generatedApprovalCode = ` +function App() { + const [status, setStatus] = useState("idle"); + const createItem = useMutation( + tools.inventory.items.createItem.mutationOptions({ + onSuccess: (result) => { + const created = result?.ok ? result.data : result; + setStatus(created.name + ":" + created.created); + }, + onError: (error) => setStatus(error.message), + }) + ); + const ask = async () => { + setStatus("pending"); + await createItem.mutateAsync({ body: { name: "Approved Widget" } }); + }; + + return ( + + + +
{String(createItem.isPending)}
+
{status}
+ + + ); +} +`; + +const generatedAutoMutationCode = ` +function App() { + const [status, setStatus] = useState("idle"); + const createItem = useMutation( + tools.inventory.items.createItem.mutationOptions({ + onSuccess: (result) => { + const created = result?.ok ? result.data : result; + setStatus(created.name + ":" + created.created); + }, + onError: (error) => setStatus(error.message), + }) + ); + + useEffect(() => { + createItem.mutate({ body: { name: "Mount Widget" } }); + }, []); + + return ( + + +
{status}
+ + + ); +} +`; + +const generatedEscapeAttemptCode = ` +const escapeResults = []; + +try { + escapeResults.push("popup:" + String(window.open("https://example.com/popup") === null)); +} catch (err) { + escapeResults.push("popup:" + (err instanceof Error ? err.name : String(err))); +} + +try { + const form = document.createElement("form"); + form.method = "POST"; + form.action = "https://example.com/form"; + form.target = "_blank"; + document.body.appendChild(form); + form.submit(); + escapeResults.push("form:submitted"); +} catch (err) { + escapeResults.push("form:" + (err instanceof Error ? err.name : String(err))); +} + +try { + const frame = document.createElement("iframe"); + frame.src = "https://example.com/frame"; + document.body.appendChild(frame); + escapeResults.push("iframe:" + String(frame.contentWindow === null)); +} catch (err) { + escapeResults.push("iframe:" + (err instanceof Error ? err.name : String(err))); +} + +function App() { + return ( + + + 
{escapeResults.join("\\n")}
+ + + ); +} +`; + +const generatedSchemaApprovalCode = ` +function App() { + const [status, setStatus] = useState("idle"); + const requestDetails = useMutation( + tools.profile.submit.mutationOptions({ + onSuccess: (result) => { + setStatus(JSON.stringify(result)); + }, + onError: (error) => setStatus(error.message), + }) + ); + + return ( + + + +
{status}
+ + + ); +} +`; + +const generatedTanstackQueryCode = ` +function App() { + const queryClient = useQueryClient(); + const domainArgs = { domain: "openexecutor.com" }; + const domainQuery = useQuery(tools.inventory.domains.getDomain.queryOptions(domainArgs)); + const updateAutoRenew = useMutation( + tools.inventory.domains.updateDomainAutoRenew.mutationOptions({ + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: tools.inventory.domains.getDomain.queryKey(domainArgs), + }); + }, + }) + ); + + const domain = domainQuery.data?.ok ? domainQuery.data.data : domainQuery.data; + const autoRenew = domain?.renew ?? false; + + return ( + + +
+ {domainQuery.isLoading ? "loading" : String(autoRenew)} +
+
{String(updateAutoRenew.isPending)}
+
+ {updateAutoRenew.isSuccess + ? "Auto-renew " + (autoRenew ? "enabled" : "disabled") + " successfully" + : ""} +
+ + + + ); +} +`; + +const createHostHtml = (shellUrl: string) => ` + + + + MCP Apps Browser Harness + + + + + +`; + +const startShellServer = async (): Promise => { + const server = await createViteServer({ + configFile: resolve(packageRoot, "vite.config.shell.ts"), + clearScreen: false, + logLevel: "error", + server: { + host: "127.0.0.1", + port: 0, + }, + }); + + await server.listen(); + const url = server.resolvedUrls?.local[0]; + if (!url) { + throw new Error("Vite did not report a local shell URL."); + } + + return { + url: url.replace(/\/$/, ""), + close: () => server.close(), + }; +}; + +const readBody = (request: IncomingMessage): Promise => + new Promise((resolveBody, rejectBody) => { + const chunks: Buffer[] = []; + request.on("data", (chunk: Buffer | string) => { + chunks.push(Buffer.from(chunk)); + }); + request.on("end", () => resolveBody(Buffer.concat(chunks).toString("utf8"))); + request.on("error", rejectBody); + }); + +const startOpenApiServer = (): Promise => + new Promise((resolveServer, rejectServer) => { + let baseUrl = ""; + let domainAutoRenew = false; + let nextDomainGetDelayMs = 0; + const postRequests: string[] = []; + + const server: Server = createServer(async (request, response) => { + if (request.method === "GET" && request.url === "/openapi.json") { + response.statusCode = 200; + response.setHeader("content-type", "application/json"); + response.end( + JSON.stringify({ + openapi: "3.0.0", + info: { title: "Inventory", version: "1.0.0" }, + servers: [{ url: baseUrl }], + paths: { + "/items": { + get: { + operationId: "listItems", + responses: { + "200": { + description: "Inventory items", + content: { + "application/json": { + schema: { + type: "array", + items: { $ref: "#/components/schemas/Item" }, + }, + }, + }, + }, + }, + }, + post: { + operationId: "createItem", + requestBody: { + required: true, + content: { + "application/json": { + schema: { $ref: "#/components/schemas/CreateItem" }, + }, + }, + }, + responses: { + "200": { + description: "Created item", + content: { + "application/json": { + schema: { $ref: "#/components/schemas/CreatedItem" }, + }, + }, + }, + }, + }, + }, + "/domains/{domain}": { + get: { + operationId: "getDomain", + parameters: [ + { + name: "domain", + in: "path", + required: true, + schema: { type: "string" }, + }, + ], + responses: { + "200": { + description: "Domain", + content: { + "application/json": { + schema: { $ref: "#/components/schemas/Domain" }, + }, + }, + }, + }, + }, + }, + "/domains/{domain}/auto-renew": { + post: { + operationId: "updateDomainAutoRenew", + parameters: [ + { + name: "domain", + in: "path", + required: true, + schema: { type: "string" }, + }, + ], + requestBody: { + required: true, + content: { + "application/json": { + schema: { $ref: "#/components/schemas/AutoRenewInput" }, + }, + }, + }, + responses: { + "200": { + description: "Updated domain", + content: { + "application/json": { + schema: { $ref: "#/components/schemas/Domain" }, + }, + }, + }, + }, + }, + }, + }, + components: { + schemas: { + AutoRenewInput: { + type: "object", + required: ["autoRenew"], + properties: { + autoRenew: { type: "boolean" }, + }, + }, + Domain: { + type: "object", + required: ["domain", "renew"], + properties: { + domain: { type: "string" }, + renew: { type: "boolean" }, + }, + }, + Item: { + type: "object", + required: ["id", "name"], + properties: { + id: { type: "integer" }, + name: { type: "string" }, + }, + }, + CreateItem: { + type: "object", + required: ["name"], + properties: { + name: { type: "string" }, + }, + }, + CreatedItem: { + type: "object", + required: ["id", "name", "created"], + properties: { + id: { type: "integer" }, + name: { type: "string" }, + created: { type: "boolean" }, + }, + }, + }, + }, + }), + ); + return; + } + + if (request.method === "GET" && request.url === "/items") { + response.statusCode = 200; + response.setHeader("content-type", "application/json"); + response.end(JSON.stringify([{ id: 1, name: "Seed Widget" }])); + return; + } + + if (request.method === "GET" && request.url?.startsWith("/domains/")) { + const domain = decodeURIComponent(request.url.slice("/domains/".length)); + if (!domain.includes("/")) { + const delayMs = nextDomainGetDelayMs; + nextDomainGetDelayMs = 0; + if (delayMs > 0) { + await new Promise((resolveDelay) => setTimeout(resolveDelay, delayMs)); + } + response.statusCode = 200; + response.setHeader("content-type", "application/json"); + response.end(JSON.stringify({ domain, renew: domainAutoRenew })); + return; + } + } + + if (request.method === "POST" && request.url === "/items") { + const body = await readBody(request); + postRequests.push(body); + const parsed = JSON.parse(body) as { name?: unknown }; + response.statusCode = 200; + response.setHeader("content-type", "application/json"); + response.end( + JSON.stringify({ + id: 2, + name: typeof parsed.name === "string" ? parsed.name : "Unnamed", + created: true, + }), + ); + return; + } + + if ( + request.method === "POST" && + request.url?.startsWith("/domains/") && + request.url.endsWith("/auto-renew") + ) { + const body = await readBody(request); + postRequests.push(body); + const parsed = JSON.parse(body) as { autoRenew?: unknown }; + domainAutoRenew = parsed.autoRenew === true; + nextDomainGetDelayMs = 300; + const domainPath = request.url.slice( + "/domains/".length, + request.url.length - "/auto-renew".length, + ); + response.statusCode = 200; + response.setHeader("content-type", "application/json"); + response.end( + JSON.stringify({ + domain: decodeURIComponent(domainPath), + renew: domainAutoRenew, + }), + ); + return; + } + + response.statusCode = 404; + response.end("not found"); + }); + + server.once("error", rejectServer); + server.listen(0, "127.0.0.1", () => { + server.off("error", rejectServer); + const address = server.address(); + if (!address || typeof address === "string") { + rejectServer(new Error("Failed to resolve OpenAPI server address.")); + return; + } + + const { port } = address as AddressInfo; + baseUrl = `http://127.0.0.1:${port}`; + resolveServer({ + specUrl: `${baseUrl}/openapi.json`, + postRequests, + close: () => + new Promise((resolveClose, rejectClose) => { + server.close((err) => (err ? rejectClose(err) : resolveClose())); + }), + }); + }); + }); + +const makePausedResult = ( + id: string, + request: ReturnType, +): ExecutionResult => ({ + status: "paused", + execution: { id, elicitationContext: { toolId: formToolId, args: {}, request } }, +}); + +const startMcpHarnessForEngine = async ( + engine: ExecutionEngine, +): Promise => { + const mcpServer = await Effect.runPromise( + createExecutorMcpServer({ + engine, + plugins: [dynamicUiPlugin()], + }), + ); + const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair(); + const client = new Client( + { name: "browser-harness", version: "1.0.0" }, + { capabilities: appsWithoutElicitationCapabilities }, + ); + + await mcpServer.connect(serverTransport); + await client.connect(clientTransport); + + return { + callTool: async (params) => { + if (!params.name) { + throw new Error("Missing MCP tool name."); + } + return client.callTool({ + name: params.name, + arguments: params.arguments ?? {}, + }); + }, + close: async () => { + await clientTransport.close(); + await serverTransport.close(); + }, + }; +}; + +const startMcpHarness = async (openApi: OpenApiServer): Promise => { + const executor = await Effect.runPromise( + createExecutor(makeTestConfig({ plugins: [inventoryPlugin(openApi.postRequests)] })), + ); + + const engine = createExecutionEngine({ + executor, + codeExecutor: makeQuickJsExecutor({ + timeoutMs: 5_000, + memoryLimitBytes: 32 * 1024 * 1024, + }), + }); + + return startMcpHarnessForEngine(engine); +}; + +const startSchemaElicitationMcpHarness = (): Promise => + startMcpHarnessForEngine({ + getDescription: Effect.succeed("schema elicitation test executor"), + execute: () => Effect.succeed({ result: null }), + executeWithPause: () => + Effect.succeed( + makePausedResult( + "schema_exec", + FormElicitation.make({ + message: "Provide approval details", + requestedSchema: { + type: "object", + required: ["name", "count", "priority", "tags"], + properties: { + name: { + type: "string", + title: "Display name", + minLength: 2, + description: "Human-readable name to submit.", + }, + count: { + type: "integer", + title: "Count", + minimum: 1, + default: 2, + }, + priority: { + type: "string", + title: "Priority", + enum: ["low", "high"], + enumNames: ["Low", "High"], + }, + notify: { + type: "boolean", + title: "Notify", + default: false, + }, + tags: { + type: "array", + title: "Tags", + minItems: 1, + items: { + enum: ["alpha", "beta"], + enumNames: ["Alpha", "Beta"], + }, + }, + }, + }, + }), + ), + ), + getPausedExecution: () => Effect.succeed(null), + resume: (_executionId, response) => + Effect.succeed({ + status: "completed", + result: { result: response.content ?? {} }, + }), + }); + +const startHostServer = (shellUrl: string, mcp: McpHarness): Promise => + new Promise((resolveServer, rejectServer) => { + const html = createHostHtml(shellUrl); + const server: Server = createServer(async (request, response) => { + if (request.method === "POST" && request.url === "/tools/call") { + try { + const body = await readBody(request); + const params = JSON.parse(body) as HostToolCall; + const result = await mcp.callTool(params); + response.statusCode = 200; + response.setHeader("content-type", "application/json"); + response.end(JSON.stringify(result)); + } catch (err) { + response.statusCode = 500; + response.setHeader("content-type", "application/json"); + response.end( + JSON.stringify({ + content: [ + { + type: "text", + text: err instanceof Error ? err.message : String(err), + }, + ], + isError: true, + }), + ); + } + return; + } + + if (request.method !== "GET" || request.url !== "/") { + response.statusCode = 404; + response.end("not found"); + return; + } + + response.statusCode = 200; + response.setHeader("content-type", "text/html; charset=utf-8"); + response.end(html); + }); + + server.once("error", rejectServer); + server.listen(0, "127.0.0.1", () => { + server.off("error", rejectServer); + const address = server.address(); + if (!address || typeof address === "string") { + rejectServer(new Error("Failed to resolve host server address.")); + return; + } + + const { port } = address as AddressInfo; + resolveServer({ + url: `http://127.0.0.1:${port}`, + close: () => + new Promise((resolveClose, rejectClose) => { + server.close((err) => (err ? rejectClose(err) : resolveClose())); + }), + }); + }); + }); + +const waitForValue = async ( + page: Page, + read: () => T | undefined, + label: string, +): Promise => { + const deadline = Date.now() + 10_000; + while (Date.now() < deadline) { + const value = read(); + if (value !== undefined) return value; + await page.waitForTimeout(50); + } + throw new Error(`Timed out waiting for ${label}.`); +}; + +const waitForShellFrame = (page: Page): Promise => + waitForValue( + page, + () => page.frames().find((frame) => frame.url().includes("/mcp-app.html")), + "MCP app shell iframe", + ); + +const waitForInnerFrame = async (page: Page, shellFrame: Frame): Promise => { + const locator = shellFrame.locator('iframe[title="Generated UI"]'); + const deadline = Date.now() + 10_000; + while (Date.now() < deadline) { + const handle = await locator.elementHandle(); + const frame = await handle?.contentFrame(); + await handle?.dispose(); + if (frame) return frame; + await page.waitForTimeout(50); + } + throw new Error("Timed out waiting for generated UI iframe."); +}; + +const waitForHostInitialized = (page: Page) => + page.waitForFunction(() => + Boolean((window as unknown as BrowserHostWindow).__mcpHostState.initialized), + ); + +const getHostState = (page: Page): Promise => + page.evaluate(() => (window as unknown as BrowserHostWindow).__mcpHostState); + +const openHarness = async (browser: Browser, hostUrl: string) => { + const page = await browser.newPage(); + await page.goto(hostUrl, { waitUntil: "domcontentloaded" }); + const shellFrame = await waitForShellFrame(page); + await waitForHostInitialized(page); + await shellFrame.locator('[data-testid="shell-loading-state"]').waitFor({ timeout: 10_000 }); + return { page, shellFrame }; +}; + +const renderGeneratedUi = async (page: Page, shellFrame: Frame, code: string): Promise => { + await page.evaluate( + (value) => (window as unknown as BrowserHostWindow).__sendGeneratedUi(value), + code, + ); + await shellFrame.locator('iframe[title="Generated UI"]').waitFor({ timeout: 10_000 }); + return waitForInnerFrame(page, shellFrame); +}; + +describe("MCP app generated UI browser isolation", () => { + let openApiServer: OpenApiServer | undefined; + let mcpHarness: McpHarness | undefined; + let shellServer: ShellServer | undefined; + let hostServer: HostServer | undefined; + let browser: Browser | undefined; + + beforeAll(async () => { + openApiServer = await startOpenApiServer(); + mcpHarness = await startMcpHarness(openApiServer); + shellServer = await startShellServer(); + hostServer = await startHostServer(shellServer.url, mcpHarness); + browser = await chromium.launch({ + executablePath: chromeExecutablePath, + headless: process.env.PLAYWRIGHT_HEADLESS !== "0", + slowMo: process.env.PLAYWRIGHT_SLOWMO ? Number(process.env.PLAYWRIGHT_SLOWMO) : undefined, + args: ["--no-sandbox", "--disable-dev-shm-usage"], + }); + }, 60_000); + + afterAll(async () => { + await browser?.close(); + await hostServer?.close(); + await shellServer?.close(); + await mcpHarness?.close(); + await openApiServer?.close(); + }, 30_000); + + it("runs generated UI in a sandboxed browser iframe and proxies live tool calls", async () => { + if (!browser || !hostServer) throw new Error("Browser harness did not start."); + const { page, shellFrame } = await openHarness(browser, hostServer.url); + + try { + const innerFrame = await renderGeneratedUi(page, shellFrame, generatedDataCode); + await innerFrame.waitForFunction( + () => document.querySelector("#status")?.textContent === "Widget", + undefined, + { timeout: 10_000 }, + ); + + const rendererAttributes = await shellFrame + .locator('iframe[title="Generated UI"]') + .evaluate((element) => ({ + sandbox: element.getAttribute("sandbox"), + srcDoc: element.getAttribute("srcdoc") ?? "", + })); + + expect(rendererAttributes.sandbox).toBe("allow-scripts"); + expect(rendererAttributes.srcDoc).toContain('meta name="executor-render-token"'); + expect(rendererAttributes.srcDoc).toContain("default-src 'none'"); + expect(rendererAttributes.srcDoc).toContain("connect-src 'none'"); + expect(rendererAttributes.srcDoc).toContain("form-action 'none'"); + expect(rendererAttributes.srcDoc).toContain("frame-src 'none'"); + expect(rendererAttributes.srcDoc).toContain("worker-src 'none'"); + + const parentAccess = await innerFrame.evaluate(() => { + try { + void window.parent.document.body; + return "allowed"; + } catch (err) { + return err instanceof DOMException ? err.name : String(err); + } + }); + expect(parentAccess).toBe("SecurityError"); + + const blockedText = (await innerFrame.locator("#blocked").textContent()) ?? ""; + for (const name of networkPrimitives) { + expect(blockedText).toContain( + `${name} is disabled in generated UI. Use tools.* via useQuery/useMutation.`, + ); + } + + const hostState = await getHostState(page); + expect(hostState.toolCalls).toEqual( + expect.arrayContaining([ + expect.objectContaining({ + name: "execute-action", + arguments: { + code: "return await tools.inventory.items.listItems({})", + }, + }), + ]), + ); + } finally { + await page.close(); + } + }, 30_000); + + it("blocks popup, form, and nested-frame escape attempts from generated UI", async () => { + if (!browser || !hostServer) throw new Error("Browser harness did not start."); + const { page, shellFrame } = await openHarness(browser, hostServer.url); + + try { + const innerFrame = await renderGeneratedUi(page, shellFrame, generatedEscapeAttemptCode); + await innerFrame.locator("#escape-results").waitFor({ timeout: 10_000 }); + + const escapeText = (await innerFrame.locator("#escape-results").textContent()) ?? ""; + expect(escapeText).toContain("popup:true"); + expect(escapeText).toContain("form:"); + expect(escapeText).toContain("iframe:"); + + const pages = browser.contexts().flatMap((context) => context.pages()); + expect(pages).toHaveLength(1); + + const hostState = await getHostState(page); + expect(hostState.toolCalls).toHaveLength(0); + } finally { + await page.close(); + } + }, 30_000); + + it("rejects spoofed renderer messages unless the iframe window and token match", async () => { + if (!browser || !hostServer) throw new Error("Browser harness did not start."); + const { page, shellFrame } = await openHarness(browser, hostServer.url); + + try { + const innerFrame = await renderGeneratedUi(page, shellFrame, generatedStaticCode); + await innerFrame.locator("#ready").waitFor({ timeout: 10_000 }); + + await shellFrame.evaluate(() => { + const iframe = document.querySelector('iframe[title="Generated UI"]'); + const srcDoc = iframe?.getAttribute("srcdoc") ?? ""; + const token = //.exec(srcDoc)?.[1]; + if (!iframe?.contentWindow || !token) { + throw new Error("Generated UI iframe is missing a token."); + } + + window.dispatchEvent( + new MessageEvent("message", { + source: window, + data: { type: "executor.run", requestId: 1, token, code: "return 42" }, + }), + ); + window.dispatchEvent( + new MessageEvent("message", { + source: iframe.contentWindow, + data: { type: "executor.run", requestId: 2, token: "wrong", code: "return 42" }, + }), + ); + }); + + await page.waitForTimeout(100); + expect((await getHostState(page)).toolCalls).toHaveLength(0); + + await shellFrame.evaluate(() => { + const iframe = document.querySelector('iframe[title="Generated UI"]'); + const srcDoc = iframe?.getAttribute("srcdoc") ?? ""; + const token = //.exec(srcDoc)?.[1]; + if (!iframe?.contentWindow || !token) { + throw new Error("Generated UI iframe is missing a token."); + } + + window.dispatchEvent( + new MessageEvent("message", { + source: iframe.contentWindow, + data: { type: "executor.run", requestId: 3, token, code: "return 42" }, + }), + ); + }); + + await page.waitForFunction( + () => (window as unknown as BrowserHostWindow).__mcpHostState.toolCalls.length === 1, + ); + expect((await getHostState(page)).toolCalls[0]).toEqual( + expect.objectContaining({ + name: "execute-action", + arguments: { code: "return 42" }, + }), + ); + } finally { + await page.close(); + } + }, 30_000); + + it("handles elicitations in the trusted shell instead of the generated iframe", async () => { + if (!browser || !hostServer || !openApiServer) { + throw new Error("Browser harness did not start."); + } + const { page, shellFrame } = await openHarness(browser, hostServer.url); + + try { + const innerFrame = await renderGeneratedUi(page, shellFrame, generatedApprovalCode); + await innerFrame.locator("#ask").waitFor({ timeout: 10_000 }); + await innerFrame.locator("#ask").click({ timeout: 10_000 }); + + await shellFrame.locator("text=Approve action").waitFor({ timeout: 10_000 }); + expect(await innerFrame.locator("text=Approve action").count()).toBe(0); + expect(await shellFrame.locator('[data-testid="trusted-interaction-fields"]').count()).toBe( + 0, + ); + expect(await shellFrame.locator("text=Response content").count()).toBe(0); + expect(openApiServer.postRequests).toHaveLength(0); + + await shellFrame.getByRole("button", { name: "Approve" }).click({ timeout: 10_000 }); + await innerFrame.waitForFunction( + () => document.querySelector("#approval-status")?.textContent === "Approved Widget:true", + undefined, + { timeout: 10_000 }, + ); + expect(openApiServer.postRequests).toEqual([JSON.stringify({ name: "Approved Widget" })]); + + const hostState = await getHostState(page); + expect(hostState.resumeCalls).toEqual([ + expect.objectContaining({ + name: "execute-action-resume", + arguments: { + executionId: expect.any(String), + action: "accept", + content: "{}", + }, + }), + ]); + } finally { + await page.close(); + } + }, 30_000); + + it("resumes declined and canceled approvals without performing the mutation", async () => { + if (!browser || !hostServer || !openApiServer) { + throw new Error("Browser harness did not start."); + } + + for (const action of ["Decline", "Cancel"] as const) { + const { page, shellFrame } = await openHarness(browser, hostServer.url); + const initialPostCount = openApiServer.postRequests.length; + + try { + const innerFrame = await renderGeneratedUi(page, shellFrame, generatedApprovalCode); + await innerFrame.locator("#ask").click({ timeout: 10_000 }); + await shellFrame.locator("text=Approve action").waitFor({ timeout: 10_000 }); + + await shellFrame.getByRole("button", { name: action }).click({ timeout: 10_000 }); + await page.waitForFunction( + () => (window as unknown as BrowserHostWindow).__mcpHostState.resumeCalls.length === 1, + undefined, + { timeout: 10_000 }, + ); + + expect(openApiServer.postRequests).toHaveLength(initialPostCount); + const hostState = await getHostState(page); + expect(hostState.resumeCalls).toEqual([ + expect.objectContaining({ + name: "execute-action-resume", + arguments: { + executionId: expect.any(String), + action: action === "Decline" ? "decline" : "cancel", + content: "{}", + }, + }), + ]); + } finally { + await page.close(); + } + } + }, 30_000); + + it("blocks generated UI mutations that run on mount until trusted approval", async () => { + if (!browser || !hostServer || !openApiServer) { + throw new Error("Browser harness did not start."); + } + const { page, shellFrame } = await openHarness(browser, hostServer.url); + + try { + const initialPostCount = openApiServer.postRequests.length; + const innerFrame = await renderGeneratedUi(page, shellFrame, generatedAutoMutationCode); + await innerFrame.locator("#auto-mutation-status").waitFor({ timeout: 10_000 }); + await shellFrame.locator("text=Approve action").waitFor({ timeout: 10_000 }); + + expect(openApiServer.postRequests).toHaveLength(initialPostCount); + const hostStateBeforeApproval = await getHostState(page); + expect(hostStateBeforeApproval.toolCalls).toEqual( + expect.arrayContaining([ + expect.objectContaining({ + name: "execute-action", + arguments: { + code: 'return await tools.inventory.items.createItem({"body":{"name":"Mount Widget"}})', + }, + }), + ]), + ); + + await shellFrame.getByRole("button", { name: "Approve" }).click({ timeout: 10_000 }); + await innerFrame.waitForFunction( + () => document.querySelector("#auto-mutation-status")?.textContent === "Mount Widget:true", + undefined, + { timeout: 10_000 }, + ); + expect(openApiServer.postRequests).toHaveLength(initialPostCount + 1); + expect(openApiServer.postRequests.at(-1)).toBe(JSON.stringify({ name: "Mount Widget" })); + } finally { + await page.close(); + } + }, 30_000); + + it("updates live query state after an approved TanStack Query mutation", async () => { + if (!browser || !hostServer || !openApiServer) { + throw new Error("Browser harness did not start."); + } + const { page, shellFrame } = await openHarness(browser, hostServer.url); + + try { + const initialPostCount = openApiServer.postRequests.length; + const innerFrame = await renderGeneratedUi(page, shellFrame, generatedTanstackQueryCode); + await innerFrame.waitForFunction( + () => document.querySelector("#auto-renew-state")?.textContent === "false", + undefined, + { timeout: 10_000 }, + ); + + await innerFrame.locator("#auto-renew-toggle").click({ timeout: 10_000 }); + await shellFrame.locator("text=Approve action").waitFor({ timeout: 10_000 }); + expect(openApiServer.postRequests).toHaveLength(initialPostCount); + + await shellFrame.getByRole("button", { name: "Approve" }).click({ timeout: 10_000 }); + + await innerFrame.waitForFunction( + () => document.querySelector("#auto-renew-state")?.textContent === "true", + undefined, + { timeout: 10_000 }, + ); + await innerFrame.waitForFunction( + () => + document.querySelector("#auto-renew-success")?.textContent === + "Auto-renew enabled successfully", + undefined, + { timeout: 10_000 }, + ); + + expect(openApiServer.postRequests).toHaveLength(initialPostCount + 1); + expect(openApiServer.postRequests.at(-1)).toBe(JSON.stringify({ autoRenew: true })); + + const hostState = await getHostState(page); + expect(hostState.toolCalls).toEqual( + expect.arrayContaining([ + expect.objectContaining({ + name: "execute-action", + arguments: { + code: 'return await tools.inventory.domains.getDomain({"domain":"openexecutor.com"})', + }, + }), + expect.objectContaining({ + name: "execute-action", + arguments: { + code: 'return await tools.inventory.domains.updateDomainAutoRenew({"domain":"openexecutor.com","body":{"autoRenew":true}})', + }, + }), + ]), + ); + } finally { + await page.close(); + } + }, 30_000); + + it("renders form elicitations as typed approval fields", async () => { + if (!browser || !shellServer) { + throw new Error("Browser harness did not start."); + } + + const schemaMcpHarness = await startSchemaElicitationMcpHarness(); + const schemaHostServer = await startHostServer(shellServer.url, schemaMcpHarness); + const { page, shellFrame } = await openHarness(browser, schemaHostServer.url); + + try { + const innerFrame = await renderGeneratedUi(page, shellFrame, generatedSchemaApprovalCode); + await innerFrame.locator("#ask-schema").click({ timeout: 10_000 }); + await shellFrame.locator("text=Provide approval details").waitFor({ timeout: 10_000 }); + + await shellFrame.getByLabel("Display name").fill("Rhea"); + await shellFrame.getByLabel("Count").fill("3"); + await shellFrame.getByLabel("Priority").selectOption("high"); + await shellFrame.getByLabel("Notify").click(); + await shellFrame.getByLabel("Beta").click(); + await shellFrame.getByRole("button", { name: "Approve" }).click({ timeout: 10_000 }); + + await innerFrame.waitForFunction( + () => + document.querySelector("#schema-status")?.textContent === + JSON.stringify({ + name: "Rhea", + count: 3, + priority: "high", + notify: true, + tags: ["beta"], + }), + undefined, + { timeout: 10_000 }, + ); + + const hostState = await getHostState(page); + expect(hostState.resumeCalls).toEqual([ + expect.objectContaining({ + name: "execute-action-resume", + arguments: { + executionId: "schema_exec", + action: "accept", + content: JSON.stringify({ + name: "Rhea", + count: 3, + priority: "high", + notify: true, + tags: ["beta"], + }), + }, + }), + ]); + } finally { + await page.close(); + await schemaHostServer.close(); + await schemaMcpHarness.close(); + } + }, 30_000); + + it("keeps trusted approval controls visible in a short host iframe", async () => { + if (!browser || !hostServer) { + throw new Error("Browser harness did not start."); + } + const { page, shellFrame } = await openHarness(browser, hostServer.url); + + try { + await page.evaluate(() => { + const appFrame = document.getElementById("app") as HTMLIFrameElement | null; + if (!appFrame) throw new Error("Missing app iframe."); + appFrame.style.height = "180px"; + }); + await shellFrame.waitForFunction(() => document.documentElement.clientHeight <= 180); + + const innerFrame = await renderGeneratedUi(page, shellFrame, generatedApprovalCode); + await innerFrame.locator("#ask").click({ timeout: 10_000 }); + await shellFrame.locator("text=Approve action").waitFor({ timeout: 10_000 }); + + const metrics = await shellFrame + .locator('[data-testid="trusted-interaction-modal"]') + .evaluate((modal) => { + const card = modal.querySelector('[data-testid="trusted-interaction-card"]'); + const body = modal.querySelector('[data-testid="trusted-interaction-body"]'); + const footer = modal.querySelector( + '[data-testid="trusted-interaction-footer"]', + ); + if (!card || !body || !footer) throw new Error("Missing trusted modal element."); + + const cardRect = card.getBoundingClientRect(); + const footerRect = footer.getBoundingClientRect(); + return { + bodyOverflowY: getComputedStyle(body).overflowY, + cardBottom: cardRect.bottom, + cardTop: cardRect.top, + footerBottom: footerRect.bottom, + footerTop: footerRect.top, + viewportHeight: document.documentElement.clientHeight, + }; + }); + + expect(metrics.bodyOverflowY).toBe("auto"); + expect(metrics.cardTop).toBeGreaterThanOrEqual(0); + expect(metrics.cardBottom).toBeLessThanOrEqual(metrics.viewportHeight + 1); + expect(metrics.footerTop).toBeGreaterThanOrEqual(0); + expect(metrics.footerBottom).toBeLessThanOrEqual(metrics.viewportHeight + 1); + } finally { + await page.close(); + } + }, 30_000); +}); diff --git a/packages/plugins/dynamic-ui/src/shell/mcp-app.html b/packages/plugins/dynamic-ui/src/shell/mcp-app.html new file mode 100644 index 000000000..7d347f683 --- /dev/null +++ b/packages/plugins/dynamic-ui/src/shell/mcp-app.html @@ -0,0 +1,12 @@ + + + + + + Executor Shell + + +
+ + + diff --git a/packages/plugins/dynamic-ui/src/shell/mcp-app.tsx b/packages/plugins/dynamic-ui/src/shell/mcp-app.tsx new file mode 100644 index 000000000..5b8f73c76 --- /dev/null +++ b/packages/plugins/dynamic-ui/src/shell/mcp-app.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import { createRoot } from "react-dom/client"; +import { useApp } from "@modelcontextprotocol/ext-apps/react"; +import { DynamicUiShell } from "./shell-app"; + +function ConnectedShellApp() { + const { app, error: connectionError } = useApp({ + appInfo: { name: "Executor Shell", version: "1.0.0" }, + capabilities: {}, + }); + + if (connectionError) { + return ( +
+
Connection error: {connectionError.message}
+
+ ); + } + + if (!app) { + return ( +
+
Connecting
+
+ ); + } + + return ; +} + +createRoot(document.getElementById("root")!).render( + + + , +); diff --git a/packages/plugins/dynamic-ui/src/shell/proxy.ts b/packages/plugins/dynamic-ui/src/shell/proxy.ts new file mode 100644 index 000000000..7de3612e9 --- /dev/null +++ b/packages/plugins/dynamic-ui/src/shell/proxy.ts @@ -0,0 +1,167 @@ +import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js"; + +export type ToolCallHost = { + readonly callServerTool: (params: { + name: string; + arguments?: Record; + }) => Promise; +}; + +export type TrustedInteraction = { + executionId: string; + interaction: { + kind?: unknown; + message?: unknown; + url?: unknown; + requestedSchema?: unknown; + }; +}; + +export type TrustedInteractionResponse = { + action: "accept" | "decline" | "cancel"; + content?: Record; +}; + +export type RequestTrustedInteraction = ( + interaction: TrustedInteraction, +) => Promise; + +/** + * Creates a tRPC-style recursive proxy that maps dotted tool paths + * to execute-action calls through the MCP Apps bridge. + * + * Usage: tools.github.issues.create({ title: "Bug" }) + * becomes: app.callServerTool("execute-action", { code: "return await tools.github.issues.create({\"title\":\"Bug\"})" }) + */ +export function createToolsProxy( + app: ToolCallHost, + requestTrustedInteraction: RequestTrustedInteraction, +): Record { + function nest(path: string[]): unknown { + return new Proxy(function () {}, { + get(_target, key: string) { + if (key === "then" || key === "toJSON" || key === (Symbol.toPrimitive as unknown)) { + return undefined; + } + return nest([...path, key]); + }, + apply(_target, _thisArg, args: unknown[]) { + const toolPath = path.join("."); + const serializedArgs = args.length > 0 ? JSON.stringify(args[0]) : "{}"; + const code = `return await tools.${toolPath}(${serializedArgs})`; + + console.log("[executor-proxy] calling:", code); + + return app + .callServerTool({ + name: "execute-action", + arguments: { code }, + }) + .then((r) => resolveToolResult(app, r, requestTrustedInteraction)); + }, + }); + } + + return nest([]) as Record; +} + +/** + * Creates the `run()` escape hatch for multi-step tool composition. + * + * Usage: const result = await run(` + * const me = await tools.github.users.me() + * return await tools.github.issues.create({ assignee: me.login, ... }) + * `) + */ +export function createRunFn( + app: ToolCallHost, + requestTrustedInteraction: RequestTrustedInteraction, +): (code: string) => Promise { + return (code: string) => + app + .callServerTool({ + name: "execute-action", + arguments: { code }, + }) + .then((r) => resolveToolResult(app, r, requestTrustedInteraction)); +} + +async function resolveToolResult( + app: ToolCallHost, + result: CallToolResult, + requestTrustedInteraction: RequestTrustedInteraction, +): Promise { + console.log( + "[executor-proxy] raw result:", + JSON.stringify({ + isError: result.isError, + structuredContent: result.structuredContent, + text: result.content?.find((c) => c.type === "text")?.text, + }), + ); + + if (result.isError) { + const msg = result.content?.find((c) => c.type === "text")?.text ?? "Tool call failed"; + throw new Error(msg); + } + + const structured = result.structuredContent as Record | undefined; + const pending = parseTrustedInteraction(structured); + if (pending) { + const response = await requestTrustedInteraction(pending); + const resumed = await app.callServerTool({ + name: "execute-action-resume", + arguments: { + executionId: pending.executionId, + action: response.action, + content: JSON.stringify(response.content ?? {}), + }, + }); + return resolveToolResult(app, resumed, requestTrustedInteraction); + } + + const unwrapped = unwrapResult(structured) ?? parseTextContent(result); + console.log("[executor-proxy] unwrapped:", JSON.stringify(unwrapped)); + return unwrapped; +} + +function parseTrustedInteraction( + structured: Record | undefined, +): TrustedInteraction | null { + if (!structured || structured.status !== "waiting_for_interaction") return null; + if (typeof structured.executionId !== "string") return null; + const interaction = + typeof structured.interaction === "object" && + structured.interaction !== null && + !Array.isArray(structured.interaction) + ? (structured.interaction as TrustedInteraction["interaction"]) + : {}; + return { executionId: structured.executionId, interaction }; +} + +/** + * Unwrap execution result. The kernel wraps results as + * `{ status: "completed", result: , logs: [...] }`. + * Return just the inner result value. + */ +function unwrapResult(structured: Record | undefined | null): unknown { + if ( + structured && + typeof structured === "object" && + "status" in structured && + "result" in structured + ) { + return structured.result; + } + return structured; +} + +function parseTextContent(r: { content?: Array<{ type: string; text?: string }> }): unknown { + const text = r.content?.find((c) => c.type === "text")?.text; + if (!text) return null; + try { + return JSON.parse(text); + } catch { + return text; + } +} diff --git a/packages/plugins/dynamic-ui/src/shell/shell-app.tsx b/packages/plugins/dynamic-ui/src/shell/shell-app.tsx new file mode 100644 index 000000000..59b91871e --- /dev/null +++ b/packages/plugins/dynamic-ui/src/shell/shell-app.tsx @@ -0,0 +1,623 @@ +import "./globals.css"; +import "@tailwindcss/browser"; + +import React, { useState, useEffect, useRef, useCallback, type ReactNode } from "react"; +import type { McpUiHostContext } from "@modelcontextprotocol/ext-apps"; +import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js"; +import { useElicitationApproval } from "@executor-js/react/components/elicitation-approval"; + +import { + createToolsProxy, + createRunFn, + type ToolCallHost, + type TrustedInteraction, + type TrustedInteractionResponse, +} from "./proxy"; +import * as Components from "./components"; +import innerRendererScript from "virtual:executor-inner-renderer"; + +type PendingInteraction = TrustedInteraction & { + resolve: (response: TrustedInteractionResponse) => void; +}; + +export type DynamicUiShellHost = ToolCallHost & { + readonly getHostContext: () => McpUiHostContext | undefined; + readonly openLink: (params: { url: string }) => Promise; + ontoolinput?: (params: { arguments?: Record }) => void; + ontoolresult?: (result: CallToolResult) => void; + onerror?: (err: Error) => void; + onhostcontextchanged?: (ctx: McpUiHostContext) => void; +}; + +type RendererState = { + token: string; + code: string; + srcDoc: string; + config: Record; + height: number; +}; + +type RendererRequest = + | { + type: "executor.toolCall"; + requestId: number; + token: string; + path: unknown; + args: unknown; + } + | { type: "executor.run"; requestId: number; token: string; code: unknown } + | { type: "executor.renderer.ready"; token: string } + | { type: "executor.renderer.config"; token: string; config: unknown } + | { type: "executor.renderer.size"; token: string; height: unknown } + | { type: "executor.renderer.error"; token: string; message: unknown }; + +// --------------------------------------------------------------------------- +// Theme application from MCP Apps host context +// --------------------------------------------------------------------------- + +function applyTheme(ctx: McpUiHostContext) { + if (ctx.theme) { + document.documentElement.classList.toggle("dark", ctx.theme === "dark"); + } +} + +const createRendererToken = (): string => { + if (typeof crypto !== "undefined" && "randomUUID" in crypto) { + return crypto.randomUUID(); + } + return `renderer_${Date.now()}_${Math.random().toString(36).slice(2)}`; +}; + +const escapeInlineHtml = (value: string): string => + value.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """); + +const escapeStyleContent = (value: string): string => value.replace(/<\/style/gi, "<\\/style"); + +const escapeScriptContent = (value: string): string => value.replace(/<\/script/gi, "<\\/script"); + +const collectShellCss = (): string => + Array.from(document.styleSheets) + .map((sheet) => { + try { + return Array.from(sheet.cssRules) + .map((rule) => rule.cssText) + .join("\n"); + } catch { + return ""; + } + }) + .filter((css) => css.length > 0) + .join("\n"); + +const buildRendererSrcDoc = (token: string): string => { + const css = collectShellCss(); + return ` + + + + + + + + +
+ + +`; +}; + +const isRecord = (value: unknown): value is Record => + typeof value === "object" && value !== null && !Array.isArray(value); + +const TOOL_PATH_SEGMENT = /^[A-Za-z_$][\w$]*$/; + +const toolPathToCode = (path: unknown, args: unknown): string => { + if (!Array.isArray(path) || path.length === 0) { + throw new Error("Invalid tool path."); + } + const parts = path.map((part) => { + if (typeof part !== "string" || !TOOL_PATH_SEGMENT.test(part)) { + throw new Error("Invalid tool path."); + } + return part; + }); + const argList = Array.isArray(args) ? args : []; + const serializedArgs = JSON.stringify(argList[0] ?? {}); + return `return await tools.${parts.join(".")}(${serializedArgs})`; +}; + +// --------------------------------------------------------------------------- +// Shell App — connects to MCP host, receives code, renders components +// --------------------------------------------------------------------------- + +export function DynamicUiShell({ + app, + initialCode, +}: { + app: DynamicUiShellHost; + initialCode?: string | undefined; +}) { + const [component, setComponent] = useState(null); + const [renderer, setRenderer] = useState(null); + const [error, setError] = useState(null); + const [hostContext, setHostContext] = useState(); + const [pendingInteraction, setPendingInteraction] = useState(null); + const toolsRef = useRef>({}); + const runRef = useRef<(code: string) => Promise>(() => Promise.resolve(null)); + const pendingInteractionRef = useRef(null); + const rendererFrameRef = useRef(null); + const rendererRef = useRef(null); + + useEffect(() => { + rendererRef.current = renderer; + }, [renderer]); + + const requestTrustedInteraction = useCallback( + (interaction: TrustedInteraction): Promise => + new Promise((resolve) => { + if (pendingInteractionRef.current) { + resolve({ action: "cancel" }); + return; + } + + const pending = { ...interaction, resolve }; + pendingInteractionRef.current = pending; + setPendingInteraction(pending); + }), + [], + ); + + const completeTrustedInteraction = useCallback((response: TrustedInteractionResponse) => { + const pending = pendingInteractionRef.current; + pendingInteractionRef.current = null; + setPendingInteraction(null); + pending?.resolve(response); + }, []); + + const postToRenderer = useCallback((message: Record) => { + const current = rendererRef.current; + const target = rendererFrameRef.current?.contentWindow; + if (!current || !target) return; + target.postMessage({ ...message, token: current.token }, "*"); + }, []); + + useEffect(() => { + const handleRendererMessage = (event: MessageEvent) => { + const current = rendererRef.current; + if (!current || event.source !== rendererFrameRef.current?.contentWindow) return; + const data = event.data; + if (!isRecord(data) || data.token !== current.token) return; + const source = event.source; + if (!source || typeof source.postMessage !== "function") return; + const respond = (requestId: number, ok: boolean, value?: unknown, error?: string) => { + source.postMessage( + { + type: "executor.response", + requestId, + token: current.token, + ok, + value, + error, + }, + "*", + ); + }; + + if (data.type === "executor.renderer.ready") { + postToRenderer({ + type: "executor.render", + code: current.code, + theme: hostContext?.theme, + }); + return; + } + + if (data.type === "executor.renderer.config") { + setRenderer((prev) => + prev && prev.token === current.token + ? { ...prev, config: isRecord(data.config) ? data.config : {} } + : prev, + ); + return; + } + + if (data.type === "executor.renderer.size") { + const height = typeof data.height === "number" ? Math.ceil(data.height) : current.height; + setRenderer((prev) => + prev && prev.token === current.token + ? { ...prev, height: Math.max(120, Math.min(4000, height)) } + : prev, + ); + return; + } + + if (data.type === "executor.renderer.error") { + if (typeof data.message === "string") { + console.error("[executor-shell] Renderer error:", data.message); + } + return; + } + + if (data.type === "executor.run") { + if (typeof data.code !== "string") { + respond(data.requestId, false, undefined, "Invalid run payload."); + return; + } + runRef + .current(data.code) + .then((value) => respond(data.requestId, true, value)) + .catch((err: unknown) => + respond( + data.requestId, + false, + undefined, + err instanceof Error ? err.message : String(err), + ), + ); + return; + } + + if (data.type === "executor.toolCall") { + let code: string; + try { + code = toolPathToCode(data.path, data.args); + } catch (err) { + respond( + data.requestId, + false, + undefined, + err instanceof Error ? err.message : String(err), + ); + return; + } + runRef + .current(code) + .then((value) => respond(data.requestId, true, value)) + .catch((err: unknown) => + respond( + data.requestId, + false, + undefined, + err instanceof Error ? err.message : String(err), + ), + ); + } + }; + + window.addEventListener("message", handleRendererMessage); + return () => window.removeEventListener("message", handleRendererMessage); + }, [hostContext?.theme, postToRenderer]); + + useEffect(() => { + if (renderer) { + postToRenderer({ type: "executor.theme", theme: hostContext?.theme }); + } + }, [hostContext?.theme, postToRenderer, renderer]); + + /** Render a JSX code string in the sandboxed inner iframe. */ + const renderCode = useCallback((code: string) => { + try { + const token = createRendererToken(); + const nextRenderer = { + token, + code, + srcDoc: buildRendererSrcDoc(token), + config: {}, + height: 240, + }; + rendererRef.current = nextRenderer; + setRenderer(nextRenderer); + setComponent(null); + setError(null); + } catch (err) { + const msg = err instanceof Error ? err.message : String(err); + setError(`Compilation error: ${msg}`); + setComponent(null); + rendererRef.current = null; + setRenderer(null); + } + }, []); + + useEffect(() => { + toolsRef.current = createToolsProxy(app, requestTrustedInteraction); + runRef.current = createRunFn(app, requestTrustedInteraction); + + // Handle tool input — fires on init (including page reload) with + // the tool arguments. For generative UI the arguments contain { code }. + app.ontoolinput = (params: { arguments?: Record }) => { + const code = params.arguments?.code; + if (code && typeof code === "string") { + renderCode(code); + } + }; + + app.ontoolresult = (result: CallToolResult) => { + const structured = result.structuredContent as Record | undefined; + const code = structured?.code; + + if (code && typeof code === "string") { + renderCode(code); + return; + } + + // Not a generative UI result — render a data view + const DataView = () => { + const text = result.content?.find((c) => c.type === "text")?.text; + const isError = (result as { isError?: boolean }).isError; + const data = structured as Record | undefined; + + return ( + + + {isError ? ( + + + Error + + {text ?? "Unknown error"} + + + ) : ( + 
+                  {data ? JSON.stringify(data, null, 2) : (text ?? "(no result)")}
+
+ )} + + + ); + }; + setComponent(() => DataView); + rendererRef.current = null; + setRenderer(null); + setError(null); + }; + + app.onerror = (err) => { + console.error("[executor-shell] App error:", err); + }; + + app.onhostcontextchanged = (ctx: McpUiHostContext) => { + setHostContext((prev) => ({ ...prev, ...ctx })); + applyTheme(ctx); + }; + + (app as { onteardown?: () => Promise> }).onteardown = async () => { + return {}; + }; + }, [app, renderCode, requestTrustedInteraction]); + + // Apply initial host context + useEffect(() => { + const ctx = app.getHostContext(); + if (ctx) { + setHostContext(ctx); + applyTheme(ctx); + } + }, [app]); + + useEffect(() => { + if (initialCode) renderCode(initialCode); + }, [initialCode, renderCode]); + + if (error) { + return ( +
+ + + Error + + {error} + + +
+ ); + } + + if (!component && !renderer) { + return ( +
+ +
+ ); + } + + const Component = component; + const config = renderer?.config ?? {}; + const maxHeight = typeof config.maxHeight === "number" ? config.maxHeight : 800; + const rendererHeight = renderer ? Math.min(renderer.height, maxHeight) : undefined; + + return ( + +
+ {renderer ? ( +