@grackle-ai/web-components 0.116.0 → 0.118.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grackle-ai/web-components",
-  "version": "0.116.0",
+  "version": "0.118.0",
   "description": "Presentational React component library for the Grackle web UI",
   "license": "MIT",
   "sideEffects": [
@@ -41,12 +41,13 @@
     "d3-zoom": "^3.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-live": "^4.1.8",
     "react-markdown": "^9.0.3",
     "rehype-prism-plus": "^2.0.0",
     "remark-gfm": "^4.0.0",
     "lucide-react": "~0.474.0",
     "react-router": "^7.0.0",
-    "@grackle-ai/common": "0.116.0"
+    "@grackle-ai/common": "0.118.0"
   },
   "devDependencies": {
     "@rushstack/heft": "1.2.7",
@@ -60,6 +61,7 @@
     "@types/react-dom": "^19.0.0",
     "sass": "^1.86.0",
     "vite": "^6.4.2",
+    "vite-plugin-css-injected-by-js": "^4.0.1",
     "vitest": "^3.1.1",
     "@testing-library/react": "^16.3.2",
     "jsdom": "^29.0.0",

package/rush-logs/web-components._phase_build.cache.log

@@ -1,4 +1,4 @@
 Build cache hit.
-Cache key: f238c174d295031bec7f186733732e0fd7e4b9a5
-Clearing cached folders: dist, storybook-static, .rush/temp/operation/_phase_build
+Cache key: 54cccf3e758698925ef11c80c60777421e1be435
+Clearing cached folders: dist, storybook-static, mcp-app-runtime, .rush/temp/operation/_phase_build
 Successfully restored output from the build cache.

package/rush-logs/web-components._phase_build.log

@@ -12,8 +12,15 @@ rendering chunks...
 computing gzip size...
 dist/index.css                   155.14 kB │ gzip:  20.34 kB
 dist/McpAppWidget-CSX2W2Vb.js    205.28 kB │ gzip:  47.19 kB
-dist/index.js                  1,374.93 kB │ gzip: 352.80 kB
-✓ built in 5.75s
+dist/index.js                  1,375.56 kB │ gzip: 353.02 kB
+✓ built in 5.83s
+vite v6.4.2 building for production...
+transforming...
+✓ 2870 modules transformed.
+rendering chunks...
+computing gzip size...
+mcp-app-runtime/runtime.js  1,243.84 kB │ gzip: 267.73 kB
+✓ built in 4.99s
 [build:vite-build] Vite build completed.
- ---- build finished (50.985s) ---- 
--------------------- Finished (50.988s) --------------------
+ ---- build finished (85.920s) ---- 
+-------------------- Finished (85.925s) --------------------

package/rush-logs/web-components._phase_test.cache.log

@@ -1,4 +1,4 @@
 Build cache hit.
-Cache key: f5301e6a84109dcec06242d178df01e555a83456
+Cache key: e5461b19665f030d269f07cf8797f2bcfeac1bf7
 Clearing cached folders: .rush/temp/operation/_phase_test
 Successfully restored output from the build cache.

package/rush-logs/web-components._phase_test.log

@@ -6,29 +6,30 @@ The provided list of phases does not contain all phase dependencies. You may nee
  RUN  v3.2.4 /home/runner/work/grackle/grackle/packages/web-components
 
  ✓ src/utils/sessionEvents.test.ts (14 tests) 46ms
- ✓ src/utils/eventContent.test.ts (38 tests) 129ms
- ✓ src/utils/dashboard.test.ts (4 tests) 9ms
- ✓ src/utils/streamCoordination.test.ts (10 tests) 20ms
- ✓ src/utils/route-config.test.ts (16 tests) 27ms
- ✓ src/utils/breadcrumbs.test.ts (15 tests) 15ms
- ✓ src/utils/scrollUtils.test.ts (11 tests) 21ms
- ✓ src/components/tools/classifyTool.test.ts (6 tests) 11ms
- ✓ src/components/tools/toolCardHelpers.test.ts (10 tests) 25ms
- ✓ src/utils/assetUrl.test.ts (3 tests) 14ms
- ✓ src/components/display/extractText.test.tsx (8 tests) 22ms
- ✓ src/hooks/useEventSelection.test.ts (13 tests) 180ms
+ ✓ src/utils/eventContent.test.ts (38 tests) 65ms
+ ✓ src/utils/dashboard.test.ts (4 tests) 14ms
+ ✓ src/utils/streamCoordination.test.ts (10 tests) 34ms
+ ✓ src/utils/route-config.test.ts (16 tests) 38ms
+ ✓ src/utils/breadcrumbs.test.ts (15 tests) 90ms
+ ✓ src/utils/scrollUtils.test.ts (11 tests) 31ms
+ ✓ src/components/tools/classifyTool.test.ts (6 tests) 15ms
+ ✓ src/utils/assetUrl.test.ts (3 tests) 27ms
+ ✓ src/components/tools/toolCardHelpers.test.ts (10 tests) 19ms
+ ✓ src/components/display/extractText.test.tsx (8 tests) 12ms
  ✓ src/components/editable/useEditableField.test.tsx (17 tests) 159ms
- ✓ src/components/notifications/UpdateBanner.test.tsx (4 tests) 95ms
- ✓ src/utils/grackleHostStyleVariables.test.ts (2 tests) 195ms
- ✓ src/components/display/McpAppWidget.test.tsx (3 tests) 361ms
+ ✓ src/hooks/useEventSelection.test.ts (13 tests) 271ms
+ ✓ src/components/display/McpAppWidget.test.tsx (3 tests) 312ms
+ ✓ src/components/notifications/UpdateBanner.test.tsx (4 tests) 217ms
+ ✓ src/utils/grackleHostStyleVariables.test.ts (2 tests) 337ms
+   ✓ grackleHostStyleVariables > always returns the MCP-standard fallback variables  327ms
 
  Test Files  16 passed (16)
       Tests  174 passed (174)
-   Start at  23:49:50
-   Duration  15.38s (transform 2.97s, setup 0ms, collect 14.70s, tests 1.33s, environment 12.10s, prepare 5.21s)
+   Start at  14:54:51
+   Duration  15.79s (transform 2.65s, setup 0ms, collect 17.82s, tests 1.69s, environment 12.03s, prepare 5.23s)
 
 [test:vitest] Vitest completed.
-[test:storybook-test] Starting Storybook static server on port 45217...
+[test:storybook-test] Starting Storybook static server on port 46639...
 [test:storybook-test] Storybook server ready. Running interaction tests...
 jest-haste-map: duplicate manual mock found: adapter-manager
   The following files share their name; please delete one of them:
@@ -121,5 +122,5 @@ jest-haste-map: duplicate manual mock found: utils/network
     * <rootDir>/packages/server/src/__mocks__/utils/network.ts
 
 [test:storybook-test] Storybook interaction tests completed.
- ---- test finished (74.932s) ---- 
--------------------- Finished (74.942s) --------------------
+ ---- test finished (114.090s) ---- 
+-------------------- Finished (114.096s) --------------------

package/src/components/display/EventRenderer.stories.tsx

@@ -216,6 +216,28 @@ export const AgentWidgetEvent: Story = {
   },
 };
 
+/** GenUX React runtime (#1268): rendererKind "grackle-react" — `html` is JSX source. */
+export const ReactRuntimeWidgetEvent: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "widget",
+      content: JSON.stringify({
+        resourceUri: "",
+        toolName: "component_show",
+        rendererKind: "grackle-react",
+        html: "render(<Button>{props.label}</Button>)",
+        csp: { resourceDomains: ["http://localhost:6007"], connectDomains: ["http://localhost:6007"], allowUnsafeEval: true },
+        toolInput: { label: "Hi" },
+      }),
+    }),
+    sandboxProxyUrl: "http://localhost:6007/sandbox.html",
+  },
+  play: async ({ canvas }) => {
+    // The grackle-react branch builds a runtime bootstrap and mounts the host iframe.
+    await expect(await canvas.findByTestId("mcp-app-widget")).toBeInTheDocument();
+  },
+};
+
 /** An unknown rendererKind falls back to the default event card (no crash). */
 export const UnknownRendererKindWidget: Story = {
   args: {

package/src/components/display/EventRenderer.tsx

@@ -226,9 +226,10 @@ export function EventRenderer({ event, toolUseCtx, settled, sandboxProxyUrl }: P
       let payload: {
         html?: string;
         rendererKind?: string;
-        // `allowInlineScripts` is a Grackle extension to the upstream CSP type
-        // (agent-authored widgets, #1239); it is forwarded verbatim to the sandbox.
-        csp?: McpUiResourceCsp & { allowInlineScripts?: boolean };
+        // `allowInlineScripts`/`allowUnsafeEval` are Grackle extensions to the
+        // upstream CSP type (agent-authored widgets #1239; React runtime #1268);
+        // forwarded verbatim to the sandbox.
+        csp?: McpUiResourceCsp & { allowInlineScripts?: boolean; allowUnsafeEval?: boolean };
         toolInput?: Record<string, unknown>;
         toolResult?: CallToolResult;
       } = {};
@@ -236,8 +237,31 @@ export function EventRenderer({ event, toolUseCtx, settled, sandboxProxyUrl }: P
         payload = JSON.parse(event.content) as typeof payload;
       } catch { /* malformed widget payload — fall back */ }
       // Dispatch on rendererKind (default "mcp-app-html" for back-compat). This
-      // switch is the seam for future declarative renderers (e.g. adaptive-card).
+      // switch is the seam for declarative/runtime renderers.
       const rendererKind: string = payload.rendererKind ?? "mcp-app-html";
+      // GenUX React runtime (#1268): payload.html is JSX *source* (not a full
+      // document). Render it via a bootstrap that loads the runtime bundle from the
+      // sandbox origin; the source + props are delivered as tool input. The runtime
+      // transpiles + renders the component against the Grackle component library.
+      // An absolute runtime.js URL is required — the inner iframe is written via
+      // doc.write (about:blank base), so a relative "/runtime.js" would not resolve.
+      if (rendererKind === "grackle-react" && payload.html) {
+        const sandboxOrigin: string = new URL(sandboxProxyUrl, window.location.href).origin;
+        const bootstrap: string =
+          `<!doctype html><html><head><meta charset="utf-8"></head>` +
+          `<body><div id="grackle-root"></div>` +
+          `<script type="module" src="${sandboxOrigin}/runtime.js"></script></body></html>`;
+        return (
+          <Suspense fallback={<DefaultEvent content="Loading widget..." />}>
+            <McpAppWidget
+              widgetHtml={bootstrap}
+              sandboxProxyUrl={sandboxProxyUrl}
+              csp={payload.csp}
+              toolInput={{ source: payload.html, props: payload.toolInput ?? {} }}
+            />
+          </Suspense>
+        );
+      }
       if (rendererKind !== "mcp-app-html" || !payload.html) {
         return <DefaultEvent content={event.content} />;
       }

package/src/mcp-runtime/index.tsx

@@ -0,0 +1,99 @@
+/**
+ * Grackle React runtime (#1268) — the single MCP Apps resource (`ui://grackle/runtime`)
+ * that renders agent-authored React/JSX inline in the chat.
+ *
+ * Bundled self-contained (React + react-live + the curated Grackle component set +
+ * the ext-apps guest bridge) by `vite.config.ts` into `mcp-app-runtime/runtime.js`
+ * and served from the sandbox origin. The host (`McpAppWidget`) writes a tiny
+ * bootstrap that loads this script, then delivers `{ source, props }` as MCP Apps
+ * tool input. The runtime transpiles + evaluates the JSX via react-live against the
+ * component scope and paints it. This is the load-bearing slice of the GenUX
+ * component-registry vision (render-by-source; the registry comes in later phases).
+ */
+import { useState, type JSX } from "react";
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { LiveProvider, LivePreview, LiveError } from "react-live";
+import { useApp, useHostStyleVariables } from "@modelcontextprotocol/ext-apps/react";
+import {
+  Button, SplitButton, Callout, Spinner,
+  Skeleton, SkeletonText, SkeletonCard, Tooltip, CopyButton,
+} from "../index.js";
+
+/**
+ * Curated, context-free presentational components exposed to agent JSX. Phase 0
+ * keeps this a small, safe set — components that require router or `useGrackle()`
+ * context are intentionally excluded. The full, discoverable catalog arrives in a
+ * later phase (#1265).
+ */
+const COMPONENT_SCOPE: Readonly<Record<string, unknown>> = {
+  Button, SplitButton, Callout, Spinner,
+  Skeleton, SkeletonText, SkeletonCard, Tooltip, CopyButton,
+};
+
+/** Identity reported to the host during the MCP Apps guest handshake. */
+const APP_INFO: Readonly<{ name: string; version: string }> = {
+  name: "GrackleReactRuntime",
+  version: "0.1.0",
+};
+
+/** The agent-supplied render request delivered via MCP Apps tool input. */
+interface RenderInput {
+  /** JSX source; must call `render(<Component {...props}/>)` (react-live noInline). */
+  source: string;
+  /** Data bound into the component, available as `props` in the JSX scope. */
+  props: Record<string, unknown>;
+}
+
+/** Connects the guest bridge, receives the JSX + props, and renders via react-live. */
+function Runtime(): JSX.Element {
+  const [input, setInput] = useState<RenderInput | undefined>(undefined);
+
+  const { app, error } = useApp({
+    appInfo: APP_INFO,
+    capabilities: {},
+    onAppCreated: (createdApp): void => {
+      createdApp.ontoolinput = (params): void => {
+        const args = (params.arguments ?? {}) as { source?: unknown; props?: unknown };
+        setInput({
+          source: typeof args.source === "string" ? args.source : "",
+          props:
+            args.props !== null && typeof args.props === "object"
+              ? (args.props as Record<string, unknown>)
+              : {},
+        });
+      };
+    },
+  });
+
+  // Mirror the host theme + style tokens onto this document (light-dark + CSS vars).
+  useHostStyleVariables(app, app?.getHostContext());
+
+  if (error) {
+    return <div style={{ color: "var(--color-text-danger, #c00)" }}>Runtime error: {error.message}</div>;
+  }
+  if (!input) {
+    return <div style={{ opacity: 0.6, padding: "0.5rem" }}>Loading component…</div>;
+  }
+
+  // react-live transpiles the JSX (sucrase) and evaluates it with `new Function`
+  // (requires `script-src 'unsafe-eval'`, set on this resource's sandbox CSP). The
+  // origin-isolated sandbox + restricted connect-src keep that safe (#1268).
+  const scope: Record<string, unknown> = { React, props: input.props, ...COMPONENT_SCOPE };
+  return (
+    <LiveProvider code={input.source} noInline scope={scope}>
+      <LivePreview />
+      <LiveError />
+    </LiveProvider>
+  );
+}
+
+/** Mount the runtime into the bootstrap's root element. */
+function main(): void {
+  const rootEl: HTMLElement | null = document.getElementById("grackle-root");
+  if (rootEl) {
+    createRoot(rootEl).render(<Runtime />);
+  }
+}
+
+main();

package/temp/build/lint/_eslint-5eVG3S6w.json

@@ -151,7 +151,7 @@
     ],
     [
       "components/display/EventRenderer.tsx",
-      "gezM0fuun/x3AxO8ftjhNIYySUI=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "B+twjFgJO8XtuVnM2EFI4ajaFm0=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/display/ConfirmDialog.tsx",
@@ -519,7 +519,7 @@
     ],
     [
       "components/display/EventRenderer.stories.tsx",
-      "IHG2XMzYHwhC8ZSq4jhuqyExkIM=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "G6j6nQxaMUuRqBcEnlmV5Osc/Zw=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/display/EventStream.stories.tsx",
@@ -785,6 +785,10 @@
       "hooks/useEventSelection.test.ts",
       "/ggsjovG/PzoHNtCbMzOcwYEa/k=_orHdc0vDZqoYfD6TIDl1Za3EAL4="
     ],
+    [
+      "mcp-runtime/index.tsx",
+      "mzEV0k70r0bzk8cfyPwZgUtu9YU=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+    ],
     [
       "utils/assetUrl.test.ts",
       "IaZp6S9n0W2AQtaTJgpZV3+L9sQ=_orHdc0vDZqoYfD6TIDl1Za3EAL4="
@@ -822,5 +826,5 @@
       "tcFLEiIFvYYLO/1jT41tcJ4CIX4=_orHdc0vDZqoYfD6TIDl1Za3EAL4="
     ]
   ],
-  "filesHash": "fdzO9hSTLfwPLjMg24UcAg"
+  "filesHash": "DNaGWodZdPGqzAPxzYjKFQ"
 }

package/vite.config.ts

@@ -1,9 +1,53 @@
-import { defineConfig } from "vite";
+import { defineConfig, build, type Plugin } from "vite";
 import react from "@vitejs/plugin-react";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
 import { resolve } from "node:path";
 
+/**
+ * Second, self-contained build for the MCP Apps React runtime (#1268). Unlike the
+ * main library build (which externalizes React + `@grackle-ai/*` so the web SPA
+ * provides them), the runtime is a standalone bundle served from the sandbox
+ * origin: it bundles React, the curated Grackle component set, react-live, and the
+ * ext-apps guest bridge into one `mcp-app-runtime/runtime.js`, with CSS injected
+ * via JS (the sandbox loads a single script). Run from the main build's
+ * `closeBundle`; `configFile: false` keeps the nested build from re-loading this
+ * config (no recursion).
+ */
+function buildRuntimeBundle(): Plugin {
+  return {
+    name: "grackle-build-mcp-runtime",
+    closeBundle: {
+      sequential: true,
+      async handler(): Promise<void> {
+        await build({
+          configFile: false,
+          root: __dirname,
+          define: { "process.env.NODE_ENV": JSON.stringify("production") },
+          plugins: [react(), cssInjectedByJsPlugin()],
+          build: {
+            outDir: resolve(__dirname, "mcp-app-runtime"),
+            emptyOutDir: true,
+            minify: true,
+            lib: {
+              entry: resolve(__dirname, "src/mcp-runtime/index.tsx"),
+              formats: ["es"],
+              fileName: () => "runtime.js",
+            },
+            // No `external`: bundle React + the component library into one file.
+            // `inlineDynamicImports` forces a SINGLE self-contained file — the
+            // sandbox server only serves `/runtime.js`, never split chunks.
+            rollupOptions: {
+              output: { inlineDynamicImports: true },
+            },
+          },
+        });
+      },
+    },
+  };
+}
+
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), buildRuntimeBundle()],
   build: {
     lib: {
       entry: resolve(__dirname, "src/index.ts"),