From 8890b9e4066e48a21813df7eae3df2f84854dc98 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Fri, 30 Jan 2026 16:30:57 -0800
Subject: [PATCH] add preview for tool sections

---
 .../LogDetailsDrawer/LogDetailsDrawer.tsx     |  3 +
 .../view_logs/ToolsSection/ToolsSection.tsx   | 56 +++++++++++++------
 2 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
index b3e59cf507f..cb7f2e2558e 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
@@ -192,6 +192,9 @@ export function LogDetailsDrawer({
         {/* Cost Breakdown - Show if cost breakdown data is available */}
         <CostBreakdownViewer costBreakdown={metadata?.cost_breakdown} totalSpend={logEntry.spend || 0} />
 
+        {/* Tools Section - Show if tools are present in request */}
+        <ToolsSection log={logEntry} />
+
         {/* Configuration Info Message - Show when data is missing */}
         {missingData && (
           <div className="mb-6">
diff --git a/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolsSection.tsx b/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolsSection.tsx
index fdeec2b249d..60bcce214af 100644
--- a/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolsSection.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolsSection.tsx
@@ -3,7 +3,7 @@
  * and indicates which ones were actually called in the response
  */
 
-import { Typography } from "antd";
+import { Collapse, Typography } from "antd";
 import { LogEntry } from "../columns";
 import { parseToolsFromLog } from "./utils";
 import { ToolItem } from "./ToolItem";
@@ -20,23 +20,45 @@ export function ToolsSection({ log }: ToolsSectionProps) {
   // Don't render if no tools
   if (tools.length === 0) return null;
 
+  // Calculate summary stats
+  const totalTools = tools.length;
+  const calledTools = tools.filter((t) => t.called).length;
+  
+  // Get preview of first 2 tool names
+  const toolNamePreview = tools
+    .slice(0, 2)
+    .map((t) => t.name)
+    .join(", ");
+  const hasMoreTools = tools.length > 2;
+
   return (
-    <div className="bg-white rounded-lg shadow w-full max-w-full overflow-hidden p-4 mb-6">
-      <Text
-        strong
-        style={{
-          display: "block",
-          marginBottom: 12,
-          fontSize: 16,
-        }}
-      >
-        Tools
-      </Text>
-      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-        {tools.map((tool) => (
-          <ToolItem key={tool.name} tool={tool} />
-        ))}
-      </div>
+    <div className="bg-white rounded-lg shadow w-full max-w-full overflow-hidden mb-6">
+      <Collapse
+        items={[
+          {
+            key: "1",
+            label: (
+              <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
+                <h3 className="text-lg font-medium text-gray-900">Tools</h3>
+                <Text type="secondary" style={{ fontSize: 14 }}>
+                  {totalTools} provided, {calledTools} called
+                </Text>
+                <Text type="secondary" style={{ fontSize: 14 }}>
+                  • {toolNamePreview}
+                  {hasMoreTools && "..."}
+                </Text>
+              </div>
+            ),
+            children: (
+              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+                {tools.map((tool) => (
+                  <ToolItem key={tool.name} tool={tool} />
+                ))}
+              </div>
+            ),
+          },
+        ]}
+      />
     </div>
   );
 }