From e93fe6051211e47ea05af976ab9d62d0dcdc0255 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Wed, 16 Sep 2026 01:31:38 +0000
Subject: [PATCH] fix(ui): hide Top Virtual Keys user column when rows carry no
 user

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../EntityUsage/TopKeyView.test.tsx           | 28 +++++++++++++++----
 .../components/EntityUsage/TopKeyView.tsx     | 18 +++++++-----
 .../tests/top_key_view.test.tsx               |  6 ++--
 3 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.test.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.test.tsx
index 88adedf022a..fc8f7a14626 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.test.tsx
+++ b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.test.tsx
@@ -119,8 +119,24 @@ describe("TopKeyView", () => {
     expect(screen.getByText("$100.00")).toBeInTheDocument();
   });
 
-  it("should display user attribution when the key has no alias", () => {
-    render(
+  it("should render User column only when a row has user attribution", () => {
+    const { rerender } = render(
+      <TopKeyView
+        {...baseProps}
+        topKeys={[
+          {
+            api_key: "key-123",
+            key_alias: "Key without user",
+            user_email: null,
+            spend: 100,
+          },
+        ]}
+      />,
+    );
+
+    expect(screen.queryByText("User")).not.toBeInTheDocument();
+
+    rerender(
       <TopKeyView
         {...baseProps}
         topKeys={[
@@ -243,7 +259,7 @@ describe("TopKeyView", () => {
         ]}
       />,
     );
-    expect(screen.getAllByText("-")).toHaveLength(2);
+    expect(screen.getAllByText("-")).toHaveLength(1);
   });
 
   it("should format spend values with two decimal places", () => {
@@ -294,7 +310,7 @@ describe("TopKeyView", () => {
         ]}
       />,
     );
-    expect(screen.getAllByText("-")).toHaveLength(2);
+    expect(screen.getAllByText("-")).toHaveLength(1);
     expect(screen.queryByText("$0.00")).not.toBeInTheDocument();
   });
 
@@ -697,13 +713,13 @@ describe("TopKeyView", () => {
         topKeys={[
           {
             api_key: "key-123",
-            key_alias: "",
+            key_alias: null,
             user_email: null,
             spend: 100,
           },
         ]}
       />,
     );
-    expect(screen.getAllByText("-")).toHaveLength(2);
+    expect(screen.getAllByText("-")).toHaveLength(1);
   });
 });
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
index 7701721ac32..c59d7fe5c8d 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
+++ b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
@@ -17,8 +17,8 @@ const TOP_KEYS_LIMITS = [5, 10, 25, 50] as const;
 
 export interface TopKeyItem {
   api_key: string;
-  key_alias: string;
-  user_email: string | null;
+  key_alias: string | null;
+  user_email?: string | null;
   tags?: TagUsage[] | null;
   spend: number;
 }
@@ -103,11 +103,15 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({ topKeys, teams, showTags = fals
       accessorKey: "key_alias",
       cell: (info: any) => info.getValue() || "-",
     },
-    {
-      header: "User",
-      accessorKey: "user_email",
-      cell: (info: any) => info.getValue() || "-",
-    },
+    ...(topKeys.some((k) => k.user_email)
+      ? [
+          {
+            header: "User",
+            accessorKey: "user_email",
+            cell: (info: any) => info.getValue() || "-",
+          },
+        ]
+      : []),
   ];
 
   const tagsColumn = {
diff --git a/ui/litellm-dashboard/tests/top_key_view.test.tsx b/ui/litellm-dashboard/tests/top_key_view.test.tsx
index a105bec50e2..073017d5cd5 100644
--- a/ui/litellm-dashboard/tests/top_key_view.test.tsx
+++ b/ui/litellm-dashboard/tests/top_key_view.test.tsx
@@ -197,7 +197,7 @@ describe("TopKeyView", () => {
       ];
 
       renderWithProviders(<TopKeyView {...mockProps} topKeys={keysWithoutTags} showTags={true} />);
-      expect(screen.getAllByText("-")).toHaveLength(2);
+      expect(screen.getAllByText("-")).toHaveLength(1);
     });
 
     it("should handle keys with undefined tags", () => {
@@ -212,7 +212,7 @@ describe("TopKeyView", () => {
       ];
 
       renderWithProviders(<TopKeyView {...mockProps} topKeys={keysWithUndefinedTags} showTags={true} />);
-      expect(screen.getAllByText("-")).toHaveLength(2);
+      expect(screen.getAllByText("-")).toHaveLength(1);
     });
 
     it("should handle keys with null tags", () => {
@@ -227,7 +227,7 @@ describe("TopKeyView", () => {
       ];
 
       renderWithProviders(<TopKeyView {...mockProps} topKeys={keysWithNullTags} showTags={true} />);
-      expect(screen.getAllByText("-")).toHaveLength(2);
+      expect(screen.getAllByText("-")).toHaveLength(1);
     });
   });