From b28b82c1057d700eee2d75c6d7cadb744e3deadf Mon Sep 17 00:00:00 2001 From: Ryan Crabbe Date: Tue, 14 Apr 2026 21:46:13 -0700 Subject: [PATCH 1/2] chore(ui): migrate GuardrailTestPlayground off @tremor/react to antd Part of the ongoing migration away from @tremor/react per CLAUDE.md. Swaps tremor Card/Title/Text/TextInput for antd Card/Input and plain h2/h3/span/p tags with Tailwind. Drops the redundant Checkbox avatar in the sidebar list since row clicks already toggle selection and the blue-border + bg-blue-50 styling already signals selected state. --- .../guardrails/GuardrailTestPlayground.tsx | 41 +++++++------------ 1 file changed, 15 insertions(+), 26 deletions(-) diff --git a/ui/litellm-dashboard/src/components/guardrails/GuardrailTestPlayground.tsx b/ui/litellm-dashboard/src/components/guardrails/GuardrailTestPlayground.tsx index 462e6a5f68..751602079c 100644 --- a/ui/litellm-dashboard/src/components/guardrails/GuardrailTestPlayground.tsx +++ b/ui/litellm-dashboard/src/components/guardrails/GuardrailTestPlayground.tsx @@ -1,6 +1,5 @@ import React, { useState } from "react"; -import { Card, Title, Text, TextInput } from "@tremor/react"; -import { List, Empty, Spin, Checkbox } from "antd"; +import { Card, List, Empty, Spin, Input } from "antd"; import { ExperimentOutlined, SearchOutlined } from "@ant-design/icons"; import GuardrailTestPanel from "./GuardrailTestPanel"; import { applyGuardrail } from "../networking"; @@ -117,18 +116,18 @@ const GuardrailTestPlayground: React.FC = ({ return (
- +
{/* Left Sidebar - Guardrails List */}
- Guardrails - Guardrails + } placeholder="Search guardrails..." value={searchQuery} - onValueChange={setSearchQuery} + onChange={(e) => setSearchQuery(e.target.value)} />
@@ -156,24 +155,14 @@ const GuardrailTestPlayground: React.FC = ({ toggleGuardrailSelection(guardrail.guardrail_name); } }} - className={`cursor-pointer hover:bg-gray-50 transition-colors px-4 ${ + style={{ paddingLeft: 24, paddingRight: 16 }} + className={`cursor-pointer hover:bg-gray-50 transition-colors ${ selectedGuardrails.has(guardrail.guardrail_name || "") ? "bg-blue-50 border-l-4 border-l-blue-500" : "border-l-4 border-l-transparent" }`} > { - e.stopPropagation(); - if (guardrail.guardrail_name) { - toggleGuardrailSelection(guardrail.guardrail_name); - } - }} - /> - } title={
@@ -206,29 +195,29 @@ const GuardrailTestPlayground: React.FC = ({
- + {selectedGuardrails.size} of {filteredGuardrails.length} selected - +
{/* Right Panel - Test Area */}
- Guardrail Testing Playground +

Guardrail Testing Playground

{selectedGuardrails.size === 0 ? (
- +

Select Guardrails to Test - - +

+

Choose one or more guardrails from the left sidebar to start testing and comparing results. - +

) : (
From 17568e81f28befd3215b4f2e98123a1b7b16bd5b Mon Sep 17 00:00:00 2001 From: Ryan Crabbe Date: Wed, 15 Apr 2026 08:45:11 -0700 Subject: [PATCH 2/2] chore(ui): use antd Typography in GuardrailTestPlayground - Replace plain text/heading tags with Typography.Text, Title, Paragraph - Document Typography preference in CLAUDE.md UI guidelines --- CLAUDE.md | 2 +- .../guardrails/GuardrailTestPlayground.tsx | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 043055408c..a2716876b1 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -110,7 +110,7 @@ LiteLLM is a unified interface for 100+ LLM providers with two main components: - When wiring a new UI entity type to an existing backend endpoint, verify the backend API contract (single value vs. array, required vs. optional params) and ensure the UI controls match — e.g., use a single-select dropdown when the backend accepts a single value, not a multi-select ### UI Component Library -- **Always use `antd` for new UI components** — we are migrating off of `@tremor/react`. Do not introduce new `Badge`, `Text`, `Card`, `Grid`, `Title`, or other imports from `@tremor/react` in any new or modified file. Use `antd` equivalents: `Tag` for labels, plain ``/`
` with Tailwind classes (or `Typography.Text`) for text, `Card` from `antd`, etc. Note that `antd` has no `"yellow"` Tag color — use `"gold"` for amber/yellow. +- **Always use `antd` for new UI components** — we are migrating off of `@tremor/react`. Do not introduce new `Badge`, `Text`, `Card`, `Grid`, `Title`, or other imports from `@tremor/react` in any new or modified file. Use `antd` equivalents: `Tag` for labels, `Typography.Text` / `Typography.Title` / `Typography.Paragraph` for textual content (avoid plain text-only ``, `

`, `` when Typography fits), and `Card` from `antd`. Note that `antd` has no `"yellow"` Tag color — use `"gold"` for amber/yellow. ### MCP OAuth / OpenAPI Transport Mapping - `TRANSPORT.OPENAPI` is a UI-only concept. The backend only accepts `"http"`, `"sse"`, or `"stdio"`. Always map it to `"http"` before any API call (including pre-OAuth temp-session calls). diff --git a/ui/litellm-dashboard/src/components/guardrails/GuardrailTestPlayground.tsx b/ui/litellm-dashboard/src/components/guardrails/GuardrailTestPlayground.tsx index 751602079c..7ede8f4c8d 100644 --- a/ui/litellm-dashboard/src/components/guardrails/GuardrailTestPlayground.tsx +++ b/ui/litellm-dashboard/src/components/guardrails/GuardrailTestPlayground.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { Card, List, Empty, Spin, Input } from "antd"; +import { Card, List, Empty, Spin, Input, Typography } from "antd"; import { ExperimentOutlined, SearchOutlined } from "@ant-design/icons"; import GuardrailTestPanel from "./GuardrailTestPanel"; import { applyGuardrail } from "../networking"; @@ -195,29 +195,31 @@ const GuardrailTestPlayground: React.FC = ({

- + {selectedGuardrails.size} of {filteredGuardrails.length} selected - +
{/* Right Panel - Test Area */}
-

Guardrail Testing Playground

+ + Guardrail Testing Playground +
{selectedGuardrails.size === 0 ? (
-

+ Select Guardrails to Test -

-

+ + Choose one or more guardrails from the left sidebar to start testing and comparing results. -

+
) : (