+ {renderChatMessage(item.message, `${keyPrefix}-msg-${item.startIndex}`)}
+
+ )
+ );
+
if (sessionNotFound) {
return (
@@ -1069,39 +1126,8 @@ export default function ChatInterface({ selectedAgentName, selectedNamespace, se
) : (
<>
- {/* Display stored messages from session */}
- {storedMessages.map((message, index) => {
- return
diff --git a/ui/src/components/chat/ToolCallDisplay.tsx b/ui/src/components/chat/ToolCallDisplay.tsx
index cfe3491bd..18e7afbe5 100644
--- a/ui/src/components/chat/ToolCallDisplay.tsx
+++ b/ui/src/components/chat/ToolCallDisplay.tsx
@@ -1,9 +1,16 @@
import React, { useMemo } from "react";
-import { Message, TextPart } from "@a2a-js/sdk";
+import { Message } from "@a2a-js/sdk";
import ToolDisplay, { ToolCallStatus } from "@/components/ToolDisplay";
import AgentCallDisplay, { AgentCallStatus } from "@/components/chat/AgentCallDisplay";
import { isAgentToolName } from "@/lib/utils";
-import { ADKMetadata, ProcessedToolCallData, ProcessedToolResultData, ToolResponseData, normalizeToolResultToText, getMetadataValue } from "@/lib/messageHandlers";
+import { ADKMetadata, ProcessedToolCallData, getMetadataValue } from "@/lib/messageHandlers";
+import {
+ isToolCallRequestMessage,
+ isToolCallExecutionMessage,
+ isToolCallSummaryMessage,
+ extractToolCallRequests,
+ extractToolCallResults,
+} from "@/lib/toolCallExtraction";
import { FunctionCall, ToolDecision, TokenStats } from "@/types";
import type { ChatMcpAppTool } from "@/components/chat/ChatMcpAppsContext";
@@ -29,154 +36,6 @@ interface ToolCallState {
subagentSessionId?: string;
}
-// Helper functions to work with A2A SDK Messages
-const isToolCallRequestMessage = (message: Message): boolean => {
- // Check data parts for type metadata first
- const hasDataParts = message.parts?.some(part => {
- if (part.kind === "data" && part.metadata) {
- return getMetadataValue
(part.metadata as Record, "type") === "function_call";
- }
- return false;
- }) || false;
-
- // Fallback to streaming format check
- if (!hasDataParts) {
- const metadata = message.metadata as ADKMetadata;
- return metadata?.originalType === "ToolCallRequestEvent" || metadata?.originalType === "ToolApprovalRequest";
- }
-
- return hasDataParts;
-};
-
-const isToolCallExecutionMessage = (message: Message): boolean => {
- const hasDataParts = message.parts?.some(part => {
- if (part.kind === "data" && part.metadata) {
- return getMetadataValue(part.metadata as Record, "type") === "function_response";
- }
- return false;
- }) || false;
-
- // Fallback to streaming format check
- if (!hasDataParts) {
- const metadata = message.metadata as ADKMetadata;
- return metadata?.originalType === "ToolCallExecutionEvent";
- }
-
- return hasDataParts;
-};
-
-const isToolCallSummaryMessage = (message: Message): boolean => {
- const metadata = message.metadata as ADKMetadata;
- return metadata?.originalType === "ToolCallSummaryMessage";
-};
-
-const extractToolCallRequests = (message: Message): FunctionCall[] => {
- if (!isToolCallRequestMessage(message)) return [];
-
- // Check for stored task format first (data parts)
- const dataParts = message.parts?.filter(part => part.kind === "data") || [];
- const functionCalls: FunctionCall[] = [];
-
- for (const part of dataParts) {
- if (part.metadata) {
- if (getMetadataValue(part.metadata as Record, "type") === "function_call") {
- const data = part.data as unknown as FunctionCall;
- // Skip ADK internal function calls (confirmation/auth) and ask_user (has its own display)
- if (
- data.name === "adk_request_confirmation" ||
- data.name === "adk_request_credential" ||
- data.name === "ask_user"
- ) {
- continue;
- }
- functionCalls.push({
- id: data.id,
- name: data.name,
- args: data.args ?? {},
- });
- }
- }
- }
-
- // If we found function calls in data parts, return them
- if (functionCalls.length > 0) {
- return functionCalls;
- }
-
- // Try streaming format (metadata or text content)
- const textParts = message.parts?.filter(part => part.kind === "text") || [];
- const content = textParts.map(part => (part as TextPart).text).join("");
-
- try {
- // Tool call data might be stored as JSON in content or metadata
- const metadata = message.metadata as ADKMetadata;
- const toolCallData = metadata?.toolCallData || JSON.parse(content || "[]");
- return Array.isArray(toolCallData)
- ? toolCallData.filter(tc =>
- tc.name !== "adk_request_confirmation" &&
- tc.name !== "adk_request_credential" &&
- tc.name !== "ask_user"
- )
- : [];
- } catch {
- return [];
- }
-};
-
-const extractToolCallResults = (message: Message): ProcessedToolResultData[] => {
- if (!isToolCallExecutionMessage(message)) return [];
-
- // Check for stored task format first (data parts)
- const dataParts = message.parts?.filter(part => part.kind === "data") || [];
- const toolResults: ProcessedToolResultData[] = [];
-
- for (const part of dataParts) {
- if (part.metadata) {
- if (getMetadataValue(part.metadata as Record, "type") === "function_response") {
- const data = part.data as unknown as ToolResponseData;
-
- // For agent tool responses we receive { result, subagent_session_id } as FunctionResponse.response.
- const textContent = normalizeToolResultToText(data);
- let subagentSessionId: string | undefined;
- if (isAgentToolName(data.name)) {
- const responseObj = data.response as Record | undefined;
- if (responseObj && typeof responseObj.subagent_session_id === "string") {
- subagentSessionId = responseObj.subagent_session_id;
- }
- }
-
- toolResults.push({
- call_id: data.id,
- name: data.name,
- content: textContent,
- is_error: data.response?.isError || false,
- raw_result: data.response?.result ?? data.response,
- ...(subagentSessionId ? { subagent_session_id: subagentSessionId } : {}),
- });
- }
- }
- }
-
- // If we found tool results in data parts, return them
- if (toolResults.length > 0) {
- return toolResults;
- }
-
- // Try streaming format (metadata or text content)
- const textParts = message.parts?.filter(part => part.kind === "text") || [];
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const content = textParts.map(part => (part as any).text).join("");
-
- try {
- const metadata = message.metadata as ADKMetadata;
- const resultData = metadata?.toolResultData || JSON.parse(content || "[]");
- return Array.isArray(resultData) ? resultData : [];
- } catch {
- return [];
- }
-};
-
-
const ToolCallDisplay = ({ currentMessage, allMessages, onApprove, onReject, pendingDecisions, getMcpAppForTool, onMcpAppSendMessage }: ToolCallDisplayProps) => {
// Determine which tool call IDs this component instance "owns" by finding,
// for each ID introduced by currentMessage, whether currentMessage is the
diff --git a/ui/src/components/chat/ToolCallGroup.stories.tsx b/ui/src/components/chat/ToolCallGroup.stories.tsx
new file mode 100644
index 000000000..dcf4ecb4c
--- /dev/null
+++ b/ui/src/components/chat/ToolCallGroup.stories.tsx
@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type { Message } from "@a2a-js/sdk";
+import ToolCallGroup, { buildToolCallResultsIndex } from "./ToolCallGroup";
+import ToolCallDisplay from "./ToolCallDisplay";
+
+const meta = {
+ title: "Chat/ToolCallGroup",
+ component: ToolCallGroup,
+ parameters: {
+ layout: "fullscreen",
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const requestMessage = (id: string, name: string, args: Record): Message => ({
+ kind: "message",
+ messageId: `req-${id}`,
+ role: "agent",
+ parts: [
+ {
+ kind: "data",
+ data: { id, name, args },
+ metadata: { adk_type: "function_call" },
+ },
+ ],
+});
+
+const responseMessage = (id: string, name: string, result: string, isError = false): Message => ({
+ kind: "message",
+ messageId: `res-${id}`,
+ role: "agent",
+ parts: [
+ {
+ kind: "data",
+ data: { id, name, response: { result, isError } },
+ metadata: { adk_type: "function_response" },
+ },
+ ],
+});
+
+const buildTranscript = (calls: Array<{ id: string; name: string; args: Record; result?: string; isError?: boolean }>) => {
+ const messages: Message[] = [];
+ for (const c of calls) {
+ messages.push(requestMessage(c.id, c.name, c.args));
+ if (c.result !== undefined) {
+ messages.push(responseMessage(c.id, c.name, c.result, c.isError));
+ }
+ }
+ return messages;
+};
+
+const renderGroup = (messages: Message[]) => (
+
+ {messages.map((m, i) => (
+
+ ))}
+
+);
+
+const allPassing = buildTranscript([
+ { id: "c1", name: "k8s_get_resources", args: { kind: "Pod", namespace: "kagent" }, result: "3 pods running" },
+ { id: "c2", name: "k8s_get_events", args: { namespace: "kagent" }, result: "No warning events" },
+ { id: "c3", name: "k8s_describe_resource", args: { name: "kagent-controller" }, result: "Deployment healthy" },
+]);
+
+export const AllPassing: Story = {
+ args: { messages: allPassing, resultsByCallId: buildToolCallResultsIndex(allPassing), children: null },
+ render: (args) => renderGroup(args.messages),
+};
+
+const withFailures = buildTranscript([
+ { id: "c1", name: "k8s_get_resources", args: { kind: "Pod" }, result: "3 pods running" },
+ { id: "c2", name: "k8s_apply_manifest", args: { manifest: "..." }, result: "error: forbidden", isError: true },
+ { id: "c3", name: "k8s_get_events", args: {}, result: "ok" },
+ { id: "c4", name: "helm_list", args: {}, result: "connection refused", isError: true },
+]);
+
+export const WithFailures: Story = {
+ args: { messages: withFailures, resultsByCallId: buildToolCallResultsIndex(withFailures), children: null },
+ render: (args) => renderGroup(args.messages),
+};
+
+const inFlight = buildTranscript([
+ { id: "c1", name: "k8s_get_resources", args: { kind: "Pod" }, result: "3 pods running" },
+ { id: "c2", name: "k8s_get_events", args: {}, result: "ok" },
+ { id: "c3", name: "helm_list", args: {} }, // no result yet
+]);
+
+export const Running: Story = {
+ args: { messages: inFlight, resultsByCallId: buildToolCallResultsIndex(inFlight), children: null },
+ render: (args) => renderGroup(args.messages),
+};
+
+const single = buildTranscript([
+ { id: "c1", name: "k8s_get_resources", args: { kind: "Pod", namespace: "default" }, result: "12 pods" },
+]);
+
+export const SingleCall: Story = {
+ args: { messages: single, resultsByCallId: buildToolCallResultsIndex(single), children: null },
+ render: (args) => renderGroup(args.messages),
+};
+
+const many = buildTranscript(
+ Array.from({ length: 9 }, (_, i) => ({
+ id: `c${i}`,
+ name: ["k8s_get_resources", "k8s_get_events", "k8s_describe_resource", "helm_list", "helm_get_values", "k8s_get_logs"][i % 6],
+ args: { attempt: i },
+ result: i === 4 ? "error: timeout" : "ok",
+ isError: i === 4,
+ })),
+);
+
+export const ManyCalls: Story = {
+ args: { messages: many, resultsByCallId: buildToolCallResultsIndex(many), children: null },
+ render: (args) => renderGroup(args.messages),
+};
diff --git a/ui/src/components/chat/ToolCallGroup.tsx b/ui/src/components/chat/ToolCallGroup.tsx
new file mode 100644
index 000000000..80543fcfd
--- /dev/null
+++ b/ui/src/components/chat/ToolCallGroup.tsx
@@ -0,0 +1,342 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { Message } from "@a2a-js/sdk";
+import { ChevronRight, Wrench, Loader2, CheckCircle, XCircle } from "lucide-react";
+import { cn, convertToUserFriendlyName } from "@/lib/utils";
+import { extractToolCallRequests, extractToolCallResults } from "@/lib/toolCallExtraction";
+import { ADKMetadata, getMetadataValue } from "@/lib/messageHandlers";
+import { ToolDecision } from "@/types";
+
+/**
+ * A render item produced by {@link groupToolCallMessages}: either a single
+ * regular chat message or a run of consecutive tool-call messages that should
+ * be rendered inside one collapsible {@link ToolCallGroup}.
+ */
+export type ChatRenderItem =
+ | { kind: "single"; message: Message; startIndex: number }
+ | { kind: "group"; messages: Message[]; startIndex: number };
+
+/** Message types that always render standalone, even when tool-related. */
+const NEVER_GROUPED_TYPES = new Set(["AskUserRequest"]);
+
+/** Tool-related originalType values that carry no data parts (streaming format). */
+const STREAMING_TOOL_TYPES = new Set([
+ "ToolCallRequestEvent",
+ "ToolCallExecutionEvent",
+ "ToolCallSummaryMessage",
+]);
+
+export interface GroupingOptions {
+ /** Tools that always render standalone (e.g. MCP apps with interactive UI). */
+ isStandaloneToolName?: (toolName: string) => boolean;
+ /** Local (optimistic) approval decisions keyed by tool call id. */
+ pendingDecisions?: Record;
+ /**
+ * Call ids still awaiting a user decision, built from the FULL transcript
+ * with {@link collectPendingApprovalIds}. The approve/reject card renders
+ * under the first message that introduces a call id (which is usually the
+ * plain request message, not the ToolApprovalRequest itself), so every
+ * message referencing a pending id must stay outside the group.
+ */
+ pendingApprovalIds?: ReadonlySet;
+}
+
+/**
+ * True when every tool call in a ToolApprovalRequest message has been decided
+ * — either persisted in `metadata.approvalDecision` (uniform string or
+ * per-tool map) or recorded locally in `pendingDecisions`. Undecided
+ * approvals must stay visible outside any collapsed group.
+ */
+const isApprovalResolved = (message: Message, pendingDecisions?: Record): boolean => {
+ const requests = extractToolCallRequests(message);
+ if (requests.length === 0) return false;
+
+ const rawDecision = (message.metadata as ADKMetadata)?.approvalDecision;
+ return requests.every(request => {
+ if (!request.id) return false;
+ if (typeof rawDecision === "object" && rawDecision !== null) {
+ if ((rawDecision as Record)[request.id]) return true;
+ } else if (rawDecision) {
+ return true;
+ }
+ return !!pendingDecisions?.[request.id];
+ });
+};
+
+/**
+ * Collect the call ids of every unresolved ToolApprovalRequest in the
+ * transcript. Compute once over the full message list (memoized in the
+ * parent) and pass to {@link groupToolCallMessages} so that the request and
+ * result messages tied to a pending approval stay visible outside groups.
+ */
+export const collectPendingApprovalIds = (
+ messages: Message[],
+ pendingDecisions?: Record,
+): Set => {
+ const ids = new Set();
+ for (const message of messages) {
+ if ((message.metadata as ADKMetadata)?.originalType !== "ToolApprovalRequest") continue;
+ if (isApprovalResolved(message, pendingDecisions)) continue;
+ for (const request of extractToolCallRequests(message)) {
+ if (request.id) ids.add(request.id);
+ }
+ }
+ return ids;
+};
+
+/**
+ * How a message participates in tool-call grouping:
+ * - "group": folds into the current ToolCallGroup run.
+ * - "standalone": tool-related but must stay visible (MCP apps, ask-user,
+ * undecided approvals). Rendered outside the group WITHOUT
+ * breaking the run — models issue parallel tool batches where
+ * e.g. an MCP app call or an approval is interleaved with
+ * regular calls, and breaking the run would shatter one
+ * logical batch into several groups.
+ * - "other": regular chat content (text, user messages); closes the run.
+ */
+type ToolMessageKind = "group" | "standalone" | "other";
+
+const classifyToolMessage = (message: Message, options?: GroupingOptions): ToolMessageKind => {
+ if (message.role === "user") return "other";
+
+ const metadata = message.metadata as ADKMetadata;
+ const originalType = metadata?.originalType;
+ if (originalType && NEVER_GROUPED_TYPES.has(originalType)) return "standalone";
+
+ const isToolMessage =
+ (originalType !== undefined && STREAMING_TOOL_TYPES.has(originalType)) ||
+ originalType === "ToolApprovalRequest" ||
+ (message.parts?.some(part => {
+ if (part.kind === "data" && part.metadata) {
+ const partType = getMetadataValue(part.metadata as Record, "type");
+ return partType === "function_call" || partType === "function_response";
+ }
+ return false;
+ }) ?? false);
+ if (!isToolMessage) return "other";
+
+ if (originalType === "ToolApprovalRequest" && !isApprovalResolved(message, options?.pendingDecisions)) {
+ return "standalone";
+ }
+
+ const { isStandaloneToolName, pendingApprovalIds } = options ?? {};
+ if (isStandaloneToolName || pendingApprovalIds?.size) {
+ const requests = extractToolCallRequests(message);
+ const results = extractToolCallResults(message);
+
+ // MCP app calls render interactive UI — always standalone.
+ if (isStandaloneToolName) {
+ const hasStandaloneCall =
+ requests.some(request => isStandaloneToolName(request.name)) ||
+ results.some(result => result.name && isStandaloneToolName(result.name));
+ if (hasStandaloneCall) return "standalone";
+ }
+
+ // The approve/reject card renders under the first message introducing a
+ // call id — keep every message tied to a pending approval outside groups.
+ if (pendingApprovalIds?.size) {
+ const referencesPendingApproval =
+ requests.some(request => request.id && pendingApprovalIds.has(request.id)) ||
+ results.some(result => result.call_id && pendingApprovalIds.has(result.call_id));
+ if (referencesPendingApproval) return "standalone";
+ }
+ }
+
+ return "group";
+};
+
+/**
+ * True when a message renders as tool-call chrome (request/result/summary) and
+ * can be folded into a ToolCallGroup. Ask-user messages and *undecided*
+ * approval requests are excluded: they demand user attention and must never
+ * be hidden. Once the user responds, approval messages become groupable.
+ *
+ * `options.isStandaloneToolName` additionally excludes calls by tool name —
+ * e.g. MCP app tools that render interactive UI and must stay visible
+ * outside the group.
+ */
+export const isGroupableToolMessage = (message: Message, options?: GroupingOptions): boolean =>
+ classifyToolMessage(message, options) === "group";
+
+/**
+ * Partition a message list into render items, folding runs of tool-call
+ * messages into groups. Standalone tool messages (MCP apps, ask-user,
+ * undecided approvals) are emitted as singles but do NOT close the current
+ * run — a parallel tool batch with an interleaved MCP app or approval stays
+ * one group, with the standalone cards floating right after it. Regular chat
+ * content (text, user messages) closes the run.
+ */
+export const groupToolCallMessages = (messages: Message[], options?: GroupingOptions): ChatRenderItem[] => {
+ const items: ChatRenderItem[] = [];
+ let openGroup: { kind: "group"; messages: Message[]; startIndex: number } | null = null;
+
+ messages.forEach((message, index) => {
+ const kind = classifyToolMessage(message, options);
+ if (kind === "group") {
+ if (!openGroup) {
+ openGroup = { kind: "group", messages: [], startIndex: index };
+ items.push(openGroup);
+ }
+ openGroup.messages.push(message);
+ } else {
+ items.push({ kind: "single", message, startIndex: index });
+ if (kind === "other") openGroup = null;
+ }
+ });
+
+ return items;
+};
+
+interface ToolCallGroupSummary {
+ total: number;
+ passed: number;
+ failed: number;
+ running: number;
+ /** Deduped, user-friendly tool names in call order. */
+ names: string[];
+}
+
+/**
+ * Build a `call_id -> is_error` lookup for every tool result in the
+ * transcript. Compute this ONCE per transcript (memoized in the parent) and
+ * share it across all ToolCallGroups — results can arrive in messages outside
+ * a group's boundary, and per-group transcript scans would be
+ * O(#groups × #messages).
+ */
+export const buildToolCallResultsIndex = (messages: Message[]): Map => {
+ const index = new Map();
+ for (const message of messages) {
+ for (const result of extractToolCallResults(message)) {
+ if (result.call_id && !index.has(result.call_id)) {
+ index.set(result.call_id, !!result.is_error);
+ }
+ }
+ }
+ return index;
+};
+
+const summarize = (groupMessages: Message[], resultsByCallId: ReadonlyMap): ToolCallGroupSummary => {
+ // id -> tool name for every call requested inside this group
+ const requests = new Map();
+ for (const message of groupMessages) {
+ for (const request of extractToolCallRequests(message)) {
+ if (request.id) requests.set(request.id, request.name);
+ }
+ }
+
+ let passed = 0;
+ let failed = 0;
+ for (const id of requests.keys()) {
+ const isError = resultsByCallId.get(id);
+ if (isError === undefined) continue; // still running
+ if (isError) failed++;
+ else passed++;
+ }
+
+ return {
+ total: requests.size,
+ passed,
+ failed,
+ running: requests.size - passed - failed,
+ names: [...new Set([...requests.values()].map(convertToUserFriendlyName))],
+ };
+};
+
+interface ToolCallGroupProps {
+ /** The consecutive tool-call messages folded into this group. */
+ messages: Message[];
+ /**
+ * Shared `call_id -> is_error` lookup built from the full transcript with
+ * {@link buildToolCallResultsIndex} (results may live outside the group).
+ */
+ resultsByCallId: ReadonlyMap;
+ /** The already-rendered tool call displays for the grouped messages. */
+ children: React.ReactNode;
+}
+
+const MAX_PREVIEW_NAMES = 3;
+
+/**
+ * Collapsible wrapper around a run of tool calls in the chat transcript.
+ * Collapsed (the default) it renders a single slim summary row — total calls,
+ * pass/fail counts, and a live progress indicator while calls are in flight —
+ * so long tool-heavy turns stop drowning out the conversation.
+ */
+const ToolCallGroup = ({ messages, resultsByCallId, children }: ToolCallGroupProps) => {
+ const [open, setOpen] = useState(false);
+ const summary = useMemo(() => summarize(messages, resultsByCallId), [messages, resultsByCallId]);
+
+ // Nothing visible inside (e.g. only internal/filtered calls) — no chrome.
+ if (summary.total === 0) return <>{children};
+
+ const { total, passed, failed, running } = summary;
+ const isRunning = running > 0;
+ const previewNames = summary.names.slice(0, MAX_PREVIEW_NAMES).join(", ");
+ const hiddenNames = summary.names.length - MAX_PREVIEW_NAMES;
+
+ return (
+
+
+
+
+
tool call details
+ ,
+ );
+
+ it("shows total and pass/fail counts collapsed by default", () => {
+ renderGroup();
+ const toggle = screen.getByRole("button", { expanded: false });
+ expect(toggle).toHaveTextContent("3 tool calls");
+ expect(toggle).toHaveTextContent("2");
+ expect(toggle).toHaveTextContent("1");
+ expect(screen.getByText("succeeded")).toBeInTheDocument();
+ expect(screen.getByText("failed")).toBeInTheDocument();
+ });
+
+ it("expands and collapses on toggle", () => {
+ renderGroup();
+ const toggle = screen.getByRole("button");
+ fireEvent.click(toggle);
+ expect(toggle).toHaveAttribute("aria-expanded", "true");
+ fireEvent.click(toggle);
+ expect(toggle).toHaveAttribute("aria-expanded", "false");
+ });
+
+ it("shows running progress while calls are in flight", () => {
+ const inFlight = [requestMessage("c1", "tool_a"), responseMessage("c1", "tool_a"), requestMessage("c2", "tool_b")];
+ render(
+
+
+ ,
+ );
+ expect(screen.getByRole("button")).toHaveTextContent("Running tools 1/2");
+ });
+
+ it("renders children without chrome when there are no visible calls", () => {
+ render(
+
+
+ ,
+ );
+ expect(screen.queryByRole("button")).not.toBeInTheDocument();
+ expect(screen.getByTestId("bare-child")).toBeInTheDocument();
+ });
+});
diff --git a/ui/src/lib/__tests__/toolCallExtraction.test.ts b/ui/src/lib/__tests__/toolCallExtraction.test.ts
new file mode 100644
index 000000000..c01dbad23
--- /dev/null
+++ b/ui/src/lib/__tests__/toolCallExtraction.test.ts
@@ -0,0 +1,142 @@
+import type { Message } from "@a2a-js/sdk";
+import {
+ isToolCallRequestMessage,
+ isToolCallExecutionMessage,
+ isToolCallSummaryMessage,
+ extractToolCallRequests,
+ extractToolCallResults,
+} from "@/lib/toolCallExtraction";
+
+const message = (overrides: Partial): Message => ({
+ kind: "message",
+ messageId: "m1",
+ role: "agent",
+ parts: [],
+ ...overrides,
+});
+
+const requestPart = (id: string, name: string, prefix: "adk" | "kagent" = "adk") => ({
+ kind: "data" as const,
+ data: { id, name, args: { foo: "bar" } },
+ metadata: { [`${prefix}_type`]: "function_call" },
+});
+
+const responsePart = (id: string, name: string, response: Record, prefix: "adk" | "kagent" = "adk") => ({
+ kind: "data" as const,
+ data: { id, name, response },
+ metadata: { [`${prefix}_type`]: "function_response" },
+});
+
+describe("message type predicates", () => {
+ it("detects request/execution messages from data parts", () => {
+ expect(isToolCallRequestMessage(message({ parts: [requestPart("c1", "t")] }))).toBe(true);
+ expect(isToolCallExecutionMessage(message({ parts: [responsePart("c1", "t", { result: "ok" })] }))).toBe(true);
+ });
+
+ it("supports the kagent_ metadata prefix", () => {
+ expect(isToolCallRequestMessage(message({ parts: [requestPart("c1", "t", "kagent")] }))).toBe(true);
+ expect(isToolCallExecutionMessage(message({ parts: [responsePart("c1", "t", { result: "ok" }, "kagent")] }))).toBe(true);
+ });
+
+ it("falls back to originalType for streaming messages", () => {
+ expect(isToolCallRequestMessage(message({ metadata: { originalType: "ToolCallRequestEvent" } }))).toBe(true);
+ expect(isToolCallRequestMessage(message({ metadata: { originalType: "ToolApprovalRequest" } }))).toBe(true);
+ expect(isToolCallExecutionMessage(message({ metadata: { originalType: "ToolCallExecutionEvent" } }))).toBe(true);
+ expect(isToolCallSummaryMessage(message({ metadata: { originalType: "ToolCallSummaryMessage" } }))).toBe(true);
+ });
+
+ it("rejects plain text messages", () => {
+ const text = message({ parts: [{ kind: "text", text: "hello" }] });
+ expect(isToolCallRequestMessage(text)).toBe(false);
+ expect(isToolCallExecutionMessage(text)).toBe(false);
+ expect(isToolCallSummaryMessage(text)).toBe(false);
+ });
+});
+
+describe("extractToolCallRequests", () => {
+ it("extracts calls from data parts", () => {
+ const msg = message({ parts: [requestPart("c1", "tool_a"), requestPart("c2", "tool_b")] });
+ expect(extractToolCallRequests(msg)).toEqual([
+ { id: "c1", name: "tool_a", args: { foo: "bar" } },
+ { id: "c2", name: "tool_b", args: { foo: "bar" } },
+ ]);
+ });
+
+ it("filters ADK-internal calls and ask_user", () => {
+ const msg = message({
+ parts: [
+ requestPart("c1", "adk_request_confirmation"),
+ requestPart("c2", "adk_request_credential"),
+ requestPart("c3", "ask_user"),
+ requestPart("c4", "real_tool"),
+ ],
+ });
+ expect(extractToolCallRequests(msg).map(c => c.name)).toEqual(["real_tool"]);
+ });
+
+ it("falls back to metadata.toolCallData for streaming messages", () => {
+ const msg = message({
+ metadata: {
+ originalType: "ToolCallRequestEvent",
+ toolCallData: [
+ { id: "c1", name: "tool_a", args: {} },
+ { id: "c2", name: "ask_user", args: {} },
+ ],
+ },
+ });
+ expect(extractToolCallRequests(msg).map(c => c.name)).toEqual(["tool_a"]);
+ });
+
+ it("returns [] for non-request messages and malformed JSON content", () => {
+ expect(extractToolCallRequests(message({ parts: [{ kind: "text", text: "hi" }] }))).toEqual([]);
+ expect(
+ extractToolCallRequests(
+ message({
+ metadata: { originalType: "ToolCallRequestEvent" },
+ parts: [{ kind: "text", text: "not json" }],
+ }),
+ ),
+ ).toEqual([]);
+ });
+});
+
+describe("extractToolCallResults", () => {
+ it("extracts results with error flags", () => {
+ const msg = message({
+ parts: [
+ responsePart("c1", "tool_a", { result: "ok", isError: false }),
+ responsePart("c2", "tool_b", { result: "boom", isError: true }),
+ ],
+ });
+ const results = extractToolCallResults(msg);
+ expect(results).toHaveLength(2);
+ expect(results[0]).toMatchObject({ call_id: "c1", name: "tool_a", is_error: false, raw_result: "ok" });
+ expect(results[1]).toMatchObject({ call_id: "c2", name: "tool_b", is_error: true, raw_result: "boom" });
+ });
+
+ it("extracts subagent_session_id for agent tool responses", () => {
+ const msg = message({
+ parts: [
+ responsePart("c1", "ns__NS__helper", { result: "done", subagent_session_id: "sess-42" }),
+ ],
+ });
+ expect(extractToolCallResults(msg)[0]).toMatchObject({
+ call_id: "c1",
+ subagent_session_id: "sess-42",
+ });
+ });
+
+ it("falls back to metadata.toolResultData for streaming messages", () => {
+ const msg = message({
+ metadata: {
+ originalType: "ToolCallExecutionEvent",
+ toolResultData: [{ call_id: "c1", name: "tool_a", content: "ok", is_error: false }],
+ },
+ });
+ expect(extractToolCallResults(msg)).toEqual([{ call_id: "c1", name: "tool_a", content: "ok", is_error: false }]);
+ });
+
+ it("returns [] for non-execution messages", () => {
+ expect(extractToolCallResults(message({ parts: [requestPart("c1", "t")] }))).toEqual([]);
+ });
+});
diff --git a/ui/src/lib/messageHandlers.ts b/ui/src/lib/messageHandlers.ts
index dc6a1c7ee..e8006c27e 100644
--- a/ui/src/lib/messageHandlers.ts
+++ b/ui/src/lib/messageHandlers.ts
@@ -115,6 +115,14 @@ export function extractMessagesFromTasks(tasks: Task[]): Message[] {
} else if (partType === "function_response") {
const toolData = dp.data as unknown as ToolResponseData;
+ // Skip internal HITL markers (parity with the streaming path): the
+ // before_tool_callback confirmation stub and the ask_user pending
+ // stub — the real result arrives in a later function_response.
+ const respStatus = (toolData.response as Record | undefined)?.status as string | undefined;
+ if (respStatus === "confirmation_requested" || respStatus === "pending") {
+ hasConvertedParts = true;
+ continue;
+ }
let frSubagentSessionId: string | undefined;
if (isAgentToolName(toolData.name)) {
const responseObj = toolData.response as Record | undefined;
diff --git a/ui/src/lib/toolCallExtraction.ts b/ui/src/lib/toolCallExtraction.ts
new file mode 100644
index 000000000..4ac9c0257
--- /dev/null
+++ b/ui/src/lib/toolCallExtraction.ts
@@ -0,0 +1,153 @@
+import { Message, TextPart } from "@a2a-js/sdk";
+import { ADKMetadata, ProcessedToolResultData, ToolResponseData, normalizeToolResultToText, getMetadataValue } from "@/lib/messageHandlers";
+import { FunctionCall } from "@/types";
+import { isAgentToolName } from "@/lib/utils";
+
+// Helper functions to work with A2A SDK Messages carrying tool call data.
+// Extracted from ToolCallDisplay so non-component code (e.g. ToolCallGroup
+// summaries) can reuse them without pulling in component dependencies.
+
+export const isToolCallRequestMessage = (message: Message): boolean => {
+ // Check data parts for type metadata first
+ const hasDataParts = message.parts?.some(part => {
+ if (part.kind === "data" && part.metadata) {
+ return getMetadataValue(part.metadata as Record, "type") === "function_call";
+ }
+ return false;
+ }) || false;
+
+ // Fallback to streaming format check
+ if (!hasDataParts) {
+ const metadata = message.metadata as ADKMetadata;
+ return metadata?.originalType === "ToolCallRequestEvent" || metadata?.originalType === "ToolApprovalRequest";
+ }
+
+ return hasDataParts;
+};
+
+export const isToolCallExecutionMessage = (message: Message): boolean => {
+ const hasDataParts = message.parts?.some(part => {
+ if (part.kind === "data" && part.metadata) {
+ return getMetadataValue(part.metadata as Record, "type") === "function_response";
+ }
+ return false;
+ }) || false;
+
+ // Fallback to streaming format check
+ if (!hasDataParts) {
+ const metadata = message.metadata as ADKMetadata;
+ return metadata?.originalType === "ToolCallExecutionEvent";
+ }
+
+ return hasDataParts;
+};
+
+export const isToolCallSummaryMessage = (message: Message): boolean => {
+ const metadata = message.metadata as ADKMetadata;
+ return metadata?.originalType === "ToolCallSummaryMessage";
+};
+
+export const extractToolCallRequests = (message: Message): FunctionCall[] => {
+ if (!isToolCallRequestMessage(message)) return [];
+
+ // Check for stored task format first (data parts)
+ const dataParts = message.parts?.filter(part => part.kind === "data") || [];
+ const functionCalls: FunctionCall[] = [];
+
+ for (const part of dataParts) {
+ if (part.metadata) {
+ if (getMetadataValue(part.metadata as Record, "type") === "function_call") {
+ const data = part.data as unknown as FunctionCall;
+ // Skip ADK internal function calls (confirmation/auth) and ask_user (has its own display)
+ if (
+ data.name === "adk_request_confirmation" ||
+ data.name === "adk_request_credential" ||
+ data.name === "ask_user"
+ ) {
+ continue;
+ }
+ functionCalls.push({
+ id: data.id,
+ name: data.name,
+ args: data.args ?? {},
+ });
+ }
+ }
+ }
+
+ // If we found function calls in data parts, return them
+ if (functionCalls.length > 0) {
+ return functionCalls;
+ }
+
+ // Try streaming format (metadata or text content)
+ const textParts = message.parts?.filter(part => part.kind === "text") || [];
+ const content = textParts.map(part => (part as TextPart).text).join("");
+
+ try {
+ // Tool call data might be stored as JSON in content or metadata
+ const metadata = message.metadata as ADKMetadata;
+ const toolCallData = metadata?.toolCallData || JSON.parse(content || "[]");
+ return Array.isArray(toolCallData)
+ ? toolCallData.filter(tc =>
+ tc.name !== "adk_request_confirmation" &&
+ tc.name !== "adk_request_credential" &&
+ tc.name !== "ask_user"
+ )
+ : [];
+ } catch {
+ return [];
+ }
+};
+
+export const extractToolCallResults = (message: Message): ProcessedToolResultData[] => {
+ if (!isToolCallExecutionMessage(message)) return [];
+
+ // Check for stored task format first (data parts)
+ const dataParts = message.parts?.filter(part => part.kind === "data") || [];
+ const toolResults: ProcessedToolResultData[] = [];
+
+ for (const part of dataParts) {
+ if (part.metadata) {
+ if (getMetadataValue(part.metadata as Record, "type") === "function_response") {
+ const data = part.data as unknown as ToolResponseData;
+
+ // For agent tool responses we receive { result, subagent_session_id } as FunctionResponse.response.
+ const textContent = normalizeToolResultToText(data);
+ let subagentSessionId: string | undefined;
+ if (isAgentToolName(data.name)) {
+ const responseObj = data.response as Record | undefined;
+ if (responseObj && typeof responseObj.subagent_session_id === "string") {
+ subagentSessionId = responseObj.subagent_session_id;
+ }
+ }
+
+ toolResults.push({
+ call_id: data.id,
+ name: data.name,
+ content: textContent,
+ is_error: data.response?.isError || false,
+ raw_result: data.response?.result ?? data.response,
+ ...(subagentSessionId ? { subagent_session_id: subagentSessionId } : {}),
+ });
+ }
+ }
+ }
+
+ // If we found tool results in data parts, return them
+ if (toolResults.length > 0) {
+ return toolResults;
+ }
+
+ // Try streaming format (metadata or text content)
+ const textParts = message.parts?.filter(part => part.kind === "text") || [];
+ const content = textParts.map(part => (part as TextPart).text).join("");
+
+ try {
+ const metadata = message.metadata as ADKMetadata;
+ const resultData = metadata?.toolResultData || JSON.parse(content || "[]");
+ return Array.isArray(resultData) ? resultData : [];
+ } catch {
+ return [];
+ }
+};