From 6848a17fa449b10d6aa17aa6fe5574b4cafa22a4 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Wed, 6 May 2026 15:12:13 -0700
Subject: [PATCH] fix(ui/agents): drop @ant-design/icons from ToolCallCard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@ant-design/icons isn't a direct dependency of the dashboard. Use a
text glyph (▸/▾) instead — keeps the toggle visible without adding
a runtime import.
---
 .../agents/components/three-pane/tool-call-card.tsx   | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/tool-call-card.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/tool-call-card.tsx
index e679be25eeb..f3e7e4e87e3 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/tool-call-card.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/tool-call-card.tsx
@@ -9,7 +9,6 @@
  */
 import { useState } from "react";
 import { Card, Tag, Typography, Button } from "antd";
-import { CaretRightOutlined, CaretDownOutlined } from "@ant-design/icons";
 
 const { Text, Paragraph } = Typography;
 
@@ -24,13 +23,9 @@ export default function ToolCallCard({ tool, input, result }: ToolCallCardProps)
   return (
     <Card size="small" className="!mb-3" data-testid="tool-call-card" bodyStyle={{ padding: 8 }}>
       <div className="flex items-center gap-2">
-        <Button
-          size="small"
-          type="text"
-          icon={expanded ? <CaretDownOutlined /> : <CaretRightOutlined />}
-          onClick={() => setExpanded((v) => !v)}
-          data-testid="tool-call-toggle"
-        />
+        <Button size="small" type="text" onClick={() => setExpanded((v) => !v)} data-testid="tool-call-toggle">
+          {expanded ? "▾" : "▸"}
+        </Button>
         <Tag color="cyan" className="!m-0">
           {tool}
         </Tag>