@agent-native/toolkit 0.217.0 → 0.219.0

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

@@ -6,6 +6,7 @@ import {
 
 import { AgentWidgetView } from "../../agentkit/react/components.js";
 import {
+  useAgentKit,
   useAgentThread,
   type AgentKitRenderProps,
 } from "../../agentkit/react/context.js";
@@ -30,6 +31,7 @@ export function AgentKitActionWidget({
   value: widget,
   threadId,
 }: AgentKitRenderProps<AgentWidget>) {
+  const { dataChartLayout } = useAgentKit();
   const thread = useAgentThread(threadId);
   const data = asRecord(widget.data);
   const toolCallId = data?.toolCallId;
@@ -92,7 +94,9 @@ export function AgentKitActionWidget({
     resultJson,
     ...(relatedResults.length > 1 ? { relatedResults } : {}),
     widgetId: widget.id,
+    status: tool.status,
     isRunning: tool.status === "running",
+    dataChartLayout,
     chatUI: {
       renderer: widget.kind,
       ...(widget.title ? { title: widget.title } : {}),

package/src/app/chat/agentkit-chat/rail.ts

@@ -1,5 +1,16 @@
 export {
   useChatThreads,
+  useChatThreadList,
+  notifyChatThreadsUpdated,
+  type ChatThreadListRow,
+  type ChatThreadAccessBasis,
+  type ChatThreadOwnership,
+  type ChatThreadVisibility,
+  type ChatThreadListRefreshOutcome,
+  type ChatThreadScope,
+  type UseChatThreadsOptions,
+  type UseChatThreadListOptions,
+  type UseChatThreadListResult,
   type ChatThreadSummary,
 } from "@agent-native/core/client/agent-chat";
 export {

package/src/app/chat/chat/index.ts

@@ -54,6 +54,7 @@ export type {
   AgentChatSurfaceKind,
 } from "./surface-types.js";
 export type { AgentChatTranscriptLayout } from "../../agentkit/react/transcript-layout.js";
+export type { AgentChatDataChartLayout } from "../../agentkit/react/data-chart-layout.js";
 export type { AgentChatWorkedForRowLayout } from "../../agentkit/react/transcript-layout.js";
 export type {
   MultiTabAssistantChatProps,
@@ -222,6 +223,15 @@ export {
 } from "@agent-native/core/client/agent-chat";
 export {
   useChatThreads,
+  useChatThreadList,
+  notifyChatThreadsUpdated,
+  type ChatThreadListRow,
+  type ChatThreadAccessBasis,
+  type ChatThreadOwnership,
+  type ChatThreadVisibility,
+  type ChatThreadListRefreshOutcome,
+  type UseChatThreadListOptions,
+  type UseChatThreadListResult,
   type ChatThreadScope,
   type ChatThreadSnapshot,
   type ChatThreadSummary,

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

@@ -27,6 +27,7 @@ import type { ExportedMessageRepository } from "@assistant-ui/react";
 import type * as React from "react";
 
 import type { AgentKitWorkedForSummaryRenderProps } from "../../agentkit/react/context.js";
+import type { AgentChatDataChartLayout } from "../../agentkit/react/data-chart-layout.js";
 import type { AgentMessageContentOrderResolver } from "../../agentkit/react/message-content-order.js";
 import type {
   AgentChatTranscriptLayout,
@@ -244,6 +245,8 @@ export interface AssistantChatProps {
   emptyStateFooter?: React.ReactNode;
   /** Optional transcript geometry. Omitted values keep the shared defaults. */
   transcriptLayout?: AgentChatTranscriptLayout;
+  /** Optional sizing and typography for built-in chat data charts. */
+  dataChartLayout?: AgentChatDataChartLayout;
   /** Optional elapsed-work row geometry. Omitted values keep the shared defaults. */
   workedForRowLayout?: AgentChatWorkedForRowLayout;
   /** Optional duration text for the shared completed-work row. */

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

@@ -352,6 +352,35 @@ describe("ToolCallDisplay native renderers", () => {
     expect(container.textContent).not.toContain("Ada");
   });
 
+  it("passes the app chart layout to regular tool renderers", () => {
+    const layout = { maxWidth: 760, labelFontSize: 14 };
+    registerToolRenderer({
+      id: "app.chart-layout",
+      match: "app-chart-layout",
+      Component: ({ context }) => (
+        <div data-chart-layout-width={context.dataChartLayout?.maxWidth} />
+      ),
+    });
+
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="app-chart-layout"
+          args={{}}
+          result="ready"
+          isRunning={false}
+          dataChartLayout={layout}
+        />,
+      );
+    });
+
+    expect(
+      container
+        .querySelector("[data-chart-layout-width]")
+        ?.getAttribute("data-chart-layout-width"),
+    ).toBe("760");
+  });
+
   it("renders table-only data insight payloads without a chart", async () => {
     await act(async () => {
       root.render(

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

@@ -47,6 +47,7 @@ import React, {
   useRef,
 } from "react";
 
+import type { AgentChatDataChartLayout } from "../../agentkit/react/data-chart-layout.js";
 import {
   workedForRowChevronStyle,
   workedForRowSummaryStyle,
@@ -78,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,
@@ -635,6 +639,7 @@ export function ToolCallDisplay({
   argsText,
   args,
   result,
+  status,
   mcpApp,
   chatUI,
   isRunning,
@@ -647,6 +652,7 @@ export function ToolCallDisplay({
   isLatestRunning = isRunning,
   isActiveTail,
   workedForRowLayout,
+  dataChartLayout,
   formatWorkedForDuration,
 }: {
   toolName: string;
@@ -654,6 +660,7 @@ export function ToolCallDisplay({
   argsText?: string;
   args: Record<string, unknown>;
   result?: string;
+  status?: ToolRendererContext["status"];
   mcpApp?: AgentMcpAppPayload;
   chatUI?: ActionChatUIConfig;
   isRunning: boolean;
@@ -670,6 +677,7 @@ export function ToolCallDisplay({
   repeatCount?: number;
   isActiveTail?: boolean;
   workedForRowLayout?: AgentChatWorkedForRowLayout;
+  dataChartLayout?: AgentChatDataChartLayout;
   formatWorkedForDuration?: (durationMs: number) => string;
   /** @deprecated Use isActiveTail. */
   isLatestRunning?: boolean;
@@ -747,6 +755,7 @@ export function ToolCallDisplay({
       argsText={argsText}
       args={args}
       result={result}
+      status={status}
       mcpApp={mcpApp}
       chatUI={chatUI}
       isRunning={effectiveIsRunning}
@@ -758,6 +767,7 @@ export function ToolCallDisplay({
       repeatCount={repeatCount}
       context={builderContext}
       workedForRowLayout={workedForRowLayout}
+      dataChartLayout={dataChartLayout}
       formatWorkedForDuration={formatWorkedForDuration}
     />,
   );
@@ -771,6 +781,7 @@ function ToolCallDisplayGeneric({
   argsText,
   args,
   result,
+  status,
   mcpApp,
   chatUI,
   isRunning,
@@ -782,6 +793,7 @@ function ToolCallDisplayGeneric({
   repeatCount,
   context,
   workedForRowLayout,
+  dataChartLayout,
   formatWorkedForDuration,
 }: {
   toolName: string;
@@ -789,6 +801,7 @@ function ToolCallDisplayGeneric({
   argsText?: string;
   args: Record<string, unknown>;
   result?: string;
+  status?: ToolRendererContext["status"];
   mcpApp?: AgentMcpAppPayload;
   chatUI?: ActionChatUIConfig;
   isRunning: boolean;
@@ -805,6 +818,7 @@ function ToolCallDisplayGeneric({
   repeatCount?: number;
   context?: string;
   workedForRowLayout?: AgentChatWorkedForRowLayout;
+  dataChartLayout?: AgentChatDataChartLayout;
   formatWorkedForDuration?: (durationMs: number) => string;
 }) {
   const t = useT();
@@ -917,8 +931,10 @@ function ToolCallDisplayGeneric({
     args,
     resultText: result,
     resultJson: parsedResult,
+    status,
     isRunning,
     isActiveTail,
+    dataChartLayout,
     ...(typeof toolCallId === "string"
       ? { widgetId: `${toolCallId}:chat-ui` }
       : {}),

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

@@ -1,6 +1,9 @@
+import type { AgentToolCall } from "@agent-native/agentkit/protocol";
 import type { ActionChatUIConfig } from "@agent-native/core/action-ui";
 import type { ComponentType } from "react";
 
+import type { AgentChatDataChartLayout } from "../../agentkit/react/data-chart-layout.js";
+
 export interface ToolRendererContext {
   toolName: string;
   args: Record<string, unknown>;
@@ -12,9 +15,11 @@ export interface ToolRendererContext {
     toolName?: string;
   }>;
   widgetId?: string;
+  status?: AgentToolCall["status"];
   isRunning: boolean;
   isActiveTail?: boolean;
   chatUI?: ActionChatUIConfig;
+  dataChartLayout?: AgentChatDataChartLayout;
 }
 
 export interface ToolRendererProps {