add badges

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 }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="flex-shrink-0 text-gray-400">
+    <path d="M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3z" />
+  </svg>
+);
+
+export const WrenchIcon = ({ size = 10 }: { size?: number }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="flex-shrink-0">
+    <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+  </svg>
+);
+
+export const LlmBadge = ({ count }: { count?: number }) => (
+  <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-blue-50 text-blue-700 border border-blue-200 rounded-full text-[11px] font-medium whitespace-nowrap">
+    <SparkleIcon />
+    {count != null ? count : "LLM"}
+  </span>
+);
+
+export const McpBadge = ({ count }: { count?: number }) => (
+  <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-amber-50 text-amber-700 border border-amber-200 rounded-full text-[11px] font-medium whitespace-nowrap">
+    <WrenchIcon />
+    {count != null ? count : "MCP"}
+  </span>
+);

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<LogEntry>[] = [
     accessorKey: "startTime",
     cell: (info: any) => <TimeCell utcTime={info.getValue()} />,
   },
+  {
+    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 <McpBadge />;
+      if (sessionCount <= 1) return <LlmBadge />;
+
+      // Multi-call session — show total count, plus MCP indicator when mixed.
+      const sessionTypeBadge = (
+        <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-blue-50 text-blue-700 border border-blue-200 rounded-full text-[11px] font-medium whitespace-nowrap">
+          <SparkleIcon />
+          <span>{sessionCount}</span>
+          {sessionMcpCount > 0 && (
+            <>
+              <span className="text-blue-300">·</span>
+              <WrenchIcon />
+            </>
+          )}
+        </span>
+      );
+
+      return (
+        <Tooltip title={`${sessionLlmCount} LLM • ${sessionMcpCount} MCP`}>
+          {sessionTypeBadge}
+        </Tooltip>
+      );
+    },
+  },
   {
     header: "Status",
     accessorKey: "metadata.status",
@@ -105,11 +147,24 @@ export const columns: ColumnDef<LogEntry>[] = [
   {
     header: "Cost",
     accessorKey: "spend",
-    cell: (info: any) => (
-      <Tooltip title={`$${String(info.getValue() || 0)} `}>
-        <span>{getSpendString(info.getValue() || 0)}</span>
-      </Tooltip>
-    ),
+    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 (
+        <div className="flex flex-col">
+          <Tooltip title={`$${String(info.getValue() || 0)}`}>
+            <span>{getSpendString(info.getValue() || 0)}</span>
+          </Tooltip>
+          {mcpCount > 0 && mcpSpend > 0 && (
+            <span className="text-[10px] text-amber-600">
+              incl. {getSpendString(mcpSpend)} from {mcpCount} MCP
+            </span>
+          )}
+        </div>
+      );
+    },
   },
   {
     header: "Duration (s)",

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" },