diff --git a/ui/litellm-dashboard/src/components/view_logs/TypeBadges.tsx b/ui/litellm-dashboard/src/components/view_logs/TypeBadges.tsx new file mode 100644 index 00000000000..e4195ece9ec --- /dev/null +++ b/ui/litellm-dashboard/src/components/view_logs/TypeBadges.tsx @@ -0,0 +1,30 @@ +/** + * Compact type-indicator badges for LLM and MCP log entries. + * Used in the request logs table and session type column. + */ + +export const SparkleIcon = ({ size = 12 }: { size?: number }) => ( + + + +); + +export const WrenchIcon = ({ size = 10 }: { size?: number }) => ( + + + +); + +export const LlmBadge = ({ count }: { count?: number }) => ( + + + {count != null ? count : "LLM"} + +); + +export const McpBadge = ({ count }: { count?: number }) => ( + + + {count != null ? count : "MCP"} + +); diff --git a/ui/litellm-dashboard/src/components/view_logs/columns.tsx b/ui/litellm-dashboard/src/components/view_logs/columns.tsx index 3e72c8e13b8..452d31aed51 100644 --- a/ui/litellm-dashboard/src/components/view_logs/columns.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/columns.tsx @@ -5,6 +5,8 @@ import { Tooltip } from "antd"; import React, { useState } from "react"; import { getProviderLogoAndName } from "../provider_info_helpers"; import { TimeCell } from "./time_cell"; +import { MCP_CALL_TYPES } from "./constants"; +import { LlmBadge, McpBadge, SparkleIcon, WrenchIcon } from "./TypeBadges"; // Helper to get the appropriate logo URL const getLogoUrl = (row: LogEntry, provider: string) => { @@ -44,6 +46,12 @@ export type LogEntry = { session_id?: string; status?: string; duration?: number; + session_total_count?: number; + session_total_spend?: number; + mcp_tool_call_count?: number; + mcp_tool_call_spend?: number; + session_llm_count?: number; + session_mcp_count?: number; onKeyHashClick?: (keyHash: string) => void; onSessionClick?: (sessionId: string) => void; }; @@ -54,6 +62,40 @@ export const columns: ColumnDef[] = [ accessorKey: "startTime", cell: (info: any) => , }, + { + header: "Type", + id: "type", + cell: (info: any) => { + const row = info.row.original; + const sessionCount = row.session_total_count || 1; + const isMcp = MCP_CALL_TYPES.includes(row.call_type); + const sessionLlmCount = row.session_llm_count ?? (isMcp ? 0 : sessionCount); + const sessionMcpCount = row.session_mcp_count ?? (isMcp ? sessionCount : 0); + + if (isMcp) return ; + if (sessionCount <= 1) return ; + + // Multi-call session — show total count, plus MCP indicator when mixed. + const sessionTypeBadge = ( + + + {sessionCount} + {sessionMcpCount > 0 && ( + <> + · + + + )} + + ); + + return ( + + {sessionTypeBadge} + + ); + }, + }, { header: "Status", accessorKey: "metadata.status", @@ -105,11 +147,24 @@ export const columns: ColumnDef[] = [ { header: "Cost", accessorKey: "spend", - cell: (info: any) => ( - - {getSpendString(info.getValue() || 0)} - - ), + cell: (info: any) => { + const row = info.row.original; + const mcpCount = row.mcp_tool_call_count || 0; + const mcpSpend = row.mcp_tool_call_spend || 0; + + return ( +
+ + {getSpendString(info.getValue() || 0)} + + {mcpCount > 0 && mcpSpend > 0 && ( + + incl. {getSpendString(mcpSpend)} from {mcpCount} MCP + + )} +
+ ); + }, }, { header: "Duration (s)", diff --git a/ui/litellm-dashboard/src/components/view_logs/constants.ts b/ui/litellm-dashboard/src/components/view_logs/constants.ts index 84862fa4632..949dab275fe 100644 --- a/ui/litellm-dashboard/src/components/view_logs/constants.ts +++ b/ui/litellm-dashboard/src/components/view_logs/constants.ts @@ -12,6 +12,9 @@ export const ERROR_CODE_OPTIONS: { label: string; value: string }[] = [ { label: "529 - Overloaded", value: "529" }, ]; +/** Call types that represent MCP tool invocations (shared across columns, index, drawer). */ +export const MCP_CALL_TYPES = ["call_mcp_tool", "list_mcp_tools"]; + export const QUICK_SELECT_OPTIONS: { label: string; value: number; unit: string }[] = [ { label: "Last 15 Minutes", value: 15, unit: "minutes" }, { label: "Last Hour", value: 1, unit: "hours" },