@acarmisc/backstage-plugin-litellm 0.25.0 → 0.27.0

package/dist/index.esm.js

@@ -836,16 +836,74 @@ var init_ui = __esm({
   }
 });
 
+// src/components/GenerateKeyButton.tsx
+import React2 from "react";
+import Button from "@mui/material/Button";
+import { Add } from "@mui/icons-material";
+import { Link } from "@backstage/core-components";
+var GenerateKeyButton;
+var init_GenerateKeyButton = __esm({
+  "src/components/GenerateKeyButton.tsx"() {
+    "use strict";
+    GenerateKeyButton = ({
+      to,
+      onClick,
+      label = "Generate New Key",
+      size
+    }) => {
+      if (onClick) {
+        return /* @__PURE__ */ React2.createElement(
+          Button,
+          {
+            variant: "contained",
+            color: "primary",
+            disableElevation: true,
+            size,
+            startIcon: /* @__PURE__ */ React2.createElement(Add, null),
+            onClick
+          },
+          label
+        );
+      }
+      if (to) {
+        return /* @__PURE__ */ React2.createElement(
+          Button,
+          {
+            variant: "contained",
+            color: "primary",
+            disableElevation: true,
+            size,
+            startIcon: /* @__PURE__ */ React2.createElement(Add, null),
+            component: Link,
+            to
+          },
+          label
+        );
+      }
+      return /* @__PURE__ */ React2.createElement(
+        Button,
+        {
+          variant: "contained",
+          color: "primary",
+          disableElevation: true,
+          size,
+          startIcon: /* @__PURE__ */ React2.createElement(Add, null),
+          disabled: true
+        },
+        label
+      );
+    };
+  }
+});
+
 // src/components/DashboardHeader.tsx
-import React2, { useMemo } from "react";
+import React3, { useMemo } from "react";
 import Box2 from "@mui/material/Box";
 import Typography2 from "@mui/material/Typography";
 import Skeleton from "@mui/material/Skeleton";
 import Paper2 from "@mui/material/Paper";
-import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
 import { alpha as alpha2 } from "@mui/material/styles";
-import { Add } from "@mui/icons-material";
 function initials(name) {
   const local = name.split("@")[0] ?? name;
   const parts = local.split(/[.\-_\s]+/).filter(Boolean);
@@ -858,9 +916,10 @@ var init_DashboardHeader = __esm({
     "use strict";
     init_api();
     init_ui();
+    init_GenerateKeyButton();
     CountStat = ({ value, label, tone }) => {
       const active = value > 0;
-      return /* @__PURE__ */ React2.createElement(Box2, { sx: { display: "flex", alignItems: "center", gap: 1 } }, /* @__PURE__ */ React2.createElement(
+      return /* @__PURE__ */ React3.createElement(Box2, { sx: { display: "flex", alignItems: "center", gap: 1 } }, /* @__PURE__ */ React3.createElement(
         Box2,
         {
           sx: (theme) => ({
@@ -871,14 +930,14 @@ var init_DashboardHeader = __esm({
             bgcolor: active ? tone === "danger" && theme.palette.error.main || tone === "warning" && theme.palette.warning.main || theme.palette.primary.main : alpha2(theme.palette.text.primary, 0.25)
           })
         }
-      ), /* @__PURE__ */ React2.createElement(
+      ), /* @__PURE__ */ React3.createElement(
         Typography2,
         {
           component: "span",
           sx: { fontSize: 15, fontWeight: 700, lineHeight: 1, fontVariantNumeric: "tabular-nums" }
         },
         value
-      ), /* @__PURE__ */ React2.createElement(
+      ), /* @__PURE__ */ React3.createElement(
         Typography2,
         {
           component: "span",
@@ -902,7 +961,7 @@ var init_DashboardHeader = __esm({
         return { total: keys.length, expired, expiringSoon };
       }, [keys]);
       const displayName = userInfo.user_email ?? userInfo.email ?? userInfo.user_id;
-      return /* @__PURE__ */ React2.createElement(Paper2, { sx: { borderRadius: 2, overflow: "hidden" } }, /* @__PURE__ */ React2.createElement(
+      return /* @__PURE__ */ React3.createElement(Paper2, { sx: { borderRadius: 2, overflow: "hidden" } }, /* @__PURE__ */ React3.createElement(
         Box2,
         {
           sx: {
@@ -915,7 +974,7 @@ var init_DashboardHeader = __esm({
             pb: 2
           }
         },
-        /* @__PURE__ */ React2.createElement(
+        /* @__PURE__ */ React3.createElement(
           Box2,
           {
             sx: (theme) => ({
@@ -935,7 +994,7 @@ var init_DashboardHeader = __esm({
           },
           initials(displayName)
         ),
-        /* @__PURE__ */ React2.createElement(Box2, { sx: { flexGrow: 1, minWidth: 220 } }, /* @__PURE__ */ React2.createElement(Typography2, { variant: "h6", sx: { lineHeight: 1.25, wordBreak: "break-word" } }, displayName), /* @__PURE__ */ React2.createElement(
+        /* @__PURE__ */ React3.createElement(Box2, { sx: { flexGrow: 1, minWidth: 220 } }, /* @__PURE__ */ React3.createElement(Typography2, { variant: "h6", sx: { lineHeight: 1.25, wordBreak: "break-word" } }, displayName), /* @__PURE__ */ React3.createElement(
           Typography2,
           {
             variant: "caption",
@@ -943,7 +1002,7 @@ var init_DashboardHeader = __esm({
             sx: { display: "block", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }
           },
           userInfo.user_id
-        ), /* @__PURE__ */ React2.createElement(Box2, { sx: { display: "flex", gap: 0.75, flexWrap: "wrap", mt: 1, minHeight: 20 } }, loading ? /* @__PURE__ */ React2.createElement(Skeleton, { variant: "rounded", width: 140, height: 20 }) : teams.map((team) => /* @__PURE__ */ React2.createElement(
+        ), /* @__PURE__ */ React3.createElement(Box2, { sx: { display: "flex", gap: 0.75, flexWrap: "wrap", mt: 1, minHeight: 20 } }, loading ? /* @__PURE__ */ React3.createElement(Skeleton, { variant: "rounded", width: 140, height: 20 }) : teams.map((team) => /* @__PURE__ */ React3.createElement(
           TagChip,
           {
             key: team.team_id,
@@ -951,18 +1010,8 @@ var init_DashboardHeader = __esm({
             title: team.team_id
           }
         )))),
-        /* @__PURE__ */ React2.createElement(
-          Button,
-          {
-            variant: "contained",
-            color: "primary",
-            disableElevation: true,
-            startIcon: /* @__PURE__ */ React2.createElement(Add, null),
-            onClick: onGenerateKeyClick
-          },
-          "Generate New Key"
-        )
-      ), /* @__PURE__ */ React2.createElement(Divider, null), /* @__PURE__ */ React2.createElement(
+        /* @__PURE__ */ React3.createElement(GenerateKeyButton, { onClick: onGenerateKeyClick })
+      ), /* @__PURE__ */ React3.createElement(Divider, null), /* @__PURE__ */ React3.createElement(
         Box2,
         {
           sx: {
@@ -974,18 +1023,18 @@ var init_DashboardHeader = __esm({
             py: 1.5
           }
         },
-        /* @__PURE__ */ React2.createElement(CountStat, { value: counts.total, label: "keys", tone: "accent" }),
-        /* @__PURE__ */ React2.createElement(Divider, { orientation: "vertical", flexItem: true, sx: { my: 0.25 } }),
-        /* @__PURE__ */ React2.createElement(CountStat, { value: counts.expired, label: "expired", tone: "danger" }),
-        /* @__PURE__ */ React2.createElement(Divider, { orientation: "vertical", flexItem: true, sx: { my: 0.25 } }),
-        /* @__PURE__ */ React2.createElement(CountStat, { value: counts.expiringSoon, label: "expiring soon", tone: "warning" })
-      ), tabs && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Divider, null), /* @__PURE__ */ React2.createElement(Box2, { sx: { px: 1 } }, tabs)));
+        /* @__PURE__ */ React3.createElement(CountStat, { value: counts.total, label: "keys", tone: "accent" }),
+        /* @__PURE__ */ React3.createElement(Divider, { orientation: "vertical", flexItem: true, sx: { my: 0.25 } }),
+        /* @__PURE__ */ React3.createElement(CountStat, { value: counts.expired, label: "expired", tone: "danger" }),
+        /* @__PURE__ */ React3.createElement(Divider, { orientation: "vertical", flexItem: true, sx: { my: 0.25 } }),
+        /* @__PURE__ */ React3.createElement(CountStat, { value: counts.expiringSoon, label: "expiring soon", tone: "warning" })
+      ), tabs && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Divider, null), /* @__PURE__ */ React3.createElement(Box2, { sx: { px: 1 } }, tabs)));
     };
   }
 });
 
 // src/components/KeysTable.tsx
-import React3, { useState, useMemo as useMemo2 } from "react";
+import React4, { useState, useMemo as useMemo2 } from "react";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
@@ -1003,11 +1052,10 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import TextField from "@mui/material/TextField";
 import CircularProgress from "@mui/material/CircularProgress";
-import Autocomplete from "@mui/material/Autocomplete";
 import Skeleton2 from "@mui/material/Skeleton";
 import InputAdornment from "@mui/material/InputAdornment";
 import { alpha as alpha3 } from "@mui/material/styles";
-import { ContentCopy, Delete, Add as Add2, Edit, Autorenew, Search, Lock, LockOpen } from "@mui/icons-material";
+import { ContentCopy, Delete, Edit, Autorenew, Search, Lock, LockOpen } from "@mui/icons-material";
 function expiryChipLabel(status, expiresAt) {
   if (status === "expired") return "Expired";
   if (status === "soon") return `${Math.ceil((new Date(expiresAt).getTime() - Date.now()) / 864e5)}d left`;
@@ -1021,12 +1069,12 @@ function expiryTone(status) {
 function ExpiryCell({ expiresAt }) {
   const status = expiryStatus(expiresAt);
   if (!status) {
-    return /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2", color: "text.secondary" }, "Never");
+    return /* @__PURE__ */ React4.createElement(Typography3, { variant: "body2", color: "text.secondary" }, "Never");
   }
   if (status === "ok") {
-    return /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2", color: "text.secondary" }, formatDate(expiresAt));
+    return /* @__PURE__ */ React4.createElement(Typography3, { variant: "body2", color: "text.secondary" }, formatDate(expiresAt));
   }
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     StatusPill,
     {
       label: expiryChipLabel(status, expiresAt),
@@ -1041,36 +1089,16 @@ function budgetTone(pct) {
   return "accent";
 }
 function keyBlockIcon(isBlocking, blocked) {
-  if (isBlocking) return /* @__PURE__ */ React3.createElement(CircularProgress, { size: 18 });
-  if (blocked) return /* @__PURE__ */ React3.createElement(LockOpen, { fontSize: "small" });
-  return /* @__PURE__ */ React3.createElement(Lock, { fontSize: "small" });
+  if (isBlocking) return /* @__PURE__ */ React4.createElement(CircularProgress, { size: 18 });
+  if (blocked) return /* @__PURE__ */ React4.createElement(LockOpen, { fontSize: "small" });
+  return /* @__PURE__ */ React4.createElement(Lock, { fontSize: "small" });
 }
 function BudgetCell({ spend, maxBudget }) {
   if (!maxBudget) {
-    return /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, "$", spend.toFixed(2), /* @__PURE__ */ React3.createElement(Typography3, { component: "span", variant: "caption", sx: { ml: 0.5, opacity: 0.7 } }, "/ \u221E"));
+    return /* @__PURE__ */ React4.createElement(Typography3, { variant: "body2", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, "$", spend.toFixed(2), /* @__PURE__ */ React4.createElement(Typography3, { component: "span", variant: "caption", sx: { ml: 0.5, opacity: 0.7 } }, "/ \u221E"));
   }
   const pct = Math.min(100, spend / maxBudget * 100);
-  return /* @__PURE__ */ React3.createElement(Box3, { minWidth: 104 }, /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums", mb: 0.5 } }, "$", spend.toFixed(2), /* @__PURE__ */ React3.createElement(Typography3, { component: "span", variant: "caption", color: "text.secondary", sx: { ml: 0.5 } }, "/ $", maxBudget)), /* @__PURE__ */ React3.createElement(Meter, { value: pct, tone: budgetTone(pct), height: 4 }));
-}
-function fmtCost(perToken) {
-  if (!perToken) return null;
-  const per1k = perToken * 1e3;
-  return per1k < 0.01 ? `$${(perToken * 1e6).toFixed(2)}/M` : `$${per1k.toFixed(3)}/1K`;
-}
-function formatContextWindow(maxInput, maxOutput) {
-  if (!maxInput && !maxOutput) return null;
-  const fmt = (n) => {
-    if (!n) return null;
-    if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
-    if (n >= 1e3) return `${Math.round(n / 1e3)}K`;
-    return String(n);
-  };
-  const inPart = fmt(maxInput);
-  const outPart = fmt(maxOutput);
-  if (inPart && outPart) return `ctx ${inPart} in / ${outPart} out`;
-  if (inPart) return `ctx ${inPart}`;
-  if (outPart) return `ctx ${outPart} out`;
-  return null;
+  return /* @__PURE__ */ React4.createElement(Box3, { minWidth: 104 }, /* @__PURE__ */ React4.createElement(Typography3, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums", mb: 0.5 } }, "$", spend.toFixed(2), /* @__PURE__ */ React4.createElement(Typography3, { component: "span", variant: "caption", color: "text.secondary", sx: { ml: 0.5 } }, "/ $", maxBudget)), /* @__PURE__ */ React4.createElement(Meter, { value: pct, tone: budgetTone(pct), height: 4 }));
 }
 function compareKeys(a, b, sortKey) {
   switch (sortKey) {
@@ -1090,16 +1118,13 @@ function compareKeys(a, b, sortKey) {
       return 0;
   }
 }
-var maskKey, shortKeyId, formatDate, keyToEditForm, KeysTable;
+var shortKeyId, formatDate, KeysTable;
 var init_KeysTable = __esm({
   "src/components/KeysTable.tsx"() {
     "use strict";
     init_api();
+    init_GenerateKeyButton();
     init_ui();
-    maskKey = (key) => {
-      if (key.length <= 8) return "***";
-      return `${key.slice(0, 4)}...${key.slice(-4)}`;
-    };
     shortKeyId = (token) => {
       if (!token) return "-";
       if (token.length <= 16) return token;
@@ -1112,33 +1137,19 @@ var init_KeysTable = __esm({
         return dateStr;
       }
     };
-    keyToEditForm = (k) => ({
-      key_alias: k.key_alias ?? "",
-      models: k.models ?? [],
-      max_budget: k.max_budget,
-      tpm_limit: k.tpm_limit,
-      rpm_limit: k.rpm_limit
-    });
     KeysTable = ({
       keys,
-      models,
       loading,
       onGenerateKeyClick,
-      onUpdateKey,
+      onEditKey,
       onBlockKey,
       onUnblockKey,
-      onResetKeySpend,
       onDeleteKey,
       onPruneExpiredKeys
     }) => {
-      const [editingKey, setEditingKey] = useState(null);
-      const [editForm, setEditForm] = useState({});
-      const [editSubmitting, setEditSubmitting] = useState(false);
       const [blockingKeyId, setBlockingKeyId] = useState(null);
       const [deleteConfirmId, setDeleteConfirmId] = useState(null);
       const [deleteSubmitting, setDeleteSubmitting] = useState(false);
-      const [resetSpendConfirm, setResetSpendConfirm] = useState(false);
-      const [resetSpendSubmitting, setResetSpendSubmitting] = useState(false);
       const [filterText, setFilterText] = useState("");
       const [sortKey, setSortKey] = useState("created");
       const [sortDirection, setSortDirection] = useState("desc");
@@ -1163,27 +1174,8 @@ var init_KeysTable = __esm({
           return sortDirection === "asc" ? comparison : -comparison;
         });
       }, [keys, filterText, sortKey, sortDirection]);
-      const editSelectedModels = models.filter((m) => (editForm.models || []).includes(m.model_name));
       const handleOpenEdit = (k) => {
-        setEditingKey(k);
-        setEditForm(keyToEditForm(k));
-      };
-      const handleCloseEdit = () => {
-        setEditingKey(null);
-        setEditForm({});
-        setResetSpendConfirm(false);
-      };
-      const handleUpdate = async () => {
-        if (!editingKey) return;
-        setEditSubmitting(true);
-        try {
-          await onUpdateKey(editingKey.token ?? editingKey.key, editForm);
-          handleCloseEdit();
-        } catch (error) {
-          console.error("Failed to update key:", error);
-        } finally {
-          setEditSubmitting(false);
-        }
+        onEditKey(k);
       };
       const handleToggleBlock = async (key) => {
         const keyId = key.token ?? key.key;
@@ -1198,17 +1190,6 @@ var init_KeysTable = __esm({
           setBlockingKeyId(null);
         }
       };
-      const handleResetSpend = async () => {
-        if (!editingKey) return;
-        setResetSpendSubmitting(true);
-        try {
-          await onResetKeySpend(editingKey.token ?? editingKey.key);
-          setResetSpendConfirm(false);
-          handleCloseEdit();
-        } finally {
-          setResetSpendSubmitting(false);
-        }
-      };
       const handleConfirmDelete = async () => {
         if (!deleteConfirmId) return;
         setDeleteSubmitting(true);
@@ -1239,40 +1220,29 @@ var init_KeysTable = __esm({
           setPruneConfirmCount(null);
         }
       };
-      const modelOption = (m) => {
-        const inCost = fmtCost(m.input_cost_per_token);
-        const outCost = fmtCost(m.output_cost_per_token);
-        const ctx = formatContextWindow(m.max_input_tokens, m.max_output_tokens);
-        return /* @__PURE__ */ React3.createElement(Box3, null, /* @__PURE__ */ React3.createElement("span", null, m.model_name), m.supports_function_calling && " \u{1F527}", m.supports_vision && " \u{1F441}\uFE0F", ctx && /* @__PURE__ */ React3.createElement(Typography3, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, ctx), (inCost || outCost) && /* @__PURE__ */ React3.createElement(Typography3, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, inCost, " in \xB7 ", outCost, " out"));
-      };
       const renderTableBody = () => {
         if (loading) {
-          return /* @__PURE__ */ React3.createElement(TableRow, null, /* @__PURE__ */ React3.createElement(TableCell, { colSpan: 8, sx: { py: 2 } }, /* @__PURE__ */ React3.createElement(Skeleton2, { variant: "rounded", height: 140 })));
+          return /* @__PURE__ */ React4.createElement(TableRow, null, /* @__PURE__ */ React4.createElement(TableCell, { colSpan: 8, sx: { py: 2 } }, /* @__PURE__ */ React4.createElement(Skeleton2, { variant: "rounded", height: 140 })));
         }
         if (filteredKeys.length === 0) {
-          return /* @__PURE__ */ React3.createElement(TableRow, null, /* @__PURE__ */ React3.createElement(TableCell, { colSpan: 8 }, filterText ? /* @__PURE__ */ React3.createElement(
+          return /* @__PURE__ */ React4.createElement(TableRow, null, /* @__PURE__ */ React4.createElement(TableCell, { colSpan: 8 }, filterText ? /* @__PURE__ */ React4.createElement(
             EmptyState,
             {
               message: "No keys match that filter",
               hint: "Try a different alias or model name."
             }
-          ) : /* @__PURE__ */ React3.createElement(
+          ) : /* @__PURE__ */ React4.createElement(
             EmptyState,
             {
               message: "No keys yet",
               hint: "Generate your first key to start calling models.",
-              action: /* @__PURE__ */ React3.createElement(
-                Button2,
+              action: /* @__PURE__ */ React4.createElement(
+                GenerateKeyButton,
                 {
-                  variant: "contained",
-                  color: "primary",
                   size: "small",
-                  disableElevation: true,
-                  startIcon: /* @__PURE__ */ React3.createElement(Add2, null),
-                  onClick: onGenerateKeyClick,
-                  sx: { mt: 1 }
-                },
-                "Generate Your First Key"
+                  label: "Generate Your First Key",
+                  onClick: onGenerateKeyClick
+                }
               )
             }
           )));
@@ -1281,7 +1251,7 @@ var init_KeysTable = __esm({
           const keyId = key.token ?? key.key;
           const isBlocking = blockingKeyId === keyId;
           const keyModels = key.models ?? [];
-          return /* @__PURE__ */ React3.createElement(
+          return /* @__PURE__ */ React4.createElement(
             TableRow,
             {
               key: keyId,
@@ -1292,8 +1262,8 @@ var init_KeysTable = __esm({
                 "& td": { color: theme.palette.text.secondary }
               }) : void 0
             },
-            /* @__PURE__ */ React3.createElement(TableCell, null, /* @__PURE__ */ React3.createElement(Box3, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2" }, key.key_alias || "\u2014"), key.blocked && /* @__PURE__ */ React3.createElement(StatusPill, { label: "Blocked", tone: "danger" }))),
-            /* @__PURE__ */ React3.createElement(TableCell, null, /* @__PURE__ */ React3.createElement(Box3, { display: "flex", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React3.createElement(
+            /* @__PURE__ */ React4.createElement(TableCell, null, /* @__PURE__ */ React4.createElement(Box3, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ React4.createElement(Typography3, { variant: "body2" }, key.key_alias || "\u2014"), key.blocked && /* @__PURE__ */ React4.createElement(StatusPill, { label: "Blocked", tone: "danger" }))),
+            /* @__PURE__ */ React4.createElement(TableCell, null, /* @__PURE__ */ React4.createElement(Box3, { display: "flex", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React4.createElement(
               Typography3,
               {
                 variant: "body2",
@@ -1310,7 +1280,7 @@ var init_KeysTable = __esm({
                 })
               },
               shortKeyId(keyId)
-            ), /* @__PURE__ */ React3.createElement(
+            ), /* @__PURE__ */ React4.createElement(
               IconButton,
               {
                 size: "small",
@@ -1318,13 +1288,13 @@ var init_KeysTable = __esm({
                 title: "Copy Key ID",
                 sx: quietIconButtonSx("accent")
               },
-              /* @__PURE__ */ React3.createElement(ContentCopy, { sx: { fontSize: 15 } })
+              /* @__PURE__ */ React4.createElement(ContentCopy, { sx: { fontSize: 15 } })
             ))),
-            /* @__PURE__ */ React3.createElement(TableCell, null, /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2", color: "text.secondary" }, formatDate(key.created_at))),
-            /* @__PURE__ */ React3.createElement(TableCell, null, /* @__PURE__ */ React3.createElement(ExpiryCell, { expiresAt: key.expires_at })),
-            /* @__PURE__ */ React3.createElement(TableCell, null, /* @__PURE__ */ React3.createElement(BudgetCell, { spend: key.spend ?? 0, maxBudget: key.max_budget })),
-            /* @__PURE__ */ React3.createElement(TableCell, null, /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, key.tpm_limit ?? "\u221E", " / ", key.rpm_limit ?? "\u221E")),
-            /* @__PURE__ */ React3.createElement(TableCell, null, keyModels.length === 0 ? /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2", color: "text.secondary" }, "All models") : /* @__PURE__ */ React3.createElement(Box3, { display: "flex", gap: 0.5, flexWrap: "wrap" }, keyModels.slice(0, 2).map((model) => /* @__PURE__ */ React3.createElement(TagChip, { key: model, label: model, title: model })), keyModels.length > 2 && /* @__PURE__ */ React3.createElement(
+            /* @__PURE__ */ React4.createElement(TableCell, null, /* @__PURE__ */ React4.createElement(Typography3, { variant: "body2", color: "text.secondary" }, formatDate(key.created_at))),
+            /* @__PURE__ */ React4.createElement(TableCell, null, /* @__PURE__ */ React4.createElement(ExpiryCell, { expiresAt: key.expires_at })),
+            /* @__PURE__ */ React4.createElement(TableCell, null, /* @__PURE__ */ React4.createElement(BudgetCell, { spend: key.spend ?? 0, maxBudget: key.max_budget })),
+            /* @__PURE__ */ React4.createElement(TableCell, null, /* @__PURE__ */ React4.createElement(Typography3, { variant: "body2", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, key.tpm_limit ?? "\u221E", " / ", key.rpm_limit ?? "\u221E")),
+            /* @__PURE__ */ React4.createElement(TableCell, null, keyModels.length === 0 ? /* @__PURE__ */ React4.createElement(Typography3, { variant: "body2", color: "text.secondary" }, "All models") : /* @__PURE__ */ React4.createElement(Box3, { display: "flex", gap: 0.5, flexWrap: "wrap" }, keyModels.slice(0, 2).map((model) => /* @__PURE__ */ React4.createElement(TagChip, { key: model, label: model, title: model })), keyModels.length > 2 && /* @__PURE__ */ React4.createElement(
               TagChip,
               {
                 label: `+${keyModels.length - 2}`,
@@ -1332,7 +1302,7 @@ var init_KeysTable = __esm({
                 title: keyModels.slice(2).join(", ")
               }
             ))),
-            /* @__PURE__ */ React3.createElement(TableCell, { align: "right" }, /* @__PURE__ */ React3.createElement(Box3, { display: "flex", justifyContent: "flex-end", gap: 0.25 }, /* @__PURE__ */ React3.createElement(
+            /* @__PURE__ */ React4.createElement(TableCell, { align: "right" }, /* @__PURE__ */ React4.createElement(Box3, { display: "flex", justifyContent: "flex-end", gap: 0.25 }, /* @__PURE__ */ React4.createElement(
               IconButton,
               {
                 size: "small",
@@ -1340,8 +1310,8 @@ var init_KeysTable = __esm({
                 title: "Edit key",
                 sx: quietIconButtonSx("accent")
               },
-              /* @__PURE__ */ React3.createElement(Edit, { fontSize: "small" })
-            ), /* @__PURE__ */ React3.createElement(
+              /* @__PURE__ */ React4.createElement(Edit, { fontSize: "small" })
+            ), /* @__PURE__ */ React4.createElement(
               IconButton,
               {
                 size: "small",
@@ -1351,7 +1321,7 @@ var init_KeysTable = __esm({
                 sx: quietIconButtonSx("warning")
               },
               keyBlockIcon(isBlocking, key.blocked)
-            ), /* @__PURE__ */ React3.createElement(
+            ), /* @__PURE__ */ React4.createElement(
               IconButton,
               {
                 size: "small",
@@ -1359,18 +1329,18 @@ var init_KeysTable = __esm({
                 title: "Revoke key",
                 sx: quietIconButtonSx("danger")
               },
-              /* @__PURE__ */ React3.createElement(Delete, { fontSize: "small" })
+              /* @__PURE__ */ React4.createElement(Delete, { fontSize: "small" })
             )))
           );
         });
       };
-      return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+      return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
         SectionCard,
         {
           title: "Virtual Keys",
           subtitle: loading ? "Loading\u2026" : `${filteredKeys.length}${filterText ? ` of ${keys.length}` : ""} key${filteredKeys.length === 1 ? "" : "s"}`,
           flush: true,
-          actions: /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+          actions: /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
             TextField,
             {
               size: "small",
@@ -1380,15 +1350,15 @@ var init_KeysTable = __esm({
               onChange: (e) => setFilterText(e.target.value),
               sx: { minWidth: 240 },
               InputProps: {
-                startAdornment: /* @__PURE__ */ React3.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React3.createElement(Search, { fontSize: "small", color: "disabled" }))
+                startAdornment: /* @__PURE__ */ React4.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React4.createElement(Search, { fontSize: "small", color: "disabled" }))
               }
             }
-          ), expiredKeys.length > 0 && /* @__PURE__ */ React3.createElement(
+          ), expiredKeys.length > 0 && /* @__PURE__ */ React4.createElement(
             Button2,
             {
               variant: "outlined",
               color: "inherit",
-              startIcon: /* @__PURE__ */ React3.createElement(Autorenew, null),
+              startIcon: /* @__PURE__ */ React4.createElement(Autorenew, null),
               onClick: () => setPruneConfirmCount(expiredKeys.length),
               sx: (theme) => ({
                 color: theme.palette.text.secondary,
@@ -1403,88 +1373,10 @@ var init_KeysTable = __esm({
             "Prune expired (",
             expiredKeys.length,
             ")"
-          ), /* @__PURE__ */ React3.createElement(
-            Button2,
-            {
-              variant: "contained",
-              color: "primary",
-              disableElevation: true,
-              startIcon: /* @__PURE__ */ React3.createElement(Add2, null),
-              onClick: onGenerateKeyClick
-            },
-            "Generate New Key"
-          ))
+          ), /* @__PURE__ */ React4.createElement(GenerateKeyButton, { onClick: onGenerateKeyClick }))
         },
-        /* @__PURE__ */ React3.createElement(TableContainer, null, /* @__PURE__ */ React3.createElement(Table, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React3.createElement(TableHead, null, /* @__PURE__ */ React3.createElement(TableRow, null, /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "alias" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "alias", direction: sortKey === "alias" ? sortDirection : "asc", onClick: () => handleSort("alias") }, "Alias")), /* @__PURE__ */ React3.createElement(TableCell, null, "Key ID"), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "created" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "created", direction: sortKey === "created" ? sortDirection : "asc", onClick: () => handleSort("created") }, "Created")), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "expires" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "expires", direction: sortKey === "expires" ? sortDirection : "asc", onClick: () => handleSort("expires") }, "Expires")), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "budget" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "budget", direction: sortKey === "budget" ? sortDirection : "asc", onClick: () => handleSort("budget") }, "Budget")), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "limits" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "limits", direction: sortKey === "limits" ? sortDirection : "asc", onClick: () => handleSort("limits") }, "TPM / RPM")), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "models" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "models", direction: sortKey === "models" ? sortDirection : "asc", onClick: () => handleSort("models") }, "Models")), /* @__PURE__ */ React3.createElement(TableCell, { align: "right" }, "Actions"))), /* @__PURE__ */ React3.createElement(TableBody, null, renderTableBody())))
-      ), /* @__PURE__ */ React3.createElement(Dialog, { open: !!editingKey, onClose: handleCloseEdit, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React3.createElement(DialogTitle, null, "Edit Key"), /* @__PURE__ */ React3.createElement(DialogContent, null, editingKey && /* @__PURE__ */ React3.createElement(Box3, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2", color: "text.secondary" }, /* @__PURE__ */ React3.createElement("code", { style: { fontFamily: "monospace", color: "inherit" } }, maskKey(editingKey.key))), /* @__PURE__ */ React3.createElement(
-        TextField,
-        {
-          label: "Alias",
-          value: editForm.key_alias || "",
-          onChange: (e) => setEditForm({ ...editForm, key_alias: e.target.value }),
-          fullWidth: true
-        }
-      ), models.length > 0 && /* @__PURE__ */ React3.createElement(
-        Autocomplete,
-        {
-          multiple: true,
-          options: models,
-          groupBy: (m) => m.mode || "other",
-          getOptionLabel: (m) => m.model_name,
-          value: editSelectedModels,
-          onChange: (_e, selected) => setEditForm({ ...editForm, models: selected.map((m) => m.model_name) }),
-          renderOption: (props, m) => /* @__PURE__ */ React3.createElement("li", { ...props }, modelOption(m)),
-          renderInput: (params) => /* @__PURE__ */ React3.createElement(TextField, { ...params, label: "Models", fullWidth: true })
-        }
-      ), /* @__PURE__ */ React3.createElement(
-        TextField,
-        {
-          label: "Max Budget (USD)",
-          type: "number",
-          value: editForm.max_budget ?? "",
-          onChange: (e) => setEditForm({ ...editForm, max_budget: e.target.value ? Number(e.target.value) : void 0 }),
-          fullWidth: true
-        }
-      ), /* @__PURE__ */ React3.createElement(
-        TextField,
-        {
-          label: "TPM Limit",
-          type: "number",
-          value: editForm.tpm_limit ?? "",
-          onChange: (e) => setEditForm({ ...editForm, tpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
-          helperText: "Max tokens per minute this key can consume across all models. Leave blank for no limit.",
-          fullWidth: true
-        }
-      ), /* @__PURE__ */ React3.createElement(
-        TextField,
-        {
-          label: "RPM Limit",
-          type: "number",
-          value: editForm.rpm_limit ?? "",
-          onChange: (e) => setEditForm({ ...editForm, rpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
-          helperText: "Max requests per minute this key can make across all models. Leave blank for no limit.",
-          fullWidth: true
-        }
-      ), /* @__PURE__ */ React3.createElement(Box3, { mt: 1, pt: 2, borderTop: "1px solid", sx: { borderColor: "divider" } }, /* @__PURE__ */ React3.createElement(Typography3, { variant: "caption", color: "text.secondary", display: "block", mb: 1 }, "Danger Zone"), !resetSpendConfirm ? /* @__PURE__ */ React3.createElement(
-        Button2,
-        {
-          size: "small",
-          color: "warning",
-          variant: "outlined",
-          onClick: () => setResetSpendConfirm(true)
-        },
-        "Reset Spend to $0"
-      ) : /* @__PURE__ */ React3.createElement(Box3, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2", color: "warning.main" }, "Zero out spend counter?"), /* @__PURE__ */ React3.createElement(
-        Button2,
-        {
-          size: "small",
-          color: "warning",
-          variant: "contained",
-          disabled: resetSpendSubmitting,
-          onClick: handleResetSpend
-        },
-        resetSpendSubmitting ? /* @__PURE__ */ React3.createElement(CircularProgress, { size: 16 }) : "Confirm"
-      ), /* @__PURE__ */ React3.createElement(Button2, { size: "small", onClick: () => setResetSpendConfirm(false) }, "Cancel"))))), /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(Button2, { onClick: handleCloseEdit }, "Cancel"), /* @__PURE__ */ React3.createElement(Button2, { onClick: handleUpdate, variant: "contained", color: "primary", disabled: editSubmitting }, editSubmitting ? /* @__PURE__ */ React3.createElement(CircularProgress, { size: 24 }) : "Save"))), /* @__PURE__ */ React3.createElement(Dialog, { open: !!deleteConfirmId, onClose: () => setDeleteConfirmId(null), maxWidth: "xs", fullWidth: true }, /* @__PURE__ */ React3.createElement(DialogTitle, null, "Revoke Key?"), /* @__PURE__ */ React3.createElement(DialogContent, null, /* @__PURE__ */ React3.createElement(Typography3, null, "This will permanently revoke the key. Any integrations using it will stop working immediately.")), /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(Button2, { onClick: () => setDeleteConfirmId(null), disabled: deleteSubmitting }, "Cancel"), /* @__PURE__ */ React3.createElement(
+        /* @__PURE__ */ React4.createElement(TableContainer, null, /* @__PURE__ */ React4.createElement(Table, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React4.createElement(TableHead, null, /* @__PURE__ */ React4.createElement(TableRow, null, /* @__PURE__ */ React4.createElement(TableCell, { sortDirection: sortKey === "alias" ? sortDirection : false }, /* @__PURE__ */ React4.createElement(TableSortLabel, { active: sortKey === "alias", direction: sortKey === "alias" ? sortDirection : "asc", onClick: () => handleSort("alias") }, "Alias")), /* @__PURE__ */ React4.createElement(TableCell, null, "Key ID"), /* @__PURE__ */ React4.createElement(TableCell, { sortDirection: sortKey === "created" ? sortDirection : false }, /* @__PURE__ */ React4.createElement(TableSortLabel, { active: sortKey === "created", direction: sortKey === "created" ? sortDirection : "asc", onClick: () => handleSort("created") }, "Created")), /* @__PURE__ */ React4.createElement(TableCell, { sortDirection: sortKey === "expires" ? sortDirection : false }, /* @__PURE__ */ React4.createElement(TableSortLabel, { active: sortKey === "expires", direction: sortKey === "expires" ? sortDirection : "asc", onClick: () => handleSort("expires") }, "Expires")), /* @__PURE__ */ React4.createElement(TableCell, { sortDirection: sortKey === "budget" ? sortDirection : false }, /* @__PURE__ */ React4.createElement(TableSortLabel, { active: sortKey === "budget", direction: sortKey === "budget" ? sortDirection : "asc", onClick: () => handleSort("budget") }, "Budget")), /* @__PURE__ */ React4.createElement(TableCell, { sortDirection: sortKey === "limits" ? sortDirection : false }, /* @__PURE__ */ React4.createElement(TableSortLabel, { active: sortKey === "limits", direction: sortKey === "limits" ? sortDirection : "asc", onClick: () => handleSort("limits") }, "TPM / RPM")), /* @__PURE__ */ React4.createElement(TableCell, { sortDirection: sortKey === "models" ? sortDirection : false }, /* @__PURE__ */ React4.createElement(TableSortLabel, { active: sortKey === "models", direction: sortKey === "models" ? sortDirection : "asc", onClick: () => handleSort("models") }, "Models")), /* @__PURE__ */ React4.createElement(TableCell, { align: "right" }, "Actions"))), /* @__PURE__ */ React4.createElement(TableBody, null, renderTableBody())))
+      ), /* @__PURE__ */ React4.createElement(Dialog, { open: !!deleteConfirmId, onClose: () => setDeleteConfirmId(null), maxWidth: "xs", fullWidth: true }, /* @__PURE__ */ React4.createElement(DialogTitle, null, "Revoke Key?"), /* @__PURE__ */ React4.createElement(DialogContent, null, /* @__PURE__ */ React4.createElement(Typography3, null, "This will permanently revoke the key. Any integrations using it will stop working immediately.")), /* @__PURE__ */ React4.createElement(DialogActions, null, /* @__PURE__ */ React4.createElement(Button2, { onClick: () => setDeleteConfirmId(null), disabled: deleteSubmitting }, "Cancel"), /* @__PURE__ */ React4.createElement(
         Button2,
         {
           onClick: handleConfirmDelete,
@@ -1492,8 +1384,8 @@ var init_KeysTable = __esm({
           color: "error",
           disabled: deleteSubmitting
         },
-        deleteSubmitting ? /* @__PURE__ */ React3.createElement(CircularProgress, { size: 20 }) : "Revoke"
-      ))), /* @__PURE__ */ React3.createElement(Dialog, { open: pruneConfirmCount !== null, onClose: () => setPruneConfirmCount(null), maxWidth: "xs", fullWidth: true }, /* @__PURE__ */ React3.createElement(DialogTitle, null, "Prune Expired Keys?"), /* @__PURE__ */ React3.createElement(DialogContent, null, /* @__PURE__ */ React3.createElement(Typography3, null, "This will permanently delete ", pruneConfirmCount, " expired key", pruneConfirmCount !== 1 ? "s" : "", " from LiteLLM. Any integrations using them will stop working immediately.")), /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(Button2, { onClick: () => setPruneConfirmCount(null), disabled: pruneSubmitting }, "Cancel"), /* @__PURE__ */ React3.createElement(
+        deleteSubmitting ? /* @__PURE__ */ React4.createElement(CircularProgress, { size: 20 }) : "Revoke"
+      ))), /* @__PURE__ */ React4.createElement(Dialog, { open: pruneConfirmCount !== null, onClose: () => setPruneConfirmCount(null), maxWidth: "xs", fullWidth: true }, /* @__PURE__ */ React4.createElement(DialogTitle, null, "Prune Expired Keys?"), /* @__PURE__ */ React4.createElement(DialogContent, null, /* @__PURE__ */ React4.createElement(Typography3, null, "This will permanently delete ", pruneConfirmCount, " expired key", pruneConfirmCount !== 1 ? "s" : "", " from LiteLLM. Any integrations using them will stop working immediately.")), /* @__PURE__ */ React4.createElement(DialogActions, null, /* @__PURE__ */ React4.createElement(Button2, { onClick: () => setPruneConfirmCount(null), disabled: pruneSubmitting }, "Cancel"), /* @__PURE__ */ React4.createElement(
         Button2,
         {
           onClick: handlePruneExpired,
@@ -1501,7 +1393,7 @@ var init_KeysTable = __esm({
           color: "error",
           disabled: pruneSubmitting
         },
-        pruneSubmitting ? /* @__PURE__ */ React3.createElement(CircularProgress, { size: 20 }) : "Prune"
+        pruneSubmitting ? /* @__PURE__ */ React4.createElement(CircularProgress, { size: 20 }) : "Prune"
       ))));
     };
   }
@@ -1521,8 +1413,8 @@ var init_format = __esm({
   }
 });
 
-// src/components/GenerateKeyDialog.tsx
-import React4, { useState as useState2, useEffect, useMemo as useMemo3 } from "react";
+// src/components/KeyFormDialog.tsx
+import React5, { useState as useState2, useEffect, useMemo as useMemo3 } from "react";
 import Box4 from "@mui/material/Box";
 import Typography4 from "@mui/material/Typography";
 import Dialog2 from "@mui/material/Dialog";
@@ -1534,7 +1426,7 @@ import MenuItem from "@mui/material/MenuItem";
 import Button3 from "@mui/material/Button";
 import IconButton2 from "@mui/material/IconButton";
 import CircularProgress2 from "@mui/material/CircularProgress";
-import Autocomplete2 from "@mui/material/Autocomplete";
+import Autocomplete from "@mui/material/Autocomplete";
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Alert from "@mui/material/Alert";
@@ -1636,17 +1528,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 +1553,9 @@ function formatContextWindow2(maxInput, maxOutput) {
   if (outPart) return `ctx ${outPart} out`;
   return null;
 }
-var generateDefaultAlias, emptyForm, ALL_PROXY_MODELS, SNIPPET_FILE_HINTS, SnippetTabs, GenerateKeyDialog;
-var init_GenerateKeyDialog = __esm({
-  "src/components/GenerateKeyDialog.tsx"() {
+var generateDefaultAlias, createForm, editForm, ALL_PROXY_MODELS, SNIPPET_FILE_HINTS, SnippetTabs, KeyFormDialog;
+var init_KeyFormDialog = __esm({
+  "src/components/KeyFormDialog.tsx"() {
     "use strict";
     init_format();
     generateDefaultAlias = (username) => {
@@ -1671,8 +1563,8 @@ var init_GenerateKeyDialog = __esm({
       const hash = Math.random().toString(36).slice(2, 8);
       return `${base}-${hash}`;
     };
-    emptyForm = () => ({
-      alias: "",
+    createForm = (username) => ({
+      alias: generateDefaultAlias(username),
       models: [],
       duration: "30d",
       max_budget: 100,
@@ -1681,6 +1573,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",
@@ -1692,14 +1591,14 @@ var init_GenerateKeyDialog = __esm({
       const snippetKey = tab === "claude-code" ? "claudeCode" : tab;
       const code = snippets[snippetKey];
       const fileHint = SNIPPET_FILE_HINTS[tab];
-      return /* @__PURE__ */ React4.createElement(Box4, null, /* @__PURE__ */ React4.createElement(Tabs, { value: tab, onChange: (_, v) => setTab(v), sx: { mb: 1 }, variant: "scrollable" }, /* @__PURE__ */ React4.createElement(Tab, { label: "curl", value: "curl" }), /* @__PURE__ */ React4.createElement(Tab, { label: "OpenAI SDK", value: "openai" }), /* @__PURE__ */ React4.createElement(Tab, { label: "opencode", value: "opencode" }), /* @__PURE__ */ React4.createElement(Tab, { label: "pi", value: "pi" }), /* @__PURE__ */ React4.createElement(Tab, { label: "Claude Code", value: "claude-code" })), fileHint && /* @__PURE__ */ React4.createElement(Typography4, { variant: "caption", color: "text.secondary", display: "block", mb: 0.5 }, fileHint), /* @__PURE__ */ React4.createElement(
+      return /* @__PURE__ */ React5.createElement(Box4, null, /* @__PURE__ */ React5.createElement(Tabs, { value: tab, onChange: (_, v) => setTab(v), sx: { mb: 1 }, variant: "scrollable" }, /* @__PURE__ */ React5.createElement(Tab, { label: "curl", value: "curl" }), /* @__PURE__ */ React5.createElement(Tab, { label: "OpenAI SDK", value: "openai" }), /* @__PURE__ */ React5.createElement(Tab, { label: "opencode", value: "opencode" }), /* @__PURE__ */ React5.createElement(Tab, { label: "pi", value: "pi" }), /* @__PURE__ */ React5.createElement(Tab, { label: "Claude Code", value: "claude-code" })), fileHint && /* @__PURE__ */ React5.createElement(Typography4, { variant: "caption", color: "text.secondary", display: "block", mb: 0.5 }, fileHint), /* @__PURE__ */ React5.createElement(
         Box4,
         {
           position: "relative",
           p: 1.5,
           sx: { backgroundColor: "action.hover", border: "1px solid", borderColor: "divider", borderRadius: 1 }
         },
-        /* @__PURE__ */ React4.createElement(
+        /* @__PURE__ */ React5.createElement(
           IconButton2,
           {
             size: "small",
@@ -1707,9 +1606,9 @@ var init_GenerateKeyDialog = __esm({
             title: "Copy snippet",
             sx: { position: "absolute", top: 4, right: 4 }
           },
-          /* @__PURE__ */ React4.createElement(ContentCopy2, { fontSize: "small" })
+          /* @__PURE__ */ React5.createElement(ContentCopy2, { fontSize: "small" })
         ),
-        /* @__PURE__ */ React4.createElement(
+        /* @__PURE__ */ React5.createElement(
           Typography4,
           {
             component: "pre",
@@ -1724,49 +1623,82 @@ var init_GenerateKeyDialog = __esm({
           },
           code
         ),
-        model && /* @__PURE__ */ React4.createElement(Typography4, { variant: "caption", color: "text.secondary", display: "block", mt: 1 }, "Using model \u201C", model, "\u201D \u2014 swap it for any model you have access to.")
+        model && /* @__PURE__ */ React5.createElement(Typography4, { variant: "caption", color: "text.secondary", display: "block", mt: 1 }, "Using model \u201C", model, "\u201D \u2014 swap it for any model you have access to.")
       ));
     };
-    GenerateKeyDialog = ({
+    KeyFormDialog = ({
       open,
       onClose,
+      mode,
+      keyToEdit = null,
       keys,
       models,
       teams,
       username,
       keyGenerationSettings,
-      onGenerateKey,
+      onCreateKey,
+      onUpdateKey,
+      onResetKeySpend,
       onGetConfig
     }) => {
-      const [formData, setFormData] = useState2(emptyForm());
+      const isCreate = mode === "create";
+      const [generateForm, setGenerateForm] = useState2(createForm(username));
+      const [editFormState, setEditFormState] = useState2({});
       const [unlimitedBudget, setUnlimitedBudget] = useState2(false);
       const [submitting, setSubmitting] = useState2(false);
       const [newKeyValue, setNewKeyValue] = useState2(null);
       const [newKeySnippets, setNewKeySnippets] = useState2(null);
       const [newKeyModel, setNewKeyModel] = useState2("");
       const [generateError, setGenerateError] = useState2(null);
+      const [editError, setEditError] = useState2(null);
+      const [resetSpendConfirm, setResetSpendConfirm] = useState2(false);
+      const [resetSpendSubmitting, setResetSpendSubmitting] = useState2(false);
       useEffect(() => {
         if (open) {
-          setFormData({ ...emptyForm(), alias: generateDefaultAlias(username) });
-          setUnlimitedBudget(false);
+          if (isCreate) {
+            setGenerateForm(createForm(username));
+          } else if (keyToEdit) {
+            setEditFormState(editForm(keyToEdit));
+            setUnlimitedBudget(
+              keyGenerationSettings?.allowUnlimitedBudget === true && (keyToEdit.max_budget === null || keyToEdit.max_budget === void 0)
+            );
+          } else {
+            setEditFormState({});
+            setUnlimitedBudget(false);
+          }
           setNewKeyValue(null);
           setNewKeySnippets(null);
           setNewKeyModel("");
           setGenerateError(null);
+          setEditError(null);
+          setResetSpendConfirm(false);
         }
-      }, [open, username]);
+      }, [open, isCreate, keyToEdit, username, keyGenerationSettings?.allowUnlimitedBudget]);
       const allowUnlimitedBudget = keyGenerationSettings?.allowUnlimitedBudget ?? false;
       const teamRequired = keyGenerationSettings?.teamRequired ?? true;
-      const selectedTeam = teams.find((t) => t.team_id === formData.team_id) ?? null;
+      const formData = isCreate ? generateForm : editFormState;
+      const setFormData = (patch) => {
+        if (isCreate) {
+          setGenerateForm((prev) => ({ ...prev, ...patch }));
+        } else {
+          setEditFormState((prev) => ({ ...prev, ...patch }));
+        }
+      };
+      const currentAlias = (isCreate ? generateForm.alias : editFormState.key_alias) ?? "";
+      const setAliasField = (value) => {
+        if (isCreate) setFormData({ alias: value });
+        else setFormData({ key_alias: value });
+      };
+      const selectedTeam = teams.find((t) => t.team_id === (isCreate ? generateForm.team_id : void 0)) ?? null;
       const availableModels = useMemo3(() => {
         return models.filter((m) => isModelAllowedByTeam(m, selectedTeam?.models));
       }, [models, selectedTeam]);
       const selectedModels = availableModels.filter((m) => (formData.models || []).includes(m.model_name));
-      const aliasError = !(formData.alias || "").trim();
-      const teamError = teamRequired && !formData.team_id;
+      const aliasError = !currentAlias.trim();
+      const teamError = isCreate && teamRequired && !generateForm.team_id;
       const budgetInvalid = !unlimitedBudget && (formData.max_budget === void 0 || formData.max_budget === null || formData.max_budget <= 0);
-      const canGenerate = !aliasError && !teamError && !budgetInvalid && !submitting;
-      const aliasDuplicate = !!formData.alias && keys.some((k) => k.key_alias === formData.alias);
+      const canSubmit = !aliasError && !teamError && !budgetInvalid && !submitting;
+      const aliasDuplicate = !!currentAlias && keys.some((k) => k.key_alias === currentAlias && k !== keyToEdit);
       const budgetEstimate = useMemo3(() => {
         if (unlimitedBudget || budgetInvalid) return null;
         const inputCosts = selectedModels.map((m) => m.input_cost_per_token).filter((c) => typeof c === "number" && c > 0);
@@ -1779,11 +1711,11 @@ var init_GenerateKeyDialog = __esm({
         setGenerateError(null);
         try {
           const request = {
-            ...formData,
-            max_budget: unlimitedBudget ? null : formData.max_budget
+            ...generateForm,
+            max_budget: unlimitedBudget ? null : generateForm.max_budget
           };
-          const response = await onGenerateKey(request);
-          const model = formData.models?.[0] ?? availableModels[0]?.model_name ?? "";
+          const response = await onCreateKey(request);
+          const model = generateForm.models?.[0] ?? availableModels[0]?.model_name ?? "";
           setNewKeyValue(response.key);
           setNewKeyModel(model);
           setNewKeySnippets(null);
@@ -1792,7 +1724,7 @@ var init_GenerateKeyDialog = __esm({
             setNewKeySnippets(buildSnippets(config.baseUrl, response.key, model));
           } catch {
           }
-          setFormData(emptyForm());
+          setGenerateForm(createForm(username));
           setUnlimitedBudget(false);
         } catch (error) {
           setGenerateError(error?.message ?? "Failed to generate key");
@@ -1800,27 +1732,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);
-        return /* @__PURE__ */ React4.createElement(Box4, null, /* @__PURE__ */ React4.createElement("span", null, m.model_name), m.supports_function_calling && " \u{1F527}", m.supports_vision && " \u{1F441}\uFE0F", ctx && /* @__PURE__ */ React4.createElement(Typography4, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, ctx), (inCost || outCost) && /* @__PURE__ */ React4.createElement(Typography4, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, inCost, " in \xB7 ", outCost, " out"));
+        const 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__ */ React5.createElement(Box4, null, /* @__PURE__ */ React5.createElement("span", null, m.model_name), m.supports_function_calling && " \u{1F527}", m.supports_vision && " \u{1F441}\uFE0F", ctx && /* @__PURE__ */ React5.createElement(Typography4, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, ctx), (inCost || outCost) && /* @__PURE__ */ React5.createElement(Typography4, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, inCost, " in \xB7 ", outCost, " out"));
       };
       const renderTeamField = () => {
         if (teams.length > 0) {
-          return /* @__PURE__ */ React4.createElement(
-            Autocomplete2,
+          return /* @__PURE__ */ React5.createElement(
+            Autocomplete,
             {
               options: teams,
               getOptionLabel: (t) => t.team_alias || t.team_id,
@@ -1830,28 +1793,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 });
               },
-              renderInput: (params) => /* @__PURE__ */ React4.createElement(
+              disabled: !isCreate,
+              renderInput: (params) => /* @__PURE__ */ React5.createElement(
                 TextField2,
                 {
                   ...params,
                   label: "Team",
                   error: teamError,
-                  helperText: teamHelperText(teamError, teamRequired),
-                  required: teamRequired,
+                  helperText: isCreate ? teamHelperText(teamError, teamRequired) : "Team binding is fixed after creation \u2014 delete and recreate the key to change it",
+                  required: isCreate && teamRequired,
                   fullWidth: true
                 }
               )
             }
           );
         }
-        if (teamRequired) {
-          return /* @__PURE__ */ React4.createElement(Typography4, { variant: "body2", color: "error" }, "Team selection is required, but you don't belong to any team yet \u2014 contact your administrator.");
+        if (teamRequired && isCreate) {
+          return /* @__PURE__ */ React5.createElement(Typography4, { variant: "body2", color: "error" }, "Team selection is required, but you don't belong to any team yet \u2014 contact your administrator.");
         }
         return null;
       };
-      return /* @__PURE__ */ React4.createElement(Dialog2, { open, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React4.createElement(DialogTitle2, null, newKeyValue ? "Key Generated" : "Generate New Key"), /* @__PURE__ */ React4.createElement(DialogContent2, null, newKeyValue ? /* @__PURE__ */ React4.createElement(Box4, null, /* @__PURE__ */ React4.createElement(Typography4, { variant: "body2", color: "text.secondary", gutterBottom: true }, "Copy this key now. You won't be able to see it again."), /* @__PURE__ */ React4.createElement(
+      const editKeyId = keyToEdit?.token ?? keyToEdit?.key ?? "";
+      const renderDangerZone = () => {
+        if (isCreate || !onResetKeySpend) return null;
+        return /* @__PURE__ */ React5.createElement(Box4, { mt: 1, pt: 2, borderTop: "1px solid", sx: { borderColor: "divider" } }, /* @__PURE__ */ React5.createElement(Typography4, { variant: "caption", color: "text.secondary", display: "block", mb: 1 }, "Danger Zone"), !resetSpendConfirm ? /* @__PURE__ */ React5.createElement(
+          Button3,
+          {
+            size: "small",
+            color: "warning",
+            variant: "outlined",
+            onClick: () => setResetSpendConfirm(true)
+          },
+          "Reset Spend to $0"
+        ) : /* @__PURE__ */ React5.createElement(Box4, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ React5.createElement(Typography4, { variant: "body2", color: "warning.main" }, "Zero out spend counter?"), /* @__PURE__ */ React5.createElement(
+          Button3,
+          {
+            size: "small",
+            color: "warning",
+            variant: "contained",
+            disabled: resetSpendSubmitting,
+            onClick: handleResetSpend
+          },
+          resetSpendSubmitting ? /* @__PURE__ */ React5.createElement(CircularProgress2, { size: 16 }) : "Confirm"
+        ), /* @__PURE__ */ React5.createElement(Button3, { size: "small", onClick: () => setResetSpendConfirm(false) }, "Cancel")));
+      };
+      const maskKey = (key) => {
+        if (key.length <= 8) return "***";
+        return `${key.slice(0, 4)}...${key.slice(-4)}`;
+      };
+      let dialogTitle = "Edit Key";
+      if (newKeyValue) dialogTitle = "Key Generated";
+      else if (isCreate) dialogTitle = "Generate New Key";
+      const submitLabel = isCreate ? "Generate" : "Save";
+      return /* @__PURE__ */ React5.createElement(Dialog2, { open, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React5.createElement(DialogTitle2, null, dialogTitle), /* @__PURE__ */ React5.createElement(DialogContent2, null, newKeyValue ? /* @__PURE__ */ React5.createElement(Box4, null, /* @__PURE__ */ React5.createElement(Typography4, { variant: "body2", color: "text.secondary", gutterBottom: true }, "Copy this key now. You won't be able to see it again."), /* @__PURE__ */ React5.createElement(
         Box4,
         {
           display: "flex",
@@ -1866,7 +1862,7 @@ var init_GenerateKeyDialog = __esm({
             borderRadius: 1
           }
         },
-        /* @__PURE__ */ React4.createElement(
+        /* @__PURE__ */ React5.createElement(
           Typography4,
           {
             component: "code",
@@ -1875,8 +1871,8 @@ var init_GenerateKeyDialog = __esm({
           },
           newKeyValue
         ),
-        /* @__PURE__ */ React4.createElement(IconButton2, { onClick: () => copyToClipboard(newKeyValue) }, /* @__PURE__ */ React4.createElement(ContentCopy2, null))
-      ), newKeySnippets && /* @__PURE__ */ React4.createElement(Box4, { mt: 2 }, /* @__PURE__ */ React4.createElement(Typography4, { variant: "caption", color: "text.secondary", display: "block", gutterBottom: true }, "Public endpoint \u2014 paste into any tool's base URL / API base field"), /* @__PURE__ */ React4.createElement(
+        /* @__PURE__ */ React5.createElement(IconButton2, { onClick: () => copyToClipboard(newKeyValue) }, /* @__PURE__ */ React5.createElement(ContentCopy2, null))
+      ), newKeySnippets && /* @__PURE__ */ React5.createElement(Box4, { mt: 2 }, /* @__PURE__ */ React5.createElement(Typography4, { variant: "caption", color: "text.secondary", display: "block", gutterBottom: true }, "Public endpoint \u2014 paste into any tool's base URL / API base field"), /* @__PURE__ */ React5.createElement(
         Box4,
         {
           display: "flex",
@@ -1890,7 +1886,7 @@ var init_GenerateKeyDialog = __esm({
             borderRadius: 1
           }
         },
-        /* @__PURE__ */ React4.createElement(
+        /* @__PURE__ */ React5.createElement(
           Typography4,
           {
             component: "code",
@@ -1899,15 +1895,16 @@ var init_GenerateKeyDialog = __esm({
           },
           newKeySnippets.publicEndpoint
         ),
-        /* @__PURE__ */ React4.createElement(IconButton2, { size: "small", onClick: () => copyToClipboard(newKeySnippets.publicEndpoint) }, /* @__PURE__ */ React4.createElement(ContentCopy2, { fontSize: "small" }))
-      )), newKeySnippets && /* @__PURE__ */ React4.createElement(Box4, { mt: 3 }, /* @__PURE__ */ React4.createElement(Box4, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ React4.createElement(Code, { fontSize: "small", color: "action" }), /* @__PURE__ */ React4.createElement(Typography4, { variant: "subtitle2" }, "Start calling the proxy \u2014 paste and run")), /* @__PURE__ */ React4.createElement(SnippetTabs, { snippets: newKeySnippets, model: newKeyModel, onCopy: copyToClipboard }))) : /* @__PURE__ */ React4.createElement(Box4, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, generateError && /* @__PURE__ */ React4.createElement(Alert, { severity: "error", onClose: () => setGenerateError(null) }, generateError), /* @__PURE__ */ React4.createElement(
+        /* @__PURE__ */ React5.createElement(IconButton2, { size: "small", onClick: () => copyToClipboard(newKeySnippets.publicEndpoint) }, /* @__PURE__ */ React5.createElement(ContentCopy2, { fontSize: "small" }))
+      )), newKeySnippets && /* @__PURE__ */ React5.createElement(Box4, { mt: 3 }, /* @__PURE__ */ React5.createElement(Box4, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ React5.createElement(Code, { fontSize: "small", color: "action" }), /* @__PURE__ */ React5.createElement(Typography4, { variant: "subtitle2" }, "Start calling the proxy \u2014 paste and run")), /* @__PURE__ */ React5.createElement(SnippetTabs, { snippets: newKeySnippets, model: newKeyModel, onCopy: copyToClipboard }))) : /* @__PURE__ */ React5.createElement(Box4, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, !isCreate && /* @__PURE__ */ React5.createElement(Typography4, { variant: "body2", color: "text.secondary" }, /* @__PURE__ */ React5.createElement("code", { style: { fontFamily: "monospace", color: "inherit" } }, maskKey(editKeyId))), generateError && /* @__PURE__ */ React5.createElement(Alert, { severity: "error", onClose: () => setGenerateError(null) }, generateError), editError && /* @__PURE__ */ React5.createElement(Alert, { severity: "error", onClose: () => setEditError(null) }, editError), /* @__PURE__ */ React5.createElement(
         TextField2,
         {
           label: "Alias",
-          value: formData.alias || "",
+          value: currentAlias,
           onChange: (e) => {
-            setFormData({ ...formData, alias: e.target.value });
+            setAliasField(e.target.value);
             setGenerateError(null);
+            setEditError(null);
           },
           error: aliasError,
           color: aliasDuplicate ? "warning" : void 0,
@@ -1915,31 +1912,31 @@ var init_GenerateKeyDialog = __esm({
           required: true,
           fullWidth: true
         }
-      ), /* @__PURE__ */ React4.createElement(
+      ), !isCreate ? null : /* @__PURE__ */ React5.createElement(
         TextField2,
         {
           select: true,
           label: "Duration",
-          value: formData.duration || "30d",
-          onChange: (e) => setFormData({ ...formData, duration: e.target.value }),
+          value: generateForm.duration || "30d",
+          onChange: (e) => setFormData({ duration: e.target.value }),
           fullWidth: true
         },
-        /* @__PURE__ */ React4.createElement(MenuItem, { value: "1d" }, "1 Day"),
-        /* @__PURE__ */ React4.createElement(MenuItem, { value: "7d" }, "7 Days"),
-        /* @__PURE__ */ React4.createElement(MenuItem, { value: "30d" }, "30 Days"),
-        /* @__PURE__ */ React4.createElement(MenuItem, { value: "90d" }, "90 Days"),
-        /* @__PURE__ */ React4.createElement(MenuItem, { value: "1y" }, "1 Year")
-      ), renderTeamField(), availableModels.length > 0 && /* @__PURE__ */ React4.createElement(
-        Autocomplete2,
+        /* @__PURE__ */ React5.createElement(MenuItem, { value: "1d" }, "1 Day"),
+        /* @__PURE__ */ React5.createElement(MenuItem, { value: "7d" }, "7 Days"),
+        /* @__PURE__ */ React5.createElement(MenuItem, { value: "30d" }, "30 Days"),
+        /* @__PURE__ */ React5.createElement(MenuItem, { value: "90d" }, "90 Days"),
+        /* @__PURE__ */ React5.createElement(MenuItem, { value: "1y" }, "1 Year")
+      ), renderTeamField(), availableModels.length > 0 && /* @__PURE__ */ React5.createElement(
+        Autocomplete,
         {
           multiple: true,
           options: availableModels,
           groupBy: (m) => m.mode || "other",
           getOptionLabel: (m) => m.model_name,
           value: selectedModels,
-          onChange: (_e, selected) => setFormData({ ...formData, models: selected.map((m) => m.model_name) }),
-          renderOption: (props, m) => /* @__PURE__ */ React4.createElement("li", { ...props }, modelOption(m)),
-          renderInput: (params) => /* @__PURE__ */ React4.createElement(
+          onChange: (_e, selected) => setFormData({ models: selected.map((m) => m.model_name) }),
+          renderOption: (props, m) => /* @__PURE__ */ React5.createElement("li", { ...props }, modelOption(m)),
+          renderInput: (params) => /* @__PURE__ */ React5.createElement(
             TextField2,
             {
               ...params,
@@ -1949,74 +1946,74 @@ var init_GenerateKeyDialog = __esm({
             }
           )
         }
-      ), allowUnlimitedBudget && /* @__PURE__ */ React4.createElement(
+      ), allowUnlimitedBudget && /* @__PURE__ */ React5.createElement(
         FormControlLabel,
         {
-          control: /* @__PURE__ */ React4.createElement(
+          control: /* @__PURE__ */ React5.createElement(
             Checkbox,
             {
               checked: unlimitedBudget,
               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 });
                 }
               }
             }
           ),
           label: "Unlimited budget"
         }
-      ), /* @__PURE__ */ React4.createElement(
+      ), /* @__PURE__ */ React5.createElement(
         TextField2,
         {
           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
         }
-      ), /* @__PURE__ */ React4.createElement(Accordion, { disableGutters: true, elevation: 0, sx: { border: "1px solid", borderColor: "divider", "&:before": { display: "none" } } }, /* @__PURE__ */ React4.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React4.createElement(ExpandMore, null) }, /* @__PURE__ */ React4.createElement(Typography4, { variant: "body2", fontWeight: 600 }, "Advanced")), /* @__PURE__ */ React4.createElement(AccordionDetails, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React4.createElement(
+      ), /* @__PURE__ */ React5.createElement(Accordion, { disableGutters: true, elevation: 0, sx: { border: "1px solid", borderColor: "divider", "&:before": { display: "none" } } }, /* @__PURE__ */ React5.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React5.createElement(ExpandMore, null) }, /* @__PURE__ */ React5.createElement(Typography4, { variant: "body2", fontWeight: 600 }, "Advanced")), /* @__PURE__ */ React5.createElement(AccordionDetails, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React5.createElement(
         TextField2,
         {
           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
         }
-      ), /* @__PURE__ */ React4.createElement(
+      ), /* @__PURE__ */ React5.createElement(
         TextField2,
         {
           label: "RPM Limit",
           type: "number",
           value: formData.rpm_limit ?? "",
-          onChange: (e) => setFormData({ ...formData, rpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
+          onChange: (e) => setFormData({ rpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
           helperText: "Max requests per minute this key can make across all models. Leave blank for no limit.",
           fullWidth: true
         }
-      ))))), /* @__PURE__ */ React4.createElement(DialogActions2, null, newKeyValue ? /* @__PURE__ */ React4.createElement(Button3, { onClick: handleClose, variant: "contained", color: "success" }, "Done") : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Button3, { onClick: handleClose }, "Cancel"), /* @__PURE__ */ React4.createElement(
+      ))), renderDangerZone())), /* @__PURE__ */ React5.createElement(DialogActions2, null, newKeyValue ? /* @__PURE__ */ React5.createElement(Button3, { onClick: handleClose, variant: "contained", color: "success" }, "Done") : /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Button3, { onClick: handleClose }, "Cancel"), /* @__PURE__ */ React5.createElement(
         Button3,
         {
-          onClick: handleGenerate,
+          onClick: isCreate ? handleGenerate : handleUpdate,
           variant: "contained",
           color: "primary",
-          disabled: !canGenerate
+          disabled: !canSubmit
         },
-        submitting ? /* @__PURE__ */ React4.createElement(CircularProgress2, { size: 24 }) : "Generate"
+        submitting ? /* @__PURE__ */ React5.createElement(CircularProgress2, { size: 24 }) : submitLabel
       ))));
     };
   }
 });
 
 // src/components/ManageTeamDialog.tsx
-import React5, { useState as useState3, useEffect as useEffect2, useMemo as useMemo4 } from "react";
+import React6, { useState as useState3, useEffect as useEffect2, useMemo as useMemo4 } from "react";
 import Dialog3 from "@mui/material/Dialog";
 import DialogTitle3 from "@mui/material/DialogTitle";
 import DialogContent3 from "@mui/material/DialogContent";
@@ -2026,7 +2023,7 @@ import Button4 from "@mui/material/Button";
 import Alert2 from "@mui/material/Alert";
 import Checkbox2 from "@mui/material/Checkbox";
 import FormControlLabel2 from "@mui/material/FormControlLabel";
-import Autocomplete3 from "@mui/material/Autocomplete";
+import Autocomplete2 from "@mui/material/Autocomplete";
 import CircularProgress3 from "@mui/material/CircularProgress";
 import MenuItem2 from "@mui/material/MenuItem";
 import Box5 from "@mui/material/Box";
@@ -2285,7 +2282,7 @@ var init_ManageTeamDialog = __esm({
       const showMcpServers = mode === "edit" && !!canManageMcpServers;
       const mcpOptions = (mcpServers ?? []).map((s) => s.id);
       const mcpLabel = (id) => (mcpServers ?? []).find((s) => s.id === id)?.name ?? id;
-      return /* @__PURE__ */ React5.createElement(Dialog3, { open, onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React5.createElement(DialogTitle3, null, mode === "create" ? "Create Team" : "Edit Team"), /* @__PURE__ */ React5.createElement(DialogContent3, { sx: { pt: 2, display: "flex", flexDirection: "column", gap: 2 } }, error && /* @__PURE__ */ React5.createElement(Alert2, { severity: "error" }, error), /* @__PURE__ */ React5.createElement(
+      return /* @__PURE__ */ React6.createElement(Dialog3, { open, onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React6.createElement(DialogTitle3, null, mode === "create" ? "Create Team" : "Edit Team"), /* @__PURE__ */ React6.createElement(DialogContent3, { sx: { pt: 2, display: "flex", flexDirection: "column", gap: 2 } }, error && /* @__PURE__ */ React6.createElement(Alert2, { severity: "error" }, error), /* @__PURE__ */ React6.createElement(
         TextField3,
         {
           label: "Team Alias",
@@ -2294,15 +2291,15 @@ var init_ManageTeamDialog = __esm({
           disabled: submitting,
           fullWidth: true
         }
-      ), /* @__PURE__ */ React5.createElement(
-        Autocomplete3,
+      ), /* @__PURE__ */ React6.createElement(
+        Autocomplete2,
         {
           multiple: true,
           options: modelNames,
           value: models,
           onChange: (_, newValue) => setModels(newValue),
           disabled: submitting,
-          renderInput: (params) => /* @__PURE__ */ React5.createElement(
+          renderInput: (params) => /* @__PURE__ */ React6.createElement(
             TextField3,
             {
               ...params,
@@ -2312,7 +2309,7 @@ var init_ManageTeamDialog = __esm({
             }
           )
         }
-      ), /* @__PURE__ */ React5.createElement(
+      ), /* @__PURE__ */ React6.createElement(
         TextField3,
         {
           label: budgetWriteOnly ? "New Max Budget ($)" : "Max Budget ($)",
@@ -2324,13 +2321,13 @@ var init_ManageTeamDialog = __esm({
           helperText: budgetWriteOnly ? "Current budget is hidden \u2014 leave blank to keep it, or enter a new value" : `Maximum: $${maxBudgetCeiling}`,
           fullWidth: true
         }
-      ), allowUnlimitedBudget && /* @__PURE__ */ React5.createElement(
+      ), allowUnlimitedBudget && /* @__PURE__ */ React6.createElement(
         FormControlLabel2,
         {
-          control: /* @__PURE__ */ React5.createElement(Checkbox2, { checked: unlimited, onChange: (e) => setUnlimited(e.target.checked), disabled: submitting }),
+          control: /* @__PURE__ */ React6.createElement(Checkbox2, { checked: unlimited, onChange: (e) => setUnlimited(e.target.checked), disabled: submitting }),
           label: "Unlimited Budget"
         }
-      ), /* @__PURE__ */ React5.createElement(
+      ), /* @__PURE__ */ React6.createElement(
         TextField3,
         {
           select: true,
@@ -2341,8 +2338,8 @@ var init_ManageTeamDialog = __esm({
           helperText: "Spend-reset period for the team budget",
           fullWidth: true
         },
-        durationOptions.map((o) => /* @__PURE__ */ React5.createElement(MenuItem2, { key: o.value, value: o.value }, o.label))
-      ), showMembers && /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Divider2, { sx: { my: 1 } }), /* @__PURE__ */ React5.createElement(Typography5, { variant: "subtitle2", sx: { mb: 1 } }, "Members"), memberError && /* @__PURE__ */ React5.createElement(Alert2, { severity: "error", sx: { mb: 1 }, onClose: () => setMemberError(null) }, memberError), members.length === 0 ? /* @__PURE__ */ React5.createElement(Typography5, { variant: "body2", color: "text.secondary", sx: { mb: 1 } }, "No members yet.") : /* @__PURE__ */ React5.createElement(TableContainer2, { component: Paper3, variant: "outlined", sx: { borderRadius: 1.5, mb: 1.5 } }, /* @__PURE__ */ React5.createElement(Table2, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React5.createElement(TableHead2, null, /* @__PURE__ */ React5.createElement(TableRow2, null, /* @__PURE__ */ React5.createElement(TableCell2, null, "User"), /* @__PURE__ */ React5.createElement(TableCell2, { align: "right" }, "Role"), /* @__PURE__ */ React5.createElement(TableCell2, { align: "right", sx: { width: 40 } }))), /* @__PURE__ */ React5.createElement(TableBody2, null, members.map((m) => /* @__PURE__ */ React5.createElement(TableRow2, { key: m.user_id }, /* @__PURE__ */ React5.createElement(TableCell2, null, m.user_email ? /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Typography5, { variant: "body2" }, m.user_email), /* @__PURE__ */ React5.createElement(
+        durationOptions.map((o) => /* @__PURE__ */ React6.createElement(MenuItem2, { key: o.value, value: o.value }, o.label))
+      ), showMembers && /* @__PURE__ */ React6.createElement(Box5, null, /* @__PURE__ */ React6.createElement(Divider2, { sx: { my: 1 } }), /* @__PURE__ */ React6.createElement(Typography5, { variant: "subtitle2", sx: { mb: 1 } }, "Members"), memberError && /* @__PURE__ */ React6.createElement(Alert2, { severity: "error", sx: { mb: 1 }, onClose: () => setMemberError(null) }, memberError), members.length === 0 ? /* @__PURE__ */ React6.createElement(Typography5, { variant: "body2", color: "text.secondary", sx: { mb: 1 } }, "No members yet.") : /* @__PURE__ */ React6.createElement(TableContainer2, { component: Paper3, variant: "outlined", sx: { borderRadius: 1.5, mb: 1.5 } }, /* @__PURE__ */ React6.createElement(Table2, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React6.createElement(TableHead2, null, /* @__PURE__ */ React6.createElement(TableRow2, null, /* @__PURE__ */ React6.createElement(TableCell2, null, "User"), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, "Role"), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right", sx: { width: 40 } }))), /* @__PURE__ */ React6.createElement(TableBody2, null, members.map((m) => /* @__PURE__ */ React6.createElement(TableRow2, { key: m.user_id }, /* @__PURE__ */ React6.createElement(TableCell2, null, m.user_email ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(Typography5, { variant: "body2" }, m.user_email), /* @__PURE__ */ React6.createElement(
         Typography5,
         {
           variant: "caption",
@@ -2350,14 +2347,14 @@ var init_ManageTeamDialog = __esm({
           sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 }
         },
         m.user_id
-      )) : /* @__PURE__ */ React5.createElement(
+      )) : /* @__PURE__ */ React6.createElement(
         Typography5,
         {
           variant: "body2",
           sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }
         },
         m.user_id
-      )), /* @__PURE__ */ React5.createElement(TableCell2, { align: "right" }, /* @__PURE__ */ React5.createElement(StatusPill, { label: m.role, tone: m.role === "admin" ? "accent" : "neutral", dot: false })), /* @__PURE__ */ React5.createElement(TableCell2, { align: "right" }, /* @__PURE__ */ React5.createElement(
+      )), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, /* @__PURE__ */ React6.createElement(StatusPill, { label: m.role, tone: m.role === "admin" ? "accent" : "neutral", dot: false })), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, /* @__PURE__ */ React6.createElement(
         IconButton3,
         {
           edge: "end",
@@ -2366,9 +2363,9 @@ var init_ManageTeamDialog = __esm({
           disabled: memberBusy,
           onClick: () => handleRemoveMember(m.user_id)
         },
-        /* @__PURE__ */ React5.createElement(DeleteIcon, { fontSize: "small" })
-      ))))))), /* @__PURE__ */ React5.createElement(Box5, { sx: { display: "flex", gap: 1, alignItems: "flex-start", flexWrap: "wrap" } }, /* @__PURE__ */ React5.createElement(
-        Autocomplete3,
+        /* @__PURE__ */ React6.createElement(DeleteIcon, { fontSize: "small" })
+      ))))))), /* @__PURE__ */ React6.createElement(Box5, { sx: { display: "flex", gap: 1, alignItems: "flex-start", flexWrap: "wrap" } }, /* @__PURE__ */ React6.createElement(
+        Autocomplete2,
         {
           freeSolo: true,
           autoHighlight: true,
@@ -2391,7 +2388,7 @@ var init_ManageTeamDialog = __esm({
           isOptionEqualToValue: (o, v) => o.ref === (typeof v === "string" ? v : v.ref),
           disabled: memberBusy,
           sx: { flex: 1, minWidth: 260 },
-          renderInput: (params) => /* @__PURE__ */ React5.createElement(
+          renderInput: (params) => /* @__PURE__ */ React6.createElement(
             TextField3,
             {
               ...params,
@@ -2401,12 +2398,12 @@ var init_ManageTeamDialog = __esm({
               helperText: "Pick a catalog user, or paste a user entity ref",
               InputProps: {
                 ...params.InputProps,
-                endAdornment: /* @__PURE__ */ React5.createElement(React5.Fragment, null, usersLoading ? /* @__PURE__ */ React5.createElement(CircularProgress3, { color: "inherit", size: 14 }) : null, params.InputProps.endAdornment)
+                endAdornment: /* @__PURE__ */ React6.createElement(React6.Fragment, null, usersLoading ? /* @__PURE__ */ React6.createElement(CircularProgress3, { color: "inherit", size: 14 }) : null, params.InputProps.endAdornment)
               }
             }
           )
         }
-      ), /* @__PURE__ */ React5.createElement(
+      ), /* @__PURE__ */ React6.createElement(
         TextField3,
         {
           label: "Max budget in team ($)",
@@ -2417,7 +2414,7 @@ var init_ManageTeamDialog = __esm({
           size: "small",
           sx: { width: 160 }
         }
-      ), /* @__PURE__ */ React5.createElement(
+      ), /* @__PURE__ */ React6.createElement(
         Button4,
         {
           onClick: handleAddMember,
@@ -2426,8 +2423,8 @@ var init_ManageTeamDialog = __esm({
           sx: { mt: 0.5 }
         },
         "Add"
-      ))), showKnowledgeBases && /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Divider2, { sx: { my: 1 } }), /* @__PURE__ */ React5.createElement(Typography5, { variant: "subtitle2", sx: { mb: 1 } }, "Knowledge Bases"), /* @__PURE__ */ React5.createElement(Typography5, { variant: "body2", color: "text.secondary", sx: { mb: 1 } }, "Attaching a knowledge base exposes its documents to every key in this team."), kbError && /* @__PURE__ */ React5.createElement(Alert2, { severity: "error", sx: { mb: 1 }, onClose: () => setKbError(null) }, kbError), /* @__PURE__ */ React5.createElement(
-        Autocomplete3,
+      ))), showKnowledgeBases && /* @__PURE__ */ React6.createElement(Box5, null, /* @__PURE__ */ React6.createElement(Divider2, { sx: { my: 1 } }), /* @__PURE__ */ React6.createElement(Typography5, { variant: "subtitle2", sx: { mb: 1 } }, "Knowledge Bases"), /* @__PURE__ */ React6.createElement(Typography5, { variant: "body2", color: "text.secondary", sx: { mb: 1 } }, "Attaching a knowledge base exposes its documents to every key in this team."), kbError && /* @__PURE__ */ React6.createElement(Alert2, { severity: "error", sx: { mb: 1 }, onClose: () => setKbError(null) }, kbError), /* @__PURE__ */ React6.createElement(
+        Autocomplete2,
         {
           multiple: true,
           options: kbOptions,
@@ -2435,9 +2432,9 @@ var init_ManageTeamDialog = __esm({
           getOptionLabel: kbLabel,
           onChange: (_, v) => setKbIds(v),
           disabled: kbBusy,
-          renderInput: (params) => /* @__PURE__ */ React5.createElement(TextField3, { ...params, label: "Attached knowledge bases" })
+          renderInput: (params) => /* @__PURE__ */ React6.createElement(TextField3, { ...params, label: "Attached knowledge bases" })
         }
-      ), /* @__PURE__ */ React5.createElement(Box5, { sx: { display: "flex", justifyContent: "flex-end", mt: 1 } }, /* @__PURE__ */ React5.createElement(
+      ), /* @__PURE__ */ React6.createElement(Box5, { sx: { display: "flex", justifyContent: "flex-end", mt: 1 } }, /* @__PURE__ */ React6.createElement(
         Button4,
         {
           onClick: handleSaveKnowledgeBases,
@@ -2445,8 +2442,8 @@ var init_ManageTeamDialog = __esm({
           variant: "outlined"
         },
         kbBusy ? "Saving\u2026" : "Save knowledge bases"
-      ))), showMcpServers && /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Divider2, { sx: { my: 1 } }), /* @__PURE__ */ React5.createElement(Typography5, { variant: "subtitle2", sx: { mb: 1 } }, "MCP Servers"), /* @__PURE__ */ React5.createElement(Typography5, { variant: "body2", color: "text.secondary", sx: { mb: 1 } }, "Attaching an MCP server lets every key in this team invoke that server's tools through the model \u2014 including any side effects those tools have."), mcpError && /* @__PURE__ */ React5.createElement(Alert2, { severity: "error", sx: { mb: 1 }, onClose: () => setMcpError(null) }, mcpError), /* @__PURE__ */ React5.createElement(
-        Autocomplete3,
+      ))), showMcpServers && /* @__PURE__ */ React6.createElement(Box5, null, /* @__PURE__ */ React6.createElement(Divider2, { sx: { my: 1 } }), /* @__PURE__ */ React6.createElement(Typography5, { variant: "subtitle2", sx: { mb: 1 } }, "MCP Servers"), /* @__PURE__ */ React6.createElement(Typography5, { variant: "body2", color: "text.secondary", sx: { mb: 1 } }, "Attaching an MCP server lets every key in this team invoke that server's tools through the model \u2014 including any side effects those tools have."), mcpError && /* @__PURE__ */ React6.createElement(Alert2, { severity: "error", sx: { mb: 1 }, onClose: () => setMcpError(null) }, mcpError), /* @__PURE__ */ React6.createElement(
+        Autocomplete2,
         {
           multiple: true,
           options: mcpOptions,
@@ -2454,9 +2451,9 @@ var init_ManageTeamDialog = __esm({
           getOptionLabel: mcpLabel,
           onChange: (_, v) => setMcpIds(v),
           disabled: mcpBusy,
-          renderInput: (params) => /* @__PURE__ */ React5.createElement(TextField3, { ...params, label: "Attached MCP servers" })
+          renderInput: (params) => /* @__PURE__ */ React6.createElement(TextField3, { ...params, label: "Attached MCP servers" })
         }
-      ), /* @__PURE__ */ React5.createElement(Box5, { sx: { display: "flex", justifyContent: "flex-end", mt: 1 } }, /* @__PURE__ */ React5.createElement(
+      ), /* @__PURE__ */ React6.createElement(Box5, { sx: { display: "flex", justifyContent: "flex-end", mt: 1 } }, /* @__PURE__ */ React6.createElement(
         Button4,
         {
           onClick: handleSaveMcpServers,
@@ -2464,13 +2461,13 @@ var init_ManageTeamDialog = __esm({
           variant: "outlined"
         },
         mcpBusy ? "Saving\u2026" : "Save MCP servers"
-      )))), /* @__PURE__ */ React5.createElement(DialogActions3, null, /* @__PURE__ */ React5.createElement(Button4, { onClick: onClose, disabled: submitting }, "Cancel"), /* @__PURE__ */ React5.createElement(Button4, { onClick: handleSubmit, disabled: submitting, variant: "contained" }, submitting ? "Saving..." : "Save")));
+      )))), /* @__PURE__ */ React6.createElement(DialogActions3, null, /* @__PURE__ */ React6.createElement(Button4, { onClick: onClose, disabled: submitting }, "Cancel"), /* @__PURE__ */ React6.createElement(Button4, { onClick: handleSubmit, disabled: submitting, variant: "contained" }, submitting ? "Saving..." : "Save")));
     };
   }
 });
 
 // src/components/UsageStats.tsx
-import React6, { useMemo as useMemo5, useState as useState4 } from "react";
+import React7, { useMemo as useMemo5, useState as useState4 } from "react";
 import Paper4 from "@mui/material/Paper";
 import Box6 from "@mui/material/Box";
 import Typography6 from "@mui/material/Typography";
@@ -2520,16 +2517,16 @@ var init_UsageStats = __esm({
       "30d": "Last 30 days"
     };
     fmtPct = (n) => `${(n * 100).toFixed(1)}%`;
-    ChartSkeleton = ({ height = 240 }) => /* @__PURE__ */ React6.createElement(Skeleton3, { variant: "rounded", height });
+    ChartSkeleton = ({ height = 240 }) => /* @__PURE__ */ React7.createElement(Skeleton3, { variant: "rounded", height });
     ChartOrFallback = ({ loading, empty, height = 240, children }) => {
-      if (loading) return /* @__PURE__ */ React6.createElement(ChartSkeleton, { height });
-      if (empty) return /* @__PURE__ */ React6.createElement(EmptyState, { message: "No data for this period", height });
-      return /* @__PURE__ */ React6.createElement(React6.Fragment, null, children);
+      if (loading) return /* @__PURE__ */ React7.createElement(ChartSkeleton, { height });
+      if (empty) return /* @__PURE__ */ React7.createElement(EmptyState, { message: "No data for this period", height });
+      return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children);
     };
     SuccessRateCell = ({ rate, requests }) => {
-      if (requests === 0) return /* @__PURE__ */ React6.createElement(Typography6, { variant: "body2", color: "text.secondary" }, "\u2014");
+      if (requests === 0) return /* @__PURE__ */ React7.createElement(Typography6, { variant: "body2", color: "text.secondary" }, "\u2014");
       const tone = rateTone(rate);
-      return /* @__PURE__ */ React6.createElement(Box6, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React6.createElement(Box6, { width: 72, flexShrink: 0 }, /* @__PURE__ */ React6.createElement(Meter, { value: rate * 100, tone, height: 4 })), /* @__PURE__ */ React6.createElement(
+      return /* @__PURE__ */ React7.createElement(Box6, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React7.createElement(Box6, { width: 72, flexShrink: 0 }, /* @__PURE__ */ React7.createElement(Meter, { value: rate * 100, tone, height: 4 })), /* @__PURE__ */ React7.createElement(
         Typography6,
         {
           variant: "caption",
@@ -2678,23 +2675,23 @@ var init_UsageStats = __esm({
       ];
       const renderKeyRows = () => {
         if (loading) {
-          return /* @__PURE__ */ React6.createElement(TableRow3, null, /* @__PURE__ */ React6.createElement(TableCell3, { colSpan: 7, sx: { py: 3 } }, /* @__PURE__ */ React6.createElement(Skeleton3, { variant: "rounded", height: 80 })));
+          return /* @__PURE__ */ React7.createElement(TableRow3, null, /* @__PURE__ */ React7.createElement(TableCell3, { colSpan: 7, sx: { py: 3 } }, /* @__PURE__ */ React7.createElement(Skeleton3, { variant: "rounded", height: 80 })));
         }
         if (keyRows.length === 0) {
-          return /* @__PURE__ */ React6.createElement(TableRow3, null, /* @__PURE__ */ React6.createElement(TableCell3, { colSpan: 7 }, /* @__PURE__ */ React6.createElement(EmptyState, { message: "No key activity in this period" })));
+          return /* @__PURE__ */ React7.createElement(TableRow3, null, /* @__PURE__ */ React7.createElement(TableCell3, { colSpan: 7 }, /* @__PURE__ */ React7.createElement(EmptyState, { message: "No key activity in this period" })));
         }
-        return [...keyRows].sort((a, b) => b.spend - a.spend || b.apiRequests - a.apiRequests).map((r) => /* @__PURE__ */ React6.createElement(TableRow3, { key: r.keyHash }, /* @__PURE__ */ React6.createElement(TableCell3, null, /* @__PURE__ */ React6.createElement(Typography6, { variant: "body2", sx: { fontWeight: 600 } }, r.keyAlias), r.teamId ? /* @__PURE__ */ React6.createElement(Typography6, { variant: "caption", color: "text.secondary" }, "team: ", r.teamId) : null), /* @__PURE__ */ React6.createElement(TableCell3, null, /* @__PURE__ */ React6.createElement(Box6, { display: "flex", gap: 0.5, flexWrap: "wrap" }, r.models.slice(0, 3).map((m) => /* @__PURE__ */ React6.createElement(TagChip, { key: m, label: m, title: m })), r.models.length > 3 && /* @__PURE__ */ React6.createElement(TagChip, { label: `+${r.models.length - 3}`, mono: false }))), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtCompact(r.totalTokens)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ React6.createElement(TableCell3, null, /* @__PURE__ */ React6.createElement(SuccessRateCell, { rate: r.successRate, requests: r.apiRequests }))));
+        return [...keyRows].sort((a, b) => b.spend - a.spend || b.apiRequests - a.apiRequests).map((r) => /* @__PURE__ */ React7.createElement(TableRow3, { key: r.keyHash }, /* @__PURE__ */ React7.createElement(TableCell3, null, /* @__PURE__ */ React7.createElement(Typography6, { variant: "body2", sx: { fontWeight: 600 } }, r.keyAlias), r.teamId ? /* @__PURE__ */ React7.createElement(Typography6, { variant: "caption", color: "text.secondary" }, "team: ", r.teamId) : null), /* @__PURE__ */ React7.createElement(TableCell3, null, /* @__PURE__ */ React7.createElement(Box6, { display: "flex", gap: 0.5, flexWrap: "wrap" }, r.models.slice(0, 3).map((m) => /* @__PURE__ */ React7.createElement(TagChip, { key: m, label: m, title: m })), r.models.length > 3 && /* @__PURE__ */ React7.createElement(TagChip, { label: `+${r.models.length - 3}`, mono: false }))), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, fmtCompact(r.totalTokens)), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ React7.createElement(TableCell3, null, /* @__PURE__ */ React7.createElement(SuccessRateCell, { rate: r.successRate, requests: r.apiRequests }))));
       };
       const renderModelRows = () => {
         if (loading) {
-          return /* @__PURE__ */ React6.createElement(TableRow3, null, /* @__PURE__ */ React6.createElement(TableCell3, { colSpan: 8, sx: { py: 3 } }, /* @__PURE__ */ React6.createElement(Skeleton3, { variant: "rounded", height: 80 })));
+          return /* @__PURE__ */ React7.createElement(TableRow3, null, /* @__PURE__ */ React7.createElement(TableCell3, { colSpan: 8, sx: { py: 3 } }, /* @__PURE__ */ React7.createElement(Skeleton3, { variant: "rounded", height: 80 })));
         }
         if (modelRows.length === 0) {
-          return /* @__PURE__ */ React6.createElement(TableRow3, null, /* @__PURE__ */ React6.createElement(TableCell3, { colSpan: 8 }, /* @__PURE__ */ React6.createElement(EmptyState, { message: "No model activity in this period" })));
+          return /* @__PURE__ */ React7.createElement(TableRow3, null, /* @__PURE__ */ React7.createElement(TableCell3, { colSpan: 8 }, /* @__PURE__ */ React7.createElement(EmptyState, { message: "No model activity in this period" })));
         }
-        return [...modelRows].sort((a, b) => b.spend - a.spend || b.totalTokens - a.totalTokens).map((r) => /* @__PURE__ */ React6.createElement(TableRow3, { key: r.model }, /* @__PURE__ */ React6.createElement(TableCell3, null, /* @__PURE__ */ React6.createElement(Box6, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React6.createElement(Box6, { sx: { width: 8, height: 8, borderRadius: "50%", bgcolor: chartColor(r.model), flexShrink: 0 } }), /* @__PURE__ */ React6.createElement(Typography6, { variant: "body2", sx: { fontWeight: 600 } }, r.model))), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtInt(r.successfulRequests)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtCompact(r.promptTokens)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtCompact(r.completionTokens)), /* @__PURE__ */ React6.createElement(TableCell3, null, /* @__PURE__ */ React6.createElement(SuccessRateCell, { rate: r.successRate, requests: r.apiRequests }))));
+        return [...modelRows].sort((a, b) => b.spend - a.spend || b.totalTokens - a.totalTokens).map((r) => /* @__PURE__ */ React7.createElement(TableRow3, { key: r.model }, /* @__PURE__ */ React7.createElement(TableCell3, null, /* @__PURE__ */ React7.createElement(Box6, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React7.createElement(Box6, { sx: { width: 8, height: 8, borderRadius: "50%", bgcolor: chartColor(r.model), flexShrink: 0 } }), /* @__PURE__ */ React7.createElement(Typography6, { variant: "body2", sx: { fontWeight: 600 } }, r.model))), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, fmtInt(r.successfulRequests)), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, fmtCompact(r.promptTokens)), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, fmtCompact(r.completionTokens)), /* @__PURE__ */ React7.createElement(TableCell3, null, /* @__PURE__ */ React7.createElement(SuccessRateCell, { rate: r.successRate, requests: r.apiRequests }))));
       };
-      const periodSelect = /* @__PURE__ */ React6.createElement(
+      const periodSelect = /* @__PURE__ */ React7.createElement(
         TextField4,
         {
           select: true,
@@ -2704,17 +2701,17 @@ var init_UsageStats = __esm({
           onChange: (e) => handlePresetChange(e.target.value),
           sx: { minWidth: 160 }
         },
-        Object.keys(PRESET_LABELS).map((p) => /* @__PURE__ */ React6.createElement(MenuItem3, { key: p, value: p }, PRESET_LABELS[p]))
+        Object.keys(PRESET_LABELS).map((p) => /* @__PURE__ */ React7.createElement(MenuItem3, { key: p, value: p }, PRESET_LABELS[p]))
       );
-      return /* @__PURE__ */ React6.createElement(
+      return /* @__PURE__ */ React7.createElement(
         SectionCard,
         {
           title: "Usage Analytics",
           subtitle: `${PRESET_LABELS[currentPreset]} \xB7 ${dateRange.start.toLocaleDateString()} \u2013 ${dateRange.end.toLocaleDateString()}`,
           actions: periodSelect
         },
-        /* @__PURE__ */ React6.createElement(MetricStrip, { metrics }),
-        /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React7.createElement(MetricStrip, { metrics }),
+        /* @__PURE__ */ React7.createElement(
           Box6,
           {
             sx: {
@@ -2727,7 +2724,7 @@ var init_UsageStats = __esm({
               mb: 2
             }
           },
-          /* @__PURE__ */ React6.createElement(
+          /* @__PURE__ */ React7.createElement(
             SegmentedControl,
             {
               value: tab,
@@ -2739,7 +2736,7 @@ var init_UsageStats = __esm({
               ]
             }
           ),
-          tab === "models" && /* @__PURE__ */ React6.createElement(
+          tab === "models" && /* @__PURE__ */ React7.createElement(
             TextField4,
             {
               select: true,
@@ -2749,17 +2746,17 @@ var init_UsageStats = __esm({
               onChange: (e) => setSelectedModel(e.target.value),
               sx: { minWidth: 220 }
             },
-            /* @__PURE__ */ React6.createElement(MenuItem3, { value: "all" }, "All models"),
-            models.map((m) => /* @__PURE__ */ React6.createElement(MenuItem3, { key: m.model_name, value: m.model_name }, m.model_name))
+            /* @__PURE__ */ React7.createElement(MenuItem3, { value: "all" }, "All models"),
+            models.map((m) => /* @__PURE__ */ React7.createElement(MenuItem3, { key: m.model_name, value: m.model_name }, m.model_name))
           )
         ),
-        tab === "costs" && /* @__PURE__ */ React6.createElement(Grid, { container: true, spacing: 2 }, /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(ChartCard, { title: "Daily spend by model", height: 260 }, /* @__PURE__ */ React6.createElement(ChartOrFallback, { loading, empty: modelSpendByDate.length === 0, height: 260 }, /* @__PURE__ */ React6.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React6.createElement(AreaChart, { data: modelSpendByDate, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ React6.createElement(CartesianGrid, { ...chart.grid }), /* @__PURE__ */ React6.createElement(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React6.createElement(YAxis, { tickFormatter: fmtUsdCompact, width: 56, ...chart.axis }), /* @__PURE__ */ React6.createElement(
+        tab === "costs" && /* @__PURE__ */ React7.createElement(Grid, { container: true, spacing: 2 }, /* @__PURE__ */ React7.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(ChartCard, { title: "Daily spend by model", height: 260 }, /* @__PURE__ */ React7.createElement(ChartOrFallback, { loading, empty: modelSpendByDate.length === 0, height: 260 }, /* @__PURE__ */ React7.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React7.createElement(AreaChart, { data: modelSpendByDate, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ React7.createElement(CartesianGrid, { ...chart.grid }), /* @__PURE__ */ React7.createElement(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React7.createElement(YAxis, { tickFormatter: fmtUsdCompact, width: 56, ...chart.axis }), /* @__PURE__ */ React7.createElement(
           Tooltip,
           {
             cursor: chart.cursor,
-            content: /* @__PURE__ */ React6.createElement(ChartTooltip, { valueFormatter: fmtUsd, hideZero: true })
+            content: /* @__PURE__ */ React7.createElement(ChartTooltip, { valueFormatter: fmtUsd, hideZero: true })
           }
-        ), topSpendModels.map((m) => /* @__PURE__ */ React6.createElement(
+        ), topSpendModels.map((m) => /* @__PURE__ */ React7.createElement(
           Area,
           {
             key: m,
@@ -2771,13 +2768,13 @@ var init_UsageStats = __esm({
             fill: chartColor(m),
             fillOpacity: 0.28
           }
-        ))))), !loading && topSpendModels.length > 0 && /* @__PURE__ */ React6.createElement(SeriesLegend, { series: topSpendModels.map((m) => ({ name: m, color: chartColor(m) })) }))), /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(ChartCard, { title: "Daily token usage" }, /* @__PURE__ */ React6.createElement(ChartOrFallback, { loading, empty: dailyData.length === 0 }, /* @__PURE__ */ React6.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React6.createElement(AreaChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ React6.createElement(CartesianGrid, { ...chart.grid }), /* @__PURE__ */ React6.createElement(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React6.createElement(YAxis, { tickFormatter: fmtCompact, width: 48, ...chart.axis }), /* @__PURE__ */ React6.createElement(Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ React6.createElement(ChartTooltip, { valueFormatter: fmtInt }) }), /* @__PURE__ */ React6.createElement(Legend, { ...chart.legend }), /* @__PURE__ */ React6.createElement(Area, { type: "monotone", dataKey: "promptTokens", name: "Input", stackId: "tok", stroke: SERIES.input, strokeWidth: 1.5, fill: SERIES.input, fillOpacity: 0.25 }), /* @__PURE__ */ React6.createElement(Area, { type: "monotone", dataKey: "completionTokens", name: "Output", stackId: "tok", stroke: SERIES.output, strokeWidth: 1.5, fill: SERIES.output, fillOpacity: 0.25 })))))), /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(ChartCard, { title: "Daily requests" }, /* @__PURE__ */ React6.createElement(ChartOrFallback, { loading, empty: dailyData.length === 0 }, /* @__PURE__ */ React6.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React6.createElement(BarChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 }, barCategoryGap: "30%" }, /* @__PURE__ */ React6.createElement(CartesianGrid, { ...chart.grid }), /* @__PURE__ */ React6.createElement(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React6.createElement(YAxis, { tickFormatter: fmtCompact, width: 48, ...chart.axis }), /* @__PURE__ */ React6.createElement(Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ React6.createElement(ChartTooltip, { valueFormatter: fmtInt }) }), /* @__PURE__ */ React6.createElement(Legend, { ...chart.legend }), /* @__PURE__ */ React6.createElement(Bar, { dataKey: "successfulRequests", name: "Successful", fill: SERIES.success, stackId: "r" }), /* @__PURE__ */ React6.createElement(Bar, { dataKey: "failedRequests", name: "Failed", fill: SERIES.failure, stackId: "r", radius: [3, 3, 0, 0] })))))), /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(ChartCard, { title: "Daily success rate" }, /* @__PURE__ */ React6.createElement(ChartOrFallback, { loading, empty: successRateData.length === 0 }, /* @__PURE__ */ React6.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React6.createElement(LineChart, { data: successRateData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ React6.createElement(CartesianGrid, { ...chart.grid }), /* @__PURE__ */ React6.createElement(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React6.createElement(YAxis, { domain: [0, 100], tickFormatter: (v) => `${v}%`, width: 44, ...chart.axis }), /* @__PURE__ */ React6.createElement(
+        ))))), !loading && topSpendModels.length > 0 && /* @__PURE__ */ React7.createElement(SeriesLegend, { series: topSpendModels.map((m) => ({ name: m, color: chartColor(m) })) }))), /* @__PURE__ */ React7.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React7.createElement(ChartCard, { title: "Daily token usage" }, /* @__PURE__ */ React7.createElement(ChartOrFallback, { loading, empty: dailyData.length === 0 }, /* @__PURE__ */ React7.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React7.createElement(AreaChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ React7.createElement(CartesianGrid, { ...chart.grid }), /* @__PURE__ */ React7.createElement(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React7.createElement(YAxis, { tickFormatter: fmtCompact, width: 48, ...chart.axis }), /* @__PURE__ */ React7.createElement(Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ React7.createElement(ChartTooltip, { valueFormatter: fmtInt }) }), /* @__PURE__ */ React7.createElement(Legend, { ...chart.legend }), /* @__PURE__ */ React7.createElement(Area, { type: "monotone", dataKey: "promptTokens", name: "Input", stackId: "tok", stroke: SERIES.input, strokeWidth: 1.5, fill: SERIES.input, fillOpacity: 0.25 }), /* @__PURE__ */ React7.createElement(Area, { type: "monotone", dataKey: "completionTokens", name: "Output", stackId: "tok", stroke: SERIES.output, strokeWidth: 1.5, fill: SERIES.output, fillOpacity: 0.25 })))))), /* @__PURE__ */ React7.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React7.createElement(ChartCard, { title: "Daily requests" }, /* @__PURE__ */ React7.createElement(ChartOrFallback, { loading, empty: dailyData.length === 0 }, /* @__PURE__ */ React7.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React7.createElement(BarChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 }, barCategoryGap: "30%" }, /* @__PURE__ */ React7.createElement(CartesianGrid, { ...chart.grid }), /* @__PURE__ */ React7.createElement(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React7.createElement(YAxis, { tickFormatter: fmtCompact, width: 48, ...chart.axis }), /* @__PURE__ */ React7.createElement(Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ React7.createElement(ChartTooltip, { valueFormatter: fmtInt }) }), /* @__PURE__ */ React7.createElement(Legend, { ...chart.legend }), /* @__PURE__ */ React7.createElement(Bar, { dataKey: "successfulRequests", name: "Successful", fill: SERIES.success, stackId: "r" }), /* @__PURE__ */ React7.createElement(Bar, { dataKey: "failedRequests", name: "Failed", fill: SERIES.failure, stackId: "r", radius: [3, 3, 0, 0] })))))), /* @__PURE__ */ React7.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React7.createElement(ChartCard, { title: "Daily success rate" }, /* @__PURE__ */ React7.createElement(ChartOrFallback, { loading, empty: successRateData.length === 0 }, /* @__PURE__ */ React7.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React7.createElement(LineChart, { data: successRateData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ React7.createElement(CartesianGrid, { ...chart.grid }), /* @__PURE__ */ React7.createElement(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React7.createElement(YAxis, { domain: [0, 100], tickFormatter: (v) => `${v}%`, width: 44, ...chart.axis }), /* @__PURE__ */ React7.createElement(
           Tooltip,
           {
             cursor: chart.cursor,
-            content: /* @__PURE__ */ React6.createElement(ChartTooltip, { valueFormatter: (v) => `${v}%` })
+            content: /* @__PURE__ */ React7.createElement(ChartTooltip, { valueFormatter: (v) => `${v}%` })
           }
-        ), /* @__PURE__ */ React6.createElement(ReferenceLine, { y: 100, stroke: SERIES.success, strokeDasharray: "4 4", strokeOpacity: 0.5 }), /* @__PURE__ */ React6.createElement(
+        ), /* @__PURE__ */ React7.createElement(ReferenceLine, { y: 100, stroke: SERIES.success, strokeDasharray: "4 4", strokeOpacity: 0.5 }), /* @__PURE__ */ React7.createElement(
           Line,
           {
             type: "monotone",
@@ -2788,13 +2785,13 @@ var init_UsageStats = __esm({
             dot: { r: 2.5, strokeWidth: 0, fill: SERIES.input },
             activeDot: { r: 4 }
           }
-        )))))), /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(
+        )))))), /* @__PURE__ */ React7.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React7.createElement(
           ChartCard,
           {
             title: maxBudget > 0 ? "Cumulative spend vs budget" : "Cumulative spend",
             meta: maxBudget > 0 ? `${fmtUsd(totalCumSpend)} used \xB7 ${fmtUsd(Math.max(0, maxBudget - totalCumSpend))} left` : void 0
           },
-          /* @__PURE__ */ React6.createElement(ChartOrFallback, { loading, empty: cumulativeData.length === 0 }, /* @__PURE__ */ React6.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React6.createElement(AreaChart, { data: cumulativeData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ React6.createElement(CartesianGrid, { ...chart.grid }), /* @__PURE__ */ React6.createElement(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React6.createElement(
+          /* @__PURE__ */ React7.createElement(ChartOrFallback, { loading, empty: cumulativeData.length === 0 }, /* @__PURE__ */ React7.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React7.createElement(AreaChart, { data: cumulativeData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ React7.createElement(CartesianGrid, { ...chart.grid }), /* @__PURE__ */ React7.createElement(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React7.createElement(
             YAxis,
             {
               tickFormatter: fmtUsdCompact,
@@ -2802,13 +2799,13 @@ var init_UsageStats = __esm({
               domain: cumulativeDomain,
               ...chart.axis
             }
-          ), /* @__PURE__ */ React6.createElement(
+          ), /* @__PURE__ */ React7.createElement(
             Tooltip,
             {
               cursor: chart.cursor,
-              content: /* @__PURE__ */ React6.createElement(ChartTooltip, { valueFormatter: fmtUsd })
+              content: /* @__PURE__ */ React7.createElement(ChartTooltip, { valueFormatter: fmtUsd })
             }
-          ), maxBudget > 0 && /* @__PURE__ */ React6.createElement(
+          ), maxBudget > 0 && /* @__PURE__ */ React7.createElement(
             ReferenceLine,
             {
               y: maxBudget,
@@ -2816,7 +2813,7 @@ var init_UsageStats = __esm({
               strokeDasharray: "5 4",
               label: { value: `Budget ${fmtUsd(maxBudget)}`, position: "insideTopRight", fontSize: 10, fill: SERIES.budget }
             }
-          ), /* @__PURE__ */ React6.createElement(
+          ), /* @__PURE__ */ React7.createElement(
             Area,
             {
               type: "monotone",
@@ -2829,32 +2826,32 @@ var init_UsageStats = __esm({
             }
           ))))
         ))),
-        tab === "models" && /* @__PURE__ */ React6.createElement(Grid, { container: true, spacing: 2 }, /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(ChartCard, { title: "Spend by model", height: Math.max(200, topModelSpendBars.length * 34) }, /* @__PURE__ */ React6.createElement(
+        tab === "models" && /* @__PURE__ */ React7.createElement(Grid, { container: true, spacing: 2 }, /* @__PURE__ */ React7.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React7.createElement(ChartCard, { title: "Spend by model", height: Math.max(200, topModelSpendBars.length * 34) }, /* @__PURE__ */ React7.createElement(
           ChartOrFallback,
           {
             loading,
             empty: topModelSpendBars.length === 0,
             height: Math.max(200, topModelSpendBars.length * 34)
           },
-          /* @__PURE__ */ React6.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React6.createElement(BarChart, { data: topModelSpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ React6.createElement(CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ React6.createElement(XAxis, { type: "number", tickFormatter: fmtUsdCompact, ...chart.axis }), /* @__PURE__ */ React6.createElement(YAxis, { type: "category", dataKey: "model", width: 170, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ React6.createElement(Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ React6.createElement(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }), /* @__PURE__ */ React6.createElement(Bar, { dataKey: "spend", name: "Spend", radius: [0, 3, 3, 0], barSize: 14 }, topModelSpendBars.map((r) => /* @__PURE__ */ React6.createElement(Cell, { key: r.model, fill: chartColor(r.model) })))))
-        ))), /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React6.createElement(ChartCard, { title: "Tokens by model", height: Math.max(200, topModelSpendBars.length * 34) }, /* @__PURE__ */ React6.createElement(
+          /* @__PURE__ */ React7.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React7.createElement(BarChart, { data: topModelSpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ React7.createElement(CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ React7.createElement(XAxis, { type: "number", tickFormatter: fmtUsdCompact, ...chart.axis }), /* @__PURE__ */ React7.createElement(YAxis, { type: "category", dataKey: "model", width: 170, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ React7.createElement(Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ React7.createElement(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }), /* @__PURE__ */ React7.createElement(Bar, { dataKey: "spend", name: "Spend", radius: [0, 3, 3, 0], barSize: 14 }, topModelSpendBars.map((r) => /* @__PURE__ */ React7.createElement(Cell, { key: r.model, fill: chartColor(r.model) })))))
+        ))), /* @__PURE__ */ React7.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React7.createElement(ChartCard, { title: "Tokens by model", height: Math.max(200, topModelSpendBars.length * 34) }, /* @__PURE__ */ React7.createElement(
           ChartOrFallback,
           {
             loading,
             empty: modelRows.length === 0,
             height: Math.max(200, topModelSpendBars.length * 34)
           },
-          /* @__PURE__ */ React6.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React6.createElement(BarChart, { data: topModelSpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ React6.createElement(CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ React6.createElement(XAxis, { type: "number", tickFormatter: fmtCompact, ...chart.axis }), /* @__PURE__ */ React6.createElement(YAxis, { type: "category", dataKey: "model", width: 170, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ React6.createElement(Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ React6.createElement(ChartTooltip, { valueFormatter: fmtInt, labelFormatter: (l) => l }) }), /* @__PURE__ */ React6.createElement(Legend, { ...chart.legend }), /* @__PURE__ */ React6.createElement(Bar, { dataKey: "promptTokens", name: "Input", fill: SERIES.input, stackId: "t", barSize: 14 }), /* @__PURE__ */ React6.createElement(Bar, { dataKey: "completionTokens", name: "Output", fill: SERIES.output, stackId: "t", barSize: 14, radius: [0, 3, 3, 0] })))
-        ))), /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(TableContainer3, { component: Paper4, variant: "outlined", sx: { borderRadius: 2 } }, /* @__PURE__ */ React6.createElement(Table3, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React6.createElement(TableHead3, null, /* @__PURE__ */ React6.createElement(TableRow3, null, /* @__PURE__ */ React6.createElement(TableCell3, null, "Model"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Spend"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Requests"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Success"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Failed"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Input"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Output"), /* @__PURE__ */ React6.createElement(TableCell3, { sx: { width: 160 } }, "Success rate"))), /* @__PURE__ */ React6.createElement(TableBody3, null, renderModelRows()))))),
-        tab === "keys" && /* @__PURE__ */ React6.createElement(Grid, { container: true, spacing: 2 }, (loading || topKeySpendBars.length > 0) && /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(ChartCard, { title: "Spend by key", height: Math.max(160, topKeySpendBars.length * 32) }, /* @__PURE__ */ React6.createElement(
+          /* @__PURE__ */ React7.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React7.createElement(BarChart, { data: topModelSpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ React7.createElement(CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ React7.createElement(XAxis, { type: "number", tickFormatter: fmtCompact, ...chart.axis }), /* @__PURE__ */ React7.createElement(YAxis, { type: "category", dataKey: "model", width: 170, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ React7.createElement(Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ React7.createElement(ChartTooltip, { valueFormatter: fmtInt, labelFormatter: (l) => l }) }), /* @__PURE__ */ React7.createElement(Legend, { ...chart.legend }), /* @__PURE__ */ React7.createElement(Bar, { dataKey: "promptTokens", name: "Input", fill: SERIES.input, stackId: "t", barSize: 14 }), /* @__PURE__ */ React7.createElement(Bar, { dataKey: "completionTokens", name: "Output", fill: SERIES.output, stackId: "t", barSize: 14, radius: [0, 3, 3, 0] })))
+        ))), /* @__PURE__ */ React7.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(TableContainer3, { component: Paper4, variant: "outlined", sx: { borderRadius: 2 } }, /* @__PURE__ */ React7.createElement(Table3, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React7.createElement(TableHead3, null, /* @__PURE__ */ React7.createElement(TableRow3, null, /* @__PURE__ */ React7.createElement(TableCell3, null, "Model"), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, "Spend"), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, "Requests"), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, "Success"), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, "Failed"), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, "Input"), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, "Output"), /* @__PURE__ */ React7.createElement(TableCell3, { sx: { width: 160 } }, "Success rate"))), /* @__PURE__ */ React7.createElement(TableBody3, null, renderModelRows()))))),
+        tab === "keys" && /* @__PURE__ */ React7.createElement(Grid, { container: true, spacing: 2 }, (loading || topKeySpendBars.length > 0) && /* @__PURE__ */ React7.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(ChartCard, { title: "Spend by key", height: Math.max(160, topKeySpendBars.length * 32) }, /* @__PURE__ */ React7.createElement(
           ChartOrFallback,
           {
             loading,
             empty: topKeySpendBars.length === 0,
             height: Math.max(160, topKeySpendBars.length * 32)
           },
-          /* @__PURE__ */ React6.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React6.createElement(BarChart, { data: topKeySpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ React6.createElement(CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ React6.createElement(XAxis, { type: "number", tickFormatter: fmtUsdCompact, ...chart.axis }), /* @__PURE__ */ React6.createElement(YAxis, { type: "category", dataKey: "keyAlias", width: 160, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ React6.createElement(Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ React6.createElement(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }), /* @__PURE__ */ React6.createElement(Bar, { dataKey: "spend", name: "Spend", fill: SERIES.input, radius: [0, 3, 3, 0], barSize: 14 })))
-        ))), /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(TableContainer3, { component: Paper4, variant: "outlined", sx: { borderRadius: 2 } }, /* @__PURE__ */ React6.createElement(Table3, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React6.createElement(TableHead3, null, /* @__PURE__ */ React6.createElement(TableRow3, null, /* @__PURE__ */ React6.createElement(TableCell3, null, "Key"), /* @__PURE__ */ React6.createElement(TableCell3, null, "Models"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Spend"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Requests"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Tokens"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Failed"), /* @__PURE__ */ React6.createElement(TableCell3, { sx: { width: 160 } }, "Success rate"))), /* @__PURE__ */ React6.createElement(TableBody3, null, renderKeyRows())))))
+          /* @__PURE__ */ React7.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React7.createElement(BarChart, { data: topKeySpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ React7.createElement(CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ React7.createElement(XAxis, { type: "number", tickFormatter: fmtUsdCompact, ...chart.axis }), /* @__PURE__ */ React7.createElement(YAxis, { type: "category", dataKey: "keyAlias", width: 160, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ React7.createElement(Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ React7.createElement(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }), /* @__PURE__ */ React7.createElement(Bar, { dataKey: "spend", name: "Spend", fill: SERIES.input, radius: [0, 3, 3, 0], barSize: 14 })))
+        ))), /* @__PURE__ */ React7.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(TableContainer3, { component: Paper4, variant: "outlined", sx: { borderRadius: 2 } }, /* @__PURE__ */ React7.createElement(Table3, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React7.createElement(TableHead3, null, /* @__PURE__ */ React7.createElement(TableRow3, null, /* @__PURE__ */ React7.createElement(TableCell3, null, "Key"), /* @__PURE__ */ React7.createElement(TableCell3, null, "Models"), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, "Spend"), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, "Requests"), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, "Tokens"), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, "Failed"), /* @__PURE__ */ React7.createElement(TableCell3, { sx: { width: 160 } }, "Success rate"))), /* @__PURE__ */ React7.createElement(TableBody3, null, renderKeyRows())))))
       );
     };
   }
@@ -2982,12 +2979,12 @@ var init_budget = __esm({
 });
 
 // src/components/BudgetLimitList.tsx
-import React7 from "react";
+import React8 from "react";
 import Box7 from "@mui/material/Box";
 import Paper5 from "@mui/material/Paper";
 import Typography7 from "@mui/material/Typography";
 import { alpha as alpha4, useTheme as useTheme2 } from "@mui/material/styles";
-import { Link } from "@backstage/core-components";
+import { Link as Link2 } from "@backstage/core-components";
 function levelToneColor(tone, theme) {
   switch (tone) {
     case "success":
@@ -3013,7 +3010,7 @@ var init_BudgetLimitList = __esm({
       const tone = budgetTone2(limit.pct);
       const pct = Math.round(limit.pct);
       const closeTo = limit.softLimit !== void 0 && limit.spend >= limit.softLimit;
-      return /* @__PURE__ */ React7.createElement(Paper5, { variant: "outlined", sx: { px: 1.5, py: 1.25, borderRadius: 1.5 } }, /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 1.5 } }, /* @__PURE__ */ React7.createElement(Box7, { sx: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ React7.createElement(
+      return /* @__PURE__ */ React8.createElement(Paper5, { variant: "outlined", sx: { px: 1.5, py: 1.25, borderRadius: 1.5 } }, /* @__PURE__ */ React8.createElement(Box7, { sx: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 1.5 } }, /* @__PURE__ */ React8.createElement(Box7, { sx: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ React8.createElement(
         Typography7,
         {
           variant: "body2",
@@ -3021,7 +3018,7 @@ var init_BudgetLimitList = __esm({
           title: limit.sublabel ? `${limit.label} \xB7 ${limit.sublabel}` : limit.label
         },
         limit.label
-      ), limit.sublabel && /* @__PURE__ */ React7.createElement(
+      ), limit.sublabel && /* @__PURE__ */ React8.createElement(
         Typography7,
         {
           variant: "caption",
@@ -3036,7 +3033,7 @@ var init_BudgetLimitList = __esm({
           }
         },
         limit.sublabel
-      )), limit.hidden ? /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, pct, "% used") : /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, fmtUsd(limit.spend), /* @__PURE__ */ React7.createElement(Box7, { component: "span", color: "text.secondary", sx: { fontWeight: 400 } }, " / ", fmtUsd(limit.budget)))), /* @__PURE__ */ React7.createElement(Box7, { sx: { mt: 1 } }, /* @__PURE__ */ React7.createElement(Meter, { value: limit.pct, tone, height: 6 })), /* @__PURE__ */ React7.createElement(
+      )), limit.hidden ? /* @__PURE__ */ React8.createElement(Typography7, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, pct, "% used") : /* @__PURE__ */ React8.createElement(Typography7, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, fmtUsd(limit.spend), /* @__PURE__ */ React8.createElement(Box7, { component: "span", color: "text.secondary", sx: { fontWeight: 400 } }, " / ", fmtUsd(limit.budget)))), /* @__PURE__ */ React8.createElement(Box7, { sx: { mt: 1 } }, /* @__PURE__ */ React8.createElement(Meter, { value: limit.pct, tone, height: 6 })), /* @__PURE__ */ React8.createElement(
         Box7,
         {
           sx: {
@@ -3047,14 +3044,14 @@ var init_BudgetLimitList = __esm({
             mt: 0.75
           }
         },
-        /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, limit.hidden ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, "Hidden by admin") : /* @__PURE__ */ React7.createElement(React7.Fragment, null, pct, "% of budget", closeTo && ` \xB7 soft-limit warning`)),
-        /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary" }, fmtBudgetDuration(limit.budgetDuration) ? `resets ${fmtBudgetDuration(limit.budgetDuration)}` : "never resets")
+        /* @__PURE__ */ React8.createElement(Typography7, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, limit.hidden ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, "Hidden by admin") : /* @__PURE__ */ React8.createElement(React8.Fragment, null, pct, "% of budget", closeTo && ` \xB7 soft-limit warning`)),
+        /* @__PURE__ */ React8.createElement(Typography7, { variant: "caption", color: "text.secondary" }, fmtBudgetDuration(limit.budgetDuration) ? `resets ${fmtBudgetDuration(limit.budgetDuration)}` : "never resets")
       ));
     };
     TaggedLimit = ({ limit }) => {
       const theme = useTheme2();
       const tone = budgetTone2(limit.pct);
-      return /* @__PURE__ */ React7.createElement(Box7, null, /* @__PURE__ */ React7.createElement(
+      return /* @__PURE__ */ React8.createElement(Box7, null, /* @__PURE__ */ React8.createElement(
         Typography7,
         {
           sx: {
@@ -3067,7 +3064,7 @@ var init_BudgetLimitList = __esm({
           }
         },
         limit.kind
-      ), /* @__PURE__ */ React7.createElement(LimitCard, { limit }));
+      ), /* @__PURE__ */ React8.createElement(LimitCard, { limit }));
     };
     MoreKeysNote = ({
       count,
@@ -3076,12 +3073,12 @@ var init_BudgetLimitList = __esm({
     }) => {
       const text = label ?? `+${count} more budgeted key${count > 1 ? "s" : ""} further from the cap`;
       if (!href) {
-        return /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary" }, text);
+        return /* @__PURE__ */ React8.createElement(Typography7, { variant: "caption", color: "text.secondary" }, text);
       }
-      return /* @__PURE__ */ React7.createElement(Link, { to: href, variant: "caption" }, text, " \u2192");
+      return /* @__PURE__ */ React8.createElement(Link2, { to: href, variant: "caption" }, text, " \u2192");
     };
-    BudgetLimitList = ({ limits, hiddenKeyCount = 0, keysHref }) => /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", flexDirection: "column", gap: 1.25 } }, limits.map((limit) => /* @__PURE__ */ React7.createElement(TaggedLimit, { key: `${limit.kind}:${limit.sublabel ?? limit.label}`, limit })), hiddenKeyCount > 0 && /* @__PURE__ */ React7.createElement(MoreKeysNote, { count: hiddenKeyCount, href: keysHref }));
-    LimitListPanel = ({ children }) => /* @__PURE__ */ React7.createElement(
+    BudgetLimitList = ({ limits, hiddenKeyCount = 0, keysHref }) => /* @__PURE__ */ React8.createElement(Box7, { sx: { display: "flex", flexDirection: "column", gap: 1.25 } }, limits.map((limit) => /* @__PURE__ */ React8.createElement(TaggedLimit, { key: `${limit.kind}:${limit.sublabel ?? limit.label}`, limit })), hiddenKeyCount > 0 && /* @__PURE__ */ React8.createElement(MoreKeysNote, { count: hiddenKeyCount, href: keysHref }));
+    LimitListPanel = ({ children }) => /* @__PURE__ */ React8.createElement(
       Box7,
       {
         sx: (theme) => ({
@@ -3097,7 +3094,7 @@ var init_BudgetLimitList = __esm({
 });
 
 // src/components/LiteLLMBudgetWidget.tsx
-import React8, { useEffect as useEffect3, useMemo as useMemo6, useState as useState5 } from "react";
+import React9, { useEffect as useEffect3, useMemo as useMemo6, useState as useState5 } from "react";
 import Paper6 from "@mui/material/Paper";
 import Box8 from "@mui/material/Box";
 import Typography8 from "@mui/material/Typography";
@@ -3124,7 +3121,7 @@ var init_LiteLLMBudgetWidget = __esm({
       tone,
       isLast,
       children
-    }) => /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", gap: 1.5 } }, /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", flexDirection: "column", alignItems: "center", width: 26, flexShrink: 0 } }, /* @__PURE__ */ React8.createElement(
+    }) => /* @__PURE__ */ React9.createElement(Box8, { sx: { display: "flex", gap: 1.5 } }, /* @__PURE__ */ React9.createElement(Box8, { sx: { display: "flex", flexDirection: "column", alignItems: "center", width: 26, flexShrink: 0 } }, /* @__PURE__ */ React9.createElement(
       Box8,
       {
         sx: (theme) => ({
@@ -3142,7 +3139,7 @@ var init_LiteLLMBudgetWidget = __esm({
         })
       },
       rank
-    ), /* @__PURE__ */ React8.createElement(
+    ), /* @__PURE__ */ React9.createElement(
       Box8,
       {
         sx: (theme) => ({
@@ -3152,7 +3149,7 @@ var init_LiteLLMBudgetWidget = __esm({
           bgcolor: isLast ? "transparent" : alpha5(theme.palette.text.primary, 0.12)
         })
       }
-    )), /* @__PURE__ */ React8.createElement(Box8, { sx: { flex: 1, minWidth: 0, pb: isLast ? 0 : 2 } }, /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", alignItems: "baseline", gap: 1, flexWrap: "wrap", mb: 0.75 } }, /* @__PURE__ */ React8.createElement(
+    )), /* @__PURE__ */ React9.createElement(Box8, { sx: { flex: 1, minWidth: 0, pb: isLast ? 0 : 2 } }, /* @__PURE__ */ React9.createElement(Box8, { sx: { display: "flex", alignItems: "baseline", gap: 1, flexWrap: "wrap", mb: 0.75 } }, /* @__PURE__ */ React9.createElement(
       Typography8,
       {
         sx: (theme) => ({
@@ -3164,8 +3161,8 @@ var init_LiteLLMBudgetWidget = __esm({
         })
       },
       name
-    ), /* @__PURE__ */ React8.createElement(Typography8, { variant: "caption", color: "text.secondary", sx: { fontSize: 11.5 } }, tagline), note && /* @__PURE__ */ React8.createElement(StatusPill, { label: note, tone: "neutral", dot: false, sx: { ml: "auto" } })), /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", flexDirection: "column", gap: 1 } }, children)));
-    EmptyLimitCard = ({ children }) => /* @__PURE__ */ React8.createElement(
+    ), /* @__PURE__ */ React9.createElement(Typography8, { variant: "caption", color: "text.secondary", sx: { fontSize: 11.5 } }, tagline), note && /* @__PURE__ */ React9.createElement(StatusPill, { label: note, tone: "neutral", dot: false, sx: { ml: "auto" } })), /* @__PURE__ */ React9.createElement(Box8, { sx: { display: "flex", flexDirection: "column", gap: 1 } }, children)));
+    EmptyLimitCard = ({ children }) => /* @__PURE__ */ React9.createElement(
       Paper6,
       {
         variant: "outlined",
@@ -3176,7 +3173,7 @@ var init_LiteLLMBudgetWidget = __esm({
           bgcolor: alpha5(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.03 : 0.015)
         })
       },
-      /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", color: "text.secondary", sx: { fontSize: 13 } }, children)
+      /* @__PURE__ */ React9.createElement(Typography8, { variant: "body2", color: "text.secondary", sx: { fontSize: 13 } }, children)
     );
     CLOSEST_LEVEL_LABEL = {
       key: "key",
@@ -3184,7 +3181,7 @@ var init_LiteLLMBudgetWidget = __esm({
       team: "team"
     };
     KEYS_PATH = "/litellm?tab=keys";
-    HierarchyNote = ({ withReset }) => /* @__PURE__ */ React8.createElement(
+    HierarchyNote = ({ withReset }) => /* @__PURE__ */ React9.createElement(
       Box8,
       {
         sx: (theme) => ({
@@ -3195,11 +3192,11 @@ var init_LiteLLMBudgetWidget = __esm({
           borderColor: alpha5(theme.palette.text.primary, 0.18)
         })
       },
-      /* @__PURE__ */ React8.createElement(Typography8, { variant: "caption", color: "text.secondary", display: "block" }, /* @__PURE__ */ React8.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__ */ React9.createElement(Typography8, { variant: "caption", color: "text.secondary", display: "block" }, /* @__PURE__ */ React9.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.")
     );
     FullBody = ({ summary }) => {
       const hasBudgetedKeys = summary.keys.length + summary.hiddenBudgetedKeys > 0;
-      return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
+      return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
         LevelFrame,
         {
           rank: 1,
@@ -3207,10 +3204,10 @@ var init_LiteLLMBudgetWidget = __esm({
           tagline: "per-key cap \xB7 highest priority",
           note: hasBudgetedKeys ? void 0 : "no key budgets set"
         },
-        !hasBudgetedKeys && /* @__PURE__ */ React8.createElement(EmptyLimitCard, null, "No key has a budget, so no key-level cap applies."),
-        summary.keys.map((k) => /* @__PURE__ */ React8.createElement(LimitCard, { key: k.sublabel ?? k.label, limit: k })),
-        summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ React8.createElement(MoreKeysNote, { count: summary.hiddenBudgetedKeys, href: KEYS_PATH })
-      ), /* @__PURE__ */ React8.createElement(
+        !hasBudgetedKeys && /* @__PURE__ */ React9.createElement(EmptyLimitCard, null, "No key has a budget, so no key-level cap applies."),
+        summary.keys.map((k) => /* @__PURE__ */ React9.createElement(LimitCard, { key: k.sublabel ?? k.label, limit: k })),
+        summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ React9.createElement(MoreKeysNote, { count: summary.hiddenBudgetedKeys, href: KEYS_PATH })
+      ), /* @__PURE__ */ React9.createElement(
         LevelFrame,
         {
           rank: 2,
@@ -3218,15 +3215,15 @@ var init_LiteLLMBudgetWidget = __esm({
           tagline: "cap on everything you spend with your own keys",
           note: "skipped for team-bound keys"
         },
-        summary.user ? /* @__PURE__ */ React8.createElement(LimitCard, { limit: summary.user }) : /* @__PURE__ */ React8.createElement(EmptyLimitCard, null, "No personal budget is set on your account.")
-      ), /* @__PURE__ */ React8.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__ */ React8.createElement(LimitCard, { key: t.sublabel ?? t.label, limit: t })) : /* @__PURE__ */ React8.createElement(EmptyLimitCard, null, "No team you belong to has a budget.")), /* @__PURE__ */ React8.createElement(LevelFrame, { rank: 4, name: "Global", tagline: "proxy-wide cap set by your admin", isLast: true }, /* @__PURE__ */ React8.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__ */ React8.createElement(Box8, { sx: { mt: 2 } }, /* @__PURE__ */ React8.createElement(HierarchyNote, { withReset: true })));
+        summary.user ? /* @__PURE__ */ React9.createElement(LimitCard, { limit: summary.user }) : /* @__PURE__ */ React9.createElement(EmptyLimitCard, null, "No personal budget is set on your account.")
+      ), /* @__PURE__ */ React9.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__ */ React9.createElement(LimitCard, { key: t.sublabel ?? t.label, limit: t })) : /* @__PURE__ */ React9.createElement(EmptyLimitCard, null, "No team you belong to has a budget.")), /* @__PURE__ */ React9.createElement(LevelFrame, { rank: 4, name: "Global", tagline: "proxy-wide cap set by your admin", isLast: true }, /* @__PURE__ */ React9.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__ */ React9.createElement(Box8, { sx: { mt: 2 } }, /* @__PURE__ */ React9.createElement(HierarchyNote, { withReset: true })));
     };
     CompactBody = ({ summary }) => {
       const { count } = budgetHeadline(summary);
       if (count === 0) {
-        return /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", color: "text.secondary", sx: { fontSize: 13 } }, "No budget limits apply to you right now.");
+        return /* @__PURE__ */ React9.createElement(Typography8, { variant: "body2", color: "text.secondary", sx: { fontSize: 13 } }, "No budget limits apply to you right now.");
       }
-      return /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", flexDirection: "column", gap: 1.25 } }, /* @__PURE__ */ React8.createElement(HierarchyNote, null), summary.keys.map((k) => /* @__PURE__ */ React8.createElement(TaggedLimit, { key: k.sublabel ?? k.label, limit: k })), summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ React8.createElement(MoreKeysNote, { count: summary.hiddenBudgetedKeys, href: KEYS_PATH }), summary.user && /* @__PURE__ */ React8.createElement(TaggedLimit, { limit: summary.user }), summary.teams.map((t) => /* @__PURE__ */ React8.createElement(TaggedLimit, { key: t.sublabel ?? t.label, limit: t })));
+      return /* @__PURE__ */ React9.createElement(Box8, { sx: { display: "flex", flexDirection: "column", gap: 1.25 } }, /* @__PURE__ */ React9.createElement(HierarchyNote, null), summary.keys.map((k) => /* @__PURE__ */ React9.createElement(TaggedLimit, { key: k.sublabel ?? k.label, limit: k })), summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ React9.createElement(MoreKeysNote, { count: summary.hiddenBudgetedKeys, href: KEYS_PATH }), summary.user && /* @__PURE__ */ React9.createElement(TaggedLimit, { limit: summary.user }), summary.teams.map((t) => /* @__PURE__ */ React9.createElement(TaggedLimit, { key: t.sublabel ?? t.label, limit: t })));
     };
     LiteLLMBudgetWidget = ({
       title = "Budget Policy",
@@ -3277,8 +3274,8 @@ var init_LiteLLMBudgetWidget = __esm({
         headline.closest.pct
       )}%`;
       const summaryText = headline.count === 0 ? "no limits apply" : `${limitsWord}${closestWord}`;
-      const body = /* @__PURE__ */ React8.createElement(React8.Fragment, null, loading && /* @__PURE__ */ React8.createElement(Box8, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 140 }, /* @__PURE__ */ React8.createElement(CircularProgress4, { size: 32 })), !loading && error && /* @__PURE__ */ React8.createElement(Alert3, { severity: "error", sx: { mt: 0.5 } }, error), !loading && !error && (compact ? /* @__PURE__ */ React8.createElement(CompactBody, { summary }) : /* @__PURE__ */ React8.createElement(FullBody, { summary })));
-      return /* @__PURE__ */ React8.createElement(Paper6, { sx: { p: 2 } }, collapsible ? /* @__PURE__ */ React8.createElement(
+      const body = /* @__PURE__ */ React9.createElement(React9.Fragment, null, loading && /* @__PURE__ */ React9.createElement(Box8, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 140 }, /* @__PURE__ */ React9.createElement(CircularProgress4, { size: 32 })), !loading && error && /* @__PURE__ */ React9.createElement(Alert3, { severity: "error", sx: { mt: 0.5 } }, error), !loading && !error && (compact ? /* @__PURE__ */ React9.createElement(CompactBody, { summary }) : /* @__PURE__ */ React9.createElement(FullBody, { summary })));
+      return /* @__PURE__ */ React9.createElement(Paper6, { sx: { p: 2 } }, collapsible ? /* @__PURE__ */ React9.createElement(
         Box8,
         {
           onClick: () => setExpanded((e) => !e),
@@ -3291,14 +3288,14 @@ var init_LiteLLMBudgetWidget = __esm({
             mb: expanded ? 1.5 : 0
           }
         },
-        /* @__PURE__ */ React8.createElement(Box8, { sx: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "h6", lineHeight: 1.2 }, title), !loading && !error && /* @__PURE__ */ React8.createElement(Box8, { sx: { mt: 0.5 } }, /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React9.createElement(Box8, { sx: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ React9.createElement(Typography8, { variant: "h6", lineHeight: 1.2 }, title), !loading && !error && /* @__PURE__ */ React9.createElement(Box8, { sx: { mt: 0.5 } }, /* @__PURE__ */ React9.createElement(
           StatusPill,
           {
             label: summaryText,
             tone: budgetTone2(headline.closest?.pct ?? 0)
           }
         ))),
-        /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React9.createElement(
           IconButton4,
           {
             size: "small",
@@ -3314,9 +3311,9 @@ var init_LiteLLMBudgetWidget = __esm({
               transition: theme.transitions.create("transform")
             })
           },
-          /* @__PURE__ */ React8.createElement(ExpandMore2, null)
+          /* @__PURE__ */ React9.createElement(ExpandMore2, null)
         )
-      ) : /* @__PURE__ */ React8.createElement(Box8, { sx: { mb: 1.5 } }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "h6", lineHeight: 1.2 }, title), /* @__PURE__ */ React8.createElement(Typography8, { variant: "caption", color: "text.secondary" }, "How LiteLLM caps spend \u2014 and where you stand right now")), collapsible ? /* @__PURE__ */ React8.createElement(Collapse, { in: expanded, unmountOnExit: true }, body) : body, action && /* @__PURE__ */ React8.createElement(
+      ) : /* @__PURE__ */ React9.createElement(Box8, { sx: { mb: 1.5 } }, /* @__PURE__ */ React9.createElement(Typography8, { variant: "h6", lineHeight: 1.2 }, title), /* @__PURE__ */ React9.createElement(Typography8, { variant: "caption", color: "text.secondary" }, "How LiteLLM caps spend \u2014 and where you stand right now")), collapsible ? /* @__PURE__ */ React9.createElement(Collapse, { in: expanded, unmountOnExit: true }, body) : body, action && /* @__PURE__ */ React9.createElement(
         Box8,
         {
           sx: (theme) => ({
@@ -3332,7 +3329,7 @@ var init_LiteLLMBudgetWidget = __esm({
 });
 
 // src/components/TeamUsage.tsx
-import React9, { useState as useState6 } from "react";
+import React10, { useState as useState6 } from "react";
 import Paper7 from "@mui/material/Paper";
 import Box9 from "@mui/material/Box";
 import Typography9 from "@mui/material/Typography";
@@ -3349,7 +3346,7 @@ import IconButton5 from "@mui/material/IconButton";
 import Button5 from "@mui/material/Button";
 import CircularProgress5 from "@mui/material/CircularProgress";
 import { alpha as alpha6 } from "@mui/material/styles";
-import { ExpandMore as ExpandMore3, Group, Add as Add3 } from "@mui/icons-material";
+import { ExpandMore as ExpandMore3, Group, Add as Add2 } from "@mui/icons-material";
 import {
   AreaChart as AreaChart2,
   Area as Area2,
@@ -3392,10 +3389,10 @@ var init_TeamUsage = __esm({
       const renderDailySpendSection = () => {
         if (hidden) return null;
         if (usageLoading) {
-          return /* @__PURE__ */ React9.createElement(Box9, { display: "flex", justifyContent: "center", py: 3 }, /* @__PURE__ */ React9.createElement(CircularProgress5, { size: 22 }));
+          return /* @__PURE__ */ React10.createElement(Box9, { display: "flex", justifyContent: "center", py: 3 }, /* @__PURE__ */ React10.createElement(CircularProgress5, { size: 22 }));
         }
         if (dailyData.length === 0) return null;
-        return /* @__PURE__ */ React9.createElement(Box9, { mb: 2.5 }, /* @__PURE__ */ React9.createElement(
+        return /* @__PURE__ */ React10.createElement(Box9, { mb: 2.5 }, /* @__PURE__ */ React10.createElement(
           Typography9,
           {
             variant: "caption",
@@ -3403,13 +3400,13 @@ var init_TeamUsage = __esm({
             sx: { display: "block", fontSize: 11, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase", mb: 1 }
           },
           "Daily spend"
-        ), /* @__PURE__ */ React9.createElement(Box9, { height: 150 }, /* @__PURE__ */ React9.createElement(ResponsiveContainer2, { width: "100%", height: "100%" }, /* @__PURE__ */ React9.createElement(AreaChart2, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ React9.createElement(CartesianGrid2, { ...chart.grid }), /* @__PURE__ */ React9.createElement(XAxis2, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React9.createElement(YAxis2, { tickFormatter: fmtUsdCompact, width: 52, ...chart.axis }), /* @__PURE__ */ React9.createElement(
+        ), /* @__PURE__ */ React10.createElement(Box9, { height: 150 }, /* @__PURE__ */ React10.createElement(ResponsiveContainer2, { width: "100%", height: "100%" }, /* @__PURE__ */ React10.createElement(AreaChart2, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ React10.createElement(CartesianGrid2, { ...chart.grid }), /* @__PURE__ */ React10.createElement(XAxis2, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React10.createElement(YAxis2, { tickFormatter: fmtUsdCompact, width: 52, ...chart.axis }), /* @__PURE__ */ React10.createElement(
           Tooltip2,
           {
             cursor: chart.cursor,
-            content: /* @__PURE__ */ React9.createElement(ChartTooltip, { valueFormatter: (v) => `$${v.toFixed(4)}` })
+            content: /* @__PURE__ */ React10.createElement(ChartTooltip, { valueFormatter: (v) => `$${v.toFixed(4)}` })
           }
-        ), /* @__PURE__ */ React9.createElement(
+        ), /* @__PURE__ */ React10.createElement(
           Area2,
           {
             type: "monotone",
@@ -3422,7 +3419,7 @@ var init_TeamUsage = __esm({
           }
         )))));
       };
-      const sectionLabel = (label) => /* @__PURE__ */ React9.createElement(
+      const sectionLabel = (label) => /* @__PURE__ */ React10.createElement(
         Typography9,
         {
           variant: "caption",
@@ -3431,7 +3428,7 @@ var init_TeamUsage = __esm({
         },
         label
       );
-      return /* @__PURE__ */ React9.createElement(Paper7, { variant: "outlined", sx: { borderRadius: 2, p: 2.5 } }, /* @__PURE__ */ React9.createElement(Box9, { display: "flex", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React9.createElement(
+      return /* @__PURE__ */ React10.createElement(Paper7, { variant: "outlined", sx: { borderRadius: 2, p: 2.5 } }, /* @__PURE__ */ React10.createElement(Box9, { display: "flex", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React10.createElement(
         Box9,
         {
           sx: (theme) => ({
@@ -3446,8 +3443,8 @@ var init_TeamUsage = __esm({
             color: theme.palette.primary.main
           })
         },
-        /* @__PURE__ */ React9.createElement(Group, { fontSize: "small" })
-      ), /* @__PURE__ */ React9.createElement(Box9, { flexGrow: 1, minWidth: 0 }, /* @__PURE__ */ React9.createElement(Typography9, { variant: "subtitle1", sx: { fontWeight: 600, lineHeight: 1.3 } }, team.team_alias || "Untitled team"), /* @__PURE__ */ React9.createElement(
+        /* @__PURE__ */ React10.createElement(Group, { fontSize: "small" })
+      ), /* @__PURE__ */ React10.createElement(Box9, { flexGrow: 1, minWidth: 0 }, /* @__PURE__ */ React10.createElement(Typography9, { variant: "subtitle1", sx: { fontWeight: 600, lineHeight: 1.3 } }, team.team_alias || "Untitled team"), /* @__PURE__ */ React10.createElement(
         Typography9,
         {
           variant: "caption",
@@ -3455,7 +3452,7 @@ var init_TeamUsage = __esm({
           sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 }
         },
         team.team_id
-      )), isOver && /* @__PURE__ */ React9.createElement(StatusPill, { label: "Over budget", tone: "danger" }), isNear && /* @__PURE__ */ React9.createElement(StatusPill, { label: "Near limit", tone: "warning" }), canManage && onEditTeam && /* @__PURE__ */ React9.createElement(
+      )), isOver && /* @__PURE__ */ React10.createElement(StatusPill, { label: "Over budget", tone: "danger" }), isNear && /* @__PURE__ */ React10.createElement(StatusPill, { label: "Near limit", tone: "warning" }), canManage && onEditTeam && /* @__PURE__ */ React10.createElement(
         Button5,
         {
           size: "small",
@@ -3464,7 +3461,7 @@ var init_TeamUsage = __esm({
           sx: { textTransform: "none" }
         },
         "Edit"
-      ), /* @__PURE__ */ React9.createElement(
+      ), /* @__PURE__ */ React10.createElement(
         IconButton5,
         {
           size: "small",
@@ -3477,8 +3474,8 @@ var init_TeamUsage = __esm({
             transition: theme.transitions.create("transform")
           })
         },
-        /* @__PURE__ */ React9.createElement(ExpandMore3, null)
-      )), /* @__PURE__ */ React9.createElement(
+        /* @__PURE__ */ React10.createElement(ExpandMore3, null)
+      )), /* @__PURE__ */ React10.createElement(
         Box9,
         {
           sx: {
@@ -3489,20 +3486,20 @@ var init_TeamUsage = __esm({
             maxWidth: 640
           }
         },
-        /* @__PURE__ */ React9.createElement(Stat, { label: "Members", value: team.members_with_roles?.length ?? "\u2014" }),
-        /* @__PURE__ */ React9.createElement(Stat, { label: "Models", value: team.models?.length ? team.models.length : "All" }),
-        /* @__PURE__ */ React9.createElement(Stat, { label: "Budget", value: budgetStatValue(hidden, budget) }),
-        /* @__PURE__ */ React9.createElement(Stat, { label: "Spend", value: hidden ? "\u2014" : fmtUsd2(spend) }),
-        /* @__PURE__ */ React9.createElement(Stat, { label: "TPM", value: team.tpm_limit && team.tpm_limit > 0 ? team.tpm_limit.toLocaleString() : "\u2014" }),
-        /* @__PURE__ */ React9.createElement(Stat, { label: "RPM", value: team.rpm_limit && team.rpm_limit > 0 ? team.rpm_limit.toLocaleString() : "\u2014" })
-      ), hidden && /* @__PURE__ */ React9.createElement(Box9, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ React9.createElement(Box9, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ React9.createElement(Typography9, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "% used"), /* @__PURE__ */ React9.createElement(Typography9, { variant: "caption", color: "text.secondary" }, "Hidden by admin")), /* @__PURE__ */ React9.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 }), /* @__PURE__ */ React9.createElement(Typography9, { 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__ */ React9.createElement(Box9, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ React9.createElement(Box9, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ React9.createElement(Typography9, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, fmtUsd2(spend), " of ", fmtUsd2(budget)), /* @__PURE__ */ React9.createElement(Typography9, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "%")), /* @__PURE__ */ React9.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 })), /* @__PURE__ */ React9.createElement(Collapse2, { in: expanded, unmountOnExit: true }, /* @__PURE__ */ React9.createElement(Divider3, { sx: { my: 2.5 } }), /* @__PURE__ */ React9.createElement(Box9, { mb: 2.5 }, sectionLabel("Models"), team.models?.length ? /* @__PURE__ */ React9.createElement(Box9, { display: "flex", gap: 0.5, flexWrap: "wrap" }, team.models.map((m) => /* @__PURE__ */ React9.createElement(TagChip, { key: m, label: m, title: m }))) : /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2", color: "text.secondary" }, "All models allowed")), renderDailySpendSection(), /* @__PURE__ */ React9.createElement(Box9, null, sectionLabel("Members"), team.members_with_roles?.length ? /* @__PURE__ */ React9.createElement(
+        /* @__PURE__ */ React10.createElement(Stat, { label: "Members", value: team.members_with_roles?.length ?? "\u2014" }),
+        /* @__PURE__ */ React10.createElement(Stat, { label: "Models", value: team.models?.length ? team.models.length : "All" }),
+        /* @__PURE__ */ React10.createElement(Stat, { label: "Budget", value: budgetStatValue(hidden, budget) }),
+        /* @__PURE__ */ React10.createElement(Stat, { label: "Spend", value: hidden ? "\u2014" : fmtUsd2(spend) }),
+        /* @__PURE__ */ React10.createElement(Stat, { label: "TPM", value: team.tpm_limit && team.tpm_limit > 0 ? team.tpm_limit.toLocaleString() : "\u2014" }),
+        /* @__PURE__ */ React10.createElement(Stat, { label: "RPM", value: team.rpm_limit && team.rpm_limit > 0 ? team.rpm_limit.toLocaleString() : "\u2014" })
+      ), hidden && /* @__PURE__ */ React10.createElement(Box9, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ React10.createElement(Box9, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ React10.createElement(Typography9, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "% used"), /* @__PURE__ */ React10.createElement(Typography9, { variant: "caption", color: "text.secondary" }, "Hidden by admin")), /* @__PURE__ */ React10.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 }), /* @__PURE__ */ React10.createElement(Typography9, { 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__ */ React10.createElement(Box9, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ React10.createElement(Box9, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ React10.createElement(Typography9, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, fmtUsd2(spend), " of ", fmtUsd2(budget)), /* @__PURE__ */ React10.createElement(Typography9, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "%")), /* @__PURE__ */ React10.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 })), /* @__PURE__ */ React10.createElement(Collapse2, { in: expanded, unmountOnExit: true }, /* @__PURE__ */ React10.createElement(Divider3, { sx: { my: 2.5 } }), /* @__PURE__ */ React10.createElement(Box9, { mb: 2.5 }, sectionLabel("Models"), team.models?.length ? /* @__PURE__ */ React10.createElement(Box9, { display: "flex", gap: 0.5, flexWrap: "wrap" }, team.models.map((m) => /* @__PURE__ */ React10.createElement(TagChip, { key: m, label: m, title: m }))) : /* @__PURE__ */ React10.createElement(Typography9, { variant: "body2", color: "text.secondary" }, "All models allowed")), renderDailySpendSection(), /* @__PURE__ */ React10.createElement(Box9, null, sectionLabel("Members"), team.members_with_roles?.length ? /* @__PURE__ */ React10.createElement(
         TableContainer4,
         {
           component: Paper7,
           variant: "outlined",
           sx: { borderRadius: 1.5 }
         },
-        /* @__PURE__ */ React9.createElement(Table4, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React9.createElement(TableHead4, null, /* @__PURE__ */ React9.createElement(TableRow4, null, /* @__PURE__ */ React9.createElement(TableCell4, null, "User"), /* @__PURE__ */ React9.createElement(TableCell4, { align: "right" }, "Role"))), /* @__PURE__ */ React9.createElement(TableBody4, null, team.members_with_roles.map((m) => /* @__PURE__ */ React9.createElement(TableRow4, { key: m.user_id }, /* @__PURE__ */ React9.createElement(TableCell4, null, m.user_email ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2" }, m.user_email), /* @__PURE__ */ React9.createElement(
+        /* @__PURE__ */ React10.createElement(Table4, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React10.createElement(TableHead4, null, /* @__PURE__ */ React10.createElement(TableRow4, null, /* @__PURE__ */ React10.createElement(TableCell4, null, "User"), /* @__PURE__ */ React10.createElement(TableCell4, { align: "right" }, "Role"))), /* @__PURE__ */ React10.createElement(TableBody4, null, team.members_with_roles.map((m) => /* @__PURE__ */ React10.createElement(TableRow4, { key: m.user_id }, /* @__PURE__ */ React10.createElement(TableCell4, null, m.user_email ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Typography9, { variant: "body2" }, m.user_email), /* @__PURE__ */ React10.createElement(
           Typography9,
           {
             variant: "caption",
@@ -3510,14 +3507,14 @@ var init_TeamUsage = __esm({
             sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 }
           },
           m.user_id
-        )) : /* @__PURE__ */ React9.createElement(
+        )) : /* @__PURE__ */ React10.createElement(
           Typography9,
           {
             variant: "body2",
             sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }
           },
           m.user_id
-        )), /* @__PURE__ */ React9.createElement(TableCell4, { align: "right" }, /* @__PURE__ */ React9.createElement(
+        )), /* @__PURE__ */ React10.createElement(TableCell4, { align: "right" }, /* @__PURE__ */ React10.createElement(
           StatusPill,
           {
             label: m.role,
@@ -3525,7 +3522,7 @@ var init_TeamUsage = __esm({
             dot: false
           }
         ))))))
-      ) : /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2", color: "text.secondary" }, "No members assigned."))));
+      ) : /* @__PURE__ */ React10.createElement(Typography9, { variant: "body2", color: "text.secondary" }, "No members assigned."))));
     };
     TeamUsage = ({
       teams,
@@ -3537,22 +3534,22 @@ var init_TeamUsage = __esm({
       canCreate,
       onCreateTeam
     }) => {
-      const createAction = canCreate && onCreateTeam ? /* @__PURE__ */ React9.createElement(
+      const createAction = canCreate && onCreateTeam ? /* @__PURE__ */ React10.createElement(
         Button5,
         {
           variant: "contained",
           color: "primary",
           disableElevation: true,
-          startIcon: /* @__PURE__ */ React9.createElement(Add3, null),
+          startIcon: /* @__PURE__ */ React10.createElement(Add2, null),
           onClick: onCreateTeam
         },
         "Create Team"
       ) : void 0;
       if (loading) {
-        return /* @__PURE__ */ React9.createElement(SectionCard, { title: "Teams", actions: createAction }, /* @__PURE__ */ React9.createElement(Skeleton4, { variant: "rounded", height: 120, sx: { mb: 2 } }), /* @__PURE__ */ React9.createElement(Skeleton4, { variant: "rounded", height: 120 }));
+        return /* @__PURE__ */ React10.createElement(SectionCard, { title: "Teams", actions: createAction }, /* @__PURE__ */ React10.createElement(Skeleton4, { variant: "rounded", height: 120, sx: { mb: 2 } }), /* @__PURE__ */ React10.createElement(Skeleton4, { variant: "rounded", height: 120 }));
       }
       if (!teams.length) {
-        return /* @__PURE__ */ React9.createElement(SectionCard, { title: "Teams", actions: createAction }, /* @__PURE__ */ React9.createElement(
+        return /* @__PURE__ */ React10.createElement(SectionCard, { title: "Teams", actions: createAction }, /* @__PURE__ */ React10.createElement(
           EmptyState,
           {
             message: "You're not a member of any LiteLLM team yet.",
@@ -3560,14 +3557,14 @@ var init_TeamUsage = __esm({
           }
         ));
       }
-      return /* @__PURE__ */ React9.createElement(
+      return /* @__PURE__ */ React10.createElement(
         SectionCard,
         {
           title: "Teams",
           subtitle: `${teams.length} team${teams.length === 1 ? "" : "s"}`,
           actions: createAction
         },
-        /* @__PURE__ */ React9.createElement(Box9, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, teams.map((team) => /* @__PURE__ */ React9.createElement(
+        /* @__PURE__ */ React10.createElement(Box9, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, teams.map((team) => /* @__PURE__ */ React10.createElement(
           TeamCard,
           {
             key: team.team_id,
@@ -3584,7 +3581,7 @@ var init_TeamUsage = __esm({
 });
 
 // src/components/ModelsTable.tsx
-import React10, { useState as useState7, useMemo as useMemo7, useCallback } from "react";
+import React11, { useState as useState7, useMemo as useMemo7, useCallback } from "react";
 import Box10 from "@mui/material/Box";
 import Table5 from "@mui/material/Table";
 import TableBody5 from "@mui/material/TableBody";
@@ -3716,13 +3713,13 @@ var init_ModelsTable = __esm({
             return theme.palette.info.main;
         }
       };
-      return /* @__PURE__ */ React10.createElement(
+      return /* @__PURE__ */ React11.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__ */ React10.createElement(Box10, { sx: { px: 2.5, pb: 2.5, pt: 1, display: "flex", gap: 2, flexWrap: "wrap" } }, /* @__PURE__ */ React10.createElement(FormControl, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ React10.createElement(InputLabel, { id: "team-select-label" }, "Team"), /* @__PURE__ */ React10.createElement(
+        /* @__PURE__ */ React11.createElement(Box10, { sx: { px: 2.5, pb: 2.5, pt: 1, display: "flex", gap: 2, flexWrap: "wrap" } }, /* @__PURE__ */ React11.createElement(FormControl, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ React11.createElement(InputLabel, { id: "team-select-label" }, "Team"), /* @__PURE__ */ React11.createElement(
           Select,
           {
             labelId: "team-select-label",
@@ -3730,8 +3727,8 @@ var init_ModelsTable = __esm({
             label: "Team",
             onChange: (e) => setSelectedTeamId(e.target.value)
           },
-          teams.map((t) => /* @__PURE__ */ React10.createElement(MenuItem4, { key: t.team_id, value: t.team_id }, t.team_alias ?? t.team_id))
-        )), /* @__PURE__ */ React10.createElement(
+          teams.map((t) => /* @__PURE__ */ React11.createElement(MenuItem4, { key: t.team_id, value: t.team_id }, t.team_alias ?? t.team_id))
+        )), /* @__PURE__ */ React11.createElement(
           TextField5,
           {
             label: "Filter Models",
@@ -3741,33 +3738,33 @@ var init_ModelsTable = __esm({
             disabled: !selectedTeamId,
             sx: { minWidth: 240, mb: 2 },
             InputProps: {
-              startAdornment: /* @__PURE__ */ React10.createElement(InputAdornment2, { position: "start" }, /* @__PURE__ */ React10.createElement(Search2, { fontSize: "small" }))
+              startAdornment: /* @__PURE__ */ React11.createElement(InputAdornment2, { position: "start" }, /* @__PURE__ */ React11.createElement(Search2, { fontSize: "small" }))
             }
           }
         )),
-        loading && /* @__PURE__ */ React10.createElement(EmptyState, { message: "Loading models\u2026" }),
-        !loading && !selectedTeamId && /* @__PURE__ */ React10.createElement(
+        loading && /* @__PURE__ */ React11.createElement(EmptyState, { message: "Loading models\u2026" }),
+        !loading && !selectedTeamId && /* @__PURE__ */ React11.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__ */ React10.createElement(
+        !loading && selectedTeamId && teamModels.length === 0 && /* @__PURE__ */ React11.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__ */ React10.createElement(
+        !loading && selectedTeamId && teamModels.length > 0 && filteredModels.length === 0 && /* @__PURE__ */ React11.createElement(
           EmptyState,
           {
             message: "No models match your search",
             hint: "Try a different search term"
           }
         ),
-        !loading && filteredModels.length > 0 && /* @__PURE__ */ React10.createElement(TableContainer5, null, /* @__PURE__ */ React10.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React10.createElement(TableHead5, null, /* @__PURE__ */ React10.createElement(TableRow5, null, /* @__PURE__ */ React10.createElement(TableCell5, { sortDirection: sortKey === "model_name" ? sortDirection : false }, /* @__PURE__ */ React10.createElement(TableSortLabel2, { active: sortKey === "model_name", direction: sortKey === "model_name" ? sortDirection : "asc", onClick: () => handleSort("model_name") }, "Model ID")), /* @__PURE__ */ React10.createElement(TableCell5, { sortDirection: sortKey === "mode" ? sortDirection : false }, /* @__PURE__ */ React10.createElement(TableSortLabel2, { active: sortKey === "mode", direction: sortKey === "mode" ? sortDirection : "asc", onClick: () => handleSort("mode") }, "Mode")), /* @__PURE__ */ React10.createElement(TableCell5, { align: "right", sortDirection: sortKey === "input_cost_per_token" ? sortDirection : false }, /* @__PURE__ */ React10.createElement(TableSortLabel2, { active: sortKey === "input_cost_per_token", direction: sortKey === "input_cost_per_token" ? sortDirection : "asc", onClick: () => handleSort("input_cost_per_token") }, "Input Cost")), /* @__PURE__ */ React10.createElement(TableCell5, { align: "right", sortDirection: sortKey === "output_cost_per_token" ? sortDirection : false }, /* @__PURE__ */ React10.createElement(TableSortLabel2, { active: sortKey === "output_cost_per_token", direction: sortKey === "output_cost_per_token" ? sortDirection : "asc", onClick: () => handleSort("output_cost_per_token") }, "Output Cost")), /* @__PURE__ */ React10.createElement(TableCell5, { align: "right", sortDirection: sortKey === "max_input_tokens" ? sortDirection : false }, /* @__PURE__ */ React10.createElement(TableSortLabel2, { active: sortKey === "max_input_tokens", direction: sortKey === "max_input_tokens" ? sortDirection : "asc", onClick: () => handleSort("max_input_tokens") }, "Max Input")), /* @__PURE__ */ React10.createElement(TableCell5, { align: "right", sortDirection: sortKey === "max_output_tokens" ? sortDirection : false }, /* @__PURE__ */ React10.createElement(TableSortLabel2, { active: sortKey === "max_output_tokens", direction: sortKey === "max_output_tokens" ? sortDirection : "asc", onClick: () => handleSort("max_output_tokens") }, "Max Output")), /* @__PURE__ */ React10.createElement(TableCell5, null, "Capabilities"))), /* @__PURE__ */ React10.createElement(TableBody5, null, filteredModels.map((m) => /* @__PURE__ */ React10.createElement(TableRow5, { key: m.model_name, hover: true }, /* @__PURE__ */ React10.createElement(TableCell5, null, /* @__PURE__ */ React10.createElement(Box10, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React10.createElement(Tooltip3, { title: m.model_name, placement: "top" }, /* @__PURE__ */ React10.createElement(
+        !loading && filteredModels.length > 0 && /* @__PURE__ */ React11.createElement(TableContainer5, null, /* @__PURE__ */ React11.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React11.createElement(TableHead5, null, /* @__PURE__ */ React11.createElement(TableRow5, null, /* @__PURE__ */ React11.createElement(TableCell5, { sortDirection: sortKey === "model_name" ? sortDirection : false }, /* @__PURE__ */ React11.createElement(TableSortLabel2, { active: sortKey === "model_name", direction: sortKey === "model_name" ? sortDirection : "asc", onClick: () => handleSort("model_name") }, "Model ID")), /* @__PURE__ */ React11.createElement(TableCell5, { sortDirection: sortKey === "mode" ? sortDirection : false }, /* @__PURE__ */ React11.createElement(TableSortLabel2, { active: sortKey === "mode", direction: sortKey === "mode" ? sortDirection : "asc", onClick: () => handleSort("mode") }, "Mode")), /* @__PURE__ */ React11.createElement(TableCell5, { align: "right", sortDirection: sortKey === "input_cost_per_token" ? sortDirection : false }, /* @__PURE__ */ React11.createElement(TableSortLabel2, { active: sortKey === "input_cost_per_token", direction: sortKey === "input_cost_per_token" ? sortDirection : "asc", onClick: () => handleSort("input_cost_per_token") }, "Input Cost")), /* @__PURE__ */ React11.createElement(TableCell5, { align: "right", sortDirection: sortKey === "output_cost_per_token" ? sortDirection : false }, /* @__PURE__ */ React11.createElement(TableSortLabel2, { active: sortKey === "output_cost_per_token", direction: sortKey === "output_cost_per_token" ? sortDirection : "asc", onClick: () => handleSort("output_cost_per_token") }, "Output Cost")), /* @__PURE__ */ React11.createElement(TableCell5, { align: "right", sortDirection: sortKey === "max_input_tokens" ? sortDirection : false }, /* @__PURE__ */ React11.createElement(TableSortLabel2, { active: sortKey === "max_input_tokens", direction: sortKey === "max_input_tokens" ? sortDirection : "asc", onClick: () => handleSort("max_input_tokens") }, "Max Input")), /* @__PURE__ */ React11.createElement(TableCell5, { align: "right", sortDirection: sortKey === "max_output_tokens" ? sortDirection : false }, /* @__PURE__ */ React11.createElement(TableSortLabel2, { active: sortKey === "max_output_tokens", direction: sortKey === "max_output_tokens" ? sortDirection : "asc", onClick: () => handleSort("max_output_tokens") }, "Max Output")), /* @__PURE__ */ React11.createElement(TableCell5, null, "Capabilities"))), /* @__PURE__ */ React11.createElement(TableBody5, null, filteredModels.map((m) => /* @__PURE__ */ React11.createElement(TableRow5, { key: m.model_name, hover: true }, /* @__PURE__ */ React11.createElement(TableCell5, null, /* @__PURE__ */ React11.createElement(Box10, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React11.createElement(Tooltip3, { title: m.model_name, placement: "top" }, /* @__PURE__ */ React11.createElement(
           "span",
           {
             role: "button",
@@ -3777,8 +3774,8 @@ var init_ModelsTable = __esm({
             onKeyDown: (e) => e.key === "Enter" && handleCopyModelId(m.model_name),
             style: { cursor: "pointer", display: "inline-flex" }
           },
-          /* @__PURE__ */ React10.createElement(TagChip, { label: m.model_name, title: "Copy model ID" })
-        )), /* @__PURE__ */ React10.createElement(Tooltip3, { title: "Copy model ID" }, /* @__PURE__ */ React10.createElement(
+          /* @__PURE__ */ React11.createElement(TagChip, { label: m.model_name, title: "Copy model ID" })
+        )), /* @__PURE__ */ React11.createElement(Tooltip3, { title: "Copy model ID" }, /* @__PURE__ */ React11.createElement(
           Box10,
           {
             component: "span",
@@ -3789,8 +3786,8 @@ var init_ModelsTable = __esm({
             sx: quietIconButtonSx("accent"),
             style: { cursor: "pointer", display: "inline-flex" }
           },
-          /* @__PURE__ */ React10.createElement(ContentCopyIcon, { sx: { fontSize: 14 } })
-        )))), /* @__PURE__ */ React10.createElement(TableCell5, null, /* @__PURE__ */ React10.createElement(
+          /* @__PURE__ */ React11.createElement(ContentCopyIcon, { sx: { fontSize: 14 } })
+        )))), /* @__PURE__ */ React11.createElement(TableCell5, null, /* @__PURE__ */ React11.createElement(
           Box10,
           {
             component: "span",
@@ -3807,8 +3804,8 @@ var init_ModelsTable = __esm({
             }
           },
           m.mode
-        )), /* @__PURE__ */ React10.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React10.createElement(Typography10, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.input_cost_per_token))), /* @__PURE__ */ React10.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React10.createElement(Typography10, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.output_cost_per_token))), /* @__PURE__ */ React10.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React10.createElement(Typography10, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_input_tokens))), /* @__PURE__ */ React10.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React10.createElement(Typography10, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_output_tokens))), /* @__PURE__ */ React10.createElement(TableCell5, null, /* @__PURE__ */ React10.createElement(Box10, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" } }, m.supports_function_calling && /* @__PURE__ */ React10.createElement(TagChip, { label: "Fn", title: "Function calling" }), m.supports_vision && /* @__PURE__ */ React10.createElement(TagChip, { label: "\u{1F441}", title: "Vision" })))))))),
-        /* @__PURE__ */ React10.createElement(
+        )), /* @__PURE__ */ React11.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React11.createElement(Typography10, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.input_cost_per_token))), /* @__PURE__ */ React11.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React11.createElement(Typography10, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.output_cost_per_token))), /* @__PURE__ */ React11.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React11.createElement(Typography10, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_input_tokens))), /* @__PURE__ */ React11.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React11.createElement(Typography10, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_output_tokens))), /* @__PURE__ */ React11.createElement(TableCell5, null, /* @__PURE__ */ React11.createElement(Box10, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" } }, m.supports_function_calling && /* @__PURE__ */ React11.createElement(TagChip, { label: "Fn", title: "Function calling" }), m.supports_vision && /* @__PURE__ */ React11.createElement(TagChip, { label: "\u{1F441}", title: "Vision" })))))))),
+        /* @__PURE__ */ React11.createElement(
           Snackbar,
           {
             open: copiedSnackbar,
@@ -3816,7 +3813,7 @@ var init_ModelsTable = __esm({
             onClose: () => setCopiedSnackbar(false),
             anchorOrigin: { vertical: "bottom", horizontal: "center" }
           },
-          /* @__PURE__ */ React10.createElement(Alert4, { severity: "success", variant: "filled", sx: { fontSize: 13 } }, "Model ID copied to clipboard")
+          /* @__PURE__ */ React11.createElement(Alert4, { severity: "success", variant: "filled", sx: { fontSize: 13 } }, "Model ID copied to clipboard")
         )
       );
     };
@@ -3824,7 +3821,7 @@ var init_ModelsTable = __esm({
 });
 
 // src/components/AuditLog.tsx
-import React11, { useState as useState8, useMemo as useMemo8 } from "react";
+import React12, { useState as useState8, useMemo as useMemo8 } from "react";
 import Box11 from "@mui/material/Box";
 import Typography11 from "@mui/material/Typography";
 import Table6 from "@mui/material/Table";
@@ -3863,10 +3860,10 @@ function formatDateTime(iso) {
 }
 function renderAuditLogBody(loading, entries) {
   if (loading) {
-    return /* @__PURE__ */ React11.createElement(TableRow6, null, /* @__PURE__ */ React11.createElement(TableCell6, { colSpan: 6, sx: { py: 2 } }, /* @__PURE__ */ React11.createElement(Skeleton5, { variant: "rounded", height: 160 })));
+    return /* @__PURE__ */ React12.createElement(TableRow6, null, /* @__PURE__ */ React12.createElement(TableCell6, { colSpan: 6, sx: { py: 2 } }, /* @__PURE__ */ React12.createElement(Skeleton5, { variant: "rounded", height: 160 })));
   }
   if (entries.length === 0) {
-    return /* @__PURE__ */ React11.createElement(TableRow6, null, /* @__PURE__ */ React11.createElement(TableCell6, { colSpan: 6 }, /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React12.createElement(TableRow6, null, /* @__PURE__ */ React12.createElement(TableCell6, { colSpan: 6 }, /* @__PURE__ */ React12.createElement(
       EmptyState,
       {
         message: "No audit events found",
@@ -3874,7 +3871,7 @@ function renderAuditLogBody(loading, entries) {
       }
     )));
   }
-  return entries.map((entry) => /* @__PURE__ */ React11.createElement(DetailRow, { key: entry.id, entry }));
+  return entries.map((entry) => /* @__PURE__ */ React12.createElement(DetailRow, { key: entry.id, entry }));
 }
 var ACTION_TONES, TABLE_LABELS, DetailRow, AuditLog;
 var init_AuditLog = __esm({
@@ -3898,7 +3895,7 @@ var init_AuditLog = __esm({
     DetailRow = ({ entry }) => {
       const [open, setOpen] = useState8(false);
       const hasDetail = entry.before_value || entry.updated_values;
-      return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(TableRow6, null, /* @__PURE__ */ React11.createElement(TableCell6, { sx: { width: 40, pr: 0 } }, hasDetail && /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(TableRow6, null, /* @__PURE__ */ React12.createElement(TableCell6, { sx: { width: 40, pr: 0 } }, hasDetail && /* @__PURE__ */ React12.createElement(
         IconButton6,
         {
           size: "small",
@@ -3911,8 +3908,8 @@ var init_AuditLog = __esm({
             transition: theme.transitions.create("transform")
           })
         },
-        /* @__PURE__ */ React11.createElement(KeyboardArrowDown, { fontSize: "small" })
-      )), /* @__PURE__ */ React11.createElement(TableCell6, { sx: { whiteSpace: "nowrap" } }, /* @__PURE__ */ React11.createElement(Typography11, { variant: "body2", color: "text.secondary" }, formatDateTime(entry.updated_at))), /* @__PURE__ */ React11.createElement(TableCell6, null, entry.action && /* @__PURE__ */ React11.createElement(StatusPill, { label: entry.action, tone: actionTone(entry.action) })), /* @__PURE__ */ React11.createElement(TableCell6, null, /* @__PURE__ */ React11.createElement(Typography11, { variant: "body2" }, prettyTableName(entry.table_name))), /* @__PURE__ */ React11.createElement(TableCell6, null, /* @__PURE__ */ React11.createElement(
+        /* @__PURE__ */ React12.createElement(KeyboardArrowDown, { fontSize: "small" })
+      )), /* @__PURE__ */ React12.createElement(TableCell6, { sx: { whiteSpace: "nowrap" } }, /* @__PURE__ */ React12.createElement(Typography11, { variant: "body2", color: "text.secondary" }, formatDateTime(entry.updated_at))), /* @__PURE__ */ React12.createElement(TableCell6, null, entry.action && /* @__PURE__ */ React12.createElement(StatusPill, { label: entry.action, tone: actionTone(entry.action) })), /* @__PURE__ */ React12.createElement(TableCell6, null, /* @__PURE__ */ React12.createElement(Typography11, { variant: "body2" }, prettyTableName(entry.table_name))), /* @__PURE__ */ React12.createElement(TableCell6, null, /* @__PURE__ */ React12.createElement(
         Typography11,
         {
           variant: "body2",
@@ -3922,7 +3919,7 @@ 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__ */ React11.createElement(TableCell6, null, entry.changed_by ?? "\u2014")), hasDetail && /* @__PURE__ */ React11.createElement(TableRow6, { sx: { "&&:hover": { bgcolor: "transparent" } } }, /* @__PURE__ */ React11.createElement(TableCell6, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } } }, /* @__PURE__ */ React11.createElement(Collapse3, { in: open, unmountOnExit: true }, /* @__PURE__ */ React11.createElement(
+      )), /* @__PURE__ */ React12.createElement(TableCell6, null, entry.changed_by ?? "\u2014")), hasDetail && /* @__PURE__ */ React12.createElement(TableRow6, { sx: { "&&:hover": { bgcolor: "transparent" } } }, /* @__PURE__ */ React12.createElement(TableCell6, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } } }, /* @__PURE__ */ React12.createElement(Collapse3, { in: open, unmountOnExit: true }, /* @__PURE__ */ React12.createElement(
         Box11,
         {
           display: "flex",
@@ -3935,7 +3932,7 @@ var init_AuditLog = __esm({
             bgcolor: alpha8(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.05 : 0.03)
           })
         },
-        entry.before_value && /* @__PURE__ */ React11.createElement(Box11, { flex: 1, minWidth: 200 }, /* @__PURE__ */ React11.createElement(
+        entry.before_value && /* @__PURE__ */ React12.createElement(Box11, { flex: 1, minWidth: 200 }, /* @__PURE__ */ React12.createElement(
           Typography11,
           {
             variant: "caption",
@@ -3945,8 +3942,8 @@ var init_AuditLog = __esm({
             sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" }
           },
           "Before"
-        ), /* @__PURE__ */ React11.createElement(Typography11, { 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__ */ React11.createElement(Box11, { flex: 1, minWidth: 200 }, /* @__PURE__ */ React11.createElement(
+        ), /* @__PURE__ */ React12.createElement(Typography11, { 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__ */ React12.createElement(Box11, { flex: 1, minWidth: 200 }, /* @__PURE__ */ React12.createElement(
           Typography11,
           {
             variant: "caption",
@@ -3956,7 +3953,7 @@ var init_AuditLog = __esm({
             sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" }
           },
           "After"
-        ), /* @__PURE__ */ React11.createElement(Typography11, { 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__ */ React12.createElement(Typography11, { 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 }) => {
@@ -3973,13 +3970,13 @@ var init_AuditLog = __esm({
       );
       const entries = value?.audit_logs ?? [];
       const total = value?.total ?? 0;
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         SectionCard,
         {
           title: "Audit Log",
           subtitle: loading ? "Loading\u2026" : `${total.toLocaleString()} event${total === 1 ? "" : "s"}`,
           flush: true,
-          actions: /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+          actions: /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
             TextField6,
             {
               size: "small",
@@ -3992,12 +3989,12 @@ var init_AuditLog = __esm({
               },
               sx: { minWidth: 150 }
             },
-            /* @__PURE__ */ React11.createElement(MenuItem5, { value: "" }, "All actions"),
-            /* @__PURE__ */ React11.createElement(MenuItem5, { value: "created" }, "Created"),
-            /* @__PURE__ */ React11.createElement(MenuItem5, { value: "updated" }, "Updated"),
-            /* @__PURE__ */ React11.createElement(MenuItem5, { value: "deleted" }, "Deleted"),
-            /* @__PURE__ */ React11.createElement(MenuItem5, { value: "blocked" }, "Blocked")
-          ), /* @__PURE__ */ React11.createElement(
+            /* @__PURE__ */ React12.createElement(MenuItem5, { value: "" }, "All actions"),
+            /* @__PURE__ */ React12.createElement(MenuItem5, { value: "created" }, "Created"),
+            /* @__PURE__ */ React12.createElement(MenuItem5, { value: "updated" }, "Updated"),
+            /* @__PURE__ */ React12.createElement(MenuItem5, { value: "deleted" }, "Deleted"),
+            /* @__PURE__ */ React12.createElement(MenuItem5, { value: "blocked" }, "Blocked")
+          ), /* @__PURE__ */ React12.createElement(
             TextField6,
             {
               size: "small",
@@ -4010,13 +4007,13 @@ var init_AuditLog = __esm({
               },
               sx: { minWidth: 150 }
             },
-            /* @__PURE__ */ React11.createElement(MenuItem5, { value: "" }, "All tables"),
-            /* @__PURE__ */ React11.createElement(MenuItem5, { value: "LiteLLM_VerificationToken" }, "Key"),
-            /* @__PURE__ */ React11.createElement(MenuItem5, { value: "LiteLLM_TeamTable" }, "Team"),
-            /* @__PURE__ */ React11.createElement(MenuItem5, { value: "LiteLLM_TeamMembership" }, "Team member"),
-            /* @__PURE__ */ React11.createElement(MenuItem5, { value: "LiteLLM_ObjectPermissionTable" }, "Team access (KB / MCP)"),
-            /* @__PURE__ */ React11.createElement(MenuItem5, { value: "LiteLLM_UserTable" }, "User")
-          ), /* @__PURE__ */ React11.createElement(
+            /* @__PURE__ */ React12.createElement(MenuItem5, { value: "" }, "All tables"),
+            /* @__PURE__ */ React12.createElement(MenuItem5, { value: "LiteLLM_VerificationToken" }, "Key"),
+            /* @__PURE__ */ React12.createElement(MenuItem5, { value: "LiteLLM_TeamTable" }, "Team"),
+            /* @__PURE__ */ React12.createElement(MenuItem5, { value: "LiteLLM_TeamMembership" }, "Team member"),
+            /* @__PURE__ */ React12.createElement(MenuItem5, { value: "LiteLLM_ObjectPermissionTable" }, "Team access (KB / MCP)"),
+            /* @__PURE__ */ React12.createElement(MenuItem5, { value: "LiteLLM_UserTable" }, "User")
+          ), /* @__PURE__ */ React12.createElement(
             TextField6,
             {
               size: "small",
@@ -4030,9 +4027,9 @@ var init_AuditLog = __esm({
             }
           ))
         },
-        error && /* @__PURE__ */ React11.createElement(Box11, { px: 2.5, pb: 2 }, /* @__PURE__ */ React11.createElement(Alert5, { severity: "error" }, error.message)),
-        /* @__PURE__ */ React11.createElement(TableContainer6, null, /* @__PURE__ */ React11.createElement(Table6, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React11.createElement(TableHead6, null, /* @__PURE__ */ React11.createElement(TableRow6, null, /* @__PURE__ */ React11.createElement(TableCell6, { sx: { width: 40 } }), /* @__PURE__ */ React11.createElement(TableCell6, null, "Time"), /* @__PURE__ */ React11.createElement(TableCell6, null, "Action"), /* @__PURE__ */ React11.createElement(TableCell6, null, "Table"), /* @__PURE__ */ React11.createElement(TableCell6, null, "Object ID"), /* @__PURE__ */ React11.createElement(TableCell6, null, "Changed By"))), /* @__PURE__ */ React11.createElement(TableBody6, null, renderAuditLogBody(loading, entries)))),
-        /* @__PURE__ */ React11.createElement(
+        error && /* @__PURE__ */ React12.createElement(Box11, { px: 2.5, pb: 2 }, /* @__PURE__ */ React12.createElement(Alert5, { severity: "error" }, error.message)),
+        /* @__PURE__ */ React12.createElement(TableContainer6, null, /* @__PURE__ */ React12.createElement(Table6, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React12.createElement(TableHead6, null, /* @__PURE__ */ React12.createElement(TableRow6, null, /* @__PURE__ */ React12.createElement(TableCell6, { sx: { width: 40 } }), /* @__PURE__ */ React12.createElement(TableCell6, null, "Time"), /* @__PURE__ */ React12.createElement(TableCell6, null, "Action"), /* @__PURE__ */ React12.createElement(TableCell6, null, "Table"), /* @__PURE__ */ React12.createElement(TableCell6, null, "Object ID"), /* @__PURE__ */ React12.createElement(TableCell6, null, "Changed By"))), /* @__PURE__ */ React12.createElement(TableBody6, null, renderAuditLogBody(loading, entries)))),
+        /* @__PURE__ */ React12.createElement(
           TablePagination,
           {
             component: "div",
@@ -4087,7 +4084,7 @@ var LiteLLMPage_exports = {};
 __export(LiteLLMPage_exports, {
   LiteLLMPage: () => LiteLLMPage
 });
-import React12, { useState as useState9, useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo9 } from "react";
+import React13, { useState as useState9, useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo9 } from "react";
 import Box12 from "@mui/material/Box";
 import Snackbar2 from "@mui/material/Snackbar";
 import Alert6 from "@mui/material/Alert";
@@ -4121,7 +4118,7 @@ var init_LiteLLMPage = __esm({
     "use strict";
     init_DashboardHeader();
     init_KeysTable();
-    init_GenerateKeyDialog();
+    init_KeyFormDialog();
     init_ManageTeamDialog();
     init_UsageStats();
     init_LiteLLMBudgetWidget();
@@ -4179,6 +4176,8 @@ var init_LiteLLMPage = __esm({
       );
       const [snackbar, setSnackbar] = useState9(null);
       const [manageTeam, setManageTeam] = useState9(null);
+      const [keyToEdit, setKeyToEdit] = useState9(null);
+      const keyFormOpen = generateDialogOpen || !!keyToEdit;
       const [teamUsageCache, setTeamUsageCache] = useState9({});
       const [teamUsageLoading, setTeamUsageLoading] = useState9({});
       const { value: userInfo, loading: userLoading, error: userError } = useAsync3(
@@ -4371,14 +4370,14 @@ var init_LiteLLMPage = __esm({
       );
       const isInitialLoading = userLoading && !userInfo;
       if (isInitialLoading) {
-        return /* @__PURE__ */ React12.createElement(Box12, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ React12.createElement(CircularProgress6, null));
+        return /* @__PURE__ */ React13.createElement(Box12, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ React13.createElement(CircularProgress6, null));
       }
       if (userError || !userInfo) {
         const isProvisioningEnabled = userError?.body?.provisioning === true;
         const hint = userError?.body?.hint;
-        return /* @__PURE__ */ React12.createElement(Box12, { p: 3 }, /* @__PURE__ */ React12.createElement(Paper8, { sx: { p: 3 } }, /* @__PURE__ */ React12.createElement(Typography12, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ React12.createElement(Typography12, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ React12.createElement(Typography12, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ React12.createElement(Typography12, { 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__ */ React13.createElement(Box12, { p: 3 }, /* @__PURE__ */ React13.createElement(Paper8, { sx: { p: 3 } }, /* @__PURE__ */ React13.createElement(Typography12, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ React13.createElement(Typography12, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ React13.createElement(Typography12, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ React13.createElement(Typography12, { 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__ */ React12.createElement(
+      const pageTabs = /* @__PURE__ */ React13.createElement(
         Tabs2,
         {
           value: activeTab,
@@ -4391,13 +4390,13 @@ var init_LiteLLMPage = __esm({
             '& [class*="MuiTab-root"]': { minHeight: 44, textTransform: "none", fontSize: 14 }
           }
         },
-        /* @__PURE__ */ React12.createElement(Tab2, { label: "Overview", value: "overview" }),
-        /* @__PURE__ */ React12.createElement(Tab2, { label: "Keys", value: "keys" }),
-        /* @__PURE__ */ React12.createElement(Tab2, { label: "Teams", value: "teams" }),
-        /* @__PURE__ */ React12.createElement(Tab2, { label: "Models", value: "models" }),
-        userInfo.can_view_audit && /* @__PURE__ */ React12.createElement(Tab2, { label: "Audit Log", value: "audit" })
+        /* @__PURE__ */ React13.createElement(Tab2, { label: "Overview", value: "overview" }),
+        /* @__PURE__ */ React13.createElement(Tab2, { label: "Keys", value: "keys" }),
+        /* @__PURE__ */ React13.createElement(Tab2, { label: "Teams", value: "teams" }),
+        /* @__PURE__ */ React13.createElement(Tab2, { label: "Models", value: "models" }),
+        userInfo.can_view_audit && /* @__PURE__ */ React13.createElement(Tab2, { label: "Audit Log", value: "audit" })
       );
-      return /* @__PURE__ */ React12.createElement(Box12, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React13.createElement(Box12, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React13.createElement(
         DashboardHeader,
         {
           userInfo,
@@ -4407,7 +4406,7 @@ var init_LiteLLMPage = __esm({
           onGenerateKeyClick: () => setGenerateDialogOpen(true),
           tabs: pageTabs
         }
-      ), activeTab === "overview" && /* @__PURE__ */ React12.createElement(Grid2, { container: true, spacing: 2, alignItems: "flex-start" }, /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 12, lg: 8 }, /* @__PURE__ */ React12.createElement(
+      ), activeTab === "overview" && /* @__PURE__ */ React13.createElement(Grid2, { container: true, spacing: 2, alignItems: "flex-start" }, /* @__PURE__ */ React13.createElement(Grid2, { item: true, xs: 12, lg: 8 }, /* @__PURE__ */ React13.createElement(
         UsageStats,
         {
           usage: usage ?? null,
@@ -4418,17 +4417,15 @@ var init_LiteLLMPage = __esm({
           loading: usageLoading,
           userInfo
         }
-      )), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 12, lg: 4 }, /* @__PURE__ */ React12.createElement(LiteLLMBudgetWidget, { compact: true, collapsible: true }))), activeTab === "keys" && /* @__PURE__ */ React12.createElement(
+      )), /* @__PURE__ */ React13.createElement(Grid2, { item: true, xs: 12, lg: 4 }, /* @__PURE__ */ React13.createElement(LiteLLMBudgetWidget, { compact: true, collapsible: true }))), activeTab === "keys" && /* @__PURE__ */ React13.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
         }
@@ -4437,7 +4434,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__ */ React12.createElement(
+        return /* @__PURE__ */ React13.createElement(
           TeamUsage,
           {
             teams: visibleTeams,
@@ -4453,27 +4450,34 @@ var init_LiteLLMPage = __esm({
             onCreateTeam: () => setManageTeam({ mode: "create" })
           }
         );
-      })(), activeTab === "models" && /* @__PURE__ */ React12.createElement(
+      })(), activeTab === "models" && /* @__PURE__ */ React13.createElement(
         ModelsTable,
         {
           allModels: allModels ?? [],
           teams: teams ?? [],
           loading: modelsLoading
         }
-      ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ React12.createElement(AuditLog, { api }), /* @__PURE__ */ React12.createElement(
-        GenerateKeyDialog,
+      ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ React13.createElement(AuditLog, { api }), /* @__PURE__ */ React13.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__ */ React12.createElement(
+      ), /* @__PURE__ */ React13.createElement(
         ManageTeamDialog,
         {
           open: !!manageTeam,
@@ -4535,7 +4539,7 @@ var init_LiteLLMPage = __esm({
             refreshTeams();
           }
         }
-      ), /* @__PURE__ */ React12.createElement(
+      ), /* @__PURE__ */ React13.createElement(
         Snackbar2,
         {
           open: !!snackbar,
@@ -4543,7 +4547,7 @@ var init_LiteLLMPage = __esm({
           onClose: () => setSnackbar(null),
           anchorOrigin: { vertical: "bottom", horizontal: "right" }
         },
-        snackbar ? /* @__PURE__ */ React12.createElement(Alert6, { severity: snackbar.severity, onClose: () => setSnackbar(null) }, snackbar.message) : void 0
+        snackbar ? /* @__PURE__ */ React13.createElement(Alert6, { severity: snackbar.severity, onClose: () => setSnackbar(null) }, snackbar.message) : void 0
       ));
     };
   }
@@ -4551,7 +4555,7 @@ var init_LiteLLMPage = __esm({
 
 // src/plugin.tsx
 init_api();
-import React13 from "react";
+import React14 from "react";
 import { TrendingUp as TrendingUpIcon } from "@mui/icons-material";
 import {
   createFrontendPlugin,
@@ -4570,10 +4574,10 @@ var liteLlmPage = PageBlueprint.make({
   params: {
     path: "/litellm",
     title: "LiteLLM",
-    icon: /* @__PURE__ */ React13.createElement(TrendingUpIcon, null),
+    icon: /* @__PURE__ */ React14.createElement(TrendingUpIcon, null),
     loader: async () => {
       const { LiteLLMPage: LiteLLMPage2 } = await Promise.resolve().then(() => (init_LiteLLMPage(), LiteLLMPage_exports));
-      return /* @__PURE__ */ React13.createElement(LiteLLMPage2, null);
+      return /* @__PURE__ */ React14.createElement(LiteLLMPage2, null);
     }
   }
 });
@@ -4592,7 +4596,7 @@ init_TeamUsage();
 // src/components/LiteLLMHomeWidget.tsx
 init_api();
 init_format();
-import React14, { useState as useState10, useEffect as useEffect5 } from "react";
+import React15, { useState as useState10, useEffect as useEffect5 } from "react";
 import Paper9 from "@mui/material/Paper";
 import Box13 from "@mui/material/Box";
 import Typography13 from "@mui/material/Typography";
@@ -4616,7 +4620,7 @@ function presetToDateRange(preset) {
   }
   return { start, end };
 }
-var Kpi = ({ label, value }) => /* @__PURE__ */ React14.createElement(Box13, null, /* @__PURE__ */ React14.createElement(Typography13, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ React14.createElement(Typography13, { variant: "subtitle1", fontWeight: 600 }, value));
+var Kpi = ({ label, value }) => /* @__PURE__ */ React15.createElement(Box13, null, /* @__PURE__ */ React15.createElement(Typography13, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ React15.createElement(Typography13, { variant: "subtitle1", fontWeight: 600 }, value));
 var LiteLLMHomeWidget = ({
   defaultPeriod = "7d",
   title = "LiteLLM Usage"
@@ -4665,17 +4669,17 @@ var LiteLLMHomeWidget = ({
     spend: d.spend
   }));
   const hasSparkline = dailyData.length > 0;
-  return /* @__PURE__ */ React14.createElement(Paper9, { sx: { p: 2 } }, /* @__PURE__ */ React14.createElement(Box13, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ React14.createElement(Typography13, { variant: "h6" }, title), /* @__PURE__ */ React14.createElement(FormControl2, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(Paper9, { sx: { p: 2 } }, /* @__PURE__ */ React15.createElement(Box13, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ React15.createElement(Typography13, { variant: "h6" }, title), /* @__PURE__ */ React15.createElement(FormControl2, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ React15.createElement(
     Select2,
     {
       value: period,
       onChange: (e) => setPeriod(e.target.value),
       displayEmpty: true
     },
-    /* @__PURE__ */ React14.createElement(MenuItem6, { value: "today" }, "Today"),
-    /* @__PURE__ */ React14.createElement(MenuItem6, { value: "7d" }, "7d"),
-    /* @__PURE__ */ React14.createElement(MenuItem6, { value: "30d" }, "30d")
-  ))), loading && /* @__PURE__ */ React14.createElement(Box13, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ React14.createElement(CircularProgress7, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ React14.createElement(Alert7, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ React14.createElement(React14.Fragment, null, partialFailure && /* @__PURE__ */ React14.createElement(Alert7, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ React14.createElement(Grid3, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ React14.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React14.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ React14.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React14.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ React14.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React14.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ React14.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React14.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ React14.createElement(Box13, { height: 120 }, /* @__PURE__ */ React14.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React14.createElement(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React15.createElement(MenuItem6, { value: "today" }, "Today"),
+    /* @__PURE__ */ React15.createElement(MenuItem6, { value: "7d" }, "7d"),
+    /* @__PURE__ */ React15.createElement(MenuItem6, { value: "30d" }, "30d")
+  ))), loading && /* @__PURE__ */ React15.createElement(Box13, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ React15.createElement(CircularProgress7, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ React15.createElement(Alert7, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ React15.createElement(React15.Fragment, null, partialFailure && /* @__PURE__ */ React15.createElement(Alert7, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ React15.createElement(Grid3, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ React15.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React15.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ React15.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React15.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ React15.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React15.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ React15.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React15.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ React15.createElement(Box13, { height: 120 }, /* @__PURE__ */ React15.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React15.createElement(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React15.createElement(
     Area3,
     {
       type: "monotone",
@@ -4696,9 +4700,10 @@ init_LiteLLMBudgetWidget();
 init_api();
 init_format();
 init_ui();
+init_GenerateKeyButton();
 init_BudgetLimitList();
 init_budget();
-import React15, { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo10, useState as useState11 } from "react";
+import React16, { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo10, useState as useState11 } from "react";
 import Paper10 from "@mui/material/Paper";
 import Box14 from "@mui/material/Box";
 import Button6 from "@mui/material/Button";
@@ -4707,8 +4712,9 @@ import CircularProgress8 from "@mui/material/CircularProgress";
 import Alert8 from "@mui/material/Alert";
 import Collapse4 from "@mui/material/Collapse";
 import { ExpandMore as ExpandMore4 } from "@mui/icons-material";
+import { AreaChart as AreaChart4, Area as Area4, ResponsiveContainer as ResponsiveContainer4, Tooltip as Tooltip4 } from "recharts";
 import { useApi as useApi5 } from "@backstage/core-plugin-api";
-import { Link as Link2 } from "@backstage/core-components";
+import { Link as Link3 } from "@backstage/core-components";
 var MODULE_PATH = "/litellm";
 var LEVEL = {
   key: { name: "Key", none: "No key budget" },
@@ -4717,7 +4723,7 @@ var LEVEL = {
 };
 var DEFAULT_CTAS = ["new-key", "module", "all-limits"];
 var CTA_LABELS = {
-  "new-key": "New key",
+  "new-key": "Generate New Key",
   module: "Open module",
   "all-limits": "All limits"
 };
@@ -4743,7 +4749,7 @@ 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__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     Box14,
     {
       sx: {
@@ -4754,7 +4760,7 @@ var LevelGauge = ({
         flex: 1
       }
     },
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       Gauge,
       {
         value: limit?.pct ?? 0,
@@ -4763,7 +4769,7 @@ var LevelGauge = ({
         label: limit ? `${Math.round(limit.pct)}%` : "\u2014"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       Typography14,
       {
         sx: (theme) => ({
@@ -4777,7 +4783,7 @@ var LevelGauge = ({
       },
       name
     ),
-    limit ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
+    limit ? /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
       Typography14,
       {
         variant: "caption",
@@ -4793,7 +4799,7 @@ var LevelGauge = ({
         }
       },
       limit.label
-    ), /* @__PURE__ */ React15.createElement(
+    ), /* @__PURE__ */ React16.createElement(
       Typography14,
       {
         variant: "caption",
@@ -4805,10 +4811,10 @@ var LevelGauge = ({
         }
       },
       spendCaption(limit)
-    ), extra > 0 ? /* @__PURE__ */ React15.createElement(
+    ), extra > 0 ? /* @__PURE__ */ React16.createElement(
       Typography14,
       {
-        component: Link2,
+        component: Link3,
         to: keysHref,
         variant: "caption",
         sx: {
@@ -4821,7 +4827,7 @@ var LevelGauge = ({
       "+",
       extra,
       " more"
-    ) : /* @__PURE__ */ React15.createElement(Typography14, { variant: "caption", color: "text.secondary", sx: { fontSize: 10.5 } }, resetLabel(limit))) : /* @__PURE__ */ React15.createElement(
+    ) : /* @__PURE__ */ React16.createElement(Typography14, { variant: "caption", color: "text.secondary", sx: { fontSize: 10.5 } }, resetLabel(limit))) : /* @__PURE__ */ React16.createElement(
       Typography14,
       {
         variant: "caption",
@@ -4832,6 +4838,125 @@ var LevelGauge = ({
     )
   );
 };
+function monthToDateRange(now = /* @__PURE__ */ new Date()) {
+  const toDay = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(
+    d.getDate()
+  ).padStart(2, "0")}`;
+  const start = new Date(now.getFullYear(), now.getMonth(), 1);
+  return { startDate: toDay(start), endDate: toDay(now) };
+}
+var UsageMiniChart = ({ data, totalTokens, loading, height }) => {
+  const renderPlot = () => {
+    if (loading) {
+      return /* @__PURE__ */ React16.createElement(Box14, { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, /* @__PURE__ */ React16.createElement(CircularProgress8, { size: 20 }));
+    }
+    if (data.length === 0) {
+      return /* @__PURE__ */ React16.createElement(
+        Box14,
+        {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100%",
+          sx: (theme) => ({ color: theme.palette.text.secondary, fontSize: 18 })
+        },
+        "\u2014"
+      );
+    }
+    return /* @__PURE__ */ React16.createElement(ResponsiveContainer4, { width: "100%", height: "100%" }, /* @__PURE__ */ React16.createElement(AreaChart4, { data, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React16.createElement(Tooltip4, { content: /* @__PURE__ */ React16.createElement(ChartTooltip, { valueFormatter: fmtInt }) }), /* @__PURE__ */ React16.createElement(
+      Area4,
+      {
+        type: "monotone",
+        dataKey: "input",
+        name: "Input",
+        stackId: "tok",
+        stroke: SERIES.input,
+        strokeWidth: 1.5,
+        fill: SERIES.input,
+        fillOpacity: 0.25,
+        dot: false,
+        isAnimationActive: false
+      }
+    ), /* @__PURE__ */ React16.createElement(
+      Area4,
+      {
+        type: "monotone",
+        dataKey: "output",
+        name: "Output",
+        stackId: "tok",
+        stroke: SERIES.output,
+        strokeWidth: 1.5,
+        fill: SERIES.output,
+        fillOpacity: 0.25,
+        dot: false,
+        isAnimationActive: false
+      }
+    )));
+  };
+  const renderCaption = () => {
+    if (loading) {
+      return /* @__PURE__ */ React16.createElement(Typography14, { variant: "caption", color: "text.secondary", sx: { mt: 0.25, fontSize: 11 } }, "\u2026");
+    }
+    if (data.length === 0) {
+      return /* @__PURE__ */ React16.createElement(
+        Typography14,
+        {
+          variant: "caption",
+          color: "text.secondary",
+          sx: { mt: 0.25, fontSize: 10.5, textAlign: "center" }
+        },
+        "No usage this month"
+      );
+    }
+    return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
+      Typography14,
+      {
+        variant: "caption",
+        title: `${fmtInt(totalTokens)} tokens month to date`,
+        sx: {
+          mt: 0.25,
+          fontSize: 11,
+          fontWeight: 600,
+          maxWidth: "100%",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          fontVariantNumeric: "tabular-nums"
+        }
+      },
+      fmtCompact(totalTokens),
+      " tokens"
+    ), /* @__PURE__ */ React16.createElement(Typography14, { variant: "caption", color: "text.secondary", sx: { fontSize: 10.5 } }, "month to date"));
+  };
+  return /* @__PURE__ */ React16.createElement(
+    Box14,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        minWidth: 0,
+        flex: 1
+      }
+    },
+    /* @__PURE__ */ React16.createElement(Box14, { sx: { height, width: "100%" } }, renderPlot()),
+    /* @__PURE__ */ React16.createElement(
+      Typography14,
+      {
+        sx: (theme) => ({
+          mt: 0.75,
+          fontSize: 10.5,
+          fontWeight: 700,
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+          color: theme.palette.text.secondary
+        })
+      },
+      "Usage"
+    ),
+    renderCaption()
+  );
+};
 var LiteLLMBudgetGauges = ({
   title = "Budget",
   size = 72,
@@ -4851,6 +4976,9 @@ var LiteLLMBudgetGauges = ({
   const [user, setUser] = useState11(null);
   const [teams, setTeams] = useState11([]);
   const [keys, setKeys] = useState11([]);
+  const [usageLoading, setUsageLoading] = useState11(true);
+  const [dailyTokens, setDailyTokens] = useState11([]);
+  const [mtdTokens, setMtdTokens] = useState11(0);
   const isControlled = expanded !== void 0;
   const [uncontrolledExpanded, setUncontrolledExpanded] = useState11(defaultExpanded);
   const isExpanded = isControlled ? expanded : uncontrolledExpanded;
@@ -4863,23 +4991,43 @@ var LiteLLMBudgetGauges = ({
   useEffect6(() => {
     let cancelled = false;
     setLoading(true);
+    setUsageLoading(true);
     setError(null);
-    Promise.allSettled([api.getUserInfo(), api.getTeams(), api.listKeys()]).then(
-      ([userResult, teamsResult, keysResult]) => {
-        if (cancelled) return;
-        if (userResult.status === "fulfilled") {
-          setUser(userResult.value);
-        } else {
-          setUser(null);
-          setError(
-            userResult.reason?.message ?? "Failed to load your LiteLLM profile"
-          );
-        }
-        setTeams(teamsResult.status === "fulfilled" ? teamsResult.value : []);
-        setKeys(keysResult.status === "fulfilled" ? keysResult.value : []);
-        setLoading(false);
+    const { startDate, endDate } = monthToDateRange();
+    Promise.allSettled([
+      api.getUserInfo(),
+      api.getTeams(),
+      api.listKeys(),
+      api.getUsage(startDate, endDate)
+    ]).then(([userResult, teamsResult, keysResult, usageResult]) => {
+      if (cancelled) return;
+      if (userResult.status === "fulfilled") {
+        setUser(userResult.value);
+      } else {
+        setUser(null);
+        setError(
+          userResult.reason?.message ?? "Failed to load your LiteLLM profile"
+        );
       }
-    );
+      setTeams(teamsResult.status === "fulfilled" ? teamsResult.value : []);
+      setKeys(keysResult.status === "fulfilled" ? keysResult.value : []);
+      setLoading(false);
+      if (usageResult.status === "fulfilled") {
+        const daily = usageResult.value.daily_usage ?? [];
+        setDailyTokens(
+          daily.map((d) => ({
+            date: d.date,
+            input: d.prompt_tokens,
+            output: d.completion_tokens
+          }))
+        );
+        setMtdTokens(usageResult.value.total_tokens ?? 0);
+      } else {
+        setDailyTokens([]);
+        setMtdTokens(0);
+      }
+      setUsageLoading(false);
+    });
     return () => {
       cancelled = true;
     };
@@ -4908,28 +5056,18 @@ var LiteLLMBudgetGauges = ({
     const key = `${cta.kind}-${index}`;
     switch (cta.kind) {
       case "new-key":
-        return onCreateKey ? /* @__PURE__ */ React15.createElement(Button6, { key, size: "small", variant: "contained", onClick: onCreateKey }, label) : /* @__PURE__ */ React15.createElement(
-          Button6,
-          {
-            key,
-            size: "small",
-            variant: "contained",
-            component: Link2,
-            to: `${moduleHref}?generate=1`
-          },
-          label
-        );
+        return onCreateKey ? /* @__PURE__ */ React16.createElement(GenerateKeyButton, { key, size: "small", label, onClick: onCreateKey }) : /* @__PURE__ */ React16.createElement(GenerateKeyButton, { key, size: "small", label, to: `${moduleHref}?generate=1` });
       case "module":
-        return /* @__PURE__ */ React15.createElement(Button6, { key, size: "small", variant: "outlined", component: Link2, to: moduleHref }, label);
+        return /* @__PURE__ */ React16.createElement(Button6, { key, size: "small", variant: "outlined", component: Link3, to: moduleHref }, label);
       case "all-limits":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           Button6,
           {
             key,
             size: "small",
             variant: "text",
             onClick: toggleExpanded,
-            endIcon: /* @__PURE__ */ React15.createElement(
+            endIcon: /* @__PURE__ */ React16.createElement(
               ExpandMore4,
               {
                 sx: {
@@ -4947,14 +5085,22 @@ var LiteLLMBudgetGauges = ({
     }
   };
   const hasFooter = resolvedCtas.length > 0 || !!action;
-  return /* @__PURE__ */ React15.createElement(Paper10, { sx: { p: 2 } }, /* @__PURE__ */ React15.createElement(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.5, minWidth: 0 } }, /* @__PURE__ */ React15.createElement(Typography14, { variant: "h6", lineHeight: 1.2, sx: { minWidth: 0, flex: 1 } }, title), !loading && !error && /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(Paper10, { sx: { p: 2 } }, /* @__PURE__ */ React16.createElement(Box14, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.5, minWidth: 0 } }, /* @__PURE__ */ React16.createElement(Typography14, { variant: "h6", lineHeight: 1.2, sx: { minWidth: 0, flex: 1 } }, title), !loading && !error && /* @__PURE__ */ React16.createElement(
     StatusPill,
     {
       label: summaryText,
       tone: budgetTone2(headline.closest?.pct ?? 0),
       dot: headline.count > 0
     }
-  )), loading && /* @__PURE__ */ React15.createElement(Box14, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 110 }, /* @__PURE__ */ React15.createElement(CircularProgress8, { size: 28 })), !loading && error && /* @__PURE__ */ React15.createElement(Alert8, { severity: "error", sx: { mt: 0.5 } }, error), !loading && !error && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(Box14, { sx: { display: "flex", alignItems: "flex-start", gap: 1 } }, gauges.map((gauge) => /* @__PURE__ */ React15.createElement(LevelGauge, { key: gauge.kind, gauge, size, keysHref: keysTabHref }))), /* @__PURE__ */ React15.createElement(Collapse4, { in: isExpanded, unmountOnExit: true }, /* @__PURE__ */ React15.createElement(
+  )), loading && /* @__PURE__ */ React16.createElement(Box14, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 110 }, /* @__PURE__ */ React16.createElement(CircularProgress8, { size: 28 })), !loading && error && /* @__PURE__ */ React16.createElement(Alert8, { severity: "error", sx: { mt: 0.5 } }, error), !loading && !error && /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(Box14, { sx: { display: "flex", alignItems: "flex-start", gap: 1 } }, gauges.map((gauge) => /* @__PURE__ */ React16.createElement(LevelGauge, { key: gauge.kind, gauge, size, keysHref: keysTabHref })), /* @__PURE__ */ React16.createElement(
+    UsageMiniChart,
+    {
+      data: dailyTokens,
+      totalTokens: mtdTokens,
+      loading: usageLoading,
+      height: size
+    }
+  )), /* @__PURE__ */ React16.createElement(Collapse4, { in: isExpanded, unmountOnExit: true }, /* @__PURE__ */ React16.createElement(
     Box14,
     {
       sx: {
@@ -4965,7 +5111,7 @@ var LiteLLMBudgetGauges = ({
         overflowY: "auto"
       }
     },
-    /* @__PURE__ */ React15.createElement(LimitListPanel, null, /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(LimitListPanel, null, /* @__PURE__ */ React16.createElement(
       BudgetLimitList,
       {
         limits: expandedLimits,
@@ -4973,7 +5119,7 @@ var LiteLLMBudgetGauges = ({
         keysHref: keysTabHref
       }
     ))
-  ))), hasFooter && /* @__PURE__ */ React15.createElement(
+  ))), hasFooter && /* @__PURE__ */ React16.createElement(
     Box14,
     {
       sx: (theme) => ({
@@ -4992,13 +5138,39 @@ var LiteLLMBudgetGauges = ({
 };
 
 // src/index.ts
-init_GenerateKeyDialog();
+init_KeyFormDialog();
+init_GenerateKeyButton();
+
+// src/components/GenerateKeyDialog.tsx
+init_KeyFormDialog();
+import React17 from "react";
+var GenerateKeyDialog = (props) => /* @__PURE__ */ React17.createElement(
+  KeyFormDialog,
+  {
+    open: props.open,
+    onClose: props.onClose,
+    mode: "create",
+    keys: props.keys,
+    models: props.models,
+    teams: props.teams,
+    username: props.username,
+    keyGenerationSettings: props.keyGenerationSettings,
+    onCreateKey: props.onGenerateKey,
+    onUpdateKey: async () => {
+    },
+    onGetConfig: props.onGetConfig
+  }
+);
+
+// src/index.ts
 init_ManageTeamDialog();
 init_api();
 init_permissions();
 export {
   DashboardHeader,
+  GenerateKeyButton,
   GenerateKeyDialog,
+  KeyFormDialog,
   KeysTable,
   LiteLLMBudgetGauges,
   LiteLLMBudgetWidget,