From 64d6a41ae024ed17e4f181905d776d434512ecbf Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Apr 2026 11:40:11 +0000
Subject: [PATCH] feat(ui): prompt editor + Fallbacks modal batch to shadcn

- AddFallbacksModal: antd Modal \u2192 shadcn Dialog with indigo-tinted
  icon header.
- VariableInput: antd Input \u2192 shadcn Input (h-8). text-gray-600 \u2192
  text-muted-foreground.
- MessageList: antd Spin + LoadingOutlined \u2192 lucide Loader2 spin.
- PublishModal: @tremor Button + antd Modal/Input \u2192 shadcn Dialog +
  Button + Input with keydown-to-submit.
- ToolsCard: @tremor Card/Text \u2192 shadcn Card + plain span; TrashIcon
  \u2192 lucide Trash. Text-blue-600 \u2192 text-primary.

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 .../Fallbacks/AddFallbacksModal.tsx           | 52 +++++-------
 .../prompt_editor_view/PublishModal.tsx       | 80 ++++++++++++-------
 .../prompts/prompt_editor_view/ToolsCard.tsx  | 29 ++++---
 .../conversation_panel/MessageList.tsx        | 10 +--
 .../conversation_panel/VariableInput.tsx      | 15 ++--
 5 files changed, 100 insertions(+), 86 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacksModal.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacksModal.tsx
index 5048c99d817..0b43c4aa5c5 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacksModal.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacksModal.tsx
@@ -1,9 +1,9 @@
-/**
- * Modal wrapper for the fallback selection form
- * Handles modal visibility and layout, but delegates content to children
- */
-
-import { Modal } from "antd";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { ArrowRight } from "lucide-react";
 import React from "react";
 
@@ -19,34 +19,26 @@ export function AddFallbacksModal({
   children,
 }: AddFallbacksModalProps) {
   return (
-    <Modal
-      title={
-        <div className="pb-4 border-b border-gray-100">
-          <div className="flex items-center gap-2 text-gray-800">
-            <div className="p-2 bg-indigo-50 rounded-lg">
-              <ArrowRight className="w-5 h-5 text-indigo-600" />
+    <Dialog open={open} onOpenChange={(o) => (!o ? onCancel() : undefined)}>
+      <DialogContent className="max-w-[900px]">
+        <DialogHeader>
+          <div className="flex items-center gap-2 text-foreground">
+            <div className="p-2 bg-indigo-50 dark:bg-indigo-950/30 rounded-lg">
+              <ArrowRight className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
             </div>
             <div>
-              <h2 className="text-lg font-bold m-0">Configure Model Fallbacks</h2>
-              <p className="text-sm text-gray-500 font-normal m-0">
-                Manage multiple fallback chains for different models (up to 5 groups at a time)
+              <DialogTitle className="text-lg font-bold m-0">
+                Configure Model Fallbacks
+              </DialogTitle>
+              <p className="text-sm text-muted-foreground font-normal m-0">
+                Manage multiple fallback chains for different models (up to 5
+                groups at a time)
               </p>
             </div>
           </div>
-        </div>
-      }
-      open={open}
-      width={900}
-      footer={null}
-      onCancel={onCancel}
-      maskClosable={false}
-      className="top-8"
-      styles={{
-        body: { padding: "24px" },
-        header: { padding: "24px 24px 0 24px", border: "none" },
-      }}
-    >
-      <div className="mt-6">{children}</div>
-    </Modal>
+        </DialogHeader>
+        <div className="mt-2">{children}</div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/PublishModal.tsx b/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/PublishModal.tsx
index 411a463c45c..4ca84f8561f 100644
--- a/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/PublishModal.tsx
+++ b/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/PublishModal.tsx
@@ -1,6 +1,13 @@
 import React from "react";
-import { Button as TremorButton, Text } from "@tremor/react";
-import { Input, Modal } from "antd";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 interface PublishModalProps {
   visible: boolean;
@@ -20,37 +27,50 @@ const PublishModal: React.FC<PublishModalProps> = ({
   onCancel,
 }) => {
   return (
-    <Modal
-      title="Publish Prompt"
+    <Dialog
       open={visible}
-      onCancel={onCancel}
-      footer={[
-        <div key="footer" className="flex justify-end gap-2">
-          <TremorButton variant="secondary" onClick={onCancel}>
-            Cancel
-          </TremorButton>
-          <TremorButton onClick={onPublish} loading={isSaving}>
-            Publish
-          </TremorButton>
-        </div>
-      ]}
+      onOpenChange={(open) => (!open ? onCancel() : undefined)}
     >
-      <div className="py-4">
-        <Text className="mb-2">Name</Text>
-        <Input
-          value={promptName}
-          onChange={(e) => onNameChange(e.target.value)}
-          placeholder="Enter prompt name"
-          onPressEnter={onPublish}
-          autoFocus
-        />
-        <Text className="text-gray-500 text-xs mt-2">
-          Published prompts can be used in API calls and are versioned for easy tracking.
-        </Text>
-      </div>
-    </Modal>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Publish Prompt</DialogTitle>
+        </DialogHeader>
+        <div className="py-2">
+          <label
+            htmlFor="publish-prompt-name"
+            className="block text-sm mb-2"
+          >
+            Name
+          </label>
+          <Input
+            id="publish-prompt-name"
+            value={promptName}
+            onChange={(e) => onNameChange(e.target.value)}
+            placeholder="Enter prompt name"
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                onPublish();
+              }
+            }}
+            autoFocus
+          />
+          <p className="text-muted-foreground text-xs mt-2">
+            Published prompts can be used in API calls and are versioned for
+            easy tracking.
+          </p>
+        </div>
+        <DialogFooter>
+          <Button variant="secondary" onClick={onCancel} disabled={isSaving}>
+            Cancel
+          </Button>
+          <Button onClick={onPublish} disabled={isSaving}>
+            {isSaving ? "Publishing…" : "Publish"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };
 
 export default PublishModal;
-
diff --git a/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/ToolsCard.tsx b/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/ToolsCard.tsx
index 53444c5d8e9..5bbfd5e4135 100644
--- a/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/ToolsCard.tsx
+++ b/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/ToolsCard.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Card, Text } from "@tremor/react";
-import { PlusIcon, TrashIcon } from "lucide-react";
+import { Card } from "@/components/ui/card";
+import { Plus, Trash } from "lucide-react";
 import { Tool } from "./types";
 
 interface ToolsCardProps {
@@ -19,40 +19,46 @@ const ToolsCard: React.FC<ToolsCardProps> = ({
   return (
     <Card className="p-3">
       <div className="flex items-center justify-between mb-2">
-        <Text className="text-sm font-medium">Tools</Text>
+        <span className="text-sm font-medium">Tools</span>
         <button
+          type="button"
           onClick={onAddTool}
-          className="text-xs text-blue-600 hover:text-blue-700 flex items-center"
+          className="text-xs text-primary hover:underline flex items-center"
         >
-          <PlusIcon size={14} className="mr-1" />
+          <Plus size={14} className="mr-1" />
           Add
         </button>
       </div>
       {tools.length === 0 ? (
-        <Text className="text-gray-500 text-xs">No tools added</Text>
+        <p className="text-muted-foreground text-xs m-0">No tools added</p>
       ) : (
         <div className="space-y-2">
           {tools.map((tool, index) => (
             <div
               key={index}
-              className="flex items-center justify-between p-2 bg-gray-50 border border-gray-200 rounded"
+              className="flex items-center justify-between p-2 bg-muted border border-border rounded"
             >
               <div className="flex-1 min-w-0">
                 <div className="font-medium text-xs truncate">{tool.name}</div>
-                <div className="text-xs text-gray-500 truncate">{tool.description}</div>
+                <div className="text-xs text-muted-foreground truncate">
+                  {tool.description}
+                </div>
               </div>
               <div className="flex items-center space-x-1 ml-2">
                 <button
+                  type="button"
                   onClick={() => onEditTool(index)}
-                  className="text-xs text-blue-600 hover:text-blue-700"
+                  className="text-xs text-primary hover:underline"
                 >
                   Edit
                 </button>
                 <button
+                  type="button"
                   onClick={() => onRemoveTool(index)}
-                  className="text-gray-400 hover:text-red-500"
+                  className="text-muted-foreground hover:text-destructive"
+                  aria-label="Remove tool"
                 >
-                  <TrashIcon size={14} />
+                  <Trash size={14} />
                 </button>
               </div>
             </div>
@@ -64,4 +70,3 @@ const ToolsCard: React.FC<ToolsCardProps> = ({
 };
 
 export default ToolsCard;
-
diff --git a/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/MessageList.tsx b/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/MessageList.tsx
index 5d7eef456b3..6c88dd069a5 100644
--- a/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/MessageList.tsx
+++ b/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/MessageList.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { LoadingOutlined } from "@ant-design/icons";
-import { Spin } from "antd";
+import { Loader2 } from "lucide-react";
 import EmptyState from "./EmptyState";
 import MessageBubble from "./MessageBubble";
 import { Message } from "./types";
@@ -18,8 +17,6 @@ const MessageList: React.FC<MessageListProps> = ({
   hasVariables,
   messagesEndRef,
 }) => {
-  const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
-
   return (
     <div className="flex-1 overflow-y-auto p-4 pb-0">
       {messages.length === 0 && <EmptyState hasVariables={hasVariables} />}
@@ -30,13 +27,12 @@ const MessageList: React.FC<MessageListProps> = ({
 
       {isLoading && (
         <div className="flex justify-center items-center my-4">
-          <Spin indicator={antIcon} />
+          <Loader2 className="h-6 w-6 animate-spin text-primary" />
         </div>
       )}
-      <div ref={messagesEndRef} style={{ height: "1px" }} />
+      <div ref={messagesEndRef} className="h-px" />
     </div>
   );
 };
 
 export default MessageList;
-
diff --git a/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/VariableInput.tsx b/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/VariableInput.tsx
index a8e07bfdf57..0de7ed3fd26 100644
--- a/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/VariableInput.tsx
+++ b/ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/VariableInput.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Input } from "antd";
+import { Input } from "@/components/ui/input";
 
 interface VariableInputProps {
   extractedVariables: string[];
@@ -17,21 +17,23 @@ const VariableInput: React.FC<VariableInputProps> = ({
   }
 
   return (
-    <div className="p-4 border-b border-gray-200 bg-blue-50">
-      <h3 className="text-sm font-semibold text-gray-700 mb-3">
+    <div className="p-4 border-b border-border bg-blue-50 dark:bg-blue-950/20">
+      <h3 className="text-sm font-semibold text-foreground mb-3">
         Fill in template variables to start testing
       </h3>
       <div className="space-y-2">
         {extractedVariables.map((varName) => (
           <div key={varName}>
-            <label className="block text-xs text-gray-600 mb-1 font-medium">
-              {"{{"}{varName}{"}}"}
+            <label className="block text-xs text-muted-foreground mb-1 font-medium">
+              {"{{"}
+              {varName}
+              {"}}"}
             </label>
             <Input
               value={variables[varName] || ""}
               onChange={(e) => onVariableChange(varName, e.target.value)}
               placeholder={`Enter value for ${varName}`}
-              size="small"
+              className="h-8"
             />
           </div>
         ))}
@@ -41,4 +43,3 @@ const VariableInput: React.FC<VariableInputProps> = ({
 };
 
 export default VariableInput;
-