refactor: update agent table to follow similar format as other entities - also add a spend column - allows us to see spend of an agent

litellm-proxy-extras/litellm_proxy_extras/migrations/20260304182704_baseline_diff/migration.sql

@@ -0,0 +1,2 @@
+-- This is an empty migration.
+

litellm/types/agents.py

@@ -197,6 +197,7 @@ class AgentResponse(BaseModel):
     litellm_params: Optional[Dict[str, Any]] = None
     agent_card_params: Dict[str, Any]
     object_permission: Optional[Dict[str, Any]] = None
+    spend: Optional[float] = None
     created_at: Optional[datetime] = None
     updated_at: Optional[datetime] = None
     created_by: Optional[str] = None

ui/litellm-dashboard/src/components/agents.tsx

@@ -1,13 +1,25 @@
 import React, { useState, useEffect } from "react";
-import { Button } from "@tremor/react";
-import { Modal, Alert } from "antd";
+import {
+  Button,
+  Card,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  Badge,
+  Text,
+} from "@tremor/react";
+import { Modal, Alert, Tooltip, Skeleton } from "antd";
 import { getAgentsList, deleteAgentCall, keyListCall } from "./networking";
 import AddAgentForm from "./agents/add_agent_form";
-import AgentCardGrid from "./agents/agent_card_grid";
 import { isAdminRole } from "@/utils/roles";
 import AgentInfoView from "./agents/agent_info";
 import NotificationsManager from "./molecules/notifications_manager";
 import { Agent, AgentKeyInfo } from "./agents/types";
+import { formatNumberWithCommas } from "@/utils/dataUtils";
+import TableIconActionButton from "./common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
 
 interface AgentsPanelProps {
   accessToken: string | null;
@@ -129,6 +141,14 @@ const AgentsPanel: React.FC<AgentsPanelProps> = ({ accessToken, userRole }) => {
     setAgentToDelete(null);
   };
 
+  const sortedAgents = [...agentsList].sort((a, b) => {
+    const dateA = a.created_at ? new Date(a.created_at).getTime() : 0;
+    const dateB = b.created_at ? new Date(b.created_at).getTime() : 0;
+    return dateB - dateA;
+  });
+
+  const columnCount = isAdmin ? 7 : 6;
+
   return (
     <div className="w-full mx-auto flex-auto overflow-y-auto m-8 p-2">
       <div className="flex flex-col gap-2 mb-4">
@@ -158,16 +178,84 @@ const AgentsPanel: React.FC<AgentsPanelProps> = ({ accessToken, userRole }) => {
           isAdmin={isAdmin}
         />
       ) : (
-        <AgentCardGrid
-          agentsList={agentsList}
-          keyInfoMap={keyInfoMap}
-          isLoading={isLoading}
-          onDeleteClick={handleDeleteClick}
-          accessToken={accessToken}
-          onAgentUpdated={fetchAgents}
-          isAdmin={isAdmin}
-          onAgentClick={(id) => setSelectedAgentId(id)}
-        />
+        <Card>
+          {isLoading ? (
+            <Skeleton active paragraph={{ rows: 3 }} />
+          ) : (
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableHeaderCell>Agent Name</TableHeaderCell>
+                  <TableHeaderCell>Agent ID</TableHeaderCell>
+                  <TableHeaderCell>Spend (USD)</TableHeaderCell>
+                  <TableHeaderCell>Model</TableHeaderCell>
+                  <TableHeaderCell>Created</TableHeaderCell>
+                  <TableHeaderCell>Status</TableHeaderCell>
+                  {isAdmin && <TableHeaderCell>Actions</TableHeaderCell>}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {sortedAgents.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={columnCount}>
+                      <Text className="text-center">No agents found. Click &quot;+ Add New Agent&quot; to create one.</Text>
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  sortedAgents.map((agent) => (
+                    <TableRow key={agent.agent_id}>
+                      <TableCell>
+                        <Text>{agent.agent_name}</Text>
+                      </TableCell>
+                      <TableCell>
+                        <Tooltip title={agent.agent_id}>
+                          <Button
+                            size="xs"
+                            variant="light"
+                            className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 text-xs font-normal px-2 py-0.5 text-left overflow-hidden truncate max-w-[200px]"
+                            onClick={() => setSelectedAgentId(agent.agent_id)}
+                          >
+                            {agent.agent_id.slice(0, 7)}...
+                          </Button>
+                        </Tooltip>
+                      </TableCell>
+                      <TableCell>
+                        <Text>{formatNumberWithCommas(agent.spend, 4)}</Text>
+                      </TableCell>
+                      <TableCell>
+                        <Badge size="xs" color="blue">
+                          {agent.litellm_params?.model || "N/A"}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Text>
+                          {agent.created_at
+                            ? new Date(agent.created_at).toLocaleDateString()
+                            : "N/A"}
+                        </Text>
+                      </TableCell>
+                      <TableCell>
+                        {keyInfoMap[agent.agent_id]?.has_key ? (
+                          <Badge color="green">Active</Badge>
+                        ) : (
+                          <Badge color="yellow">Needs Setup</Badge>
+                        )}
+                      </TableCell>
+                      {isAdmin && (
+                        <TableCell>
+                          <TableIconActionButton
+                            variant="Delete"
+                            onClick={() => handleDeleteClick(agent.agent_id, agent.agent_name)}
+                          />
+                        </TableCell>
+                      )}
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          )}
+        </Card>
       )}
 
       <AddAgentForm
@@ -196,4 +284,3 @@ const AgentsPanel: React.FC<AgentsPanelProps> = ({ accessToken, userRole }) => {
 };
 
 export default AgentsPanel;
-

ui/litellm-dashboard/src/components/agents/types.ts

@@ -23,6 +23,7 @@ export interface Agent {
     [key: string]: any;
   };
   object_permission?: AgentObjectPermission;
+  spend?: number;
   created_at?: string;
   updated_at?: string;
   created_by?: string;