Merge pull request #121 from huggingface/claude/add-tool-calls-column-011yx7PA7ZPJGonQPpECoxpG

Add Tool Calls column to Metrics page

Author: evalstate

packages/app/src/shared/transport-metrics.ts

@@ -75,6 +75,7 @@ export interface ClientMetrics {
 	isConnected: boolean;
 	activeConnections: number;
 	totalConnections: number;
+	toolCallCount: number;
 }
 
 /**
@@ -224,6 +225,7 @@ export interface TransportMetricsResponse {
 		isConnected: boolean;
 		activeConnections: number;
 		totalConnections: number;
+		toolCallCount: number;
 	}>;
 
 	sessions: SessionData[];
@@ -525,6 +527,7 @@ export class MetricsCounter {
 				isConnected: true,
 				activeConnections: 1,
 				totalConnections: 1,
+				toolCallCount: 0,
 			};
 			this.metrics.clients.set(clientKey, clientMetrics);
 		} else {
@@ -608,6 +611,15 @@ export class MetricsCounter {
 			}
 
 			clientMethodMetrics.count++;
+
+			// If this is a tool call, increment the client's tool call count
+			if (method.startsWith('tools/call:')) {
+				const clientKey = getClientKey(clientInfo.name, clientInfo.version);
+				const clientMetrics = this.metrics.clients.get(clientKey);
+				if (clientMetrics) {
+					clientMetrics.toolCallCount++;
+				}
+			}
 		}
 
 		if (isError) {

packages/app/src/web/components/StatelessTransportMetrics.tsx

@@ -17,6 +17,7 @@ type ClientData = {
 	isConnected: boolean;
 	lastSeen: string;
 	firstSeen: string;
+	toolCallCount: number;
 };
 
 /**
@@ -102,6 +103,11 @@ export function StatelessTransportMetrics({ metrics }: StatelessTransportMetrics
 			header: createSortableHeader('Initializations', 'right'),
 			cell: ({ row }) => <div className="text-right font-mono text-sm">{row.getValue<number>('requestCount')}</div>,
 		},
+		{
+			accessorKey: 'toolCallCount',
+			header: createSortableHeader('Tool Calls', 'right'),
+			cell: ({ row }) => <div className="text-right font-mono text-sm">{row.getValue<number>('toolCallCount')}</div>,
+		},
 		{
 			accessorKey: 'isConnected',
 			header: createSortableHeader('Status'),