@grackle-ai/web-components 0.112.1 → 0.113.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grackle-ai/web-components",
-  "version": "0.112.1",
+  "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.1"
+    "@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: 30718c57404891eb5c6c96c935c4a6879170c963
+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

@@ -0,0 +1,19 @@
+Invoking: heft run --only build -- --clean 
+ ---- build started ---- 
+[build:typescript] Using TypeScript version 5.7.3
+[build:storybook-build] Building Storybook...
+[build:storybook-build] Storybook build completed.
+[build:vite-build] Starting Vite build...
+[build:lint] Using ESLint version 9.39.4
+vite v6.4.2 building for production...
+transforming...
+✓ 2716 modules transformed.
+rendering chunks...
+computing gzip size...
+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 (77.344s) ---- 
+-------------------- Finished (77.347s) --------------------

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

@@ -1,4 +1,4 @@
 Build cache hit.
-Cache key: 6ab1fbb7acd3281d7612ffe24dcc9982dd8c9061
+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

@@ -0,0 +1,124 @@
+Invoking: heft run --only test 
+The provided list of phases does not contain all phase dependencies. You may need to run the excluded phases manually.
+ ---- test started ---- 
+[test:vitest] Running vitest...
+
+ RUN  v3.2.4 /home/runner/work/grackle/grackle/packages/web-components
+
+ ✓ 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  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 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:
+    * <rootDir>/packages/server/dist/__mocks__/adapter-manager.js
+    * <rootDir>/packages/server/src/__mocks__/adapter-manager.ts
+
+jest-haste-map: duplicate manual mock found: auto-reconnect
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/auto-reconnect.js
+    * <rootDir>/packages/server/src/__mocks__/auto-reconnect.ts
+
+jest-haste-map: duplicate manual mock found: event-bus
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/event-bus.js
+    * <rootDir>/packages/server/src/__mocks__/event-bus.ts
+
+jest-haste-map: duplicate manual mock found: event-processor
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/event-processor.js
+    * <rootDir>/packages/server/src/__mocks__/event-processor.ts
+
+jest-haste-map: duplicate manual mock found: github-import
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/github-import.js
+    * <rootDir>/packages/server/src/__mocks__/github-import.ts
+
+jest-haste-map: duplicate manual mock found: lifecycle
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/lifecycle.js
+    * <rootDir>/packages/server/src/__mocks__/lifecycle.ts
+
+jest-haste-map: duplicate manual mock found: log-writer
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/log-writer.js
+    * <rootDir>/packages/server/src/__mocks__/log-writer.ts
+
+jest-haste-map: duplicate manual mock found: logger
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/logger.js
+    * <rootDir>/packages/server/src/__mocks__/logger.ts
+
+jest-haste-map: duplicate manual mock found: pipe-delivery
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/pipe-delivery.js
+    * <rootDir>/packages/server/src/__mocks__/pipe-delivery.ts
+
+jest-haste-map: duplicate manual mock found: processor-registry
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/processor-registry.js
+    * <rootDir>/packages/server/src/__mocks__/processor-registry.ts
+
+jest-haste-map: duplicate manual mock found: reanimate-agent
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/reanimate-agent.js
+    * <rootDir>/packages/server/src/__mocks__/reanimate-agent.ts
+
+jest-haste-map: duplicate manual mock found: session-recovery
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/session-recovery.js
+    * <rootDir>/packages/server/src/__mocks__/session-recovery.ts
+
+jest-haste-map: duplicate manual mock found: stream-hub
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/stream-hub.js
+    * <rootDir>/packages/server/src/__mocks__/stream-hub.ts
+
+jest-haste-map: duplicate manual mock found: stream-registry
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/stream-registry.js
+    * <rootDir>/packages/server/src/__mocks__/stream-registry.ts
+
+jest-haste-map: duplicate manual mock found: token-push
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/token-push.js
+    * <rootDir>/packages/server/src/__mocks__/token-push.ts
+
+jest-haste-map: duplicate manual mock found: utils/exec
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/utils/exec.js
+    * <rootDir>/packages/server/src/__mocks__/utils/exec.ts
+
+jest-haste-map: duplicate manual mock found: utils/format-gh-error
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/utils/format-gh-error.js
+    * <rootDir>/packages/server/src/__mocks__/utils/format-gh-error.ts
+
+jest-haste-map: duplicate manual mock found: utils/network
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/utils/network.js
+    * <rootDir>/packages/server/src/__mocks__/utils/network.ts
+
+[test:storybook-test] Storybook interaction tests completed.
+ ---- 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/hooks/types.ts

@@ -327,7 +327,7 @@ export interface UseWorkspacesResult {
     defaultPersonaId?: string,
     useWorktrees?: boolean,
     workingDirectory?: string,
-    onSuccess?: () => void,
+    onSuccess?: (workspace: Workspace) => void,
     onError?: (message: string) => void,
   ) => Promise<void>;
   /** Archive a workspace by ID. */

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/src/mocks/MockGrackleProvider.tsx

@@ -382,7 +382,7 @@ export function MockGrackleProvider({ children }: MockGrackleProviderProps): JSX
       defaultPersonaId?: string,
       useWorktrees?: boolean,
       workingDirectory?: string,
-      onSuccess?: () => void,
+      onSuccess?: (workspace: Workspace) => void,
       _onError?: (message: string) => void,
     ) => {
       console.log("[MockGrackle] createWorkspace", { name, description });
@@ -405,7 +405,7 @@ export function MockGrackleProvider({ children }: MockGrackleProviderProps): JSX
 
       setWorkspaces((prev) => [...prev, newWorkspace]);
       if (onSuccess) {
-        onSuccess();
+        onSuccess(newWorkspace);
       }
     },
     [nextId],