@assistant-ui/react 0.14.6 → 0.14.8

package/src/primitives/composer/ComposerInput.test.tsx

@@ -1,13 +1,14 @@
 /**
  * @vitest-environment jsdom
  */
-import { act } from "react";
+import { act, type ComponentProps } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { ComposerPrimitiveInput } from "./ComposerInput";
 
 const setText = vi.fn<(text: string) => void>();
 const setCursorPosition = vi.fn<(pos: number) => void>();
+const sendSpy = vi.fn<(options?: { steer?: boolean }) => void>();
 
 const composerState = {
   isEditing: true,
@@ -15,6 +16,7 @@ const composerState = {
   type: "thread" as const,
   isEmpty: true,
   canCancel: false,
+  canSend: true,
   dictation: undefined as undefined | { inputDisabled: boolean },
 };
 
@@ -39,7 +41,7 @@ vi.mock("@assistant-ui/store", () => {
       setText,
       getState: () => composerState,
       cancel: () => {},
-      send: () => {},
+      send: sendSpy,
       addAttachment: async () => {},
     }),
     thread: () => ({
@@ -115,22 +117,73 @@ const fireCompositionEnd = (textarea: HTMLTextAreaElement, value: string) => {
   );
 };
 
+const fireKeyDown = (
+  textarea: HTMLTextAreaElement,
+  opts: {
+    key?: string;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    isComposing?: boolean;
+  } = {},
+): KeyboardEvent => {
+  const event = new KeyboardEvent("keydown", {
+    bubbles: true,
+    cancelable: true,
+    key: opts.key ?? "Enter",
+    shiftKey: opts.shiftKey ?? false,
+    ctrlKey: opts.ctrlKey ?? false,
+    metaKey: opts.metaKey ?? false,
+    isComposing: opts.isComposing ?? false,
+  });
+  textarea.dispatchEvent(event);
+  return event;
+};
+
+const setMatchMedia = (matches: boolean) => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    configurable: true,
+    value: (query: string) => ({
+      matches,
+      media: query,
+      onchange: null,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  });
+};
+
 describe("ComposerPrimitiveInput", () => {
   let container: HTMLDivElement;
   let root: Root;
+  let requestSubmitSpy: ReturnType<
+    typeof vi.fn<(submitter?: HTMLElement | null) => void>
+  >;
+  let originalRequestSubmit: HTMLFormElement["requestSubmit"] | undefined;
 
   beforeEach(() => {
     setText.mockReset();
     setCursorPosition.mockReset();
+    sendSpy.mockReset();
     composerState.isEditing = true;
     composerState.text = "";
     composerState.isEmpty = true;
+    composerState.canSend = true;
     composerState.dictation = undefined;
     threadState.isDisabled = false;
     threadState.isRunning = false;
     threadState.capabilities = { queue: false, attachments: false };
     pluginRegistry = null;
     activeAria = null;
+    setMatchMedia(false);
+
+    requestSubmitSpy = vi.fn<(submitter?: HTMLElement | null) => void>();
+    originalRequestSubmit = HTMLFormElement.prototype.requestSubmit;
+    HTMLFormElement.prototype.requestSubmit = requestSubmitSpy;
 
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -142,12 +195,24 @@ describe("ComposerPrimitiveInput", () => {
       root.unmount();
     });
     container.remove();
+    if (originalRequestSubmit) {
+      HTMLFormElement.prototype.requestSubmit = originalRequestSubmit;
+    } else {
+      delete (HTMLFormElement.prototype as Partial<HTMLFormElement>)
+        .requestSubmit;
+    }
     vi.restoreAllMocks();
   });
 
-  const mount = async () => {
+  const mount = async (
+    props: Partial<ComponentProps<typeof ComposerPrimitiveInput>> = {},
+  ) => {
     await act(async () => {
-      root.render(<ComposerPrimitiveInput data-testid="input" />);
+      root.render(
+        <form>
+          <ComposerPrimitiveInput data-testid="input" {...props} />
+        </form>,
+      );
     });
     const textarea = container.querySelector("textarea") as HTMLTextAreaElement;
     expect(textarea).not.toBeNull();
@@ -277,4 +342,163 @@ describe("ComposerPrimitiveInput", () => {
     expect(textarea.getAttribute("aria-haspopup")).toBe("listbox");
     expect(textarea.getAttribute("aria-activedescendant")).toBeNull();
   });
+
+  describe("submit behavior", () => {
+    it("submits on plain Enter under the default submitMode", async () => {
+      const textarea = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter" });
+      });
+
+      expect(requestSubmitSpy).toHaveBeenCalledTimes(1);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it("inserts a newline on Shift+Enter without submitting", async () => {
+      const textarea = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter", shiftKey: true });
+      });
+
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("ignores Enter while an IME composition is active", async () => {
+      const textarea = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter", isComposing: true });
+      });
+
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("submitMode='ctrlEnter' submits on Cmd/Ctrl+Enter but not on plain Enter", async () => {
+      const textarea = await mount({ submitMode: "ctrlEnter" });
+
+      let plain!: KeyboardEvent;
+      await act(async () => {
+        plain = fireKeyDown(textarea, { key: "Enter" });
+      });
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(plain.defaultPrevented).toBe(false);
+
+      let withMeta!: KeyboardEvent;
+      await act(async () => {
+        withMeta = fireKeyDown(textarea, { key: "Enter", metaKey: true });
+      });
+      expect(requestSubmitSpy).toHaveBeenCalledTimes(1);
+      expect(withMeta.defaultPrevented).toBe(true);
+
+      let withCtrl!: KeyboardEvent;
+      await act(async () => {
+        withCtrl = fireKeyDown(textarea, { key: "Enter", ctrlKey: true });
+      });
+      expect(requestSubmitSpy).toHaveBeenCalledTimes(2);
+      expect(withCtrl.defaultPrevented).toBe(true);
+    });
+
+    it("submitMode='none' leaves Enter to insert a native newline", async () => {
+      const textarea = await mount({ submitMode: "none" });
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter" });
+      });
+
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("unstable_insertNewlineOnTouchEnter downgrades Enter on touch-primary devices", async () => {
+      setMatchMedia(true);
+      const textarea = await mount({
+        unstable_insertNewlineOnTouchEnter: true,
+      });
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter" });
+      });
+
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("unstable_insertNewlineOnTouchEnter is a no-op on desktop", async () => {
+      setMatchMedia(false);
+      const textarea = await mount({
+        unstable_insertNewlineOnTouchEnter: true,
+      });
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter" });
+      });
+
+      expect(requestSubmitSpy).toHaveBeenCalledTimes(1);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it("unstable_insertNewlineOnTouchEnter does not override submitMode='ctrlEnter'", async () => {
+      setMatchMedia(true);
+      const textarea = await mount({
+        submitMode: "ctrlEnter",
+        unstable_insertNewlineOnTouchEnter: true,
+      });
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter", metaKey: true });
+      });
+
+      expect(requestSubmitSpy).toHaveBeenCalledTimes(1);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it("unstable_insertNewlineOnTouchEnter does not override submitMode='none'", async () => {
+      setMatchMedia(true);
+      const textarea = await mount({
+        submitMode: "none",
+        unstable_insertNewlineOnTouchEnter: true,
+      });
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, { key: "Enter" });
+      });
+
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("preserves steer (Cmd+Shift+Enter) on touch when unstable_insertNewlineOnTouchEnter is set", async () => {
+      setMatchMedia(true);
+      threadState.capabilities = { queue: true, attachments: false };
+      const textarea = await mount({
+        unstable_insertNewlineOnTouchEnter: true,
+      });
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireKeyDown(textarea, {
+          key: "Enter",
+          metaKey: true,
+          shiftKey: true,
+        });
+      });
+
+      expect(sendSpy).toHaveBeenCalledTimes(1);
+      expect(sendSpy).toHaveBeenCalledWith({ steer: true });
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(true);
+    });
+  });
 });

package/src/primitives/composer/ComposerInput.tsx

@@ -20,11 +20,14 @@ import TextareaAutosize, {
 } from "react-textarea-autosize";
 import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
+import { useMediaQuery } from "../../utils/hooks/useMediaQuery";
 import { useAuiState, useAui } from "@assistant-ui/store";
 import { flushResourcesSync } from "@assistant-ui/tap";
 import { useComposerInputPluginRegistryOptional } from "./ComposerInputPluginContext";
 import { useTriggerPopoverActiveAriaOptional } from "./trigger/TriggerPopoverRootContext";
 
+const TOUCH_PRIMARY_QUERY = "(pointer: coarse) and (not (any-pointer: fine))";
+
 export namespace ComposerPrimitiveInput {
   export type Element = HTMLTextAreaElement;
 
@@ -58,6 +61,14 @@ export namespace ComposerPrimitiveInput {
      * @default true
      */
     unstable_focusOnThreadSwitched?: boolean | undefined;
+    /**
+     * Whether plain Enter on a touch-primary device should insert a newline
+     * instead of submitting, detected via
+     * `(pointer: coarse) and (not (any-pointer: fine))`. Only takes effect
+     * when `submitMode` resolves to `"enter"`.
+     * @default false
+     */
+    unstable_insertNewlineOnTouchEnter?: boolean | undefined;
     /**
      * Whether to automatically add pasted files as attachments.
      * @default true
@@ -115,6 +126,12 @@ export namespace ComposerPrimitiveInput {
  *   submitMode="ctrlEnter"
  * />
  *
+ * // Insert a newline on Enter on touch-primary devices.
+ * <ComposerPrimitive.Input
+ *   placeholder="Type your message..."
+ *   unstable_insertNewlineOnTouchEnter
+ * />
+ *
  * // Old API (deprecated, still supported)
  * <ComposerPrimitive.Input
  *   placeholder="Type your message..."
@@ -142,6 +159,7 @@ export const ComposerPrimitiveInput = forwardRef<
       unstable_focusOnRunStart = true,
       unstable_focusOnScrollToBottom = true,
       unstable_focusOnThreadSwitched = true,
+      unstable_insertNewlineOnTouchEnter = false,
       addAttachmentOnPaste = true,
       ...rest
     },
@@ -151,8 +169,17 @@ export const ComposerPrimitiveInput = forwardRef<
     const pluginRegistry = useComposerInputPluginRegistryOptional();
     const activeAria = useTriggerPopoverActiveAriaOptional();
 
-    const effectiveSubmitMode =
+    const declaredSubmitMode =
       submitMode ?? (submitOnEnter === false ? "none" : "enter");
+    const isTouchPrimary = useMediaQuery(
+      unstable_insertNewlineOnTouchEnter ? TOUCH_PRIMARY_QUERY : null,
+    );
+    const effectiveSubmitMode =
+      unstable_insertNewlineOnTouchEnter &&
+      isTouchPrimary &&
+      declaredSubmitMode === "enter"
+        ? "none"
+        : declaredSubmitMode;
 
     const value = useAuiState((s) => {
       if (!s.composer.isEditing) return "";
@@ -210,7 +237,7 @@ export const ComposerPrimitiveInput = forwardRef<
           e.shiftKey &&
           (e.ctrlKey || e.metaKey) &&
           hasQueue &&
-          effectiveSubmitMode !== "none" &&
+          declaredSubmitMode !== "none" &&
           aui.composer().getState().canSend
         ) {
           e.preventDefault();

package/src/primitives/message/MessageParts.tsx

@@ -65,6 +65,7 @@ export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = (
             }),
         Empty: components.Empty,
         Quote: components.Quote,
+        generativeUI: components.generativeUI,
       }
     : webDefaultComponents;
 

package/src/primitives/message.ts

@@ -8,6 +8,7 @@ export { MessagePrimitiveAttachmentByIndex as AttachmentByIndex } from "./messag
 export { MessagePrimitiveQuote as Quote } from "@assistant-ui/core/react";
 export { MessagePrimitiveError as Error } from "./message/MessageError";
 export { MessagePrimitiveGroupedParts as GroupedParts } from "@assistant-ui/core/react";
+export { MessagePrimitiveGenerativeUI as GenerativeUI } from "@assistant-ui/core/react";
 export {
   MessagePrimitiveUnstable_PartsGrouped as Unstable_PartsGrouped,
   MessagePrimitiveUnstable_PartsGroupedByParentId as Unstable_PartsGroupedByParentId,

package/src/tests/generative-ui.primitive.test.tsx

@@ -0,0 +1,161 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from "@testing-library/react";
+import type { FC, PropsWithChildren } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { AssistantRuntimeProvider } from "../context";
+import * as MessagePrimitive from "../primitives/message";
+import * as ThreadPrimitive from "../primitives/thread";
+import { useLocalRuntime } from "../legacy-runtime/runtime-cores/local/useLocalRuntime";
+import type {
+  ChatModelAdapter,
+  GenerativeUISpec,
+  ThreadMessageLike,
+} from "../index";
+
+const noOpAdapter: ChatModelAdapter = {
+  async *run() {},
+};
+
+const Card = ({ title, children }: any) => (
+  <div data-component="Card">
+    <h3 data-testid="card-title">{title}</h3>
+    {children}
+  </div>
+);
+
+const Button = ({ label }: any) => (
+  <button type="button" data-component="Button">
+    {label}
+  </button>
+);
+
+const Fallback = ({ component }: { component: string; props?: unknown }) => (
+  <span data-fallback={component}>missing</span>
+);
+
+const spec: GenerativeUISpec = {
+  root: {
+    component: "Card",
+    props: { title: "Hello" },
+    children: [{ component: "Button", props: { label: "Click me" } }],
+  },
+};
+
+const unknownSpec: GenerativeUISpec = {
+  root: { component: "NotAllowed", props: { foo: 1 } },
+};
+
+const generativeMessages = (s: GenerativeUISpec): ThreadMessageLike[] => [
+  {
+    role: "assistant",
+    content: [{ type: "generative-ui", spec: s }],
+    status: { type: "complete", reason: "stop" },
+  },
+];
+
+const RuntimeProvider: FC<
+  PropsWithChildren<{ messages: ThreadMessageLike[] }>
+> = ({ children, messages }) => {
+  const runtime = useLocalRuntime(noOpAdapter, {
+    initialMessages: messages,
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+};
+
+const renderThread = (MessageComponent: FC, messages: ThreadMessageLike[]) => {
+  render(
+    <RuntimeProvider messages={messages}>
+      <ThreadPrimitive.Messages components={{ Message: MessageComponent }} />
+    </RuntimeProvider>,
+  );
+};
+
+describe("MessagePrimitive.Parts generative-ui (store-backed)", () => {
+  it("renders a generative-ui part via the components.generativeUI allowlist", async () => {
+    const Message: FC = () => (
+      <MessagePrimitive.Parts
+        components={{ generativeUI: { components: { Card, Button } } }}
+      />
+    );
+
+    renderThread(Message, generativeMessages(spec));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("card-title").textContent).toBe("Hello");
+    });
+    expect(screen.getByText("Click me")).toBeTruthy();
+    expect(document.querySelector('[data-component="Card"]')).not.toBeNull();
+    expect(document.querySelector('[data-component="Button"]')).not.toBeNull();
+  });
+
+  it("renders nothing for a generative-ui part when no allowlist is provided and warns in dev", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const Message: FC = () => (
+      <div data-testid="parts-host">
+        <MessagePrimitive.Parts components={{}} />
+      </div>
+    );
+
+    renderThread(Message, generativeMessages(spec));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("parts-host")).toBeTruthy();
+    });
+
+    expect(document.querySelector('[data-component="Card"]')).toBeNull();
+    expect(document.querySelector('[data-component="Button"]')).toBeNull();
+    expect(screen.getByTestId("parts-host").textContent).toBe("");
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining("`components.generativeUI.components` allowlist"),
+    );
+
+    warn.mockRestore();
+  });
+
+  it("renders the Fallback for an unknown component name instead of throwing", async () => {
+    const Message: FC = () => (
+      <MessagePrimitive.Parts
+        components={{ generativeUI: { components: { Card }, Fallback } }}
+      />
+    );
+
+    renderThread(Message, generativeMessages(unknownSpec));
+
+    await waitFor(() => {
+      expect(
+        document.querySelector('[data-fallback="NotAllowed"]'),
+      ).not.toBeNull();
+    });
+    expect(screen.getByText("missing")).toBeTruthy();
+  });
+});
+
+describe("MessagePrimitive.GenerativeUI (store-backed, reads part from scope)", () => {
+  it("renders the spec read from the surrounding part scope when no spec prop is passed", async () => {
+    const Message: FC = () => (
+      <MessagePrimitive.Parts>
+        {({ part }) => {
+          if (part.type === "generative-ui") {
+            return (
+              <MessagePrimitive.GenerativeUI components={{ Card, Button }} />
+            );
+          }
+          return null;
+        }}
+      </MessagePrimitive.Parts>
+    );
+
+    renderThread(Message, generativeMessages(spec));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("card-title").textContent).toBe("Hello");
+    });
+    expect(screen.getByText("Click me")).toBeTruthy();
+  });
+});

package/src/tests/generative-ui.test.tsx

@@ -0,0 +1,145 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import {
+  GenerativeUIRender,
+  GenerativeUIRenderError,
+  type GenerativeUISpec,
+} from "../index";
+
+const Card = ({ title, children }: any) => (
+  <div data-component="Card">
+    <h3>{title}</h3>
+    {children}
+  </div>
+);
+const Button = ({ label }: any) => (
+  <button type="button" data-component="Button">
+    {label}
+  </button>
+);
+
+describe("MessagePrimitive.GenerativeUI (same-realm renderer)", () => {
+  it("renders a flat tree with allowlisted components", () => {
+    const spec: GenerativeUISpec = {
+      root: {
+        component: "Card",
+        props: { title: "Hello" },
+        children: [{ component: "Button", props: { label: "Click me" } }],
+      },
+    };
+
+    const out = renderToStaticMarkup(
+      <GenerativeUIRender spec={spec} components={{ Card, Button }} />,
+    );
+
+    expect(out).toContain('data-component="Card"');
+    expect(out).toContain("<h3>Hello</h3>");
+    expect(out).toContain('data-component="Button"');
+    expect(out).toContain("Click me");
+  });
+
+  it("renders an array root", () => {
+    const spec: GenerativeUISpec = {
+      root: [
+        { component: "Card", props: { title: "A" } },
+        { component: "Card", props: { title: "B" } },
+      ],
+    };
+    const out = renderToStaticMarkup(
+      <GenerativeUIRender spec={spec} components={{ Card }} />,
+    );
+    expect(out).toContain("<h3>A</h3>");
+    expect(out).toContain("<h3>B</h3>");
+  });
+
+  it("renders string children inline", () => {
+    const spec: GenerativeUISpec = {
+      root: {
+        component: "Card",
+        props: { title: "T" },
+        children: ["hello ", "world"],
+      },
+    };
+    const out = renderToStaticMarkup(
+      <GenerativeUIRender spec={spec} components={{ Card }} />,
+    );
+    expect(out).toContain("hello world");
+  });
+
+  it("throws GenerativeUIRenderError for unknown components", () => {
+    const spec: GenerativeUISpec = {
+      root: { component: "NotAllowed", props: {} },
+    };
+
+    expect(() =>
+      renderToStaticMarkup(
+        <GenerativeUIRender spec={spec} components={{ Card }} />,
+      ),
+    ).toThrow(GenerativeUIRenderError);
+  });
+
+  it("uses Fallback when provided for unknown components", () => {
+    const spec: GenerativeUISpec = {
+      root: { component: "NotAllowed", props: { foo: 1 } },
+    };
+    const Fallback = ({ component }: any) => (
+      <span data-fallback={component}>missing</span>
+    );
+
+    const out = renderToStaticMarkup(
+      <GenerativeUIRender
+        spec={spec}
+        components={{ Card }}
+        Fallback={Fallback}
+      />,
+    );
+    expect(out).toContain('data-fallback="NotAllowed"');
+    expect(out).toContain("missing");
+  });
+
+  it("handles empty / partial specs gracefully (stream-friendly)", () => {
+    const out1 = renderToStaticMarkup(
+      <GenerativeUIRender spec={{ root: [] }} components={{ Card }} />,
+    );
+    expect(out1).toBe("");
+
+    // Partial spec — top-level component resolved but no children yet.
+    const out2 = renderToStaticMarkup(
+      <GenerativeUIRender
+        spec={{ root: { component: "Card", props: { title: "loading" } } }}
+        components={{ Card }}
+      />,
+    );
+    expect(out2).toContain("<h3>loading</h3>");
+  });
+
+  it("respects user-provided keys", () => {
+    const spec: GenerativeUISpec = {
+      root: [
+        { component: "Card", props: { title: "x" }, key: "stable-1" },
+        { component: "Card", props: { title: "y" }, key: "stable-2" },
+      ],
+    };
+    expect(() =>
+      renderToStaticMarkup(
+        <GenerativeUIRender spec={spec} components={{ Card }} />,
+      ),
+    ).not.toThrow();
+  });
+
+  it("is a typed error subclass with the offending component name", () => {
+    try {
+      renderToStaticMarkup(
+        <GenerativeUIRender
+          spec={{ root: { component: "Bad" } }}
+          components={{ Card }}
+        />,
+      );
+      throw new Error("should have thrown");
+    } catch (e) {
+      expect(e).toBeInstanceOf(GenerativeUIRenderError);
+      expect((e as GenerativeUIRenderError).componentName).toBe("Bad");
+      expect((e as Error).name).toBe("GenerativeUIRenderError");
+    }
+  });
+});