Organization ID
diff --git a/ui/litellm-dashboard/src/components/shared/EntityReference.test.tsx b/ui/litellm-dashboard/src/components/shared/EntityReference.test.tsx
new file mode 100644
index 00000000000..bb7d08b3ce4
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/shared/EntityReference.test.tsx
@@ -0,0 +1,69 @@
+/* @vitest-environment jsdom */
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { DEFAULT_PROXY_ADMIN_USER_ID } from "@/utils/sentinels";
+import { EntityReference, UserReference } from "./EntityReference";
+
+vi.mock("next/navigation", () => ({ useRouter: () => ({ push: vi.fn() }) }));
+
+describe("EntityReference", () => {
+ it("shows the name as the primary linked text when a name and href exist", () => {
+ render(
);
+ expect(screen.getByRole("link", { name: "Review Team" })).toHaveAttribute("href", "/ui/teams?team=team-123");
+ expect(screen.queryByText("team-123")).not.toBeInTheDocument();
+ });
+
+ it("shows the full name and the raw id together in the tooltip", async () => {
+ const user = userEvent.setup();
+ const longName = "Review Team " + "x".repeat(200);
+ render(
);
+ const triggers = screen.getAllByText(longName);
+ await user.hover(triggers[0]);
+ const tips = await screen.findAllByText(longName);
+ expect(tips.length).toBeGreaterThan(1);
+ expect(await screen.findByText("team-123")).toBeInTheDocument();
+ });
+
+ it("caps the named trigger at the container width so long names truncate", () => {
+ const { container } = render(
);
+ expect(container.querySelector("span")).toHaveClass("max-w-64");
+ });
+
+ it("falls back to the raw id in mono when there is no name", () => {
+ render(
);
+ const link = screen.getByRole("link", { name: "team-123" });
+ expect(link).toHaveAttribute("href", "/ui/teams?team=team-123");
+ expect(link).toHaveClass("font-mono");
+ });
+
+ it("renders the raw id without a link when neither name nor href exist", () => {
+ render(
);
+ expect(screen.queryByRole("link")).not.toBeInTheDocument();
+ expect(screen.getByText("team-123")).toBeInTheDocument();
+ });
+});
+
+describe("UserReference", () => {
+ it("renders nothing for a nullish user id", () => {
+ const { container } = render(
);
+ expect(container).toBeEmptyDOMElement();
+ });
+
+ it("shows the display name linked to the user detail page", () => {
+ render(
);
+ const link = screen.getByRole("link", { name: "Ada Reviewer" });
+ expect(link).toHaveAttribute("href", expect.stringContaining("user-9"));
+ });
+
+ it("keeps the default proxy admin badge when the sentinel id has no name", () => {
+ render(
);
+ expect(screen.getByText("Default Proxy Admin")).toBeInTheDocument();
+ });
+
+ it("falls back to the raw user id when no display name resolved", () => {
+ render(
);
+ expect(screen.getByRole("link", { name: "user-9" })).toBeInTheDocument();
+ });
+});
diff --git a/ui/litellm-dashboard/src/components/shared/EntityReference.tsx b/ui/litellm-dashboard/src/components/shared/EntityReference.tsx
new file mode 100644
index 00000000000..85ba353a4be
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/shared/EntityReference.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import DefaultProxyAdminTag from "@/components/common_components/DefaultProxyAdminTag";
+import { EntityLink } from "@/components/shared/EntityLink";
+import { SimpleTooltip } from "@/components/ui/tooltip";
+import { userDetailHref } from "@/utils/entityLinks";
+import { DEFAULT_PROXY_ADMIN_USER_ID } from "@/utils/sentinels";
+
+interface EntityReferenceProps {
+ id: string;
+ name?: string | null;
+ href?: string;
+}
+
+export function EntityReference({ id, name, href }: EntityReferenceProps) {
+ if (!name) {
+ return (
+
+ {id}
+
+ );
+ }
+ return (
+
+ {name}
+ {id}
+
+ }
+ className="min-w-0 max-w-64"
+ >
+ {name}
+
+ );
+}
+
+interface UserReferenceProps {
+ userId: string | null | undefined;
+ displayName?: string | null;
+}
+
+export function UserReference({ userId, displayName }: UserReferenceProps) {
+ if (userId == null || userId === "") return null;
+ if (userId === DEFAULT_PROXY_ADMIN_USER_ID && !displayName) {
+ return
;
+ }
+ return
;
+}
diff --git a/ui/litellm-dashboard/src/components/team/TeamInfo.tsx b/ui/litellm-dashboard/src/components/team/TeamInfo.tsx
index 7663ef8c588..de22aae01af 100644
--- a/ui/litellm-dashboard/src/components/team/TeamInfo.tsx
+++ b/ui/litellm-dashboard/src/components/team/TeamInfo.tsx
@@ -26,8 +26,9 @@ import { isProxyAdminRole } from "@/utils/roles";
import { ArrowLeftIcon } from "@heroicons/react/outline";
import { StatusBadge, type StatusTone } from "@/components/shared/table_cells/status_badge";
import { BadgeLink } from "@/components/shared/BadgeLink";
+import { EntityReference } from "@/components/shared/EntityReference";
import { Badge } from "@/components/ui/badge";
-import { modelGroupHref, modelOrAccessGroupHref } from "@/utils/entityLinks";
+import { modelGroupHref, modelOrAccessGroupHref, orgDetailHref } from "@/utils/entityLinks";
import { Card } from "@/components/ui/card";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Input as UIInput } from "@/components/ui/input";
@@ -2258,7 +2259,9 @@ const TeamInfoView: React.FC
= ({
Team Name
-
{info.team_alias}
+
+ {info.team_alias}
+
Team ID
@@ -2427,8 +2430,18 @@ const TeamInfoView: React.FC
= ({
)}
-
Organization ID
-
{info.organization_id}
+
Organization
+
+ {info.organization_id ? (
+
+ ) : (
+ "-"
+ )}
+
Status
@@ -2484,12 +2497,14 @@ const TeamInfoView: React.FC
= ({
return (
-
+
-
{info.team_alias}
+
+ {info.team_alias}
+
{info.team_id}