@agent-native/toolkit 0.218.0 → 0.220.0-nightly-20261023183804

package/package.json

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

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

@@ -503,17 +503,19 @@ describe("AgentKitChat", () => {
     expect(styles).toMatch(
       /@media \(max-width: 40rem\)[\s\S]*\[data-agent-composer-slot="area"\][\s\S]*padding-inline: 0;/,
     );
-    expect(styles).toMatch(
-      /\[data-agent-composer-slot="model-button"\] \{[\s\S]*max-inline-size: 11rem;/,
-    );
+    const modelButtonRule = styles.match(
+      /\.agentkit-composer \[data-agent-composer-slot="model-button"\] \{([^}]*)\}/,
+    )?.[1];
+    expect(modelButtonRule).toContain("max-inline-size: 11rem;");
+    expect(modelButtonRule).toContain("flex: 0 1 auto;");
     expect(styles).toMatch(
       /\[data-agent-composer-slot="mode-button"\] \{[\s\S]*min-inline-size: 3\.5rem;/,
     );
     expect(styles).toMatch(
-      /@media \(max-width: 40rem\)[\s\S]*\[data-agent-composer-slot="model-button"\][\s\S]*max-inline-size: 7\.5rem;/,
+      /@container \(max-width: 24rem\)[\s\S]*\[data-agent-composer-slot="model-button"\][\s\S]*max-inline-size: 7\.5rem;/,
     );
     expect(styles).toMatch(
-      /@media \(max-width: 40rem\)[\s\S]*\.agent-composer-model-effort[\s\S]*display: none;/,
+      /@container \(max-width: 24rem\)[\s\S]*\.agent-composer-model-effort[\s\S]*display: none;/,
     );
     const composerPopoverRule = styles.match(
       /\[data-agent-native-composer-popover="true"\] \{([^}]*)\}/,

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

@@ -104,6 +104,7 @@
     var(--agent-kit-composer-surface, var(--agentkit-surface))
   );
   box-shadow: var(--agentkit-elevation);
+  container-type: inline-size;
 }
 
 .agentkit-composer[data-agent-composer-slot="root"]:focus-within {
@@ -161,9 +162,11 @@
   flex: 1;
 }
 
+/* Only the model picker shrinks, so narrow composers never push out send. */
 .agentkit-composer [data-agent-composer-slot="model-button"] {
-  flex: none;
+  flex: 0 1 auto;
   max-inline-size: 11rem;
+  overflow: hidden;
 }
 
 .agentkit-composer [data-agent-composer-slot="mode-button"] {
@@ -2169,9 +2172,16 @@ button.agentkit-object {
     padding-inline: 0;
   }
 
+  .agentkit-message[data-role="user"] .agentkit-message-content {
+    max-inline-size: min(94%, var(--agentkit-user-bubble-max-width, 38rem));
+  }
+}
+
+/* Composer width, not viewport: desktop side panels are as narrow as phones. */
+@container (max-width: 24rem) {
   .agentkit-composer [data-agent-composer-slot="toolbar"] {
     gap: 0.125rem;
-    padding-inline: 0.5rem;
+    padding-inline: 0.375rem;
   }
 
   .agentkit-composer [data-agent-composer-slot="model-button"] {
@@ -2180,14 +2190,11 @@ button.agentkit-object {
   }
 
   .agentkit-composer [data-agent-composer-slot="mode-button"] {
+    min-inline-size: 0;
     padding-inline: 0.375rem;
   }
 
   .agentkit-composer .agent-composer-model-effort {
     display: none;
   }
-
-  .agentkit-message[data-role="user"] .agentkit-message-content {
-    max-inline-size: min(94%, var(--agentkit-user-bubble-max-width, 38rem));
-  }
 }

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

@@ -10,6 +10,7 @@ import {
 } from "@agent-native/agentkit/protocol";
 import type {
   AgentInteraction,
+  AgentToolCall,
   FilePart,
   AgentMessage,
   AgentTransport,
@@ -24,6 +25,10 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { AgentSuggestionBar } from "../../composer/AgentSuggestionBar.js";
 import { AgentInteractionItem } from "../agentkit/react/components.js";
 import { AgentKitProvider } from "../agentkit/react/context.js";
+import {
+  clearToolRenderersForTests,
+  registerToolRenderer,
+} from "./chat/tool-render-registry.js";
 
 function largePngBytes(
   width = 2560,
@@ -106,6 +111,7 @@ const chatMocks = vi.hoisted(() => ({
   runtimeOptions: null as any,
   inBuilder: false,
   useRealRoot: false,
+  renderRealToolCalls: false,
   realComposerController: null as AgentKitClient | null,
   useRealChat: false,
   routeControllerPersistenceThroughTransport: false,
@@ -675,29 +681,33 @@ vi.mock("@agent-native/core/client/agent-chat", async (importOriginal) => {
   };
 });
 
-vi.mock("./chat/run-recovery.js", async (importOriginal) => ({
-  isMissingLlmProviderRunError: (
-    await importOriginal<typeof import("./chat/run-recovery.js")>()
-  ).isMissingLlmProviderRunError,
-  RunErrorRecoveryCard: (props: unknown) => {
-    chatMocks.failureProps = props;
-    chatMocks.failurePropsHistory.push(props);
-    return React.createElement("div", {
-      "data-testid": "run-error-recovery-card",
-    });
-  },
-  BuilderSetupCard: (props: unknown) => {
-    chatMocks.setupCardProps = props;
-    chatMocks.setupCardPropsHistory.push(props);
-    return React.createElement("div", { "data-testid": "builder-setup-card" });
-  },
-  LoopLimitContinueCard: (props: unknown) => {
-    chatMocks.loopLimitProps = props;
-    return null;
-  },
-  PlanModeCallout: () => null,
-  getRequestModeMetadata: () => undefined,
-}));
+vi.mock("./chat/run-recovery.js", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("./chat/run-recovery.js")>();
+  return {
+    ...actual,
+    RunErrorRecoveryCard: (props: unknown) => {
+      chatMocks.failureProps = props;
+      chatMocks.failurePropsHistory.push(props);
+      return React.createElement("div", {
+        "data-testid": "run-error-recovery-card",
+      });
+    },
+    BuilderSetupCard: (props: unknown) => {
+      chatMocks.setupCardProps = props;
+      chatMocks.setupCardPropsHistory.push(props);
+      return React.createElement("div", {
+        "data-testid": "builder-setup-card",
+      });
+    },
+    LoopLimitContinueCard: (props: unknown) => {
+      chatMocks.loopLimitProps = props;
+      return null;
+    },
+    PlanModeCallout: () => null,
+    getRequestModeMetadata: () => undefined,
+  };
+});
 
 vi.mock("./FileStorageSetupPopover.js", async () => {
   const React = await import("react");
@@ -771,12 +781,17 @@ vi.mock("@agent-native/core/client/use-session", () => ({
   useSession: () => ({ session: chatMocks.session, status: "authenticated" }),
 }));
 
-vi.mock("./chat/tool-call-display.js", async () => {
+vi.mock("./chat/tool-call-display.js", async (importOriginal) => {
   const React = await import("react");
+  const actual =
+    await importOriginal<typeof import("./chat/tool-call-display.js")>();
   return {
-    ChatRunningContext: React.createContext(false),
-    SuppressInlineOpenAppContext: React.createContext(false),
-    ToolCallDisplay: () => null,
+    ChatRunningContext: actual.ChatRunningContext,
+    SuppressInlineOpenAppContext: actual.SuppressInlineOpenAppContext,
+    ToolCallDisplay: (props: any) =>
+      chatMocks.renderRealToolCalls
+        ? React.createElement(actual.ToolCallDisplay, props)
+        : null,
     AgentApprovalCard: (props: any) => {
       chatMocks.approvalCardProps = props;
       return React.createElement(
@@ -1000,6 +1015,7 @@ beforeEach(() => {
   chatMocks.transportOptions = null;
   chatMocks.inBuilder = false;
   chatMocks.useRealRoot = false;
+  chatMocks.renderRealToolCalls = false;
   chatMocks.realComposerController = null;
   chatMocks.useRealChat = false;
   chatMocks.routeControllerPersistenceThroughTransport = false;
@@ -1035,6 +1051,7 @@ afterEach(async () => {
   await unmount();
   chatMocks.realComposerController?.dispose();
   window.sessionStorage.clear();
+  clearToolRenderersForTests();
 });
 
 describe("AgentKitAssistantChat host behavior", () => {
@@ -1331,6 +1348,161 @@ describe("AgentKitAssistantChat host behavior", () => {
     expect(chatMocks.rootProps.slots.widget).toBe(AgentKitActionWidget);
   });
 
+  it("shows failed tools through the shared fallback without an app renderer", async () => {
+    const at = "2026-09-28T00:00:00.000Z";
+    const failedTool: AgentToolCall = {
+      id: "query-1",
+      name: "query-analytics",
+      input: {},
+      output: "Query execution failed.",
+      error: { code: "query_failed", message: "Query execution failed." },
+      status: "failed",
+      runId: "run-1",
+      messageId: "assistant-1",
+      metadata: { chatUI: { renderer: "analytics.query-result.v1" } },
+    };
+    chatMocks.useRealChat = true;
+    chatMocks.useRealRoot = true;
+    chatMocks.renderRealToolCalls = true;
+    chatMocks.thread.messages = [
+      {
+        id: "assistant-1",
+        role: "assistant",
+        status: "complete",
+        parts: [{ type: "text", text: "The query could not be completed." }],
+      },
+    ];
+    chatMocks.thread.tools = { [failedTool.id]: failedTool };
+    chatMocks.thread.runs = {
+      "run-1": { id: "run-1", status: "failed", lastSequence: 3 },
+    };
+    chatMocks.thread.events = [
+      {
+        id: "tool-started",
+        threadId: chatMocks.threadId,
+        runId: "run-1",
+        sequence: 1,
+        occurredAt: at,
+        type: "tool.started",
+        toolCall: { ...failedTool, status: "running" },
+      },
+      {
+        id: "tool-failed",
+        threadId: chatMocks.threadId,
+        runId: "run-1",
+        sequence: 2,
+        occurredAt: at,
+        type: "tool.updated",
+        toolCall: failedTool,
+      },
+      {
+        id: "run-failed",
+        threadId: chatMocks.threadId,
+        runId: "run-1",
+        sequence: 3,
+        occurredAt: at,
+        type: "run.failed",
+        error: { code: "query_failed", message: "Query execution failed." },
+      },
+    ];
+
+    await useRealComposer();
+    await mount(baseProps({ isNewThread: false }));
+
+    const toolRow = container.querySelector<HTMLButtonElement>(
+      "button[aria-expanded]",
+    );
+    expect(toolRow?.textContent).toContain("query analytics");
+    expect(toolRow?.getAttribute("aria-expanded")).toBe("false");
+    expect(container.textContent).not.toContain("Query execution failed.");
+
+    await act(async () => {
+      toolRow?.click();
+    });
+
+    expect(toolRow?.getAttribute("aria-expanded")).toBe("true");
+    expect(container.textContent).toContain("Query execution failed.");
+  });
+
+  it.each(["completed", "cancelled"] as const)(
+    "passes %s status to custom renderers in the regular transcript",
+    async (status) => {
+      const at = "2026-09-28T00:00:00.000Z";
+      const tool: AgentToolCall = {
+        id: "status-tool-1",
+        name: "example-status-tool",
+        input: {},
+        output: "Finished.",
+        status,
+        runId: "status-run-1",
+        messageId: "status-assistant-1",
+      };
+      registerToolRenderer({
+        id: "example-status-renderer",
+        match: "example-status-tool",
+        Component: ({ context }) => (
+          <div data-testid="custom-tool-status" data-status={context.status} />
+        ),
+      });
+      chatMocks.useRealChat = true;
+      chatMocks.useRealRoot = true;
+      chatMocks.renderRealToolCalls = true;
+      chatMocks.thread.messages = [
+        {
+          id: "status-assistant-1",
+          role: "assistant",
+          status: "complete",
+          parts: [{ type: "text", text: "The tool finished." }],
+        },
+      ];
+      chatMocks.thread.tools = { [tool.id]: tool };
+      chatMocks.thread.runs = {
+        "status-run-1": {
+          id: "status-run-1",
+          status,
+          lastSequence: 3,
+        },
+      };
+      chatMocks.thread.events = [
+        {
+          id: "status-tool-started",
+          threadId: chatMocks.threadId,
+          runId: "status-run-1",
+          sequence: 1,
+          occurredAt: at,
+          type: "tool.started",
+          toolCall: { ...tool, status: "running" },
+        },
+        {
+          id: "status-tool-updated",
+          threadId: chatMocks.threadId,
+          runId: "status-run-1",
+          sequence: 2,
+          occurredAt: at,
+          type: "tool.updated",
+          toolCall: tool,
+        },
+        {
+          id: "status-run-ended",
+          threadId: chatMocks.threadId,
+          runId: "status-run-1",
+          sequence: 3,
+          occurredAt: at,
+          type: status === "completed" ? "run.completed" : "run.cancelled",
+        },
+      ];
+
+      await useRealComposer();
+      await mount(baseProps({ isNewThread: false }));
+
+      expect(
+        container
+          .querySelector('[data-testid="custom-tool-status"]')
+          ?.getAttribute("data-status"),
+      ).toBe(status);
+    },
+  );
+
   it("checks readiness on the configured chat API server", async () => {
     await mount(
       baseProps({
@@ -1863,12 +2035,14 @@ describe("AgentKitAssistantChat host behavior", () => {
           createdAt: at,
           updatedAt: at,
           messages: chatMocks.thread.messages,
+          events: chatMocks.thread.events,
           runs: Object.values(chatMocks.thread.runs).map((run) => ({
             ...run,
             threadId,
             startedAt: at,
             completedAt: at,
           })),
+          toolCalls: Object.values(chatMocks.thread.tools),
           suggestions: chatMocks.thread.suggestions,
         }),
         startRun,
@@ -4656,6 +4830,26 @@ describe("AgentKitAssistantChat host behavior", () => {
     ).toBe(true);
   });
 
+  it.each([
+    ["an app send", { submitMessageId: "submit-app-deferred" }, true],
+    ["a typed send", undefined, false],
+  ] as const)(
+    "remembers whether a deferred submission was %s",
+    async (_label, options, fromApp) => {
+      chatMocks.history = { isRestoring: true };
+      const ref = createRef<AssistantChatHandle>();
+      await mount(baseProps(), ref);
+
+      await act(async () => {
+        await ref.current?.sendMessage("Queue this", undefined, options);
+      });
+
+      const stored = JSON.stringify([...chatMocks.appState.values()]);
+      expect(stored).toContain("Queue this");
+      expect(stored.includes('"deferredFromApp":true')).toBe(fromApp);
+    },
+  );
+
   it("uploads inline images before storing a deferred submission", async () => {
     chatMocks.history = { isRestoring: true };
     const submissionExpiresAt = Date.now() + 20_000;
@@ -5769,6 +5963,43 @@ describe("AgentKitAssistantChat host behavior", () => {
     });
   });
 
+  it("tells the turn which surface and sender it came from, and sends it once", async () => {
+    const ref = createRef<AssistantChatHandle>();
+    await mount(baseProps(), ref);
+
+    await act(async () => {
+      await chatMocks.composerProps.onSubmit("Typed by the user", [], [], {
+        intent: "immediate",
+      });
+    });
+    await act(async () => {
+      await ref.current!.sendMessage("Sent by the app", undefined, {
+        submitMessageId: "submit-app",
+        surface: "deck-outline",
+      });
+    });
+    await act(async () => {
+      root.render(
+        <AgentKitAssistantChat
+          {...baseProps()}
+          ref={ref}
+          placeholder="Re-rendered"
+        />,
+      );
+    });
+
+    const metadata = chatMocks.control.sendMessage.mock.calls.map(
+      ([input]) => (input as { metadata: Record<string, unknown> }).metadata,
+    );
+    expect(metadata).toHaveLength(2);
+    expect(metadata[0]).not.toHaveProperty("submitMessageId");
+    expect(metadata[0]).not.toHaveProperty("agentNativeSurface");
+    expect(metadata[1]).toMatchObject({
+      submitMessageId: "submit-app",
+      agentNativeSurface: "deck-outline",
+    });
+  });
+
   it("acknowledges accepted sends after transport acceptance", async () => {
     const ref = createRef<AssistantChatHandle>();
     let resolveSend!: () => void;

package/src/app/chat/AgentKitAssistantChat.tsx

@@ -54,7 +54,10 @@ import {
   readAssistantChatComposerDraft,
   writeAssistantChatComposerDraft,
 } from "@agent-native/core/client/agent-chat";
-import { createAgentNativeChatRuntime } from "@agent-native/core/client/agent-chat";
+import {
+  createAgentNativeChatRuntime,
+  trackTurnSubmitted,
+} from "@agent-native/core/client/agent-chat";
 import type { CreateAgentNativeChatRuntimeOptions } from "@agent-native/core/client/agent-chat";
 import { useAgentDynamicSuggestionsResult } from "@agent-native/core/client/agent-chat";
 import {
@@ -645,6 +648,8 @@ type AgentKitInternalSendOptions = AssistantChatSendOptions & {
   deferredAgentId?: string | null;
   deferredContextScope?: AgentKitAssistantChatProps["contextScope"] | null;
   deferredSubmissionId?: string;
+  /** The deferred send came from app code, whose id the deferral drops. */
+  deferredFromApp?: boolean;
 };
 
 function isSubmissionExpired(submissionExpiresAt: number | undefined): boolean {
@@ -2003,7 +2008,9 @@ export const AgentKitAssistantChat = forwardRef<
         apiUrl: props.apiUrl ?? agentNativePath("/_agent-native/agent-chat"),
         runtime:
           injectedRuntimeRef.current ??
-          createAgentNativeChatRuntime(runtimeOptions),
+          createAgentNativeChatRuntime(runtimeOptions, {
+            onTurnSubmitted: trackTurnSubmitted,
+          }),
         browserTabId: props.browserTabId,
         get threadId() {
           return transportThreadIdRef.current;
@@ -3589,6 +3596,9 @@ const AgentKitAssistantChatBody = forwardRef<
                 agentNativeDeferredSubmissionId: options.deferredSubmissionId,
               }
             : {}),
+          ...(options.deferredFromApp
+            ? { agentNativeDeferredFromApp: true }
+            : {}),
           ...(retryRequestAttachments.length
             ? { agentNativeRetryRequestAttachments: retryRequestAttachments }
             : {}),
@@ -3604,6 +3614,7 @@ const AgentKitAssistantChatBody = forwardRef<
             ? { submitMessageId: options.submitMessageId }
             : {}),
           ...(options.usageLabel ? { usageLabel: options.usageLabel } : {}),
+          ...(options.surface ? { agentNativeSurface: options.surface } : {}),
           ...(options.trackInRunsTray ? { trackInRunsTray: true } : {}),
           ...(skipAmbientSelectionContext
             ? { agentNativeSkipPendingSelectionContext: true }
@@ -3851,6 +3862,7 @@ const AgentKitAssistantChatBody = forwardRef<
               deferredOptions.skipAmbientSelectionContext = true;
             }
             delete deferredOptions.submitMessageId;
+            if (submitMessageId) deferredOptions.deferredFromApp = true;
             delete deferredOptions.attachments;
             deferredOptions.contextAlreadyIncluded = true;
             deferredOptions.deferredRequestAttachments = requestAttachments;
@@ -6467,6 +6479,7 @@ function AgentKitTool({ value, active }: AgentKitRenderProps<AgentToolCall>) {
           args={input}
           argsText={JSON.stringify(input)}
           result={output}
+          status={value.status}
           isError={value.status === "failed"}
           isRunning={value.status === "running"}
           structuredMeta={metadata}

package/src/app/chat/AgentPanel.tsx

@@ -1965,7 +1965,7 @@ function AgentPanelInner({
               return (
                 <div
                   key={tab.id}
-                  className="agent-tab-group relative flex shrink-0 items-center"
+                  className="agent-tab-group relative flex min-w-[56px] max-w-[150px] shrink items-center"
                 >
                   <div
                     role="tab"
@@ -1981,7 +1981,7 @@ function AgentPanelInner({
                       switchMode("chat");
                     })}
                     className={cn(
-                      "agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer min-w-[56px] max-w-[150px]",
+                      "agent-tab relative flex w-full min-w-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer",
                       isActive
                         ? "bg-accent text-foreground"
                         : "text-muted-foreground hover:bg-accent hover:text-foreground",
@@ -2104,7 +2104,7 @@ function AgentPanelInner({
                     return (
                       <div
                         key={tab.id}
-                        className="agent-tab-group relative shrink-0"
+                        className="agent-tab-group relative min-w-[56px] max-w-[150px] shrink"
                       >
                         <div
                           role="button"
@@ -2115,7 +2115,7 @@ function AgentPanelInner({
                             setActiveTabId(tab.id),
                           )}
                           className={cn(
-                            "agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer min-w-[56px] max-w-[150px]",
+                            "agent-tab relative flex w-full min-w-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer",
                             isActive
                               ? "bg-accent text-foreground"
                               : "text-muted-foreground hover:bg-accent hover:text-foreground",
@@ -2208,7 +2208,7 @@ function AgentPanelInner({
                               return (
                                 <div
                                   key={tab.id}
-                                  className="agent-tab-group relative shrink-0"
+                                  className="agent-tab-group relative min-w-[56px] max-w-[150px] shrink"
                                 >
                                   <div
                                     role="button"
@@ -2219,7 +2219,7 @@ function AgentPanelInner({
                                       setActiveTabId(tab.id),
                                     )}
                                     className={cn(
-                                      "agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer min-w-[56px] max-w-[150px]",
+                                      "agent-tab relative flex w-full min-w-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-[11px] font-medium cursor-pointer",
                                       isActive
                                         ? "bg-accent text-foreground"
                                         : "text-muted-foreground hover:bg-accent hover:text-foreground",
@@ -2338,7 +2338,7 @@ function AgentPanelInner({
                         {childTabs.map((tab) => (
                           <div
                             key={tab.id}
-                            className="agent-tab-group relative shrink-0"
+                            className="agent-tab-group relative min-w-[48px] max-w-[140px] shrink"
                           >
                             <div
                               role="button"
@@ -2353,7 +2353,7 @@ function AgentPanelInner({
                                 setActiveTabId(tab.id),
                               )}
                               className={cn(
-                                "agent-tab relative flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium cursor-pointer min-w-[48px] max-w-[140px]",
+                                "agent-tab relative flex w-full min-w-0 items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium cursor-pointer",
                                 tab.id === activeTabId
                                   ? "bg-accent text-foreground"
                                   : "text-muted-foreground hover:bg-accent hover:text-foreground",

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

@@ -5270,6 +5270,23 @@ describe("MultiTabAssistantChat postMessage bridge", () => {
     );
   });
 
+  it("forwards the sender's preset as the send's surface", () => {
+    act(() => {
+      dispatchSubmitChat({
+        message: "Outline the deck",
+        preset: "deck-outline",
+        submitMessageId: "submit-preset",
+      });
+    });
+
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledOnce();
+    expect(chatHandleMocks.sendMessage).toHaveBeenCalledWith(
+      "Outline the deck",
+      undefined,
+      { submitMessageId: "submit-preset", surface: "deck-outline" },
+    );
+  });
+
   it("implements the latest plan when /act is selected", () => {
     chatHandleMocks.implementPlan.mockImplementationOnce(() => true);