@grackle-ai/web-components 0.112.2 → 0.113.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grackle-ai/web-components",
-  "version": "0.112.2",
+  "version": "0.113.0",
   "description": "Presentational React component library for the Grackle web UI",
   "license": "MIT",
   "sideEffects": [
@@ -46,7 +46,7 @@
     "remark-gfm": "^4.0.0",
     "lucide-react": "~0.474.0",
     "react-router": "^7.0.0",
-    "@grackle-ai/common": "0.112.2"
+    "@grackle-ai/common": "0.113.0"
   },
   "devDependencies": {
     "@rushstack/heft": "1.2.7",

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

@@ -1,4 +1,4 @@
 Build cache hit.
-Cache key: 1421806d07f6b0c455deca4bf89a6412726ffd8b
+Cache key: 05ec67b10f932bdbe295aab3f4465cf0d26cb485
 Clearing cached folders: dist, storybook-static, .rush/temp/operation/_phase_build
 Successfully restored output from the build cache.

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

@@ -10,9 +10,10 @@ transforming...
 ✓ 2716 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.css    158.47 kB │ gzip:  20.60 kB
-dist/index.js   1,591.31 kB │ gzip: 401.72 kB
-✓ built in 5.69s
+dist/index.css                   158.47 kB │ gzip:  20.60 kB
+dist/McpAppWidget-CSX2W2Vb.js    205.28 kB │ gzip:  47.19 kB
+dist/index.js                  1,385.24 kB │ gzip: 354.56 kB
+✓ built in 5.92s
 [build:vite-build] Vite build completed.
- ---- build finished (72.731s) ---- 
--------------------- Finished (72.734s) --------------------
+ ---- build finished (77.344s) ---- 
+-------------------- Finished (77.347s) --------------------

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

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

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

@@ -5,30 +5,29 @@ 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) 60ms
- ✓ src/utils/eventContent.test.ts (38 tests) 155ms
- ✓ src/utils/dashboard.test.ts (4 tests) 37ms
- ✓ src/utils/route-config.test.ts (23 tests) 50ms
- ✓ src/utils/scrollUtils.test.ts (11 tests) 20ms
- ✓ src/utils/breadcrumbs.test.ts (18 tests) 65ms
- ✓ src/components/tools/classifyTool.test.ts (6 tests) 22ms
- ✓ src/components/tools/toolCardHelpers.test.ts (10 tests) 28ms
- ✓ src/utils/assetUrl.test.ts (3 tests) 18ms
- ✓ src/components/display/extractText.test.tsx (8 tests) 17ms
- ✓ src/components/editable/useEditableField.test.tsx (17 tests) 206ms
- ✓ src/hooks/useEventSelection.test.ts (13 tests) 146ms
- ✓ src/components/notifications/UpdateBanner.test.tsx (4 tests) 199ms
- ✓ src/utils/grackleHostStyleVariables.test.ts (2 tests) 445ms
-   ✓ grackleHostStyleVariables > always returns the MCP-standard fallback variables  416ms
- ✓ src/components/display/McpAppWidget.test.tsx (3 tests) 258ms
+ ✓ src/utils/sessionEvents.test.ts (14 tests) 36ms
+ ✓ src/utils/eventContent.test.ts (38 tests) 110ms
+ ✓ src/utils/dashboard.test.ts (4 tests) 7ms
+ ✓ src/utils/route-config.test.ts (23 tests) 21ms
+ ✓ src/utils/scrollUtils.test.ts (11 tests) 49ms
+ ✓ src/utils/breadcrumbs.test.ts (18 tests) 88ms
+ ✓ src/components/tools/classifyTool.test.ts (6 tests) 17ms
+ ✓ src/utils/assetUrl.test.ts (3 tests) 33ms
+ ✓ src/components/tools/toolCardHelpers.test.ts (10 tests) 29ms
+ ✓ src/components/display/extractText.test.tsx (8 tests) 31ms
+ ✓ src/components/editable/useEditableField.test.tsx (17 tests) 273ms
+ ✓ src/hooks/useEventSelection.test.ts (13 tests) 121ms
+ ✓ src/components/notifications/UpdateBanner.test.tsx (4 tests) 155ms
+ ✓ src/utils/grackleHostStyleVariables.test.ts (2 tests) 306ms
+ ✓ src/components/display/McpAppWidget.test.tsx (3 tests) 383ms
 
  Test Files  15 passed (15)
       Tests  174 passed (174)
-   Start at  23:48:14
-   Duration  16.41s (transform 2.75s, setup 0ms, collect 18.15s, tests 1.73s, environment 14.38s, prepare 5.42s)
+   Start at  03:06:05
+   Duration  16.86s (transform 3.49s, setup 0ms, collect 18.02s, tests 1.66s, environment 13.18s, prepare 5.11s)
 
 [test:vitest] Vitest completed.
-[test:storybook-test] Starting Storybook static server on port 36655...
+[test:storybook-test] Starting Storybook static server on port 33461...
 [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 +120,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 (113.186s) ---- 
--------------------- Finished (113.19s) --------------------
+ ---- test finished (118.259s) ---- 
+-------------------- Finished (118.269s) --------------------

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

@@ -170,6 +170,28 @@ export const MarkdownParagraphWrapping: Story = {
   },
 };
 
+/** Widget event renders the lazy-loaded MCP App host iframe. */
+export const WidgetEvent: Story = {
+  args: {
+    event: makeEvent({
+      eventType: "widget",
+      content: JSON.stringify({
+        resourceUri: "ui://grackle/hello-widget",
+        toolName: "show_hello_widget",
+        html: "<!doctype html><html><body><div class=\"card\">widget</div></body></html>",
+        toolInput: { message: "hi" },
+        toolResult: { content: [{ type: "text", text: "ok" }] },
+      }),
+    }),
+    // Different origin than Storybook (6006) so McpAppWidget's same-origin guard passes.
+    sandboxProxyUrl: "http://localhost:6007/sandbox.html",
+  },
+  play: async ({ canvas }) => {
+    // McpAppWidget is lazy-loaded behind Suspense; findByTestId waits for the chunk.
+    await expect(await canvas.findByTestId("mcp-app-widget")).toBeInTheDocument();
+  },
+};
+
 /** User input events render as markdown (bold, lists, inline code) inside the bubble. */
 export const UserMessageMarkdown: Story = {
   args: {

package/src/components/display/EventRenderer.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useState, type JSX } from "react";
+import { type ReactNode, useState, lazy, Suspense, type LazyExoticComponent, type ComponentType, type JSX } from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import Markdown from "react-markdown";
 import rehypePrismPlus from "rehype-prism-plus/common";
@@ -7,9 +7,19 @@ import type { SessionEvent } from "../../hooks/types.js";
 import { formatTokens, formatCost } from "../../utils/format.js";
 import { ICON_SM } from "../../utils/iconSize.js";
 import { ToolCard } from "../tools/ToolCard.js";
+import type { McpAppWidgetProps } from "./McpAppWidget.js";
+import type { McpUiResourceCsp } from "@modelcontextprotocol/ext-apps/app-bridge";
+import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
 import { CopyButton } from "./CopyButton.js";
 import styles from "./EventRenderer.module.scss";
 
+// Lazy-loaded (and intentionally NOT re-exported from the package barrel) so the
+// heavy ext-apps AppBridge is code-split into an async chunk loaded only when a
+// widget actually renders — keeps the main chat bundle under the chunk-size cap.
+const McpAppWidget: LazyExoticComponent<ComponentType<McpAppWidgetProps>> = lazy(() =>
+  import("./McpAppWidget.js").then((m) => ({ default: m.McpAppWidget })),
+);
+
 /** Props for the EventRenderer component. */
 interface Props {
   event: SessionEvent;
@@ -17,6 +27,8 @@ interface Props {
   toolUseCtx?: { tool: string; args: unknown; detailedResult?: string };
   /** True when a tool_use completed but has no tool_result (e.g. Claude Code text-result pattern). */
   settled?: boolean;
+  /** Sandbox proxy origin URL for rendering MCP Apps widget events (different origin than the app). */
+  sandboxProxyUrl?: string;
 }
 
 // --- Individual event type renderers ---
@@ -201,10 +213,40 @@ function DefaultEvent({ content }: { content: string }): JSX.Element {
 // --- Main component ---
 
 /** Renders a single session event, dispatching to the appropriate type-specific renderer. */
-export function EventRenderer({ event, toolUseCtx, settled }: Props): JSX.Element {
+export function EventRenderer({ event, toolUseCtx, settled, sandboxProxyUrl }: Props): JSX.Element {
   const time = new Date(event.timestamp).toLocaleTimeString();
 
   switch (event.eventType) {
+    case "widget": {
+      // MCP Apps widget event (pushed by the broker). Self-contained: HTML +
+      // tool input/result. Renders in the cross-origin sandbox via McpAppWidget.
+      if (!sandboxProxyUrl) {
+        return <DefaultEvent content={event.content} />;
+      }
+      let payload: {
+        html?: string;
+        csp?: McpUiResourceCsp;
+        toolInput?: Record<string, unknown>;
+        toolResult?: CallToolResult;
+      } = {};
+      try {
+        payload = JSON.parse(event.content) as typeof payload;
+      } catch { /* malformed widget payload — fall back */ }
+      if (!payload.html) {
+        return <DefaultEvent content={event.content} />;
+      }
+      return (
+        <Suspense fallback={<DefaultEvent content="Loading widget..." />}>
+          <McpAppWidget
+            widgetHtml={payload.html}
+            sandboxProxyUrl={sandboxProxyUrl}
+            csp={payload.csp}
+            toolInput={payload.toolInput}
+            toolResult={payload.toolResult}
+          />
+        </Suspense>
+      );
+    }
     case "system": {
       // Detect system context events via the raw metadata marker
       if (event.raw) {

package/src/components/display/EventStream.tsx

@@ -88,6 +88,8 @@ interface EventStreamProps {
    * Receives the target session ID and the formatted envelope text.
    */
   onForward?: (sessionId: string, text: string) => Promise<void>;
+  /** Sandbox proxy origin URL for rendering MCP Apps widget events. */
+  sandboxProxyUrl?: string;
 }
 
 /**
@@ -104,6 +106,7 @@ export function EventStream({
   environments,
   personas,
   onForward,
+  sandboxProxyUrl,
 }: EventStreamProps): JSX.Element {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [isReversed, setIsReversed] = useState(readStoredDirection);
@@ -303,7 +306,7 @@ export function EventStream({
                   onToggle={(shiftKey) => { selection.toggleEvent(originalIndex, shiftKey); }}
                   onCopied={() => { onShowToast?.("Copied to clipboard", "success"); }}
                 >
-                  <EventRenderer event={event} toolUseCtx={event.toolUseCtx} settled={event.settled} />
+                  <EventRenderer event={event} toolUseCtx={event.toolUseCtx} settled={event.settled} sandboxProxyUrl={sandboxProxyUrl} />
                 </EventHoverRow>
               </motion.div>
             );

package/src/components/display/index.ts

@@ -14,7 +14,9 @@ export { Spinner } from "./Spinner.js";
 export { SplashScreen } from "./SplashScreen.js";
 export { Tooltip } from "./Tooltip.js";
 export { SessionAttemptSelector } from "./SessionAttemptSelector.js";
-export { McpAppWidget } from "./McpAppWidget.js";
+// NOTE: McpAppWidget is intentionally NOT re-exported as a value — EventRenderer
+// lazy-imports it directly so the heavy ext-apps AppBridge stays code-split out of
+// the main chat bundle. Its prop types remain exported below for consumers.
 
 export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button.js";
 export type { TooltipProps, TooltipPlacement } from "./Tooltip.js";

package/src/index.ts

@@ -19,7 +19,7 @@ export { useDagLayout } from "./components/dag/useDagLayout.js";
 export {
   Breadcrumbs, Button, CopyButton, DemoBanner, SplitButton,
   EventRenderer, ConfirmDialog, Skeleton, SkeletonText, SkeletonCard,
-  Spinner, SplashScreen, Tooltip, McpAppWidget,
+  Spinner, SplashScreen, Tooltip,
 } from "./components/display/index.js";
 export type { ButtonProps, ButtonVariant, ButtonSize } from "./components/display/index.js";
 export type { TooltipProps, TooltipPlacement } from "./components/display/index.js";

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

@@ -145,9 +145,17 @@
       "components/tools/ToolCard.tsx",
       "daOT8+qSG8CTNk+//LXtKNBcFfE=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
+    [
+      "utils/grackleHostStyleVariables.ts",
+      "4GAn+eMbEHJoOb1z01LPtk6nJ7U=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+    ],
+    [
+      "components/display/McpAppWidget.tsx",
+      "FHPzMKgR6sTY4eFNQv5BPGbIhBI=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+    ],
     [
       "components/display/EventRenderer.tsx",
-      "baXzKtFkiMslyFhdBCwrXQHmfZ8=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "PHybhj9WzoyCcHMrbT8OHMiXuQI=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/display/ConfirmDialog.tsx",
@@ -177,17 +185,9 @@
       "components/display/SessionAttemptSelector.tsx",
       "3P6Dn2a9NBqHlUcL32V4cbFlQnA=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
-    [
-      "utils/grackleHostStyleVariables.ts",
-      "4GAn+eMbEHJoOb1z01LPtk6nJ7U=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
-    ],
-    [
-      "components/display/McpAppWidget.tsx",
-      "FHPzMKgR6sTY4eFNQv5BPGbIhBI=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
-    ],
     [
       "components/display/index.ts",
-      "RDb8Fh+7051CrG4TyqRFZAV2xes=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "u8VYHmtVaFCzY50HZB9BaToo/Uk=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/display/EventHoverRow.tsx",
@@ -223,7 +223,7 @@
     ],
     [
       "components/display/EventStream.tsx",
-      "nUUukNWjhiFGA12f1MdOlE8Y3No=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "zU7SmOEHQotfmTvaRF0f7x3kIzo=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/editable/useEditableField.ts",
@@ -483,7 +483,7 @@
     ],
     [
       "index.ts",
-      "Lbo23h9QnwqCWZmf6x/aafniLGY=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "ahBkv6xGAgyekHPIzGpNiJ2T2lI=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/index.ts",
@@ -527,7 +527,7 @@
     ],
     [
       "components/display/EventRenderer.stories.tsx",
-      "TJiKZNxPldFn9X6rDkmjlIjwp1k=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "vwvW6L580d9RGMBXR6UIB78YLAg=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/display/EventStream.stories.tsx",