@acarmisc/backstage-plugin-litellm 0.25.0 → 0.26.0

package/dist/index.esm.js

@@ -1003,7 +1003,6 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import TextField from "@mui/material/TextField";
 import CircularProgress from "@mui/material/CircularProgress";
-import Autocomplete from "@mui/material/Autocomplete";
 import Skeleton2 from "@mui/material/Skeleton";
 import InputAdornment from "@mui/material/InputAdornment";
 import { alpha as alpha3 } from "@mui/material/styles";
@@ -1052,26 +1051,6 @@ function BudgetCell({ spend, maxBudget }) {
   const pct = Math.min(100, spend / maxBudget * 100);
   return /* @__PURE__ */ React3.createElement(Box3, { minWidth: 104 }, /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums", mb: 0.5 } }, "$", spend.toFixed(2), /* @__PURE__ */ React3.createElement(Typography3, { component: "span", variant: "caption", color: "text.secondary", sx: { ml: 0.5 } }, "/ $", maxBudget)), /* @__PURE__ */ React3.createElement(Meter, { value: pct, tone: budgetTone(pct), height: 4 }));
 }
-function fmtCost(perToken) {
-  if (!perToken) return null;
-  const per1k = perToken * 1e3;
-  return per1k < 0.01 ? `$${(perToken * 1e6).toFixed(2)}/M` : `$${per1k.toFixed(3)}/1K`;
-}
-function formatContextWindow(maxInput, maxOutput) {
-  if (!maxInput && !maxOutput) return null;
-  const fmt = (n) => {
-    if (!n) return null;
-    if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
-    if (n >= 1e3) return `${Math.round(n / 1e3)}K`;
-    return String(n);
-  };
-  const inPart = fmt(maxInput);
-  const outPart = fmt(maxOutput);
-  if (inPart && outPart) return `ctx ${inPart} in / ${outPart} out`;
-  if (inPart) return `ctx ${inPart}`;
-  if (outPart) return `ctx ${outPart} out`;
-  return null;
-}
 function compareKeys(a, b, sortKey) {
   switch (sortKey) {
     case "alias":
@@ -1090,16 +1069,12 @@ function compareKeys(a, b, sortKey) {
       return 0;
   }
 }
-var maskKey, shortKeyId, formatDate, keyToEditForm, KeysTable;
+var shortKeyId, formatDate, KeysTable;
 var init_KeysTable = __esm({
   "src/components/KeysTable.tsx"() {
     "use strict";
     init_api();
     init_ui();
-    maskKey = (key) => {
-      if (key.length <= 8) return "***";
-      return `${key.slice(0, 4)}...${key.slice(-4)}`;
-    };
     shortKeyId = (token) => {
       if (!token) return "-";
       if (token.length <= 16) return token;
@@ -1112,33 +1087,19 @@ var init_KeysTable = __esm({
         return dateStr;
       }
     };
-    keyToEditForm = (k) => ({
-      key_alias: k.key_alias ?? "",
-      models: k.models ?? [],
-      max_budget: k.max_budget,
-      tpm_limit: k.tpm_limit,
-      rpm_limit: k.rpm_limit
-    });
     KeysTable = ({
       keys,
-      models,
       loading,
       onGenerateKeyClick,
-      onUpdateKey,
+      onEditKey,
       onBlockKey,
       onUnblockKey,
-      onResetKeySpend,
       onDeleteKey,
       onPruneExpiredKeys
     }) => {
-      const [editingKey, setEditingKey] = useState(null);
-      const [editForm, setEditForm] = useState({});
-      const [editSubmitting, setEditSubmitting] = useState(false);
       const [blockingKeyId, setBlockingKeyId] = useState(null);
       const [deleteConfirmId, setDeleteConfirmId] = useState(null);
       const [deleteSubmitting, setDeleteSubmitting] = useState(false);
-      const [resetSpendConfirm, setResetSpendConfirm] = useState(false);
-      const [resetSpendSubmitting, setResetSpendSubmitting] = useState(false);
       const [filterText, setFilterText] = useState("");
       const [sortKey, setSortKey] = useState("created");
       const [sortDirection, setSortDirection] = useState("desc");
@@ -1163,27 +1124,8 @@ var init_KeysTable = __esm({
           return sortDirection === "asc" ? comparison : -comparison;
         });
       }, [keys, filterText, sortKey, sortDirection]);
-      const editSelectedModels = models.filter((m) => (editForm.models || []).includes(m.model_name));
       const handleOpenEdit = (k) => {
-        setEditingKey(k);
-        setEditForm(keyToEditForm(k));
-      };
-      const handleCloseEdit = () => {
-        setEditingKey(null);
-        setEditForm({});
-        setResetSpendConfirm(false);
-      };
-      const handleUpdate = async () => {
-        if (!editingKey) return;
-        setEditSubmitting(true);
-        try {
-          await onUpdateKey(editingKey.token ?? editingKey.key, editForm);
-          handleCloseEdit();
-        } catch (error) {
-          console.error("Failed to update key:", error);
-        } finally {
-          setEditSubmitting(false);
-        }
+        onEditKey(k);
       };
       const handleToggleBlock = async (key) => {
         const keyId = key.token ?? key.key;
@@ -1198,17 +1140,6 @@ var init_KeysTable = __esm({
           setBlockingKeyId(null);
         }
       };
-      const handleResetSpend = async () => {
-        if (!editingKey) return;
-        setResetSpendSubmitting(true);
-        try {
-          await onResetKeySpend(editingKey.token ?? editingKey.key);
-          setResetSpendConfirm(false);
-          handleCloseEdit();
-        } finally {
-          setResetSpendSubmitting(false);
-        }
-      };
       const handleConfirmDelete = async () => {
         if (!deleteConfirmId) return;
         setDeleteSubmitting(true);
@@ -1239,12 +1170,6 @@ var init_KeysTable = __esm({
           setPruneConfirmCount(null);
         }
       };
-      const modelOption = (m) => {
-        const inCost = fmtCost(m.input_cost_per_token);
-        const outCost = fmtCost(m.output_cost_per_token);
-        const ctx = formatContextWindow(m.max_input_tokens, m.max_output_tokens);
-        return /* @__PURE__ */ React3.createElement(Box3, null, /* @__PURE__ */ React3.createElement("span", null, m.model_name), m.supports_function_calling && " \u{1F527}", m.supports_vision && " \u{1F441}\uFE0F", ctx && /* @__PURE__ */ React3.createElement(Typography3, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, ctx), (inCost || outCost) && /* @__PURE__ */ React3.createElement(Typography3, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, inCost, " in \xB7 ", outCost, " out"));
-      };
       const renderTableBody = () => {
         if (loading) {
           return /* @__PURE__ */ React3.createElement(TableRow, null, /* @__PURE__ */ React3.createElement(TableCell, { colSpan: 8, sx: { py: 2 } }, /* @__PURE__ */ React3.createElement(Skeleton2, { variant: "rounded", height: 140 })));
@@ -1416,75 +1341,7 @@ var init_KeysTable = __esm({
           ))
         },
         /* @__PURE__ */ React3.createElement(TableContainer, null, /* @__PURE__ */ React3.createElement(Table, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React3.createElement(TableHead, null, /* @__PURE__ */ React3.createElement(TableRow, null, /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "alias" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "alias", direction: sortKey === "alias" ? sortDirection : "asc", onClick: () => handleSort("alias") }, "Alias")), /* @__PURE__ */ React3.createElement(TableCell, null, "Key ID"), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "created" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "created", direction: sortKey === "created" ? sortDirection : "asc", onClick: () => handleSort("created") }, "Created")), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "expires" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "expires", direction: sortKey === "expires" ? sortDirection : "asc", onClick: () => handleSort("expires") }, "Expires")), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "budget" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "budget", direction: sortKey === "budget" ? sortDirection : "asc", onClick: () => handleSort("budget") }, "Budget")), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "limits" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "limits", direction: sortKey === "limits" ? sortDirection : "asc", onClick: () => handleSort("limits") }, "TPM / RPM")), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "models" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "models", direction: sortKey === "models" ? sortDirection : "asc", onClick: () => handleSort("models") }, "Models")), /* @__PURE__ */ React3.createElement(TableCell, { align: "right" }, "Actions"))), /* @__PURE__ */ React3.createElement(TableBody, null, renderTableBody())))
-      ), /* @__PURE__ */ React3.createElement(Dialog, { open: !!editingKey, onClose: handleCloseEdit, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React3.createElement(DialogTitle, null, "Edit Key"), /* @__PURE__ */ React3.createElement(DialogContent, null, editingKey && /* @__PURE__ */ React3.createElement(Box3, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2", color: "text.secondary" }, /* @__PURE__ */ React3.createElement("code", { style: { fontFamily: "monospace", color: "inherit" } }, maskKey(editingKey.key))), /* @__PURE__ */ React3.createElement(
-        TextField,
-        {
-          label: "Alias",
-          value: editForm.key_alias || "",
-          onChange: (e) => setEditForm({ ...editForm, key_alias: e.target.value }),
-          fullWidth: true
-        }
-      ), models.length > 0 && /* @__PURE__ */ React3.createElement(
-        Autocomplete,
-        {
-          multiple: true,
-          options: models,
-          groupBy: (m) => m.mode || "other",
-          getOptionLabel: (m) => m.model_name,
-          value: editSelectedModels,
-          onChange: (_e, selected) => setEditForm({ ...editForm, models: selected.map((m) => m.model_name) }),
-          renderOption: (props, m) => /* @__PURE__ */ React3.createElement("li", { ...props }, modelOption(m)),
-          renderInput: (params) => /* @__PURE__ */ React3.createElement(TextField, { ...params, label: "Models", fullWidth: true })
-        }
-      ), /* @__PURE__ */ React3.createElement(
-        TextField,
-        {
-          label: "Max Budget (USD)",
-          type: "number",
-          value: editForm.max_budget ?? "",
-          onChange: (e) => setEditForm({ ...editForm, max_budget: e.target.value ? Number(e.target.value) : void 0 }),
-          fullWidth: true
-        }
-      ), /* @__PURE__ */ React3.createElement(
-        TextField,
-        {
-          label: "TPM Limit",
-          type: "number",
-          value: editForm.tpm_limit ?? "",
-          onChange: (e) => setEditForm({ ...editForm, tpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
-          helperText: "Max tokens per minute this key can consume across all models. Leave blank for no limit.",
-          fullWidth: true
-        }
-      ), /* @__PURE__ */ React3.createElement(
-        TextField,
-        {
-          label: "RPM Limit",
-          type: "number",
-          value: editForm.rpm_limit ?? "",
-          onChange: (e) => setEditForm({ ...editForm, rpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
-          helperText: "Max requests per minute this key can make across all models. Leave blank for no limit.",
-          fullWidth: true
-        }
-      ), /* @__PURE__ */ React3.createElement(Box3, { mt: 1, pt: 2, borderTop: "1px solid", sx: { borderColor: "divider" } }, /* @__PURE__ */ React3.createElement(Typography3, { variant: "caption", color: "text.secondary", display: "block", mb: 1 }, "Danger Zone"), !resetSpendConfirm ? /* @__PURE__ */ React3.createElement(
-        Button2,
-        {
-          size: "small",
-          color: "warning",
-          variant: "outlined",
-          onClick: () => setResetSpendConfirm(true)
-        },
-        "Reset Spend to $0"
-      ) : /* @__PURE__ */ React3.createElement(Box3, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2", color: "warning.main" }, "Zero out spend counter?"), /* @__PURE__ */ React3.createElement(
-        Button2,
-        {
-          size: "small",
-          color: "warning",
-          variant: "contained",
-          disabled: resetSpendSubmitting,
-          onClick: handleResetSpend
-        },
-        resetSpendSubmitting ? /* @__PURE__ */ React3.createElement(CircularProgress, { size: 16 }) : "Confirm"
-      ), /* @__PURE__ */ React3.createElement(Button2, { size: "small", onClick: () => setResetSpendConfirm(false) }, "Cancel"))))), /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(Button2, { onClick: handleCloseEdit }, "Cancel"), /* @__PURE__ */ React3.createElement(Button2, { onClick: handleUpdate, variant: "contained", color: "primary", disabled: editSubmitting }, editSubmitting ? /* @__PURE__ */ React3.createElement(CircularProgress, { size: 24 }) : "Save"))), /* @__PURE__ */ React3.createElement(Dialog, { open: !!deleteConfirmId, onClose: () => setDeleteConfirmId(null), maxWidth: "xs", fullWidth: true }, /* @__PURE__ */ React3.createElement(DialogTitle, null, "Revoke Key?"), /* @__PURE__ */ React3.createElement(DialogContent, null, /* @__PURE__ */ React3.createElement(Typography3, null, "This will permanently revoke the key. Any integrations using it will stop working immediately.")), /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(Button2, { onClick: () => setDeleteConfirmId(null), disabled: deleteSubmitting }, "Cancel"), /* @__PURE__ */ React3.createElement(
+      ), /* @__PURE__ */ React3.createElement(Dialog, { open: !!deleteConfirmId, onClose: () => setDeleteConfirmId(null), maxWidth: "xs", fullWidth: true }, /* @__PURE__ */ React3.createElement(DialogTitle, null, "Revoke Key?"), /* @__PURE__ */ React3.createElement(DialogContent, null, /* @__PURE__ */ React3.createElement(Typography3, null, "This will permanently revoke the key. Any integrations using it will stop working immediately.")), /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(Button2, { onClick: () => setDeleteConfirmId(null), disabled: deleteSubmitting }, "Cancel"), /* @__PURE__ */ React3.createElement(
         Button2,
         {
           onClick: handleConfirmDelete,
@@ -1521,7 +1378,7 @@ var init_format = __esm({
   }
 });
 
-// src/components/GenerateKeyDialog.tsx
+// src/components/KeyFormDialog.tsx
 import React4, { useState as useState2, useEffect, useMemo as useMemo3 } from "react";
 import Box4 from "@mui/material/Box";
 import Typography4 from "@mui/material/Typography";
@@ -1534,7 +1391,7 @@ import MenuItem from "@mui/material/MenuItem";
 import Button3 from "@mui/material/Button";
 import IconButton2 from "@mui/material/IconButton";
 import CircularProgress2 from "@mui/material/CircularProgress";
-import Autocomplete2 from "@mui/material/Autocomplete";
+import Autocomplete from "@mui/material/Autocomplete";
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Alert from "@mui/material/Alert";
@@ -1636,17 +1493,17 @@ function teamHelperText(teamError, teamRequired) {
   if (teamRequired) return "Bind this key to a team for scoped access";
   return "Optional: bind this key to a specific team for scoped access";
 }
-function budgetHelperText(budgetInvalid, budgetEstimate) {
-  if (budgetInvalid) return 'Enter a positive budget or tick "Unlimited"';
+function budgetHelperText(budgetInvalid, budgetEstimate, unlimited) {
+  if (budgetInvalid && !unlimited) return 'Enter a positive budget or tick "Unlimited"';
   if (budgetEstimate !== null) return `\u2248 ${fmtInt(budgetEstimate)} tokens at the selected model's rate`;
   return void 0;
 }
-function fmtCost2(perToken) {
+function fmtCost(perToken) {
   if (!perToken) return null;
   const per1k = perToken * 1e3;
   return per1k < 0.01 ? `$${(perToken * 1e6).toFixed(2)}/M` : `$${per1k.toFixed(3)}/1K`;
 }
-function formatContextWindow2(maxInput, maxOutput) {
+function formatContextWindow(maxInput, maxOutput) {
   if (!maxInput && !maxOutput) return null;
   const fmt = (n) => {
     if (!n) return null;
@@ -1661,9 +1518,9 @@ function formatContextWindow2(maxInput, maxOutput) {
   if (outPart) return `ctx ${outPart} out`;
   return null;
 }
-var generateDefaultAlias, emptyForm, ALL_PROXY_MODELS, SNIPPET_FILE_HINTS, SnippetTabs, GenerateKeyDialog;
-var init_GenerateKeyDialog = __esm({
-  "src/components/GenerateKeyDialog.tsx"() {
+var generateDefaultAlias, createForm, editForm, ALL_PROXY_MODELS, SNIPPET_FILE_HINTS, SnippetTabs, KeyFormDialog;
+var init_KeyFormDialog = __esm({
+  "src/components/KeyFormDialog.tsx"() {
     "use strict";
     init_format();
     generateDefaultAlias = (username) => {
@@ -1671,8 +1528,8 @@ var init_GenerateKeyDialog = __esm({
       const hash = Math.random().toString(36).slice(2, 8);
       return `${base}-${hash}`;
     };
-    emptyForm = () => ({
-      alias: "",
+    createForm = (username) => ({
+      alias: generateDefaultAlias(username),
       models: [],
       duration: "30d",
       max_budget: 100,
@@ -1681,6 +1538,13 @@ var init_GenerateKeyDialog = __esm({
       team_id: void 0,
       key_type: "llm_api"
     });
+    editForm = (k) => ({
+      key_alias: k.key_alias ?? "",
+      models: k.models ?? [],
+      max_budget: k.max_budget,
+      tpm_limit: k.tpm_limit,
+      rpm_limit: k.rpm_limit
+    });
     ALL_PROXY_MODELS = "all-proxy-models";
     SNIPPET_FILE_HINTS = {
       opencode: "Add to ~/.config/opencode/opencode.json",
@@ -1727,46 +1591,79 @@ var init_GenerateKeyDialog = __esm({
         model && /* @__PURE__ */ React4.createElement(Typography4, { variant: "caption", color: "text.secondary", display: "block", mt: 1 }, "Using model \u201C", model, "\u201D \u2014 swap it for any model you have access to.")
       ));
     };
-    GenerateKeyDialog = ({
+    KeyFormDialog = ({
       open,
       onClose,
+      mode,
+      keyToEdit = null,
       keys,
       models,
       teams,
       username,
       keyGenerationSettings,
-      onGenerateKey,
+      onCreateKey,
+      onUpdateKey,
+      onResetKeySpend,
       onGetConfig
     }) => {
-      const [formData, setFormData] = useState2(emptyForm());
+      const isCreate = mode === "create";
+      const [generateForm, setGenerateForm] = useState2(createForm(username));
+      const [editFormState, setEditFormState] = useState2({});
       const [unlimitedBudget, setUnlimitedBudget] = useState2(false);
       const [submitting, setSubmitting] = useState2(false);
       const [newKeyValue, setNewKeyValue] = useState2(null);
       const [newKeySnippets, setNewKeySnippets] = useState2(null);
       const [newKeyModel, setNewKeyModel] = useState2("");
       const [generateError, setGenerateError] = useState2(null);
+      const [editError, setEditError] = useState2(null);
+      const [resetSpendConfirm, setResetSpendConfirm] = useState2(false);
+      const [resetSpendSubmitting, setResetSpendSubmitting] = useState2(false);
       useEffect(() => {
         if (open) {
-          setFormData({ ...emptyForm(), alias: generateDefaultAlias(username) });
-          setUnlimitedBudget(false);
+          if (isCreate) {
+            setGenerateForm(createForm(username));
+          } else if (keyToEdit) {
+            setEditFormState(editForm(keyToEdit));
+            setUnlimitedBudget(
+              keyGenerationSettings?.allowUnlimitedBudget === true && (keyToEdit.max_budget === null || keyToEdit.max_budget === void 0)
+            );
+          } else {
+            setEditFormState({});
+            setUnlimitedBudget(false);
+          }
           setNewKeyValue(null);
           setNewKeySnippets(null);
           setNewKeyModel("");
           setGenerateError(null);
+          setEditError(null);
+          setResetSpendConfirm(false);
         }
-      }, [open, username]);
+      }, [open, isCreate, keyToEdit, username, keyGenerationSettings?.allowUnlimitedBudget]);
       const allowUnlimitedBudget = keyGenerationSettings?.allowUnlimitedBudget ?? false;
       const teamRequired = keyGenerationSettings?.teamRequired ?? true;
-      const selectedTeam = teams.find((t) => t.team_id === formData.team_id) ?? null;
+      const formData = isCreate ? generateForm : editFormState;
+      const setFormData = (patch) => {
+        if (isCreate) {
+          setGenerateForm((prev) => ({ ...prev, ...patch }));
+        } else {
+          setEditFormState((prev) => ({ ...prev, ...patch }));
+        }
+      };
+      const currentAlias = (isCreate ? generateForm.alias : editFormState.key_alias) ?? "";
+      const setAliasField = (value) => {
+        if (isCreate) setFormData({ alias: value });
+        else setFormData({ key_alias: value });
+      };
+      const selectedTeam = teams.find((t) => t.team_id === (isCreate ? generateForm.team_id : void 0)) ?? null;
       const availableModels = useMemo3(() => {
         return models.filter((m) => isModelAllowedByTeam(m, selectedTeam?.models));
       }, [models, selectedTeam]);
       const selectedModels = availableModels.filter((m) => (formData.models || []).includes(m.model_name));
-      const aliasError = !(formData.alias || "").trim();
-      const teamError = teamRequired && !formData.team_id;
+      const aliasError = !currentAlias.trim();
+      const teamError = isCreate && teamRequired && !generateForm.team_id;
       const budgetInvalid = !unlimitedBudget && (formData.max_budget === void 0 || formData.max_budget === null || formData.max_budget <= 0);
-      const canGenerate = !aliasError && !teamError && !budgetInvalid && !submitting;
-      const aliasDuplicate = !!formData.alias && keys.some((k) => k.key_alias === formData.alias);
+      const canSubmit = !aliasError && !teamError && !budgetInvalid && !submitting;
+      const aliasDuplicate = !!currentAlias && keys.some((k) => k.key_alias === currentAlias && k !== keyToEdit);
       const budgetEstimate = useMemo3(() => {
         if (unlimitedBudget || budgetInvalid) return null;
         const inputCosts = selectedModels.map((m) => m.input_cost_per_token).filter((c) => typeof c === "number" && c > 0);
@@ -1779,11 +1676,11 @@ var init_GenerateKeyDialog = __esm({
         setGenerateError(null);
         try {
           const request = {
-            ...formData,
-            max_budget: unlimitedBudget ? null : formData.max_budget
+            ...generateForm,
+            max_budget: unlimitedBudget ? null : generateForm.max_budget
           };
-          const response = await onGenerateKey(request);
-          const model = formData.models?.[0] ?? availableModels[0]?.model_name ?? "";
+          const response = await onCreateKey(request);
+          const model = generateForm.models?.[0] ?? availableModels[0]?.model_name ?? "";
           setNewKeyValue(response.key);
           setNewKeyModel(model);
           setNewKeySnippets(null);
@@ -1792,7 +1689,7 @@ var init_GenerateKeyDialog = __esm({
             setNewKeySnippets(buildSnippets(config.baseUrl, response.key, model));
           } catch {
           }
-          setFormData(emptyForm());
+          setGenerateForm(createForm(username));
           setUnlimitedBudget(false);
         } catch (error) {
           setGenerateError(error?.message ?? "Failed to generate key");
@@ -1800,27 +1697,58 @@ var init_GenerateKeyDialog = __esm({
           setSubmitting(false);
         }
       };
+      const handleUpdate = async () => {
+        if (!keyToEdit) return;
+        setSubmitting(true);
+        setEditError(null);
+        try {
+          const request = {
+            ...editFormState,
+            max_budget: unlimitedBudget ? null : editFormState.max_budget
+          };
+          await onUpdateKey(keyToEdit.token ?? keyToEdit.key, request);
+          onClose();
+        } catch (error) {
+          setEditError(error?.message ?? "Failed to update key");
+        } finally {
+          setSubmitting(false);
+        }
+      };
+      const handleResetSpend = async () => {
+        if (!keyToEdit || !onResetKeySpend) return;
+        setResetSpendSubmitting(true);
+        try {
+          await onResetKeySpend(keyToEdit.token ?? keyToEdit.key);
+          setResetSpendConfirm(false);
+          onClose();
+        } finally {
+          setResetSpendSubmitting(false);
+        }
+      };
       const handleClose = () => {
         onClose();
         setGenerateError(null);
+        setEditError(null);
         setNewKeyValue(null);
         setNewKeySnippets(null);
-        setFormData(emptyForm());
+        setGenerateForm(createForm(username));
+        setEditFormState({});
         setUnlimitedBudget(false);
+        setResetSpendConfirm(false);
       };
       const copyToClipboard = (text) => {
         navigator.clipboard.writeText(text);
       };
       const modelOption = (m) => {
-        const inCost = fmtCost2(m.input_cost_per_token);
-        const outCost = fmtCost2(m.output_cost_per_token);
-        const ctx = formatContextWindow2(m.max_input_tokens, m.max_output_tokens);
+        const inCost = fmtCost(m.input_cost_per_token);
+        const outCost = fmtCost(m.output_cost_per_token);
+        const ctx = formatContextWindow(m.max_input_tokens, m.max_output_tokens);
         return /* @__PURE__ */ React4.createElement(Box4, null, /* @__PURE__ */ React4.createElement("span", null, m.model_name), m.supports_function_calling && " \u{1F527}", m.supports_vision && " \u{1F441}\uFE0F", ctx && /* @__PURE__ */ React4.createElement(Typography4, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, ctx), (inCost || outCost) && /* @__PURE__ */ React4.createElement(Typography4, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, inCost, " in \xB7 ", outCost, " out"));
       };
       const renderTeamField = () => {
         if (teams.length > 0) {
           return /* @__PURE__ */ React4.createElement(
-            Autocomplete2,
+            Autocomplete,
             {
               options: teams,
               getOptionLabel: (t) => t.team_alias || t.team_id,
@@ -1830,28 +1758,61 @@ var init_GenerateKeyDialog = __esm({
                   const model = models.find((m) => m.model_name === name);
                   return model ? isModelAllowedByTeam(model, team?.models) : false;
                 });
-                setFormData({ ...formData, team_id: team?.team_id, models: restrictedModels });
+                setFormData({ team_id: team?.team_id, models: restrictedModels });
               },
+              disabled: !isCreate,
               renderInput: (params) => /* @__PURE__ */ React4.createElement(
                 TextField2,
                 {
                   ...params,
                   label: "Team",
                   error: teamError,
-                  helperText: teamHelperText(teamError, teamRequired),
-                  required: teamRequired,
+                  helperText: isCreate ? teamHelperText(teamError, teamRequired) : "Team binding is fixed after creation \u2014 delete and recreate the key to change it",
+                  required: isCreate && teamRequired,
                   fullWidth: true
                 }
               )
             }
           );
         }
-        if (teamRequired) {
+        if (teamRequired && isCreate) {
           return /* @__PURE__ */ React4.createElement(Typography4, { variant: "body2", color: "error" }, "Team selection is required, but you don't belong to any team yet \u2014 contact your administrator.");
         }
         return null;
       };
-      return /* @__PURE__ */ React4.createElement(Dialog2, { open, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React4.createElement(DialogTitle2, null, newKeyValue ? "Key Generated" : "Generate New Key"), /* @__PURE__ */ React4.createElement(DialogContent2, null, newKeyValue ? /* @__PURE__ */ React4.createElement(Box4, null, /* @__PURE__ */ React4.createElement(Typography4, { variant: "body2", color: "text.secondary", gutterBottom: true }, "Copy this key now. You won't be able to see it again."), /* @__PURE__ */ React4.createElement(
+      const editKeyId = keyToEdit?.token ?? keyToEdit?.key ?? "";
+      const renderDangerZone = () => {
+        if (isCreate || !onResetKeySpend) return null;
+        return /* @__PURE__ */ React4.createElement(Box4, { mt: 1, pt: 2, borderTop: "1px solid", sx: { borderColor: "divider" } }, /* @__PURE__ */ React4.createElement(Typography4, { variant: "caption", color: "text.secondary", display: "block", mb: 1 }, "Danger Zone"), !resetSpendConfirm ? /* @__PURE__ */ React4.createElement(
+          Button3,
+          {
+            size: "small",
+            color: "warning",
+            variant: "outlined",
+            onClick: () => setResetSpendConfirm(true)
+          },
+          "Reset Spend to $0"
+        ) : /* @__PURE__ */ React4.createElement(Box4, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ React4.createElement(Typography4, { variant: "body2", color: "warning.main" }, "Zero out spend counter?"), /* @__PURE__ */ React4.createElement(
+          Button3,
+          {
+            size: "small",
+            color: "warning",
+            variant: "contained",
+            disabled: resetSpendSubmitting,
+            onClick: handleResetSpend
+          },
+          resetSpendSubmitting ? /* @__PURE__ */ React4.createElement(CircularProgress2, { size: 16 }) : "Confirm"
+        ), /* @__PURE__ */ React4.createElement(Button3, { size: "small", onClick: () => setResetSpendConfirm(false) }, "Cancel")));
+      };
+      const maskKey = (key) => {
+        if (key.length <= 8) return "***";
+        return `${key.slice(0, 4)}...${key.slice(-4)}`;
+      };
+      let dialogTitle = "Edit Key";
+      if (newKeyValue) dialogTitle = "Key Generated";
+      else if (isCreate) dialogTitle = "Generate New Key";
+      const submitLabel = isCreate ? "Generate" : "Save";
+      return /* @__PURE__ */ React4.createElement(Dialog2, { open, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React4.createElement(DialogTitle2, null, dialogTitle), /* @__PURE__ */ React4.createElement(DialogContent2, null, newKeyValue ? /* @__PURE__ */ React4.createElement(Box4, null, /* @__PURE__ */ React4.createElement(Typography4, { variant: "body2", color: "text.secondary", gutterBottom: true }, "Copy this key now. You won't be able to see it again."), /* @__PURE__ */ React4.createElement(
         Box4,
         {
           display: "flex",
@@ -1900,14 +1861,15 @@ var init_GenerateKeyDialog = __esm({
           newKeySnippets.publicEndpoint
         ),
         /* @__PURE__ */ React4.createElement(IconButton2, { size: "small", onClick: () => copyToClipboard(newKeySnippets.publicEndpoint) }, /* @__PURE__ */ React4.createElement(ContentCopy2, { fontSize: "small" }))
-      )), newKeySnippets && /* @__PURE__ */ React4.createElement(Box4, { mt: 3 }, /* @__PURE__ */ React4.createElement(Box4, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ React4.createElement(Code, { fontSize: "small", color: "action" }), /* @__PURE__ */ React4.createElement(Typography4, { variant: "subtitle2" }, "Start calling the proxy \u2014 paste and run")), /* @__PURE__ */ React4.createElement(SnippetTabs, { snippets: newKeySnippets, model: newKeyModel, onCopy: copyToClipboard }))) : /* @__PURE__ */ React4.createElement(Box4, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, generateError && /* @__PURE__ */ React4.createElement(Alert, { severity: "error", onClose: () => setGenerateError(null) }, generateError), /* @__PURE__ */ React4.createElement(
+      )), newKeySnippets && /* @__PURE__ */ React4.createElement(Box4, { mt: 3 }, /* @__PURE__ */ React4.createElement(Box4, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ React4.createElement(Code, { fontSize: "small", color: "action" }), /* @__PURE__ */ React4.createElement(Typography4, { variant: "subtitle2" }, "Start calling the proxy \u2014 paste and run")), /* @__PURE__ */ React4.createElement(SnippetTabs, { snippets: newKeySnippets, model: newKeyModel, onCopy: copyToClipboard }))) : /* @__PURE__ */ React4.createElement(Box4, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, !isCreate && /* @__PURE__ */ React4.createElement(Typography4, { variant: "body2", color: "text.secondary" }, /* @__PURE__ */ React4.createElement("code", { style: { fontFamily: "monospace", color: "inherit" } }, maskKey(editKeyId))), generateError && /* @__PURE__ */ React4.createElement(Alert, { severity: "error", onClose: () => setGenerateError(null) }, generateError), editError && /* @__PURE__ */ React4.createElement(Alert, { severity: "error", onClose: () => setEditError(null) }, editError), /* @__PURE__ */ React4.createElement(
         TextField2,
         {
           label: "Alias",
-          value: formData.alias || "",
+          value: currentAlias,
           onChange: (e) => {
-            setFormData({ ...formData, alias: e.target.value });
+            setAliasField(e.target.value);
             setGenerateError(null);
+            setEditError(null);
           },
           error: aliasError,
           color: aliasDuplicate ? "warning" : void 0,
@@ -1915,13 +1877,13 @@ var init_GenerateKeyDialog = __esm({
           required: true,
           fullWidth: true
         }
-      ), /* @__PURE__ */ React4.createElement(
+      ), !isCreate ? null : /* @__PURE__ */ React4.createElement(
         TextField2,
         {
           select: true,
           label: "Duration",
-          value: formData.duration || "30d",
-          onChange: (e) => setFormData({ ...formData, duration: e.target.value }),
+          value: generateForm.duration || "30d",
+          onChange: (e) => setFormData({ duration: e.target.value }),
           fullWidth: true
         },
         /* @__PURE__ */ React4.createElement(MenuItem, { value: "1d" }, "1 Day"),
@@ -1930,14 +1892,14 @@ var init_GenerateKeyDialog = __esm({
         /* @__PURE__ */ React4.createElement(MenuItem, { value: "90d" }, "90 Days"),
         /* @__PURE__ */ React4.createElement(MenuItem, { value: "1y" }, "1 Year")
       ), renderTeamField(), availableModels.length > 0 && /* @__PURE__ */ React4.createElement(
-        Autocomplete2,
+        Autocomplete,
         {
           multiple: true,
           options: availableModels,
           groupBy: (m) => m.mode || "other",
           getOptionLabel: (m) => m.model_name,
           value: selectedModels,
-          onChange: (_e, selected) => setFormData({ ...formData, models: selected.map((m) => m.model_name) }),
+          onChange: (_e, selected) => setFormData({ models: selected.map((m) => m.model_name) }),
           renderOption: (props, m) => /* @__PURE__ */ React4.createElement("li", { ...props }, modelOption(m)),
           renderInput: (params) => /* @__PURE__ */ React4.createElement(
             TextField2,
@@ -1959,9 +1921,9 @@ var init_GenerateKeyDialog = __esm({
               onChange: (e) => {
                 setUnlimitedBudget(e.target.checked);
                 if (e.target.checked) {
-                  setFormData({ ...formData, max_budget: null });
+                  setFormData({ max_budget: null });
                 } else {
-                  setFormData({ ...formData, max_budget: 100 });
+                  setFormData({ max_budget: editFormState.max_budget ?? generateForm.max_budget ?? 100 });
                 }
               }
             }
@@ -1974,9 +1936,9 @@ var init_GenerateKeyDialog = __esm({
           label: "Max Budget (USD)",
           type: "number",
           value: unlimitedBudget ? "" : formData.max_budget ?? "",
-          onChange: (e) => setFormData({ ...formData, max_budget: e.target.value ? Number(e.target.value) : void 0 }),
+          onChange: (e) => setFormData({ max_budget: e.target.value ? Number(e.target.value) : void 0 }),
           error: budgetInvalid,
-          helperText: budgetHelperText(budgetInvalid, budgetEstimate),
+          helperText: budgetHelperText(budgetInvalid, budgetEstimate, unlimitedBudget),
           disabled: unlimitedBudget,
           required: true,
           fullWidth: true
@@ -1987,7 +1949,7 @@ var init_GenerateKeyDialog = __esm({
           label: "TPM Limit",
           type: "number",
           value: formData.tpm_limit ?? "",
-          onChange: (e) => setFormData({ ...formData, tpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
+          onChange: (e) => setFormData({ tpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
           helperText: "Max tokens per minute this key can consume across all models. Leave blank for no limit.",
           fullWidth: true
         }
@@ -1997,19 +1959,19 @@ var init_GenerateKeyDialog = __esm({
           label: "RPM Limit",
           type: "number",
           value: formData.rpm_limit ?? "",
-          onChange: (e) => setFormData({ ...formData, rpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
+          onChange: (e) => setFormData({ rpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
           helperText: "Max requests per minute this key can make across all models. Leave blank for no limit.",
           fullWidth: true
         }
-      ))))), /* @__PURE__ */ React4.createElement(DialogActions2, null, newKeyValue ? /* @__PURE__ */ React4.createElement(Button3, { onClick: handleClose, variant: "contained", color: "success" }, "Done") : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Button3, { onClick: handleClose }, "Cancel"), /* @__PURE__ */ React4.createElement(
+      ))), renderDangerZone())), /* @__PURE__ */ React4.createElement(DialogActions2, null, newKeyValue ? /* @__PURE__ */ React4.createElement(Button3, { onClick: handleClose, variant: "contained", color: "success" }, "Done") : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Button3, { onClick: handleClose }, "Cancel"), /* @__PURE__ */ React4.createElement(
         Button3,
         {
-          onClick: handleGenerate,
+          onClick: isCreate ? handleGenerate : handleUpdate,
           variant: "contained",
           color: "primary",
-          disabled: !canGenerate
+          disabled: !canSubmit
         },
-        submitting ? /* @__PURE__ */ React4.createElement(CircularProgress2, { size: 24 }) : "Generate"
+        submitting ? /* @__PURE__ */ React4.createElement(CircularProgress2, { size: 24 }) : submitLabel
       ))));
     };
   }
@@ -2026,7 +1988,7 @@ import Button4 from "@mui/material/Button";
 import Alert2 from "@mui/material/Alert";
 import Checkbox2 from "@mui/material/Checkbox";
 import FormControlLabel2 from "@mui/material/FormControlLabel";
-import Autocomplete3 from "@mui/material/Autocomplete";
+import Autocomplete2 from "@mui/material/Autocomplete";
 import CircularProgress3 from "@mui/material/CircularProgress";
 import MenuItem2 from "@mui/material/MenuItem";
 import Box5 from "@mui/material/Box";
@@ -2295,7 +2257,7 @@ var init_ManageTeamDialog = __esm({
           fullWidth: true
         }
       ), /* @__PURE__ */ React5.createElement(
-        Autocomplete3,
+        Autocomplete2,
         {
           multiple: true,
           options: modelNames,
@@ -2368,7 +2330,7 @@ var init_ManageTeamDialog = __esm({
         },
         /* @__PURE__ */ React5.createElement(DeleteIcon, { fontSize: "small" })
       ))))))), /* @__PURE__ */ React5.createElement(Box5, { sx: { display: "flex", gap: 1, alignItems: "flex-start", flexWrap: "wrap" } }, /* @__PURE__ */ React5.createElement(
-        Autocomplete3,
+        Autocomplete2,
         {
           freeSolo: true,
           autoHighlight: true,
@@ -2427,7 +2389,7 @@ var init_ManageTeamDialog = __esm({
         },
         "Add"
       ))), showKnowledgeBases && /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Divider2, { sx: { my: 1 } }), /* @__PURE__ */ React5.createElement(Typography5, { variant: "subtitle2", sx: { mb: 1 } }, "Knowledge Bases"), /* @__PURE__ */ React5.createElement(Typography5, { variant: "body2", color: "text.secondary", sx: { mb: 1 } }, "Attaching a knowledge base exposes its documents to every key in this team."), kbError && /* @__PURE__ */ React5.createElement(Alert2, { severity: "error", sx: { mb: 1 }, onClose: () => setKbError(null) }, kbError), /* @__PURE__ */ React5.createElement(
-        Autocomplete3,
+        Autocomplete2,
         {
           multiple: true,
           options: kbOptions,
@@ -2446,7 +2408,7 @@ var init_ManageTeamDialog = __esm({
         },
         kbBusy ? "Saving\u2026" : "Save knowledge bases"
       ))), showMcpServers && /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Divider2, { sx: { my: 1 } }), /* @__PURE__ */ React5.createElement(Typography5, { variant: "subtitle2", sx: { mb: 1 } }, "MCP Servers"), /* @__PURE__ */ React5.createElement(Typography5, { variant: "body2", color: "text.secondary", sx: { mb: 1 } }, "Attaching an MCP server lets every key in this team invoke that server's tools through the model \u2014 including any side effects those tools have."), mcpError && /* @__PURE__ */ React5.createElement(Alert2, { severity: "error", sx: { mb: 1 }, onClose: () => setMcpError(null) }, mcpError), /* @__PURE__ */ React5.createElement(
-        Autocomplete3,
+        Autocomplete2,
         {
           multiple: true,
           options: mcpOptions,
@@ -4121,7 +4083,7 @@ var init_LiteLLMPage = __esm({
     "use strict";
     init_DashboardHeader();
     init_KeysTable();
-    init_GenerateKeyDialog();
+    init_KeyFormDialog();
     init_ManageTeamDialog();
     init_UsageStats();
     init_LiteLLMBudgetWidget();
@@ -4179,6 +4141,8 @@ var init_LiteLLMPage = __esm({
       );
       const [snackbar, setSnackbar] = useState9(null);
       const [manageTeam, setManageTeam] = useState9(null);
+      const [keyToEdit, setKeyToEdit] = useState9(null);
+      const keyFormOpen = generateDialogOpen || !!keyToEdit;
       const [teamUsageCache, setTeamUsageCache] = useState9({});
       const [teamUsageLoading, setTeamUsageLoading] = useState9({});
       const { value: userInfo, loading: userLoading, error: userError } = useAsync3(
@@ -4422,13 +4386,11 @@ var init_LiteLLMPage = __esm({
         KeysTable,
         {
           keys: keys ?? [],
-          models: allowedModels,
           loading: keysLoading || modelsLoading,
           onGenerateKeyClick: () => setGenerateDialogOpen(true),
-          onUpdateKey: handleUpdateKey,
+          onEditKey: setKeyToEdit,
           onBlockKey: handleBlockKey,
           onUnblockKey: handleUnblockKey,
-          onResetKeySpend: handleResetKeySpend,
           onDeleteKey: handleDeleteKey,
           onPruneExpiredKeys: handlePruneExpiredKeys
         }
@@ -4461,16 +4423,23 @@ var init_LiteLLMPage = __esm({
           loading: modelsLoading
         }
       ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ React12.createElement(AuditLog, { api }), /* @__PURE__ */ React12.createElement(
-        GenerateKeyDialog,
+        KeyFormDialog,
         {
-          open: generateDialogOpen,
-          onClose: () => setGenerateDialogOpen(false),
+          open: keyFormOpen,
+          onClose: () => {
+            setGenerateDialogOpen(false);
+            setKeyToEdit(null);
+          },
+          mode: keyToEdit ? "edit" : "create",
+          keyToEdit,
           keys: keys ?? [],
           models: allowedModels,
           teams: teams ?? [],
           username: userInfo.user_id,
           keyGenerationSettings: liteLlmConfig?.keyGeneration,
-          onGenerateKey: handleGenerateKey,
+          onCreateKey: handleGenerateKey,
+          onUpdateKey: handleUpdateKey,
+          onResetKeySpend: handleResetKeySpend,
           onGetConfig: () => api.getConfig()
         }
       ), /* @__PURE__ */ React12.createElement(
@@ -4992,13 +4961,37 @@ var LiteLLMBudgetGauges = ({
 };
 
 // src/index.ts
-init_GenerateKeyDialog();
+init_KeyFormDialog();
+
+// src/components/GenerateKeyDialog.tsx
+init_KeyFormDialog();
+import React16 from "react";
+var GenerateKeyDialog = (props) => /* @__PURE__ */ React16.createElement(
+  KeyFormDialog,
+  {
+    open: props.open,
+    onClose: props.onClose,
+    mode: "create",
+    keys: props.keys,
+    models: props.models,
+    teams: props.teams,
+    username: props.username,
+    keyGenerationSettings: props.keyGenerationSettings,
+    onCreateKey: props.onGenerateKey,
+    onUpdateKey: async () => {
+    },
+    onGetConfig: props.onGetConfig
+  }
+);
+
+// src/index.ts
 init_ManageTeamDialog();
 init_api();
 init_permissions();
 export {
   DashboardHeader,
   GenerateKeyDialog,
+  KeyFormDialog,
   KeysTable,
   LiteLLMBudgetGauges,
   LiteLLMBudgetWidget,