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

package/src/app/chat/MultiTabAssistantChat.tsx

@@ -128,6 +128,8 @@ interface PendingSend {
   actionScope?: AgentActionScope;
   /** See `AgentChatMessage.approvedToolCalls`. */
   approvedToolCalls?: string[];
+  /** See `AssistantChatSendOptions.surface`. */
+  surface?: string;
 }
 
 /**
@@ -269,6 +271,7 @@ function deliverPendingSend(
       : {}),
     ...(send.usageLabel ? { usageLabel: send.usageLabel } : {}),
     ...(send.actionScope ? { actionScope: send.actionScope } : {}),
+    ...(send.surface ? { surface: send.surface } : {}),
     // An approval resume is a protocol continuation, not a visible prompt.
     ...(send.approvedToolCalls
       ? { approvedToolCalls: send.approvedToolCalls, hideUserMessage: true }
@@ -2408,6 +2411,7 @@ export function MultiTabAssistantChat({
         usageLabel,
         actionScope,
         approvedToolCalls,
+        surface,
       } = parsed;
       const requestedTabId = parsed.tabId;
       const requestMode =
@@ -2471,6 +2475,7 @@ export function MultiTabAssistantChat({
           ? { submissionExpiresAt: parsed.submissionExpiresAt }
           : {}),
         ...(approvedToolCalls ? { approvedToolCalls } : {}),
+        ...(surface ? { surface } : {}),
       };
       // Resolved once, up front, and carried with the send until a thread
       // exists to key it by. Applying it only when `model` matched
@@ -3680,7 +3685,7 @@ export function MultiTabAssistantChat({
                             key={tab.id}
                             ref={isActive ? activeTabRefCb : undefined}
                             className={cn(
-                              "agent-tab agent-tab-group relative flex items-center rounded-md text-[11px] font-medium shrink-0 min-w-[56px] max-w-[130px]",
+                              "agent-tab agent-tab-group relative flex items-center rounded-md text-[11px] font-medium shrink min-w-[56px] max-w-[130px]",
                               isActive
                                 ? "bg-accent text-foreground ring-1 ring-inset ring-border/60 shadow-sm"
                                 : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
@@ -3782,7 +3787,7 @@ export function MultiTabAssistantChat({
                                 : undefined
                             }
                             className={cn(
-                              "agent-tab agent-tab-group relative flex shrink-0 items-center rounded-md text-[10px] font-medium min-w-[48px] max-w-[130px]",
+                              "agent-tab agent-tab-group relative flex shrink items-center rounded-md text-[10px] font-medium min-w-[48px] max-w-[130px]",
                               tab.id === activeThreadId
                                 ? "bg-accent text-foreground"
                                 : "text-muted-foreground hover:bg-accent hover:text-foreground",

package/src/app/chat/agentkit-chat/action-widget.spec.tsx

@@ -32,6 +32,68 @@ import { AgentKitActionWidget } from "./action-widget.js";
 const catalog = createToolkitI18nCatalog({ messages: {} });
 
 describe("AgentKitActionWidget", () => {
+  it.each(["running", "completed", "failed", "cancelled"] as const)(
+    "exposes the %s tool status to renderers while retaining isRunning",
+    async (status) => {
+      const toolCall: AgentToolCall = {
+        id: "tool-1",
+        name: "preview-inbox",
+        input: {},
+        output: { ok: true },
+        status,
+      };
+      const widget: AgentWidget = {
+        id: "tool-1:chat-ui",
+        kind: "mail.inbox-preview",
+        data: { toolCallId: toolCall.id, toolName: toolCall.name },
+      };
+      const client = new AgentKitClient({
+        transport: {
+          async startRun() {
+            return { runId: "run-1" };
+          },
+          async *subscribeToRun() {},
+          async cancelRun() {},
+          async getThreadSnapshot() {
+            return {
+              id: "thread-1",
+              createdAt: "2026-09-26T00:00:00.000Z",
+              updatedAt: "2026-09-26T00:00:00.000Z",
+              messages: [],
+              toolCalls: [toolCall],
+            };
+          },
+        },
+      });
+      await client.loadThread("thread-1");
+      const unregister = registerActionChatRenderer({
+        id: `test.agentkit-action-widget-status-${status}`,
+        renderer: widget.kind,
+        Component: ({ context }: ToolRendererProps) => (
+          <output
+            data-status={context.status}
+            data-running={String(context.isRunning)}
+          />
+        ),
+      });
+
+      try {
+        const html = renderToStaticMarkup(
+          <AgentKitProvider controller={client} threadId="thread-1">
+            <AgentKitActionWidget value={widget} threadId="thread-1" />
+          </AgentKitProvider>,
+        );
+
+        expect(html).toContain(`data-status="${status}"`);
+        expect(html).toContain(
+          `data-running="${String(status === "running")}"`,
+        );
+      } finally {
+        unregister();
+      }
+    },
+  );
+
   it("resolves the renderer with stored action args and structured result", async () => {
     const toolCall: AgentToolCall = {
       id: "tool-1",

package/src/app/chat/agentkit-chat/action-widget.tsx

@@ -94,6 +94,7 @@ export function AgentKitActionWidget({
     resultJson,
     ...(relatedResults.length > 1 ? { relatedResults } : {}),
     widgetId: widget.id,
+    status: tool.status,
     isRunning: tool.status === "running",
     dataChartLayout,
     chatUI: {

package/src/app/chat/chat/surface-types.ts

@@ -62,6 +62,8 @@ export interface AssistantChatSendOptions {
   approvedToolCalls?: string[];
   /** Send as a protocol continuation that stays out of visible history. */
   hideUserMessage?: boolean;
+  /** The app surface this send came from, reported with the turn's analytics. */
+  surface?: string;
 }
 
 export type AssistantChatSubmitResult =

package/src/app/chat/chat/tool-call-display.tsx

@@ -79,7 +79,10 @@ import {
   IntegrationToolBadge,
   resolveToolIntegration,
 } from "./tool-integration.js";
-import { resolveToolRenderer } from "./tool-render-registry.js";
+import {
+  resolveToolRenderer,
+  type ToolRendererContext,
+} from "./tool-render-registry.js";
 import {
   isBuiltinDataWidgetActionRenderer,
   isBuiltinWorkspaceFileResult,
@@ -636,6 +639,7 @@ export function ToolCallDisplay({
   argsText,
   args,
   result,
+  status,
   mcpApp,
   chatUI,
   isRunning,
@@ -656,6 +660,7 @@ export function ToolCallDisplay({
   argsText?: string;
   args: Record<string, unknown>;
   result?: string;
+  status?: ToolRendererContext["status"];
   mcpApp?: AgentMcpAppPayload;
   chatUI?: ActionChatUIConfig;
   isRunning: boolean;
@@ -750,6 +755,7 @@ export function ToolCallDisplay({
       argsText={argsText}
       args={args}
       result={result}
+      status={status}
       mcpApp={mcpApp}
       chatUI={chatUI}
       isRunning={effectiveIsRunning}
@@ -775,6 +781,7 @@ function ToolCallDisplayGeneric({
   argsText,
   args,
   result,
+  status,
   mcpApp,
   chatUI,
   isRunning,
@@ -794,6 +801,7 @@ function ToolCallDisplayGeneric({
   argsText?: string;
   args: Record<string, unknown>;
   result?: string;
+  status?: ToolRendererContext["status"];
   mcpApp?: AgentMcpAppPayload;
   chatUI?: ActionChatUIConfig;
   isRunning: boolean;
@@ -923,6 +931,7 @@ function ToolCallDisplayGeneric({
     args,
     resultText: result,
     resultJson: parsedResult,
+    status,
     isRunning,
     isActiveTail,
     dataChartLayout,

package/src/app/chat/chat/tool-render-registry.tsx

@@ -1,3 +1,4 @@
+import type { AgentToolCall } from "@agent-native/agentkit/protocol";
 import type { ActionChatUIConfig } from "@agent-native/core/action-ui";
 import type { ComponentType } from "react";
 
@@ -14,6 +15,7 @@ export interface ToolRendererContext {
     toolName?: string;
   }>;
   widgetId?: string;
+  status?: AgentToolCall["status"];
   isRunning: boolean;
   isActiveTail?: boolean;
   chatUI?: ActionChatUIConfig;

package/src/app/chat/conversation/AgentConversation.spec.tsx

@@ -116,7 +116,9 @@ describe("AgentConversationMessageView", () => {
       id: "example-renderer",
       match: "example-tool",
       Component: ({ context }) => (
-        <div data-testid="example-renderer">{context.resultText}</div>
+        <div data-testid="example-renderer">
+          Custom renderer: {context.resultText}
+        </div>
       ),
     });
     act(() =>
@@ -144,11 +146,59 @@ describe("AgentConversationMessageView", () => {
     expect(container.querySelector('[data-testid="example-renderer"]')).toBe(
       null,
     );
+    expect(container.textContent).not.toContain("Custom renderer:");
+    expect(container.querySelector("pre span")?.textContent).toBe(
+      "Example Document failed.",
+    );
     expect(
       container.querySelector("pre span")?.hasAttribute("data-an-mask"),
     ).toBe(true);
   });
 
+  it.each([
+    ["running", "running"],
+    ["activity", "running"],
+    ["completed", "completed"],
+  ] as const)(
+    "passes %s status to conversation custom renderers as %s",
+    (state, status) => {
+      registerToolRenderer({
+        id: "example-status-renderer",
+        match: "example-status-tool",
+        Component: ({ context }) => (
+          <div data-testid="example-tool-status" data-status={context.status} />
+        ),
+      });
+      act(() =>
+        root.render(
+          <AgentConversationMessageView
+            message={{
+              id: "message-status",
+              role: "assistant",
+              parts: [
+                {
+                  id: "tool-status",
+                  type: "tool",
+                  tool: {
+                    id: "tool-status",
+                    name: "example-status-tool",
+                    state,
+                  },
+                },
+              ],
+            }}
+          />,
+        ),
+      );
+
+      expect(
+        container
+          .querySelector('[data-testid="example-tool-status"]')
+          ?.getAttribute("data-status"),
+      ).toBe(status);
+    },
+  );
+
   it.each(["errored", "completed"] as const)(
     "blocks only an errored tool's MCP App from replays (%s)",
     (state) => {

package/src/app/chat/conversation/AgentConversation.tsx

@@ -17,7 +17,10 @@ import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
 import remarkGfm from "remark-gfm";
 
 import { ActionChatUiSurface } from "../chat/action-chat-ui-surface.js";
-import { resolveToolRenderer } from "../chat/tool-render-registry.js";
+import {
+  resolveToolRenderer,
+  type ToolRendererContext,
+} from "../chat/tool-render-registry.js";
 import {
   isBuiltinConnectRequiredResult,
   resolveBuiltinActionChatRenderer,
@@ -407,11 +410,17 @@ function parseJsonObject(value: string | undefined): Record<string, unknown> {
 function ConversationToolCall({ tool }: { tool: AgentConversationToolCall }) {
   const t = useT();
   const resultJson = parseJsonText(tool.result);
-  const nativeToolContext = {
+  const nativeToolContext: ToolRendererContext = {
     toolName: tool.name,
     args: tool.args ?? parseJsonObject(tool.input),
     resultText: tool.result,
     resultJson: tool.resultJson ?? resultJson,
+    status:
+      tool.state === "errored"
+        ? undefined
+        : tool.state === "activity"
+          ? "running"
+          : tool.state,
     isRunning: tool.state === "running" || tool.state === "activity",
     chatUI: tool.chatUI,
   };

package/src/app/shared/CommandMenu.spec.tsx

@@ -9,13 +9,19 @@ const agentEngineStatusMock = vi.hoisted(() => ({
   state: "missing" as "unknown" | "configured" | "missing" | "unavailable",
 }));
 
-vi.mock("@agent-native/core/client/use-agent-engine-configured", () => ({
-  useAgentEngineConfigured: () => ({
-    canChat: agentEngineStatusMock.state === "configured",
-    missing: agentEngineStatusMock.state === "missing",
-    state: agentEngineStatusMock.state,
+vi.mock(
+  "@agent-native/core/client/use-agent-engine-configured",
+  async (importOriginal) => ({
+    ...(await importOriginal<
+      typeof import("@agent-native/core/client/use-agent-engine-configured")
+    >()),
+    useAgentEngineConfigured: () => ({
+      canChat: agentEngineStatusMock.state === "configured",
+      missing: agentEngineStatusMock.state === "missing",
+      state: agentEngineStatusMock.state,
+    }),
   }),
-}));
+);
 
 vi.mock("../chat/chat/run-recovery.js", async () => {
   const { createElement } = await import("react");
@@ -44,6 +50,7 @@ import {
   openAgentSettings,
   useCommandMenuNestedDialog,
   useCommandMenuShortcut,
+  type AppCommandContext,
   type AppCommandGroup,
   type CommandMenuItemMatchContext,
   type CommandMenuItemMatcher,
@@ -1836,6 +1843,168 @@ describe("CommandMenu", () => {
     ).toContain("Selected preview");
   });
 
+  it("renders opt-in app command previews in only the selected row", () => {
+    renderAppCommands({
+      groups: [
+        {
+          id: "results",
+          order: 1,
+          commands: [
+            {
+              id: "record",
+              order: 1,
+              label: "Meeting notes",
+              inlinePreview: <span>First row preview</span>,
+              onSelect() {},
+            },
+            {
+              id: "meeting-agenda",
+              order: 2,
+              label: "Meeting agenda",
+              inlinePreview: <span>Second row preview</span>,
+              onSelect() {},
+            },
+          ],
+        },
+      ],
+    });
+
+    const firstRow = document.querySelector(
+      '[cmdk-item][data-value="app-command:results:record"]',
+    );
+    const secondRow = document.querySelector(
+      '[cmdk-item][data-value="app-command:results:meeting-agenda"]',
+    );
+    expect(
+      firstRow?.querySelector(
+        '[data-testid="command-menu-app-command-preview"]',
+      )?.textContent,
+    ).toBe("First row preview");
+    expect(
+      secondRow?.querySelector(
+        '[data-testid="command-menu-app-command-preview"]',
+      ),
+    ).toBeNull();
+
+    const input = document.querySelector<HTMLInputElement>("[cmdk-input]");
+    expect(input).toBeTruthy();
+    act(() =>
+      input!.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
+      ),
+    );
+
+    expect(
+      firstRow?.querySelector(
+        '[data-testid="command-menu-app-command-preview"]',
+      ),
+    ).toBeNull();
+    expect(
+      secondRow?.querySelector(
+        '[data-testid="command-menu-app-command-preview"]',
+      )?.textContent,
+    ).toBe("Second row preview");
+  });
+
+  it("keeps the selected app preview when search retains the highlighted row", () => {
+    renderAppCommands({
+      groups: [
+        {
+          id: "results",
+          order: 1,
+          commands: [
+            {
+              id: "meeting-notes",
+              order: 1,
+              label: "Meeting notes",
+              inlinePreview: <span>Meeting preview</span>,
+              onSelect() {},
+            },
+            {
+              id: "other-task",
+              order: 2,
+              label: "Other task",
+              inlinePreview: <span>Other preview</span>,
+              onSelect() {},
+            },
+          ],
+        },
+      ],
+    });
+
+    const selectedPreview = () =>
+      document.querySelector(
+        '[cmdk-item][data-value="app-command:results:meeting-notes"] [data-testid="command-menu-app-command-preview"]',
+      )?.textContent;
+
+    expect(selectedPreview()).toBe("Meeting preview");
+    search("Meeting");
+    expect(selectedPreview()).toBe("Meeting preview");
+  });
+
+  it("passes app context and search to an app command row preview", () => {
+    const renderPreview = vi.fn(
+      ({
+        search: currentSearch,
+        appContext,
+      }: AppCommandContext<{ workspace: string }>) => (
+        <span>{`${currentSearch}|${appContext?.workspace}`}</span>
+      ),
+    );
+    renderAppCommands({
+      initialSelection: "none",
+      context: { workspace: "alpha" },
+      groups: [
+        {
+          id: "results",
+          order: 1,
+          commands: [
+            {
+              id: "workspace",
+              order: 1,
+              label: "Open workspace",
+              inlinePreview: renderPreview,
+              onSelect() {},
+            },
+          ],
+        },
+      ],
+    });
+
+    const input = document.querySelector<HTMLInputElement>("[cmdk-input]");
+    expect(input).toBeTruthy();
+    const moveDown = () =>
+      act(() =>
+        input!.dispatchEvent(
+          new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
+        ),
+      );
+    moveDown();
+
+    expect(renderPreview).toHaveBeenCalledWith(
+      expect.objectContaining({
+        search: "",
+        appContext: { workspace: "alpha" },
+      }),
+    );
+    expect(
+      document.querySelector('[data-testid="command-menu-app-command-preview"]')
+        ?.textContent,
+    ).toBe("|alpha");
+
+    search("workspace");
+    moveDown();
+    expect(
+      document.querySelector(
+        '[cmdk-item][data-value="app-command:results:workspace"]',
+      ),
+    ).toBeTruthy();
+    expect(
+      document.querySelector('[data-testid="command-menu-app-command-preview"]')
+        ?.textContent,
+    ).toBe("workspace|alpha");
+  });
+
   it("hides the app preview when a non-app result is selected", () => {
     renderAppCommands({
       groups: [

package/src/app/shared/CommandMenu.tsx

@@ -304,6 +304,10 @@ interface AppCommandBase<TAppContext> {
   preview?:
     | ReactNode
     | ((context: AppCommandContext<TAppContext>) => ReactNode);
+  /** Content rendered at the end of this command's selected row. */
+  inlinePreview?:
+    | ReactNode
+    | ((context: AppCommandContext<TAppContext>) => ReactNode);
   visibleWhen?: (context: AppCommandContext<TAppContext>) => boolean;
   enabledWhen?: (context: AppCommandContext<TAppContext>) => boolean;
   deferSelect?: boolean;
@@ -877,9 +881,10 @@ export function CommandMenu<TAppContext = unknown>({
           firstEnabledAppCommand?.value ??
           NO_COMMAND_SELECTION)
         : undefined;
+  const selectedAppCommandValue = commandMenuValue ?? selectedCommandValue;
   const previewAppCommand =
     appCommandEntries.find(
-      (entry) => entry.value === (commandMenuValue ?? selectedCommandValue),
+      (entry) => entry.value === selectedAppCommandValue,
     ) ?? selectedAppCommand;
   const appPreview = previewAppCommand?.command.preview;
   const renderedAppPreview =
@@ -973,6 +978,12 @@ export function CommandMenu<TAppContext = unknown>({
             {commands.map((command) => {
               const value = `app-command:${group.id}:${command.id}`;
               const enabled = command.enabledWhen?.(appCommandContext) ?? true;
+              const inlinePreview =
+                value === selectedAppCommandValue
+                  ? typeof command.inlinePreview === "function"
+                    ? command.inlinePreview(appCommandContext)
+                    : command.inlinePreview
+                  : null;
               return (
                 <CommandItemPrimitive
                   key={command.id}
@@ -1003,6 +1014,14 @@ export function CommandMenu<TAppContext = unknown>({
                       {command.shortcutHint}
                     </CommandShortcutPrimitive>
                   ) : null}
+                  {inlinePreview != null ? (
+                    <div
+                      data-testid="command-menu-app-command-preview"
+                      className="ms-auto min-w-0"
+                    >
+                      {inlinePreview}
+                    </div>
+                  ) : null}
                 </CommandItemPrimitive>
               );
             })}
@@ -1299,12 +1318,10 @@ export function CommandMenu<TAppContext = unknown>({
                 onValueChange={(value) => {
                   updateSearch(value);
                   selectionEnabledRef.current = false;
-                  if (initialSelection === "none") setSelectionEnabled(false);
-                  setSelectedCommandValue(
-                    initialSelection === "none"
-                      ? nextEmptySelectionValue()
-                      : "",
-                  );
+                  if (initialSelection === "none") {
+                    setSelectionEnabled(false);
+                    setSelectedCommandValue(nextEmptySelectionValue());
+                  }
                 }}
                 onKeyDown={(event) => {
                   if (

package/src/composer/ComposerContextMenu.tsx

@@ -215,7 +215,7 @@ function ContextSubmenu({
   icon?: ReactNode;
   disabled?: boolean;
   open: boolean;
-  onOpenChange: (open: boolean) => void;
+  onOpenChange: (open: boolean, reason?: "escape") => void;
   children: ReactNode;
 }) {
   const trigger = useRef<HTMLDivElement>(null);
@@ -244,7 +244,7 @@ function ContextSubmenu({
         onEscapeKeyDown={(event) => {
           event.preventDefault();
           event.stopPropagation();
-          onOpenChange(false);
+          onOpenChange(false, "escape");
           trigger.current?.focus();
         }}
       >
@@ -312,10 +312,14 @@ export function ComposerContextMenu({
   const onDisabledFocusRef = useRef(onDisabledFocus);
   onDisabledFocusRef.current = onDisabledFocus;
   const disabledFocusFrame = useRef<number | null>(null);
+  const resumedPageClose = useRef<string | null>(null);
+  const resumedPageCloseFrame = useRef<number | null>(null);
   useEffect(
     () => () => {
       if (disabledFocusFrame.current !== null)
         window.cancelAnimationFrame(disabledFocusFrame.current);
+      if (resumedPageCloseFrame.current !== null)
+        window.cancelAnimationFrame(resumedPageCloseFrame.current);
     },
     [],
   );
@@ -545,7 +549,19 @@ export function ComposerContextMenu({
               label={entry.label}
               disabled={entry.disabled}
               open={expanded}
-              onOpenChange={(next) => {
+              onOpenChange={(next, reason) => {
+                if (
+                  !next &&
+                  reason !== "escape" &&
+                  resumedPageClose.current === entry.id
+                ) {
+                  resumedPageClose.current = null;
+                  if (resumedPageCloseFrame.current !== null) {
+                    window.cancelAnimationFrame(resumedPageCloseFrame.current);
+                    resumedPageCloseFrame.current = null;
+                  }
+                  return;
+                }
                 const isOpen = branch.every(
                   (id, index) => pathRef.current[index] === id,
                 );
@@ -588,6 +604,19 @@ export function ComposerContextMenu({
                         );
                         return;
                       }
+                      // Radix can emit one stale close after native-picker focus returns.
+                      resumedPageClose.current = entry.id;
+                      if (resumedPageCloseFrame.current !== null)
+                        window.cancelAnimationFrame(
+                          resumedPageCloseFrame.current,
+                        );
+                      resumedPageCloseFrame.current =
+                        window.requestAnimationFrame(() => {
+                          resumedPageCloseFrame.current = null;
+                          if (resumedPageClose.current === entry.id)
+                            resumedPageClose.current = null;
+                        });
+                      triggerRef.current?.focus();
                       changeOpen(true);
                       activate(action, origin, false);
                     },