@agent-native/toolkit 0.203.0-nightly-20261007064822 → 0.203.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.203.0-nightly-20261007064822",
+  "version": "0.203.0",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -673,7 +673,7 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.33",
     "zod": "^4.3.6",
-    "@agent-native/agentkit": "^0.203.0-nightly-20261007064822"
+    "@agent-native/agentkit": "^0.203.0"
   },
   "devDependencies": {
     "@excalidraw/excalidraw": "0.18.1",
@@ -697,10 +697,10 @@
     "typescript-7": "npm:typescript@^7.0.2",
     "vite": "8.1.0",
     "vitest": "^4.1.5",
-    "@agent-native/core": "^0.203.0-nightly-20261007064822"
+    "@agent-native/core": "^0.203.0"
   },
   "peerDependencies": {
-    "@agent-native/core": "0.203.0-nightly-20261007064822",
+    "@agent-native/core": ">=0.196.0",
     "@excalidraw/excalidraw": ">=0.18",
     "@excalidraw/mermaid-to-excalidraw": ">=2",
     "@tanstack/react-query": "^5.99.2",

package/src/agentkit.ts

@@ -3,6 +3,7 @@ export {
   AgentSuggestionBar,
   agentSuggestionPrompt,
 } from "./composer/AgentSuggestionBar.js";
+export { formatAttachmentError } from "./composer/attachment-accept.js";
 export { MessageQueueDrawer } from "./composer/MessageQueueDrawer.js";
 export {
   ComposerContextMenu,
@@ -21,6 +22,7 @@ export {
   type ComposerContextPickerFooterAction,
 } from "./composer/ComposerContextMenu.js";
 export {
+  createChatAttachmentAdapter,
   PromptComposer,
   type PromptComposerFile,
   type PromptComposerProps,

package/src/app/agentkit/react/components.interaction.spec.tsx

@@ -870,6 +870,74 @@ describe("AgentKitChat interactions", () => {
     }
   });
 
+  it("attaches dropped SVGs and names rejected drops without the accept list", async () => {
+    const transport: AgentTransport = {
+      capabilities: { uploads: true },
+      async startRun() {
+        return { runId: "run-svg" };
+      },
+      async *subscribeToRun() {},
+      async cancelRun() {},
+    };
+    const client = new AgentKitClient({ transport });
+    const onAttachmentError = vi.fn();
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const actEnvironment = globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    };
+    const previousActEnvironment = actEnvironment.IS_REACT_ACT_ENVIRONMENT;
+    actEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
+    const dropOnChat = async (file: File) => {
+      const drop = new Event("drop", { bubbles: true, cancelable: true });
+      Object.defineProperty(drop, "dataTransfer", {
+        value: { types: ["Files"], files: [file], dropEffect: "none" },
+      });
+      await act(async () => {
+        container.querySelector(".agentkit-chat")?.dispatchEvent(drop);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+    };
+
+    try {
+      await act(async () => {
+        root.render(
+          <AgentKitProvider controller={client} threadId="thread-svg">
+            <AgentKitChat composerProps={{ onAttachmentError }} />
+          </AgentKitProvider>,
+        );
+        await Promise.resolve();
+      });
+
+      await dropOnChat(
+        new File(['<svg xmlns="http://www.w3.org/2000/svg"/>'], "logo.svg", {
+          type: "image/svg+xml",
+        }),
+      );
+      expect(container.textContent).toContain("logo.svg");
+      expect(onAttachmentError).not.toHaveBeenCalled();
+
+      await dropOnChat(
+        new File(["zip"], "archive.zip", { type: "application/zip" }),
+      );
+      expect(onAttachmentError).toHaveBeenCalledWith(
+        "archive.zip: Could not add the dropped file. Try a different format.",
+      );
+    } finally {
+      await act(async () => {
+        root.unmount();
+        await Promise.resolve();
+      });
+      container.remove();
+      if (previousActEnvironment === undefined) {
+        delete actEnvironment.IS_REACT_ACT_ENVIRONMENT;
+      } else {
+        actEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment;
+      }
+    }
+  });
+
   it("disables transcript file drops when the host disables uploads", async () => {
     const transport: AgentTransport = {
       capabilities: { uploads: true },

package/src/app/agentkit/react/components.tsx

@@ -68,6 +68,8 @@ import {
   Surface,
   TextField,
   agentSuggestionPrompt,
+  createChatAttachmentAdapter,
+  formatAttachmentError,
   type PromptComposerFile,
   type PromptComposerProps,
   type TiptapComposerHandle,
@@ -4065,6 +4067,10 @@ export function AgentKitComposer({
   }, []);
   const [uncontrolledMode, setUncontrolledMode] = useState(defaultMode);
   const [attachmentError, setAttachmentError] = useState<string | null>(null);
+  const composerAttachmentAdapter = useMemo(
+    () => attachmentAdapter ?? createChatAttachmentAdapter(),
+    [attachmentAdapter],
+  );
   const executionMode = mode ?? uncontrolledMode;
   const active = hasActiveRuns(thread);
   const composerInitialText = editingMessage
@@ -4095,12 +4101,13 @@ export function AgentKitComposer({
         await composer.addAttachment(file);
         setAttachmentError(null);
       } catch (error) {
-        const message = error instanceof Error ? error.message : labels.error;
-        reportAttachmentError(message);
+        reportAttachmentError(
+          `${file.name}: ${formatAttachmentError(error, labels.dropFileFailed)}`,
+        );
         throw error;
       }
     },
-    [labels.error, reportAttachmentError],
+    [labels.dropFileFailed, labels.error, reportAttachmentError],
   );
   useEffect(() => {
     const receiveAttachments = (event: Event) => {
@@ -4494,7 +4501,7 @@ export function AgentKitComposer({
         onInspectContextItem={onInspectContextItem}
         onRetryContextItem={onRetryContextItem}
         contextMenuItems={contextMenuItems}
-        attachmentAdapter={attachmentAdapter}
+        attachmentAdapter={composerAttachmentAdapter}
         inlineTextAttachments={inlineTextAttachments}
         rootClassName="agentkit-composer"
         className={

package/src/app/agentkit/react/context.tsx

@@ -274,6 +274,7 @@ export interface AgentKitLabels {
   imagePreview: string;
   closePreview: string;
   dropFilesToAttach: string;
+  dropFileFailed: string;
   scrollToBottom: string;
   formatTimestamp?: (createdAt: string) => string;
   error: string;
@@ -384,6 +385,7 @@ export const defaultAgentKitLabels: AgentKitLabels = {
   imagePreview: "Image preview",
   closePreview: "Close preview",
   dropFilesToAttach: "Drop files to attach",
+  dropFileFailed: "Could not add the dropped file. Try a different format.",
   scrollToBottom: "Scroll to bottom",
   error: "Something went wrong",
   renderError: "This content couldn’t be displayed.",

package/src/app/agentkit/react/styles.css

@@ -1715,11 +1715,16 @@ button.agentkit-object {
 
 .agentkit-composer-error {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 0.375rem;
   padding: 0.375rem 0.625rem 0;
 }
 
+.agentkit-composer-error > span {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
 .agentkit-file {
   display: inline-flex;
   align-items: center;

package/src/app/chat/AgentKitAssistantChat.spec.tsx

@@ -52,6 +52,7 @@ const chatMocks = vi.hoisted(() => ({
   reasoningProps: null as any,
   thinkingDisplay: null as any,
   requestComposerFocus: vi.fn(),
+  persistThreadSnapshot: vi.fn(async () => undefined),
   readiness: { canChat: true, missing: false, state: "configured" },
   fetchProviderState: vi.fn(async () => chatMocks.readiness.state),
   fileUploadStatus: {
@@ -239,7 +240,10 @@ vi.mock("../agentkit/react/index.js", async () => {
         : {
             threadId: chatMocks.threadId,
             requestComposerFocus: chatMocks.requestComposerFocus,
-            controller: { getThread: () => chatMocks.readThread() },
+            controller: {
+              getThread: () => chatMocks.readThread(),
+              persistThreadSnapshot: chatMocks.persistThreadSnapshot,
+            },
           },
     useAgentKitControl: () =>
       chatMocks.useRealChat ? useAgentKitControl() : chatMocks.control,
@@ -755,6 +759,7 @@ beforeEach(() => {
   chatMocks.reasoningProps = null;
   chatMocks.thinkingDisplay = null;
   chatMocks.requestComposerFocus.mockReset();
+  chatMocks.persistThreadSnapshot.mockReset().mockResolvedValue(undefined);
   chatMocks.readiness = {
     canChat: true,
     missing: false,
@@ -4862,6 +4867,38 @@ describe("AgentKitAssistantChat host behavior", () => {
     window.removeEventListener("agentNative.chatRunning", onRunning);
   });
 
+  it("persists changed custom-transport snapshots through the protocol save", async () => {
+    const createTransport = () => chatMocks.transport;
+    const onSaveThread = vi.fn();
+    const message = {
+      id: "custom-user-message",
+      role: "user",
+      status: "complete",
+      createdAt: "2026-10-07T12:00:00.000Z",
+      parts: [{ type: "text", text: "Save this message" }],
+    };
+    await mount(baseProps({ createTransport, onSaveThread }));
+
+    chatMocks.thread = {
+      ...chatMocks.thread,
+      thread: null,
+      messages: [message],
+    };
+    await act(async () => {
+      root.render(
+        <AgentKitAssistantChat
+          {...baseProps({ createTransport, onSaveThread })}
+        />,
+      );
+    });
+    await flush();
+
+    expect(chatMocks.persistThreadSnapshot).toHaveBeenCalledWith("thread-1", [
+      expect.objectContaining({ id: "custom-user-message" }),
+    ]);
+    expect(onSaveThread).toHaveBeenCalledOnce();
+  });
+
   it("shows an expired-session card and emits the session-expired event", async () => {
     chatMocks.failureError = { code: "unauthorized", message: "HTTP 401" };
     vi.stubGlobal(

package/src/app/chat/AgentKitAssistantChat.tsx

@@ -12,6 +12,7 @@ import type {
   AgentEvent,
   AgentMessage,
   AgentStreamIntegrityReport,
+  AgentTransport,
   AgentThreadSnapshot,
   AgentToolCall,
   AgentUploadTarget,
@@ -211,6 +212,65 @@ const deferredProviderSubmissionOperations = new Map<
 const RECOVERY_CONTINUE_PROMPT =
   "Continue from where you left off and finish my last request. Do not repeat completed work.";
 
+function withCoreSnapshotPersistence(
+  customTransport: AgentTransport,
+  coreTransport: AgentTransport,
+): AgentTransport {
+  if (customTransport === coreTransport) return customTransport;
+  const corePersist = coreTransport.persistThreadSnapshot;
+  if (!corePersist) {
+    throw new TypeError("Core transport must persist thread snapshots.");
+  }
+  const boundMethods = new Map<PropertyKey, Function>();
+  let disposed = false;
+  const persistThreadSnapshot: NonNullable<
+    AgentTransport["persistThreadSnapshot"]
+  > = async (...args) => {
+    const writes = [
+      ...(customTransport.persistThreadSnapshot
+        ? [customTransport.persistThreadSnapshot.call(customTransport, ...args)]
+        : []),
+      corePersist.call(coreTransport, ...args),
+    ];
+    const results = await Promise.allSettled(writes);
+    const errors = results.flatMap((result) =>
+      result.status === "rejected" ? [result.reason] : [],
+    );
+    if (errors.length === 1) throw errors[0];
+    if (errors.length > 1) {
+      throw new AggregateError(errors, "Thread snapshot persistence failed.");
+    }
+  };
+  const dispose = async () => {
+    if (disposed) return;
+    disposed = true;
+    const results = await Promise.allSettled([
+      Promise.resolve(customTransport.dispose?.()),
+      Promise.resolve(coreTransport.dispose?.()),
+    ]);
+    const errors = results.flatMap((result) =>
+      result.status === "rejected" ? [result.reason] : [],
+    );
+    if (errors.length === 1) throw errors[0];
+    if (errors.length > 1) {
+      throw new AggregateError(errors, "Chat transport disposal failed.");
+    }
+  };
+  return new Proxy(customTransport, {
+    get(target, property) {
+      if (property === "persistThreadSnapshot") return persistThreadSnapshot;
+      if (property === "dispose") return dispose;
+      const value = Reflect.get(target, property, target);
+      if (typeof value !== "function") return value;
+      const cached = boundMethods.get(property);
+      if (cached) return cached;
+      const bound = value.bind(target);
+      boundMethods.set(property, bound);
+      return bound;
+    },
+  });
+}
+
 type ThreadRestoreState =
   | { status: "ready" | "loading" }
   | { status: "error"; notFound: boolean };
@@ -827,6 +887,7 @@ export const AgentKitAssistantChat = forwardRef<
       imagePreview: t("agentChat.composer.imagePreview"),
       closePreview: t("agentChat.composer.closePreview"),
       dropFilesToAttach: t("agentChat.composer.dropToAttach"),
+      dropFileFailed: t("agentChat.composer.droppedFileError"),
       scrollToBottom: t("agentChat.composer.scrollToBottom"),
       formatTimestamp: (createdAt: string) => {
         const date = new Date(createdAt);
@@ -982,8 +1043,9 @@ export const AgentKitAssistantChat = forwardRef<
         : props.agentChatSurface === "desktop"
           ? "desktop"
           : "app";
+    const apiUrl = props.apiUrl ?? agentNativePath("/_agent-native/agent-chat");
     const adapterContext: AssistantChatAdapterContext = {
-      apiUrl: props.apiUrl ?? agentNativePath("/_agent-native/agent-chat"),
+      apiUrl,
       streamingUrl: props.streamingUrl,
       tabId: props.tabId,
       threadId,
@@ -998,7 +1060,27 @@ export const AgentKitAssistantChat = forwardRef<
       surface,
     };
     const customTransport = createTransportRef.current;
-    if (customTransport) return customTransport(adapterContext);
+    if (customTransport) {
+      const persistenceTransport = createAgentNativeAgentKitTransport({
+        apiUrl,
+        browserTabId: props.browserTabId,
+        get threadId() {
+          return transportThreadIdRef.current;
+        },
+        surface,
+        get scope() {
+          return scopeRef.current;
+        },
+        get isolateHistoryByScope() {
+          return isolateHistoryByScopeRef.current;
+        },
+        adapter: { textFormat: "markdown" },
+      });
+      return withCoreSnapshotPersistence(
+        customTransport(adapterContext),
+        persistenceTransport,
+      );
+    }
     const runtimeOptions: CreateAgentNativeChatRuntimeOptions = {
       apiUrl: props.apiUrl ?? agentNativePath("/_agent-native/agent-chat"),
       streamingUrl: props.streamingUrl,
@@ -1890,6 +1972,12 @@ const AgentKitAssistantChatBody = forwardRef<
     if (!props.onSaveThread) return;
     if (snapshot.threadData === lastSavedThreadDataRef.current) return;
     lastSavedThreadDataRef.current = snapshot.threadData;
+    if (props.createTransport) {
+      void controller.persistThreadSnapshot(
+        threadId,
+        agentKitMessagesFromThreadSnapshot(snapshot),
+      );
+    }
     props.onSaveThread(threadId, snapshot);
   };
 
@@ -1930,11 +2018,17 @@ const AgentKitAssistantChatBody = forwardRef<
       );
       if (props.onSaveThread) {
         lastSavedThreadDataRef.current = snapshot.threadData;
+        if (props.createTransport) {
+          void controller.persistThreadSnapshot(
+            threadId,
+            agentKitMessagesFromThreadSnapshot(snapshot),
+          );
+        }
         props.onSaveThread(threadId, snapshot);
       }
       return true;
     },
-    [isRestoring, isRunning, props, thread, threadId],
+    [controller, isRestoring, isRunning, props, thread, threadId],
   );
 
   useEffect(() => {
@@ -4146,7 +4240,9 @@ function AgentKitComposerSurface({
             className="mx-3 mb-1.5 flex shrink-0 items-start gap-2 rounded-md border border-border bg-muted/70 px-3 py-2 text-xs text-foreground shadow-sm"
           >
             <IconAlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-            <span className="flex-1 leading-snug">{composerError}</span>
+            <span className="min-w-0 flex-1 break-words leading-snug">
+              {composerError}
+            </span>
             <button
               type="button"
               aria-label={t("agentChat.common.dismissError")}
@@ -5265,6 +5361,17 @@ function createAgentKitThreadSnapshot(thread: AgentThreadState) {
   };
 }
 
+function agentKitMessagesFromThreadSnapshot(
+  snapshot: ReturnType<typeof createAgentKitThreadSnapshot>,
+): AgentMessage[] {
+  const repository = asRecord(JSON.parse(snapshot.threadData));
+  const agentKit = asRecord(repository?.agentKit);
+  if (!Array.isArray(agentKit?.messages)) {
+    throw new TypeError("AgentKit thread snapshot is missing its messages.");
+  }
+  return agentKit.messages as AgentMessage[];
+}
+
 function createAgentKitThreadHandoffKey(
   props: Pick<AssistantChatProps, "apiUrl" | "browserTabId" | "contextScope">,
   threadId: string,

package/src/app/chat/MultiTabAssistantChat.spec.tsx

@@ -32,6 +32,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
   MultiTabAssistantChat,
   type MultiTabAssistantChatHeaderProps,
+  type MultiTabAssistantChatProps,
 } from "./MultiTabAssistantChat.js";
 
 afterEach(() => {
@@ -84,6 +85,17 @@ const assistantChatMockState = vi.hoisted(() => ({
   onRetryModelList: undefined as (() => void) | undefined,
   onSlashCommand: undefined as ((command: string) => void) | undefined,
   onForkedThread: undefined as ((threadId: string) => void) | undefined,
+  onSaveThread: undefined as
+    | ((
+        threadId: string,
+        data: {
+          threadData: string;
+          title: string;
+          preview: string;
+          messageCount: number;
+        },
+      ) => void)
+    | undefined,
   branchNavigation: undefined as
     | {
         index: number;
@@ -339,6 +351,7 @@ vi.mock("./AgentKitAssistantChat.js", async () => {
         onRetryModelList?: () => void;
         onSlashCommand?: (command: string) => void;
         onForkedThread?: (threadId: string) => void;
+        onSaveThread?: typeof assistantChatMockState.onSaveThread;
         branchNavigation?: typeof assistantChatMockState.branchNavigation;
       };
       assistantChatMockState.onThreadRestoreNotFound =
@@ -346,6 +359,7 @@ vi.mock("./AgentKitAssistantChat.js", async () => {
       assistantChatMockState.onRetryModelList = props.onRetryModelList;
       assistantChatMockState.onSlashCommand = props.onSlashCommand;
       assistantChatMockState.onForkedThread = props.onForkedThread;
+      assistantChatMockState.onSaveThread = props.onSaveThread;
       assistantChatMockState.branchNavigation = props.branchNavigation;
       React.useImperativeHandle(ref, () => ({
         sendMessage: chatHandleMocks.sendMessage,
@@ -399,6 +413,7 @@ function resetThreadMocks() {
   assistantChatMockState.onRetryModelList = undefined;
   assistantChatMockState.onSlashCommand = undefined;
   assistantChatMockState.onForkedThread = undefined;
+  assistantChatMockState.onSaveThread = undefined;
   assistantChatMockState.branchNavigation = undefined;
   threadMocks.activeThreadId = "thread-1";
   threadMocks.evictedThreadIds = [];
@@ -501,6 +516,73 @@ describe("MultiTabAssistantChat postMessage bridge", () => {
     vi.clearAllMocks();
   });
 
+  it("keeps thread saves metadata-only for built-in, runtime, and custom transports", async () => {
+    const snapshot = {
+      threadData: JSON.stringify({ messages: [{ id: "message-1" }] }),
+      title: "Saved chat",
+      preview: "Latest request",
+      messageCount: 1,
+    };
+    window.history.replaceState(null, "", "/");
+
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat storageKey="bridge-test" threadUrlSync />,
+      );
+      await Promise.resolve();
+    });
+
+    act(() => assistantChatMockState.onSaveThread?.("thread-1", snapshot));
+
+    expect(threadMocks.saveThreadData).toHaveBeenLastCalledWith("thread-1", {
+      ...snapshot,
+      threadData: "",
+    });
+    expect(window.location.search).toBe("?thread=thread-1");
+
+    const createTransport = (() => ({}) as never) as NonNullable<
+      MultiTabAssistantChatProps["createTransport"]
+    >;
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          threadUrlSync
+          createTransport={createTransport}
+        />,
+      );
+      await Promise.resolve();
+    });
+
+    act(() => assistantChatMockState.onSaveThread?.("thread-1", snapshot));
+
+    expect(threadMocks.saveThreadData).toHaveBeenLastCalledWith("thread-1", {
+      ...snapshot,
+      threadData: "",
+    });
+    expect(window.location.search).toBe("?thread=thread-1");
+
+    const runtime = {} as NonNullable<MultiTabAssistantChatProps["runtime"]>;
+    await act(async () => {
+      root.render(
+        <MultiTabAssistantChat
+          storageKey="bridge-test"
+          threadUrlSync
+          runtime={runtime}
+        />,
+      );
+      await Promise.resolve();
+    });
+
+    act(() => assistantChatMockState.onSaveThread?.("thread-1", snapshot));
+
+    expect(threadMocks.saveThreadData).toHaveBeenLastCalledWith("thread-1", {
+      ...snapshot,
+      threadData: "",
+    });
+    expect(window.location.search).toBe("?thread=thread-1");
+  });
+
   it("prefills the active composer without submitting when submit is false", () => {
     act(() => {
       dispatchSubmitChat({

package/src/app/chat/MultiTabAssistantChat.tsx

@@ -2749,7 +2749,10 @@ export function MultiTabAssistantChat({
         messageCount: number;
       },
     ) => {
-      void saveThreadData(threadId, data);
+      void saveThreadData(threadId, {
+        ...data,
+        threadData: "",
+      });
       if (
         data.messageCount > 0 &&
         threadId === activeThreadIdRef.current &&

package/src/composer/PromptComposer.spec.ts

@@ -6,6 +6,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import {
   buildPromptComposerSubmission,
+  createChatAttachmentAdapter,
   PromptComposer,
   resolveComposerModelStatusChecksEnabled,
   shouldGateComposerForEngine,
@@ -234,3 +235,82 @@ describe("PromptComposer scoped runtime", () => {
     expect(attachedFiles).toHaveLength(0);
   });
 });
+
+describe("PromptComposer attachment policy", () => {
+  it("keeps SVGs out of standalone prompts while chat stages them as documents", async () => {
+    await act(async () => {
+      root.render(
+        React.createElement(PromptComposer, {
+          attachmentsEnabled: true,
+          includeDefaultSlashSkills: false,
+          onSubmit: () => {},
+          plusMenuMode: "upload-only",
+          showModelSelector: false,
+          voiceEnabled: false,
+        }),
+      );
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    const standaloneAccept = container
+      .querySelector<HTMLInputElement>('input[type="file"]')
+      ?.getAttribute("accept")
+      ?.split(",");
+    expect(standaloneAccept).toContain(".pdf");
+    expect(standaloneAccept).not.toContain(".svg");
+
+    const chatAdapter = createChatAttachmentAdapter();
+    expect(chatAdapter.accept.split(",")).toEqual(
+      expect.arrayContaining(["image/svg+xml", ".svg", ".png", ".pdf"]),
+    );
+    await expect(
+      chatAdapter.add({
+        file: new File(["<svg/>"], "logo.svg", { type: "image/svg+xml" }),
+      }),
+    ).resolves.toMatchObject({
+      type: "document",
+      name: "logo.svg",
+      contentType: "image/svg+xml",
+    });
+    await expect(
+      chatAdapter.add({
+        file: new File(["png"], "logo.png", { type: "image/png" }),
+      }),
+    ).resolves.toMatchObject({ type: "image", name: "logo.png" });
+  });
+
+  it("shows why a file was rejected when the host passes no error handler", async () => {
+    await act(async () => {
+      root.render(
+        React.createElement(PromptComposer, {
+          attachmentsEnabled: true,
+          includeDefaultSlashSkills: false,
+          onSubmit: () => {},
+          plusMenuMode: "upload-only",
+          showModelSelector: false,
+          voiceEnabled: false,
+        }),
+      );
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    const editor = container.querySelector<HTMLElement>(
+      ".agent-composer-prosemirror",
+    );
+    expect(editor).not.toBeNull();
+    const pasteEvent = new Event("paste", { bubbles: true, cancelable: true });
+    Object.defineProperty(pasteEvent, "clipboardData", {
+      value: {
+        files: [new File(["<svg/>"], "logo.svg", { type: "image/svg+xml" })],
+        getData: () => "",
+      },
+    });
+
+    await act(async () => {
+      editor?.dispatchEvent(pasteEvent);
+      await new Promise((resolve) => setTimeout(resolve, 20));
+    });
+
+    expect(container.querySelector('[role="alert"]')?.textContent).toBe(
+      "Could not attach the pasted image. Try a different format.",
+    );
+  });
+});