From 17568e81f28befd3215b4f2e98123a1b7b16bd5b Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <ryan@berri.ai>
Date: Wed, 15 Apr 2026 08:45:11 -0700
Subject: [PATCH] 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 `<span>`/`<div>` 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 `<span>`, `<p>`, `<h*>` 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<GuardrailTestPlaygroundProps> = ({
             </div>
 
             <div className="p-3 border-t border-gray-200 bg-gray-50">
-              <span className="text-xs text-gray-600">
+              <Typography.Text className="text-xs text-gray-600">
                 {selectedGuardrails.size} of {filteredGuardrails.length} selected
-              </span>
+              </Typography.Text>
             </div>
           </div>
 
           {/* Right Panel - Test Area */}
           <div className="w-3/4 flex flex-col bg-white">
             <div className="p-4 border-b border-gray-200 flex justify-between items-center">
-              <h2 className="text-xl font-semibold mb-0">Guardrail Testing Playground</h2>
+              <Typography.Title level={2} className="text-xl font-semibold mb-0">
+                Guardrail Testing Playground
+              </Typography.Title>
             </div>
 
             <div className="flex-1 overflow-auto p-4">
               {selectedGuardrails.size === 0 ? (
                 <div className="h-full flex flex-col items-center justify-center text-gray-400">
                   <ExperimentOutlined style={{ fontSize: "48px", marginBottom: "16px" }} />
-                  <p className="text-lg font-medium text-gray-600 mb-2">
+                  <Typography.Paragraph className="text-lg font-medium text-gray-600 mb-2">
                     Select Guardrails to Test
-                  </p>
-                  <p className="text-center text-gray-500 max-w-md">
+                  </Typography.Paragraph>
+                  <Typography.Paragraph className="text-center text-gray-500 max-w-md">
                     Choose one or more guardrails from the left sidebar to start testing and
                     comparing results.
-                  </p>
+                  </Typography.Paragraph>
                 </div>
               ) : (
                 <div className="h-full">