@agent-native/toolkit 0.218.0 → 0.219.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.218.0",
+  "version": "0.219.0",
   "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.219.0"
   },
   "devDependencies": {
     "@excalidraw/excalidraw": "0.18.1",
@@ -709,7 +709,7 @@
     "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.219.0"
   },
   "peerDependencies": {
     "@agent-native/core": ">=0.205.1",

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,

package/src/app/chat/AgentKitAssistantChat.tsx

@@ -6467,6 +6467,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.tsx

@@ -3680,7 +3680,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 +3782,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/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;