@acarmisc/backstage-plugin-litellm 0.25.0 → 0.26.0

package/dist/index.cjs.js

@@ -1051,26 +1051,6 @@ function BudgetCell({ spend, maxBudget }) {
   const pct = Math.min(100, spend / maxBudget * 100);
   return /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { minWidth: 104 }, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums", mb: 0.5 } }, "$", spend.toFixed(2), /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { component: "span", variant: "caption", color: "text.secondary", sx: { ml: 0.5 } }, "/ $", maxBudget)), /* @__PURE__ */ import_react3.default.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":
@@ -1089,7 +1069,7 @@ function compareKeys(a, b, sortKey) {
       return 0;
   }
 }
-var import_react3, import_Table, import_TableBody, import_TableCell, import_TableContainer, import_TableHead, import_TableRow, import_TableSortLabel, import_Button2, import_IconButton, import_Box3, import_Typography3, import_Dialog, import_DialogTitle, import_DialogContent, import_DialogActions, import_TextField, import_CircularProgress, import_Autocomplete, import_Skeleton2, import_InputAdornment, import_styles3, import_icons_material2, maskKey, shortKeyId, formatDate, keyToEditForm, KeysTable;
+var import_react3, import_Table, import_TableBody, import_TableCell, import_TableContainer, import_TableHead, import_TableRow, import_TableSortLabel, import_Button2, import_IconButton, import_Box3, import_Typography3, import_Dialog, import_DialogTitle, import_DialogContent, import_DialogActions, import_TextField, import_CircularProgress, import_Skeleton2, import_InputAdornment, import_styles3, import_icons_material2, shortKeyId, formatDate, KeysTable;
 var init_KeysTable = __esm({
   "src/components/KeysTable.tsx"() {
     "use strict";
@@ -1111,17 +1091,12 @@ var init_KeysTable = __esm({
     import_DialogActions = __toESM(require("@mui/material/DialogActions"));
     import_TextField = __toESM(require("@mui/material/TextField"));
     import_CircularProgress = __toESM(require("@mui/material/CircularProgress"));
-    import_Autocomplete = __toESM(require("@mui/material/Autocomplete"));
     import_Skeleton2 = __toESM(require("@mui/material/Skeleton"));
     import_InputAdornment = __toESM(require("@mui/material/InputAdornment"));
     import_styles3 = require("@mui/material/styles");
     import_icons_material2 = require("@mui/icons-material");
     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;
@@ -1134,33 +1109,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] = (0, import_react3.useState)(null);
-      const [editForm, setEditForm] = (0, import_react3.useState)({});
-      const [editSubmitting, setEditSubmitting] = (0, import_react3.useState)(false);
       const [blockingKeyId, setBlockingKeyId] = (0, import_react3.useState)(null);
       const [deleteConfirmId, setDeleteConfirmId] = (0, import_react3.useState)(null);
       const [deleteSubmitting, setDeleteSubmitting] = (0, import_react3.useState)(false);
-      const [resetSpendConfirm, setResetSpendConfirm] = (0, import_react3.useState)(false);
-      const [resetSpendSubmitting, setResetSpendSubmitting] = (0, import_react3.useState)(false);
       const [filterText, setFilterText] = (0, import_react3.useState)("");
       const [sortKey, setSortKey] = (0, import_react3.useState)("created");
       const [sortDirection, setSortDirection] = (0, import_react3.useState)("desc");
@@ -1185,27 +1146,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;
@@ -1220,17 +1162,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);
@@ -1261,12 +1192,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__ */ import_react3.default.createElement(import_Box3.default, null, /* @__PURE__ */ import_react3.default.createElement("span", null, m.model_name), m.supports_function_calling && " \u{1F527}", m.supports_vision && " \u{1F441}\uFE0F", ctx && /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, ctx), (inCost || outCost) && /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, inCost, " in \xB7 ", outCost, " out"));
-      };
       const renderTableBody = () => {
         if (loading) {
           return /* @__PURE__ */ import_react3.default.createElement(import_TableRow.default, null, /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { colSpan: 8, sx: { py: 2 } }, /* @__PURE__ */ import_react3.default.createElement(import_Skeleton2.default, { variant: "rounded", height: 140 })));
@@ -1438,75 +1363,7 @@ var init_KeysTable = __esm({
           ))
         },
         /* @__PURE__ */ import_react3.default.createElement(import_TableContainer.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Table.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react3.default.createElement(import_TableHead.default, null, /* @__PURE__ */ import_react3.default.createElement(import_TableRow.default, null, /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { sortDirection: sortKey === "alias" ? sortDirection : false }, /* @__PURE__ */ import_react3.default.createElement(import_TableSortLabel.default, { active: sortKey === "alias", direction: sortKey === "alias" ? sortDirection : "asc", onClick: () => handleSort("alias") }, "Alias")), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "Key ID"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { sortDirection: sortKey === "created" ? sortDirection : false }, /* @__PURE__ */ import_react3.default.createElement(import_TableSortLabel.default, { active: sortKey === "created", direction: sortKey === "created" ? sortDirection : "asc", onClick: () => handleSort("created") }, "Created")), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { sortDirection: sortKey === "expires" ? sortDirection : false }, /* @__PURE__ */ import_react3.default.createElement(import_TableSortLabel.default, { active: sortKey === "expires", direction: sortKey === "expires" ? sortDirection : "asc", onClick: () => handleSort("expires") }, "Expires")), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { sortDirection: sortKey === "budget" ? sortDirection : false }, /* @__PURE__ */ import_react3.default.createElement(import_TableSortLabel.default, { active: sortKey === "budget", direction: sortKey === "budget" ? sortDirection : "asc", onClick: () => handleSort("budget") }, "Budget")), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { sortDirection: sortKey === "limits" ? sortDirection : false }, /* @__PURE__ */ import_react3.default.createElement(import_TableSortLabel.default, { active: sortKey === "limits", direction: sortKey === "limits" ? sortDirection : "asc", onClick: () => handleSort("limits") }, "TPM / RPM")), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { sortDirection: sortKey === "models" ? sortDirection : false }, /* @__PURE__ */ import_react3.default.createElement(import_TableSortLabel.default, { active: sortKey === "models", direction: sortKey === "models" ? sortDirection : "asc", onClick: () => handleSort("models") }, "Models")), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { align: "right" }, "Actions"))), /* @__PURE__ */ import_react3.default.createElement(import_TableBody.default, null, renderTableBody())))
-      ), /* @__PURE__ */ import_react3.default.createElement(import_Dialog.default, { open: !!editingKey, onClose: handleCloseEdit, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ import_react3.default.createElement(import_DialogTitle.default, null, "Edit Key"), /* @__PURE__ */ import_react3.default.createElement(import_DialogContent.default, null, editingKey && /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", color: "text.secondary" }, /* @__PURE__ */ import_react3.default.createElement("code", { style: { fontFamily: "monospace", color: "inherit" } }, maskKey(editingKey.key))), /* @__PURE__ */ import_react3.default.createElement(
-        import_TextField.default,
-        {
-          label: "Alias",
-          value: editForm.key_alias || "",
-          onChange: (e) => setEditForm({ ...editForm, key_alias: e.target.value }),
-          fullWidth: true
-        }
-      ), models.length > 0 && /* @__PURE__ */ import_react3.default.createElement(
-        import_Autocomplete.default,
-        {
-          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__ */ import_react3.default.createElement("li", { ...props }, modelOption(m)),
-          renderInput: (params) => /* @__PURE__ */ import_react3.default.createElement(import_TextField.default, { ...params, label: "Models", fullWidth: true })
-        }
-      ), /* @__PURE__ */ import_react3.default.createElement(
-        import_TextField.default,
-        {
-          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__ */ import_react3.default.createElement(
-        import_TextField.default,
-        {
-          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__ */ import_react3.default.createElement(
-        import_TextField.default,
-        {
-          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__ */ import_react3.default.createElement(import_Box3.default, { mt: 1, pt: 2, borderTop: "1px solid", sx: { borderColor: "divider" } }, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "caption", color: "text.secondary", display: "block", mb: 1 }, "Danger Zone"), !resetSpendConfirm ? /* @__PURE__ */ import_react3.default.createElement(
-        import_Button2.default,
-        {
-          size: "small",
-          color: "warning",
-          variant: "outlined",
-          onClick: () => setResetSpendConfirm(true)
-        },
-        "Reset Spend to $0"
-      ) : /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", color: "warning.main" }, "Zero out spend counter?"), /* @__PURE__ */ import_react3.default.createElement(
-        import_Button2.default,
-        {
-          size: "small",
-          color: "warning",
-          variant: "contained",
-          disabled: resetSpendSubmitting,
-          onClick: handleResetSpend
-        },
-        resetSpendSubmitting ? /* @__PURE__ */ import_react3.default.createElement(import_CircularProgress.default, { size: 16 }) : "Confirm"
-      ), /* @__PURE__ */ import_react3.default.createElement(import_Button2.default, { size: "small", onClick: () => setResetSpendConfirm(false) }, "Cancel"))))), /* @__PURE__ */ import_react3.default.createElement(import_DialogActions.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Button2.default, { onClick: handleCloseEdit }, "Cancel"), /* @__PURE__ */ import_react3.default.createElement(import_Button2.default, { onClick: handleUpdate, variant: "contained", color: "primary", disabled: editSubmitting }, editSubmitting ? /* @__PURE__ */ import_react3.default.createElement(import_CircularProgress.default, { size: 24 }) : "Save"))), /* @__PURE__ */ import_react3.default.createElement(import_Dialog.default, { open: !!deleteConfirmId, onClose: () => setDeleteConfirmId(null), maxWidth: "xs", fullWidth: true }, /* @__PURE__ */ import_react3.default.createElement(import_DialogTitle.default, null, "Revoke Key?"), /* @__PURE__ */ import_react3.default.createElement(import_DialogContent.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, null, "This will permanently revoke the key. Any integrations using it will stop working immediately.")), /* @__PURE__ */ import_react3.default.createElement(import_DialogActions.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Button2.default, { onClick: () => setDeleteConfirmId(null), disabled: deleteSubmitting }, "Cancel"), /* @__PURE__ */ import_react3.default.createElement(
+      ), /* @__PURE__ */ import_react3.default.createElement(import_Dialog.default, { open: !!deleteConfirmId, onClose: () => setDeleteConfirmId(null), maxWidth: "xs", fullWidth: true }, /* @__PURE__ */ import_react3.default.createElement(import_DialogTitle.default, null, "Revoke Key?"), /* @__PURE__ */ import_react3.default.createElement(import_DialogContent.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, null, "This will permanently revoke the key. Any integrations using it will stop working immediately.")), /* @__PURE__ */ import_react3.default.createElement(import_DialogActions.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Button2.default, { onClick: () => setDeleteConfirmId(null), disabled: deleteSubmitting }, "Cancel"), /* @__PURE__ */ import_react3.default.createElement(
         import_Button2.default,
         {
           onClick: handleConfirmDelete,
@@ -1543,7 +1400,7 @@ var init_format = __esm({
   }
 });
 
-// src/components/GenerateKeyDialog.tsx
+// src/components/KeyFormDialog.tsx
 function trimSlash(url) {
   return url.replace(/\/+$/, "");
 }
@@ -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 import_react4, import_Box4, import_Typography4, import_Dialog2, import_DialogTitle2, import_DialogContent2, import_DialogActions2, import_TextField2, import_MenuItem, import_Button3, import_IconButton2, import_CircularProgress2, import_Autocomplete2, import_Checkbox, import_FormControlLabel, import_Alert, import_Accordion, import_AccordionSummary, import_AccordionDetails, import_Tabs, import_Tab, import_icons_material3, generateDefaultAlias, emptyForm, ALL_PROXY_MODELS, SNIPPET_FILE_HINTS, SnippetTabs, GenerateKeyDialog;
-var init_GenerateKeyDialog = __esm({
-  "src/components/GenerateKeyDialog.tsx"() {
+var import_react4, import_Box4, import_Typography4, import_Dialog2, import_DialogTitle2, import_DialogContent2, import_DialogActions2, import_TextField2, import_MenuItem, import_Button3, import_IconButton2, import_CircularProgress2, import_Autocomplete, import_Checkbox, import_FormControlLabel, import_Alert, import_Accordion, import_AccordionSummary, import_AccordionDetails, import_Tabs, import_Tab, import_icons_material3, generateDefaultAlias, createForm, editForm, ALL_PROXY_MODELS, SNIPPET_FILE_HINTS, SnippetTabs, KeyFormDialog;
+var init_KeyFormDialog = __esm({
+  "src/components/KeyFormDialog.tsx"() {
     "use strict";
     import_react4 = __toESM(require("react"));
     import_Box4 = __toESM(require("@mui/material/Box"));
@@ -1677,7 +1534,7 @@ var init_GenerateKeyDialog = __esm({
     import_Button3 = __toESM(require("@mui/material/Button"));
     import_IconButton2 = __toESM(require("@mui/material/IconButton"));
     import_CircularProgress2 = __toESM(require("@mui/material/CircularProgress"));
-    import_Autocomplete2 = __toESM(require("@mui/material/Autocomplete"));
+    import_Autocomplete = __toESM(require("@mui/material/Autocomplete"));
     import_Checkbox = __toESM(require("@mui/material/Checkbox"));
     import_FormControlLabel = __toESM(require("@mui/material/FormControlLabel"));
     import_Alert = __toESM(require("@mui/material/Alert"));
@@ -1693,8 +1550,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,
@@ -1703,6 +1560,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",
@@ -1749,46 +1613,79 @@ var init_GenerateKeyDialog = __esm({
         model && /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { 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] = (0, import_react4.useState)(emptyForm());
+      const isCreate = mode === "create";
+      const [generateForm, setGenerateForm] = (0, import_react4.useState)(createForm(username));
+      const [editFormState, setEditFormState] = (0, import_react4.useState)({});
       const [unlimitedBudget, setUnlimitedBudget] = (0, import_react4.useState)(false);
       const [submitting, setSubmitting] = (0, import_react4.useState)(false);
       const [newKeyValue, setNewKeyValue] = (0, import_react4.useState)(null);
       const [newKeySnippets, setNewKeySnippets] = (0, import_react4.useState)(null);
       const [newKeyModel, setNewKeyModel] = (0, import_react4.useState)("");
       const [generateError, setGenerateError] = (0, import_react4.useState)(null);
+      const [editError, setEditError] = (0, import_react4.useState)(null);
+      const [resetSpendConfirm, setResetSpendConfirm] = (0, import_react4.useState)(false);
+      const [resetSpendSubmitting, setResetSpendSubmitting] = (0, import_react4.useState)(false);
       (0, import_react4.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 = (0, import_react4.useMemo)(() => {
         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 = (0, import_react4.useMemo)(() => {
         if (unlimitedBudget || budgetInvalid) return null;
         const inputCosts = selectedModels.map((m) => m.input_cost_per_token).filter((c) => typeof c === "number" && c > 0);
@@ -1801,11 +1698,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);
@@ -1814,7 +1711,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");
@@ -1822,27 +1719,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__ */ import_react4.default.createElement(import_Box4.default, null, /* @__PURE__ */ import_react4.default.createElement("span", null, m.model_name), m.supports_function_calling && " \u{1F527}", m.supports_vision && " \u{1F441}\uFE0F", ctx && /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, ctx), (inCost || outCost) && /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, inCost, " in \xB7 ", outCost, " out"));
       };
       const renderTeamField = () => {
         if (teams.length > 0) {
           return /* @__PURE__ */ import_react4.default.createElement(
-            import_Autocomplete2.default,
+            import_Autocomplete.default,
             {
               options: teams,
               getOptionLabel: (t) => t.team_alias || t.team_id,
@@ -1852,28 +1780,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__ */ import_react4.default.createElement(
                 import_TextField2.default,
                 {
                   ...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__ */ import_react4.default.createElement(import_Typography4.default, { 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__ */ import_react4.default.createElement(import_Dialog2.default, { open, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ import_react4.default.createElement(import_DialogTitle2.default, null, newKeyValue ? "Key Generated" : "Generate New Key"), /* @__PURE__ */ import_react4.default.createElement(import_DialogContent2.default, null, newKeyValue ? /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, null, /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "body2", color: "text.secondary", gutterBottom: true }, "Copy this key now. You won't be able to see it again."), /* @__PURE__ */ import_react4.default.createElement(
+      const editKeyId = keyToEdit?.token ?? keyToEdit?.key ?? "";
+      const renderDangerZone = () => {
+        if (isCreate || !onResetKeySpend) return null;
+        return /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, { mt: 1, pt: 2, borderTop: "1px solid", sx: { borderColor: "divider" } }, /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "caption", color: "text.secondary", display: "block", mb: 1 }, "Danger Zone"), !resetSpendConfirm ? /* @__PURE__ */ import_react4.default.createElement(
+          import_Button3.default,
+          {
+            size: "small",
+            color: "warning",
+            variant: "outlined",
+            onClick: () => setResetSpendConfirm(true)
+          },
+          "Reset Spend to $0"
+        ) : /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "body2", color: "warning.main" }, "Zero out spend counter?"), /* @__PURE__ */ import_react4.default.createElement(
+          import_Button3.default,
+          {
+            size: "small",
+            color: "warning",
+            variant: "contained",
+            disabled: resetSpendSubmitting,
+            onClick: handleResetSpend
+          },
+          resetSpendSubmitting ? /* @__PURE__ */ import_react4.default.createElement(import_CircularProgress2.default, { size: 16 }) : "Confirm"
+        ), /* @__PURE__ */ import_react4.default.createElement(import_Button3.default, { 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__ */ import_react4.default.createElement(import_Dialog2.default, { open, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ import_react4.default.createElement(import_DialogTitle2.default, null, dialogTitle), /* @__PURE__ */ import_react4.default.createElement(import_DialogContent2.default, null, newKeyValue ? /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, null, /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "body2", color: "text.secondary", gutterBottom: true }, "Copy this key now. You won't be able to see it again."), /* @__PURE__ */ import_react4.default.createElement(
         import_Box4.default,
         {
           display: "flex",
@@ -1922,14 +1883,15 @@ var init_GenerateKeyDialog = __esm({
           newKeySnippets.publicEndpoint
         ),
         /* @__PURE__ */ import_react4.default.createElement(import_IconButton2.default, { size: "small", onClick: () => copyToClipboard(newKeySnippets.publicEndpoint) }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material3.ContentCopy, { fontSize: "small" }))
-      )), newKeySnippets && /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, { mt: 3 }, /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material3.Code, { fontSize: "small", color: "action" }), /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "subtitle2" }, "Start calling the proxy \u2014 paste and run")), /* @__PURE__ */ import_react4.default.createElement(SnippetTabs, { snippets: newKeySnippets, model: newKeyModel, onCopy: copyToClipboard }))) : /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, generateError && /* @__PURE__ */ import_react4.default.createElement(import_Alert.default, { severity: "error", onClose: () => setGenerateError(null) }, generateError), /* @__PURE__ */ import_react4.default.createElement(
+      )), newKeySnippets && /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, { mt: 3 }, /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material3.Code, { fontSize: "small", color: "action" }), /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "subtitle2" }, "Start calling the proxy \u2014 paste and run")), /* @__PURE__ */ import_react4.default.createElement(SnippetTabs, { snippets: newKeySnippets, model: newKeyModel, onCopy: copyToClipboard }))) : /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, !isCreate && /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "body2", color: "text.secondary" }, /* @__PURE__ */ import_react4.default.createElement("code", { style: { fontFamily: "monospace", color: "inherit" } }, maskKey(editKeyId))), generateError && /* @__PURE__ */ import_react4.default.createElement(import_Alert.default, { severity: "error", onClose: () => setGenerateError(null) }, generateError), editError && /* @__PURE__ */ import_react4.default.createElement(import_Alert.default, { severity: "error", onClose: () => setEditError(null) }, editError), /* @__PURE__ */ import_react4.default.createElement(
         import_TextField2.default,
         {
           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,
@@ -1937,13 +1899,13 @@ var init_GenerateKeyDialog = __esm({
           required: true,
           fullWidth: true
         }
-      ), /* @__PURE__ */ import_react4.default.createElement(
+      ), !isCreate ? null : /* @__PURE__ */ import_react4.default.createElement(
         import_TextField2.default,
         {
           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__ */ import_react4.default.createElement(import_MenuItem.default, { value: "1d" }, "1 Day"),
@@ -1952,14 +1914,14 @@ var init_GenerateKeyDialog = __esm({
         /* @__PURE__ */ import_react4.default.createElement(import_MenuItem.default, { value: "90d" }, "90 Days"),
         /* @__PURE__ */ import_react4.default.createElement(import_MenuItem.default, { value: "1y" }, "1 Year")
       ), renderTeamField(), availableModels.length > 0 && /* @__PURE__ */ import_react4.default.createElement(
-        import_Autocomplete2.default,
+        import_Autocomplete.default,
         {
           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__ */ import_react4.default.createElement("li", { ...props }, modelOption(m)),
           renderInput: (params) => /* @__PURE__ */ import_react4.default.createElement(
             import_TextField2.default,
@@ -1981,9 +1943,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 });
                 }
               }
             }
@@ -1996,9 +1958,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
@@ -2009,7 +1971,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
         }
@@ -2019,26 +1981,26 @@ 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__ */ import_react4.default.createElement(import_DialogActions2.default, null, newKeyValue ? /* @__PURE__ */ import_react4.default.createElement(import_Button3.default, { onClick: handleClose, variant: "contained", color: "success" }, "Done") : /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_Button3.default, { onClick: handleClose }, "Cancel"), /* @__PURE__ */ import_react4.default.createElement(
+      ))), renderDangerZone())), /* @__PURE__ */ import_react4.default.createElement(import_DialogActions2.default, null, newKeyValue ? /* @__PURE__ */ import_react4.default.createElement(import_Button3.default, { onClick: handleClose, variant: "contained", color: "success" }, "Done") : /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_Button3.default, { onClick: handleClose }, "Cancel"), /* @__PURE__ */ import_react4.default.createElement(
         import_Button3.default,
         {
-          onClick: handleGenerate,
+          onClick: isCreate ? handleGenerate : handleUpdate,
           variant: "contained",
           color: "primary",
-          disabled: !canGenerate
+          disabled: !canSubmit
         },
-        submitting ? /* @__PURE__ */ import_react4.default.createElement(import_CircularProgress2.default, { size: 24 }) : "Generate"
+        submitting ? /* @__PURE__ */ import_react4.default.createElement(import_CircularProgress2.default, { size: 24 }) : submitLabel
       ))));
     };
   }
 });
 
 // src/components/ManageTeamDialog.tsx
-var import_react5, import_Dialog3, import_DialogTitle3, import_DialogContent3, import_DialogActions3, import_TextField3, import_Button4, import_Alert2, import_Checkbox2, import_FormControlLabel2, import_Autocomplete3, import_CircularProgress3, import_MenuItem2, import_Box5, import_Divider2, import_Typography5, import_IconButton3, import_Paper3, import_Table2, import_TableBody2, import_TableCell2, import_TableContainer2, import_TableHead2, import_TableRow2, import_icons_material4, import_core_plugin_api2, import_plugin_catalog_react, import_catalog_model, import_react_use, BUDGET_DURATION_OPTIONS, DEFAULT_BUDGET_DURATION, FALLBACK_BUDGET_CEILING, ManageTeamDialog;
+var import_react5, import_Dialog3, import_DialogTitle3, import_DialogContent3, import_DialogActions3, import_TextField3, import_Button4, import_Alert2, import_Checkbox2, import_FormControlLabel2, import_Autocomplete2, import_CircularProgress3, import_MenuItem2, import_Box5, import_Divider2, import_Typography5, import_IconButton3, import_Paper3, import_Table2, import_TableBody2, import_TableCell2, import_TableContainer2, import_TableHead2, import_TableRow2, import_icons_material4, import_core_plugin_api2, import_plugin_catalog_react, import_catalog_model, import_react_use, BUDGET_DURATION_OPTIONS, DEFAULT_BUDGET_DURATION, FALLBACK_BUDGET_CEILING, ManageTeamDialog;
 var init_ManageTeamDialog = __esm({
   "src/components/ManageTeamDialog.tsx"() {
     "use strict";
@@ -2052,7 +2014,7 @@ var init_ManageTeamDialog = __esm({
     import_Alert2 = __toESM(require("@mui/material/Alert"));
     import_Checkbox2 = __toESM(require("@mui/material/Checkbox"));
     import_FormControlLabel2 = __toESM(require("@mui/material/FormControlLabel"));
-    import_Autocomplete3 = __toESM(require("@mui/material/Autocomplete"));
+    import_Autocomplete2 = __toESM(require("@mui/material/Autocomplete"));
     import_CircularProgress3 = __toESM(require("@mui/material/CircularProgress"));
     import_MenuItem2 = __toESM(require("@mui/material/MenuItem"));
     import_Box5 = __toESM(require("@mui/material/Box"));
@@ -2317,7 +2279,7 @@ var init_ManageTeamDialog = __esm({
           fullWidth: true
         }
       ), /* @__PURE__ */ import_react5.default.createElement(
-        import_Autocomplete3.default,
+        import_Autocomplete2.default,
         {
           multiple: true,
           options: modelNames,
@@ -2390,7 +2352,7 @@ var init_ManageTeamDialog = __esm({
         },
         /* @__PURE__ */ import_react5.default.createElement(import_icons_material4.Delete, { fontSize: "small" })
       ))))))), /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, { sx: { display: "flex", gap: 1, alignItems: "flex-start", flexWrap: "wrap" } }, /* @__PURE__ */ import_react5.default.createElement(
-        import_Autocomplete3.default,
+        import_Autocomplete2.default,
         {
           freeSolo: true,
           autoHighlight: true,
@@ -2449,7 +2411,7 @@ var init_ManageTeamDialog = __esm({
         },
         "Add"
       ))), showKnowledgeBases && /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, null, /* @__PURE__ */ import_react5.default.createElement(import_Divider2.default, { sx: { my: 1 } }), /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "subtitle2", sx: { mb: 1 } }, "Knowledge Bases"), /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "body2", color: "text.secondary", sx: { mb: 1 } }, "Attaching a knowledge base exposes its documents to every key in this team."), kbError && /* @__PURE__ */ import_react5.default.createElement(import_Alert2.default, { severity: "error", sx: { mb: 1 }, onClose: () => setKbError(null) }, kbError), /* @__PURE__ */ import_react5.default.createElement(
-        import_Autocomplete3.default,
+        import_Autocomplete2.default,
         {
           multiple: true,
           options: kbOptions,
@@ -2468,7 +2430,7 @@ var init_ManageTeamDialog = __esm({
         },
         kbBusy ? "Saving\u2026" : "Save knowledge bases"
       ))), showMcpServers && /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, null, /* @__PURE__ */ import_react5.default.createElement(import_Divider2.default, { sx: { my: 1 } }), /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "subtitle2", sx: { mb: 1 } }, "MCP Servers"), /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { 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__ */ import_react5.default.createElement(import_Alert2.default, { severity: "error", sx: { mb: 1 }, onClose: () => setMcpError(null) }, mcpError), /* @__PURE__ */ import_react5.default.createElement(
-        import_Autocomplete3.default,
+        import_Autocomplete2.default,
         {
           multiple: true,
           options: mcpOptions,
@@ -4120,7 +4082,7 @@ var init_LiteLLMPage = __esm({
     import_plugin_permission_react = require("@backstage/plugin-permission-react");
     init_DashboardHeader();
     init_KeysTable();
-    init_GenerateKeyDialog();
+    init_KeyFormDialog();
     init_ManageTeamDialog();
     init_UsageStats();
     init_LiteLLMBudgetWidget();
@@ -4178,6 +4140,8 @@ var init_LiteLLMPage = __esm({
       );
       const [snackbar, setSnackbar] = (0, import_react12.useState)(null);
       const [manageTeam, setManageTeam] = (0, import_react12.useState)(null);
+      const [keyToEdit, setKeyToEdit] = (0, import_react12.useState)(null);
+      const keyFormOpen = generateDialogOpen || !!keyToEdit;
       const [teamUsageCache, setTeamUsageCache] = (0, import_react12.useState)({});
       const [teamUsageLoading, setTeamUsageLoading] = (0, import_react12.useState)({});
       const { value: userInfo, loading: userLoading, error: userError } = (0, import_react_use3.useAsync)(
@@ -4421,13 +4385,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
         }
@@ -4460,16 +4422,23 @@ var init_LiteLLMPage = __esm({
           loading: modelsLoading
         }
       ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ import_react12.default.createElement(AuditLog, { api }), /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement(
@@ -4553,6 +4522,7 @@ var index_exports = {};
 __export(index_exports, {
   DashboardHeader: () => DashboardHeader,
   GenerateKeyDialog: () => GenerateKeyDialog,
+  KeyFormDialog: () => KeyFormDialog,
   KeysTable: () => KeysTable,
   LiteLLMBudgetGauges: () => LiteLLMBudgetGauges,
   LiteLLMBudgetWidget: () => LiteLLMBudgetWidget,
@@ -5010,7 +4980,30 @@ var LiteLLMBudgetGauges = ({
 };
 
 // src/index.ts
-init_GenerateKeyDialog();
+init_KeyFormDialog();
+
+// src/components/GenerateKeyDialog.tsx
+var import_react16 = __toESM(require("react"));
+init_KeyFormDialog();
+var GenerateKeyDialog = (props) => /* @__PURE__ */ import_react16.default.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();