From 9cbad58a7090df9ec19ab46b0500cde1e0a1fa7d Mon Sep 17 00:00:00 2001 From: mateo Date: Thu, 17 Sep 2026 20:03:49 +0000 Subject: [PATCH 01/42] refactor(ui): remove unused HelpLink and HelpIcon components Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .../src/components/HelpLink.test.tsx | 80 +----------- .../src/components/HelpLink.tsx | 120 ------------------ 2 files changed, 1 insertion(+), 199 deletions(-) diff --git a/ui/litellm-dashboard/src/components/HelpLink.test.tsx b/ui/litellm-dashboard/src/components/HelpLink.test.tsx index e502126477a..a247b39b145 100644 --- a/ui/litellm-dashboard/src/components/HelpLink.test.tsx +++ b/ui/litellm-dashboard/src/components/HelpLink.test.tsx @@ -3,85 +3,7 @@ import { describe, it, expect } from "vitest"; import { screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { renderWithProviders } from "../../tests/test-utils"; -import { HelpLink, HelpIcon, DocsMenu } from "./HelpLink"; - -describe("HelpLink", () => { - it("should render with default children and open in new tab", () => { - renderWithProviders(); - - const link = screen.getByRole("link", { name: /learn more/i }); - expect(link).toHaveAttribute("href", "https://docs.example.com"); - expect(link).toHaveAttribute("target", "_blank"); - expect(link).toHaveAttribute("rel", "noopener noreferrer"); - }); - - it("should render custom children text", () => { - renderWithProviders(Custom docs link); - - expect(screen.getByText("Custom docs link")).toBeInTheDocument(); - }); - - it("should have the correct href", () => { - renderWithProviders(); - expect(screen.getByRole("link")).toHaveAttribute("href", "https://docs.example.com/test"); - }); - - it("should include a screen-reader-only label for accessibility", () => { - renderWithProviders(); - - expect(screen.getByText("(opens in a new tab)")).toBeInTheDocument(); - }); -}); - -describe("HelpIcon", () => { - it("should render a help button with accessible label", () => { - renderWithProviders(); - - expect(screen.getByRole("button", { name: /help information/i })).toBeInTheDocument(); - }); - - it("should show tooltip content on hover", async () => { - const user = userEvent.setup(); - renderWithProviders(); - - await user.hover(screen.getByRole("button", { name: /help information/i })); - - expect(screen.getByText("Tooltip help text")).toBeInTheDocument(); - }); - - it("should hide tooltip content when not hovered", () => { - renderWithProviders(); - expect(screen.queryByText("Hidden tooltip")).not.toBeInTheDocument(); - }); - - it("should show learn more link when learnMoreHref is provided", async () => { - const user = userEvent.setup(); - renderWithProviders(); - await user.hover(screen.getByRole("button", { name: /help information/i })); - expect(screen.getByText("Learn more")).toBeInTheDocument(); - }); - - it("should use custom learn more text when provided", async () => { - const user = userEvent.setup(); - renderWithProviders( - , - ); - - await user.hover(screen.getByRole("button", { name: /help information/i })); - - const link = screen.getByRole("link", { name: /read docs/i }); - expect(link).toHaveAttribute("href", "https://docs.example.com"); - }); - - it("should not show learn more link when learnMoreHref is not provided", async () => { - const user = userEvent.setup(); - renderWithProviders(); - - await user.hover(screen.getByRole("button", { name: /help information/i })); - - expect(screen.queryByRole("link")).not.toBeInTheDocument(); - }); -}); +import { DocsMenu } from "./HelpLink"; describe("DocsMenu", () => { const items = [ diff --git a/ui/litellm-dashboard/src/components/HelpLink.tsx b/ui/litellm-dashboard/src/components/HelpLink.tsx index 35e2e5f535f..39ac18f9e80 100644 --- a/ui/litellm-dashboard/src/components/HelpLink.tsx +++ b/ui/litellm-dashboard/src/components/HelpLink.tsx @@ -1,13 +1,6 @@ import React, { useState, useRef, useEffect } from "react"; import { ExternalLink, ChevronDown } from "lucide-react"; -interface HelpLinkProps { - href: string; - children?: React.ReactNode; - variant?: "inline" | "subtle" | "button"; - className?: string; -} - interface DocMenuItem { label: string; href: string; @@ -19,119 +12,6 @@ interface DocsMenuProps { className?: string; } -/** - * A reusable component for linking to documentation, styled similar to Linear's help links. - * - * @example - * // Inline "Learn more" style - * - * Learn more about custom pricing - * - * - * @example - * // Subtle link (just icon + text, minimal styling) - * - * View docs - * - * - * @example - * // Button style (more prominent) - * - * Custom Pricing Documentation - * - */ -export const HelpLink: React.FC = ({ - href, - children = "Learn more", - variant = "inline", - className = "", -}) => { - const baseClasses = - "inline-flex items-center gap-1.5 transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-1 rounded-sm"; - - const variantClasses = { - inline: "text-info text-sm font-medium hover:underline", - subtle: "text-muted-foreground hover:text-foreground text-xs", - button: - "text-info border border-border px-3 py-1.5 rounded-md bg-card hover:bg-accent text-sm font-medium shadow-xs", - }; - - return ( - - {children} - - ); -}; - -/** - * A minimal help icon with tooltip for inline contextual help. - * Similar to Linear's "?" icons that appear next to labels. - */ -interface HelpIconProps { - content: React.ReactNode; - learnMoreHref?: string; - learnMoreText?: string; -} - -export const HelpIcon: React.FC = ({ content, learnMoreHref, learnMoreText = "Learn more" }) => { - const [showTooltip, setShowTooltip] = React.useState(false); - - return ( -
- - {showTooltip && ( -
-
{content}
- {learnMoreHref && ( - - {learnMoreText} - - )} -
-
- )} -
- ); -}; - /** * A dropdown menu for multiple documentation links. * Linear-style: Single "Docs" button that expands to show multiple relevant links. From 726c2bb6df672e07709023f9a3f7350730d71c0f Mon Sep 17 00:00:00 2001 From: mateo Date: Thu, 17 Sep 2026 20:03:53 +0000 Subject: [PATCH 02/42] chore(ui): remove unused NewBadge component and its test Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .../common_components/NewBadge.test.tsx | 87 ------------------- .../components/common_components/NewBadge.tsx | 21 ----- 2 files changed, 108 deletions(-) delete mode 100644 ui/litellm-dashboard/src/components/common_components/NewBadge.test.tsx delete mode 100644 ui/litellm-dashboard/src/components/common_components/NewBadge.tsx diff --git a/ui/litellm-dashboard/src/components/common_components/NewBadge.test.tsx b/ui/litellm-dashboard/src/components/common_components/NewBadge.test.tsx deleted file mode 100644 index 3ae24b16e7b..00000000000 --- a/ui/litellm-dashboard/src/components/common_components/NewBadge.test.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { render, screen } from "@testing-library/react"; -import { describe, it, expect, vi, beforeEach } from "vitest"; -import NewBadge from "./NewBadge"; - -// Mock the hook directly -vi.mock("@/app/(dashboard)/hooks/useDisableShowNewBadge", () => ({ - useDisableShowNewBadge: vi.fn(), -})); - -import { useDisableShowNewBadge } from "@/app/(dashboard)/hooks/useDisableShowNewBadge"; - -const mockUseDisableShowNewBadge = vi.mocked(useDisableShowNewBadge); - -describe("NewBadge", () => { - beforeEach(() => { - vi.clearAllMocks(); - }); - - it("should render the badge when disableShowNewBadge is false", () => { - mockUseDisableShowNewBadge.mockReturnValue(false); - - render(Test Content); - - expect(screen.getByText("New")).toBeInTheDocument(); - expect(screen.getByText("Test Content")).toBeInTheDocument(); - }); - - it("should render the badge when disableShowNewBadge is not set", () => { - mockUseDisableShowNewBadge.mockReturnValue(false); - - render(); - - expect(screen.getByText("New")).toBeInTheDocument(); - }); - - it("should render only children when disableShowNewBadge is true", () => { - mockUseDisableShowNewBadge.mockReturnValue(true); - - render(Test Content); - - expect(screen.queryByText("New")).not.toBeInTheDocument(); - expect(screen.getByText("Test Content")).toBeInTheDocument(); - }); - - it("should render nothing when disableShowNewBadge is true and no children", () => { - mockUseDisableShowNewBadge.mockReturnValue(true); - - const { container } = render(); - - expect(container).toBeEmptyDOMElement(); - }); - - it("should render badge with dot when dot prop is true", () => { - mockUseDisableShowNewBadge.mockReturnValue(false); - - render(Test Content); - - expect(screen.queryByText("New")).not.toBeInTheDocument(); - expect(screen.getByText("Test Content")).toBeInTheDocument(); - }); - - it("should render badge with 'New' text when dot prop is false", () => { - mockUseDisableShowNewBadge.mockReturnValue(false); - - render(Test Content); - - expect(screen.getByText("New")).toBeInTheDocument(); - expect(screen.getByText("Test Content")).toBeInTheDocument(); - }); - - it("should render badge with 'New' text when dot prop is not provided (defaults to false)", () => { - mockUseDisableShowNewBadge.mockReturnValue(false); - - render(Test Content); - - expect(screen.getByText("New")).toBeInTheDocument(); - expect(screen.getByText("Test Content")).toBeInTheDocument(); - }); - - it("should render badge with dot when dot is true and no children", () => { - mockUseDisableShowNewBadge.mockReturnValue(false); - - render(); - - expect(screen.queryByText("New")).not.toBeInTheDocument(); - }); -}); diff --git a/ui/litellm-dashboard/src/components/common_components/NewBadge.tsx b/ui/litellm-dashboard/src/components/common_components/NewBadge.tsx deleted file mode 100644 index 0184616803e..00000000000 --- a/ui/litellm-dashboard/src/components/common_components/NewBadge.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Badge } from "@/components/ui/badge"; -import { useDisableShowNewBadge } from "@/app/(dashboard)/hooks/useDisableShowNewBadge"; - -export default function NewBadge({ children, dot = false }: { children?: React.ReactNode; dot?: boolean }) { - const disableShowNewBadge = useDisableShowNewBadge(); - - if (disableShowNewBadge) { - return children ? <>{children} : null; - } - - const badge = dot ? : New; - - return children ? ( - - {children} - {badge} - - ) : ( - badge - ); -} From be74d2b01f5f6007376e4a2f1e9563549b31f287 Mon Sep 17 00:00:00 2001 From: mateo Date: Thu, 17 Sep 2026 20:04:02 +0000 Subject: [PATCH 03/42] chore(ui): remove orphaned ROLE_STYLES and RoleStyle from pretty messages view Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .../LogDetailsDrawer/prettyMessagesTypes.ts | 7 ---- .../LogDetailsDrawer/prettyMessagesUtils.ts | 32 ------------------- 2 files changed, 39 deletions(-) diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/prettyMessagesTypes.ts b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/prettyMessagesTypes.ts index 463ba65d6ff..10f6cbe865d 100644 --- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/prettyMessagesTypes.ts +++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/prettyMessagesTypes.ts @@ -31,10 +31,3 @@ export interface ParsedMessages { requestMessages: ParsedMessage[]; responseMessage: ParsedMessage | null; } - -export interface RoleStyle { - background: string; - borderColor: string; - label: string; - labelColor: string; -} diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/prettyMessagesUtils.ts b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/prettyMessagesUtils.ts index 82ee081a7f8..1f4289e7c2f 100644 --- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/prettyMessagesUtils.ts +++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/prettyMessagesUtils.ts @@ -8,41 +8,9 @@ import { ParsedMessages, RequestPayload, ResponsePayload, - RoleStyle, ToolCall, } from "./prettyMessagesTypes"; -/** - * Role color styles for message cards - minimal, professional design - * Color only used for labels and left border accent - */ -export const ROLE_STYLES: Record = { - system: { - background: "transparent", - borderColor: "var(--color-muted-foreground)", - label: "SYSTEM", - labelColor: "var(--color-muted-foreground)", - }, - user: { - background: "transparent", - borderColor: "var(--color-info)", - label: "USER", - labelColor: "var(--color-info)", - }, - assistant: { - background: "transparent", - borderColor: "var(--color-success)", - label: "ASSISTANT", - labelColor: "var(--color-success)", - }, - tool: { - background: "transparent", - borderColor: "var(--color-warning)", - label: "TOOL RESULT", - labelColor: "var(--color-warning)", - }, -}; - type UnknownRecord = Record; const isRecord = (value: unknown): value is UnknownRecord => From b9bfe74628bff1e0ba8a3e8816b27db8472e45e8 Mon Sep 17 00:00:00 2001 From: mateo Date: Thu, 17 Sep 2026 20:04:10 +0000 Subject: [PATCH 04/42] chore(ui): remove never-rendered GuardrailConfig mock component and its test Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .../_components/GuardrailConfig.test.tsx | 88 ------ .../_components/GuardrailConfig.tsx | 261 ------------------ 2 files changed, 349 deletions(-) delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.test.tsx delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.tsx diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.test.tsx deleted file mode 100644 index 60bf235040f..00000000000 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.test.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { render, screen, act } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; -import { vi } from "vitest"; -import { GuardrailConfig } from "./GuardrailConfig"; - -describe("GuardrailConfig", () => { - const defaultProps = { - guardrailName: "Content Safety", - guardrailType: "Content Safety", - provider: "bedrock", - }; - - afterEach(() => { - vi.useRealTimers(); - }); - - it("should render", () => { - render(); - expect(screen.getByText("Parameters")).toBeInTheDocument(); - }); - - it("should display the guardrail name in the parameters description", () => { - render(); - expect(screen.getByText(/Configure Content Safety behavior/)).toBeInTheDocument(); - }); - - // Note: Version history entries are hardcoded placeholders in the component. - // These assertions will need updating when wired to real API data. - it("should show version history when 'View history' is clicked", async () => { - const user = userEvent.setup(); - render(); - await user.click(screen.getByRole("button", { name: /view history/i })); - expect(screen.getByText("Initial configuration")).toBeInTheDocument(); - expect(screen.getByText("Added custom categories list")).toBeInTheDocument(); - }); - - it("should toggle version history text between View/Hide", async () => { - const user = userEvent.setup(); - render(); - const button = screen.getByRole("button", { name: /view history/i }); - await user.click(button); - expect(screen.getByRole("button", { name: /hide history/i })).toBeInTheDocument(); - }); - - it("should show custom code textarea when custom code override is toggled on", async () => { - const user = userEvent.setup(); - render(); - await user.click(screen.getByRole("switch", { name: "Custom Code Override" })); - expect(screen.getByPlaceholderText(/async def evaluate/)).toBeInTheDocument(); - }); - - it("should hide custom code textarea when custom code override is off", () => { - render(); - // There's an input for categories, but no textarea - expect(screen.queryByPlaceholderText(/async def evaluate/)).not.toBeInTheDocument(); - }); - - it("should show the re-run button in idle state", () => { - render(); - expect(screen.getByRole("button", { name: /re-run on failing logs/i })).toBeInTheDocument(); - }); - - it("should show loading state when re-run is clicked", async () => { - vi.useFakeTimers({ shouldAdvanceTime: true }); - const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime }); - render(); - await user.click(screen.getByRole("button", { name: /re-run on failing logs/i })); - expect(screen.getByText(/Running on 10 samples/)).toBeInTheDocument(); - }); - - it("should show success message after re-run completes", async () => { - vi.useFakeTimers({ shouldAdvanceTime: true }); - const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime }); - render(); - await user.click(screen.getByRole("button", { name: /re-run on failing logs/i })); - await act(async () => { - vi.advanceTimersByTime(2500); - }); - expect(screen.getByText(/7\/10 would now pass/)).toBeInTheDocument(); - }); - - it("should display the Revert and Save buttons", () => { - render(); - expect(screen.getByRole("button", { name: /revert/i })).toBeInTheDocument(); - // The component's hardcoded default version is "v3", so Save shows "v4" - expect(screen.getByRole("button", { name: /save as v\d+/i })).toBeInTheDocument(); - }); -}); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.tsx deleted file mode 100644 index 34da9b8d08d..00000000000 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.tsx +++ /dev/null @@ -1,261 +0,0 @@ -import { CircleCheck, CirclePlay, Code, Save, Undo2 } from "lucide-react"; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { Label } from "@/components/ui/label"; -import { Switch } from "@/components/ui/switch"; -import { Textarea } from "@/components/ui/textarea"; -import React, { useId, useState } from "react"; - -interface GuardrailConfigProps { - guardrailName: string; - guardrailType: string; - provider: string; -} - -const versions = [ - { - id: "v3", - label: "v3 (current)", - date: "2026-02-18", - author: "admin@company.com", - changes: "Adjusted sensitivity for medical terms", - }, - { id: "v2", label: "v2", date: "2026-02-10", author: "admin@company.com", changes: "Added custom categories list" }, - { id: "v1", label: "v1", date: "2026-01-28", author: "admin@company.com", changes: "Initial configuration" }, -]; - -const ACTION_ITEMS = [ - { value: "block", label: "Block Request" }, - { value: "flag", label: "Flag for Review" }, - { value: "log", label: "Log Only" }, - { value: "fallback", label: "Use Fallback Response" }, -]; - -const PROVIDER_ITEMS = [ - { value: "bedrock", label: "AWS Bedrock Guardrails" }, - { value: "google", label: "Google Cloud AI Safety" }, - { value: "litellm", label: "LiteLLM Built-in" }, - { value: "custom", label: "Custom Code" }, -]; - -const GUARDRAIL_TYPE_ITEMS = [ - { value: "Content Safety", label: "Content Safety" }, - { value: "PII", label: "PII Detection" }, - { value: "Topic", label: "Topic Restriction" }, - { value: "prompt_injection", label: "Prompt Injection" }, - { value: "custom", label: "Custom" }, -]; - -export function GuardrailConfig({ guardrailName, guardrailType, provider }: GuardrailConfigProps) { - const [action, setAction] = useState("block"); - const [enabled, setEnabled] = useState(true); - const [customCode, setCustomCode] = useState(""); - const [useCustomCode, setUseCustomCode] = useState(false); - const [rerunStatus, setRerunStatus] = useState<"idle" | "running" | "success" | "error">("idle"); - const [version, setVersion] = useState("v3"); - const [showVersionHistory, setShowVersionHistory] = useState(false); - const enabledToggleId = useId(); - - const handleRerun = () => { - setRerunStatus("running"); - setTimeout(() => { - setRerunStatus("success"); - setTimeout(() => setRerunStatus("idle"), 3000); - }, 2000); - }; - - return ( -
- {/* Version Bar */} -
-
-
- Version: - - -
-
- - -
-
- - {showVersionHistory && ( -
- {versions.map((v) => ( -
-
- - {v.id} - - {v.changes} -
-
- {v.author} - {v.date} -
-
- ))} -
- )} -
- - {/* Parameters */} -
-

Parameters

-

Configure {guardrailName} behavior

- -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
-
-
- - {/* Custom Code Override */} -
-
-
-

- - Custom Code Override -

-

- Replace the built-in guardrail with custom evaluation code -

-
- -
- - {useCustomCode && ( -