+ {/* A2A Metadata Header */}
+
+
+ A2A Metadata
+
+
+ {/* Main metrics row */}
+
+ {/* Status badge */}
+ {status?.state && (
+
+ {getStatusIcon(status.state)}
+ {status.state}
+
+ )}
+
+ {/* Timestamp */}
+ {formattedTime && (
+
+
+
+ {formattedTime}
+
+
+ )}
+
+ {/* Latency */}
+ {totalLatency !== undefined && (
+
+
+
+ {(totalLatency / 1000).toFixed(2)}s
+
+
+ )}
+
+ {/* Time to first token */}
+ {timeToFirstToken !== undefined && (
+
+
+ TTFT: {(timeToFirstToken / 1000).toFixed(2)}s
+
+
+ )}
+
+
+ {/* IDs row */}
+
+ {/* Task ID */}
+ {taskId && (
+
+ copyToClipboard(taskId)}
+ >
+
+ Task: {truncateId(taskId)}
+
+
+
+ )}
+
+ {/* Context/Session ID */}
+ {contextId && (
+
+ copyToClipboard(contextId)}
+ >
+
+ Session: {truncateId(contextId)}
+
+
+
+ )}
+
+ {/* Details toggle */}
+ {(metadata || status?.message) && (
+
+ )}
+
+
+ {/* Expandable details panel */}
+ {showDetails && (
+
+ {/* Status message */}
+ {status?.message && (
+
+ Status Message:
+ {status.message}
+
+ )}
+
+ {/* Full IDs */}
+ {taskId && (
+
+ Task ID:
+ {taskId}
+ copyToClipboard(taskId)}
+ />
+
+ )}
+
+ {contextId && (
+
+ Session ID:
+ {contextId}
+ copyToClipboard(contextId)}
+ />
+
+ )}
+
+ {/* Metadata fields */}
+ {metadata && Object.keys(metadata).length > 0 && (
+
+
Custom Metadata:
+
+ {JSON.stringify(metadata, null, 2)}
+
+
+ )}
+
+ )}
+
+ );
+};
+
+export default A2AMetrics;
diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx
index c2924c048c..18b5bb82dd 100644
--- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx
+++ b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx
@@ -51,6 +51,10 @@ import { fetchAvailableModels, ModelGroup } from "../llm_calls/fetch_models";
import { makeOpenAIImageEditsRequest } from "../llm_calls/image_edits";
import { makeOpenAIImageGenerationRequest } from "../llm_calls/image_generation";
import { makeOpenAIResponsesRequest } from "../llm_calls/responses_api";
+import { Agent, fetchAvailableAgents } from "../llm_calls/fetch_agents";
+import { makeA2AStreamMessageRequest } from "../llm_calls/a2a_send_message";
+import A2AMetrics from "./A2AMetrics";
+import { A2ATaskMetadata } from "./types";
import MCPEventsDisplay, { MCPEvent } from "./MCPEventsDisplay";
import { EndpointType, getEndpointType } from "./mode_endpoint_mapping";
import ReasoningContent from "./ReasoningContent";
@@ -124,6 +128,8 @@ const ChatUI: React.FC