From 99745fe75e68cf612f5623fcc922fd6757a4fbf1 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Apr 2026 18:40:18 +0000
Subject: [PATCH] feat(ui): model_dashboard/all_models_table semantic token
 pass

- Tremor Table family preserved (whitelist) with inline eslint-
  disable; dead getHeaderText helper removed.
- bg-white sticky shadow cells \u2192 bg-background. bg-gray-50 row
  hover \u2192 bg-muted. Resizer bar: bg-blue-500 \u2192 bg-primary,
  hover:bg-blue-200 \u2192 hover:bg-primary/20. Loading/empty state
  messages use text-muted-foreground.

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 .../model_dashboard/all_models_table.tsx      | 77 ++++++++++---------
 1 file changed, 41 insertions(+), 36 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/model_dashboard/all_models_table.tsx b/ui/litellm-dashboard/src/components/model_dashboard/all_models_table.tsx
index 0585d96087c..e7c9d389ed0 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard/all_models_table.tsx
+++ b/ui/litellm-dashboard/src/components/model_dashboard/all_models_table.tsx
@@ -11,8 +11,19 @@ import {
   OnChangeFn,
 } from "@tanstack/react-table";
 import React from "react";
-import { Table, TableHead, TableHeaderCell, TableBody, TableRow, TableCell } from "@tremor/react";
-import { TableHeaderSortDropdown, SortState } from "../common_components/TableHeaderSortDropdown/TableHeaderSortDropdown";
+// eslint-disable-next-line litellm-ui/no-banned-ui-imports
+import {
+  Table,
+  TableHead,
+  TableHeaderCell,
+  TableBody,
+  TableRow,
+  TableCell,
+} from "@tremor/react";
+import {
+  TableHeaderSortDropdown,
+  SortState,
+} from "../common_components/TableHeaderSortDropdown/TableHeaderSortDropdown";
 
 // Extend the column meta type to include className
 declare module "@tanstack/react-table" {
@@ -74,25 +85,6 @@ export function AllModelsDataTable<TData, TValue>({
     },
   });
 
-  const getHeaderText = (header: any): string => {
-    if (typeof header === "string") {
-      return header;
-    }
-    if (typeof header === "function") {
-      const headerElement = header();
-      if (headerElement && headerElement.props && headerElement.props.children) {
-        const children = headerElement.props.children;
-        if (typeof children === "string") {
-          return children;
-        }
-        if (children.props && children.props.children) {
-          return children.props.children;
-        }
-      }
-    }
-    return "";
-  };
-
   return (
     <div className="rounded-lg custom-border relative">
       <div className="overflow-x-auto">
@@ -111,10 +103,11 @@ export function AllModelsDataTable<TData, TValue>({
                   {headerGroup.headers.map((header) => (
                     <TableHeaderCell
                       key={header.id}
-                      className={`py-1 h-8 relative ${header.id === "actions"
-                        ? "sticky right-0 bg-white shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.1)] w-[120px] ml-8"
-                        : ""
-                        } ${header.column.columnDef.meta?.className || ""}`}
+                      className={`py-1 h-8 relative ${
+                        header.id === "actions"
+                          ? "sticky right-0 bg-background shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.1)] w-[120px] ml-8"
+                          : ""
+                      } ${header.column.columnDef.meta?.className || ""}`}
                       style={{
                         width: header.id === "actions" ? 120 : header.getSize(),
                         position: header.id === "actions" ? "sticky" : "relative",
@@ -156,8 +149,11 @@ export function AllModelsDataTable<TData, TValue>({
                         <div
                           onMouseDown={header.getResizeHandler()}
                           onTouchStart={header.getResizeHandler()}
-                          className={`absolute right-0 top-0 h-full w-2 cursor-col-resize select-none touch-none ${header.column.getIsResizing() ? "bg-blue-500" : "hover:bg-blue-200"
-                            }`}
+                          className={`absolute right-0 top-0 h-full w-2 cursor-col-resize select-none touch-none ${
+                            header.column.getIsResizing()
+                              ? "bg-primary"
+                              : "hover:bg-primary/20"
+                          }`}
                         />
                       )}
                     </TableHeaderCell>
@@ -168,8 +164,11 @@ export function AllModelsDataTable<TData, TValue>({
             <TableBody>
               {isLoading ? (
                 <TableRow>
-                  <TableCell colSpan={columns.length} className="h-8 text-center">
-                    <div className="text-center text-gray-500">
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-8 text-center"
+                  >
+                    <div className="text-center text-muted-foreground">
                       <p>🚅 Loading models...</p>
                     </div>
                   </TableCell>
@@ -178,16 +177,19 @@ export function AllModelsDataTable<TData, TValue>({
                 tableInstance.getRowModel().rows.map((row) => (
                   <TableRow
                     key={row.id}
-                    className={onRowClick ? "cursor-pointer hover:bg-gray-50" : ""}
+                    className={
+                      onRowClick ? "cursor-pointer hover:bg-muted" : ""
+                    }
                     onClick={() => onRowClick?.(row.original)}
                   >
                     {row.getVisibleCells().map((cell) => (
                       <TableCell
                         key={cell.id}
-                        className={`py-0.5 overflow-hidden ${cell.column.id === "actions"
-                          ? "sticky right-0 bg-white shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.1)] w-[120px] ml-8"
-                          : ""
-                          } ${cell.column.columnDef.meta?.className || ""}`}
+                        className={`py-0.5 overflow-hidden ${
+                          cell.column.id === "actions"
+                            ? "sticky right-0 bg-background shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.1)] w-[120px] ml-8"
+                            : ""
+                        } ${cell.column.columnDef.meta?.className || ""}`}
                         style={{
                           width: cell.column.id === "actions" ? 120 : cell.column.getSize(),
                           position: cell.column.id === "actions" ? "sticky" : "relative",
@@ -201,8 +203,11 @@ export function AllModelsDataTable<TData, TValue>({
                 ))
               ) : (
                 <TableRow>
-                  <TableCell colSpan={columns.length} className="h-8 text-center">
-                    <div className="text-center text-gray-500">
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-8 text-center"
+                  >
+                    <div className="text-center text-muted-foreground">
                       <p>No models found</p>
                     </div>
                   </TableCell>