From 85e5f056f14bbdefee7477b9354d6f7d8a7e71fb Mon Sep 17 00:00:00 2001
From: songjianglin <270247441+2017955725@users.noreply.github.com>
Date: Fri, 9 Oct 2026 12:14:56 +0800
Subject: [PATCH] fix(ui): inline key budget windows after review

---
 .../templates/KeyEditViewControls.tsx         | 23 +++----------------
 .../components/templates/key_edit_view.tsx    |  9 +++++---
 2 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/templates/KeyEditViewControls.tsx b/ui/litellm-dashboard/src/components/templates/KeyEditViewControls.tsx
index bb3612a2ed7..ec740e7a0c8 100644
--- a/ui/litellm-dashboard/src/components/templates/KeyEditViewControls.tsx
+++ b/ui/litellm-dashboard/src/components/templates/KeyEditViewControls.tsx
@@ -5,12 +5,10 @@ import { Textarea } from "@/components/ui/textarea";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { CircleHelp } from "lucide-react";
 import { FormField } from "@/components/shared/form/FormField";
-import { Field, FieldLabel } from "@/components/ui/field";
 import { toast } from "@/lib/toast";
 import AgentSelector from "../agent_management/AgentSelector";
 import RateLimitTypeFormItem from "../common_components/RateLimitTypeFormItem";
 import ModelAliasManager from "../common_components/ModelAliasManager";
-import { BudgetWindowEntry, BudgetWindowsEditor } from "../key_team_helpers/BudgetWindowsEditor";
 import NumericalInput from "../shared/numerical_input";
 import SkillSelector from "../skills/SkillSelector";
 import { moveTagsOutOfMetadataJson } from "./keyEditFieldNormalizers";
@@ -32,6 +30,9 @@ const KEY_TYPE_OPTIONS = [
   { value: "management", label: "Management", hint: "Can call only management routes (user/team/key management)" },
 ];
 
+export const BUDGET_WINDOWS_HINT =
+  "Set multiple independent budget windows (e.g., hourly $10 AND monthly $200). Each window tracks spend separately and resets on its own schedule.";
+
 export const KeyModelAliasField = ({
   control,
   accessToken,
@@ -51,24 +52,6 @@ export const KeyModelAliasField = ({
   </FormField>
 );
 
-export const KeyBudgetWindowsField = ({
-  value,
-  onChange,
-}: {
-  value: BudgetWindowEntry[];
-  onChange: (value: BudgetWindowEntry[]) => void;
-}) => (
-  <Field>
-    <FieldLabel>
-      {labelWithHint(
-        "Budget Windows",
-        "Set multiple independent budget windows (e.g., hourly $10 AND monthly $200). Each window tracks spend separately and resets on its own schedule.",
-      )}
-    </FieldLabel>
-    <BudgetWindowsEditor value={value} onChange={onChange} />
-  </Field>
-);
-
 export const KeyTypeSelect = ({
   id,
   value,
diff --git a/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx b/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
index 65a93b7f295..4f6f1de85f6 100644
--- a/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
@@ -33,7 +33,7 @@ import {
 import {
   KeyAgentAndSkillFields,
   KeyBudgetNumberField,
-  KeyBudgetWindowsField,
+  BUDGET_WINDOWS_HINT,
   KeyMetadataField,
   KeyModelAliasField,
   KeyRateLimitFields,
@@ -57,7 +57,7 @@ import {
 } from "../key_team_helpers/endUserBudgetPayload";
 import { ModelMaxBudgetField } from "../key_team_helpers/ModelMaxBudgetEditor";
 import { useModelMaxBudgetField } from "../key_team_helpers/useModelMaxBudgetField";
-import { BudgetWindowEntry } from "../key_team_helpers/BudgetWindowsEditor";
+import { BudgetWindowEntry, BudgetWindowsEditor } from "../key_team_helpers/BudgetWindowsEditor";
 import {
   TagRateLimitEditor,
   TagRateLimitEntry,
@@ -469,7 +469,10 @@ export function KeyEditView({
             )}
           </FormField>
 
-          <KeyBudgetWindowsField value={budgetLimits} onChange={setBudgetLimits} />
+          <Field>
+            <FieldLabel>{labelWithHint("Budget Windows", BUDGET_WINDOWS_HINT)}</FieldLabel>
+            <BudgetWindowsEditor value={budgetLimits} onChange={setBudgetLimits} />
+          </Field>
 
           <ModelMaxBudgetField
             key={keyData.token}