From 33cb594f057aa74b0bd6938c40363f201238bd0e Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Mon, 23 Mar 2026 21:34:44 -0700
Subject: [PATCH 1/5] Migrate regenerate key modal from Tremor to antd
 components

Replace Tremor Button, Grid, Col, Text, TextInput, Title with antd
equivalents (Button, Typography, Input). Use antd Button loading prop
instead of manual "Regenerating..." text. Replace Tailwind utility
classes with inline styles to match antd patterns.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../organisms/regenerate_key_modal.tsx        | 85 ++++++++++---------
 1 file changed, 44 insertions(+), 41 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx b/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
index 2fad101c20f..2902c792d5e 100644
--- a/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
@@ -1,6 +1,5 @@
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import { Button, Col, Grid, Text, TextInput, Title } from "@tremor/react";
-import { Form, InputNumber, Modal } from "antd";
+import { Button, Form, Input, InputNumber, Modal, Typography } from "antd";
 import { add } from "date-fns";
 import { useEffect, useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
@@ -8,6 +7,8 @@ import { KeyResponse } from "../key_team_helpers/key_list";
 import NotificationManager from "../molecules/notifications_manager";
 import { regenerateKeyCall } from "../networking";
 
+const { Text, Title } = Typography;
+
 interface RegenerateKeyModalProps {
   selectedToken: KeyResponse | null;
   visible: boolean;
@@ -159,42 +160,42 @@ export function RegenerateKeyModal({ selectedToken, visible, onClose, onKeyUpdat
               </Button>,
             ]
           : [
-              <Button key="cancel" onClick={handleClose} className="mr-2">
+              <Button key="cancel" onClick={handleClose} style={{ marginRight: 8 }}>
                 Cancel
               </Button>,
-              <Button key="regenerate" onClick={handleRegenerateKey} disabled={isRegenerating}>
-                {isRegenerating ? "Regenerating..." : "Regenerate"}
+              <Button key="regenerate" type="primary" onClick={handleRegenerateKey} loading={isRegenerating}>
+                Regenerate
               </Button>,
             ]
       }
     >
       {regeneratedKey ? (
-        <Grid numItems={1} className="gap-2 w-full">
-          <Title>Regenerated Key</Title>
-          <Col numColSpan={1}>
-            <p>
-              Please replace your old key with the new key generated. For security reasons,{" "}
-              <b>you will not be able to view it again</b> through your LiteLLM account. If you lose this secret key,
-              you will need to generate a new one.
-            </p>
-          </Col>
-          <Col numColSpan={1}>
-            <Text className="mt-3">Key Alias:</Text>
-            <div className="bg-gray-100 p-2 rounded mb-2">
-              <pre className="break-words whitespace-normal">{selectedToken?.key_alias || "No alias set"}</pre>
-            </div>
-            <Text className="mt-3">New Virtual Key:</Text>
-            <div className="bg-gray-100 p-2 rounded mb-2">
-              <pre className="break-words whitespace-normal">{regeneratedKey}</pre>
-            </div>
-            <CopyToClipboard
-              text={regeneratedKey}
-              onCopy={() => NotificationManager.success("Virtual Key copied to clipboard")}
-            >
-              <Button className="mt-3">Copy Virtual Key</Button>
-            </CopyToClipboard>
-          </Col>
-        </Grid>
+        <div>
+          <Title level={4}>Regenerated Key</Title>
+          <p>
+            Please replace your old key with the new key generated. For security reasons,{" "}
+            <b>you will not be able to view it again</b> through your LiteLLM account. If you lose this secret key,
+            you will need to generate a new one.
+          </p>
+          <Text type="secondary" style={{ marginTop: 12, display: "block" }}>Key Alias:</Text>
+          <div style={{ background: "#f8f8f8", padding: 8, borderRadius: 4, marginBottom: 8 }}>
+            <pre style={{ wordWrap: "break-word", whiteSpace: "normal", margin: 0 }}>
+              {selectedToken?.key_alias || "No alias set"}
+            </pre>
+          </div>
+          <Text type="secondary" style={{ marginTop: 12, display: "block" }}>New Virtual Key:</Text>
+          <div style={{ background: "#f8f8f8", padding: 8, borderRadius: 4, marginBottom: 8 }}>
+            <pre style={{ wordWrap: "break-word", whiteSpace: "normal", margin: 0 }}>
+              {regeneratedKey}
+            </pre>
+          </div>
+          <CopyToClipboard
+            text={regeneratedKey}
+            onCopy={() => NotificationManager.success("Virtual Key copied to clipboard")}
+          >
+            <Button type="primary" style={{ marginTop: 12 }}>Copy Virtual Key</Button>
+          </CopyToClipboard>
+        </div>
       ) : (
         <Form
           form={form}
@@ -206,7 +207,7 @@ export function RegenerateKeyModal({ selectedToken, visible, onClose, onKeyUpdat
           }}
         >
           <Form.Item name="key_alias" label="Key Alias">
-            <TextInput disabled={true} />
+            <Input disabled={true} />
           </Form.Item>
           <Form.Item name="max_budget" label="Max Budget (USD)">
             <InputNumber step={0.01} precision={2} style={{ width: "100%" }} />
@@ -217,18 +218,20 @@ export function RegenerateKeyModal({ selectedToken, visible, onClose, onKeyUpdat
           <Form.Item name="rpm_limit" label="RPM Limit">
             <InputNumber style={{ width: "100%" }} />
           </Form.Item>
-          <Form.Item name="duration" label="Expire Key (eg: 30s, 30h, 30d)" className="mt-8">
-            <TextInput placeholder="" />
+          <Form.Item name="duration" label="Expire Key (eg: 30s, 30h, 30d)" style={{ marginTop: 32 }}>
+            <Input placeholder="" />
           </Form.Item>
-          <div className="mt-2 text-sm text-gray-500">
+          <Text type="secondary" style={{ fontSize: 12 }}>
             Current expiry: {selectedToken?.expires ? new Date(selectedToken.expires).toLocaleString() : "Never"}
-          </div>
-          {newExpiryTime && <div className="mt-2 text-sm text-green-600">New expiry: {newExpiryTime}</div>}
+          </Text>
+          {newExpiryTime && (
+            <div style={{ marginTop: 8, fontSize: 12, color: "#52c41a" }}>New expiry: {newExpiryTime}</div>
+          )}
           <Form.Item
             name="grace_period"
             label="Grace Period (eg: 24h, 2d)"
             tooltip="Keep the old key valid for this duration after rotation. Both keys work during this period for seamless cutover. Empty = immediate revoke."
-            className="mt-8"
+            style={{ marginTop: 32 }}
             rules={[
               {
                 pattern: /^(\d+(s|m|h|d|w|mo))?$/,
@@ -236,11 +239,11 @@ export function RegenerateKeyModal({ selectedToken, visible, onClose, onKeyUpdat
               },
             ]}
           >
-            <TextInput placeholder="e.g. 24h, 2d (empty = immediate revoke)" />
+            <Input placeholder="e.g. 24h, 2d (empty = immediate revoke)" />
           </Form.Item>
-          <div className="mt-2 text-sm text-gray-500">
+          <Text type="secondary" style={{ fontSize: 12 }}>
             Recommended: 24h to 72h for production keys to allow seamless client migration.
-          </div>
+          </Text>
         </Form>
       )}
     </Modal>

From 6fc1937d33cd9ad08ef53c562a02798ddb002782 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Mon, 23 Mar 2026 21:55:34 -0700
Subject: [PATCH 2/5] Use antd Text type="success" instead of hardcoded color

Replace inline color "#52c41a" with antd's native
<Text type="success"> for the new expiry message.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/organisms/regenerate_key_modal.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx b/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
index 2902c792d5e..9894da7e003 100644
--- a/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
@@ -225,7 +225,7 @@ export function RegenerateKeyModal({ selectedToken, visible, onClose, onKeyUpdat
             Current expiry: {selectedToken?.expires ? new Date(selectedToken.expires).toLocaleString() : "Never"}
           </Text>
           {newExpiryTime && (
-            <div style={{ marginTop: 8, fontSize: 12, color: "#52c41a" }}>New expiry: {newExpiryTime}</div>
+            <Text type="success" style={{ marginTop: 8, fontSize: 12, display: "block" }}>New expiry: {newExpiryTime}</Text>
           )}
           <Form.Item
             name="grace_period"

From 63525d1215cd816442841f17b4432ab4ba79049b Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Mon, 23 Mar 2026 22:10:00 -0700
Subject: [PATCH 3/5] Add missing display: block to Current expiry Text

The original <div> was block-level by default. The replacement
<Text type="secondary"> renders inline, causing it to flow into
the preceding form field. Add display: "block" to match the
sibling New expiry element.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/organisms/regenerate_key_modal.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx b/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
index 9894da7e003..59b46bb35c6 100644
--- a/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
@@ -221,7 +221,7 @@ export function RegenerateKeyModal({ selectedToken, visible, onClose, onKeyUpdat
           <Form.Item name="duration" label="Expire Key (eg: 30s, 30h, 30d)" style={{ marginTop: 32 }}>
             <Input placeholder="" />
           </Form.Item>
-          <Text type="secondary" style={{ fontSize: 12 }}>
+          <Text type="secondary" style={{ fontSize: 12, display: "block" }}>
             Current expiry: {selectedToken?.expires ? new Date(selectedToken.expires).toLocaleString() : "Never"}
           </Text>
           {newExpiryTime && (

From 345af54100292fd953ece75b247f09e1217c3e18 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Mon, 23 Mar 2026 22:12:40 -0700
Subject: [PATCH 4/5] Address greptile review feedback (greploop iteration 1)

Add missing display: block and marginTop: 8 to the grace period
recommendation Text element, matching the original div styling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/organisms/regenerate_key_modal.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx b/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
index 59b46bb35c6..59d59cd519f 100644
--- a/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
@@ -241,7 +241,7 @@ export function RegenerateKeyModal({ selectedToken, visible, onClose, onKeyUpdat
           >
             <Input placeholder="e.g. 24h, 2d (empty = immediate revoke)" />
           </Form.Item>
-          <Text type="secondary" style={{ fontSize: 12 }}>
+          <Text type="secondary" style={{ fontSize: 12, display: "block", marginTop: 8 }}>
             Recommended: 24h to 72h for production keys to allow seamless client migration.
           </Text>
         </Form>

From 52343c1a997257d3a426f6c60bc96ef716df0597 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Mon, 23 Mar 2026 22:15:43 -0700
Subject: [PATCH 5/5] Address greptile review feedback (greploop iteration 2)

Add missing marginTop: 8 to Current expiry Text element to
restore the mt-2 spacing from the original div.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/organisms/regenerate_key_modal.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx b/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
index 59d59cd519f..1d7a95b598b 100644
--- a/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/regenerate_key_modal.tsx
@@ -221,7 +221,7 @@ export function RegenerateKeyModal({ selectedToken, visible, onClose, onKeyUpdat
           <Form.Item name="duration" label="Expire Key (eg: 30s, 30h, 30d)" style={{ marginTop: 32 }}>
             <Input placeholder="" />
           </Form.Item>
-          <Text type="secondary" style={{ fontSize: 12, display: "block" }}>
+          <Text type="secondary" style={{ fontSize: 12, display: "block", marginTop: 8 }}>
             Current expiry: {selectedToken?.expires ? new Date(selectedToken.expires).toLocaleString() : "Never"}
           </Text>
           {newExpiryTime && (