From 3492453262f87f3d235e2db953e1cfd8de313401 Mon Sep 17 00:00:00 2001 From: yuneng-jiang Date: Wed, 4 Nov 2026 11:34:15 -0800 Subject: [PATCH] refactor(ui): move playground and chat text onto i18n (#49991) Moves the page-authored English on /playground, the /chat app and /moyai into t() and Trans with keys in en.json, as a pure text move. The rendered English is unchanged --- .../components/chat/ByokConnect.tsx | 37 +- .../playground/components/chat/Composer.tsx | 39 +- .../components/chat/ComposerControls.tsx | 27 +- .../components/chat/Conversation.tsx | 99 +- .../playground/components/chat/Inspector.tsx | 159 +- .../playground/components/chat/McpDialog.tsx | 80 +- .../playground/components/chat/ModelName.tsx | 22 +- .../playground/components/chat/Pickers.tsx | 31 +- .../components/chat/PlaygroundChat.tsx | 85 +- .../components/chat/ReplyContent.tsx | 10 +- .../components/chat/SettingsPopover.tsx | 98 +- .../components/chat/dispatchRequest.ts | 9 +- .../components/chat/endpointCapabilities.ts | 74 +- .../components/chat/usePlaygroundSend.ts | 33 +- .../components/chat_ui/A2AMetrics.tsx | 36 +- .../chat_ui/AdditionalModelSettings.tsx | 68 +- .../components/chat_ui/AgentBuilderView.tsx | 169 +- .../components/chat_ui/AudioRenderer.tsx | 4 +- .../components/chat_ui/ChatImageRenderer.tsx | 9 +- .../components/chat_ui/ChatImageUpload.tsx | 8 +- .../components/chat_ui/ChatMessageBubble.tsx | 6 +- .../playground/components/chat_ui/ChatUI.tsx | 364 ++-- .../chat_ui/CodeInterpreterOutput.tsx | 16 +- .../chat_ui/CodeInterpreterTool.tsx | 18 +- .../components/chat_ui/EndpointSelector.tsx | 4 +- .../components/chat_ui/FilePreviewCard.tsx | 10 +- .../components/chat_ui/RealtimePlayground.tsx | 80 +- .../chat_ui/ResponsesImageRenderer.tsx | 9 +- .../chat_ui/ResponsesImageUpload.tsx | 8 +- .../chat_ui/SearchResultsDisplay.tsx | 24 +- .../components/chat_ui/SessionManagement.tsx | 41 +- .../components/chat_ui/chatConstants.ts | 23 +- .../components/chat_ui/uploadValidation.ts | 31 +- .../components/compareUI/CompareUI.tsx | 69 +- .../compareUI/components/ComparisonPanel.tsx | 38 +- .../compareUI/components/MessageDisplay.tsx | 12 +- .../compareUI/components/MessageInput.tsx | 6 +- .../compareUI/components/UnifiedSelector.tsx | 6 +- .../components/complianceUI/ComplianceUI.tsx | 248 ++- .../components/systemOneUI/CurlPreview.tsx | 12 +- .../systemOneUI/DecisionFormControls.tsx | 6 +- .../systemOneUI/OpenAIDecisionsForm.tsx | 104 +- .../components/systemOneUI/ResponseView.tsx | 58 +- .../components/systemOneUI/SystemOneForm.tsx | 103 +- .../components/systemOneUI/SystemOneUI.tsx | 85 +- .../systemOneUI/ValidationFeedback.tsx | 18 +- .../components/systemOneUI/lib/issueLabel.ts | 40 +- .../systemOneUI/lib/validatePayload.ts | 54 +- .../llm_calls/anthropic_messages.tsx | 3 +- .../playground/llm_calls/audio_speech.tsx | 3 +- .../llm_calls/audio_transcriptions.tsx | 7 +- .../playground/llm_calls/embeddings_api.tsx | 3 +- .../playground/llm_calls/image_edits.tsx | 7 +- .../playground/llm_calls/image_generation.tsx | 3 +- .../playground/llm_calls/interactions_api.tsx | 3 +- .../src/app/(dashboard)/playground/page.tsx | 24 +- .../src/app/chat/models/page.tsx | 10 +- ui/litellm-dashboard/src/app/chat/page.tsx | 90 +- ui/litellm-dashboard/src/app/moyai/page.tsx | 6 +- .../components/ThemeToggle/ThemeToggle.tsx | 4 +- .../src/components/chat/ChatFileChip.tsx | 4 +- .../src/components/chat/ChatMessages.tsx | 47 +- .../src/components/chat/ChatModelPicker.tsx | 29 +- .../src/components/chat/ChatShell.tsx | 55 +- .../src/components/chat/ConnectFlowBanner.tsx | 50 +- .../src/components/chat/ConversationList.tsx | 40 +- .../src/components/chat/KeysPanel.tsx | 124 +- .../src/components/chat/LogsPanel.tsx | 79 +- .../src/components/chat/MCPAppsPanel.tsx | 74 +- .../src/components/chat/MCPConnectPicker.tsx | 10 +- .../src/components/chat/MCPCredentialsTab.tsx | 77 +- .../src/components/chat/UsagePanel.tsx | 32 +- .../src/components/chat/backgroundChat.ts | 48 +- .../src/components/chat/imageHelpers.ts | 29 +- .../chat/moyai/MoyaiChatComposer.tsx | 6 +- .../components/chat/moyai/MoyaiChatHome.tsx | 46 +- .../src/components/chat/runChatRequest.ts | 44 +- .../src/components/chat/useBackgroundChat.ts | 14 +- .../src/components/chat/useChatHistory.ts | 51 +- .../components/llm_calls/responses_api.tsx | 3 +- .../mcp_tools/MCPToolArgumentsForm.tsx | 87 +- .../src/components/moyai/MoyaiConnected.tsx | 22 +- .../src/components/moyai/MoyaiLanding.tsx | 76 +- .../components/tag_management/TagSelector.tsx | 4 +- .../src/hooks/useUserMcpOAuthFlow.tsx | 8 +- ui/litellm-dashboard/src/i18n/locales/en.json | 1539 +++++++++++++++++ 86 files changed, 3902 insertions(+), 1449 deletions(-) diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/ByokConnect.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/ByokConnect.tsx index f94c43b720a..4e337a88add 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/ByokConnect.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/ByokConnect.tsx @@ -2,6 +2,8 @@ import { useId, useState } from "react"; import { Check, ExternalLink, KeyRound } from "lucide-react"; +import type { TFunction } from "i18next"; +import { useTranslation } from "react-i18next"; import { PasswordInput } from "@/components/shared/PasswordInput"; import { Button } from "@/components/ui/button"; import { InputGroupButton } from "@/components/ui/input-group"; @@ -13,13 +15,14 @@ import type { MCPServer } from "@/components/mcp_tools/types"; import { fetchClient } from "@/lib/http/api"; import { ApiError } from "@/lib/http/client"; import { toast } from "@/lib/toast"; +import i18n from "@/i18n/i18n"; -const saveErrorMessage = (error: unknown): string => { +const saveErrorMessage = (error: unknown, t: TFunction = i18n.t.bind(i18n)): string => { if (error instanceof ApiError) { const detail = (error.body as { detail?: { error?: string } } | null)?.detail?.error; if (detail) return detail; } - return error instanceof Error && error.message ? error.message : "Failed to connect"; + return error instanceof Error && error.message ? error.message : t("playground.chat.byok.failed"); }; export function ByokConnect({ @@ -33,6 +36,7 @@ export function ByokConnect({ onConnected: () => void; onCancel?: () => void; }) { + const { t } = useTranslation(); const [credential, setCredential] = useState(""); const [save, setSave] = useState(true); const [isSaving, setIsSaving] = useState(false); @@ -41,7 +45,7 @@ export function ByokConnect({ const connect = async () => { if (!credential.trim()) { - toast.error("Enter your API key"); + toast.error(t("playground.chat.byok.enterKey")); return; } setIsSaving(true); @@ -50,11 +54,11 @@ export function ByokConnect({ params: { path: { server_id: server.server_id } }, body: { credential: credential.trim(), save }, }); - toast.success(`Connected to ${name}`); + toast.success(t("playground.chat.byok.connected", { name })); setCredential(""); onConnected(); } catch (error) { - toast.error(saveErrorMessage(error)); + toast.error(saveErrorMessage(error, t)); } finally { setIsSaving(false); } @@ -65,12 +69,14 @@ export function ByokConnect({

- {server.has_user_credential ? `Replace your ${name} API key` : `${name} needs your API key`} + {server.has_user_credential + ? t("playground.chat.byok.replaceTitle", { name }) + : t("playground.chat.byok.connectTitle", { name })}

{server.has_user_credential - ? `The new key replaces the one the gateway uses for ${name}.` - : `The gateway calls ${name} with your own key. Connect it to list and use its tools.`} + ? t("playground.chat.byok.replaceDescription", { name }) + : t("playground.chat.byok.connectDescription", { name })}

{server.byok_description && server.byok_description.length > 0 && ( @@ -84,17 +90,17 @@ export function ByokConnect({ )} - {name} API key + {t("playground.chat.byok.keyLabel", { name })} setCredential(event.target.value)} - placeholder="Paste your API key" + placeholder={t("playground.chat.byok.keyPlaceholder")} /> {server.byok_api_key_help_url && ( - Where to find this key + {t("playground.chat.byok.helpLink")} @@ -102,18 +108,18 @@ export function ByokConnect({ - Save the key for next time + {t("playground.chat.byok.save")}
{onCancel && ( )}
@@ -130,12 +136,13 @@ export function ByokKeyButton({ name: string; onConnected: () => void; }) { + const { t } = useTranslation(); const [open, setOpen] = useState(false); return ( }> - {server.has_user_credential ? "Replace key" : "Connect key"} + {server.has_user_credential ? t("playground.chat.byok.replaceKey") : t("playground.chat.byok.connectKey")} void; }) { + const { t } = useTranslation(); const input = useRef(null); if (!capabilities.attach) return null; - const label = ATTACH_LABEL[capabilities.attach]; + const label = t(ATTACH_LABEL[capabilities.attach]); return ( <> @@ -69,9 +71,15 @@ function AttachButton({ } function SendButton({ draft, disabled }: { draft: DraftState; disabled: boolean }) { + const { t } = useTranslation(); if (draft.isLoading) return ( - + ); @@ -79,7 +87,7 @@ function SendButton({ draft, disabled }: { draft: DraftState; disabled: boolean void draft.send()} > @@ -115,6 +123,7 @@ export function Composer({ settingsControl: ReactNode; sendDisabled: boolean; }) { + const { t } = useTranslation(); const isDirectCall = endpoint === EndpointType.MCP; const isRealtime = endpoint === EndpointType.REALTIME; const message = useRef(null); @@ -138,7 +147,7 @@ export function Composer({ {directTool ? ( ) : ( -

Pick a server and a tool above to fill in its arguments

+

{t("playground.chat.composer.pickTool")}

)} ); @@ -148,9 +157,9 @@ export function Composer({ value={draft.text} onChange={(event) => draft.setText(event.target.value)} onKeyDown={handleKeyDown} - placeholder={capabilities.placeholder} + placeholder={t(capabilities.placeholder)} rows={2} - aria-label="Message" + aria-label={t("playground.chat.composer.message")} className="max-h-60" /> ); @@ -168,21 +177,31 @@ export function Composer({ {capabilities.mcp && mcpControl} {capabilities.vectorStores && ( - } emptyText="No vector stores yet" {...vectorStores} /> + } + emptyText={t("playground.chat.composer.noVectorStores")} + {...vectorStores} + /> )} {capabilities.guardrails && ( - } emptyText="No guardrails yet" {...guardrails} /> + } + emptyText={t("playground.chat.composer.noGuardrails")} + {...guardrails} + /> )} {capabilities.codeInterpreter && ( - Code interpreter + {t("playground.chat.composer.codeInterpreter")} )} diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/ComposerControls.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/ComposerControls.tsx index e3e52be3b7b..42ef5c92f09 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/ComposerControls.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/ComposerControls.tsx @@ -1,6 +1,7 @@ "use client"; import { ChevronDown, FileText, Music, X } from "lucide-react"; +import { useTranslation } from "react-i18next"; import { EndpointType } from "@/components/chat_ui/mode_endpoint_mapping"; import { Attachment, @@ -33,16 +34,19 @@ export function EndpointMenu({ value: EndpointType; onValueChange: (value: EndpointType) => void; }) { + const { t } = useTranslation(); const current = ENDPOINT_OPTIONS.find((option) => option.value === value); return ( - }> + } + > {shortEndpoint(current?.label ?? value)} onValueChange(next as EndpointType)}> - Endpoint + {t("playground.chat.controls.endpoint")} {ENDPOINT_OPTIONS.map((option) => ( {option.label} @@ -61,19 +65,24 @@ export function VoiceMenu({ value: OpenAIVoice; onValueChange: (value: OpenAIVoice) => void; }) { + const { t } = useTranslation(); const current = OPEN_AI_VOICE_SELECT_OPTIONS.find((option) => option.value === value); return ( - }> - Voice: {current?.label.split(" - ")[0] ?? value} + } + > + + {t("playground.chat.controls.voiceValue", { voice: current ? t(current.label).split(" - ")[0] : value })} + onValueChange(next as OpenAIVoice)}> - Voice + {t("playground.chat.controls.voice")} {OPEN_AI_VOICE_SELECT_OPTIONS.map((option) => ( - {option.label} + {t(option.label)} ))} @@ -99,6 +108,7 @@ export function DraftAttachments({ files: readonly DraftFile[]; onRemove: (index: number) => void; }) { + const { t } = useTranslation(); return ( {files.map((draft, index) => ( @@ -109,7 +119,10 @@ export function DraftAttachments({ {formatBytes(draft.file.size)} - onRemove(index)}> + onRemove(index)} + > diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/Conversation.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/Conversation.tsx index 31eb395408a..c6b214eb081 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/Conversation.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/Conversation.tsx @@ -16,6 +16,9 @@ import { Timer, Wrench, } from "lucide-react"; +import type { TFunction } from "i18next"; +import { Trans, useTranslation } from "react-i18next"; +import i18n from "@/i18n/i18n"; import { EndpointType } from "@/components/chat_ui/mode_endpoint_mapping"; import MCPEventsDisplay from "@/components/chat_ui/MCPEventsDisplay"; import ReasoningContent from "@/components/chat_ui/ReasoningContent"; @@ -68,11 +71,20 @@ const fellBack = (message: MessageType): boolean => (message.trace?.attemptedFal export const servedModel = (message: MessageType): string | undefined => message.trace?.modelGroup ?? (message.isError ? undefined : message.model ?? message.trace?.requestedModel); -const replyModel = (message: MessageType): Readonly<{ value: string; detail: string }> | null => { +const replyModel = ( + message: MessageType, + t: TFunction = i18n.t.bind(i18n), +): Readonly<{ value: string; detail: string }> | null => { const served = servedModel(message); - if (served) return { value: served, detail: fellBack(message) ? "Served by, after a fallback" : "Served by" }; + if (served) + return { + value: served, + detail: fellBack(message) + ? t("playground.chat.conversation.servedByAfterFallback") + : t("playground.chat.conversation.servedBy"), + }; const requested = message.trace?.requestedModel ?? message.model; - return requested ? { value: requested, detail: "Requested model" } : null; + return requested ? { value: requested, detail: t("playground.chat.conversation.requestedModel") } : null; }; function Metric({ icon, value, label }: { icon: ReactNode; value: string; label?: string }) { @@ -86,35 +98,60 @@ function Metric({ icon, value, label }: { icon: ReactNode; value: string; label? } function ReplyMetrics({ message }: { message: MessageType }) { + const { t } = useTranslation(); const usage = message.usage; const cost = usage?.cost ?? message.trace?.cost; const cached = usage?.servedFromResponseCache || message.trace?.cacheHit; return (
{message.timeToFirstToken !== undefined && ( - } value={formatSeconds(message.timeToFirstToken)} label="to first token" /> + } + value={formatSeconds(message.timeToFirstToken)} + label={t("playground.chat.conversation.metrics.firstToken")} + /> )} {message.totalLatency !== undefined && ( - } value={formatSeconds(message.totalLatency)} label="total" /> + } + value={formatSeconds(message.totalLatency)} + label={t("playground.chat.conversation.metrics.total")} + /> )} {usage?.promptTokens !== undefined && ( - } value={String(usage.promptTokens)} label="in" /> + } + value={String(usage.promptTokens)} + label={t("playground.chat.conversation.metrics.in")} + /> )} {usage?.completionTokens !== undefined && ( - } value={String(usage.completionTokens)} label="out" /> + } + value={String(usage.completionTokens)} + label={t("playground.chat.conversation.metrics.out")} + /> )} {usage?.reasoningTokens ? ( - } value={String(usage.reasoningTokens)} label="reasoning" /> + } + value={String(usage.reasoningTokens)} + label={t("playground.chat.conversation.metrics.reasoning")} + /> ) : null} {usage?.cacheReadTokens ? ( - } value={String(usage.cacheReadTokens)} label="cached" /> + } + value={String(usage.cacheReadTokens)} + label={t("playground.chat.conversation.metrics.cached")} + /> ) : null} {cost !== undefined && } value={formatCost(cost)} />} {message.toolName && } value={message.toolName} />} - {cached && Cached response} + {cached && {t("playground.chat.conversation.metrics.cachedResponse")}}
); } @@ -152,7 +189,10 @@ function UserTurn({ message }: { message: MessageType }) { - Called {message.mcpToolCall.tool} + {message.mcpToolCall.tool} }} + /> 
                 {JSON.stringify(message.mcpToolCall.arguments, null, 2)}
@@ -190,7 +230,8 @@ function AssistantReply({
   inspected: boolean;
   onInspect: () => void;
 }) {
-  const model = replyModel(message);
+  const { t } = useTranslation();
+  const model = replyModel(message, t);
   const showMcpEvents = isLast && extras.mcpEvents.length > 0 && MCP_EVENT_ENDPOINTS.includes(extras.endpoint);
   const showCode = isLast && extras.codeInterpreter && extras.endpoint === EndpointType.RESPONSES;
   return (
@@ -201,7 +242,7 @@ function AssistantReply({
             
             {fellBack(message) && }
@@ -220,7 +261,7 @@ function AssistantReply({
         )}
         {message.isError ? (
           
-            The request failed
+            {t("playground.chat.conversation.requestFailed")}
             {textOf(message)}
           
         ) : (
@@ -239,17 +280,19 @@ function AssistantReply({
             )}
           
           
-            {!message.isImage && !message.isAudio && }
+            {!message.isImage && !message.isAudio && (
+              
+            )}
             {message.trace && (
               
                 
-                Inspect
+                {t("playground.chat.conversation.inspect")}
               
             )}
           
@@ -260,12 +303,17 @@ function AssistantReply({
 }
 
 function WaitingTurn({ target }: { target: string | undefined }) {
+  const { t } = useTranslation();
   return (
     
       
         

           
-          {target ? `Waiting for ${target}` : "Waiting for a reply"}
+          
+            {target
+              ? t("playground.chat.conversation.waitingFor", { target })
+              : t("playground.chat.conversation.waitingForReply")}
+          
         

       
     
@@ -273,12 +321,13 @@ function WaitingTurn({ target }: { target: string | undefined }) {
 }
 
 function SwitchMarker({ model }: { model: string }) {
+  const { t } = useTranslation();
   return (
     
       
         
       
-      Switched to {model}
+      {t("playground.chat.conversation.switchedTo", { model })}
     
   );
 }
@@ -290,16 +339,15 @@ function EmptyConversation({
   suggestions: readonly string[];
   onPick: (text: string) => void;
 }) {
+  const { t } = useTranslation();
   return (
     
       
         
           
         
-        Send a test request
-        
-          Pick a model and anything the request should go through, then inspect what the gateway did with it
-        
+        {t("playground.chat.conversation.empty.title")}
+        {t("playground.chat.conversation.empty.description")}
       
       {suggestions.length > 0 && (
         
@@ -340,13 +388,14 @@ export function Conversation({
   suggestions: readonly string[];
   onPickSuggestion: (text: string) => void;
 }) {
+  const { t } = useTranslation();
   if (messages.length === 0) return ;
   const lastIndex = messages.length - 1;
   const waiting = isLoading && messages[lastIndex]?.role === "user";
   return (
     
       
-        
+        
           
             {messages.flatMap((message, index) => {
               const switched = switchedModel(messages, index);
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/Inspector.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/Inspector.tsx
index 3a9919ce38f..d294c859a18 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/Inspector.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/Inspector.tsx
@@ -14,6 +14,9 @@ import {
   Shuffle,
   Timer,
 } from "lucide-react";
+import type { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+import i18n from "@/i18n/i18n";
 import type { MessageType } from "@/components/chat_ui/types";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Badge } from "@/components/ui/badge";
@@ -80,130 +83,175 @@ const millis = (value: number | undefined): string | undefined =>
   value === undefined ? undefined : `${Math.round(value)}ms`;
 
 function Routing({ message }: { message: MessageType }) {
+  const { t } = useTranslation();
   const trace = message.trace;
   const served = servedModel(message);
   const fellBack = (trace?.attemptedFallbacks ?? 0) > 0;
   const reported = Boolean(trace?.callId || trace?.modelGroup || trace?.providerModel);
   return (
-    
+    
       {trace?.requestedModel && (
-        
-          
+        
+          
         
       )}
       {served && (
-        
+        
           {fellBack && }
-          
+          
         
       )}
       {trace?.providerModel && (
-        
+        
           
         
       )}
       {trace?.apiBase && (
-        
+        
           
         
       )}
       {trace?.callId && (
-        
+        
           {trace.callId}
-          
+          
         
       )}
       {trace?.responseId && (
-        
+        
           {trace.responseId}
-          
+          
         
       )}
       , value: count(trace?.attemptedFallbacks) },
-          { label: "Retries", icon: , value: count(trace?.attemptedRetries) },
-          { label: "Overhead", icon: , value: millis(trace?.overheadMs) },
+          {
+            label: t("playground.chat.inspector.routing.fallbacks"),
+            icon: ,
+            value: count(trace?.attemptedFallbacks),
+          },
+          {
+            label: t("playground.chat.inspector.routing.retries"),
+            icon: ,
+            value: count(trace?.attemptedRetries),
+          },
+          { label: t("playground.chat.inspector.routing.overhead"), icon: , value: millis(trace?.overheadMs) },
         ]}
       />
-      {!reported && (
-        
-          The gateway did not share routing details with this page. Open the dashboard from the proxy to see them
-        
-      )}
+      {!reported && {t("playground.chat.inspector.routing.notReported")}}
     
   );
 }
 
-const noneRan = (policies: readonly string[] | undefined): string | null => {
-  if (policies === undefined) return "No guardrails ran on this request";
-  return policies.length === 0 ? "No guardrails or policies ran on this request" : null;
+const noneRan = (policies: readonly string[] | undefined, t: TFunction = i18n.t.bind(i18n)): string | null => {
+  if (policies === undefined) return t("playground.chat.inspector.guardrails.noGuardrailsRan");
+  return policies.length === 0 ? t("playground.chat.inspector.guardrails.noneRan") : null;
 };
 
 function Guardrails({ message }: { message: MessageType }) {
+  const { t } = useTranslation();
   const guardrails = message.trace?.appliedGuardrails;
   const policies = message.trace?.appliedPolicies;
   if (guardrails === undefined) {
     return (
-      
-        This endpoint does not report which guardrails or policies ran
+      
+        {t("playground.chat.inspector.guardrails.unsupported")}
       
     );
   }
-  const emptyNote = guardrails.length === 0 ? noneRan(policies) : null;
+  const emptyNote = guardrails.length === 0 ? noneRan(policies, t) : null;
   return (
-    
+    
       {guardrails.map((name) => (
-        
-          Ran
+        
+          {t("playground.chat.inspector.guardrails.ran")}
         
       ))}
       {policies?.map((name) => (
-        
-          Ran
+        
+          {t("playground.chat.inspector.guardrails.ran")}
         
       ))}
       {emptyNote && {emptyNote}}
-      {policies === undefined && Policies are only reported when the dashboard is opened from the proxy}
+      {policies === undefined && {t("playground.chat.inspector.guardrails.policiesUnreported")}}
     
   );
 }
 
 function SpeedAndCost({ message }: { message: MessageType }) {
+  const { t } = useTranslation();
   const usage = message.usage;
   const cost = usage?.cost ?? message.trace?.cost;
   return (
-    
+    
       ,
             value: message.timeToFirstToken === undefined ? undefined : formatSeconds(message.timeToFirstToken),
           },
           {
-            label: "Total",
+            label: t("playground.chat.inspector.performance.total"),
             icon: ,
             value: message.totalLatency === undefined ? undefined : formatSeconds(message.totalLatency),
           },
-          { label: "Cost", icon: , value: cost === undefined ? undefined : formatCost(cost) },
-          { label: "Tokens in", icon: , value: count(usage?.promptTokens) },
-          { label: "Tokens out", icon: , value: count(usage?.completionTokens) },
-          { label: "Cached", icon: , value: count(usage?.cacheReadTokens) },
-          { label: "Reasoning", icon: , value: count(usage?.reasoningTokens) },
-          { label: "Gateway time", icon: , value: millis(message.trace?.responseMs) },
+          {
+            label: t("playground.chat.inspector.performance.cost"),
+            icon: ,
+            value: cost === undefined ? undefined : formatCost(cost),
+          },
+          {
+            label: t("playground.chat.inspector.performance.tokensIn"),
+            icon: ,
+            value: count(usage?.promptTokens),
+          },
+          {
+            label: t("playground.chat.inspector.performance.tokensOut"),
+            icon: ,
+            value: count(usage?.completionTokens),
+          },
+          {
+            label: t("playground.chat.inspector.performance.cached"),
+            icon: ,
+            value: count(usage?.cacheReadTokens),
+          },
+          {
+            label: t("playground.chat.inspector.performance.reasoning"),
+            icon: ,
+            value: count(usage?.reasoningTokens),
+          },
+          {
+            label: t("playground.chat.inspector.performance.gatewayTime"),
+            icon: ,
+            value: millis(message.trace?.responseMs),
+          },
         ]}
       />
     
@@ -211,13 +259,12 @@ function SpeedAndCost({ message }: { message: MessageType }) {
 }
 
 function NothingYet() {
+  const { t } = useTranslation();
   return (
     
       
-        Nothing to inspect yet
-        
-          Each reply shows here with the deployment that served it, fallbacks, guardrails, timing and cost
-        
+        {t("playground.chat.inspector.empty.title")}
+        {t("playground.chat.inspector.empty.description")}
       
     
   );
@@ -235,6 +282,7 @@ function Trace({ message }: { message: MessageType | null }) {
 }
 
 function CodeTab({ code }: { code: (sdk: CodeSdk) => string }) {
+  const { t } = useTranslation();
   const [sdk, setSdk] = useState("openai");
   const snippet = code(sdk);
   return (
@@ -246,21 +294,21 @@ function CodeTab({ code }: { code: (sdk: CodeSdk) => string }) {
           variant="outline"
           size="sm"
           spacing={0}
-          aria-label="SDK"
+          aria-label={t("playground.chat.inspector.code.sdk")}
         >
           
-            OpenAI SDK
+            {t("playground.chat.inspector.code.openai")}
           
           
-            Azure SDK
+            {t("playground.chat.inspector.code.azure")}
           
         
         
-          
+          
         
       
       
-        Send this request from your own app. Replace YOUR_LITELLM_API_KEY with a virtual key
+        {t("playground.chat.inspector.code.description")}
       
       
         
{snippet}

@@ -271,12 +319,13 @@ function CodeTab({ code }: { code: (sdk: CodeSdk) => string }) {
 }
 
 export function InspectorPanel({ message, code }: { message: MessageType | null; code: (sdk: CodeSdk) => string }) {
+  const { t } = useTranslation();
   return (
     
       

         
-          Trace
-          Code
+          {t("playground.chat.inspector.tabs.trace")}
+          {t("playground.chat.inspector.tabs.code")}
         
       

       
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/McpDialog.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/McpDialog.tsx
index e5e0828825d..2a72a5facc9 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/McpDialog.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/McpDialog.tsx
@@ -2,6 +2,7 @@
 
 import { useId, useState, type ReactNode } from "react";
 import { Blocks, KeyRound, Search } from "lucide-react";
+import { Trans, useTranslation } from "react-i18next";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -84,9 +85,14 @@ function MasterRow({
   onSelect: () => void;
   summary?: string;
 }) {
+  const { t } = useTranslation();
   return (
     

-      
+      
       
     ) : undefined;
     if (!selection.includes(focused))
       return (
         
-          Check this server to choose which of its tools the model can call
+          {t("playground.chat.mcp.checkServer")}
         
       );
     const state = toolsByServer[focused];
@@ -283,11 +299,11 @@ export function McpDialog({
     if (state.failed)
       return (
         
-          Couldn't load this server's tools
+          {t("playground.chat.mcp.toolsFailed")}
         
       );
     const tools = toolNames(focused);
-    if (tools.length === 0) return This server has no tools;
+    if (tools.length === 0) return {t("playground.chat.mcp.noTools")};
     const allowed = allowedTools(toolLimits, focused, tools);
     return (
       

@@ -295,7 +311,7 @@ export function McpDialog({
           
           
           {replaceKey}
         

@@ -333,9 +349,9 @@ export function McpDialog({
 
   return (
      !open && setReplacingKey(null)}>
-      }>
+      }>
         
-        MCP
+        {t("playground.chat.mcp.trigger")}
         {selection.length > 0 && (
           
             {selection.length}
@@ -344,23 +360,28 @@ export function McpDialog({
       
       
         
-          MCP servers
-          
-            Pick the servers the model can use, then limit their tools. A server allows every tool until you uncheck
-            some.
-          
+          {t("playground.chat.mcp.title")}
+          {t("playground.chat.mcp.description")}
         
         {nothingAvailable ? (
           

-            
-              Add one on the MCP servers page, or send as a key that can reach one
+            
+               }}
+              />
             
           

         ) : (
           

             

               

-                
+                
               

               
                 {isLoading ? (
@@ -370,11 +391,18 @@ export function McpDialog({
                 ) : (
                   

                     
+                    
-                    
                   

                 )}
               
@@ -383,7 +411,7 @@ export function McpDialog({
           

         )}
         
-          }>Done
+          }>{t("playground.chat.mcp.done")}
         
       
     

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/ModelName.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/ModelName.tsx
index bbea909711a..3daef04b206 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/ModelName.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat/ModelName.tsx
@@ -1,6 +1,9 @@
 "use client";
 
 import { Copy, Split } from "lucide-react";
+import type { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+import i18n from "@/i18n/i18n";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
@@ -8,24 +11,30 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { cn } from "@/lib/cva.config";
 import { toast } from "@/lib/toast";
 
-export function copyText(value: string, label: string): void {
+export function copyText(value: string, label: string, t: TFunction = i18n.t.bind(i18n)): void {
   void navigator.clipboard.writeText(value).then(
-    () => toast.success(`${label} copied`),
-    () => toast.error("Unable to copy to clipboard"),
+    () => toast.success(t("playground.chat.modelName.copied", { label })),
+    () => toast.error(t("playground.chat.modelName.copyFailed")),
   );
 }
 
 export function CopyIconButton({ value, label }: { value: string; label: string }) {
+  const { t } = useTranslation();
   return (
     
        copyText(value, label)} />
+          
             )}
             
               
               
                 }
+                  render={
+                    

       {isWide ? (
-