@grackle-ai/web-components 0.110.2 → 0.110.3

package/src/components/display/McpAppWidget.tsx

@@ -0,0 +1,358 @@
+import { useEffect, useRef, useState, type JSX } from "react";
+import {
+  AppBridge,
+  PostMessageTransport,
+  buildAllowAttribute,
+  type McpUiResourceCsp,
+  type McpUiResourcePermissions,
+} from "@modelcontextprotocol/ext-apps/app-bridge";
+import type { McpUiStyles } from "@modelcontextprotocol/ext-apps";
+import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
+import { grackleHostStyleVariables } from "../../utils/grackleHostStyleVariables.js";
+
+/** Notification method the outer sandbox proxy posts once it is ready. */
+const SANDBOX_PROXY_READY: string = "ui/notifications/sandbox-proxy-ready";
+
+/** Default host identity reported to widgets during the MCP Apps handshake. */
+const DEFAULT_HOST_INFO: Readonly<{ name: string; version: string }> = {
+  name: "Grackle",
+  version: "0.0.0",
+};
+
+/** URL schemes the default link handler is permitted to open. */
+const SAFE_LINK_PROTOCOLS: ReadonlySet<string> = new Set(["http:", "https:"]);
+
+/** True if `url` parses as an `http(s)` URL safe to open in a new browsing context. */
+function isSafeHttpUrl(url: string): boolean {
+  try {
+    return SAFE_LINK_PROTOCOLS.has(new URL(url).protocol);
+  } catch {
+    return false;
+  }
+}
+
+/** A tool call the widget asked the host to run on its behalf. */
+export interface McpAppWidgetCallToolParams {
+  name: string;
+  arguments?: Record<string, unknown>;
+}
+
+/**
+ * Props for {@link McpAppWidget}. Presentational only — all data and side
+ * effects arrive as props (no `useGrackle()`).
+ */
+export interface McpAppWidgetProps {
+  /** Widget HTML (`text/html;profile=mcp-app` contents) rendered in the sandbox. */
+  widgetHtml: string;
+  /** URL of the sandbox proxy, served from a DIFFERENT origin than the host. */
+  sandboxProxyUrl: string;
+  /** Tool input delivered to the widget via `ui/notifications/tool-input`. */
+  toolInput?: Record<string, unknown>;
+  /** Tool result delivered to the widget via `ui/notifications/tool-result`. */
+  toolResult?: CallToolResult;
+  /** Content-Security-Policy domains for the widget (from the resource `_meta.ui`). */
+  csp?: McpUiResourceCsp;
+  /** Permissions to grant the widget iframe (from the resource `_meta.ui`). */
+  permissions?: McpUiResourcePermissions;
+  /** Style variables for `hostContext.styles`; defaults to Grackle's live theme. */
+  hostStyleVariables?: McpUiStyles;
+  /** Color theme reported to the widget; defaults to the document's `data-theme`. */
+  theme?: "light" | "dark";
+  /** Host identity reported to the widget; defaults to {@link DEFAULT_HOST_INFO}. */
+  hostInfo?: { name: string; version: string };
+  /** Handle a tool call the widget requests (no MCP client is wired in T1). */
+  onCallTool?: (params: McpAppWidgetCallToolParams) => Promise<CallToolResult>;
+  /** Handle a link the widget asks the host to open. */
+  onOpenLink?: (url: string) => void;
+  /** Handle a message the widget asks the host to surface. */
+  onSendMessage?: (message: unknown) => void;
+  /** Handle a model-context update pushed by the widget. */
+  onUpdateModelContext?: (context: unknown) => void;
+  /** Notified when the widget requests a new size. */
+  onSizeChange?: (size: { width?: number; height?: number }) => void;
+}
+
+/** Resolve the active theme, preferring the prop, then the document, then light. */
+function resolveTheme(theme: McpAppWidgetProps["theme"]): "light" | "dark" {
+  if (theme) {
+    return theme;
+  }
+  if (typeof document !== "undefined") {
+    const attr: string | null = document.documentElement.getAttribute("data-theme");
+    if (attr === "dark") {
+      return "dark";
+    }
+  }
+  return "light";
+}
+
+/**
+ * Point the iframe at the sandbox proxy and resolve once the proxy reports
+ * ready. Returns `false` if the iframe was already loaded (guards against an
+ * accidental double-invoke) or if `signal` aborts before the proxy responds.
+ *
+ * The ready listener is bound to `signal` so it is removed on effect cleanup,
+ * and only messages from the proxy window AND its expected origin are accepted.
+ */
+function loadSandboxProxy(
+  iframe: HTMLIFrameElement,
+  sandboxProxyUrl: string,
+  proxyOrigin: string,
+  csp: McpUiResourceCsp | undefined,
+  permissions: McpUiResourcePermissions | undefined,
+  signal: AbortSignal,
+): Promise<boolean> {
+  if (iframe.src) {
+    return Promise.resolve(false);
+  }
+  iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
+  const allow: string = buildAllowAttribute(permissions);
+  if (allow) {
+    iframe.setAttribute("allow", allow);
+  }
+  const ready: Promise<boolean> = new Promise<boolean>((resolve) => {
+    const listener = (event: MessageEvent): void => {
+      const data: { method?: string } | undefined = event.data as { method?: string } | undefined;
+      if (
+        event.source === iframe.contentWindow &&
+        event.origin === proxyOrigin &&
+        data?.method === SANDBOX_PROXY_READY
+      ) {
+        resolve(true);
+      }
+    };
+    // `{ signal }` removes the listener automatically on effect cleanup, so it
+    // never outlives the component even if the proxy never responds.
+    window.addEventListener("message", listener, { signal });
+    signal.addEventListener("abort", () => resolve(false), { once: true });
+  });
+  const url: URL = new URL(sandboxProxyUrl, window.location.href);
+  if (csp) {
+    url.searchParams.set("csp", JSON.stringify(csp));
+  }
+  iframe.src = url.href;
+  return ready;
+}
+
+/** Swallow a settled promise's rejection (the host outlives transient widget errors). */
+function ignoreRejection(promise: Promise<unknown> | void): void {
+  Promise.resolve(promise).catch(() => undefined);
+}
+
+/**
+ * Renders an MCP Apps widget (untrusted HTML) inside a double-iframe sandbox and
+ * drives it over the `ext-apps` `AppBridge` postMessage protocol.
+ *
+ * The Grackle chat pane is not an MCP client, so this constructs the bridge with
+ * `null` (no client) and serves tool input/result from props. Wiring the bridge
+ * to a live MCP server is a later ticket (#1238).
+ */
+export function McpAppWidget(props: McpAppWidgetProps): JSX.Element {
+  const {
+    widgetHtml,
+    sandboxProxyUrl,
+    csp,
+    permissions,
+    hostStyleVariables,
+    theme,
+    hostInfo,
+    toolInput,
+    toolResult,
+    onCallTool,
+    onOpenLink,
+    onSendMessage,
+    onUpdateModelContext,
+    onSizeChange,
+  } = props;
+
+  // Fail fast on the isolation-breaking misconfiguration: the sandbox proxy MUST
+  // be a different origin than the host, otherwise `window.top` is reachable and
+  // the double-iframe guarantee is void.
+  if (
+    typeof window !== "undefined" &&
+    new URL(sandboxProxyUrl, window.location.href).origin === window.location.origin
+  ) {
+    throw new Error(
+      "McpAppWidget: sandboxProxyUrl must be served from a DIFFERENT origin than the host.",
+    );
+  }
+
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const bridgeRef = useRef<AppBridge | undefined>(undefined);
+  // Flips true once the ui/initialize handshake completes; the tool-input/result
+  // effects below key on it so late-arriving props still reach the widget.
+  const [initialized, setInitialized] = useState<boolean>(false);
+
+  // Keep the latest callbacks in a ref so the setup effect can be keyed only on
+  // the widget identity (re-running it would reload the iframe).
+  const handlers = useRef({ onCallTool, onOpenLink, onSendMessage, onUpdateModelContext, onSizeChange });
+  handlers.current = { onCallTool, onOpenLink, onSendMessage, onUpdateModelContext, onSizeChange };
+
+  // csp/permissions are part of the widget identity (they affect the proxy URL
+  // and sendSandboxResourceReady), so the iframe must reload when they change.
+  const cspKey: string = JSON.stringify(csp ?? null);
+  const permissionsKey: string = JSON.stringify(permissions ?? null);
+
+  useEffect(() => {
+    const iframe: HTMLIFrameElement | null = iframeRef.current;
+    if (!iframe) {
+      return undefined;
+    }
+
+    // Origin of the proxy, used to validate inbound proxy messages. The
+    // different-origin invariant is enforced at render time (see above).
+    const proxyOrigin: string = new URL(sandboxProxyUrl, window.location.href).origin;
+    const abortController: AbortController = new AbortController();
+    const { signal } = abortController;
+    // Read abort state through a function so TS flow-analysis can't narrow it to
+    // a constant across the awaits below (cleanup flips it asynchronously).
+    const isAborted = (): boolean => signal.aborted;
+    let resizeObserver: ResizeObserver | undefined;
+
+    const run = async (): Promise<void> => {
+      const firstTime: boolean = await loadSandboxProxy(
+        iframe,
+        sandboxProxyUrl,
+        proxyOrigin,
+        csp,
+        permissions,
+        signal,
+      );
+      if (!firstTime || isAborted()) {
+        return;
+      }
+
+      const bridge = new AppBridge(
+        null,
+        hostInfo ?? DEFAULT_HOST_INFO,
+        { openLinks: {}, updateModelContext: { text: {} } },
+        {
+          hostContext: {
+            theme: resolveTheme(theme),
+            platform: "web",
+            styles: { variables: hostStyleVariables ?? grackleHostStyleVariables() },
+            containerDimensions: { maxHeight: 6000 },
+            displayMode: "inline",
+            availableDisplayModes: ["inline"],
+          },
+        },
+      );
+      bridgeRef.current = bridge;
+
+      bridge.oncalltool = async (params): Promise<CallToolResult> => {
+        const handler = handlers.current.onCallTool;
+        if (handler) {
+          return handler({ name: params.name, arguments: params.arguments });
+        }
+        return { isError: true, content: [{ type: "text", text: "No MCP client is connected to this host." }] };
+      };
+      bridge.onopenlink = async ({ url }): Promise<Record<string, never>> => {
+        const handler = handlers.current.onOpenLink;
+        if (handler) {
+          handler(url);
+        } else if (isSafeHttpUrl(url)) {
+          // Only http(s) — never javascript:/data: from an untrusted widget.
+          window.open(url, "_blank", "noopener,noreferrer");
+        }
+        return {};
+      };
+      bridge.onmessage = async (params): Promise<Record<string, never>> => {
+        handlers.current.onSendMessage?.(params);
+        return {};
+      };
+      bridge.onupdatemodelcontext = async (params): Promise<Record<string, never>> => {
+        handlers.current.onUpdateModelContext?.(params);
+        return {};
+      };
+      bridge.onsizechange = ({ width, height }): void => {
+        if (width !== undefined) {
+          iframe.style.minWidth = `min(${width}px, 100%)`;
+        }
+        if (height !== undefined) {
+          iframe.style.height = `${height}px`;
+        }
+        handlers.current.onSizeChange?.({ width, height });
+      };
+      bridge.onrequestdisplaymode = async (): Promise<{ mode: "inline" }> => ({ mode: "inline" });
+
+      const handshakeComplete: Promise<void> = new Promise<void>((resolve) => {
+        bridge.oninitialized = (): void => resolve();
+      });
+
+      await bridge.connect(new PostMessageTransport(iframe.contentWindow as Window, iframe.contentWindow as Window));
+      if (isAborted()) {
+        return;
+      }
+      await bridge.sendSandboxResourceReady({ html: widgetHtml, csp, permissions });
+      await handshakeComplete;
+      if (isAborted()) {
+        return;
+      }
+      // Tool input/result are delivered (and kept in sync) by the effects below
+      // now that the handshake is complete.
+      setInitialized(true);
+
+      resizeObserver = new ResizeObserver(([entry]) => {
+        const width: number = Math.round(entry.contentRect.width);
+        if (width > 0) {
+          ignoreRejection(bridge.sendHostContextChange({ containerDimensions: { width, maxHeight: 6000 } }));
+        }
+      });
+      resizeObserver.observe(iframe);
+    };
+
+    run().catch(() => undefined);
+
+    return (): void => {
+      abortController.abort();
+      setInitialized(false);
+      resizeObserver?.disconnect();
+      const bridge: AppBridge | undefined = bridgeRef.current;
+      bridgeRef.current = undefined;
+      if (bridge) {
+        ignoreRejection(bridge.teardownResource({}));
+      }
+      iframe.removeAttribute("src");
+    };
+    // Setup is keyed on the widget identity (html + proxy URL + csp/permissions).
+    // Tool input/result and theme updates flow via the dedicated effects below.
+  }, [widgetHtml, sandboxProxyUrl, cspKey, permissionsKey]);
+
+  // Deliver tool input after the handshake, and whenever it changes afterwards.
+  useEffect(() => {
+    if (!initialized) {
+      return;
+    }
+    ignoreRejection(bridgeRef.current?.sendToolInput({ arguments: toolInput ?? {} }));
+  }, [initialized, toolInput]);
+
+  // Deliver the tool result once it is available, and whenever it changes. The
+  // host commonly renders the widget before the result exists.
+  useEffect(() => {
+    if (!initialized || !toolResult) {
+      return;
+    }
+    ignoreRejection(bridgeRef.current?.sendToolResult(toolResult));
+  }, [initialized, toolResult]);
+
+  // Propagate theme + style-variable changes to a live widget. When
+  // hostStyleVariables is omitted, the Grackle token values themselves change
+  // with the theme, so the resolved variables are re-sent too.
+  useEffect(() => {
+    ignoreRejection(
+      bridgeRef.current?.sendHostContextChange({
+        theme: resolveTheme(theme),
+        styles: { variables: hostStyleVariables ?? grackleHostStyleVariables() },
+      }),
+    );
+  }, [theme, hostStyleVariables]);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      data-testid="mcp-app-widget"
+      title="MCP App widget"
+      style={{ width: "100%", border: "none", display: "block" }}
+    />
+  );
+}

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";
 
 export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button.js";
 export type { TooltipProps, TooltipPlacement } from "./Tooltip.js";
 export type { SessionAttemptSelectorProps } from "./SessionAttemptSelector.js";
+export type { McpAppWidgetProps, McpAppWidgetCallToolParams } from "./McpAppWidget.js";

package/src/index.ts

@@ -19,10 +19,12 @@ export { useDagLayout } from "./components/dag/useDagLayout.js";
 export {
   Breadcrumbs, Button, CopyButton, DemoBanner, SplitButton,
   EventRenderer, ConfirmDialog, Skeleton, SkeletonText, SkeletonCard,
-  Spinner, SplashScreen, Tooltip,
+  Spinner, SplashScreen, Tooltip, McpAppWidget,
 } from "./components/display/index.js";
 export type { ButtonProps, ButtonVariant, ButtonSize } from "./components/display/index.js";
 export type { TooltipProps, TooltipPlacement } from "./components/display/index.js";
+export type { McpAppWidgetProps, McpAppWidgetCallToolParams } from "./components/display/index.js";
+export { grackleHostStyleVariables } from "./utils/grackleHostStyleVariables.js";
 export { EventStream } from "./components/display/EventStream.js";
 export { EventHoverRow } from "./components/display/EventHoverRow.js";
 export type { EventHoverRowProps } from "./components/display/EventHoverRow.js";

package/src/utils/grackleHostStyleVariables.test.ts

@@ -0,0 +1,25 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach } from "vitest";
+import { grackleHostStyleVariables } from "./grackleHostStyleVariables.js";
+
+describe("grackleHostStyleVariables", () => {
+  afterEach(() => {
+    document.documentElement.removeAttribute("style");
+  });
+
+  it("always returns the MCP-standard fallback variables", () => {
+    const vars = grackleHostStyleVariables();
+    expect(vars["--color-background-primary"]).toBeDefined();
+    expect(vars["--color-text-primary"]).toBeDefined();
+    expect(vars["--font-sans"]).toBeDefined();
+    expect(vars["--border-radius-md"]).toBeDefined();
+  });
+
+  it("maps a live Grackle token onto its MCP-standard name", () => {
+    document.documentElement.style.setProperty("--bg-base", "rgb(1, 2, 3)");
+    document.documentElement.style.setProperty("--text-primary", "rgb(4, 5, 6)");
+    const vars = grackleHostStyleVariables();
+    expect(vars["--color-background-primary"]).toBe("rgb(1, 2, 3)");
+    expect(vars["--color-text-primary"]).toBe("rgb(4, 5, 6)");
+  });
+});

package/src/utils/grackleHostStyleVariables.ts

@@ -0,0 +1,134 @@
+import type { McpUiStyles } from "@modelcontextprotocol/ext-apps";
+
+/**
+ * MCP Apps widgets consume a fixed, standard set of CSS custom properties
+ * (`--color-*`, `--font-*`, `--border-radius-*`, `--shadow-*`). Grackle's own
+ * theme tokens live under different names (`--bg-*`, `--text-*`, `--radius-*`) in
+ * `src/styles/theme.scss`. This module exposes Grackle's current theme to widgets
+ * under the MCP-standard names so a widget renders coherently inside the host.
+ *
+ * `McpUiStyles` requires the complete variable set, so we seed from the standard
+ * theme-adaptive defaults (verbatim from modelcontextprotocol/ext-apps
+ * examples/basic-host/src/host-styles.ts, commit 9a37ad7) and override the subset
+ * we can source from Grackle's live theme.
+ */
+
+/** Complete MCP-standard default style variables (theme-adaptive via `light-dark()`). */
+const DEFAULT_MCP_STYLES: McpUiStyles = {
+  "--color-background-primary": "light-dark(#ffffff, #1a1a1a)",
+  "--color-background-secondary": "light-dark(#f5f5f5, #2d2d2d)",
+  "--color-background-tertiary": "light-dark(#e5e5e5, #404040)",
+  "--color-background-inverse": "light-dark(#1a1a1a, #ffffff)",
+  "--color-background-ghost": "light-dark(rgba(255,255,255,0), rgba(26,26,26,0))",
+  "--color-background-info": "light-dark(#eff6ff, #1e3a5f)",
+  "--color-background-danger": "light-dark(#fef2f2, #7f1d1d)",
+  "--color-background-success": "light-dark(#f0fdf4, #14532d)",
+  "--color-background-warning": "light-dark(#fefce8, #713f12)",
+  "--color-background-disabled": "light-dark(rgba(255,255,255,0.5), rgba(26,26,26,0.5))",
+  "--color-text-primary": "light-dark(#1f2937, #f3f4f6)",
+  "--color-text-secondary": "light-dark(#6b7280, #9ca3af)",
+  "--color-text-tertiary": "light-dark(#9ca3af, #6b7280)",
+  "--color-text-inverse": "light-dark(#f3f4f6, #1f2937)",
+  "--color-text-ghost": "light-dark(rgba(107,114,128,0.5), rgba(156,163,175,0.5))",
+  "--color-text-info": "light-dark(#1d4ed8, #60a5fa)",
+  "--color-text-danger": "light-dark(#b91c1c, #f87171)",
+  "--color-text-success": "light-dark(#15803d, #4ade80)",
+  "--color-text-warning": "light-dark(#a16207, #fbbf24)",
+  "--color-text-disabled": "light-dark(rgba(31,41,55,0.5), rgba(243,244,246,0.5))",
+  "--color-border-primary": "light-dark(#e5e7eb, #404040)",
+  "--color-border-secondary": "light-dark(#d1d5db, #525252)",
+  "--color-border-tertiary": "light-dark(#f3f4f6, #374151)",
+  "--color-border-inverse": "light-dark(rgba(255,255,255,0.3), rgba(0,0,0,0.3))",
+  "--color-border-ghost": "light-dark(rgba(229,231,235,0), rgba(64,64,64,0))",
+  "--color-border-info": "light-dark(#93c5fd, #1e40af)",
+  "--color-border-danger": "light-dark(#fca5a5, #991b1b)",
+  "--color-border-success": "light-dark(#86efac, #166534)",
+  "--color-border-warning": "light-dark(#fde047, #854d0e)",
+  "--color-border-disabled": "light-dark(rgba(229,231,235,0.5), rgba(64,64,64,0.5))",
+  "--color-ring-primary": "light-dark(#3b82f6, #60a5fa)",
+  "--color-ring-secondary": "light-dark(#6b7280, #9ca3af)",
+  "--color-ring-inverse": "light-dark(#ffffff, #1f2937)",
+  "--color-ring-info": "light-dark(#2563eb, #3b82f6)",
+  "--color-ring-danger": "light-dark(#dc2626, #ef4444)",
+  "--color-ring-success": "light-dark(#16a34a, #22c55e)",
+  "--color-ring-warning": "light-dark(#ca8a04, #eab308)",
+  "--font-sans": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  "--font-mono": "ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', monospace",
+  "--font-weight-normal": "400",
+  "--font-weight-medium": "500",
+  "--font-weight-semibold": "600",
+  "--font-weight-bold": "700",
+  "--font-text-xs-size": "0.75rem",
+  "--font-text-sm-size": "0.875rem",
+  "--font-text-md-size": "1rem",
+  "--font-text-lg-size": "1.125rem",
+  "--font-heading-xs-size": "0.75rem",
+  "--font-heading-sm-size": "0.875rem",
+  "--font-heading-md-size": "1rem",
+  "--font-heading-lg-size": "1.25rem",
+  "--font-heading-xl-size": "1.5rem",
+  "--font-heading-2xl-size": "1.875rem",
+  "--font-heading-3xl-size": "2.25rem",
+  "--font-text-xs-line-height": "1.4",
+  "--font-text-sm-line-height": "1.4",
+  "--font-text-md-line-height": "1.5",
+  "--font-text-lg-line-height": "1.5",
+  "--font-heading-xs-line-height": "1.4",
+  "--font-heading-sm-line-height": "1.4",
+  "--font-heading-md-line-height": "1.4",
+  "--font-heading-lg-line-height": "1.3",
+  "--font-heading-xl-line-height": "1.25",
+  "--font-heading-2xl-line-height": "1.2",
+  "--font-heading-3xl-line-height": "1.1",
+  "--border-radius-xs": "2px",
+  "--border-radius-sm": "4px",
+  "--border-radius-md": "6px",
+  "--border-radius-lg": "8px",
+  "--border-radius-xl": "12px",
+  "--border-radius-full": "9999px",
+  "--border-width-regular": "1px",
+  "--shadow-hairline": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  "--shadow-sm": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+  "--shadow-md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+  "--shadow-lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+};
+
+/** MCP-standard variable name -> Grackle theme token to read its value from. */
+const GRACKLE_TOKEN_BY_MCP_NAME: Readonly<Record<string, string>> = {
+  "--color-background-primary": "--bg-base",
+  "--color-background-secondary": "--bg-surface",
+  "--color-background-tertiary": "--bg-elevated",
+  "--color-text-primary": "--text-primary",
+  "--color-text-secondary": "--text-secondary",
+  "--color-text-tertiary": "--text-tertiary",
+  "--color-border-primary": "--border-primary",
+  "--color-border-secondary": "--border-subtle",
+  "--font-sans": "--font-sans",
+  "--font-mono": "--font-mono",
+  "--border-radius-sm": "--radius-sm",
+  "--border-radius-md": "--radius-md",
+  "--border-radius-lg": "--radius-lg",
+  "--border-radius-full": "--radius-full",
+};
+
+/**
+ * Build the MCP-standard style-variable map from Grackle's live theme, falling
+ * back to theme-adaptive defaults for any token that cannot be read.
+ *
+ * @returns Style variables suitable for `hostContext.styles.variables`.
+ */
+export function grackleHostStyleVariables(): McpUiStyles {
+  const out: McpUiStyles = { ...DEFAULT_MCP_STYLES };
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return out;
+  }
+  const computed: CSSStyleDeclaration = window.getComputedStyle(document.documentElement);
+  const writable: Record<string, string> = out as Record<string, string>;
+  for (const [mcpName, grackleToken] of Object.entries(GRACKLE_TOKEN_BY_MCP_NAME)) {
+    const value: string = computed.getPropertyValue(grackleToken).trim();
+    if (value) {
+      writable[mcpName] = value;
+    }
+  }
+  return out;
+}

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

@@ -1,5 +1,5 @@
 {
-  "cacheVersion": "9.39.4_v22.22.2",
+  "cacheVersion": "9.39.4_v22.22.3",
   "fileVersions": [
     [
       "context/ToastContext.tsx",
@@ -173,9 +173,17 @@
       "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",
-      "Da4l2BdBIB2GK67l9c5jGgd3gN0=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "RDb8Fh+7051CrG4TyqRFZAV2xes=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/display/EventHoverRow.tsx",
@@ -471,7 +479,7 @@
     ],
     [
       "index.ts",
-      "FNRhCqrVCRyTY3w5VAdlXei++8I=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+      "XEgfwrVvQNW7DJQmsu4ZpsFAvgQ=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
     [
       "components/index.ts",
@@ -525,6 +533,14 @@
       "components/display/FloatingActionBar.stories.tsx",
       "V+eJty0ZPmcq/XfekRbWY23Esc4=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
     ],
+    [
+      "components/display/McpAppWidget.stories.tsx",
+      "+4zt3cRpRSDqas5f+/6UX9R/X8k=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
+    ],
+    [
+      "components/display/McpAppWidget.test.tsx",
+      "ScnWU8DBqJT3ERrmR67s23IJwCU=_orHdc0vDZqoYfD6TIDl1Za3EAL4="
+    ],
     [
       "components/display/SessionAttemptSelector.stories.tsx",
       "7zEdkt5nss2kC13o9AffEarsIt0=_7W3TvvwZxl0TGST6/dyQa8DKDDc="
@@ -793,6 +809,10 @@
       "utils/eventContent.test.ts",
       "tDSkuhHlQ1SzQLUUM48dGJx+3vM=_orHdc0vDZqoYfD6TIDl1Za3EAL4="
     ],
+    [
+      "utils/grackleHostStyleVariables.test.ts",
+      "eQMyEKIM+oIyKdVdiJXOk+k9k50=_orHdc0vDZqoYfD6TIDl1Za3EAL4="
+    ],
     [
       "utils/route-config.test.ts",
       "AX9zgQvqbwSvAfHCmWgQWq6HiZY=_orHdc0vDZqoYfD6TIDl1Za3EAL4="
@@ -806,5 +826,5 @@
       "hL9OyAvsoDAPSh4+TPUEgQrdYMI=_orHdc0vDZqoYfD6TIDl1Za3EAL4="
     ]
   ],
-  "filesHash": "HtegKh_bR_JPzWNcQqTeDw"
+  "filesHash": "PEVC244sy61mI2jL-TojYg"
 }