@agent-native/toolkit 0.218.0 → 0.219.0

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/TiptapComposer.tsx

@@ -2207,7 +2207,7 @@ function ModelSelector({
               ? `. Agent: ${selectedAgentLabel}`
               : ""
           }`}
-          className="agent-composer-model-button flex min-w-0 max-w-none shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[12px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+          className="agent-composer-model-button flex min-w-0 max-w-none shrink items-center gap-1 overflow-hidden rounded-md px-2 py-1 text-[12px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground"
         >
           <span className="min-w-0 truncate">
             {selectedAgentOption?.icon ? (