From 9190282d6f999859c259cc6efabd998b7c0a9d58 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Apr 2026 18:27:34 +0000
Subject: [PATCH] feat(ui): SearchTools/SearchToolColumn to shadcn

- antd Tag \u2192 shadcn Badge. Categorical blue (DB source) vs muted
  (Config source) palette preserved; file added to .eslintrc
  overrides. antd Table ColumnsType contract preserved.

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 ui/litellm-dashboard/.eslintrc.json             |  1 +
 .../components/SearchTools/SearchToolColumn.tsx | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/ui/litellm-dashboard/.eslintrc.json b/ui/litellm-dashboard/.eslintrc.json
index 9ea609db468..089362fda35 100644
--- a/ui/litellm-dashboard/.eslintrc.json
+++ b/ui/litellm-dashboard/.eslintrc.json
@@ -80,6 +80,7 @@
         "src/components/vector_store_management/vector_store_info.tsx",
         "src/components/vector_store_management/DocumentsTable.tsx",
         "src/components/common_components/MemberTable.tsx",
+        "src/components/SearchTools/SearchToolColumn.tsx",
         "src/components/permissions/VectorStorePermissions.tsx",
         "src/components/permissions/AgentPermissions.tsx",
         "src/components/permissions/MCPServerPermissions.tsx",
diff --git a/ui/litellm-dashboard/src/components/SearchTools/SearchToolColumn.tsx b/ui/litellm-dashboard/src/components/SearchTools/SearchToolColumn.tsx
index e741bd06a99..980bea2ea6f 100644
--- a/ui/litellm-dashboard/src/components/SearchTools/SearchToolColumn.tsx
+++ b/ui/litellm-dashboard/src/components/SearchTools/SearchToolColumn.tsx
@@ -1,4 +1,5 @@
-import { Tag } from "antd";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
 import { ColumnsType } from "antd/es/table";
 import TableIconActionButton from "../common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
 import { SearchTool } from "./types";
@@ -22,8 +23,9 @@ export const searchToolColumns = (
 
         return (
           <button
+            type="button"
             onClick={() => onView(tool.search_tool_id!)}
-            className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 text-xs font-normal px-2 py-0.5 text-left cursor-pointer max-w-40"
+            className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 dark:bg-blue-950/30 dark:hover:bg-blue-950/60 text-xs font-normal px-2 py-0.5 text-left cursor-pointer max-w-40 rounded"
           >
             <span className="truncate block">{tool.search_tool_id}</span>
           </button>
@@ -70,9 +72,16 @@ export const searchToolColumns = (
         const isFromConfig = tool.is_from_config ?? false;
 
         return (
-          <Tag color={isFromConfig ? "default" : "blue"}>
+          <Badge
+            className={cn(
+              "text-xs",
+              isFromConfig
+                ? "bg-muted text-muted-foreground"
+                : "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300",
+            )}
+          >
             {isFromConfig ? "Config" : "DB"}
-          </Tag>
+          </Badge>
         );
       },
     },