@acarmisc/backstage-plugin-litellm 0.24.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,
@@ -2931,6 +2893,13 @@ function buildBudgetSummary(user, teams, keys, maxKeys = 3) {
     teams: teamLimits
   };
 }
+function allBudgetLimits(summary) {
+  return [
+    ...summary.keys,
+    ...summary.user ? [summary.user] : [],
+    ...summary.teams
+  ];
+}
 function buildBudgetGauges(summary) {
   const byLevel = {
     key: summary.keys,
@@ -2981,7 +2950,7 @@ var init_budget = __esm({
   }
 });
 
-// src/components/LiteLLMBudgetWidget.tsx
+// src/components/BudgetLimitList.tsx
 function levelToneColor(tone, theme) {
   switch (tone) {
     case "success":
@@ -2996,25 +2965,125 @@ function levelToneColor(tone, theme) {
       return theme.palette.primary.main;
   }
 }
-var import_react7, import_Paper5, import_Box7, import_Typography7, import_CircularProgress4, import_Alert3, import_Collapse, import_IconButton4, import_icons_material5, import_styles4, import_core_plugin_api3, import_core_components, LevelFrame, EmptyLimitCard, LimitCard, CLOSEST_LEVEL_LABEL, KEYS_PATH, MoreKeysNote, HierarchyNote, TaggedLimit, FullBody, CompactBody, LiteLLMBudgetWidget;
-var init_LiteLLMBudgetWidget = __esm({
-  "src/components/LiteLLMBudgetWidget.tsx"() {
+var import_react7, import_Box7, import_Paper5, import_Typography7, import_styles4, import_core_components, LimitCard, TaggedLimit, MoreKeysNote, BudgetLimitList, LimitListPanel;
+var init_BudgetLimitList = __esm({
+  "src/components/BudgetLimitList.tsx"() {
     "use strict";
     import_react7 = __toESM(require("react"));
-    import_Paper5 = __toESM(require("@mui/material/Paper"));
     import_Box7 = __toESM(require("@mui/material/Box"));
+    import_Paper5 = __toESM(require("@mui/material/Paper"));
     import_Typography7 = __toESM(require("@mui/material/Typography"));
+    import_styles4 = require("@mui/material/styles");
+    import_core_components = require("@backstage/core-components");
+    init_budget();
+    init_format();
+    init_ui();
+    LimitCard = ({ limit }) => {
+      const tone = budgetTone2(limit.pct);
+      const pct = Math.round(limit.pct);
+      const closeTo = limit.softLimit !== void 0 && limit.spend >= limit.softLimit;
+      return /* @__PURE__ */ import_react7.default.createElement(import_Paper5.default, { variant: "outlined", sx: { px: 1.5, py: 1.25, borderRadius: 1.5 } }, /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 1.5 } }, /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ import_react7.default.createElement(
+        import_Typography7.default,
+        {
+          variant: "body2",
+          sx: { fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+          title: limit.sublabel ? `${limit.label} \xB7 ${limit.sublabel}` : limit.label
+        },
+        limit.label
+      ), limit.sublabel && /* @__PURE__ */ import_react7.default.createElement(
+        import_Typography7.default,
+        {
+          variant: "caption",
+          color: "text.secondary",
+          sx: {
+            fontSize: 10.5,
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+            display: "block",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }
+        },
+        limit.sublabel
+      )), limit.hidden ? /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, pct, "% used") : /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, fmtUsd(limit.spend), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { component: "span", color: "text.secondary", sx: { fontWeight: 400 } }, " / ", fmtUsd(limit.budget)))), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { mt: 1 } }, /* @__PURE__ */ import_react7.default.createElement(Meter, { value: limit.pct, tone, height: 6 })), /* @__PURE__ */ import_react7.default.createElement(
+        import_Box7.default,
+        {
+          sx: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: 1,
+            mt: 0.75
+          }
+        },
+        /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, limit.hidden ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, "Hidden by admin") : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, pct, "% of budget", closeTo && ` \xB7 soft-limit warning`)),
+        /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary" }, fmtBudgetDuration(limit.budgetDuration) ? `resets ${fmtBudgetDuration(limit.budgetDuration)}` : "never resets")
+      ));
+    };
+    TaggedLimit = ({ limit }) => {
+      const theme = (0, import_styles4.useTheme)();
+      const tone = budgetTone2(limit.pct);
+      return /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, null, /* @__PURE__ */ import_react7.default.createElement(
+        import_Typography7.default,
+        {
+          sx: {
+            fontSize: 11,
+            fontWeight: 700,
+            letterSpacing: "0.08em",
+            textTransform: "uppercase",
+            color: tone === "accent" ? theme.palette.text.secondary : levelToneColor(tone, theme),
+            mb: 0.5
+          }
+        },
+        limit.kind
+      ), /* @__PURE__ */ import_react7.default.createElement(LimitCard, { limit }));
+    };
+    MoreKeysNote = ({
+      count,
+      href,
+      label
+    }) => {
+      const text = label ?? `+${count} more budgeted key${count > 1 ? "s" : ""} further from the cap`;
+      if (!href) {
+        return /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary" }, text);
+      }
+      return /* @__PURE__ */ import_react7.default.createElement(import_core_components.Link, { to: href, variant: "caption" }, text, " \u2192");
+    };
+    BudgetLimitList = ({ limits, hiddenKeyCount = 0, keysHref }) => /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { display: "flex", flexDirection: "column", gap: 1.25 } }, limits.map((limit) => /* @__PURE__ */ import_react7.default.createElement(TaggedLimit, { key: `${limit.kind}:${limit.sublabel ?? limit.label}`, limit })), hiddenKeyCount > 0 && /* @__PURE__ */ import_react7.default.createElement(MoreKeysNote, { count: hiddenKeyCount, href: keysHref }));
+    LimitListPanel = ({ children }) => /* @__PURE__ */ import_react7.default.createElement(
+      import_Box7.default,
+      {
+        sx: (theme) => ({
+          px: 1.5,
+          py: 1.5,
+          borderRadius: 1.5,
+          bgcolor: (0, import_styles4.alpha)(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.03 : 0.02)
+        })
+      },
+      children
+    );
+  }
+});
+
+// src/components/LiteLLMBudgetWidget.tsx
+var import_react8, import_Paper6, import_Box8, import_Typography8, import_CircularProgress4, import_Alert3, import_Collapse, import_IconButton4, import_icons_material5, import_styles5, import_core_plugin_api3, LevelFrame, EmptyLimitCard, CLOSEST_LEVEL_LABEL, KEYS_PATH, HierarchyNote, FullBody, CompactBody, LiteLLMBudgetWidget;
+var init_LiteLLMBudgetWidget = __esm({
+  "src/components/LiteLLMBudgetWidget.tsx"() {
+    "use strict";
+    import_react8 = __toESM(require("react"));
+    import_Paper6 = __toESM(require("@mui/material/Paper"));
+    import_Box8 = __toESM(require("@mui/material/Box"));
+    import_Typography8 = __toESM(require("@mui/material/Typography"));
     import_CircularProgress4 = __toESM(require("@mui/material/CircularProgress"));
     import_Alert3 = __toESM(require("@mui/material/Alert"));
     import_Collapse = __toESM(require("@mui/material/Collapse"));
     import_IconButton4 = __toESM(require("@mui/material/IconButton"));
     import_icons_material5 = require("@mui/icons-material");
-    import_styles4 = require("@mui/material/styles");
+    import_styles5 = require("@mui/material/styles");
     import_core_plugin_api3 = require("@backstage/core-plugin-api");
-    import_core_components = require("@backstage/core-components");
     init_api();
-    init_format();
     init_ui();
+    init_BudgetLimitList();
     init_budget();
     LevelFrame = ({
       rank,
@@ -3024,8 +3093,8 @@ var init_LiteLLMBudgetWidget = __esm({
       tone,
       isLast,
       children
-    }) => /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { display: "flex", gap: 1.5 } }, /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { display: "flex", flexDirection: "column", alignItems: "center", width: 26, flexShrink: 0 } }, /* @__PURE__ */ import_react7.default.createElement(
-      import_Box7.default,
+    }) => /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { display: "flex", gap: 1.5 } }, /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { display: "flex", flexDirection: "column", alignItems: "center", width: 26, flexShrink: 0 } }, /* @__PURE__ */ import_react8.default.createElement(
+      import_Box8.default,
       {
         sx: (theme) => ({
           width: 26,
@@ -3034,7 +3103,7 @@ var init_LiteLLMBudgetWidget = __esm({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          bgcolor: (0, import_styles4.alpha)(levelToneColor(tone, theme), 0.14),
+          bgcolor: (0, import_styles5.alpha)(levelToneColor(tone, theme), 0.14),
           color: levelToneColor(tone, theme),
           fontSize: 12,
           fontWeight: 700,
@@ -3042,18 +3111,18 @@ var init_LiteLLMBudgetWidget = __esm({
         })
       },
       rank
-    ), /* @__PURE__ */ import_react7.default.createElement(
-      import_Box7.default,
+    ), /* @__PURE__ */ import_react8.default.createElement(
+      import_Box8.default,
       {
         sx: (theme) => ({
           flex: 1,
           width: 2,
           minHeight: 14,
-          bgcolor: isLast ? "transparent" : (0, import_styles4.alpha)(theme.palette.text.primary, 0.12)
+          bgcolor: isLast ? "transparent" : (0, import_styles5.alpha)(theme.palette.text.primary, 0.12)
         })
       }
-    )), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { flex: 1, minWidth: 0, pb: isLast ? 0 : 2 } }, /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { display: "flex", alignItems: "baseline", gap: 1, flexWrap: "wrap", mb: 0.75 } }, /* @__PURE__ */ import_react7.default.createElement(
-      import_Typography7.default,
+    )), /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { flex: 1, minWidth: 0, pb: isLast ? 0 : 2 } }, /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { display: "flex", alignItems: "baseline", gap: 1, flexWrap: "wrap", mb: 0.75 } }, /* @__PURE__ */ import_react8.default.createElement(
+      import_Typography8.default,
       {
         sx: (theme) => ({
           fontSize: 12.5,
@@ -3064,102 +3133,42 @@ var init_LiteLLMBudgetWidget = __esm({
         })
       },
       name
-    ), /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary", sx: { fontSize: 11.5 } }, tagline), note && /* @__PURE__ */ import_react7.default.createElement(StatusPill, { label: note, tone: "neutral", dot: false, sx: { ml: "auto" } })), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { display: "flex", flexDirection: "column", gap: 1 } }, children)));
-    EmptyLimitCard = ({ children }) => /* @__PURE__ */ import_react7.default.createElement(
-      import_Paper5.default,
+    ), /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary", sx: { fontSize: 11.5 } }, tagline), note && /* @__PURE__ */ import_react8.default.createElement(StatusPill, { label: note, tone: "neutral", dot: false, sx: { ml: "auto" } })), /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { display: "flex", flexDirection: "column", gap: 1 } }, children)));
+    EmptyLimitCard = ({ children }) => /* @__PURE__ */ import_react8.default.createElement(
+      import_Paper6.default,
       {
         variant: "outlined",
         sx: (theme) => ({
           px: 1.5,
           py: 1.25,
           borderRadius: 1.5,
-          bgcolor: (0, import_styles4.alpha)(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.03 : 0.015)
+          bgcolor: (0, import_styles5.alpha)(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.03 : 0.015)
         })
       },
-      /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", color: "text.secondary", sx: { fontSize: 13 } }, children)
+      /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2", color: "text.secondary", sx: { fontSize: 13 } }, children)
     );
-    LimitCard = ({ limit }) => {
-      const tone = budgetTone2(limit.pct);
-      const pct = Math.round(limit.pct);
-      const closeTo = limit.softLimit !== void 0 && limit.spend >= limit.softLimit;
-      return /* @__PURE__ */ import_react7.default.createElement(import_Paper5.default, { variant: "outlined", sx: { px: 1.5, py: 1.25, borderRadius: 1.5 } }, /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 1.5 } }, /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ import_react7.default.createElement(
-        import_Typography7.default,
-        {
-          variant: "body2",
-          sx: { fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-          title: limit.sublabel ? `${limit.label} \xB7 ${limit.sublabel}` : limit.label
-        },
-        limit.label
-      ), limit.sublabel && /* @__PURE__ */ import_react7.default.createElement(
-        import_Typography7.default,
-        {
-          variant: "caption",
-          color: "text.secondary",
-          sx: {
-            fontSize: 10.5,
-            fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-            display: "block",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap"
-          }
-        },
-        limit.sublabel
-      )), limit.hidden ? /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, pct, "% used") : /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, fmtUsd(limit.spend), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { component: "span", color: "text.secondary", sx: { fontWeight: 400 } }, " / ", fmtUsd(limit.budget)))), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { mt: 1 } }, /* @__PURE__ */ import_react7.default.createElement(Meter, { value: limit.pct, tone, height: 6 })), /* @__PURE__ */ import_react7.default.createElement(
-        import_Box7.default,
-        {
-          sx: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            gap: 1,
-            mt: 0.75
-          }
-        },
-        /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, limit.hidden ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, "Hidden by admin") : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, pct, "% of budget", closeTo && ` \xB7 soft-limit warning`)),
-        /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary" }, fmtBudgetDuration(limit.budgetDuration) ? `resets ${fmtBudgetDuration(limit.budgetDuration)}` : "never resets")
-      ));
-    };
     CLOSEST_LEVEL_LABEL = {
       key: "key",
       user: "personal",
       team: "team"
     };
     KEYS_PATH = "/litellm?tab=keys";
-    MoreKeysNote = ({ count }) => /* @__PURE__ */ import_react7.default.createElement(import_core_components.Link, { to: KEYS_PATH, variant: "caption" }, "+", count, " more budgeted key", count > 1 ? "s" : "", " further from the cap \u2192");
-    HierarchyNote = ({ withReset }) => /* @__PURE__ */ import_react7.default.createElement(
-      import_Box7.default,
+    HierarchyNote = ({ withReset }) => /* @__PURE__ */ import_react8.default.createElement(
+      import_Box8.default,
       {
         sx: (theme) => ({
           px: 1.5,
           py: 1.25,
           borderRadius: 1.5,
           border: "1px dashed",
-          borderColor: (0, import_styles4.alpha)(theme.palette.text.primary, 0.18)
+          borderColor: (0, import_styles5.alpha)(theme.palette.text.primary, 0.18)
         })
       },
-      /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary", display: "block" }, /* @__PURE__ */ import_react7.default.createElement("b", null, "Order:"), " key \u2192 personal \u2192 team \u2192 global. The first cap you reach blocks the request; a key that belongs to a team uses the team's cap, not your personal one.", withReset && " A cap with a reset window drops to $0 when the window closes; without one it never resets.")
+      /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary", display: "block" }, /* @__PURE__ */ import_react8.default.createElement("b", null, "Order:"), " key \u2192 personal \u2192 team \u2192 global. The first cap you reach blocks the request; a key that belongs to a team uses the team's cap, not your personal one.", withReset && " A cap with a reset window drops to $0 when the window closes; without one it never resets.")
     );
-    TaggedLimit = ({ limit }) => {
-      const tone = budgetTone2(limit.pct);
-      return /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, null, /* @__PURE__ */ import_react7.default.createElement(
-        import_Typography7.default,
-        {
-          sx: (theme) => ({
-            fontSize: 11,
-            fontWeight: 700,
-            letterSpacing: "0.08em",
-            textTransform: "uppercase",
-            color: tone === "accent" ? theme.palette.text.secondary : levelToneColor(tone, theme),
-            mb: 0.5
-          })
-        },
-        limit.kind
-      ), /* @__PURE__ */ import_react7.default.createElement(LimitCard, { limit }));
-    };
     FullBody = ({ summary }) => {
       const hasBudgetedKeys = summary.keys.length + summary.hiddenBudgetedKeys > 0;
-      return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
+      return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
         LevelFrame,
         {
           rank: 1,
@@ -3167,10 +3176,10 @@ var init_LiteLLMBudgetWidget = __esm({
           tagline: "per-key cap \xB7 highest priority",
           note: hasBudgetedKeys ? void 0 : "no key budgets set"
         },
-        !hasBudgetedKeys && /* @__PURE__ */ import_react7.default.createElement(EmptyLimitCard, null, "No key has a budget, so no key-level cap applies."),
-        summary.keys.map((k) => /* @__PURE__ */ import_react7.default.createElement(LimitCard, { key: k.sublabel ?? k.label, limit: k })),
-        summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ import_react7.default.createElement(MoreKeysNote, { count: summary.hiddenBudgetedKeys })
-      ), /* @__PURE__ */ import_react7.default.createElement(
+        !hasBudgetedKeys && /* @__PURE__ */ import_react8.default.createElement(EmptyLimitCard, null, "No key has a budget, so no key-level cap applies."),
+        summary.keys.map((k) => /* @__PURE__ */ import_react8.default.createElement(LimitCard, { key: k.sublabel ?? k.label, limit: k })),
+        summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ import_react8.default.createElement(MoreKeysNote, { count: summary.hiddenBudgetedKeys, href: KEYS_PATH })
+      ), /* @__PURE__ */ import_react8.default.createElement(
         LevelFrame,
         {
           rank: 2,
@@ -3178,15 +3187,15 @@ var init_LiteLLMBudgetWidget = __esm({
           tagline: "cap on everything you spend with your own keys",
           note: "skipped for team-bound keys"
         },
-        summary.user ? /* @__PURE__ */ import_react7.default.createElement(LimitCard, { limit: summary.user }) : /* @__PURE__ */ import_react7.default.createElement(EmptyLimitCard, null, "No personal budget is set on your account.")
-      ), /* @__PURE__ */ import_react7.default.createElement(LevelFrame, { rank: 3, name: "Team", tagline: "shared cap for all keys in a team (if any)" }, summary.teams.length > 0 ? summary.teams.map((t) => /* @__PURE__ */ import_react7.default.createElement(LimitCard, { key: t.sublabel ?? t.label, limit: t })) : /* @__PURE__ */ import_react7.default.createElement(EmptyLimitCard, null, "No team you belong to has a budget.")), /* @__PURE__ */ import_react7.default.createElement(LevelFrame, { rank: 4, name: "Global", tagline: "proxy-wide cap set by your admin", isLast: true }, /* @__PURE__ */ import_react7.default.createElement(EmptyLimitCard, null, "Configured by your admin in the proxy config \u2014 it isn't visible from this page. When set, it limits spend across every request on the proxy.")), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { mt: 2 } }, /* @__PURE__ */ import_react7.default.createElement(HierarchyNote, { withReset: true })));
+        summary.user ? /* @__PURE__ */ import_react8.default.createElement(LimitCard, { limit: summary.user }) : /* @__PURE__ */ import_react8.default.createElement(EmptyLimitCard, null, "No personal budget is set on your account.")
+      ), /* @__PURE__ */ import_react8.default.createElement(LevelFrame, { rank: 3, name: "Team", tagline: "shared cap for all keys in a team (if any)" }, summary.teams.length > 0 ? summary.teams.map((t) => /* @__PURE__ */ import_react8.default.createElement(LimitCard, { key: t.sublabel ?? t.label, limit: t })) : /* @__PURE__ */ import_react8.default.createElement(EmptyLimitCard, null, "No team you belong to has a budget.")), /* @__PURE__ */ import_react8.default.createElement(LevelFrame, { rank: 4, name: "Global", tagline: "proxy-wide cap set by your admin", isLast: true }, /* @__PURE__ */ import_react8.default.createElement(EmptyLimitCard, null, "Configured by your admin in the proxy config \u2014 it isn't visible from this page. When set, it limits spend across every request on the proxy.")), /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { mt: 2 } }, /* @__PURE__ */ import_react8.default.createElement(HierarchyNote, { withReset: true })));
     };
     CompactBody = ({ summary }) => {
       const { count } = budgetHeadline(summary);
       if (count === 0) {
-        return /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", color: "text.secondary", sx: { fontSize: 13 } }, "No budget limits apply to you right now.");
+        return /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2", color: "text.secondary", sx: { fontSize: 13 } }, "No budget limits apply to you right now.");
       }
-      return /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { display: "flex", flexDirection: "column", gap: 1.25 } }, /* @__PURE__ */ import_react7.default.createElement(HierarchyNote, null), summary.keys.map((k) => /* @__PURE__ */ import_react7.default.createElement(TaggedLimit, { key: k.sublabel ?? k.label, limit: k })), summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ import_react7.default.createElement(MoreKeysNote, { count: summary.hiddenBudgetedKeys }), summary.user && /* @__PURE__ */ import_react7.default.createElement(TaggedLimit, { limit: summary.user }), summary.teams.map((t) => /* @__PURE__ */ import_react7.default.createElement(TaggedLimit, { key: t.sublabel ?? t.label, limit: t })));
+      return /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { display: "flex", flexDirection: "column", gap: 1.25 } }, /* @__PURE__ */ import_react8.default.createElement(HierarchyNote, null), summary.keys.map((k) => /* @__PURE__ */ import_react8.default.createElement(TaggedLimit, { key: k.sublabel ?? k.label, limit: k })), summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ import_react8.default.createElement(MoreKeysNote, { count: summary.hiddenBudgetedKeys, href: KEYS_PATH }), summary.user && /* @__PURE__ */ import_react8.default.createElement(TaggedLimit, { limit: summary.user }), summary.teams.map((t) => /* @__PURE__ */ import_react8.default.createElement(TaggedLimit, { key: t.sublabel ?? t.label, limit: t })));
     };
     LiteLLMBudgetWidget = ({
       title = "Budget Policy",
@@ -3197,13 +3206,13 @@ var init_LiteLLMBudgetWidget = __esm({
       action
     }) => {
       const api = (0, import_core_plugin_api3.useApi)(liteLlmApiRef);
-      const [loading, setLoading] = (0, import_react7.useState)(true);
-      const [error, setError] = (0, import_react7.useState)(null);
-      const [user, setUser] = (0, import_react7.useState)(null);
-      const [teams, setTeams] = (0, import_react7.useState)([]);
-      const [keys, setKeys] = (0, import_react7.useState)([]);
-      const [expanded, setExpanded] = (0, import_react7.useState)(defaultExpanded);
-      (0, import_react7.useEffect)(() => {
+      const [loading, setLoading] = (0, import_react8.useState)(true);
+      const [error, setError] = (0, import_react8.useState)(null);
+      const [user, setUser] = (0, import_react8.useState)(null);
+      const [teams, setTeams] = (0, import_react8.useState)([]);
+      const [keys, setKeys] = (0, import_react8.useState)([]);
+      const [expanded, setExpanded] = (0, import_react8.useState)(defaultExpanded);
+      (0, import_react8.useEffect)(() => {
         let cancelled = false;
         setLoading(true);
         setError(null);
@@ -3227,19 +3236,19 @@ var init_LiteLLMBudgetWidget = __esm({
           cancelled = true;
         };
       }, [api]);
-      const summary = (0, import_react7.useMemo)(
+      const summary = (0, import_react8.useMemo)(
         () => buildBudgetSummary(user, teams, keys, maxKeys),
         [user, teams, keys, maxKeys]
       );
-      const headline = (0, import_react7.useMemo)(() => budgetHeadline(summary), [summary]);
+      const headline = (0, import_react8.useMemo)(() => budgetHeadline(summary), [summary]);
       const limitsWord = `${headline.count} limit${headline.count === 1 ? "" : "s"}`;
       const closestWord = headline.closest === null ? "" : ` \xB7 closest: ${CLOSEST_LEVEL_LABEL[headline.closest.kind]} ${Math.round(
         headline.closest.pct
       )}%`;
       const summaryText = headline.count === 0 ? "no limits apply" : `${limitsWord}${closestWord}`;
-      const body = /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, loading && /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 140 }, /* @__PURE__ */ import_react7.default.createElement(import_CircularProgress4.default, { size: 32 })), !loading && error && /* @__PURE__ */ import_react7.default.createElement(import_Alert3.default, { severity: "error", sx: { mt: 0.5 } }, error), !loading && !error && (compact ? /* @__PURE__ */ import_react7.default.createElement(CompactBody, { summary }) : /* @__PURE__ */ import_react7.default.createElement(FullBody, { summary })));
-      return /* @__PURE__ */ import_react7.default.createElement(import_Paper5.default, { sx: { p: 2 } }, collapsible ? /* @__PURE__ */ import_react7.default.createElement(
-        import_Box7.default,
+      const body = /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, loading && /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 140 }, /* @__PURE__ */ import_react8.default.createElement(import_CircularProgress4.default, { size: 32 })), !loading && error && /* @__PURE__ */ import_react8.default.createElement(import_Alert3.default, { severity: "error", sx: { mt: 0.5 } }, error), !loading && !error && (compact ? /* @__PURE__ */ import_react8.default.createElement(CompactBody, { summary }) : /* @__PURE__ */ import_react8.default.createElement(FullBody, { summary })));
+      return /* @__PURE__ */ import_react8.default.createElement(import_Paper6.default, { sx: { p: 2 } }, collapsible ? /* @__PURE__ */ import_react8.default.createElement(
+        import_Box8.default,
         {
           onClick: () => setExpanded((e) => !e),
           sx: {
@@ -3251,14 +3260,14 @@ var init_LiteLLMBudgetWidget = __esm({
             mb: expanded ? 1.5 : 0
           }
         },
-        /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "h6", lineHeight: 1.2 }, title), !loading && !error && /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { mt: 0.5 } }, /* @__PURE__ */ import_react7.default.createElement(
+        /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "h6", lineHeight: 1.2 }, title), !loading && !error && /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { mt: 0.5 } }, /* @__PURE__ */ import_react8.default.createElement(
           StatusPill,
           {
             label: summaryText,
             tone: budgetTone2(headline.closest?.pct ?? 0)
           }
         ))),
-        /* @__PURE__ */ import_react7.default.createElement(
+        /* @__PURE__ */ import_react8.default.createElement(
           import_IconButton4.default,
           {
             size: "small",
@@ -3274,10 +3283,10 @@ var init_LiteLLMBudgetWidget = __esm({
               transition: theme.transitions.create("transform")
             })
           },
-          /* @__PURE__ */ import_react7.default.createElement(import_icons_material5.ExpandMore, null)
+          /* @__PURE__ */ import_react8.default.createElement(import_icons_material5.ExpandMore, null)
         )
-      ) : /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { mb: 1.5 } }, /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "h6", lineHeight: 1.2 }, title), /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary" }, "How LiteLLM caps spend \u2014 and where you stand right now")), collapsible ? /* @__PURE__ */ import_react7.default.createElement(import_Collapse.default, { in: expanded, unmountOnExit: true }, body) : body, action && /* @__PURE__ */ import_react7.default.createElement(
-        import_Box7.default,
+      ) : /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { mb: 1.5 } }, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "h6", lineHeight: 1.2 }, title), /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary" }, "How LiteLLM caps spend \u2014 and where you stand right now")), collapsible ? /* @__PURE__ */ import_react8.default.createElement(import_Collapse.default, { in: expanded, unmountOnExit: true }, body) : body, action && /* @__PURE__ */ import_react8.default.createElement(
+        import_Box8.default,
         {
           sx: (theme) => ({
             mt: 2,
@@ -3306,14 +3315,14 @@ function budgetStatValue(hidden, budget) {
   if (budget > 0) return fmtUsd2(budget);
   return "Unlimited";
 }
-var import_react8, import_Paper6, import_Box8, import_Typography8, import_Skeleton4, import_Divider3, import_Table4, import_TableBody4, import_TableCell4, import_TableHead4, import_TableRow4, import_TableContainer4, import_Collapse2, import_IconButton5, import_Button5, import_CircularProgress5, import_styles5, import_icons_material6, import_recharts2, fmtUsd2, TeamCard, TeamUsage;
+var import_react9, import_Paper7, import_Box9, import_Typography9, import_Skeleton4, import_Divider3, import_Table4, import_TableBody4, import_TableCell4, import_TableHead4, import_TableRow4, import_TableContainer4, import_Collapse2, import_IconButton5, import_Button5, import_CircularProgress5, import_styles6, import_icons_material6, import_recharts2, fmtUsd2, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
     "use strict";
-    import_react8 = __toESM(require("react"));
-    import_Paper6 = __toESM(require("@mui/material/Paper"));
-    import_Box8 = __toESM(require("@mui/material/Box"));
-    import_Typography8 = __toESM(require("@mui/material/Typography"));
+    import_react9 = __toESM(require("react"));
+    import_Paper7 = __toESM(require("@mui/material/Paper"));
+    import_Box9 = __toESM(require("@mui/material/Box"));
+    import_Typography9 = __toESM(require("@mui/material/Typography"));
     import_Skeleton4 = __toESM(require("@mui/material/Skeleton"));
     import_Divider3 = __toESM(require("@mui/material/Divider"));
     import_Table4 = __toESM(require("@mui/material/Table"));
@@ -3326,13 +3335,13 @@ var init_TeamUsage = __esm({
     import_IconButton5 = __toESM(require("@mui/material/IconButton"));
     import_Button5 = __toESM(require("@mui/material/Button"));
     import_CircularProgress5 = __toESM(require("@mui/material/CircularProgress"));
-    import_styles5 = require("@mui/material/styles");
+    import_styles6 = require("@mui/material/styles");
     import_icons_material6 = require("@mui/icons-material");
     import_recharts2 = require("recharts");
     init_ui();
     fmtUsd2 = (n) => `$${(n ?? 0).toFixed(2)}`;
     TeamCard = ({ team, usage, usageLoading, canManage, onEditTeam }) => {
-      const [expanded, setExpanded] = (0, import_react8.useState)(false);
+      const [expanded, setExpanded] = (0, import_react9.useState)(false);
       const chart = useChartTheme();
       const hidden = team.budget_hidden === true;
       const budget = hidden ? 0 : team.max_budget ?? 0;
@@ -3344,24 +3353,24 @@ var init_TeamUsage = __esm({
       const renderDailySpendSection = () => {
         if (hidden) return null;
         if (usageLoading) {
-          return /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { display: "flex", justifyContent: "center", py: 3 }, /* @__PURE__ */ import_react8.default.createElement(import_CircularProgress5.default, { size: 22 }));
+          return /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { display: "flex", justifyContent: "center", py: 3 }, /* @__PURE__ */ import_react9.default.createElement(import_CircularProgress5.default, { size: 22 }));
         }
         if (dailyData.length === 0) return null;
-        return /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { mb: 2.5 }, /* @__PURE__ */ import_react8.default.createElement(
-          import_Typography8.default,
+        return /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { mb: 2.5 }, /* @__PURE__ */ import_react9.default.createElement(
+          import_Typography9.default,
           {
             variant: "caption",
             color: "text.secondary",
             sx: { display: "block", fontSize: 11, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase", mb: 1 }
           },
           "Daily spend"
-        ), /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { height: 150 }, /* @__PURE__ */ import_react8.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react8.default.createElement(import_recharts2.AreaChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react8.default.createElement(import_recharts2.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react8.default.createElement(import_recharts2.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react8.default.createElement(import_recharts2.YAxis, { tickFormatter: fmtUsdCompact, width: 52, ...chart.axis }), /* @__PURE__ */ import_react8.default.createElement(
+        ), /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { height: 150 }, /* @__PURE__ */ import_react9.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react9.default.createElement(import_recharts2.AreaChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react9.default.createElement(import_recharts2.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react9.default.createElement(import_recharts2.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react9.default.createElement(import_recharts2.YAxis, { tickFormatter: fmtUsdCompact, width: 52, ...chart.axis }), /* @__PURE__ */ import_react9.default.createElement(
           import_recharts2.Tooltip,
           {
             cursor: chart.cursor,
-            content: /* @__PURE__ */ import_react8.default.createElement(ChartTooltip, { valueFormatter: (v) => `$${v.toFixed(4)}` })
+            content: /* @__PURE__ */ import_react9.default.createElement(ChartTooltip, { valueFormatter: (v) => `$${v.toFixed(4)}` })
           }
-        ), /* @__PURE__ */ import_react8.default.createElement(
+        ), /* @__PURE__ */ import_react9.default.createElement(
           import_recharts2.Area,
           {
             type: "monotone",
@@ -3374,8 +3383,8 @@ var init_TeamUsage = __esm({
           }
         )))));
       };
-      const sectionLabel = (label) => /* @__PURE__ */ import_react8.default.createElement(
-        import_Typography8.default,
+      const sectionLabel = (label) => /* @__PURE__ */ import_react9.default.createElement(
+        import_Typography9.default,
         {
           variant: "caption",
           color: "text.secondary",
@@ -3383,8 +3392,8 @@ var init_TeamUsage = __esm({
         },
         label
       );
-      return /* @__PURE__ */ import_react8.default.createElement(import_Paper6.default, { variant: "outlined", sx: { borderRadius: 2, p: 2.5 } }, /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { display: "flex", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ import_react8.default.createElement(
-        import_Box8.default,
+      return /* @__PURE__ */ import_react9.default.createElement(import_Paper7.default, { variant: "outlined", sx: { borderRadius: 2, p: 2.5 } }, /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { display: "flex", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ import_react9.default.createElement(
+        import_Box9.default,
         {
           sx: (theme) => ({
             width: 36,
@@ -3394,20 +3403,20 @@ var init_TeamUsage = __esm({
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            bgcolor: (0, import_styles5.alpha)(theme.palette.primary.main, 0.1),
+            bgcolor: (0, import_styles6.alpha)(theme.palette.primary.main, 0.1),
             color: theme.palette.primary.main
           })
         },
-        /* @__PURE__ */ import_react8.default.createElement(import_icons_material6.Group, { fontSize: "small" })
-      ), /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { flexGrow: 1, minWidth: 0 }, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "subtitle1", sx: { fontWeight: 600, lineHeight: 1.3 } }, team.team_alias || "Untitled team"), /* @__PURE__ */ import_react8.default.createElement(
-        import_Typography8.default,
+        /* @__PURE__ */ import_react9.default.createElement(import_icons_material6.Group, { fontSize: "small" })
+      ), /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { flexGrow: 1, minWidth: 0 }, /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "subtitle1", sx: { fontWeight: 600, lineHeight: 1.3 } }, team.team_alias || "Untitled team"), /* @__PURE__ */ import_react9.default.createElement(
+        import_Typography9.default,
         {
           variant: "caption",
           color: "text.secondary",
           sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 }
         },
         team.team_id
-      )), isOver && /* @__PURE__ */ import_react8.default.createElement(StatusPill, { label: "Over budget", tone: "danger" }), isNear && /* @__PURE__ */ import_react8.default.createElement(StatusPill, { label: "Near limit", tone: "warning" }), canManage && onEditTeam && /* @__PURE__ */ import_react8.default.createElement(
+      )), isOver && /* @__PURE__ */ import_react9.default.createElement(StatusPill, { label: "Over budget", tone: "danger" }), isNear && /* @__PURE__ */ import_react9.default.createElement(StatusPill, { label: "Near limit", tone: "warning" }), canManage && onEditTeam && /* @__PURE__ */ import_react9.default.createElement(
         import_Button5.default,
         {
           size: "small",
@@ -3416,7 +3425,7 @@ var init_TeamUsage = __esm({
           sx: { textTransform: "none" }
         },
         "Edit"
-      ), /* @__PURE__ */ import_react8.default.createElement(
+      ), /* @__PURE__ */ import_react9.default.createElement(
         import_IconButton5.default,
         {
           size: "small",
@@ -3429,9 +3438,9 @@ var init_TeamUsage = __esm({
             transition: theme.transitions.create("transform")
           })
         },
-        /* @__PURE__ */ import_react8.default.createElement(import_icons_material6.ExpandMore, null)
-      )), /* @__PURE__ */ import_react8.default.createElement(
-        import_Box8.default,
+        /* @__PURE__ */ import_react9.default.createElement(import_icons_material6.ExpandMore, null)
+      )), /* @__PURE__ */ import_react9.default.createElement(
+        import_Box9.default,
         {
           sx: {
             display: "grid",
@@ -3441,35 +3450,35 @@ var init_TeamUsage = __esm({
             maxWidth: 640
           }
         },
-        /* @__PURE__ */ import_react8.default.createElement(Stat, { label: "Members", value: team.members_with_roles?.length ?? "\u2014" }),
-        /* @__PURE__ */ import_react8.default.createElement(Stat, { label: "Models", value: team.models?.length ? team.models.length : "All" }),
-        /* @__PURE__ */ import_react8.default.createElement(Stat, { label: "Budget", value: budgetStatValue(hidden, budget) }),
-        /* @__PURE__ */ import_react8.default.createElement(Stat, { label: "Spend", value: hidden ? "\u2014" : fmtUsd2(spend) }),
-        /* @__PURE__ */ import_react8.default.createElement(Stat, { label: "TPM", value: team.tpm_limit && team.tpm_limit > 0 ? team.tpm_limit.toLocaleString() : "\u2014" }),
-        /* @__PURE__ */ import_react8.default.createElement(Stat, { label: "RPM", value: team.rpm_limit && team.rpm_limit > 0 ? team.rpm_limit.toLocaleString() : "\u2014" })
-      ), hidden && /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "% used"), /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary" }, "Hidden by admin")), /* @__PURE__ */ import_react8.default.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 }), /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 0.75 } }, "Team budget is hidden \u2014 showing usage level only", team.budget_duration ? ` \xB7 resets every ${team.budget_duration}` : "", ".")), !hidden && budget > 0 && /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, fmtUsd2(spend), " of ", fmtUsd2(budget)), /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "%")), /* @__PURE__ */ import_react8.default.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 })), /* @__PURE__ */ import_react8.default.createElement(import_Collapse2.default, { in: expanded, unmountOnExit: true }, /* @__PURE__ */ import_react8.default.createElement(import_Divider3.default, { sx: { my: 2.5 } }), /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { mb: 2.5 }, sectionLabel("Models"), team.models?.length ? /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { display: "flex", gap: 0.5, flexWrap: "wrap" }, team.models.map((m) => /* @__PURE__ */ import_react8.default.createElement(TagChip, { key: m, label: m, title: m }))) : /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2", color: "text.secondary" }, "All models allowed")), renderDailySpendSection(), /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, null, sectionLabel("Members"), team.members_with_roles?.length ? /* @__PURE__ */ import_react8.default.createElement(
+        /* @__PURE__ */ import_react9.default.createElement(Stat, { label: "Members", value: team.members_with_roles?.length ?? "\u2014" }),
+        /* @__PURE__ */ import_react9.default.createElement(Stat, { label: "Models", value: team.models?.length ? team.models.length : "All" }),
+        /* @__PURE__ */ import_react9.default.createElement(Stat, { label: "Budget", value: budgetStatValue(hidden, budget) }),
+        /* @__PURE__ */ import_react9.default.createElement(Stat, { label: "Spend", value: hidden ? "\u2014" : fmtUsd2(spend) }),
+        /* @__PURE__ */ import_react9.default.createElement(Stat, { label: "TPM", value: team.tpm_limit && team.tpm_limit > 0 ? team.tpm_limit.toLocaleString() : "\u2014" }),
+        /* @__PURE__ */ import_react9.default.createElement(Stat, { label: "RPM", value: team.rpm_limit && team.rpm_limit > 0 ? team.rpm_limit.toLocaleString() : "\u2014" })
+      ), hidden && /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "% used"), /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "caption", color: "text.secondary" }, "Hidden by admin")), /* @__PURE__ */ import_react9.default.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 }), /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 0.75 } }, "Team budget is hidden \u2014 showing usage level only", team.budget_duration ? ` \xB7 resets every ${team.budget_duration}` : "", ".")), !hidden && budget > 0 && /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, fmtUsd2(spend), " of ", fmtUsd2(budget)), /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "%")), /* @__PURE__ */ import_react9.default.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 })), /* @__PURE__ */ import_react9.default.createElement(import_Collapse2.default, { in: expanded, unmountOnExit: true }, /* @__PURE__ */ import_react9.default.createElement(import_Divider3.default, { sx: { my: 2.5 } }), /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { mb: 2.5 }, sectionLabel("Models"), team.models?.length ? /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { display: "flex", gap: 0.5, flexWrap: "wrap" }, team.models.map((m) => /* @__PURE__ */ import_react9.default.createElement(TagChip, { key: m, label: m, title: m }))) : /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "body2", color: "text.secondary" }, "All models allowed")), renderDailySpendSection(), /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, null, sectionLabel("Members"), team.members_with_roles?.length ? /* @__PURE__ */ import_react9.default.createElement(
         import_TableContainer4.default,
         {
-          component: import_Paper6.default,
+          component: import_Paper7.default,
           variant: "outlined",
           sx: { borderRadius: 1.5 }
         },
-        /* @__PURE__ */ import_react8.default.createElement(import_Table4.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react8.default.createElement(import_TableHead4.default, null, /* @__PURE__ */ import_react8.default.createElement(import_TableRow4.default, null, /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, null, "User"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, { align: "right" }, "Role"))), /* @__PURE__ */ import_react8.default.createElement(import_TableBody4.default, null, team.members_with_roles.map((m) => /* @__PURE__ */ import_react8.default.createElement(import_TableRow4.default, { key: m.user_id }, /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, null, m.user_email ? /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2" }, m.user_email), /* @__PURE__ */ import_react8.default.createElement(
-          import_Typography8.default,
+        /* @__PURE__ */ import_react9.default.createElement(import_Table4.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react9.default.createElement(import_TableHead4.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableRow4.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableCell4.default, null, "User"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell4.default, { align: "right" }, "Role"))), /* @__PURE__ */ import_react9.default.createElement(import_TableBody4.default, null, team.members_with_roles.map((m) => /* @__PURE__ */ import_react9.default.createElement(import_TableRow4.default, { key: m.user_id }, /* @__PURE__ */ import_react9.default.createElement(import_TableCell4.default, null, m.user_email ? /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "body2" }, m.user_email), /* @__PURE__ */ import_react9.default.createElement(
+          import_Typography9.default,
           {
             variant: "caption",
             color: "text.secondary",
             sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 }
           },
           m.user_id
-        )) : /* @__PURE__ */ import_react8.default.createElement(
-          import_Typography8.default,
+        )) : /* @__PURE__ */ import_react9.default.createElement(
+          import_Typography9.default,
           {
             variant: "body2",
             sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }
           },
           m.user_id
-        )), /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, { align: "right" }, /* @__PURE__ */ import_react8.default.createElement(
+        )), /* @__PURE__ */ import_react9.default.createElement(import_TableCell4.default, { align: "right" }, /* @__PURE__ */ import_react9.default.createElement(
           StatusPill,
           {
             label: m.role,
@@ -3477,7 +3486,7 @@ var init_TeamUsage = __esm({
             dot: false
           }
         ))))))
-      ) : /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2", color: "text.secondary" }, "No members assigned."))));
+      ) : /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "body2", color: "text.secondary" }, "No members assigned."))));
     };
     TeamUsage = ({
       teams,
@@ -3489,22 +3498,22 @@ var init_TeamUsage = __esm({
       canCreate,
       onCreateTeam
     }) => {
-      const createAction = canCreate && onCreateTeam ? /* @__PURE__ */ import_react8.default.createElement(
+      const createAction = canCreate && onCreateTeam ? /* @__PURE__ */ import_react9.default.createElement(
         import_Button5.default,
         {
           variant: "contained",
           color: "primary",
           disableElevation: true,
-          startIcon: /* @__PURE__ */ import_react8.default.createElement(import_icons_material6.Add, null),
+          startIcon: /* @__PURE__ */ import_react9.default.createElement(import_icons_material6.Add, null),
           onClick: onCreateTeam
         },
         "Create Team"
       ) : void 0;
       if (loading) {
-        return /* @__PURE__ */ import_react8.default.createElement(SectionCard, { title: "Teams", actions: createAction }, /* @__PURE__ */ import_react8.default.createElement(import_Skeleton4.default, { variant: "rounded", height: 120, sx: { mb: 2 } }), /* @__PURE__ */ import_react8.default.createElement(import_Skeleton4.default, { variant: "rounded", height: 120 }));
+        return /* @__PURE__ */ import_react9.default.createElement(SectionCard, { title: "Teams", actions: createAction }, /* @__PURE__ */ import_react9.default.createElement(import_Skeleton4.default, { variant: "rounded", height: 120, sx: { mb: 2 } }), /* @__PURE__ */ import_react9.default.createElement(import_Skeleton4.default, { variant: "rounded", height: 120 }));
       }
       if (!teams.length) {
-        return /* @__PURE__ */ import_react8.default.createElement(SectionCard, { title: "Teams", actions: createAction }, /* @__PURE__ */ import_react8.default.createElement(
+        return /* @__PURE__ */ import_react9.default.createElement(SectionCard, { title: "Teams", actions: createAction }, /* @__PURE__ */ import_react9.default.createElement(
           EmptyState,
           {
             message: "You're not a member of any LiteLLM team yet.",
@@ -3512,14 +3521,14 @@ var init_TeamUsage = __esm({
           }
         ));
       }
-      return /* @__PURE__ */ import_react8.default.createElement(
+      return /* @__PURE__ */ import_react9.default.createElement(
         SectionCard,
         {
           title: "Teams",
           subtitle: `${teams.length} team${teams.length === 1 ? "" : "s"}`,
           actions: createAction
         },
-        /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, teams.map((team) => /* @__PURE__ */ import_react8.default.createElement(
+        /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, teams.map((team) => /* @__PURE__ */ import_react9.default.createElement(
           TeamCard,
           {
             key: team.team_id,
@@ -3553,12 +3562,12 @@ function fmtTokens(n) {
   if (n >= 1e3) return `${(n / 1e3).toFixed(0)}K`;
   return String(n);
 }
-var import_react9, import_Box9, import_Table5, import_TableBody5, import_TableCell5, import_TableContainer5, import_TableHead5, import_TableRow5, import_TableSortLabel2, import_Typography9, import_MenuItem4, import_Select, import_FormControl, import_InputLabel, import_TextField5, import_InputAdornment2, import_icons_material7, import_ContentCopy, import_Tooltip, import_Snackbar, import_Alert4, import_styles6, ALL_PROXY_MODELS2, ModelsTable;
+var import_react10, import_Box10, import_Table5, import_TableBody5, import_TableCell5, import_TableContainer5, import_TableHead5, import_TableRow5, import_TableSortLabel2, import_Typography10, import_MenuItem4, import_Select, import_FormControl, import_InputLabel, import_TextField5, import_InputAdornment2, import_icons_material7, import_ContentCopy, import_Tooltip, import_Snackbar, import_Alert4, import_styles7, ALL_PROXY_MODELS2, ModelsTable;
 var init_ModelsTable = __esm({
   "src/components/ModelsTable.tsx"() {
     "use strict";
-    import_react9 = __toESM(require("react"));
-    import_Box9 = __toESM(require("@mui/material/Box"));
+    import_react10 = __toESM(require("react"));
+    import_Box10 = __toESM(require("@mui/material/Box"));
     import_Table5 = __toESM(require("@mui/material/Table"));
     import_TableBody5 = __toESM(require("@mui/material/TableBody"));
     import_TableCell5 = __toESM(require("@mui/material/TableCell"));
@@ -3566,7 +3575,7 @@ var init_ModelsTable = __esm({
     import_TableHead5 = __toESM(require("@mui/material/TableHead"));
     import_TableRow5 = __toESM(require("@mui/material/TableRow"));
     import_TableSortLabel2 = __toESM(require("@mui/material/TableSortLabel"));
-    import_Typography9 = __toESM(require("@mui/material/Typography"));
+    import_Typography10 = __toESM(require("@mui/material/Typography"));
     import_MenuItem4 = __toESM(require("@mui/material/MenuItem"));
     import_Select = __toESM(require("@mui/material/Select"));
     import_FormControl = __toESM(require("@mui/material/FormControl"));
@@ -3579,24 +3588,24 @@ var init_ModelsTable = __esm({
     import_Snackbar = __toESM(require("@mui/material/Snackbar"));
     import_Alert4 = __toESM(require("@mui/material/Alert"));
     init_ui();
-    import_styles6 = require("@mui/material/styles");
+    import_styles7 = require("@mui/material/styles");
     ALL_PROXY_MODELS2 = "all-proxy-models";
     ModelsTable = ({ allModels, teams, loading }) => {
-      const theme = (0, import_styles6.useTheme)();
-      const [selectedTeamId, setSelectedTeamId] = (0, import_react9.useState)("");
-      const [filterText, setFilterText] = (0, import_react9.useState)("");
-      const [copiedSnackbar, setCopiedSnackbar] = (0, import_react9.useState)(false);
-      const [sortKey, setSortKey] = (0, import_react9.useState)("model_name");
-      const [sortDirection, setSortDirection] = (0, import_react9.useState)("asc");
-      const selectedTeam = (0, import_react9.useMemo)(
+      const theme = (0, import_styles7.useTheme)();
+      const [selectedTeamId, setSelectedTeamId] = (0, import_react10.useState)("");
+      const [filterText, setFilterText] = (0, import_react10.useState)("");
+      const [copiedSnackbar, setCopiedSnackbar] = (0, import_react10.useState)(false);
+      const [sortKey, setSortKey] = (0, import_react10.useState)("model_name");
+      const [sortDirection, setSortDirection] = (0, import_react10.useState)("asc");
+      const selectedTeam = (0, import_react10.useMemo)(
         () => teams.find((t) => t.team_id === selectedTeamId) ?? null,
         [teams, selectedTeamId]
       );
-      const teamModels = (0, import_react9.useMemo)(() => {
+      const teamModels = (0, import_react10.useMemo)(() => {
         if (!selectedTeam) return [];
         return allModels.filter((model) => isModelAllowedByTeam2(model, selectedTeam.models));
       }, [allModels, selectedTeam]);
-      const filteredModels = (0, import_react9.useMemo)(() => {
+      const filteredModels = (0, import_react10.useMemo)(() => {
         const q = filterText.trim().toLowerCase();
         let models = teamModels;
         if (q) {
@@ -3643,10 +3652,10 @@ var init_ModelsTable = __esm({
           return sortDirection === "asc" ? aVal - bVal : bVal - aVal;
         });
       }, [teamModels, filterText, sortKey, sortDirection]);
-      const handleCopyModelId = (0, import_react9.useCallback)((modelId) => {
+      const handleCopyModelId = (0, import_react10.useCallback)((modelId) => {
         navigator.clipboard.writeText(modelId).then(() => setCopiedSnackbar(true));
       }, []);
-      const handleSort = (0, import_react9.useCallback)((key) => {
+      const handleSort = (0, import_react10.useCallback)((key) => {
         if (sortKey === key) {
           setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
         } else {
@@ -3668,13 +3677,13 @@ var init_ModelsTable = __esm({
             return theme.palette.info.main;
         }
       };
-      return /* @__PURE__ */ import_react9.default.createElement(
+      return /* @__PURE__ */ import_react10.default.createElement(
         SectionCard,
         {
           title: "Available Models",
           subtitle: selectedTeam ? `${filteredModels.length}${filterText.trim() ? ` of ${teamModels.length}` : ""} model${filteredModels.length === 1 ? "" : "s"}` : "Select a team to view its models"
         },
-        /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { sx: { px: 2.5, pb: 2.5, pt: 1, display: "flex", gap: 2, flexWrap: "wrap" } }, /* @__PURE__ */ import_react9.default.createElement(import_FormControl.default, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ import_react9.default.createElement(import_InputLabel.default, { id: "team-select-label" }, "Team"), /* @__PURE__ */ import_react9.default.createElement(
+        /* @__PURE__ */ import_react10.default.createElement(import_Box10.default, { sx: { px: 2.5, pb: 2.5, pt: 1, display: "flex", gap: 2, flexWrap: "wrap" } }, /* @__PURE__ */ import_react10.default.createElement(import_FormControl.default, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ import_react10.default.createElement(import_InputLabel.default, { id: "team-select-label" }, "Team"), /* @__PURE__ */ import_react10.default.createElement(
           import_Select.default,
           {
             labelId: "team-select-label",
@@ -3682,8 +3691,8 @@ var init_ModelsTable = __esm({
             label: "Team",
             onChange: (e) => setSelectedTeamId(e.target.value)
           },
-          teams.map((t) => /* @__PURE__ */ import_react9.default.createElement(import_MenuItem4.default, { key: t.team_id, value: t.team_id }, t.team_alias ?? t.team_id))
-        )), /* @__PURE__ */ import_react9.default.createElement(
+          teams.map((t) => /* @__PURE__ */ import_react10.default.createElement(import_MenuItem4.default, { key: t.team_id, value: t.team_id }, t.team_alias ?? t.team_id))
+        )), /* @__PURE__ */ import_react10.default.createElement(
           import_TextField5.default,
           {
             label: "Filter Models",
@@ -3693,33 +3702,33 @@ var init_ModelsTable = __esm({
             disabled: !selectedTeamId,
             sx: { minWidth: 240, mb: 2 },
             InputProps: {
-              startAdornment: /* @__PURE__ */ import_react9.default.createElement(import_InputAdornment2.default, { position: "start" }, /* @__PURE__ */ import_react9.default.createElement(import_icons_material7.Search, { fontSize: "small" }))
+              startAdornment: /* @__PURE__ */ import_react10.default.createElement(import_InputAdornment2.default, { position: "start" }, /* @__PURE__ */ import_react10.default.createElement(import_icons_material7.Search, { fontSize: "small" }))
             }
           }
         )),
-        loading && /* @__PURE__ */ import_react9.default.createElement(EmptyState, { message: "Loading models\u2026" }),
-        !loading && !selectedTeamId && /* @__PURE__ */ import_react9.default.createElement(
+        loading && /* @__PURE__ */ import_react10.default.createElement(EmptyState, { message: "Loading models\u2026" }),
+        !loading && !selectedTeamId && /* @__PURE__ */ import_react10.default.createElement(
           EmptyState,
           {
             message: "Select a team to see available models",
             hint: "Each team may have a different set of models assigned"
           }
         ),
-        !loading && selectedTeamId && teamModels.length === 0 && /* @__PURE__ */ import_react9.default.createElement(
+        !loading && selectedTeamId && teamModels.length === 0 && /* @__PURE__ */ import_react10.default.createElement(
           EmptyState,
           {
             message: "No models available for this team",
             hint: allModels.length === 0 ? "No models are configured in the system" : "None of the team's assigned models were found in the catalog"
           }
         ),
-        !loading && selectedTeamId && teamModels.length > 0 && filteredModels.length === 0 && /* @__PURE__ */ import_react9.default.createElement(
+        !loading && selectedTeamId && teamModels.length > 0 && filteredModels.length === 0 && /* @__PURE__ */ import_react10.default.createElement(
           EmptyState,
           {
             message: "No models match your search",
             hint: "Try a different search term"
           }
         ),
-        !loading && filteredModels.length > 0 && /* @__PURE__ */ import_react9.default.createElement(import_TableContainer5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_Table5.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react9.default.createElement(import_TableHead5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { sortDirection: sortKey === "model_name" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "model_name", direction: sortKey === "model_name" ? sortDirection : "asc", onClick: () => handleSort("model_name") }, "Model ID")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { sortDirection: sortKey === "mode" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "mode", direction: sortKey === "mode" ? sortDirection : "asc", onClick: () => handleSort("mode") }, "Mode")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "input_cost_per_token" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "input_cost_per_token", direction: sortKey === "input_cost_per_token" ? sortDirection : "asc", onClick: () => handleSort("input_cost_per_token") }, "Input Cost")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "output_cost_per_token" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "output_cost_per_token", direction: sortKey === "output_cost_per_token" ? sortDirection : "asc", onClick: () => handleSort("output_cost_per_token") }, "Output Cost")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "max_input_tokens" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "max_input_tokens", direction: sortKey === "max_input_tokens" ? sortDirection : "asc", onClick: () => handleSort("max_input_tokens") }, "Max Input")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "max_output_tokens" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "max_output_tokens", direction: sortKey === "max_output_tokens" ? sortDirection : "asc", onClick: () => handleSort("max_output_tokens") }, "Max Output")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, "Capabilities"))), /* @__PURE__ */ import_react9.default.createElement(import_TableBody5.default, null, filteredModels.map((m) => /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, { key: m.model_name, hover: true }, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ import_react9.default.createElement(import_Tooltip.default, { title: m.model_name, placement: "top" }, /* @__PURE__ */ import_react9.default.createElement(
+        !loading && filteredModels.length > 0 && /* @__PURE__ */ import_react10.default.createElement(import_TableContainer5.default, null, /* @__PURE__ */ import_react10.default.createElement(import_Table5.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react10.default.createElement(import_TableHead5.default, null, /* @__PURE__ */ import_react10.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react10.default.createElement(import_TableCell5.default, { sortDirection: sortKey === "model_name" ? sortDirection : false }, /* @__PURE__ */ import_react10.default.createElement(import_TableSortLabel2.default, { active: sortKey === "model_name", direction: sortKey === "model_name" ? sortDirection : "asc", onClick: () => handleSort("model_name") }, "Model ID")), /* @__PURE__ */ import_react10.default.createElement(import_TableCell5.default, { sortDirection: sortKey === "mode" ? sortDirection : false }, /* @__PURE__ */ import_react10.default.createElement(import_TableSortLabel2.default, { active: sortKey === "mode", direction: sortKey === "mode" ? sortDirection : "asc", onClick: () => handleSort("mode") }, "Mode")), /* @__PURE__ */ import_react10.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "input_cost_per_token" ? sortDirection : false }, /* @__PURE__ */ import_react10.default.createElement(import_TableSortLabel2.default, { active: sortKey === "input_cost_per_token", direction: sortKey === "input_cost_per_token" ? sortDirection : "asc", onClick: () => handleSort("input_cost_per_token") }, "Input Cost")), /* @__PURE__ */ import_react10.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "output_cost_per_token" ? sortDirection : false }, /* @__PURE__ */ import_react10.default.createElement(import_TableSortLabel2.default, { active: sortKey === "output_cost_per_token", direction: sortKey === "output_cost_per_token" ? sortDirection : "asc", onClick: () => handleSort("output_cost_per_token") }, "Output Cost")), /* @__PURE__ */ import_react10.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "max_input_tokens" ? sortDirection : false }, /* @__PURE__ */ import_react10.default.createElement(import_TableSortLabel2.default, { active: sortKey === "max_input_tokens", direction: sortKey === "max_input_tokens" ? sortDirection : "asc", onClick: () => handleSort("max_input_tokens") }, "Max Input")), /* @__PURE__ */ import_react10.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "max_output_tokens" ? sortDirection : false }, /* @__PURE__ */ import_react10.default.createElement(import_TableSortLabel2.default, { active: sortKey === "max_output_tokens", direction: sortKey === "max_output_tokens" ? sortDirection : "asc", onClick: () => handleSort("max_output_tokens") }, "Max Output")), /* @__PURE__ */ import_react10.default.createElement(import_TableCell5.default, null, "Capabilities"))), /* @__PURE__ */ import_react10.default.createElement(import_TableBody5.default, null, filteredModels.map((m) => /* @__PURE__ */ import_react10.default.createElement(import_TableRow5.default, { key: m.model_name, hover: true }, /* @__PURE__ */ import_react10.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react10.default.createElement(import_Box10.default, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ import_react10.default.createElement(import_Tooltip.default, { title: m.model_name, placement: "top" }, /* @__PURE__ */ import_react10.default.createElement(
           "span",
           {
             role: "button",
@@ -3729,9 +3738,9 @@ var init_ModelsTable = __esm({
             onKeyDown: (e) => e.key === "Enter" && handleCopyModelId(m.model_name),
             style: { cursor: "pointer", display: "inline-flex" }
           },
-          /* @__PURE__ */ import_react9.default.createElement(TagChip, { label: m.model_name, title: "Copy model ID" })
-        )), /* @__PURE__ */ import_react9.default.createElement(import_Tooltip.default, { title: "Copy model ID" }, /* @__PURE__ */ import_react9.default.createElement(
-          import_Box9.default,
+          /* @__PURE__ */ import_react10.default.createElement(TagChip, { label: m.model_name, title: "Copy model ID" })
+        )), /* @__PURE__ */ import_react10.default.createElement(import_Tooltip.default, { title: "Copy model ID" }, /* @__PURE__ */ import_react10.default.createElement(
+          import_Box10.default,
           {
             component: "span",
             role: "button",
@@ -3741,9 +3750,9 @@ var init_ModelsTable = __esm({
             sx: quietIconButtonSx("accent"),
             style: { cursor: "pointer", display: "inline-flex" }
           },
-          /* @__PURE__ */ import_react9.default.createElement(import_ContentCopy.default, { sx: { fontSize: 14 } })
-        )))), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react9.default.createElement(
-          import_Box9.default,
+          /* @__PURE__ */ import_react10.default.createElement(import_ContentCopy.default, { sx: { fontSize: 14 } })
+        )))), /* @__PURE__ */ import_react10.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react10.default.createElement(
+          import_Box10.default,
           {
             component: "span",
             sx: {
@@ -3754,13 +3763,13 @@ var init_ModelsTable = __esm({
               fontSize: 11,
               fontWeight: 600,
               textTransform: "capitalize",
-              bgcolor: (0, import_styles6.alpha)(modeColor(m.mode), 0.1),
+              bgcolor: (0, import_styles7.alpha)(modeColor(m.mode), 0.1),
               color: modeColor(m.mode)
             }
           },
           m.mode
-        )), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right" }, /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.input_cost_per_token))), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right" }, /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.output_cost_per_token))), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right" }, /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_input_tokens))), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right" }, /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_output_tokens))), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" } }, m.supports_function_calling && /* @__PURE__ */ import_react9.default.createElement(TagChip, { label: "Fn", title: "Function calling" }), m.supports_vision && /* @__PURE__ */ import_react9.default.createElement(TagChip, { label: "\u{1F441}", title: "Vision" })))))))),
-        /* @__PURE__ */ import_react9.default.createElement(
+        )), /* @__PURE__ */ import_react10.default.createElement(import_TableCell5.default, { align: "right" }, /* @__PURE__ */ import_react10.default.createElement(import_Typography10.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.input_cost_per_token))), /* @__PURE__ */ import_react10.default.createElement(import_TableCell5.default, { align: "right" }, /* @__PURE__ */ import_react10.default.createElement(import_Typography10.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.output_cost_per_token))), /* @__PURE__ */ import_react10.default.createElement(import_TableCell5.default, { align: "right" }, /* @__PURE__ */ import_react10.default.createElement(import_Typography10.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_input_tokens))), /* @__PURE__ */ import_react10.default.createElement(import_TableCell5.default, { align: "right" }, /* @__PURE__ */ import_react10.default.createElement(import_Typography10.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_output_tokens))), /* @__PURE__ */ import_react10.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react10.default.createElement(import_Box10.default, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" } }, m.supports_function_calling && /* @__PURE__ */ import_react10.default.createElement(TagChip, { label: "Fn", title: "Function calling" }), m.supports_vision && /* @__PURE__ */ import_react10.default.createElement(TagChip, { label: "\u{1F441}", title: "Vision" })))))))),
+        /* @__PURE__ */ import_react10.default.createElement(
           import_Snackbar.default,
           {
             open: copiedSnackbar,
@@ -3768,7 +3777,7 @@ var init_ModelsTable = __esm({
             onClose: () => setCopiedSnackbar(false),
             anchorOrigin: { vertical: "bottom", horizontal: "center" }
           },
-          /* @__PURE__ */ import_react9.default.createElement(import_Alert4.default, { severity: "success", variant: "filled", sx: { fontSize: 13 } }, "Model ID copied to clipboard")
+          /* @__PURE__ */ import_react10.default.createElement(import_Alert4.default, { severity: "success", variant: "filled", sx: { fontSize: 13 } }, "Model ID copied to clipboard")
         )
       );
     };
@@ -3796,10 +3805,10 @@ function formatDateTime(iso) {
 }
 function renderAuditLogBody(loading, entries) {
   if (loading) {
-    return /* @__PURE__ */ import_react10.default.createElement(import_TableRow6.default, null, /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, { colSpan: 6, sx: { py: 2 } }, /* @__PURE__ */ import_react10.default.createElement(import_Skeleton5.default, { variant: "rounded", height: 160 })));
+    return /* @__PURE__ */ import_react11.default.createElement(import_TableRow6.default, null, /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, { colSpan: 6, sx: { py: 2 } }, /* @__PURE__ */ import_react11.default.createElement(import_Skeleton5.default, { variant: "rounded", height: 160 })));
   }
   if (entries.length === 0) {
-    return /* @__PURE__ */ import_react10.default.createElement(import_TableRow6.default, null, /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, { colSpan: 6 }, /* @__PURE__ */ import_react10.default.createElement(
+    return /* @__PURE__ */ import_react11.default.createElement(import_TableRow6.default, null, /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, { colSpan: 6 }, /* @__PURE__ */ import_react11.default.createElement(
       EmptyState,
       {
         message: "No audit events found",
@@ -3807,15 +3816,15 @@ function renderAuditLogBody(loading, entries) {
       }
     )));
   }
-  return entries.map((entry) => /* @__PURE__ */ import_react10.default.createElement(DetailRow, { key: entry.id, entry }));
+  return entries.map((entry) => /* @__PURE__ */ import_react11.default.createElement(DetailRow, { key: entry.id, entry }));
 }
-var import_react10, import_Box10, import_Typography10, import_Table6, import_TableBody6, import_TableCell6, import_TableContainer6, import_TableHead6, import_TableRow6, import_TablePagination, import_TextField6, import_MenuItem5, import_Skeleton5, import_Collapse3, import_IconButton6, import_Alert5, import_styles7, import_icons_material8, import_react_use2, ACTION_TONES, TABLE_LABELS, DetailRow, AuditLog;
+var import_react11, import_Box11, import_Typography11, import_Table6, import_TableBody6, import_TableCell6, import_TableContainer6, import_TableHead6, import_TableRow6, import_TablePagination, import_TextField6, import_MenuItem5, import_Skeleton5, import_Collapse3, import_IconButton6, import_Alert5, import_styles8, import_icons_material8, import_react_use2, ACTION_TONES, TABLE_LABELS, DetailRow, AuditLog;
 var init_AuditLog = __esm({
   "src/components/AuditLog.tsx"() {
     "use strict";
-    import_react10 = __toESM(require("react"));
-    import_Box10 = __toESM(require("@mui/material/Box"));
-    import_Typography10 = __toESM(require("@mui/material/Typography"));
+    import_react11 = __toESM(require("react"));
+    import_Box11 = __toESM(require("@mui/material/Box"));
+    import_Typography11 = __toESM(require("@mui/material/Typography"));
     import_Table6 = __toESM(require("@mui/material/Table"));
     import_TableBody6 = __toESM(require("@mui/material/TableBody"));
     import_TableCell6 = __toESM(require("@mui/material/TableCell"));
@@ -3829,7 +3838,7 @@ var init_AuditLog = __esm({
     import_Collapse3 = __toESM(require("@mui/material/Collapse"));
     import_IconButton6 = __toESM(require("@mui/material/IconButton"));
     import_Alert5 = __toESM(require("@mui/material/Alert"));
-    import_styles7 = require("@mui/material/styles");
+    import_styles8 = require("@mui/material/styles");
     import_icons_material8 = require("@mui/icons-material");
     import_react_use2 = require("react-use");
     init_ui();
@@ -3848,9 +3857,9 @@ var init_AuditLog = __esm({
       LiteLLM_UserTable: "User"
     };
     DetailRow = ({ entry }) => {
-      const [open, setOpen] = (0, import_react10.useState)(false);
+      const [open, setOpen] = (0, import_react11.useState)(false);
       const hasDetail = entry.before_value || entry.updated_values;
-      return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(import_TableRow6.default, null, /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, { sx: { width: 40, pr: 0 } }, hasDetail && /* @__PURE__ */ import_react10.default.createElement(
+      return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(import_TableRow6.default, null, /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, { sx: { width: 40, pr: 0 } }, hasDetail && /* @__PURE__ */ import_react11.default.createElement(
         import_IconButton6.default,
         {
           size: "small",
@@ -3863,9 +3872,9 @@ var init_AuditLog = __esm({
             transition: theme.transitions.create("transform")
           })
         },
-        /* @__PURE__ */ import_react10.default.createElement(import_icons_material8.KeyboardArrowDown, { fontSize: "small" })
-      )), /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, { sx: { whiteSpace: "nowrap" } }, /* @__PURE__ */ import_react10.default.createElement(import_Typography10.default, { variant: "body2", color: "text.secondary" }, formatDateTime(entry.updated_at))), /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, null, entry.action && /* @__PURE__ */ import_react10.default.createElement(StatusPill, { label: entry.action, tone: actionTone(entry.action) })), /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, null, /* @__PURE__ */ import_react10.default.createElement(import_Typography10.default, { variant: "body2" }, prettyTableName(entry.table_name))), /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, null, /* @__PURE__ */ import_react10.default.createElement(
-        import_Typography10.default,
+        /* @__PURE__ */ import_react11.default.createElement(import_icons_material8.KeyboardArrowDown, { fontSize: "small" })
+      )), /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, { sx: { whiteSpace: "nowrap" } }, /* @__PURE__ */ import_react11.default.createElement(import_Typography11.default, { variant: "body2", color: "text.secondary" }, formatDateTime(entry.updated_at))), /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, null, entry.action && /* @__PURE__ */ import_react11.default.createElement(StatusPill, { label: entry.action, tone: actionTone(entry.action) })), /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, null, /* @__PURE__ */ import_react11.default.createElement(import_Typography11.default, { variant: "body2" }, prettyTableName(entry.table_name))), /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, null, /* @__PURE__ */ import_react11.default.createElement(
+        import_Typography11.default,
         {
           variant: "body2",
           component: "code",
@@ -3874,8 +3883,8 @@ var init_AuditLog = __esm({
           sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 12 }
         },
         entry.object_id ? entry.object_id.slice(0, 20) + (entry.object_id.length > 20 ? "\u2026" : "") : "\u2014"
-      )), /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, null, entry.changed_by ?? "\u2014")), hasDetail && /* @__PURE__ */ import_react10.default.createElement(import_TableRow6.default, { sx: { "&&:hover": { bgcolor: "transparent" } } }, /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } } }, /* @__PURE__ */ import_react10.default.createElement(import_Collapse3.default, { in: open, unmountOnExit: true }, /* @__PURE__ */ import_react10.default.createElement(
-        import_Box10.default,
+      )), /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, null, entry.changed_by ?? "\u2014")), hasDetail && /* @__PURE__ */ import_react11.default.createElement(import_TableRow6.default, { sx: { "&&:hover": { bgcolor: "transparent" } } }, /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } } }, /* @__PURE__ */ import_react11.default.createElement(import_Collapse3.default, { in: open, unmountOnExit: true }, /* @__PURE__ */ import_react11.default.createElement(
+        import_Box11.default,
         {
           display: "flex",
           gap: 2,
@@ -3884,11 +3893,11 @@ var init_AuditLog = __esm({
             p: 2,
             mb: 1.5,
             borderRadius: 1.5,
-            bgcolor: (0, import_styles7.alpha)(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.05 : 0.03)
+            bgcolor: (0, import_styles8.alpha)(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.05 : 0.03)
           })
         },
-        entry.before_value && /* @__PURE__ */ import_react10.default.createElement(import_Box10.default, { flex: 1, minWidth: 200 }, /* @__PURE__ */ import_react10.default.createElement(
-          import_Typography10.default,
+        entry.before_value && /* @__PURE__ */ import_react11.default.createElement(import_Box11.default, { flex: 1, minWidth: 200 }, /* @__PURE__ */ import_react11.default.createElement(
+          import_Typography11.default,
           {
             variant: "caption",
             color: "text.secondary",
@@ -3897,9 +3906,9 @@ var init_AuditLog = __esm({
             sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" }
           },
           "Before"
-        ), /* @__PURE__ */ import_react10.default.createElement(import_Typography10.default, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.before_value, null, 2))),
-        entry.updated_values && /* @__PURE__ */ import_react10.default.createElement(import_Box10.default, { flex: 1, minWidth: 200 }, /* @__PURE__ */ import_react10.default.createElement(
-          import_Typography10.default,
+        ), /* @__PURE__ */ import_react11.default.createElement(import_Typography11.default, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.before_value, null, 2))),
+        entry.updated_values && /* @__PURE__ */ import_react11.default.createElement(import_Box11.default, { flex: 1, minWidth: 200 }, /* @__PURE__ */ import_react11.default.createElement(
+          import_Typography11.default,
           {
             variant: "caption",
             color: "text.secondary",
@@ -3908,14 +3917,14 @@ var init_AuditLog = __esm({
             sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" }
           },
           "After"
-        ), /* @__PURE__ */ import_react10.default.createElement(import_Typography10.default, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.updated_values, null, 2)))
+        ), /* @__PURE__ */ import_react11.default.createElement(import_Typography11.default, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.updated_values, null, 2)))
       )))));
     };
     AuditLog = ({ api }) => {
-      const [page, setPage] = (0, import_react10.useState)(0);
-      const [pageSize, setPageSize] = (0, import_react10.useState)(25);
-      const [filters, setFilters] = (0, import_react10.useState)({});
-      const fetchParams = (0, import_react10.useMemo)(
+      const [page, setPage] = (0, import_react11.useState)(0);
+      const [pageSize, setPageSize] = (0, import_react11.useState)(25);
+      const [filters, setFilters] = (0, import_react11.useState)({});
+      const fetchParams = (0, import_react11.useMemo)(
         () => ({ page: page + 1, page_size: pageSize, ...filters }),
         [page, pageSize, filters]
       );
@@ -3925,13 +3934,13 @@ var init_AuditLog = __esm({
       );
       const entries = value?.audit_logs ?? [];
       const total = value?.total ?? 0;
-      return /* @__PURE__ */ import_react10.default.createElement(
+      return /* @__PURE__ */ import_react11.default.createElement(
         SectionCard,
         {
           title: "Audit Log",
           subtitle: loading ? "Loading\u2026" : `${total.toLocaleString()} event${total === 1 ? "" : "s"}`,
           flush: true,
-          actions: /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(
+          actions: /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(
             import_TextField6.default,
             {
               size: "small",
@@ -3944,12 +3953,12 @@ var init_AuditLog = __esm({
               },
               sx: { minWidth: 150 }
             },
-            /* @__PURE__ */ import_react10.default.createElement(import_MenuItem5.default, { value: "" }, "All actions"),
-            /* @__PURE__ */ import_react10.default.createElement(import_MenuItem5.default, { value: "created" }, "Created"),
-            /* @__PURE__ */ import_react10.default.createElement(import_MenuItem5.default, { value: "updated" }, "Updated"),
-            /* @__PURE__ */ import_react10.default.createElement(import_MenuItem5.default, { value: "deleted" }, "Deleted"),
-            /* @__PURE__ */ import_react10.default.createElement(import_MenuItem5.default, { value: "blocked" }, "Blocked")
-          ), /* @__PURE__ */ import_react10.default.createElement(
+            /* @__PURE__ */ import_react11.default.createElement(import_MenuItem5.default, { value: "" }, "All actions"),
+            /* @__PURE__ */ import_react11.default.createElement(import_MenuItem5.default, { value: "created" }, "Created"),
+            /* @__PURE__ */ import_react11.default.createElement(import_MenuItem5.default, { value: "updated" }, "Updated"),
+            /* @__PURE__ */ import_react11.default.createElement(import_MenuItem5.default, { value: "deleted" }, "Deleted"),
+            /* @__PURE__ */ import_react11.default.createElement(import_MenuItem5.default, { value: "blocked" }, "Blocked")
+          ), /* @__PURE__ */ import_react11.default.createElement(
             import_TextField6.default,
             {
               size: "small",
@@ -3962,13 +3971,13 @@ var init_AuditLog = __esm({
               },
               sx: { minWidth: 150 }
             },
-            /* @__PURE__ */ import_react10.default.createElement(import_MenuItem5.default, { value: "" }, "All tables"),
-            /* @__PURE__ */ import_react10.default.createElement(import_MenuItem5.default, { value: "LiteLLM_VerificationToken" }, "Key"),
-            /* @__PURE__ */ import_react10.default.createElement(import_MenuItem5.default, { value: "LiteLLM_TeamTable" }, "Team"),
-            /* @__PURE__ */ import_react10.default.createElement(import_MenuItem5.default, { value: "LiteLLM_TeamMembership" }, "Team member"),
-            /* @__PURE__ */ import_react10.default.createElement(import_MenuItem5.default, { value: "LiteLLM_ObjectPermissionTable" }, "Team access (KB / MCP)"),
-            /* @__PURE__ */ import_react10.default.createElement(import_MenuItem5.default, { value: "LiteLLM_UserTable" }, "User")
-          ), /* @__PURE__ */ import_react10.default.createElement(
+            /* @__PURE__ */ import_react11.default.createElement(import_MenuItem5.default, { value: "" }, "All tables"),
+            /* @__PURE__ */ import_react11.default.createElement(import_MenuItem5.default, { value: "LiteLLM_VerificationToken" }, "Key"),
+            /* @__PURE__ */ import_react11.default.createElement(import_MenuItem5.default, { value: "LiteLLM_TeamTable" }, "Team"),
+            /* @__PURE__ */ import_react11.default.createElement(import_MenuItem5.default, { value: "LiteLLM_TeamMembership" }, "Team member"),
+            /* @__PURE__ */ import_react11.default.createElement(import_MenuItem5.default, { value: "LiteLLM_ObjectPermissionTable" }, "Team access (KB / MCP)"),
+            /* @__PURE__ */ import_react11.default.createElement(import_MenuItem5.default, { value: "LiteLLM_UserTable" }, "User")
+          ), /* @__PURE__ */ import_react11.default.createElement(
             import_TextField6.default,
             {
               size: "small",
@@ -3982,9 +3991,9 @@ var init_AuditLog = __esm({
             }
           ))
         },
-        error && /* @__PURE__ */ import_react10.default.createElement(import_Box10.default, { px: 2.5, pb: 2 }, /* @__PURE__ */ import_react10.default.createElement(import_Alert5.default, { severity: "error" }, error.message)),
-        /* @__PURE__ */ import_react10.default.createElement(import_TableContainer6.default, null, /* @__PURE__ */ import_react10.default.createElement(import_Table6.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react10.default.createElement(import_TableHead6.default, null, /* @__PURE__ */ import_react10.default.createElement(import_TableRow6.default, null, /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, { sx: { width: 40 } }), /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, null, "Time"), /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, null, "Action"), /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, null, "Table"), /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, null, "Object ID"), /* @__PURE__ */ import_react10.default.createElement(import_TableCell6.default, null, "Changed By"))), /* @__PURE__ */ import_react10.default.createElement(import_TableBody6.default, null, renderAuditLogBody(loading, entries)))),
-        /* @__PURE__ */ import_react10.default.createElement(
+        error && /* @__PURE__ */ import_react11.default.createElement(import_Box11.default, { px: 2.5, pb: 2 }, /* @__PURE__ */ import_react11.default.createElement(import_Alert5.default, { severity: "error" }, error.message)),
+        /* @__PURE__ */ import_react11.default.createElement(import_TableContainer6.default, null, /* @__PURE__ */ import_react11.default.createElement(import_Table6.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react11.default.createElement(import_TableHead6.default, null, /* @__PURE__ */ import_react11.default.createElement(import_TableRow6.default, null, /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, { sx: { width: 40 } }), /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, null, "Time"), /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, null, "Action"), /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, null, "Table"), /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, null, "Object ID"), /* @__PURE__ */ import_react11.default.createElement(import_TableCell6.default, null, "Changed By"))), /* @__PURE__ */ import_react11.default.createElement(import_TableBody6.default, null, renderAuditLogBody(loading, entries)))),
+        /* @__PURE__ */ import_react11.default.createElement(
           import_TablePagination.default,
           {
             component: "div",
@@ -4053,17 +4062,17 @@ function initDateRange() {
   else start.setDate(start.getDate() - 7);
   return { start, end };
 }
-var import_react11, import_Box11, import_Snackbar2, import_Alert6, import_CircularProgress6, import_Typography11, import_Paper7, import_Tabs2, import_Tab2, import_Grid2, import_react_router_dom, import_react_use3, import_core_plugin_api4, import_plugin_permission_react, PERIOD_LS_KEY2, PAGE_TABS, isPageTab, LiteLLMPage;
+var import_react12, import_Box12, import_Snackbar2, import_Alert6, import_CircularProgress6, import_Typography12, import_Paper8, import_Tabs2, import_Tab2, import_Grid2, import_react_router_dom, import_react_use3, import_core_plugin_api4, import_plugin_permission_react, PERIOD_LS_KEY2, PAGE_TABS, isPageTab, LiteLLMPage;
 var init_LiteLLMPage = __esm({
   "src/components/LiteLLMPage.tsx"() {
     "use strict";
-    import_react11 = __toESM(require("react"));
-    import_Box11 = __toESM(require("@mui/material/Box"));
+    import_react12 = __toESM(require("react"));
+    import_Box12 = __toESM(require("@mui/material/Box"));
     import_Snackbar2 = __toESM(require("@mui/material/Snackbar"));
     import_Alert6 = __toESM(require("@mui/material/Alert"));
     import_CircularProgress6 = __toESM(require("@mui/material/CircularProgress"));
-    import_Typography11 = __toESM(require("@mui/material/Typography"));
-    import_Paper7 = __toESM(require("@mui/material/Paper"));
+    import_Typography12 = __toESM(require("@mui/material/Typography"));
+    import_Paper8 = __toESM(require("@mui/material/Paper"));
     import_Tabs2 = __toESM(require("@mui/material/Tabs"));
     import_Tab2 = __toESM(require("@mui/material/Tab"));
     import_Grid2 = __toESM(require("@mui/material/Grid"));
@@ -4073,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();
@@ -4087,8 +4096,8 @@ var init_LiteLLMPage = __esm({
     isPageTab = (v) => !!v && PAGE_TABS.includes(v);
     LiteLLMPage = () => {
       const api = (0, import_core_plugin_api4.useApi)(liteLlmApiRef);
-      const [dateRange, setDateRange] = (0, import_react11.useState)(initDateRange);
-      const [currentPreset, setCurrentPreset] = (0, import_react11.useState)(() => {
+      const [dateRange, setDateRange] = (0, import_react12.useState)(initDateRange);
+      const [currentPreset, setCurrentPreset] = (0, import_react12.useState)(() => {
         try {
           return localStorage.getItem(PERIOD_LS_KEY2) ?? "7d";
         } catch {
@@ -4096,11 +4105,26 @@ var init_LiteLLMPage = __esm({
         }
       });
       const [searchParams, setSearchParams] = (0, import_react_router_dom.useSearchParams)();
-      const [activeTab, setActiveTab] = (0, import_react11.useState)(() => {
+      const [activeTab, setActiveTab] = (0, import_react12.useState)(() => {
         const t = searchParams.get("tab");
         return isPageTab(t) ? t : "overview";
       });
-      const selectTab = (0, import_react11.useCallback)(
+      const [generateDialogOpen, setGenerateDialogOpen] = (0, import_react12.useState)(
+        () => searchParams.get("generate") === "1"
+      );
+      (0, import_react12.useEffect)(() => {
+        if (searchParams.get("generate") !== "1") return;
+        setGenerateDialogOpen(true);
+        setSearchParams(
+          (prev) => {
+            const next = new URLSearchParams(prev);
+            next.delete("generate");
+            return next;
+          },
+          { replace: true }
+        );
+      }, [searchParams, setSearchParams]);
+      const selectTab = (0, import_react12.useCallback)(
         (tab) => {
           setActiveTab(tab);
           setSearchParams(
@@ -4114,11 +4138,12 @@ var init_LiteLLMPage = __esm({
         },
         [setSearchParams]
       );
-      const [snackbar, setSnackbar] = (0, import_react11.useState)(null);
-      const [generateDialogOpen, setGenerateDialogOpen] = (0, import_react11.useState)(false);
-      const [manageTeam, setManageTeam] = (0, import_react11.useState)(null);
-      const [teamUsageCache, setTeamUsageCache] = (0, import_react11.useState)({});
-      const [teamUsageLoading, setTeamUsageLoading] = (0, import_react11.useState)({});
+      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)(
         () => api.getUserInfo(),
         [api]
@@ -4162,7 +4187,7 @@ var init_LiteLLMPage = __esm({
         async () => objectPermsEnabled ? api.getMcpServers().catch(() => []) : [],
         [api, objectPermsEnabled]
       );
-      const teams = (0, import_react11.useMemo)(() => {
+      const teams = (0, import_react12.useMemo)(() => {
         if (!allTeams?.length) return [];
         if (!userInfo) return allTeams;
         const userId = userInfo.user_id;
@@ -4179,7 +4204,7 @@ var init_LiteLLMPage = __esm({
         const endDate = dateRange.end.toISOString().split("T")[0];
         return api.getUsage(startDate, endDate);
       }, [api, dateRange]);
-      const handleDateRangeChange = (0, import_react11.useCallback)((range, preset) => {
+      const handleDateRangeChange = (0, import_react12.useCallback)((range, preset) => {
         setDateRange(range);
         if (preset) {
           setCurrentPreset(preset);
@@ -4187,7 +4212,7 @@ var init_LiteLLMPage = __esm({
         setTeamUsageCache({});
         setTeamUsageLoading({});
       }, [setDateRange, setCurrentPreset]);
-      const loadTeamUsage = (0, import_react11.useCallback)(async (teamId) => {
+      const loadTeamUsage = (0, import_react12.useCallback)(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
         setTeamUsageLoading((prev) => ({ ...prev, [teamId]: true }));
         try {
@@ -4201,7 +4226,7 @@ var init_LiteLLMPage = __esm({
           setTeamUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
       }, [api, dateRange, teamUsageCache, teamUsageLoading]);
-      const allowedModels = (0, import_react11.useMemo)(() => {
+      const allowedModels = (0, import_react12.useMemo)(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
         const teamModels = teams?.flatMap((t) => t.models ?? []);
@@ -4214,7 +4239,7 @@ var init_LiteLLMPage = __esm({
         ]);
         return allModels.filter((m) => allowed.has(m.model_name));
       }, [allModels, userInfo, teams]);
-      const handleGenerateKey = (0, import_react11.useCallback)(
+      const handleGenerateKey = (0, import_react12.useCallback)(
         async (request) => {
           try {
             const response = await api.generateKey(request);
@@ -4228,7 +4253,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleUpdateKey = (0, import_react11.useCallback)(
+      const handleUpdateKey = (0, import_react12.useCallback)(
         async (keyId, request) => {
           try {
             await api.updateKey(keyId, request);
@@ -4241,7 +4266,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleBlockKey = (0, import_react11.useCallback)(
+      const handleBlockKey = (0, import_react12.useCallback)(
         async (keyId) => {
           try {
             await api.blockKey(keyId);
@@ -4253,7 +4278,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleUnblockKey = (0, import_react11.useCallback)(
+      const handleUnblockKey = (0, import_react12.useCallback)(
         async (keyId) => {
           try {
             await api.unblockKey(keyId);
@@ -4265,7 +4290,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleResetKeySpend = (0, import_react11.useCallback)(
+      const handleResetKeySpend = (0, import_react12.useCallback)(
         async (keyId) => {
           try {
             await api.resetKeySpend(keyId);
@@ -4277,7 +4302,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleDeleteKey = (0, import_react11.useCallback)(
+      const handleDeleteKey = (0, import_react12.useCallback)(
         async (keyId) => {
           try {
             await api.deleteKey(keyId);
@@ -4294,7 +4319,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handlePruneExpiredKeys = (0, import_react11.useCallback)(
+      const handlePruneExpiredKeys = (0, import_react12.useCallback)(
         async () => {
           try {
             const result = await api.pruneExpiredKeys();
@@ -4309,14 +4334,14 @@ var init_LiteLLMPage = __esm({
       );
       const isInitialLoading = userLoading && !userInfo;
       if (isInitialLoading) {
-        return /* @__PURE__ */ import_react11.default.createElement(import_Box11.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ import_react11.default.createElement(import_CircularProgress6.default, null));
+        return /* @__PURE__ */ import_react12.default.createElement(import_Box12.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ import_react12.default.createElement(import_CircularProgress6.default, null));
       }
       if (userError || !userInfo) {
         const isProvisioningEnabled = userError?.body?.provisioning === true;
         const hint = userError?.body?.hint;
-        return /* @__PURE__ */ import_react11.default.createElement(import_Box11.default, { p: 3 }, /* @__PURE__ */ import_react11.default.createElement(import_Paper7.default, { sx: { p: 3 } }, /* @__PURE__ */ import_react11.default.createElement(import_Typography11.default, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ import_react11.default.createElement(import_Typography11.default, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ import_react11.default.createElement(import_Typography11.default, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ import_react11.default.createElement(import_Typography11.default, { variant: "body2", color: "text.secondary" }, isProvisioningEnabled ? "Auto-provisioning is enabled but failed. Check the backend logs." : "Set litellm.provisioning.enabled: true in app-config.yaml to enable auto-provisioning, or ask your administrator to create the account manually.")));
+        return /* @__PURE__ */ import_react12.default.createElement(import_Box12.default, { p: 3 }, /* @__PURE__ */ import_react12.default.createElement(import_Paper8.default, { sx: { p: 3 } }, /* @__PURE__ */ import_react12.default.createElement(import_Typography12.default, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ import_react12.default.createElement(import_Typography12.default, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ import_react12.default.createElement(import_Typography12.default, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ import_react12.default.createElement(import_Typography12.default, { variant: "body2", color: "text.secondary" }, isProvisioningEnabled ? "Auto-provisioning is enabled but failed. Check the backend logs." : "Set litellm.provisioning.enabled: true in app-config.yaml to enable auto-provisioning, or ask your administrator to create the account manually.")));
       }
-      const pageTabs = /* @__PURE__ */ import_react11.default.createElement(
+      const pageTabs = /* @__PURE__ */ import_react12.default.createElement(
         import_Tabs2.default,
         {
           value: activeTab,
@@ -4329,13 +4354,13 @@ var init_LiteLLMPage = __esm({
             '& [class*="MuiTab-root"]': { minHeight: 44, textTransform: "none", fontSize: 14 }
           }
         },
-        /* @__PURE__ */ import_react11.default.createElement(import_Tab2.default, { label: "Overview", value: "overview" }),
-        /* @__PURE__ */ import_react11.default.createElement(import_Tab2.default, { label: "Keys", value: "keys" }),
-        /* @__PURE__ */ import_react11.default.createElement(import_Tab2.default, { label: "Teams", value: "teams" }),
-        /* @__PURE__ */ import_react11.default.createElement(import_Tab2.default, { label: "Models", value: "models" }),
-        userInfo.can_view_audit && /* @__PURE__ */ import_react11.default.createElement(import_Tab2.default, { label: "Audit Log", value: "audit" })
+        /* @__PURE__ */ import_react12.default.createElement(import_Tab2.default, { label: "Overview", value: "overview" }),
+        /* @__PURE__ */ import_react12.default.createElement(import_Tab2.default, { label: "Keys", value: "keys" }),
+        /* @__PURE__ */ import_react12.default.createElement(import_Tab2.default, { label: "Teams", value: "teams" }),
+        /* @__PURE__ */ import_react12.default.createElement(import_Tab2.default, { label: "Models", value: "models" }),
+        userInfo.can_view_audit && /* @__PURE__ */ import_react12.default.createElement(import_Tab2.default, { label: "Audit Log", value: "audit" })
       );
-      return /* @__PURE__ */ import_react11.default.createElement(import_Box11.default, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ import_react11.default.createElement(
+      return /* @__PURE__ */ import_react12.default.createElement(import_Box12.default, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ import_react12.default.createElement(
         DashboardHeader,
         {
           userInfo,
@@ -4345,7 +4370,7 @@ var init_LiteLLMPage = __esm({
           onGenerateKeyClick: () => setGenerateDialogOpen(true),
           tabs: pageTabs
         }
-      ), activeTab === "overview" && /* @__PURE__ */ import_react11.default.createElement(import_Grid2.default, { container: true, spacing: 2, alignItems: "flex-start" }, /* @__PURE__ */ import_react11.default.createElement(import_Grid2.default, { item: true, xs: 12, lg: 8 }, /* @__PURE__ */ import_react11.default.createElement(
+      ), activeTab === "overview" && /* @__PURE__ */ import_react12.default.createElement(import_Grid2.default, { container: true, spacing: 2, alignItems: "flex-start" }, /* @__PURE__ */ import_react12.default.createElement(import_Grid2.default, { item: true, xs: 12, lg: 8 }, /* @__PURE__ */ import_react12.default.createElement(
         UsageStats,
         {
           usage: usage ?? null,
@@ -4356,17 +4381,15 @@ var init_LiteLLMPage = __esm({
           loading: usageLoading,
           userInfo
         }
-      )), /* @__PURE__ */ import_react11.default.createElement(import_Grid2.default, { item: true, xs: 12, lg: 4 }, /* @__PURE__ */ import_react11.default.createElement(LiteLLMBudgetWidget, { compact: true, collapsible: true }))), activeTab === "keys" && /* @__PURE__ */ import_react11.default.createElement(
+      )), /* @__PURE__ */ import_react12.default.createElement(import_Grid2.default, { item: true, xs: 12, lg: 4 }, /* @__PURE__ */ import_react12.default.createElement(LiteLLMBudgetWidget, { compact: true, collapsible: true }))), activeTab === "keys" && /* @__PURE__ */ import_react12.default.createElement(
         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
         }
@@ -4375,7 +4398,7 @@ var init_LiteLLMPage = __esm({
         for (const t of managedTeams ?? []) teamsById.set(t.team_id, t);
         for (const t of teams ?? []) teamsById.set(t.team_id, t);
         const visibleTeams = Array.from(teamsById.values());
-        return /* @__PURE__ */ import_react11.default.createElement(
+        return /* @__PURE__ */ import_react12.default.createElement(
           TeamUsage,
           {
             teams: visibleTeams,
@@ -4391,27 +4414,34 @@ var init_LiteLLMPage = __esm({
             onCreateTeam: () => setManageTeam({ mode: "create" })
           }
         );
-      })(), activeTab === "models" && /* @__PURE__ */ import_react11.default.createElement(
+      })(), activeTab === "models" && /* @__PURE__ */ import_react12.default.createElement(
         ModelsTable,
         {
           allModels: allModels ?? [],
           teams: teams ?? [],
           loading: modelsLoading
         }
-      ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ import_react11.default.createElement(AuditLog, { api }), /* @__PURE__ */ import_react11.default.createElement(
-        GenerateKeyDialog,
+      ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ import_react12.default.createElement(AuditLog, { api }), /* @__PURE__ */ import_react12.default.createElement(
+        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_react11.default.createElement(
+      ), /* @__PURE__ */ import_react12.default.createElement(
         ManageTeamDialog,
         {
           open: !!manageTeam,
@@ -4473,7 +4503,7 @@ var init_LiteLLMPage = __esm({
             refreshTeams();
           }
         }
-      ), /* @__PURE__ */ import_react11.default.createElement(
+      ), /* @__PURE__ */ import_react12.default.createElement(
         import_Snackbar2.default,
         {
           open: !!snackbar,
@@ -4481,7 +4511,7 @@ var init_LiteLLMPage = __esm({
           onClose: () => setSnackbar(null),
           anchorOrigin: { vertical: "bottom", horizontal: "right" }
         },
-        snackbar ? /* @__PURE__ */ import_react11.default.createElement(import_Alert6.default, { severity: snackbar.severity, onClose: () => setSnackbar(null) }, snackbar.message) : void 0
+        snackbar ? /* @__PURE__ */ import_react12.default.createElement(import_Alert6.default, { severity: snackbar.severity, onClose: () => setSnackbar(null) }, snackbar.message) : void 0
       ));
     };
   }
@@ -4492,6 +4522,7 @@ var index_exports = {};
 __export(index_exports, {
   DashboardHeader: () => DashboardHeader,
   GenerateKeyDialog: () => GenerateKeyDialog,
+  KeyFormDialog: () => KeyFormDialog,
   KeysTable: () => KeysTable,
   LiteLLMBudgetGauges: () => LiteLLMBudgetGauges,
   LiteLLMBudgetWidget: () => LiteLLMBudgetWidget,
@@ -4512,7 +4543,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/plugin.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_icons_material9 = require("@mui/icons-material");
 var import_frontend_plugin_api = require("@backstage/frontend-plugin-api");
 init_api();
@@ -4527,10 +4558,10 @@ var liteLlmPage = import_frontend_plugin_api.PageBlueprint.make({
   params: {
     path: "/litellm",
     title: "LiteLLM",
-    icon: /* @__PURE__ */ import_react12.default.createElement(import_icons_material9.TrendingUp, null),
+    icon: /* @__PURE__ */ import_react13.default.createElement(import_icons_material9.TrendingUp, null),
     loader: async () => {
       const { LiteLLMPage: LiteLLMPage2 } = await Promise.resolve().then(() => (init_LiteLLMPage(), LiteLLMPage_exports));
-      return /* @__PURE__ */ import_react12.default.createElement(LiteLLMPage2, null);
+      return /* @__PURE__ */ import_react13.default.createElement(LiteLLMPage2, null);
     }
   }
 });
@@ -4547,10 +4578,10 @@ init_UsageStats();
 init_TeamUsage();
 
 // src/components/LiteLLMHomeWidget.tsx
-var import_react13 = __toESM(require("react"));
-var import_Paper8 = __toESM(require("@mui/material/Paper"));
-var import_Box12 = __toESM(require("@mui/material/Box"));
-var import_Typography12 = __toESM(require("@mui/material/Typography"));
+var import_react14 = __toESM(require("react"));
+var import_Paper9 = __toESM(require("@mui/material/Paper"));
+var import_Box13 = __toESM(require("@mui/material/Box"));
+var import_Typography13 = __toESM(require("@mui/material/Typography"));
 var import_FormControl2 = __toESM(require("@mui/material/FormControl"));
 var import_Select2 = __toESM(require("@mui/material/Select"));
 var import_MenuItem6 = __toESM(require("@mui/material/MenuItem"));
@@ -4573,19 +4604,19 @@ function presetToDateRange(preset) {
   }
   return { start, end };
 }
-var Kpi = ({ label, value }) => /* @__PURE__ */ import_react13.default.createElement(import_Box12.default, null, /* @__PURE__ */ import_react13.default.createElement(import_Typography12.default, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ import_react13.default.createElement(import_Typography12.default, { variant: "subtitle1", fontWeight: 600 }, value));
+var Kpi = ({ label, value }) => /* @__PURE__ */ import_react14.default.createElement(import_Box13.default, null, /* @__PURE__ */ import_react14.default.createElement(import_Typography13.default, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ import_react14.default.createElement(import_Typography13.default, { variant: "subtitle1", fontWeight: 600 }, value));
 var LiteLLMHomeWidget = ({
   defaultPeriod = "7d",
   title = "LiteLLM Usage"
 }) => {
   const api = (0, import_core_plugin_api5.useApi)(liteLlmApiRef);
-  const [period, setPeriod] = (0, import_react13.useState)(defaultPeriod);
-  const [loading, setLoading] = (0, import_react13.useState)(true);
-  const [usageError, setUsageError] = (0, import_react13.useState)(null);
-  const [keysError, setKeysError] = (0, import_react13.useState)(null);
-  const [usage, setUsage] = (0, import_react13.useState)(null);
-  const [keys, setKeys] = (0, import_react13.useState)([]);
-  (0, import_react13.useEffect)(() => {
+  const [period, setPeriod] = (0, import_react14.useState)(defaultPeriod);
+  const [loading, setLoading] = (0, import_react14.useState)(true);
+  const [usageError, setUsageError] = (0, import_react14.useState)(null);
+  const [keysError, setKeysError] = (0, import_react14.useState)(null);
+  const [usage, setUsage] = (0, import_react14.useState)(null);
+  const [keys, setKeys] = (0, import_react14.useState)([]);
+  (0, import_react14.useEffect)(() => {
     let cancelled = false;
     setLoading(true);
     setUsageError(null);
@@ -4622,17 +4653,17 @@ var LiteLLMHomeWidget = ({
     spend: d.spend
   }));
   const hasSparkline = dailyData.length > 0;
-  return /* @__PURE__ */ import_react13.default.createElement(import_Paper8.default, { sx: { p: 2 } }, /* @__PURE__ */ import_react13.default.createElement(import_Box12.default, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ import_react13.default.createElement(import_Typography12.default, { variant: "h6" }, title), /* @__PURE__ */ import_react13.default.createElement(import_FormControl2.default, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react14.default.createElement(import_Paper9.default, { sx: { p: 2 } }, /* @__PURE__ */ import_react14.default.createElement(import_Box13.default, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ import_react14.default.createElement(import_Typography13.default, { variant: "h6" }, title), /* @__PURE__ */ import_react14.default.createElement(import_FormControl2.default, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ import_react14.default.createElement(
     import_Select2.default,
     {
       value: period,
       onChange: (e) => setPeriod(e.target.value),
       displayEmpty: true
     },
-    /* @__PURE__ */ import_react13.default.createElement(import_MenuItem6.default, { value: "today" }, "Today"),
-    /* @__PURE__ */ import_react13.default.createElement(import_MenuItem6.default, { value: "7d" }, "7d"),
-    /* @__PURE__ */ import_react13.default.createElement(import_MenuItem6.default, { value: "30d" }, "30d")
-  ))), loading && /* @__PURE__ */ import_react13.default.createElement(import_Box12.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ import_react13.default.createElement(import_CircularProgress7.default, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ import_react13.default.createElement(import_Alert7.default, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, partialFailure && /* @__PURE__ */ import_react13.default.createElement(import_Alert7.default, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ import_react13.default.createElement(import_Grid3.default, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ import_react13.default.createElement(import_Grid3.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react13.default.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ import_react13.default.createElement(import_Grid3.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react13.default.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ import_react13.default.createElement(import_Grid3.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react13.default.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ import_react13.default.createElement(import_Grid3.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react13.default.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ import_react13.default.createElement(import_Box12.default, { height: 120 }, /* @__PURE__ */ import_react13.default.createElement(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react13.default.createElement(import_recharts3.AreaChart, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ import_react13.default.createElement(
+    /* @__PURE__ */ import_react14.default.createElement(import_MenuItem6.default, { value: "today" }, "Today"),
+    /* @__PURE__ */ import_react14.default.createElement(import_MenuItem6.default, { value: "7d" }, "7d"),
+    /* @__PURE__ */ import_react14.default.createElement(import_MenuItem6.default, { value: "30d" }, "30d")
+  ))), loading && /* @__PURE__ */ import_react14.default.createElement(import_Box13.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ import_react14.default.createElement(import_CircularProgress7.default, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ import_react14.default.createElement(import_Alert7.default, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, partialFailure && /* @__PURE__ */ import_react14.default.createElement(import_Alert7.default, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ import_react14.default.createElement(import_Grid3.default, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ import_react14.default.createElement(import_Grid3.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react14.default.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ import_react14.default.createElement(import_Grid3.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react14.default.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ import_react14.default.createElement(import_Grid3.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react14.default.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ import_react14.default.createElement(import_Grid3.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react14.default.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ import_react14.default.createElement(import_Box13.default, { height: 120 }, /* @__PURE__ */ import_react14.default.createElement(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react14.default.createElement(import_recharts3.AreaChart, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ import_react14.default.createElement(
     import_recharts3.Area,
     {
       type: "monotone",
@@ -4650,24 +4681,34 @@ var LiteLLMHomeWidget = ({
 init_LiteLLMBudgetWidget();
 
 // src/components/LiteLLMBudgetGauges.tsx
-var import_react14 = __toESM(require("react"));
-var import_Paper9 = __toESM(require("@mui/material/Paper"));
-var import_Box13 = __toESM(require("@mui/material/Box"));
-var import_Typography13 = __toESM(require("@mui/material/Typography"));
+var import_react15 = __toESM(require("react"));
+var import_Paper10 = __toESM(require("@mui/material/Paper"));
+var import_Box14 = __toESM(require("@mui/material/Box"));
+var import_Button6 = __toESM(require("@mui/material/Button"));
+var import_Typography14 = __toESM(require("@mui/material/Typography"));
 var import_CircularProgress8 = __toESM(require("@mui/material/CircularProgress"));
 var import_Alert8 = __toESM(require("@mui/material/Alert"));
+var import_Collapse4 = __toESM(require("@mui/material/Collapse"));
+var import_icons_material10 = require("@mui/icons-material");
 var import_core_plugin_api6 = require("@backstage/core-plugin-api");
 var import_core_components2 = require("@backstage/core-components");
 init_api();
 init_format();
 init_ui();
+init_BudgetLimitList();
 init_budget();
-var DEFAULT_KEYS_HREF = "/litellm?tab=keys";
+var MODULE_PATH = "/litellm";
 var LEVEL = {
   key: { name: "Key", none: "No key budget" },
   user: { name: "User", none: "No personal budget" },
   team: { name: "Team", none: "No team budget" }
 };
+var DEFAULT_CTAS = ["new-key", "module", "all-limits"];
+var CTA_LABELS = {
+  "new-key": "New key",
+  module: "Open module",
+  "all-limits": "All limits"
+};
 function fmtUsdShort(n) {
   const v = n ?? 0;
   if (v >= 100 && Number.isInteger(v)) return `$${v}`;
@@ -4690,8 +4731,8 @@ var LevelGauge = ({
   const limit = gauge.limit;
   const tone = limit ? budgetTone2(limit.pct) : "neutral";
   const extra = gauge.kind === "key" ? Math.max(0, gauge.count - 1) : 0;
-  return /* @__PURE__ */ import_react14.default.createElement(
-    import_Box13.default,
+  return /* @__PURE__ */ import_react15.default.createElement(
+    import_Box14.default,
     {
       sx: {
         display: "flex",
@@ -4701,7 +4742,7 @@ var LevelGauge = ({
         flex: 1
       }
     },
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react15.default.createElement(
       Gauge,
       {
         value: limit?.pct ?? 0,
@@ -4710,8 +4751,8 @@ var LevelGauge = ({
         label: limit ? `${Math.round(limit.pct)}%` : "\u2014"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
-      import_Typography13.default,
+    /* @__PURE__ */ import_react15.default.createElement(
+      import_Typography14.default,
       {
         sx: (theme) => ({
           mt: 0.75,
@@ -4724,8 +4765,8 @@ var LevelGauge = ({
       },
       name
     ),
-    limit ? /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(
-      import_Typography13.default,
+    limit ? /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(
+      import_Typography14.default,
       {
         variant: "caption",
         title: limit.sublabel ? `${limit.label} \xB7 ${limit.sublabel}` : limit.label,
@@ -4740,8 +4781,8 @@ var LevelGauge = ({
         }
       },
       limit.label
-    ), /* @__PURE__ */ import_react14.default.createElement(
-      import_Typography13.default,
+    ), /* @__PURE__ */ import_react15.default.createElement(
+      import_Typography14.default,
       {
         variant: "caption",
         color: "text.secondary",
@@ -4752,8 +4793,8 @@ var LevelGauge = ({
         }
       },
       spendCaption(limit)
-    ), extra > 0 ? /* @__PURE__ */ import_react14.default.createElement(
-      import_Typography13.default,
+    ), extra > 0 ? /* @__PURE__ */ import_react15.default.createElement(
+      import_Typography14.default,
       {
         component: import_core_components2.Link,
         to: keysHref,
@@ -4768,8 +4809,8 @@ var LevelGauge = ({
       "+",
       extra,
       " more"
-    ) : /* @__PURE__ */ import_react14.default.createElement(import_Typography13.default, { variant: "caption", color: "text.secondary", sx: { fontSize: 10.5 } }, resetLabel(limit))) : /* @__PURE__ */ import_react14.default.createElement(
-      import_Typography13.default,
+    ) : /* @__PURE__ */ import_react15.default.createElement(import_Typography14.default, { variant: "caption", color: "text.secondary", sx: { fontSize: 10.5 } }, resetLabel(limit))) : /* @__PURE__ */ import_react15.default.createElement(
+      import_Typography14.default,
       {
         variant: "caption",
         color: "text.secondary",
@@ -4782,16 +4823,32 @@ var LevelGauge = ({
 var LiteLLMBudgetGauges = ({
   title = "Budget",
   size = 72,
-  keysHref = DEFAULT_KEYS_HREF,
+  keysHref,
+  moduleHref = MODULE_PATH,
+  onCreateKey,
+  ctas,
+  maxExpandedKeys = 8,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
   action
 }) => {
   const api = (0, import_core_plugin_api6.useApi)(liteLlmApiRef);
-  const [loading, setLoading] = (0, import_react14.useState)(true);
-  const [error, setError] = (0, import_react14.useState)(null);
-  const [user, setUser] = (0, import_react14.useState)(null);
-  const [teams, setTeams] = (0, import_react14.useState)([]);
-  const [keys, setKeys] = (0, import_react14.useState)([]);
-  (0, import_react14.useEffect)(() => {
+  const [loading, setLoading] = (0, import_react15.useState)(true);
+  const [error, setError] = (0, import_react15.useState)(null);
+  const [user, setUser] = (0, import_react15.useState)(null);
+  const [teams, setTeams] = (0, import_react15.useState)([]);
+  const [keys, setKeys] = (0, import_react15.useState)([]);
+  const isControlled = expanded !== void 0;
+  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react15.useState)(defaultExpanded);
+  const isExpanded = isControlled ? expanded : uncontrolledExpanded;
+  const toggleExpanded = (0, import_react15.useCallback)(() => {
+    const next = !isExpanded;
+    if (!isControlled) setUncontrolledExpanded(next);
+    onExpandedChange?.(next);
+  }, [isControlled, isExpanded, onExpandedChange]);
+  const keysTabHref = keysHref ?? `${moduleHref}?tab=keys`;
+  (0, import_react15.useEffect)(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -4815,35 +4872,138 @@ var LiteLLMBudgetGauges = ({
       cancelled = true;
     };
   }, [api]);
-  const summary = (0, import_react14.useMemo)(
+  const summary = (0, import_react15.useMemo)(
     () => buildBudgetSummary(user, teams, keys, keys.length),
     [user, teams, keys]
   );
-  const gauges = (0, import_react14.useMemo)(() => buildBudgetGauges(summary), [summary]);
-  const headline = (0, import_react14.useMemo)(() => budgetHeadline(summary), [summary]);
+  const gauges = (0, import_react15.useMemo)(() => buildBudgetGauges(summary), [summary]);
+  const headline = (0, import_react15.useMemo)(() => budgetHeadline(summary), [summary]);
+  const expandedSummary = (0, import_react15.useMemo)(
+    () => buildBudgetSummary(user, teams, keys, maxExpandedKeys),
+    [user, teams, keys, maxExpandedKeys]
+  );
+  const expandedLimits = (0, import_react15.useMemo)(
+    () => allBudgetLimits(expandedSummary),
+    [expandedSummary]
+  );
   const summaryText = headline.count === 0 ? "no limits apply" : `${headline.count} limit${headline.count === 1 ? "" : "s"}`;
-  return /* @__PURE__ */ import_react14.default.createElement(import_Paper9.default, { sx: { p: 2 } }, /* @__PURE__ */ import_react14.default.createElement(import_Box13.default, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.5, minWidth: 0 } }, /* @__PURE__ */ import_react14.default.createElement(import_Typography13.default, { variant: "h6", lineHeight: 1.2, sx: { minWidth: 0, flex: 1 } }, title), !loading && !error && /* @__PURE__ */ import_react14.default.createElement(
+  const resolvedCtas = (0, import_react15.useMemo)(() => {
+    const list = ctas ?? DEFAULT_CTAS;
+    return list.map((cta) => typeof cta === "string" ? { kind: cta } : cta).filter((cta) => cta.kind !== "all-limits" || headline.count > 0);
+  }, [ctas, headline.count]);
+  const renderCta = (cta, index) => {
+    const label = cta.label ?? CTA_LABELS[cta.kind];
+    const key = `${cta.kind}-${index}`;
+    switch (cta.kind) {
+      case "new-key":
+        return onCreateKey ? /* @__PURE__ */ import_react15.default.createElement(import_Button6.default, { key, size: "small", variant: "contained", onClick: onCreateKey }, label) : /* @__PURE__ */ import_react15.default.createElement(
+          import_Button6.default,
+          {
+            key,
+            size: "small",
+            variant: "contained",
+            component: import_core_components2.Link,
+            to: `${moduleHref}?generate=1`
+          },
+          label
+        );
+      case "module":
+        return /* @__PURE__ */ import_react15.default.createElement(import_Button6.default, { key, size: "small", variant: "outlined", component: import_core_components2.Link, to: moduleHref }, label);
+      case "all-limits":
+        return /* @__PURE__ */ import_react15.default.createElement(
+          import_Button6.default,
+          {
+            key,
+            size: "small",
+            variant: "text",
+            onClick: toggleExpanded,
+            endIcon: /* @__PURE__ */ import_react15.default.createElement(
+              import_icons_material10.ExpandMore,
+              {
+                sx: {
+                  transform: isExpanded ? "rotate(180deg)" : "none",
+                  transition: (theme) => theme.transitions.create("transform")
+                }
+              }
+            )
+          },
+          label
+        );
+      /* istanbul ignore next — exhaustiveness */
+      default:
+        return null;
+    }
+  };
+  const hasFooter = resolvedCtas.length > 0 || !!action;
+  return /* @__PURE__ */ import_react15.default.createElement(import_Paper10.default, { sx: { p: 2 } }, /* @__PURE__ */ import_react15.default.createElement(import_Box14.default, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.5, minWidth: 0 } }, /* @__PURE__ */ import_react15.default.createElement(import_Typography14.default, { variant: "h6", lineHeight: 1.2, sx: { minWidth: 0, flex: 1 } }, title), !loading && !error && /* @__PURE__ */ import_react15.default.createElement(
     StatusPill,
     {
       label: summaryText,
       tone: budgetTone2(headline.closest?.pct ?? 0),
       dot: headline.count > 0
     }
-  )), loading && /* @__PURE__ */ import_react14.default.createElement(import_Box13.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 110 }, /* @__PURE__ */ import_react14.default.createElement(import_CircularProgress8.default, { size: 28 })), !loading && error && /* @__PURE__ */ import_react14.default.createElement(import_Alert8.default, { severity: "error", sx: { mt: 0.5 } }, error), !loading && !error && /* @__PURE__ */ import_react14.default.createElement(import_Box13.default, { sx: { display: "flex", alignItems: "flex-start", gap: 1 } }, gauges.map((gauge) => /* @__PURE__ */ import_react14.default.createElement(LevelGauge, { key: gauge.kind, gauge, size, keysHref }))), action && /* @__PURE__ */ import_react14.default.createElement(
-    import_Box13.default,
+  )), loading && /* @__PURE__ */ import_react15.default.createElement(import_Box14.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 110 }, /* @__PURE__ */ import_react15.default.createElement(import_CircularProgress8.default, { size: 28 })), !loading && error && /* @__PURE__ */ import_react15.default.createElement(import_Alert8.default, { severity: "error", sx: { mt: 0.5 } }, error), !loading && !error && /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(import_Box14.default, { sx: { display: "flex", alignItems: "flex-start", gap: 1 } }, gauges.map((gauge) => /* @__PURE__ */ import_react15.default.createElement(LevelGauge, { key: gauge.kind, gauge, size, keysHref: keysTabHref }))), /* @__PURE__ */ import_react15.default.createElement(import_Collapse4.default, { in: isExpanded, unmountOnExit: true }, /* @__PURE__ */ import_react15.default.createElement(
+    import_Box14.default,
+    {
+      sx: {
+        mt: 1.5,
+        // Bound the expanded list so a user with many limits still
+        // keeps the card compact and the toggle within reach.
+        maxHeight: 300,
+        overflowY: "auto"
+      }
+    },
+    /* @__PURE__ */ import_react15.default.createElement(LimitListPanel, null, /* @__PURE__ */ import_react15.default.createElement(
+      BudgetLimitList,
+      {
+        limits: expandedLimits,
+        hiddenKeyCount: expandedSummary.hiddenBudgetedKeys,
+        keysHref: keysTabHref
+      }
+    ))
+  ))), hasFooter && /* @__PURE__ */ import_react15.default.createElement(
+    import_Box14.default,
     {
       sx: (theme) => ({
         mt: 2,
         pt: 2,
-        borderTop: `1px solid ${theme.palette.divider}`
+        borderTop: `1px solid ${theme.palette.divider}`,
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        flexWrap: "wrap"
       })
     },
+    resolvedCtas.map(renderCta),
     action
   ));
 };
 
 // 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();