@acarmisc/backstage-plugin-litellm 0.12.3 → 0.13.0

package/dist/index.cjs.js

@@ -174,84 +174,724 @@ var init_api = __esm({
   }
 });
 
+// src/components/ui.tsx
+function chartColor(name) {
+  if (name === "Other") return OTHER_COLOR;
+  let h = 5381;
+  for (let i = 0; i < name.length; i++) h = (h << 5) + h + name.charCodeAt(i) >>> 0;
+  return CHART_COLORS[h % CHART_COLORS.length];
+}
+function useChartTheme() {
+  const theme = (0, import_styles.useTheme)();
+  const tickFill = theme.palette.text.secondary;
+  return {
+    grid: {
+      stroke: (0, import_styles.alpha)(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.12 : 0.08),
+      strokeDasharray: "2 4",
+      vertical: false
+    },
+    axis: {
+      tick: { fontSize: 11, fill: tickFill },
+      tickLine: false,
+      axisLine: { stroke: (0, import_styles.alpha)(theme.palette.text.primary, 0.12) }
+    },
+    legend: {
+      wrapperStyle: {
+        fontSize: 11,
+        color: tickFill,
+        paddingTop: 8
+      },
+      iconType: "circle",
+      iconSize: 8
+    },
+    cursor: { fill: (0, import_styles.alpha)(theme.palette.text.primary, 0.05) }
+  };
+}
+function toneColor(theme, tone) {
+  switch (tone) {
+    case "success":
+      return theme.palette.success.main;
+    case "warning":
+      return theme.palette.warning.main;
+    case "danger":
+      return theme.palette.error.main;
+    case "info":
+      return theme.palette.info.main;
+    case "accent":
+      return theme.palette.primary.main;
+    default:
+      return theme.palette.text.secondary;
+  }
+}
+function SegmentedControl({
+  value,
+  onChange,
+  options
+}) {
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Box.default,
+    {
+      role: "tablist",
+      sx: (theme) => ({
+        display: "inline-flex",
+        gap: 0.25,
+        p: 0.375,
+        borderRadius: 1.5,
+        border: "1px solid",
+        borderColor: theme.palette.divider
+      })
+    },
+    options.map((opt) => {
+      const selected = opt.value === value;
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_ButtonBase.default,
+        {
+          key: opt.value,
+          role: "tab",
+          "aria-selected": selected,
+          onClick: () => onChange(opt.value),
+          sx: (theme) => ({
+            px: 1.5,
+            height: 28,
+            borderRadius: 1,
+            fontSize: 13,
+            fontWeight: selected ? 700 : 500,
+            // Tint the selection with the accent rather than swapping in a
+            // surface colour: on a dark theme `background.paper` sits *behind*
+            // the track, so the selected chip would read as recessed.
+            color: selected ? theme.palette.primary.main : theme.palette.text.secondary,
+            bgcolor: selected ? (0, import_styles.alpha)(theme.palette.primary.main, theme.palette.mode === "dark" ? 0.2 : 0.11) : "transparent",
+            transition: theme.transitions.create(["background-color", "color"]),
+            "&:hover": {
+              color: selected ? theme.palette.primary.main : theme.palette.text.primary,
+              bgcolor: selected ? (0, import_styles.alpha)(theme.palette.primary.main, theme.palette.mode === "dark" ? 0.26 : 0.15) : (0, import_styles.alpha)(theme.palette.text.primary, 0.05)
+            }
+          })
+        },
+        opt.label
+      );
+    })
+  );
+}
+var import_react, import_Box, import_ButtonBase, import_Paper, import_Typography, import_styles, MONTHS, fmtDateShort, fmtCompact, fmtUsdCompact, CHART_COLORS, SERIES, OTHER_COLOR, ChartTooltip, SeriesLegend, StatusPill, TagChip, SectionCard, ChartCard, MetricStrip, Stat, Meter, dataTableSx, quietIconButtonSx, EmptyState;
+var init_ui = __esm({
+  "src/components/ui.tsx"() {
+    "use strict";
+    import_react = __toESM(require("react"));
+    import_Box = __toESM(require("@mui/material/Box"));
+    import_ButtonBase = __toESM(require("@mui/material/ButtonBase"));
+    import_Paper = __toESM(require("@mui/material/Paper"));
+    import_Typography = __toESM(require("@mui/material/Typography"));
+    import_styles = require("@mui/material/styles");
+    MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    fmtDateShort = (value) => {
+      const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(value ?? "");
+      if (!m) return value;
+      return `${MONTHS[Number(m[2]) - 1]} ${Number(m[3])}`;
+    };
+    fmtCompact = (n) => {
+      const v = n ?? 0;
+      const abs = Math.abs(v);
+      if (abs >= 1e9) return `${(v / 1e9).toFixed(abs >= 1e10 ? 0 : 1)}B`;
+      if (abs >= 1e6) return `${(v / 1e6).toFixed(abs >= 1e7 ? 0 : 1)}M`;
+      if (abs >= 1e3) return `${(v / 1e3).toFixed(abs >= 1e4 ? 0 : 1)}K`;
+      return String(Math.round(v));
+    };
+    fmtUsdCompact = (n) => {
+      const v = n ?? 0;
+      if (Math.abs(v) >= 1e3) return `$${fmtCompact(v)}`;
+      if (Math.abs(v) >= 10) return `$${v.toFixed(0)}`;
+      return `$${v.toFixed(2)}`;
+    };
+    CHART_COLORS = [
+      "#6366F1",
+      // indigo
+      "#14B8A6",
+      // teal
+      "#F59E0B",
+      // amber
+      "#EC4899",
+      // pink
+      "#38BDF8",
+      // sky
+      "#84CC16",
+      // lime
+      "#F97316",
+      // orange
+      "#A855F7"
+      // violet
+    ];
+    SERIES = {
+      input: "#6366F1",
+      output: "#14B8A6",
+      success: "#10B981",
+      failure: "#EF4444",
+      spend: "#F59E0B",
+      budget: "#EF4444"
+    };
+    OTHER_COLOR = "#94A3B8";
+    ChartTooltip = ({
+      active,
+      label,
+      payload,
+      valueFormatter = (v) => v.toLocaleString(),
+      labelFormatter = fmtDateShort,
+      hideZero = false
+    }) => {
+      if (!active || !payload?.length) return null;
+      const rows = payload.filter(
+        (p) => p.value !== void 0 && p.value !== null && (!hideZero || p.value !== 0)
+      );
+      if (!rows.length) return null;
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_Paper.default,
+        {
+          elevation: 8,
+          sx: {
+            px: 1.5,
+            py: 1,
+            borderRadius: 1.5,
+            border: "1px solid",
+            borderColor: "divider",
+            minWidth: 150,
+            pointerEvents: "none"
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_Typography.default,
+          {
+            variant: "caption",
+            sx: { display: "block", fontWeight: 700, mb: 0.75, letterSpacing: "0.02em" }
+          },
+          typeof label === "string" ? labelFormatter(label) : label
+        ),
+        rows.map((row, i) => /* @__PURE__ */ import_react.default.createElement(
+          import_Box.default,
+          {
+            key: `${row.dataKey ?? row.name ?? i}`,
+            sx: { display: "flex", alignItems: "center", gap: 1, mt: i === 0 ? 0 : 0.5 }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_Box.default,
+            {
+              sx: {
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                bgcolor: row.color,
+                flexShrink: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ import_react.default.createElement(
+            import_Typography.default,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              sx: { flex: 1, mr: 1.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+            },
+            row.name
+          ),
+          /* @__PURE__ */ import_react.default.createElement(import_Typography.default, { variant: "caption", sx: { fontWeight: 700, fontVariantNumeric: "tabular-nums" } }, valueFormatter(row.value))
+        ))
+      );
+    };
+    SeriesLegend = ({
+      series
+    }) => /* @__PURE__ */ import_react.default.createElement(
+      import_Box.default,
+      {
+        sx: {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 0.5,
+          columnGap: 2,
+          rowGap: 0.5,
+          mt: 1.5
+        }
+      },
+      series.map((s) => /* @__PURE__ */ import_react.default.createElement(import_Box.default, { key: s.name, sx: { display: "flex", alignItems: "center", gap: 0.75, minWidth: 0 } }, /* @__PURE__ */ import_react.default.createElement(
+        import_Box.default,
+        {
+          sx: { width: 8, height: 8, borderRadius: "50%", bgcolor: s.color, flexShrink: 0 }
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_Typography.default,
+        {
+          variant: "caption",
+          color: "text.secondary",
+          title: s.name,
+          sx: {
+            fontSize: 11,
+            maxWidth: 190,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }
+        },
+        s.name
+      )))
+    );
+    StatusPill = ({ label, tone = "neutral", dot = true, title, sx }) => /* @__PURE__ */ import_react.default.createElement(
+      import_Box.default,
+      {
+        component: "span",
+        title,
+        sx: [
+          (theme) => {
+            const c = toneColor(theme, tone);
+            return {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 0.625,
+              height: 22,
+              px: 0.875,
+              borderRadius: "6px",
+              border: "1px solid",
+              borderColor: (0, import_styles.alpha)(c, tone === "neutral" ? 0.25 : 0.35),
+              bgcolor: (0, import_styles.alpha)(c, tone === "neutral" ? 0.06 : 0.12),
+              color: tone === "neutral" ? theme.palette.text.secondary : c,
+              fontSize: 11.5,
+              fontWeight: 600,
+              lineHeight: 1,
+              letterSpacing: "0.01em",
+              whiteSpace: "nowrap",
+              maxWidth: "100%"
+            };
+          },
+          ...Array.isArray(sx) ? sx : [sx]
+        ]
+      },
+      dot && /* @__PURE__ */ import_react.default.createElement(
+        import_Box.default,
+        {
+          component: "span",
+          sx: (theme) => ({
+            width: 6,
+            height: 6,
+            borderRadius: "50%",
+            bgcolor: toneColor(theme, tone),
+            flexShrink: 0
+          })
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(import_Box.default, { component: "span", sx: { overflow: "hidden", textOverflow: "ellipsis" } }, label)
+    );
+    TagChip = ({
+      label,
+      title,
+      mono = true
+    }) => /* @__PURE__ */ import_react.default.createElement(
+      import_Box.default,
+      {
+        component: "span",
+        title,
+        sx: (theme) => ({
+          display: "inline-flex",
+          alignItems: "center",
+          height: 20,
+          px: 0.75,
+          borderRadius: "5px",
+          bgcolor: (0, import_styles.alpha)(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.08 : 0.05),
+          color: theme.palette.text.secondary,
+          fontFamily: mono ? "ui-monospace, SFMono-Regular, Menlo, monospace" : void 0,
+          fontSize: 11,
+          lineHeight: 1,
+          whiteSpace: "nowrap",
+          maxWidth: 220,
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        })
+      },
+      label
+    );
+    SectionCard = ({ title, subtitle, actions, flush = false, children }) => /* @__PURE__ */ import_react.default.createElement(import_Paper.default, { sx: { borderRadius: 2, overflow: "hidden" } }, (title || actions) && /* @__PURE__ */ import_react.default.createElement(
+      import_Box.default,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 2,
+          flexWrap: "wrap",
+          px: 2.5,
+          py: 2
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_Box.default, { sx: { minWidth: 0 } }, /* @__PURE__ */ import_react.default.createElement(import_Typography.default, { variant: "h6", sx: { lineHeight: 1.2 } }, title), subtitle && /* @__PURE__ */ import_react.default.createElement(import_Typography.default, { variant: "caption", color: "text.secondary" }, subtitle)),
+      actions && /* @__PURE__ */ import_react.default.createElement(import_Box.default, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" } }, actions)
+    ), /* @__PURE__ */ import_react.default.createElement(import_Box.default, { sx: flush ? void 0 : { px: 2.5, pb: 2.5, pt: title ? 0 : 2.5 } }, children));
+    ChartCard = ({ title, meta, height = 240, children }) => (
+      // The plot area must have an explicit height, never a flex-derived one:
+      // Recharts' ResponsiveContainer measures its parent, so a parent that sizes
+      // itself from its children instead spins in a measure/resize loop.
+      /* @__PURE__ */ import_react.default.createElement(import_Paper.default, { variant: "outlined", sx: { p: 2, borderRadius: 2, height: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_Box.default, { sx: { display: "flex", alignItems: "baseline", gap: 1, mb: 1.5, flexWrap: "wrap" } }, /* @__PURE__ */ import_react.default.createElement(
+        import_Typography.default,
+        {
+          variant: "subtitle2",
+          sx: { fontSize: 12, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }
+        },
+        title
+      ), meta && /* @__PURE__ */ import_react.default.createElement(import_Typography.default, { variant: "caption", color: "text.secondary" }, meta)), /* @__PURE__ */ import_react.default.createElement(import_Box.default, { sx: { height, width: "100%" } }, children))
+    );
+    MetricStrip = ({ metrics }) => /* @__PURE__ */ import_react.default.createElement(
+      import_Paper.default,
+      {
+        variant: "outlined",
+        sx: {
+          borderRadius: 2,
+          display: "grid",
+          gridTemplateColumns: { xs: "1fr 1fr", md: `repeat(${metrics.length}, 1fr)` },
+          overflow: "hidden"
+        }
+      },
+      metrics.map((m, i) => /* @__PURE__ */ import_react.default.createElement(
+        import_Box.default,
+        {
+          key: m.label,
+          sx: (theme) => ({
+            px: 2.5,
+            py: 2,
+            borderLeft: i === 0 ? 0 : "1px solid",
+            borderTop: 0,
+            borderColor: "divider",
+            [theme.breakpoints.down("md")]: {
+              borderLeft: i % 2 === 0 ? 0 : "1px solid",
+              borderTop: i < 2 ? 0 : "1px solid",
+              borderColor: "divider"
+            }
+          })
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_Box.default, { sx: { display: "flex", alignItems: "center", gap: 0.875, mb: 0.75 } }, /* @__PURE__ */ import_react.default.createElement(
+          import_Box.default,
+          {
+            sx: (theme) => ({
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              bgcolor: toneColor(theme, m.tone ?? "accent"),
+              flexShrink: 0
+            })
+          }
+        ), /* @__PURE__ */ import_react.default.createElement(
+          import_Typography.default,
+          {
+            variant: "caption",
+            color: "text.secondary",
+            sx: { fontSize: 11, fontWeight: 600, letterSpacing: "0.07em", textTransform: "uppercase" }
+          },
+          m.label
+        )),
+        /* @__PURE__ */ import_react.default.createElement(
+          import_Typography.default,
+          {
+            sx: { fontSize: 26, fontWeight: 700, lineHeight: 1.15, fontVariantNumeric: "tabular-nums" }
+          },
+          m.value
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          import_Typography.default,
+          {
+            variant: "caption",
+            color: "text.secondary",
+            sx: { display: "block", mt: 0.5, minHeight: 16 }
+          },
+          m.hint ?? "\xA0"
+        )
+      ))
+    );
+    Stat = ({ label, value }) => /* @__PURE__ */ import_react.default.createElement(import_Box.default, { sx: { minWidth: 0 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_Typography.default,
+      {
+        variant: "caption",
+        color: "text.secondary",
+        sx: { display: "block", fontSize: 10.5, fontWeight: 600, letterSpacing: "0.07em", textTransform: "uppercase" }
+      },
+      label
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_Typography.default,
+      {
+        variant: "body2",
+        sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", mt: 0.25 }
+      },
+      value
+    ));
+    Meter = ({
+      value,
+      tone = "accent",
+      height = 5
+    }) => /* @__PURE__ */ import_react.default.createElement(
+      import_Box.default,
+      {
+        sx: (theme) => ({
+          height,
+          borderRadius: height,
+          bgcolor: (0, import_styles.alpha)(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.12 : 0.08),
+          overflow: "hidden"
+        })
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_Box.default,
+        {
+          sx: (theme) => ({
+            height: "100%",
+            width: `${Math.max(0, Math.min(100, value))}%`,
+            borderRadius: height,
+            bgcolor: toneColor(theme, tone),
+            transition: theme.transitions.create("width")
+          })
+        }
+      )
+    );
+    dataTableSx = (theme) => ({
+      // Element selectors, not `.MuiTableCell-head`: host apps may set a MUI
+      // classname prefix (Backstage ships `v5-`), which breaks global class targeting.
+      "& thead th": {
+        fontSize: 11,
+        fontWeight: 700,
+        letterSpacing: "0.07em",
+        textTransform: "uppercase",
+        color: theme.palette.text.secondary,
+        backgroundColor: (0, import_styles.alpha)(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.04 : 0.02),
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        whiteSpace: "nowrap",
+        paddingTop: theme.spacing(1.25),
+        paddingBottom: theme.spacing(1.25)
+      },
+      "& tbody td": {
+        borderBottom: `1px solid ${(0, import_styles.alpha)(theme.palette.divider, 0.6)}`,
+        paddingTop: theme.spacing(1.25),
+        paddingBottom: theme.spacing(1.25),
+        fontVariantNumeric: "tabular-nums"
+      },
+      "& tbody tr:last-of-type td": {
+        borderBottom: 0
+      },
+      "& tbody tr:hover": {
+        backgroundColor: (0, import_styles.alpha)(theme.palette.text.primary, 0.03)
+      }
+    });
+    quietIconButtonSx = (tone = "neutral") => (theme) => ({
+      color: theme.palette.text.secondary,
+      "&:hover": {
+        color: toneColor(theme, tone),
+        bgcolor: (0, import_styles.alpha)(toneColor(theme, tone), 0.1)
+      }
+    });
+    EmptyState = ({ message, hint, height, action }) => /* @__PURE__ */ import_react.default.createElement(
+      import_Box.default,
+      {
+        sx: {
+          height,
+          minHeight: height ? void 0 : 120,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 1,
+          textAlign: "center",
+          py: 3
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_Typography.default, { variant: "body2", color: "text.secondary" }, message),
+      hint && /* @__PURE__ */ import_react.default.createElement(import_Typography.default, { variant: "caption", color: "text.secondary" }, hint),
+      action
+    );
+  }
+});
+
 // src/components/DashboardHeader.tsx
-var import_react, import_material, import_icons_material, DashboardHeader;
+function initials(name) {
+  const local = name.split("@")[0] ?? name;
+  const parts = local.split(/[.\-_\s]+/).filter(Boolean);
+  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+  return local.slice(0, 2).toUpperCase();
+}
+var import_react2, import_Box2, import_Typography2, import_Skeleton, import_Paper2, import_Button, import_Divider, import_styles2, import_icons_material, CountStat, DashboardHeader;
 var init_DashboardHeader = __esm({
   "src/components/DashboardHeader.tsx"() {
     "use strict";
-    import_react = __toESM(require("react"));
-    import_material = require("@mui/material");
+    import_react2 = __toESM(require("react"));
+    import_Box2 = __toESM(require("@mui/material/Box"));
+    import_Typography2 = __toESM(require("@mui/material/Typography"));
+    import_Skeleton = __toESM(require("@mui/material/Skeleton"));
+    import_Paper2 = __toESM(require("@mui/material/Paper"));
+    import_Button = __toESM(require("@mui/material/Button"));
+    import_Divider = __toESM(require("@mui/material/Divider"));
+    import_styles2 = require("@mui/material/styles");
     import_icons_material = require("@mui/icons-material");
     init_api();
+    init_ui();
+    CountStat = ({ value, label, tone }) => {
+      const active = value > 0;
+      return /* @__PURE__ */ import_react2.default.createElement(import_Box2.default, { sx: { display: "flex", alignItems: "center", gap: 1 } }, /* @__PURE__ */ import_react2.default.createElement(
+        import_Box2.default,
+        {
+          sx: (theme) => ({
+            width: 7,
+            height: 7,
+            borderRadius: "50%",
+            flexShrink: 0,
+            bgcolor: active ? tone === "danger" && theme.palette.error.main || tone === "warning" && theme.palette.warning.main || theme.palette.primary.main : (0, import_styles2.alpha)(theme.palette.text.primary, 0.25)
+          })
+        }
+      ), /* @__PURE__ */ import_react2.default.createElement(
+        import_Typography2.default,
+        {
+          component: "span",
+          sx: { fontSize: 15, fontWeight: 700, lineHeight: 1, fontVariantNumeric: "tabular-nums" }
+        },
+        value
+      ), /* @__PURE__ */ import_react2.default.createElement(
+        import_Typography2.default,
+        {
+          component: "span",
+          color: "text.secondary",
+          sx: { fontSize: 11, fontWeight: 600, letterSpacing: "0.07em", textTransform: "uppercase" }
+        },
+        label
+      ));
+    };
     DashboardHeader = ({
       userInfo,
       teams,
       keys,
       loading,
-      onGenerateKeyClick
+      onGenerateKeyClick,
+      tabs
     }) => {
-      const counts = (0, import_react.useMemo)(() => {
+      const counts = (0, import_react2.useMemo)(() => {
         const expired = keys.filter((k) => expiryStatus(k.expires_at) === "expired").length;
         const expiringSoon = keys.filter((k) => expiryStatus(k.expires_at) === "soon").length;
         return { total: keys.length, expired, expiringSoon };
       }, [keys]);
-      if (loading) {
-        return /* @__PURE__ */ import_react.default.createElement(import_material.Paper, { sx: { p: 2, mb: 2 } }, /* @__PURE__ */ import_react.default.createElement(import_material.LinearProgress, null));
-      }
       const displayName = userInfo.user_email ?? userInfo.email ?? userInfo.user_id;
-      return /* @__PURE__ */ import_react.default.createElement(import_material.Paper, { sx: { p: 2, mb: 2 } }, /* @__PURE__ */ import_react.default.createElement(import_material.Box, { display: "flex", alignItems: "flex-start", gap: 2, flexWrap: "wrap" }, /* @__PURE__ */ import_react.default.createElement(import_material.Box, { flexGrow: 1 }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { variant: "h6" }, displayName), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { variant: "caption", color: "text.secondary" }, userInfo.user_id), teams.length > 0 && /* @__PURE__ */ import_react.default.createElement(import_material.Box, { display: "flex", gap: 0.75, flexWrap: "wrap", mt: 1 }, teams.map((team) => /* @__PURE__ */ import_react.default.createElement(
-        import_material.Chip,
+      return /* @__PURE__ */ import_react2.default.createElement(import_Paper2.default, { sx: { borderRadius: 2, overflow: "hidden" } }, /* @__PURE__ */ import_react2.default.createElement(
+        import_Box2.default,
         {
-          key: team.team_id,
-          label: team.team_alias || team.team_id,
-          size: "small",
-          variant: "outlined",
-          color: "primary"
-        }
-      )))), /* @__PURE__ */ import_react.default.createElement(import_material.Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ import_react.default.createElement(import_material.Chip, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons_material.Key, { fontSize: "small" }), label: `${counts.total} keys`, size: "small" }), /* @__PURE__ */ import_react.default.createElement(
-        import_material.Chip,
-        {
-          icon: /* @__PURE__ */ import_react.default.createElement(import_icons_material.Warning, { fontSize: "small" }),
-          label: `${counts.expired} expired`,
-          size: "small",
-          color: counts.expired > 0 ? "error" : "default"
-        }
-      ), /* @__PURE__ */ import_react.default.createElement(
-        import_material.Chip,
-        {
-          icon: /* @__PURE__ */ import_react.default.createElement(import_icons_material.Schedule, { fontSize: "small" }),
-          label: `${counts.expiringSoon} expiring soon`,
-          size: "small",
-          color: counts.expiringSoon > 0 ? "warning" : "default"
-        }
-      )), /* @__PURE__ */ import_react.default.createElement(
-        import_material.Button,
+          sx: {
+            display: "flex",
+            alignItems: "flex-start",
+            gap: 2,
+            flexWrap: "wrap",
+            px: 2.5,
+            pt: 2.5,
+            pb: 2
+          }
+        },
+        /* @__PURE__ */ import_react2.default.createElement(
+          import_Box2.default,
+          {
+            sx: (theme) => ({
+              width: 44,
+              height: 44,
+              borderRadius: 1.5,
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              bgcolor: (0, import_styles2.alpha)(theme.palette.primary.main, 0.12),
+              color: theme.palette.primary.main,
+              fontSize: 15,
+              fontWeight: 700,
+              letterSpacing: "0.02em"
+            })
+          },
+          initials(displayName)
+        ),
+        /* @__PURE__ */ import_react2.default.createElement(import_Box2.default, { sx: { flexGrow: 1, minWidth: 220 } }, /* @__PURE__ */ import_react2.default.createElement(import_Typography2.default, { variant: "h6", sx: { lineHeight: 1.25, wordBreak: "break-word" } }, displayName), /* @__PURE__ */ import_react2.default.createElement(
+          import_Typography2.default,
+          {
+            variant: "caption",
+            color: "text.secondary",
+            sx: { display: "block", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }
+          },
+          userInfo.user_id
+        ), /* @__PURE__ */ import_react2.default.createElement(import_Box2.default, { sx: { display: "flex", gap: 0.75, flexWrap: "wrap", mt: 1, minHeight: 20 } }, loading ? /* @__PURE__ */ import_react2.default.createElement(import_Skeleton.default, { variant: "rounded", width: 140, height: 20 }) : teams.map((team) => /* @__PURE__ */ import_react2.default.createElement(
+          TagChip,
+          {
+            key: team.team_id,
+            label: team.team_alias || team.team_id,
+            title: team.team_id
+          }
+        )))),
+        /* @__PURE__ */ import_react2.default.createElement(
+          import_Button.default,
+          {
+            variant: "contained",
+            color: "primary",
+            disableElevation: true,
+            startIcon: /* @__PURE__ */ import_react2.default.createElement(import_icons_material.Add, null),
+            onClick: onGenerateKeyClick
+          },
+          "Generate New Key"
+        )
+      ), /* @__PURE__ */ import_react2.default.createElement(import_Divider.default, null), /* @__PURE__ */ import_react2.default.createElement(
+        import_Box2.default,
         {
-          variant: "contained",
-          color: "primary",
-          startIcon: /* @__PURE__ */ import_react.default.createElement(import_icons_material.Add, null),
-          onClick: onGenerateKeyClick
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 2.5,
+            flexWrap: "wrap",
+            px: 2.5,
+            py: 1.5
+          }
         },
-        "Generate New Key"
-      ))));
+        /* @__PURE__ */ import_react2.default.createElement(CountStat, { value: counts.total, label: "keys", tone: "accent" }),
+        /* @__PURE__ */ import_react2.default.createElement(import_Divider.default, { orientation: "vertical", flexItem: true, sx: { my: 0.25 } }),
+        /* @__PURE__ */ import_react2.default.createElement(CountStat, { value: counts.expired, label: "expired", tone: "danger" }),
+        /* @__PURE__ */ import_react2.default.createElement(import_Divider.default, { orientation: "vertical", flexItem: true, sx: { my: 0.25 } }),
+        /* @__PURE__ */ import_react2.default.createElement(CountStat, { value: counts.expiringSoon, label: "expiring soon", tone: "warning" })
+      ), tabs && /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_Divider.default, null), /* @__PURE__ */ import_react2.default.createElement(import_Box2.default, { sx: { px: 1 } }, tabs)));
     };
   }
 });
 
 // src/components/KeysTable.tsx
-function ExpiryChip({ expiresAt }) {
+function expiryChipLabel(status, expiresAt) {
+  if (status === "expired") return "Expired";
+  if (status === "soon") return `${Math.ceil((new Date(expiresAt).getTime() - Date.now()) / 864e5)}d left`;
+  return formatDate(expiresAt);
+}
+function expiryTone(status) {
+  if (status === "expired") return "danger";
+  if (status === "soon") return "warning";
+  return "neutral";
+}
+function ExpiryCell({ expiresAt }) {
   const status = expiryStatus(expiresAt);
-  if (!status) return /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "text.secondary" }, "-");
-  const label = status === "expired" ? "Expired" : status === "soon" ? `${Math.ceil((new Date(expiresAt).getTime() - Date.now()) / 864e5)}d left` : formatDate(expiresAt);
-  const color = status === "expired" ? "error" : status === "soon" ? "warning" : "default";
-  const icon = status === "expired" || status === "soon" ? /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Warning, { fontSize: "small" }) : void 0;
-  return /* @__PURE__ */ import_react2.default.createElement(import_material2.Chip, { label, color, size: "small", icon });
+  if (!status) {
+    return /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", color: "text.secondary" }, "Never");
+  }
+  if (status === "ok") {
+    return /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", color: "text.secondary" }, formatDate(expiresAt));
+  }
+  return /* @__PURE__ */ import_react3.default.createElement(
+    StatusPill,
+    {
+      label: expiryChipLabel(status, expiresAt),
+      tone: expiryTone(status),
+      title: `Expires ${formatDate(expiresAt)}`
+    }
+  );
+}
+function budgetTone(pct) {
+  if (pct >= 100) return "danger";
+  if (pct >= 80) return "warning";
+  return "accent";
+}
+function keyBlockIcon(isBlocking, blocked) {
+  if (isBlocking) return /* @__PURE__ */ import_react3.default.createElement(import_CircularProgress.default, { size: 18 });
+  if (blocked) return /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.LockOpen, { fontSize: "small" });
+  return /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.Lock, { fontSize: "small" });
 }
 function BudgetCell({ spend, maxBudget }) {
-  if (!maxBudget) return /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "text.secondary" }, "-");
+  if (!maxBudget) {
+    return /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, "$", spend.toFixed(2), /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { component: "span", variant: "caption", sx: { ml: 0.5, opacity: 0.7 } }, "/ \u221E"));
+  }
   const pct = Math.min(100, spend / maxBudget * 100);
-  const color = pct >= 100 ? "error" : pct >= 80 ? "warning" : "primary";
-  return /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { minWidth: 100 }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", justifyContent: "space-between" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "caption" }, "$", spend.toFixed(2)), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "caption", color: "text.secondary" }, "$", maxBudget)), /* @__PURE__ */ import_react2.default.createElement(import_material2.LinearProgress, { variant: "determinate", value: pct, color, sx: { height: 5, borderRadius: 1, mt: 0.25 } }));
+  return /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { minWidth: 104 }, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums", mb: 0.5 } }, "$", spend.toFixed(2), /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { component: "span", variant: "caption", color: "text.secondary", sx: { ml: 0.5 } }, "/ $", maxBudget)), /* @__PURE__ */ import_react3.default.createElement(Meter, { value: pct, tone: budgetTone(pct), height: 4 }));
 }
 function fmtCost(perToken) {
   if (!perToken) return null;
@@ -273,14 +913,34 @@ function formatContextWindow(maxInput, maxOutput) {
   if (outPart) return `ctx ${outPart} out`;
   return null;
 }
-var import_react2, import_material2, import_icons_material2, maskKey, shortKeyId, formatDate, keyToEditForm, KeysTable;
+var import_react3, import_Table, import_TableBody, import_TableCell, import_TableContainer, import_TableHead, import_TableRow, import_Button2, import_IconButton, import_Box3, import_Typography3, import_Dialog, import_DialogTitle, import_DialogContent, import_DialogActions, import_TextField, import_CircularProgress, import_Autocomplete, import_Skeleton2, import_InputAdornment, import_styles3, import_icons_material2, maskKey, shortKeyId, formatDate, keyToEditForm, KeysTable;
 var init_KeysTable = __esm({
   "src/components/KeysTable.tsx"() {
     "use strict";
-    import_react2 = __toESM(require("react"));
-    import_material2 = require("@mui/material");
+    import_react3 = __toESM(require("react"));
+    import_Table = __toESM(require("@mui/material/Table"));
+    import_TableBody = __toESM(require("@mui/material/TableBody"));
+    import_TableCell = __toESM(require("@mui/material/TableCell"));
+    import_TableContainer = __toESM(require("@mui/material/TableContainer"));
+    import_TableHead = __toESM(require("@mui/material/TableHead"));
+    import_TableRow = __toESM(require("@mui/material/TableRow"));
+    import_Button2 = __toESM(require("@mui/material/Button"));
+    import_IconButton = __toESM(require("@mui/material/IconButton"));
+    import_Box3 = __toESM(require("@mui/material/Box"));
+    import_Typography3 = __toESM(require("@mui/material/Typography"));
+    import_Dialog = __toESM(require("@mui/material/Dialog"));
+    import_DialogTitle = __toESM(require("@mui/material/DialogTitle"));
+    import_DialogContent = __toESM(require("@mui/material/DialogContent"));
+    import_DialogActions = __toESM(require("@mui/material/DialogActions"));
+    import_TextField = __toESM(require("@mui/material/TextField"));
+    import_CircularProgress = __toESM(require("@mui/material/CircularProgress"));
+    import_Autocomplete = __toESM(require("@mui/material/Autocomplete"));
+    import_Skeleton2 = __toESM(require("@mui/material/Skeleton"));
+    import_InputAdornment = __toESM(require("@mui/material/InputAdornment"));
+    import_styles3 = require("@mui/material/styles");
     import_icons_material2 = require("@mui/icons-material");
     init_api();
+    init_ui();
     maskKey = (key) => {
       if (key.length <= 8) return "***";
       return `${key.slice(0, 4)}...${key.slice(-4)}`;
@@ -316,16 +976,16 @@ var init_KeysTable = __esm({
       onDeleteKey,
       onPruneExpiredKeys
     }) => {
-      const [editingKey, setEditingKey] = (0, import_react2.useState)(null);
-      const [editForm, setEditForm] = (0, import_react2.useState)({});
-      const [editSubmitting, setEditSubmitting] = (0, import_react2.useState)(false);
-      const [blockingKeyId, setBlockingKeyId] = (0, import_react2.useState)(null);
-      const [deleteConfirmId, setDeleteConfirmId] = (0, import_react2.useState)(null);
-      const [deleteSubmitting, setDeleteSubmitting] = (0, import_react2.useState)(false);
-      const [resetSpendConfirm, setResetSpendConfirm] = (0, import_react2.useState)(false);
-      const [resetSpendSubmitting, setResetSpendSubmitting] = (0, import_react2.useState)(false);
-      const [filterText, setFilterText] = (0, import_react2.useState)("");
-      const filteredKeys = (0, import_react2.useMemo)(() => {
+      const [editingKey, setEditingKey] = (0, import_react3.useState)(null);
+      const [editForm, setEditForm] = (0, import_react3.useState)({});
+      const [editSubmitting, setEditSubmitting] = (0, import_react3.useState)(false);
+      const [blockingKeyId, setBlockingKeyId] = (0, import_react3.useState)(null);
+      const [deleteConfirmId, setDeleteConfirmId] = (0, import_react3.useState)(null);
+      const [deleteSubmitting, setDeleteSubmitting] = (0, import_react3.useState)(false);
+      const [resetSpendConfirm, setResetSpendConfirm] = (0, import_react3.useState)(false);
+      const [resetSpendSubmitting, setResetSpendSubmitting] = (0, import_react3.useState)(false);
+      const [filterText, setFilterText] = (0, import_react3.useState)("");
+      const filteredKeys = (0, import_react3.useMemo)(() => {
         if (!filterText.trim()) return keys;
         const q = filterText.toLowerCase();
         return keys.filter(
@@ -391,9 +1051,9 @@ var init_KeysTable = __esm({
       const copyToClipboard = (text) => {
         navigator.clipboard.writeText(text);
       };
-      const [pruneConfirmCount, setPruneConfirmCount] = (0, import_react2.useState)(null);
-      const [pruneSubmitting, setPruneSubmitting] = (0, import_react2.useState)(false);
-      const expiredKeys = (0, import_react2.useMemo)(() => {
+      const [pruneConfirmCount, setPruneConfirmCount] = (0, import_react3.useState)(null);
+      const [pruneSubmitting, setPruneSubmitting] = (0, import_react3.useState)(false);
+      const expiredKeys = (0, import_react3.useMemo)(() => {
         return keys.filter((k) => expiryStatus(k.expires_at) === "expired");
       }, [keys]);
       const handlePruneExpired = async () => {
@@ -412,97 +1072,188 @@ var init_KeysTable = __esm({
         const inCost = fmtCost(m.input_cost_per_token);
         const outCost = fmtCost(m.output_cost_per_token);
         const ctx = formatContextWindow(m.max_input_tokens, m.max_output_tokens);
-        return /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, null, /* @__PURE__ */ import_react2.default.createElement("span", null, m.model_name), m.supports_function_calling && " \u{1F527}", m.supports_vision && " \u{1F441}\uFE0F", ctx && /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, ctx), (inCost || outCost) && /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, inCost, " in \xB7 ", outCost, " out"));
+        return /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, null, /* @__PURE__ */ import_react3.default.createElement("span", null, m.model_name), m.supports_function_calling && " \u{1F527}", m.supports_vision && " \u{1F441}\uFE0F", ctx && /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, ctx), (inCost || outCost) && /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, inCost, " in \xB7 ", outCost, " out"));
       };
-      return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Paper, { sx: { mb: 2 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", p: 2, gap: 2 }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "h6" }, "Virtual Keys"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", gap: 1, alignItems: "center", flex: 1, justifyContent: "flex-end" }, /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.TextField,
-        {
-          size: "small",
-          placeholder: "Filter by alias or model\u2026",
-          value: filterText,
-          onChange: (e) => setFilterText(e.target.value),
-          sx: { minWidth: 240 },
-          InputProps: {
-            startAdornment: /* @__PURE__ */ import_react2.default.createElement(import_material2.InputAdornment, { position: "start" }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Search, { fontSize: "small" }))
-          }
+      const renderTableBody = () => {
+        if (loading) {
+          return /* @__PURE__ */ import_react3.default.createElement(import_TableRow.default, null, /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { colSpan: 8, sx: { py: 2 } }, /* @__PURE__ */ import_react3.default.createElement(import_Skeleton2.default, { variant: "rounded", height: 140 })));
         }
-      ), expiredKeys.length > 0 && /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.Button,
-        {
-          variant: "outlined",
-          color: "error",
-          startIcon: /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Autorenew, null),
-          onClick: () => setPruneConfirmCount(expiredKeys.length)
-        },
-        "Prune expired (",
-        expiredKeys.length,
-        ")"
-      ), /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.Button,
-        {
-          variant: "contained",
-          color: "primary",
-          startIcon: /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Add, null),
-          onClick: onGenerateKeyClick
-        },
-        "Generate New Key"
-      ))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableContainer, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Table, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableHead, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Alias"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Key ID"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Created"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Expires"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Budget"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "TPM / RPM"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Models"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { align: "right" }, "Actions"))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableBody, null, loading ? /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { colSpan: 8, align: "center" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 24 }))) : filteredKeys.length === 0 ? /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { colSpan: 8, align: "center", sx: { py: 4 } }, filterText ? /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { color: "text.secondary" }, "No keys match filter") : /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { color: "text.secondary", gutterBottom: true }, "No keys yet \u2014 generate your first key to start calling models."), /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.Button,
+        if (filteredKeys.length === 0) {
+          return /* @__PURE__ */ import_react3.default.createElement(import_TableRow.default, null, /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { colSpan: 8 }, filterText ? /* @__PURE__ */ import_react3.default.createElement(
+            EmptyState,
+            {
+              message: "No keys match that filter",
+              hint: "Try a different alias or model name."
+            }
+          ) : /* @__PURE__ */ import_react3.default.createElement(
+            EmptyState,
+            {
+              message: "No keys yet",
+              hint: "Generate your first key to start calling models.",
+              action: /* @__PURE__ */ import_react3.default.createElement(
+                import_Button2.default,
+                {
+                  variant: "contained",
+                  color: "primary",
+                  size: "small",
+                  disableElevation: true,
+                  startIcon: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.Add, null),
+                  onClick: onGenerateKeyClick,
+                  sx: { mt: 1 }
+                },
+                "Generate Your First Key"
+              )
+            }
+          )));
+        }
+        return filteredKeys.map((key) => {
+          const keyId = key.token ?? key.key;
+          const isBlocking = blockingKeyId === keyId;
+          const keyModels = key.models ?? [];
+          return /* @__PURE__ */ import_react3.default.createElement(
+            import_TableRow.default,
+            {
+              key: keyId,
+              sx: key.blocked ? (theme) => ({
+                // A left rule reads as "suspended" without greying the row into
+                // illegibility the way a full background tint does.
+                boxShadow: `inset 3px 0 0 0 ${theme.palette.error.main}`,
+                "& td": { color: theme.palette.text.secondary }
+              }) : void 0
+            },
+            /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", sx: { fontWeight: 600 } }, key.key_alias || "\u2014"), key.blocked && /* @__PURE__ */ import_react3.default.createElement(StatusPill, { label: "Blocked", tone: "danger" }))),
+            /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { display: "flex", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ import_react3.default.createElement(
+              import_Typography3.default,
+              {
+                variant: "body2",
+                component: "code",
+                color: "text.secondary",
+                title: keyId,
+                sx: (theme) => ({
+                  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                  fontSize: 12,
+                  bgcolor: (0, import_styles3.alpha)(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.08 : 0.05),
+                  px: 0.75,
+                  py: 0.375,
+                  borderRadius: "5px"
+                })
+              },
+              shortKeyId(keyId)
+            ), /* @__PURE__ */ import_react3.default.createElement(
+              import_IconButton.default,
+              {
+                size: "small",
+                onClick: () => copyToClipboard(keyId),
+                title: "Copy Key ID",
+                sx: quietIconButtonSx("accent")
+              },
+              /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.ContentCopy, { sx: { fontSize: 15 } })
+            ))),
+            /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", color: "text.secondary" }, formatDate(key.created_at))),
+            /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, /* @__PURE__ */ import_react3.default.createElement(ExpiryCell, { expiresAt: key.expires_at })),
+            /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, /* @__PURE__ */ import_react3.default.createElement(BudgetCell, { spend: key.spend ?? 0, maxBudget: key.max_budget })),
+            /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, key.tpm_limit ?? "\u221E", " / ", key.rpm_limit ?? "\u221E")),
+            /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, keyModels.length === 0 ? /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", color: "text.secondary" }, "All models") : /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { display: "flex", gap: 0.5, flexWrap: "wrap" }, keyModels.slice(0, 2).map((model) => /* @__PURE__ */ import_react3.default.createElement(TagChip, { key: model, label: model, title: model })), keyModels.length > 2 && /* @__PURE__ */ import_react3.default.createElement(
+              TagChip,
+              {
+                label: `+${keyModels.length - 2}`,
+                mono: false,
+                title: keyModels.slice(2).join(", ")
+              }
+            ))),
+            /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { align: "right" }, /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { display: "flex", justifyContent: "flex-end", gap: 0.25 }, /* @__PURE__ */ import_react3.default.createElement(
+              import_IconButton.default,
+              {
+                size: "small",
+                onClick: () => handleOpenEdit(key),
+                title: "Edit key",
+                sx: quietIconButtonSx("accent")
+              },
+              /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.Edit, { fontSize: "small" })
+            ), /* @__PURE__ */ import_react3.default.createElement(
+              import_IconButton.default,
+              {
+                size: "small",
+                onClick: () => handleToggleBlock(key),
+                disabled: isBlocking,
+                title: key.blocked ? "Unblock key" : "Block key \u2014 suspends without revoking",
+                sx: quietIconButtonSx("warning")
+              },
+              keyBlockIcon(isBlocking, key.blocked)
+            ), /* @__PURE__ */ import_react3.default.createElement(
+              import_IconButton.default,
+              {
+                size: "small",
+                onClick: () => setDeleteConfirmId(keyId),
+                title: "Revoke key",
+                sx: quietIconButtonSx("danger")
+              },
+              /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.Delete, { fontSize: "small" })
+            )))
+          );
+        });
+      };
+      return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(
+        SectionCard,
         {
-          variant: "contained",
-          color: "primary",
-          size: "small",
-          startIcon: /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Add, null),
-          onClick: onGenerateKeyClick
-        },
-        "Generate Your First Key"
-      )))) : filteredKeys.map((key) => {
-        const keyId = key.token ?? key.key;
-        const isBlocking = blockingKeyId === keyId;
-        return /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, { key: keyId, sx: key.blocked ? { bgcolor: "action.disabledBackground" } : void 0 }, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", alignItems: "center", gap: 0.5 }, key.key_alias || "-", key.blocked && /* @__PURE__ */ import_react2.default.createElement(import_material2.Chip, { label: "Blocked", color: "error", size: "small" }))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ import_react2.default.createElement(
-          import_material2.Typography,
-          {
-            variant: "body2",
-            component: "code",
-            color: "text.secondary",
-            title: keyId,
-            sx: {
-              fontFamily: "monospace",
-              backgroundColor: "background.default",
-              px: 1,
-              py: 0.5,
-              borderRadius: 1
+          title: "Virtual Keys",
+          subtitle: loading ? "Loading\u2026" : `${filteredKeys.length}${filterText ? ` of ${keys.length}` : ""} key${filteredKeys.length === 1 ? "" : "s"}`,
+          flush: true,
+          actions: /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(
+            import_TextField.default,
+            {
+              size: "small",
+              placeholder: "Filter by alias or model\u2026",
+              value: filterText,
+              onChange: (e) => setFilterText(e.target.value),
+              sx: { minWidth: 240 },
+              InputProps: {
+                startAdornment: /* @__PURE__ */ import_react3.default.createElement(import_InputAdornment.default, { position: "start" }, /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.Search, { fontSize: "small", color: "disabled" }))
+              }
             }
-          },
-          shortKeyId(keyId)
-        ), /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { size: "small", onClick: () => copyToClipboard(keyId), title: "Copy Key ID" }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.ContentCopy, { fontSize: "small" })))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, formatDate(key.created_at)), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(ExpiryChip, { expiresAt: key.expires_at })), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(BudgetCell, { spend: key.spend ?? 0, maxBudget: key.max_budget })), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2" }, key.tpm_limit ?? "-", " / ", key.rpm_limit ?? "-")), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", gap: 0.5, flexWrap: "wrap" }, key.models?.slice(0, 2).map((model) => /* @__PURE__ */ import_react2.default.createElement(import_material2.Chip, { key: model, label: model, size: "small" })), (key.models?.length || 0) > 2 && /* @__PURE__ */ import_react2.default.createElement(import_material2.Chip, { label: `+${(key.models?.length || 0) - 2}`, size: "small", variant: "outlined" }))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { align: "right" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { onClick: () => handleOpenEdit(key), title: "Edit key" }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Edit, { fontSize: "small" })), /* @__PURE__ */ import_react2.default.createElement(
-          import_material2.IconButton,
-          {
-            onClick: () => handleToggleBlock(key),
-            disabled: isBlocking,
-            color: key.blocked ? "warning" : "default",
-            title: key.blocked ? "Unblock key" : "Block key \u2014 suspends without revoking"
-          },
-          isBlocking ? /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 18 }) : key.blocked ? /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.LockOpen, { fontSize: "small" }) : /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Lock, { fontSize: "small" })
-        ), /* @__PURE__ */ import_react2.default.createElement(
-          import_material2.IconButton,
-          {
-            color: "error",
-            onClick: () => setDeleteConfirmId(keyId),
-            title: "Revoke key"
-          },
-          /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Delete, null)
-        )));
-      }))))), /* @__PURE__ */ import_react2.default.createElement(import_material2.Dialog, { open: !!editingKey, onClose: handleCloseEdit, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogTitle, null, "Edit Key"), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogContent, null, editingKey && /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "text.secondary" }, /* @__PURE__ */ import_react2.default.createElement("code", { style: { fontFamily: "monospace", color: "inherit" } }, maskKey(editingKey.key))), /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.TextField,
+          ), expiredKeys.length > 0 && /* @__PURE__ */ import_react3.default.createElement(
+            import_Button2.default,
+            {
+              variant: "outlined",
+              color: "inherit",
+              startIcon: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.Autorenew, null),
+              onClick: () => setPruneConfirmCount(expiredKeys.length),
+              sx: (theme) => ({
+                color: theme.palette.text.secondary,
+                borderColor: theme.palette.divider,
+                "&:hover": {
+                  color: theme.palette.error.main,
+                  borderColor: (0, import_styles3.alpha)(theme.palette.error.main, 0.5),
+                  bgcolor: (0, import_styles3.alpha)(theme.palette.error.main, 0.06)
+                }
+              })
+            },
+            "Prune expired (",
+            expiredKeys.length,
+            ")"
+          ), /* @__PURE__ */ import_react3.default.createElement(
+            import_Button2.default,
+            {
+              variant: "contained",
+              color: "primary",
+              disableElevation: true,
+              startIcon: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.Add, null),
+              onClick: onGenerateKeyClick
+            },
+            "Generate New Key"
+          ))
+        },
+        /* @__PURE__ */ import_react3.default.createElement(import_TableContainer.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Table.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react3.default.createElement(import_TableHead.default, null, /* @__PURE__ */ import_react3.default.createElement(import_TableRow.default, null, /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "Alias"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "Key ID"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "Created"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "Expires"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "Budget"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "TPM / RPM"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "Models"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { align: "right" }, "Actions"))), /* @__PURE__ */ import_react3.default.createElement(import_TableBody.default, null, renderTableBody())))
+      ), /* @__PURE__ */ import_react3.default.createElement(import_Dialog.default, { open: !!editingKey, onClose: handleCloseEdit, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ import_react3.default.createElement(import_DialogTitle.default, null, "Edit Key"), /* @__PURE__ */ import_react3.default.createElement(import_DialogContent.default, null, editingKey && /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", color: "text.secondary" }, /* @__PURE__ */ import_react3.default.createElement("code", { style: { fontFamily: "monospace", color: "inherit" } }, maskKey(editingKey.key))), /* @__PURE__ */ import_react3.default.createElement(
+        import_TextField.default,
         {
           label: "Alias",
           value: editForm.key_alias || "",
           onChange: (e) => setEditForm({ ...editForm, key_alias: e.target.value }),
           fullWidth: true
         }
-      ), models.length > 0 && /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.Autocomplete,
+      ), models.length > 0 && /* @__PURE__ */ import_react3.default.createElement(
+        import_Autocomplete.default,
         {
           multiple: true,
           options: models,
@@ -510,11 +1261,11 @@ var init_KeysTable = __esm({
           getOptionLabel: (m) => m.model_name,
           value: editSelectedModels,
           onChange: (_e, selected) => setEditForm({ ...editForm, models: selected.map((m) => m.model_name) }),
-          renderOption: (props, m) => /* @__PURE__ */ import_react2.default.createElement("li", { ...props }, modelOption(m)),
-          renderInput: (params) => /* @__PURE__ */ import_react2.default.createElement(import_material2.TextField, { ...params, label: "Models", fullWidth: true })
+          renderOption: (props, m) => /* @__PURE__ */ import_react3.default.createElement("li", { ...props }, modelOption(m)),
+          renderInput: (params) => /* @__PURE__ */ import_react3.default.createElement(import_TextField.default, { ...params, label: "Models", fullWidth: true })
         }
-      ), /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.TextField,
+      ), /* @__PURE__ */ import_react3.default.createElement(
+        import_TextField.default,
         {
           label: "Max Budget (USD)",
           type: "number",
@@ -522,8 +1273,8 @@ var init_KeysTable = __esm({
           onChange: (e) => setEditForm({ ...editForm, max_budget: e.target.value ? Number(e.target.value) : void 0 }),
           fullWidth: true
         }
-      ), /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.TextField,
+      ), /* @__PURE__ */ import_react3.default.createElement(
+        import_TextField.default,
         {
           label: "TPM Limit",
           type: "number",
@@ -532,8 +1283,8 @@ var init_KeysTable = __esm({
           helperText: "Max tokens per minute this key can consume across all models. Leave blank for no limit.",
           fullWidth: true
         }
-      ), /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.TextField,
+      ), /* @__PURE__ */ import_react3.default.createElement(
+        import_TextField.default,
         {
           label: "RPM Limit",
           type: "number",
@@ -542,8 +1293,8 @@ var init_KeysTable = __esm({
           helperText: "Max requests per minute this key can make across all models. Leave blank for no limit.",
           fullWidth: true
         }
-      ), /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { mt: 1, pt: 2, borderTop: "1px solid", sx: { borderColor: "divider" } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "caption", color: "text.secondary", display: "block", mb: 1 }, "Danger Zone"), !resetSpendConfirm ? /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.Button,
+      ), /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { mt: 1, pt: 2, borderTop: "1px solid", sx: { borderColor: "divider" } }, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "caption", color: "text.secondary", display: "block", mb: 1 }, "Danger Zone"), !resetSpendConfirm ? /* @__PURE__ */ import_react3.default.createElement(
+        import_Button2.default,
         {
           size: "small",
           color: "warning",
@@ -551,8 +1302,8 @@ var init_KeysTable = __esm({
           onClick: () => setResetSpendConfirm(true)
         },
         "Reset Spend to $0"
-      ) : /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "warning.main" }, "Zero out spend counter?"), /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.Button,
+      ) : /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", color: "warning.main" }, "Zero out spend counter?"), /* @__PURE__ */ import_react3.default.createElement(
+        import_Button2.default,
         {
           size: "small",
           color: "warning",
@@ -560,25 +1311,25 @@ var init_KeysTable = __esm({
           disabled: resetSpendSubmitting,
           onClick: handleResetSpend
         },
-        resetSpendSubmitting ? /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 16 }) : "Confirm"
-      ), /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { size: "small", onClick: () => setResetSpendConfirm(false) }, "Cancel"))))), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogActions, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: handleCloseEdit }, "Cancel"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: handleUpdate, variant: "contained", color: "primary", disabled: editSubmitting }, editSubmitting ? /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 24 }) : "Save"))), /* @__PURE__ */ import_react2.default.createElement(import_material2.Dialog, { open: !!deleteConfirmId, onClose: () => setDeleteConfirmId(null), maxWidth: "xs", fullWidth: true }, /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogTitle, null, "Revoke Key?"), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogContent, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, null, "This will permanently revoke the key. Any integrations using it will stop working immediately.")), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogActions, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: () => setDeleteConfirmId(null), disabled: deleteSubmitting }, "Cancel"), /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.Button,
+        resetSpendSubmitting ? /* @__PURE__ */ import_react3.default.createElement(import_CircularProgress.default, { size: 16 }) : "Confirm"
+      ), /* @__PURE__ */ import_react3.default.createElement(import_Button2.default, { size: "small", onClick: () => setResetSpendConfirm(false) }, "Cancel"))))), /* @__PURE__ */ import_react3.default.createElement(import_DialogActions.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Button2.default, { onClick: handleCloseEdit }, "Cancel"), /* @__PURE__ */ import_react3.default.createElement(import_Button2.default, { onClick: handleUpdate, variant: "contained", color: "primary", disabled: editSubmitting }, editSubmitting ? /* @__PURE__ */ import_react3.default.createElement(import_CircularProgress.default, { size: 24 }) : "Save"))), /* @__PURE__ */ import_react3.default.createElement(import_Dialog.default, { open: !!deleteConfirmId, onClose: () => setDeleteConfirmId(null), maxWidth: "xs", fullWidth: true }, /* @__PURE__ */ import_react3.default.createElement(import_DialogTitle.default, null, "Revoke Key?"), /* @__PURE__ */ import_react3.default.createElement(import_DialogContent.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, null, "This will permanently revoke the key. Any integrations using it will stop working immediately.")), /* @__PURE__ */ import_react3.default.createElement(import_DialogActions.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Button2.default, { onClick: () => setDeleteConfirmId(null), disabled: deleteSubmitting }, "Cancel"), /* @__PURE__ */ import_react3.default.createElement(
+        import_Button2.default,
         {
           onClick: handleConfirmDelete,
           variant: "contained",
           color: "error",
           disabled: deleteSubmitting
         },
-        deleteSubmitting ? /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 20 }) : "Revoke"
-      ))), /* @__PURE__ */ import_react2.default.createElement(import_material2.Dialog, { open: pruneConfirmCount !== null, onClose: () => setPruneConfirmCount(null), maxWidth: "xs", fullWidth: true }, /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogTitle, null, "Prune Expired Keys?"), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogContent, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, null, "This will permanently delete ", pruneConfirmCount, " expired key", pruneConfirmCount !== 1 ? "s" : "", " from LiteLLM. Any integrations using them will stop working immediately.")), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogActions, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: () => setPruneConfirmCount(null), disabled: pruneSubmitting }, "Cancel"), /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.Button,
+        deleteSubmitting ? /* @__PURE__ */ import_react3.default.createElement(import_CircularProgress.default, { size: 20 }) : "Revoke"
+      ))), /* @__PURE__ */ import_react3.default.createElement(import_Dialog.default, { open: pruneConfirmCount !== null, onClose: () => setPruneConfirmCount(null), maxWidth: "xs", fullWidth: true }, /* @__PURE__ */ import_react3.default.createElement(import_DialogTitle.default, null, "Prune Expired Keys?"), /* @__PURE__ */ import_react3.default.createElement(import_DialogContent.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, null, "This will permanently delete ", pruneConfirmCount, " expired key", pruneConfirmCount !== 1 ? "s" : "", " from LiteLLM. Any integrations using them will stop working immediately.")), /* @__PURE__ */ import_react3.default.createElement(import_DialogActions.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Button2.default, { onClick: () => setPruneConfirmCount(null), disabled: pruneSubmitting }, "Cancel"), /* @__PURE__ */ import_react3.default.createElement(
+        import_Button2.default,
         {
           onClick: handlePruneExpired,
           variant: "contained",
           color: "error",
           disabled: pruneSubmitting
         },
-        pruneSubmitting ? /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 20 }) : "Prune"
+        pruneSubmitting ? /* @__PURE__ */ import_react3.default.createElement(import_CircularProgress.default, { size: 20 }) : "Prune"
       ))));
     };
   }
@@ -626,6 +1377,21 @@ response = client.chat.completions.create(
 print(response.choices[0].message.content)`
   };
 }
+function aliasHelperText(aliasError, aliasDuplicate) {
+  if (aliasError) return "Alias is required";
+  if (aliasDuplicate) return "This alias is already used by one of your keys \u2014 LiteLLM requires aliases to be unique across all keys";
+  return void 0;
+}
+function teamHelperText(teamError, teamRequired) {
+  if (teamError) return "Team is required";
+  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"';
+  if (budgetEstimate !== null) return `\u2248 ${fmtInt(budgetEstimate)} tokens at the selected model's rate`;
+  return void 0;
+}
 function fmtCost2(perToken) {
   if (!perToken) return null;
   const per1k = perToken * 1e3;
@@ -646,12 +1412,28 @@ function formatContextWindow2(maxInput, maxOutput) {
   if (outPart) return `ctx ${outPart} out`;
   return null;
 }
-var import_react3, import_material3, import_icons_material3, generateDefaultAlias, emptyForm, GenerateKeyDialog, SnippetTabs;
+var import_react4, import_Box4, import_Typography4, import_Dialog2, import_DialogTitle2, import_DialogContent2, import_DialogActions2, import_TextField2, import_MenuItem, import_Button3, import_IconButton2, import_CircularProgress2, import_Autocomplete2, import_Checkbox, import_FormControlLabel, import_Alert, import_Tabs, import_Tab, import_icons_material3, generateDefaultAlias, emptyForm, SnippetTabs, GenerateKeyDialog;
 var init_GenerateKeyDialog = __esm({
   "src/components/GenerateKeyDialog.tsx"() {
     "use strict";
-    import_react3 = __toESM(require("react"));
-    import_material3 = require("@mui/material");
+    import_react4 = __toESM(require("react"));
+    import_Box4 = __toESM(require("@mui/material/Box"));
+    import_Typography4 = __toESM(require("@mui/material/Typography"));
+    import_Dialog2 = __toESM(require("@mui/material/Dialog"));
+    import_DialogTitle2 = __toESM(require("@mui/material/DialogTitle"));
+    import_DialogContent2 = __toESM(require("@mui/material/DialogContent"));
+    import_DialogActions2 = __toESM(require("@mui/material/DialogActions"));
+    import_TextField2 = __toESM(require("@mui/material/TextField"));
+    import_MenuItem = __toESM(require("@mui/material/MenuItem"));
+    import_Button3 = __toESM(require("@mui/material/Button"));
+    import_IconButton2 = __toESM(require("@mui/material/IconButton"));
+    import_CircularProgress2 = __toESM(require("@mui/material/CircularProgress"));
+    import_Autocomplete2 = __toESM(require("@mui/material/Autocomplete"));
+    import_Checkbox = __toESM(require("@mui/material/Checkbox"));
+    import_FormControlLabel = __toESM(require("@mui/material/FormControlLabel"));
+    import_Alert = __toESM(require("@mui/material/Alert"));
+    import_Tabs = __toESM(require("@mui/material/Tabs"));
+    import_Tab = __toESM(require("@mui/material/Tab"));
     import_icons_material3 = require("@mui/icons-material");
     init_format();
     generateDefaultAlias = (username) => {
@@ -669,6 +1451,44 @@ var init_GenerateKeyDialog = __esm({
       team_id: void 0,
       key_type: "llm_api"
     });
+    SnippetTabs = ({ snippets, model, onCopy }) => {
+      const [tab, setTab] = (0, import_react4.useState)("curl");
+      const code = tab === "curl" ? snippets.curl : snippets.openai;
+      return /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, null, /* @__PURE__ */ import_react4.default.createElement(import_Tabs.default, { value: tab, onChange: (_, v) => setTab(v), sx: { mb: 1 } }, /* @__PURE__ */ import_react4.default.createElement(import_Tab.default, { label: "curl", value: "curl" }), /* @__PURE__ */ import_react4.default.createElement(import_Tab.default, { label: "OpenAI SDK", value: "openai" })), /* @__PURE__ */ import_react4.default.createElement(
+        import_Box4.default,
+        {
+          position: "relative",
+          p: 1.5,
+          sx: { backgroundColor: "action.hover", border: "1px solid", borderColor: "divider", borderRadius: 1 }
+        },
+        /* @__PURE__ */ import_react4.default.createElement(
+          import_IconButton2.default,
+          {
+            size: "small",
+            onClick: () => onCopy(code),
+            title: "Copy snippet",
+            sx: { position: "absolute", top: 4, right: 4 }
+          },
+          /* @__PURE__ */ import_react4.default.createElement(import_icons_material3.ContentCopy, { fontSize: "small" })
+        ),
+        /* @__PURE__ */ import_react4.default.createElement(
+          import_Typography4.default,
+          {
+            component: "pre",
+            sx: {
+              fontFamily: "monospace",
+              fontSize: 12,
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all",
+              mb: 0,
+              pr: 4
+            }
+          },
+          code
+        ),
+        model && /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "caption", color: "text.secondary", display: "block", mt: 1 }, "Using model \u201C", model, "\u201D \u2014 swap it for any model you have access to.")
+      ));
+    };
     GenerateKeyDialog = ({
       open,
       onClose,
@@ -680,14 +1500,14 @@ var init_GenerateKeyDialog = __esm({
       onGenerateKey,
       onGetConfig
     }) => {
-      const [formData, setFormData] = (0, import_react3.useState)(emptyForm());
-      const [unlimitedBudget, setUnlimitedBudget] = (0, import_react3.useState)(false);
-      const [submitting, setSubmitting] = (0, import_react3.useState)(false);
-      const [newKeyValue, setNewKeyValue] = (0, import_react3.useState)(null);
-      const [newKeySnippets, setNewKeySnippets] = (0, import_react3.useState)(null);
-      const [newKeyModel, setNewKeyModel] = (0, import_react3.useState)("");
-      const [generateError, setGenerateError] = (0, import_react3.useState)(null);
-      (0, import_react3.useEffect)(() => {
+      const [formData, setFormData] = (0, import_react4.useState)(emptyForm());
+      const [unlimitedBudget, setUnlimitedBudget] = (0, import_react4.useState)(false);
+      const [submitting, setSubmitting] = (0, import_react4.useState)(false);
+      const [newKeyValue, setNewKeyValue] = (0, import_react4.useState)(null);
+      const [newKeySnippets, setNewKeySnippets] = (0, import_react4.useState)(null);
+      const [newKeyModel, setNewKeyModel] = (0, import_react4.useState)("");
+      const [generateError, setGenerateError] = (0, import_react4.useState)(null);
+      (0, import_react4.useEffect)(() => {
         if (open) {
           setFormData({ ...emptyForm(), alias: generateDefaultAlias(username) });
           setUnlimitedBudget(false);
@@ -700,7 +1520,7 @@ var init_GenerateKeyDialog = __esm({
       const allowUnlimitedBudget = keyGenerationSettings?.allowUnlimitedBudget ?? false;
       const teamRequired = keyGenerationSettings?.teamRequired ?? true;
       const selectedTeam = teams.find((t) => t.team_id === formData.team_id) ?? null;
-      const availableModels = (0, import_react3.useMemo)(() => {
+      const availableModels = (0, import_react4.useMemo)(() => {
         const teamModels = selectedTeam?.models;
         if (teamModels && teamModels.length > 0) {
           const allowed = new Set(teamModels);
@@ -714,7 +1534,7 @@ var init_GenerateKeyDialog = __esm({
       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 budgetEstimate = (0, import_react3.useMemo)(() => {
+      const budgetEstimate = (0, import_react4.useMemo)(() => {
         if (unlimitedBudget || budgetInvalid) return null;
         const inputCosts = selectedModels.map((m) => m.input_cost_per_token).filter((c) => typeof c === "number" && c > 0);
         if (inputCosts.length === 0) return null;
@@ -762,10 +1582,42 @@ var init_GenerateKeyDialog = __esm({
         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__ */ import_react3.default.createElement(import_material3.Box, null, /* @__PURE__ */ import_react3.default.createElement("span", null, m.model_name), m.supports_function_calling && " \u{1F527}", m.supports_vision && " \u{1F441}\uFE0F", ctx && /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, ctx), (inCost || outCost) && /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, inCost, " in \xB7 ", outCost, " out"));
+        return /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, null, /* @__PURE__ */ import_react4.default.createElement("span", null, m.model_name), m.supports_function_calling && " \u{1F527}", m.supports_vision && " \u{1F441}\uFE0F", ctx && /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, ctx), (inCost || outCost) && /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "caption", color: "text.secondary", sx: { ml: 1 } }, inCost, " in \xB7 ", outCost, " out"));
       };
-      return /* @__PURE__ */ import_react3.default.createElement(import_material3.Dialog, { open, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ import_react3.default.createElement(import_material3.DialogTitle, null, newKeyValue ? "Key Generated" : "Generate New Key"), /* @__PURE__ */ import_react3.default.createElement(import_material3.DialogContent, null, newKeyValue ? /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "body2", color: "text.secondary", gutterBottom: true }, "Copy this key now. You won't be able to see it again."), /* @__PURE__ */ import_react3.default.createElement(
-        import_material3.Box,
+      const renderTeamField = () => {
+        if (teams.length > 0) {
+          return /* @__PURE__ */ import_react4.default.createElement(
+            import_Autocomplete2.default,
+            {
+              options: teams,
+              getOptionLabel: (t) => t.team_alias || t.team_id,
+              value: selectedTeam,
+              onChange: (_e, team) => {
+                const teamModels = team?.models;
+                const restrictedModels = teamModels && teamModels.length > 0 ? (formData.models || []).filter((m) => teamModels.includes(m)) : formData.models;
+                setFormData({ ...formData, team_id: team?.team_id, models: restrictedModels });
+              },
+              renderInput: (params) => /* @__PURE__ */ import_react4.default.createElement(
+                import_TextField2.default,
+                {
+                  ...params,
+                  label: "Team",
+                  error: teamError,
+                  helperText: teamHelperText(teamError, teamRequired),
+                  required: teamRequired,
+                  fullWidth: true
+                }
+              )
+            }
+          );
+        }
+        if (teamRequired) {
+          return /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "body2", color: "error" }, "Team selection is required, but you don't belong to any team yet \u2014 contact your administrator.");
+        }
+        return null;
+      };
+      return /* @__PURE__ */ import_react4.default.createElement(import_Dialog2.default, { open, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ import_react4.default.createElement(import_DialogTitle2.default, null, newKeyValue ? "Key Generated" : "Generate New Key"), /* @__PURE__ */ import_react4.default.createElement(import_DialogContent2.default, null, newKeyValue ? /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, null, /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "body2", color: "text.secondary", gutterBottom: true }, "Copy this key now. You won't be able to see it again."), /* @__PURE__ */ import_react4.default.createElement(
+        import_Box4.default,
         {
           display: "flex",
           alignItems: "center",
@@ -779,8 +1631,8 @@ var init_GenerateKeyDialog = __esm({
             borderRadius: 1
           }
         },
-        /* @__PURE__ */ import_react3.default.createElement(
-          import_material3.Typography,
+        /* @__PURE__ */ import_react4.default.createElement(
+          import_Typography4.default,
           {
             component: "code",
             color: "text.primary",
@@ -788,9 +1640,9 @@ var init_GenerateKeyDialog = __esm({
           },
           newKeyValue
         ),
-        /* @__PURE__ */ import_react3.default.createElement(import_material3.IconButton, { onClick: () => copyToClipboard(newKeyValue) }, /* @__PURE__ */ import_react3.default.createElement(import_icons_material3.ContentCopy, null))
-      ), newKeySnippets && /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, { mt: 3 }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ import_react3.default.createElement(import_icons_material3.Code, { fontSize: "small", color: "action" }), /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "subtitle2" }, "Start calling the proxy \u2014 paste and run")), /* @__PURE__ */ import_react3.default.createElement(SnippetTabs, { snippets: newKeySnippets, model: newKeyModel, onCopy: copyToClipboard }))) : /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, generateError && /* @__PURE__ */ import_react3.default.createElement(import_material3.Alert, { severity: "error", onClose: () => setGenerateError(null) }, generateError), /* @__PURE__ */ import_react3.default.createElement(
-        import_material3.TextField,
+        /* @__PURE__ */ import_react4.default.createElement(import_IconButton2.default, { onClick: () => copyToClipboard(newKeyValue) }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material3.ContentCopy, null))
+      ), newKeySnippets && /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, { mt: 3 }, /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material3.Code, { fontSize: "small", color: "action" }), /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "subtitle2" }, "Start calling the proxy \u2014 paste and run")), /* @__PURE__ */ import_react4.default.createElement(SnippetTabs, { snippets: newKeySnippets, model: newKeyModel, onCopy: copyToClipboard }))) : /* @__PURE__ */ import_react4.default.createElement(import_Box4.default, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, generateError && /* @__PURE__ */ import_react4.default.createElement(import_Alert.default, { severity: "error", onClose: () => setGenerateError(null) }, generateError), /* @__PURE__ */ import_react4.default.createElement(
+        import_TextField2.default,
         {
           label: "Alias",
           value: formData.alias || "",
@@ -800,12 +1652,12 @@ var init_GenerateKeyDialog = __esm({
           },
           error: aliasError,
           color: aliasDuplicate ? "warning" : void 0,
-          helperText: aliasError ? "Alias is required" : aliasDuplicate ? "This alias is already used by one of your keys \u2014 LiteLLM requires aliases to be unique across all keys" : void 0,
+          helperText: aliasHelperText(aliasError, aliasDuplicate),
           required: true,
           fullWidth: true
         }
-      ), /* @__PURE__ */ import_react3.default.createElement(
-        import_material3.TextField,
+      ), /* @__PURE__ */ import_react4.default.createElement(
+        import_TextField2.default,
         {
           select: true,
           label: "Duration",
@@ -813,36 +1665,13 @@ var init_GenerateKeyDialog = __esm({
           onChange: (e) => setFormData({ ...formData, duration: e.target.value }),
           fullWidth: true
         },
-        /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "1d" }, "1 Day"),
-        /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "7d" }, "7 Days"),
-        /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "30d" }, "30 Days"),
-        /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "90d" }, "90 Days"),
-        /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "1y" }, "1 Year")
-      ), teams.length > 0 ? /* @__PURE__ */ import_react3.default.createElement(
-        import_material3.Autocomplete,
-        {
-          options: teams,
-          getOptionLabel: (t) => t.team_alias || t.team_id,
-          value: selectedTeam,
-          onChange: (_e, team) => {
-            const teamModels = team?.models;
-            const restrictedModels = teamModels && teamModels.length > 0 ? (formData.models || []).filter((m) => teamModels.includes(m)) : formData.models;
-            setFormData({ ...formData, team_id: team?.team_id, models: restrictedModels });
-          },
-          renderInput: (params) => /* @__PURE__ */ import_react3.default.createElement(
-            import_material3.TextField,
-            {
-              ...params,
-              label: "Team",
-              error: teamError,
-              helperText: teamError ? "Team is required" : teamRequired ? "Bind this key to a team for scoped access" : "Optional: bind this key to a specific team for scoped access",
-              required: teamRequired,
-              fullWidth: true
-            }
-          )
-        }
-      ) : teamRequired ? /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "body2", color: "error" }, "Team selection is required, but you don't belong to any team yet \u2014 contact your administrator.") : null, availableModels.length > 0 && /* @__PURE__ */ import_react3.default.createElement(
-        import_material3.Autocomplete,
+        /* @__PURE__ */ import_react4.default.createElement(import_MenuItem.default, { value: "1d" }, "1 Day"),
+        /* @__PURE__ */ import_react4.default.createElement(import_MenuItem.default, { value: "7d" }, "7 Days"),
+        /* @__PURE__ */ import_react4.default.createElement(import_MenuItem.default, { value: "30d" }, "30 Days"),
+        /* @__PURE__ */ import_react4.default.createElement(import_MenuItem.default, { value: "90d" }, "90 Days"),
+        /* @__PURE__ */ import_react4.default.createElement(import_MenuItem.default, { value: "1y" }, "1 Year")
+      ), renderTeamField(), availableModels.length > 0 && /* @__PURE__ */ import_react4.default.createElement(
+        import_Autocomplete2.default,
         {
           multiple: true,
           options: availableModels,
@@ -850,9 +1679,9 @@ var init_GenerateKeyDialog = __esm({
           getOptionLabel: (m) => m.model_name,
           value: selectedModels,
           onChange: (_e, selected) => setFormData({ ...formData, models: selected.map((m) => m.model_name) }),
-          renderOption: (props, m) => /* @__PURE__ */ import_react3.default.createElement("li", { ...props }, modelOption(m)),
-          renderInput: (params) => /* @__PURE__ */ import_react3.default.createElement(
-            import_material3.TextField,
+          renderOption: (props, m) => /* @__PURE__ */ import_react4.default.createElement("li", { ...props }, modelOption(m)),
+          renderInput: (params) => /* @__PURE__ */ import_react4.default.createElement(
+            import_TextField2.default,
             {
               ...params,
               label: "Models",
@@ -861,11 +1690,11 @@ var init_GenerateKeyDialog = __esm({
             }
           )
         }
-      ), allowUnlimitedBudget && /* @__PURE__ */ import_react3.default.createElement(
-        import_material3.FormControlLabel,
+      ), allowUnlimitedBudget && /* @__PURE__ */ import_react4.default.createElement(
+        import_FormControlLabel.default,
         {
-          control: /* @__PURE__ */ import_react3.default.createElement(
-            import_material3.Checkbox,
+          control: /* @__PURE__ */ import_react4.default.createElement(
+            import_Checkbox.default,
             {
               checked: unlimitedBudget,
               onChange: (e) => {
@@ -880,21 +1709,21 @@ var init_GenerateKeyDialog = __esm({
           ),
           label: "Unlimited budget"
         }
-      ), /* @__PURE__ */ import_react3.default.createElement(
-        import_material3.TextField,
+      ), /* @__PURE__ */ import_react4.default.createElement(
+        import_TextField2.default,
         {
           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 }),
           error: budgetInvalid,
-          helperText: budgetInvalid ? 'Enter a positive budget or tick "Unlimited"' : budgetEstimate !== null ? `\u2248 ${fmtInt(budgetEstimate)} tokens at the selected model's rate` : void 0,
+          helperText: budgetHelperText(budgetInvalid, budgetEstimate),
           disabled: unlimitedBudget,
           required: true,
           fullWidth: true
         }
-      ), /* @__PURE__ */ import_react3.default.createElement(
-        import_material3.TextField,
+      ), /* @__PURE__ */ import_react4.default.createElement(
+        import_TextField2.default,
         {
           label: "TPM Limit",
           type: "number",
@@ -903,8 +1732,8 @@ var init_GenerateKeyDialog = __esm({
           helperText: "Max tokens per minute this key can consume across all models. Leave blank for no limit.",
           fullWidth: true
         }
-      ), /* @__PURE__ */ import_react3.default.createElement(
-        import_material3.TextField,
+      ), /* @__PURE__ */ import_react4.default.createElement(
+        import_TextField2.default,
         {
           label: "RPM Limit",
           type: "number",
@@ -913,93 +1742,74 @@ var init_GenerateKeyDialog = __esm({
           helperText: "Max requests per minute this key can make across all models. Leave blank for no limit.",
           fullWidth: true
         }
-      ))), /* @__PURE__ */ import_react3.default.createElement(import_material3.DialogActions, null, newKeyValue ? /* @__PURE__ */ import_react3.default.createElement(import_material3.Button, { onClick: handleClose, variant: "contained", color: "success" }, "Done") : /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.Button, { onClick: handleClose }, "Cancel"), /* @__PURE__ */ import_react3.default.createElement(
-        import_material3.Button,
+      ))), /* @__PURE__ */ import_react4.default.createElement(import_DialogActions2.default, null, newKeyValue ? /* @__PURE__ */ import_react4.default.createElement(import_Button3.default, { onClick: handleClose, variant: "contained", color: "success" }, "Done") : /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_Button3.default, { onClick: handleClose }, "Cancel"), /* @__PURE__ */ import_react4.default.createElement(
+        import_Button3.default,
         {
           onClick: handleGenerate,
           variant: "contained",
           color: "primary",
           disabled: !canGenerate
         },
-        submitting ? /* @__PURE__ */ import_react3.default.createElement(import_material3.CircularProgress, { size: 24 }) : "Generate"
+        submitting ? /* @__PURE__ */ import_react4.default.createElement(import_CircularProgress2.default, { size: 24 }) : "Generate"
       ))));
     };
-    SnippetTabs = ({ snippets, model, onCopy }) => {
-      const [tab, setTab] = (0, import_react3.useState)("curl");
-      const code = tab === "curl" ? snippets.curl : snippets.openai;
-      return /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.Tabs, { value: tab, onChange: (_, v) => setTab(v), sx: { mb: 1 } }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Tab, { label: "curl", value: "curl" }), /* @__PURE__ */ import_react3.default.createElement(import_material3.Tab, { label: "OpenAI SDK", value: "openai" })), /* @__PURE__ */ import_react3.default.createElement(
-        import_material3.Box,
-        {
-          position: "relative",
-          p: 1.5,
-          sx: { backgroundColor: "action.hover", border: "1px solid", borderColor: "divider", borderRadius: 1 }
-        },
-        /* @__PURE__ */ import_react3.default.createElement(
-          import_material3.IconButton,
-          {
-            size: "small",
-            onClick: () => onCopy(code),
-            title: "Copy snippet",
-            sx: { position: "absolute", top: 4, right: 4 }
-          },
-          /* @__PURE__ */ import_react3.default.createElement(import_icons_material3.ContentCopy, { fontSize: "small" })
-        ),
-        /* @__PURE__ */ import_react3.default.createElement(
-          import_material3.Typography,
-          {
-            component: "pre",
-            sx: {
-              fontFamily: "monospace",
-              fontSize: 12,
-              whiteSpace: "pre-wrap",
-              wordBreak: "break-all",
-              mb: 0,
-              pr: 4
-            }
-          },
-          code
-        ),
-        model && /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "caption", color: "text.secondary", display: "block", mt: 1 }, "Using model \u201C", model, "\u201D \u2014 swap it for any model you have access to.")
-      ));
-    };
   }
 });
 
 // src/components/UsageStats.tsx
-function modelColor(model) {
-  let h = 5381;
-  for (let i = 0; i < model.length; i++) h = (h << 5) + h + model.charCodeAt(i) >>> 0;
-  return MODEL_COLORS[h % MODEL_COLORS.length];
+function rateTone(rate) {
+  if (rate >= 0.99) return "success";
+  if (rate >= 0.9) return "warning";
+  return "danger";
 }
-var import_react4, import_material4, import_recharts, TOP_N_MODELS, PERIOD_LS_KEY, MODEL_COLORS, fmtPct, KpiCard, ChartSkeleton, EmptyChart, UsageStats;
+var import_react5, import_Paper3, import_Box5, import_Typography5, import_TextField3, import_MenuItem2, import_Grid, import_Table2, import_TableBody2, import_TableCell2, import_TableContainer2, import_TableHead2, import_TableRow2, import_Skeleton3, import_recharts, TOP_N_MODELS, PERIOD_LS_KEY, PRESET_LABELS, fmtPct, ChartSkeleton, ChartOrFallback, SuccessRateCell, UsageStats;
 var init_UsageStats = __esm({
   "src/components/UsageStats.tsx"() {
     "use strict";
-    import_react4 = __toESM(require("react"));
-    import_material4 = require("@mui/material");
+    import_react5 = __toESM(require("react"));
+    import_Paper3 = __toESM(require("@mui/material/Paper"));
+    import_Box5 = __toESM(require("@mui/material/Box"));
+    import_Typography5 = __toESM(require("@mui/material/Typography"));
+    import_TextField3 = __toESM(require("@mui/material/TextField"));
+    import_MenuItem2 = __toESM(require("@mui/material/MenuItem"));
+    import_Grid = __toESM(require("@mui/material/Grid"));
+    import_Table2 = __toESM(require("@mui/material/Table"));
+    import_TableBody2 = __toESM(require("@mui/material/TableBody"));
+    import_TableCell2 = __toESM(require("@mui/material/TableCell"));
+    import_TableContainer2 = __toESM(require("@mui/material/TableContainer"));
+    import_TableHead2 = __toESM(require("@mui/material/TableHead"));
+    import_TableRow2 = __toESM(require("@mui/material/TableRow"));
+    import_Skeleton3 = __toESM(require("@mui/material/Skeleton"));
     import_recharts = require("recharts");
     init_format();
+    init_ui();
     TOP_N_MODELS = 6;
     PERIOD_LS_KEY = "litellm_usage_period";
-    MODEL_COLORS = [
-      "#8884d8",
-      "#82ca9d",
-      "#ffc658",
-      "#ff7300",
-      "#0088fe",
-      "#00C49F",
-      "#FFBB28",
-      "#FF8042",
-      "#a4de6c",
-      "#d0ed57"
-    ];
+    PRESET_LABELS = {
+      today: "Today",
+      "24h": "Last 24 hours",
+      "7d": "Last 7 days",
+      "30d": "Last 30 days"
+    };
     fmtPct = (n) => `${(n * 100).toFixed(1)}%`;
-    KpiCard = ({ label, value, hint }) => /* @__PURE__ */ import_react4.default.createElement(import_material4.Paper, { variant: "outlined", sx: { p: 2, height: "100%" } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "h5", sx: { mt: 0.5 } }, value), hint ? /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "caption", color: "text.secondary" }, hint) : null);
-    ChartSkeleton = ({ height = 260 }) => /* @__PURE__ */ import_react4.default.createElement(import_material4.Skeleton, { variant: "rectangular", height, sx: { borderRadius: 1 } });
-    EmptyChart = ({
-      height = 260,
-      message = "No data for this period"
-    }) => /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { height, display: "flex", alignItems: "center", justifyContent: "center" }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { color: "text.secondary", variant: "body2" }, message));
+    ChartSkeleton = ({ height = 240 }) => /* @__PURE__ */ import_react5.default.createElement(import_Skeleton3.default, { variant: "rounded", height });
+    ChartOrFallback = ({ loading, empty, height = 240, children }) => {
+      if (loading) return /* @__PURE__ */ import_react5.default.createElement(ChartSkeleton, { height });
+      if (empty) return /* @__PURE__ */ import_react5.default.createElement(EmptyState, { message: "No data for this period", height });
+      return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, children);
+    };
+    SuccessRateCell = ({ rate, requests }) => {
+      if (requests === 0) return /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "body2", color: "text.secondary" }, "\u2014");
+      const tone = rateTone(rate);
+      return /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, { width: 72, flexShrink: 0 }, /* @__PURE__ */ import_react5.default.createElement(Meter, { value: rate * 100, tone, height: 4 })), /* @__PURE__ */ import_react5.default.createElement(
+        import_Typography5.default,
+        {
+          variant: "caption",
+          sx: { fontVariantNumeric: "tabular-nums", minWidth: 44 }
+        },
+        fmtPct(rate)
+      ));
+    };
     UsageStats = ({
       usage,
       models,
@@ -1008,15 +1818,10 @@ var init_UsageStats = __esm({
       loading,
       userInfo
     }) => {
-      const theme = (0, import_material4.useTheme)();
-      const [selectedModel, setSelectedModel] = (0, import_react4.useState)("all");
-      const [tab, setTab] = (0, import_react4.useState)("costs");
-      const gridStroke = theme.palette.divider;
-      const tickFill = theme.palette.text.secondary;
-      const tickStyle = { fontSize: 12, fill: tickFill };
-      const tickStyleSmall = { fontSize: 11, fill: tickFill };
-      const tickStyleTiny = { fontSize: 10, fill: tickFill };
-      const selectedPreset = (0, import_react4.useMemo)(() => {
+      const chart = useChartTheme();
+      const [selectedModel, setSelectedModel] = (0, import_react5.useState)("all");
+      const [tab, setTab] = (0, import_react5.useState)("costs");
+      const selectedPreset = (0, import_react5.useMemo)(() => {
         if (dateRange.start.toDateString() === dateRange.end.toDateString()) return "today";
         const diffMs = dateRange.end.getTime() - dateRange.start.getTime();
         const diffHours = diffMs / (1e3 * 60 * 60);
@@ -1038,7 +1843,7 @@ var init_UsageStats = __esm({
         }
         onDateRangeChange({ start, end });
       };
-      const dailyData = (0, import_react4.useMemo)(
+      const dailyData = (0, import_react5.useMemo)(
         () => (usage?.daily_usage ?? []).map((d) => ({
           date: d.date,
           spend: d.spend,
@@ -1051,21 +1856,21 @@ var init_UsageStats = __esm({
         })),
         [usage]
       );
-      const cumulativeData = (0, import_react4.useMemo)(() => {
+      const cumulativeData = (0, import_react5.useMemo)(() => {
         let cum = 0;
         return dailyData.map((d) => {
           cum += d.spend;
           return { date: d.date, cumulative: cum };
         });
       }, [dailyData]);
-      const successRateData = (0, import_react4.useMemo)(
+      const successRateData = (0, import_react5.useMemo)(
         () => dailyData.filter((d) => d.apiRequests > 0).map((d) => ({
           date: d.date,
           successRate: parseFloat((d.successfulRequests / d.apiRequests * 100).toFixed(1))
         })),
         [dailyData]
       );
-      const { modelSpendByDate, topModels: topSpendModels } = (0, import_react4.useMemo)(() => {
+      const { modelSpendByDate, topModels: topSpendModels } = (0, import_react5.useMemo)(() => {
         const rows = usage?.daily_by_model ?? [];
         const modelTotals = {};
         for (const r of rows) modelTotals[r.model] = (modelTotals[r.model] ?? 0) + r.spend;
@@ -1080,7 +1885,7 @@ var init_UsageStats = __esm({
         const hasOther = sorted.some((r) => r.Other > 0);
         return { modelSpendByDate: sorted, topModels: hasOther ? [...top, "Other"] : top };
       }, [usage]);
-      const modelRows = (0, import_react4.useMemo)(() => {
+      const modelRows = (0, import_react5.useMemo)(() => {
         const entries = Object.entries(usage?.usage_by_model ?? {}).map(([model, d]) => ({
           model,
           spend: d.total_spend,
@@ -1094,11 +1899,11 @@ var init_UsageStats = __esm({
         }));
         return selectedModel === "all" ? entries : entries.filter((e) => e.model === selectedModel);
       }, [usage, selectedModel]);
-      const topModelSpendBars = (0, import_react4.useMemo)(
+      const topModelSpendBars = (0, import_react5.useMemo)(
         () => [...modelRows].sort((a, b) => b.spend - a.spend).slice(0, 10),
         [modelRows]
       );
-      const keyRows = (0, import_react4.useMemo)(
+      const keyRows = (0, import_react5.useMemo)(
         () => Object.entries(usage?.usage_by_key ?? {}).map(([keyHash, d]) => ({
           keyHash,
           keyAlias: d.key_alias ?? keyHash.slice(0, 8),
@@ -1115,7 +1920,7 @@ var init_UsageStats = __esm({
         })),
         [usage]
       );
-      const topKeySpendBars = (0, import_react4.useMemo)(
+      const topKeySpendBars = (0, import_react5.useMemo)(
         () => [...keyRows].sort((a, b) => b.spend - a.spend).slice(0, 10),
         [keyRows]
       );
@@ -1123,144 +1928,384 @@ var init_UsageStats = __esm({
       const overallSuccessRate = totalRequests > 0 ? (usage?.successful_requests ?? 0) / totalRequests : 0;
       const maxBudget = userInfo?.max_budget ?? 0;
       const totalCumSpend = cumulativeData[cumulativeData.length - 1]?.cumulative ?? 0;
-      return /* @__PURE__ */ import_react4.default.createElement(import_material4.Paper, { sx: { p: 2 } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, flexWrap: "wrap", gap: 2 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "h6" }, "Usage Analytics"), /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap" }, /* @__PURE__ */ import_react4.default.createElement(import_material4.FormControl, { size: "small", sx: { minWidth: 140 } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.InputLabel, null, "Period"), /* @__PURE__ */ import_react4.default.createElement(
-        import_material4.Select,
+      const cumulativeDomain = maxBudget > 0 ? [0, (dataMax) => Math.max(dataMax, maxBudget) * 1.05] : [0, "auto"];
+      const successTone = totalRequests === 0 ? "neutral" : rateTone(overallSuccessRate);
+      const metrics = [
         {
-          value: selectedPreset,
-          label: "Period",
-          onChange: (e) => handlePresetChange(e.target.value)
+          label: "Total spend",
+          value: fmtUsd(usage?.total_spend ?? 0),
+          hint: maxBudget > 0 ? `of ${fmtUsd(maxBudget)} budget` : void 0,
+          tone: "accent"
         },
-        /* @__PURE__ */ import_react4.default.createElement(import_material4.MenuItem, { value: "today" }, "Today"),
-        /* @__PURE__ */ import_react4.default.createElement(import_material4.MenuItem, { value: "24h" }, "Last 24h"),
-        /* @__PURE__ */ import_react4.default.createElement(import_material4.MenuItem, { value: "7d" }, "Last 7 days"),
-        /* @__PURE__ */ import_react4.default.createElement(import_material4.MenuItem, { value: "30d" }, "Last 30 days")
-      )), tab === "models" && /* @__PURE__ */ import_react4.default.createElement(import_material4.FormControl, { size: "small", sx: { minWidth: 180 } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.InputLabel, null, "Model"), /* @__PURE__ */ import_react4.default.createElement(
-        import_material4.Select,
         {
-          value: selectedModel,
-          label: "Model",
-          onChange: (e) => setSelectedModel(e.target.value)
+          label: "Requests",
+          value: fmtInt(totalRequests),
+          hint: `${fmtInt(usage?.failed_requests ?? 0)} failed`,
+          tone: "info"
         },
-        /* @__PURE__ */ import_react4.default.createElement(import_material4.MenuItem, { value: "all" }, "All Models"),
-        models.map((m) => /* @__PURE__ */ import_react4.default.createElement(import_material4.MenuItem, { key: m.model_name, value: m.model_name }, m.model_name))
-      )))), /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { container: true, spacing: 2, sx: { mb: 2 } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { item: true, xs: 6, sm: 3 }, loading ? /* @__PURE__ */ import_react4.default.createElement(ChartSkeleton, { height: 80 }) : /* @__PURE__ */ import_react4.default.createElement(KpiCard, { label: "Total Spend", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { item: true, xs: 6, sm: 3 }, loading ? /* @__PURE__ */ import_react4.default.createElement(ChartSkeleton, { height: 80 }) : /* @__PURE__ */ import_react4.default.createElement(KpiCard, { label: "Total Requests", value: fmtInt(totalRequests), hint: `${fmtInt(usage?.failed_requests ?? 0)} failed` })), /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { item: true, xs: 6, sm: 3 }, loading ? /* @__PURE__ */ import_react4.default.createElement(ChartSkeleton, { height: 80 }) : /* @__PURE__ */ import_react4.default.createElement(KpiCard, { label: "Success Rate", value: totalRequests > 0 ? fmtPct(overallSuccessRate) : "\u2014" })), /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { item: true, xs: 6, sm: 3 }, loading ? /* @__PURE__ */ import_react4.default.createElement(ChartSkeleton, { height: 80 }) : /* @__PURE__ */ import_react4.default.createElement(
-        KpiCard,
         {
-          label: "Total Tokens",
-          value: fmtInt(usage?.total_tokens ?? 0),
-          hint: `${fmtInt(usage?.prompt_tokens ?? 0)} in \xB7 ${fmtInt(usage?.completion_tokens ?? 0)} out`
-        }
-      ))), /* @__PURE__ */ import_react4.default.createElement(import_material4.Tabs, { value: tab, onChange: (_, v) => setTab(v), sx: { mb: 2 } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Tab, { value: "costs", label: "Costs" }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Tab, { value: "models", label: "Model Activity" }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Tab, { value: "keys", label: "Key Activity" })), tab === "costs" && /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { container: true, spacing: 3 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Daily Spend by Model"), loading ? /* @__PURE__ */ import_react4.default.createElement(ChartSkeleton, null) : modelSpendByDate.length === 0 ? /* @__PURE__ */ import_react4.default.createElement(EmptyChart, null) : /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { height: 260 }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.AreaChart, { data: modelSpendByDate }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: "date", tick: tickStyle }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: tickStyle, tickFormatter: (v) => `$${v.toFixed(2)}` }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { formatter: (v) => [`$${v.toFixed(4)}`, void 0] }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, null), topSpendModels.map((m) => /* @__PURE__ */ import_react4.default.createElement(
-        import_recharts.Area,
+          label: "Success rate",
+          value: totalRequests > 0 ? fmtPct(overallSuccessRate) : "\u2014",
+          hint: totalRequests > 0 ? `${fmtInt(usage?.successful_requests ?? 0)} succeeded` : void 0,
+          tone: successTone
+        },
         {
-          key: m,
-          type: "monotone",
-          dataKey: m,
-          stackId: "spend",
-          stroke: modelColor(m),
-          fill: modelColor(m),
-          fillOpacity: 0.6
+          label: "Tokens",
+          value: fmtCompact(usage?.total_tokens ?? 0),
+          hint: `${fmtCompact(usage?.prompt_tokens ?? 0)} in \xB7 ${fmtCompact(usage?.completion_tokens ?? 0)} out`,
+          tone: "success"
         }
-      )))))), /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Daily Token Usage"), loading ? /* @__PURE__ */ import_react4.default.createElement(ChartSkeleton, null) : dailyData.length === 0 ? /* @__PURE__ */ import_react4.default.createElement(EmptyChart, null) : /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { height: 260 }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.AreaChart, { data: dailyData }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: "date", tick: tickStyle }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: tickStyle, tickFormatter: fmtInt }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { formatter: (v) => [fmtInt(v), void 0] }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, null), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Area, { type: "monotone", dataKey: "promptTokens", name: "Input (prompt)", stackId: "tok", stroke: "#8884d8", fill: "#8884d8", fillOpacity: 0.5 }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Area, { type: "monotone", dataKey: "completionTokens", name: "Output (completion)", stackId: "tok", stroke: "#82ca9d", fill: "#82ca9d", fillOpacity: 0.5 }))))), /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Daily Requests"), loading ? /* @__PURE__ */ import_react4.default.createElement(ChartSkeleton, null) : dailyData.length === 0 ? /* @__PURE__ */ import_react4.default.createElement(EmptyChart, null) : /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { height: 260 }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.BarChart, { data: dailyData }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: "date", tick: tickStyle }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: tickStyle }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, null), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, null), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Bar, { dataKey: "successfulRequests", name: "Successful", fill: "#82ca9d", stackId: "r" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Bar, { dataKey: "failedRequests", name: "Failed", fill: "#e57373", stackId: "r" }))))), /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Daily Success Rate"), loading ? /* @__PURE__ */ import_react4.default.createElement(ChartSkeleton, null) : successRateData.length === 0 ? /* @__PURE__ */ import_react4.default.createElement(EmptyChart, null) : /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { height: 260 }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.LineChart, { data: successRateData }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: "date", tick: tickStyle }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { domain: [0, 100], tick: tickStyle, tickFormatter: (v) => `${v}%` }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { formatter: (v) => [`${v}%`, "Success rate"] }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.ReferenceLine, { y: 100, stroke: "#82ca9d", strokeDasharray: "4 2" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Line, { type: "monotone", dataKey: "successRate", name: "Success rate", stroke: "#8884d8", dot: { r: 3 } }))))), (maxBudget > 0 || cumulativeData.length > 0) && /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Cumulative Spend", maxBudget > 0 ? ` vs Budget (${fmtUsd(maxBudget)})` : "", maxBudget > 0 && /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { component: "span", variant: "caption", color: "text.secondary", sx: { ml: 1 } }, fmtUsd(totalCumSpend), " used \xB7 ", fmtUsd(Math.max(0, maxBudget - totalCumSpend)), " remaining")), loading ? /* @__PURE__ */ import_react4.default.createElement(ChartSkeleton, { height: 180 }) : cumulativeData.length === 0 ? /* @__PURE__ */ import_react4.default.createElement(EmptyChart, { height: 180 }) : /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { height: 180 }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.AreaChart, { data: cumulativeData }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: "date", tick: tickStyle }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: tickStyle, tickFormatter: (v) => `$${v.toFixed(2)}` }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { formatter: (v) => [`$${v.toFixed(4)}`, "Cumulative spend"] }), maxBudget > 0 && /* @__PURE__ */ import_react4.default.createElement(import_recharts.ReferenceLine, { y: maxBudget, stroke: "#e57373", strokeDasharray: "6 3", label: { value: `Budget ${fmtUsd(maxBudget)}`, position: "insideTopRight", fontSize: 11 } }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Area, { type: "monotone", dataKey: "cumulative", name: "Cumulative spend", stroke: "#ffc658", fill: "#ffc658", fillOpacity: 0.3 })))))), tab === "models" && /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { container: true, spacing: 3 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Spend by Model"), loading ? /* @__PURE__ */ import_react4.default.createElement(ChartSkeleton, null) : topModelSpendBars.length === 0 ? /* @__PURE__ */ import_react4.default.createElement(EmptyChart, null) : /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { height: Math.max(200, topModelSpendBars.length * 36) }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.BarChart, { data: topModelSpendBars, layout: "vertical", margin: { left: 20 } }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { type: "number", tick: tickStyle, tickFormatter: (v) => `$${v.toFixed(2)}` }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { type: "category", dataKey: "model", tick: tickStyleSmall, width: 200 }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { formatter: (v) => [fmtUsd(v), "Spend"] }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Bar, { dataKey: "spend", name: "Spend", radius: [0, 4, 4, 0] }, topModelSpendBars.map((r) => /* @__PURE__ */ import_react4.default.createElement("rect", { key: r.model, fill: modelColor(r.model) }))))))), /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Tokens by Model"), loading ? /* @__PURE__ */ import_react4.default.createElement(ChartSkeleton, null) : modelRows.length === 0 ? /* @__PURE__ */ import_react4.default.createElement(EmptyChart, null) : /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { height: 260 }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.BarChart, { data: modelRows }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: "model", tick: tickStyleTiny, interval: 0, angle: -15, textAnchor: "end", height: 60 }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: tickStyle }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, null), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, null), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Bar, { dataKey: "promptTokens", name: "Prompt", fill: "#8884d8", stackId: "t" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Bar, { dataKey: "completionTokens", name: "Completion", fill: "#82ca9d", stackId: "t" }))))), /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableContainer, { component: import_material4.Paper, variant: "outlined" }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Table, { size: "small" }, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableHead, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableRow, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, "Model"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, "Spend"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, "Requests"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, "Success"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, "Failed"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, "Prompt"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, "Completion"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { sx: { minWidth: 120 } }, "Success rate"))), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableBody, null, loading ? /* @__PURE__ */ import_react4.default.createElement(import_material4.TableRow, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { colSpan: 8 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.LinearProgress, null))) : modelRows.length === 0 ? /* @__PURE__ */ import_react4.default.createElement(import_material4.TableRow, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { colSpan: 8, align: "center" }, "No model activity")) : [...modelRows].sort((a, b) => b.spend - a.spend || b.totalTokens - a.totalTokens).map((r) => /* @__PURE__ */ import_react4.default.createElement(import_material4.TableRow, { key: r.model }, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", alignItems: "center", gap: 0.75 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { sx: { width: 10, height: 10, borderRadius: "50%", bgcolor: modelColor(r.model), flexShrink: 0 } }), r.model)), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, fmtInt(r.successfulRequests)), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, fmtInt(r.promptTokens)), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, fmtInt(r.completionTokens)), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, r.apiRequests > 0 ? /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react4.default.createElement(
-        import_material4.LinearProgress,
-        {
-          variant: "determinate",
-          value: r.successRate * 100,
-          sx: { flex: 1, height: 6, borderRadius: 3 }
+      ];
+      const renderKeyRows = () => {
+        if (loading) {
+          return /* @__PURE__ */ import_react5.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { colSpan: 7, sx: { py: 3 } }, /* @__PURE__ */ import_react5.default.createElement(import_Skeleton3.default, { variant: "rounded", height: 80 })));
         }
-      ), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "caption" }, fmtPct(r.successRate))) : "\u2014")))))))), tab === "keys" && /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { container: true, spacing: 3 }, (loading || topKeySpendBars.length > 0) && /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Spend by Key"), loading ? /* @__PURE__ */ import_react4.default.createElement(ChartSkeleton, null) : /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { height: Math.max(160, topKeySpendBars.length * 36) }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.BarChart, { data: topKeySpendBars, layout: "vertical", margin: { left: 20 } }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { type: "number", tick: tickStyle, tickFormatter: (v) => `$${v.toFixed(2)}` }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { type: "category", dataKey: "keyAlias", tick: tickStyleSmall, width: 160 }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { formatter: (v) => [fmtUsd(v), "Spend"] }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Bar, { dataKey: "spend", name: "Spend", fill: "#8884d8", radius: [0, 4, 4, 0] }))))), /* @__PURE__ */ import_react4.default.createElement(import_material4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableContainer, { component: import_material4.Paper, variant: "outlined" }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Table, { size: "small" }, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableHead, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableRow, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, "Key"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, "Models"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, "Spend"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, "Requests"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, "Tokens"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, "Failed"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { sx: { minWidth: 120 } }, "Success rate"))), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableBody, null, loading ? /* @__PURE__ */ import_react4.default.createElement(import_material4.TableRow, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { colSpan: 7 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.LinearProgress, null))) : keyRows.length === 0 ? /* @__PURE__ */ import_react4.default.createElement(import_material4.TableRow, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { colSpan: 7, align: "center" }, "No key activity")) : [...keyRows].sort((a, b) => b.spend - a.spend || b.apiRequests - a.apiRequests).map((r) => /* @__PURE__ */ import_react4.default.createElement(import_material4.TableRow, { key: r.keyHash }, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "body2" }, r.keyAlias), r.teamId ? /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "caption", color: "text.secondary" }, "team: ", r.teamId) : null), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", gap: 0.5, flexWrap: "wrap" }, r.models.map((m) => /* @__PURE__ */ import_react4.default.createElement(import_material4.Chip, { key: m, label: m, size: "small", variant: "outlined" })))), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, fmtInt(r.totalTokens)), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, r.apiRequests > 0 ? /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react4.default.createElement(
-        import_material4.LinearProgress,
-        {
-          variant: "determinate",
-          value: r.successRate * 100,
-          sx: { flex: 1, height: 6, borderRadius: 3 }
+        if (keyRows.length === 0) {
+          return /* @__PURE__ */ import_react5.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { colSpan: 7 }, /* @__PURE__ */ import_react5.default.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__ */ import_react5.default.createElement(import_TableRow2.default, { key: r.keyHash }, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "body2", sx: { fontWeight: 600 } }, r.keyAlias), r.teamId ? /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "caption", color: "text.secondary" }, "team: ", r.teamId) : null), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, { display: "flex", gap: 0.5, flexWrap: "wrap" }, r.models.slice(0, 3).map((m) => /* @__PURE__ */ import_react5.default.createElement(TagChip, { key: m, label: m, title: m })), r.models.length > 3 && /* @__PURE__ */ import_react5.default.createElement(TagChip, { label: `+${r.models.length - 3}`, mono: false }))), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtCompact(r.totalTokens)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react5.default.createElement(SuccessRateCell, { rate: r.successRate, requests: r.apiRequests }))));
+      };
+      const renderModelRows = () => {
+        if (loading) {
+          return /* @__PURE__ */ import_react5.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { colSpan: 8, sx: { py: 3 } }, /* @__PURE__ */ import_react5.default.createElement(import_Skeleton3.default, { variant: "rounded", height: 80 })));
+        }
+        if (modelRows.length === 0) {
+          return /* @__PURE__ */ import_react5.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { colSpan: 8 }, /* @__PURE__ */ import_react5.default.createElement(EmptyState, { message: "No model activity in this period" })));
         }
-      ), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "caption" }, fmtPct(r.successRate))) : "\u2014")))))))));
+        return [...modelRows].sort((a, b) => b.spend - a.spend || b.totalTokens - a.totalTokens).map((r) => /* @__PURE__ */ import_react5.default.createElement(import_TableRow2.default, { key: r.model }, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, { sx: { width: 8, height: 8, borderRadius: "50%", bgcolor: chartColor(r.model), flexShrink: 0 } }), /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "body2", sx: { fontWeight: 600 } }, r.model))), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.successfulRequests)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtCompact(r.promptTokens)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtCompact(r.completionTokens)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react5.default.createElement(SuccessRateCell, { rate: r.successRate, requests: r.apiRequests }))));
+      };
+      const periodSelect = /* @__PURE__ */ import_react5.default.createElement(
+        import_TextField3.default,
+        {
+          select: true,
+          size: "small",
+          label: "Period",
+          value: selectedPreset,
+          onChange: (e) => handlePresetChange(e.target.value),
+          sx: { minWidth: 160 }
+        },
+        Object.keys(PRESET_LABELS).map((p) => /* @__PURE__ */ import_react5.default.createElement(import_MenuItem2.default, { key: p, value: p }, PRESET_LABELS[p]))
+      );
+      return /* @__PURE__ */ import_react5.default.createElement(
+        SectionCard,
+        {
+          title: "Usage Analytics",
+          subtitle: `${PRESET_LABELS[selectedPreset]} \xB7 ${dateRange.start.toLocaleDateString()} \u2013 ${dateRange.end.toLocaleDateString()}`,
+          actions: periodSelect
+        },
+        /* @__PURE__ */ import_react5.default.createElement(MetricStrip, { metrics }),
+        /* @__PURE__ */ import_react5.default.createElement(
+          import_Box5.default,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 2,
+              flexWrap: "wrap",
+              mt: 2.5,
+              mb: 2
+            }
+          },
+          /* @__PURE__ */ import_react5.default.createElement(
+            SegmentedControl,
+            {
+              value: tab,
+              onChange: setTab,
+              options: [
+                { value: "costs", label: "Costs" },
+                { value: "models", label: "Model Activity" },
+                { value: "keys", label: "Key Activity" }
+              ]
+            }
+          ),
+          tab === "models" && /* @__PURE__ */ import_react5.default.createElement(
+            import_TextField3.default,
+            {
+              select: true,
+              size: "small",
+              label: "Model",
+              value: selectedModel,
+              onChange: (e) => setSelectedModel(e.target.value),
+              sx: { minWidth: 220 }
+            },
+            /* @__PURE__ */ import_react5.default.createElement(import_MenuItem2.default, { value: "all" }, "All models"),
+            models.map((m) => /* @__PURE__ */ import_react5.default.createElement(import_MenuItem2.default, { key: m.model_name, value: m.model_name }, m.model_name))
+          )
+        ),
+        tab === "costs" && /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { container: true, spacing: 2 }, /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12 }, /* @__PURE__ */ import_react5.default.createElement(ChartCard, { title: "Daily spend by model", height: 260 }, /* @__PURE__ */ import_react5.default.createElement(ChartOrFallback, { loading, empty: modelSpendByDate.length === 0, height: 260 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.AreaChart, { data: modelSpendByDate, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.YAxis, { tickFormatter: fmtUsdCompact, width: 56, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(
+          import_recharts.Tooltip,
+          {
+            cursor: chart.cursor,
+            content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: fmtUsd, hideZero: true })
+          }
+        ), topSpendModels.map((m) => /* @__PURE__ */ import_react5.default.createElement(
+          import_recharts.Area,
+          {
+            key: m,
+            type: "monotone",
+            dataKey: m,
+            stackId: "spend",
+            stroke: chartColor(m),
+            strokeWidth: 1.5,
+            fill: chartColor(m),
+            fillOpacity: 0.28
+          }
+        ))))), !loading && topSpendModels.length > 0 && /* @__PURE__ */ import_react5.default.createElement(SeriesLegend, { series: topSpendModels.map((m) => ({ name: m, color: chartColor(m) })) }))), /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react5.default.createElement(ChartCard, { title: "Daily token usage" }, /* @__PURE__ */ import_react5.default.createElement(ChartOrFallback, { loading, empty: dailyData.length === 0 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.AreaChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.YAxis, { tickFormatter: fmtCompact, width: 48, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: fmtInt }) }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Legend, { ...chart.legend }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Area, { type: "monotone", dataKey: "promptTokens", name: "Input", stackId: "tok", stroke: SERIES.input, strokeWidth: 1.5, fill: SERIES.input, fillOpacity: 0.25 }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Area, { type: "monotone", dataKey: "completionTokens", name: "Output", stackId: "tok", stroke: SERIES.output, strokeWidth: 1.5, fill: SERIES.output, fillOpacity: 0.25 })))))), /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react5.default.createElement(ChartCard, { title: "Daily requests" }, /* @__PURE__ */ import_react5.default.createElement(ChartOrFallback, { loading, empty: dailyData.length === 0 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.BarChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 }, barCategoryGap: "30%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.YAxis, { tickFormatter: fmtCompact, width: 48, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: fmtInt }) }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Legend, { ...chart.legend }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Bar, { dataKey: "successfulRequests", name: "Successful", fill: SERIES.success, stackId: "r" }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Bar, { dataKey: "failedRequests", name: "Failed", fill: SERIES.failure, stackId: "r", radius: [3, 3, 0, 0] })))))), /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react5.default.createElement(ChartCard, { title: "Daily success rate" }, /* @__PURE__ */ import_react5.default.createElement(ChartOrFallback, { loading, empty: successRateData.length === 0 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.LineChart, { data: successRateData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.YAxis, { domain: [0, 100], tickFormatter: (v) => `${v}%`, width: 44, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(
+          import_recharts.Tooltip,
+          {
+            cursor: chart.cursor,
+            content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: (v) => `${v}%` })
+          }
+        ), /* @__PURE__ */ import_react5.default.createElement(import_recharts.ReferenceLine, { y: 100, stroke: SERIES.success, strokeDasharray: "4 4", strokeOpacity: 0.5 }), /* @__PURE__ */ import_react5.default.createElement(
+          import_recharts.Line,
+          {
+            type: "monotone",
+            dataKey: "successRate",
+            name: "Success rate",
+            stroke: SERIES.input,
+            strokeWidth: 2,
+            dot: { r: 2.5, strokeWidth: 0, fill: SERIES.input },
+            activeDot: { r: 4 }
+          }
+        )))))), /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react5.default.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__ */ import_react5.default.createElement(ChartOrFallback, { loading, empty: cumulativeData.length === 0 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.AreaChart, { data: cumulativeData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(
+            import_recharts.YAxis,
+            {
+              tickFormatter: fmtUsdCompact,
+              width: 56,
+              domain: cumulativeDomain,
+              ...chart.axis
+            }
+          ), /* @__PURE__ */ import_react5.default.createElement(
+            import_recharts.Tooltip,
+            {
+              cursor: chart.cursor,
+              content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: fmtUsd })
+            }
+          ), maxBudget > 0 && /* @__PURE__ */ import_react5.default.createElement(
+            import_recharts.ReferenceLine,
+            {
+              y: maxBudget,
+              stroke: SERIES.budget,
+              strokeDasharray: "5 4",
+              label: { value: `Budget ${fmtUsd(maxBudget)}`, position: "insideTopRight", fontSize: 10, fill: SERIES.budget }
+            }
+          ), /* @__PURE__ */ import_react5.default.createElement(
+            import_recharts.Area,
+            {
+              type: "monotone",
+              dataKey: "cumulative",
+              name: "Cumulative spend",
+              stroke: SERIES.spend,
+              strokeWidth: 2,
+              fill: SERIES.spend,
+              fillOpacity: 0.18
+            }
+          ))))
+        ))),
+        tab === "models" && /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { container: true, spacing: 2 }, /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react5.default.createElement(ChartCard, { title: "Spend by model", height: Math.max(200, topModelSpendBars.length * 34) }, /* @__PURE__ */ import_react5.default.createElement(
+          ChartOrFallback,
+          {
+            loading,
+            empty: topModelSpendBars.length === 0,
+            height: Math.max(200, topModelSpendBars.length * 34)
+          },
+          /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.BarChart, { data: topModelSpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { type: "number", tickFormatter: fmtUsdCompact, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.YAxis, { type: "category", dataKey: "model", width: 170, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Bar, { dataKey: "spend", name: "Spend", radius: [0, 3, 3, 0], barSize: 14 }, topModelSpendBars.map((r) => /* @__PURE__ */ import_react5.default.createElement(import_recharts.Cell, { key: r.model, fill: chartColor(r.model) })))))
+        ))), /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react5.default.createElement(ChartCard, { title: "Tokens by model", height: Math.max(200, topModelSpendBars.length * 34) }, /* @__PURE__ */ import_react5.default.createElement(
+          ChartOrFallback,
+          {
+            loading,
+            empty: modelRows.length === 0,
+            height: Math.max(200, topModelSpendBars.length * 34)
+          },
+          /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.BarChart, { data: topModelSpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { type: "number", tickFormatter: fmtCompact, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.YAxis, { type: "category", dataKey: "model", width: 170, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: fmtInt, labelFormatter: (l) => l }) }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Legend, { ...chart.legend }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Bar, { dataKey: "promptTokens", name: "Input", fill: SERIES.input, stackId: "t", barSize: 14 }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Bar, { dataKey: "completionTokens", name: "Output", fill: SERIES.output, stackId: "t", barSize: 14, radius: [0, 3, 3, 0] })))
+        ))), /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12 }, /* @__PURE__ */ import_react5.default.createElement(import_TableContainer2.default, { component: import_Paper3.default, variant: "outlined", sx: { borderRadius: 2 } }, /* @__PURE__ */ import_react5.default.createElement(import_Table2.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react5.default.createElement(import_TableHead2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, "Model"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Spend"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Requests"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Success"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Failed"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Input"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Output"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { sx: { width: 160 } }, "Success rate"))), /* @__PURE__ */ import_react5.default.createElement(import_TableBody2.default, null, renderModelRows()))))),
+        tab === "keys" && /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { container: true, spacing: 2 }, (loading || topKeySpendBars.length > 0) && /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12 }, /* @__PURE__ */ import_react5.default.createElement(ChartCard, { title: "Spend by key", height: Math.max(160, topKeySpendBars.length * 32) }, /* @__PURE__ */ import_react5.default.createElement(
+          ChartOrFallback,
+          {
+            loading,
+            empty: topKeySpendBars.length === 0,
+            height: Math.max(160, topKeySpendBars.length * 32)
+          },
+          /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.BarChart, { data: topKeySpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { type: "number", tickFormatter: fmtUsdCompact, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.YAxis, { type: "category", dataKey: "keyAlias", width: 160, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Bar, { dataKey: "spend", name: "Spend", fill: SERIES.input, radius: [0, 3, 3, 0], barSize: 14 })))
+        ))), /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12 }, /* @__PURE__ */ import_react5.default.createElement(import_TableContainer2.default, { component: import_Paper3.default, variant: "outlined", sx: { borderRadius: 2 } }, /* @__PURE__ */ import_react5.default.createElement(import_Table2.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react5.default.createElement(import_TableHead2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, "Key"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, "Models"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Spend"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Requests"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Tokens"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Failed"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { sx: { width: 160 } }, "Success rate"))), /* @__PURE__ */ import_react5.default.createElement(import_TableBody2.default, null, renderKeyRows())))))
+      );
     };
   }
 });
 
 // src/components/TeamUsage.tsx
-var import_react5, import_material5, import_icons_material4, import_recharts2, Stat, TeamCard, TeamUsage;
+function budgetTone2(isOver, isNear) {
+  if (isOver) return "danger";
+  if (isNear) return "warning";
+  return "accent";
+}
+var import_react6, import_Paper4, import_Box6, import_Typography6, import_Skeleton4, import_Divider2, import_Table3, import_TableBody3, import_TableCell3, import_TableHead3, import_TableRow3, import_TableContainer3, import_Collapse, import_IconButton3, import_CircularProgress3, import_styles4, import_icons_material4, import_recharts2, fmtUsd2, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
     "use strict";
-    import_react5 = __toESM(require("react"));
-    import_material5 = require("@mui/material");
+    import_react6 = __toESM(require("react"));
+    import_Paper4 = __toESM(require("@mui/material/Paper"));
+    import_Box6 = __toESM(require("@mui/material/Box"));
+    import_Typography6 = __toESM(require("@mui/material/Typography"));
+    import_Skeleton4 = __toESM(require("@mui/material/Skeleton"));
+    import_Divider2 = __toESM(require("@mui/material/Divider"));
+    import_Table3 = __toESM(require("@mui/material/Table"));
+    import_TableBody3 = __toESM(require("@mui/material/TableBody"));
+    import_TableCell3 = __toESM(require("@mui/material/TableCell"));
+    import_TableHead3 = __toESM(require("@mui/material/TableHead"));
+    import_TableRow3 = __toESM(require("@mui/material/TableRow"));
+    import_TableContainer3 = __toESM(require("@mui/material/TableContainer"));
+    import_Collapse = __toESM(require("@mui/material/Collapse"));
+    import_IconButton3 = __toESM(require("@mui/material/IconButton"));
+    import_CircularProgress3 = __toESM(require("@mui/material/CircularProgress"));
+    import_styles4 = require("@mui/material/styles");
     import_icons_material4 = require("@mui/icons-material");
     import_recharts2 = require("recharts");
-    Stat = ({ label, value }) => /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, null, /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "body2", fontWeight: 600, sx: { fontFamily: "monospace" } }, value));
+    init_ui();
+    fmtUsd2 = (n) => `$${(n ?? 0).toFixed(2)}`;
     TeamCard = ({ team, usage, usageLoading }) => {
-      const [expanded, setExpanded] = (0, import_react5.useState)(false);
-      const theme = (0, import_material5.useTheme)();
-      const gridStroke = theme.palette.divider;
-      const tickFill = theme.palette.text.secondary;
+      const [expanded, setExpanded] = (0, import_react6.useState)(false);
+      const chart = useChartTheme();
       const budget = team.max_budget ?? 0;
       const spend = team.spend ?? 0;
       const budgetPct = budget > 0 ? Math.min(spend / budget * 100, 100) : 0;
       const isOver = budget > 0 && spend >= budget;
       const isNear = budget > 0 && spend >= budget * 0.8 && !isOver;
       const dailyData = usage?.daily_usage?.map((d) => ({ date: d.date, spend: d.spend })) ?? [];
-      return /* @__PURE__ */ import_react5.default.createElement(import_material5.Paper, { variant: "outlined", sx: { p: 2, mb: 2 } }, /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react5.default.createElement(import_icons_material4.Group, { color: "action" }), /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, { flexGrow: 1 }, /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "subtitle1", fontWeight: 600 }, team.team_alias || "Untitled team"), /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "caption", color: "text.secondary", sx: { fontFamily: "monospace" } }, team.team_id)), /* @__PURE__ */ import_react5.default.createElement(import_material5.IconButton, { size: "small", onClick: () => setExpanded((e) => !e), "aria-label": "toggle details" }, expanded ? /* @__PURE__ */ import_react5.default.createElement(import_icons_material4.ExpandLess, null) : /* @__PURE__ */ import_react5.default.createElement(import_icons_material4.ExpandMore, null))), /* @__PURE__ */ import_react5.default.createElement(import_material5.Stack, { direction: "row", spacing: 3, mt: 1.5, flexWrap: "wrap", useFlexGap: true, gap: 1.5 }, /* @__PURE__ */ import_react5.default.createElement(
-        Stat,
-        {
-          label: "Members",
-          value: team.members_with_roles?.length ? String(team.members_with_roles.length) : "\u2014"
-        }
-      ), /* @__PURE__ */ import_react5.default.createElement(
-        Stat,
-        {
-          label: "Models",
-          value: team.models?.length ? String(team.models.length) : "All"
+      const renderDailySpendSection = () => {
+        if (usageLoading) {
+          return /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { display: "flex", justifyContent: "center", py: 3 }, /* @__PURE__ */ import_react6.default.createElement(import_CircularProgress3.default, { size: 22 }));
         }
-      ), /* @__PURE__ */ import_react5.default.createElement(
-        Stat,
-        {
-          label: "Budget",
-          value: budget > 0 ? `$${budget.toFixed(2)}` : "Unlimited"
-        }
-      ), /* @__PURE__ */ import_react5.default.createElement(
-        Stat,
-        {
-          label: "Spend",
-          value: `$${spend.toFixed(2)}`
-        }
-      ), /* @__PURE__ */ import_react5.default.createElement(
-        Stat,
-        {
-          label: "TPM",
-          value: team.tpm_limit != null && team.tpm_limit > 0 ? String(team.tpm_limit) : "\u2014"
-        }
-      ), /* @__PURE__ */ import_react5.default.createElement(
-        Stat,
+        if (dailyData.length === 0) return null;
+        return /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { mb: 2.5 }, /* @__PURE__ */ import_react6.default.createElement(
+          import_Typography6.default,
+          {
+            variant: "caption",
+            color: "text.secondary",
+            sx: { display: "block", fontSize: 11, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase", mb: 1 }
+          },
+          "Daily spend"
+        ), /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { height: 150 }, /* @__PURE__ */ import_react6.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react6.default.createElement(import_recharts2.AreaChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react6.default.createElement(import_recharts2.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react6.default.createElement(import_recharts2.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(import_recharts2.YAxis, { tickFormatter: fmtUsdCompact, width: 52, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(
+          import_recharts2.Tooltip,
+          {
+            cursor: chart.cursor,
+            content: /* @__PURE__ */ import_react6.default.createElement(ChartTooltip, { valueFormatter: (v) => `$${v.toFixed(4)}` })
+          }
+        ), /* @__PURE__ */ import_react6.default.createElement(
+          import_recharts2.Area,
+          {
+            type: "monotone",
+            dataKey: "spend",
+            name: "Spend",
+            stroke: SERIES.spend,
+            strokeWidth: 2,
+            fill: SERIES.spend,
+            fillOpacity: 0.18
+          }
+        )))));
+      };
+      const sectionLabel = (label) => /* @__PURE__ */ import_react6.default.createElement(
+        import_Typography6.default,
         {
-          label: "RPM",
-          value: team.rpm_limit != null && team.rpm_limit > 0 ? String(team.rpm_limit) : "\u2014"
-        }
-      )), budget > 0 && /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, { mt: 1.5 }, /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, { display: "flex", justifyContent: "space-between", mb: 0.5 }, /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "body2" }, "$", spend.toFixed(2), " / $", budget.toFixed(2)), isOver && /* @__PURE__ */ import_react5.default.createElement(import_material5.Chip, { label: "Over Budget", size: "small", color: "error" }), isNear && /* @__PURE__ */ import_react5.default.createElement(import_material5.Chip, { label: "Near Limit", size: "small", color: "warning" })), /* @__PURE__ */ import_react5.default.createElement(
-        import_material5.LinearProgress,
+          variant: "caption",
+          color: "text.secondary",
+          sx: { display: "block", fontSize: 11, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase", mb: 1 }
+        },
+        label
+      );
+      return /* @__PURE__ */ import_react6.default.createElement(import_Paper4.default, { variant: "outlined", sx: { borderRadius: 2, p: 2.5 } }, /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { display: "flex", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ import_react6.default.createElement(
+        import_Box6.default,
         {
-          variant: "determinate",
-          value: budgetPct,
-          color: isOver ? "error" : isNear ? "warning" : "primary",
-          sx: { height: 6, borderRadius: 1 }
-        }
-      )), /* @__PURE__ */ import_react5.default.createElement(import_material5.Collapse, { in: expanded }, /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, { mt: 2 }, /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ import_react5.default.createElement(import_icons_material4.Speed, { fontSize: "small", color: "action" }), /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "subtitle2", color: "text.secondary" }, "Rate limits")), /* @__PURE__ */ import_react5.default.createElement(import_material5.Stack, { direction: "row", spacing: 3, flexWrap: "wrap", useFlexGap: true, gap: 1.5, mb: 2 }, /* @__PURE__ */ import_react5.default.createElement(Stat, { label: "TPM limit", value: team.tpm_limit != null && team.tpm_limit > 0 ? String(team.tpm_limit) : "Unlimited" }), /* @__PURE__ */ import_react5.default.createElement(Stat, { label: "RPM limit", value: team.rpm_limit != null && team.rpm_limit > 0 ? String(team.rpm_limit) : "Unlimited" }), /* @__PURE__ */ import_react5.default.createElement(Stat, { label: "Max budget", value: budget > 0 ? `$${budget.toFixed(2)}` : "Unlimited" })), /* @__PURE__ */ import_react5.default.createElement(import_material5.Divider, { sx: { mb: 2 } }), /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Models"), team.models?.length ? /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, { display: "flex", gap: 0.5, flexWrap: "wrap", mb: 2 }, team.models.map((m) => /* @__PURE__ */ import_react5.default.createElement(import_material5.Chip, { key: m, label: m, size: "small", variant: "outlined" }))) : /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "body2", color: "text.secondary", mb: 2 }, "All models allowed"), /* @__PURE__ */ import_react5.default.createElement(import_material5.Divider, { sx: { mb: 2 } }), usageLoading ? /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, { display: "flex", justifyContent: "center", p: 2 }, /* @__PURE__ */ import_react5.default.createElement(import_material5.CircularProgress, { size: 24 })) : dailyData.length > 0 ? /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Daily Spend"), /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, { height: 160, mb: 2 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts2.AreaChart, { data: dailyData }, /* @__PURE__ */ import_react5.default.createElement(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }), /* @__PURE__ */ import_react5.default.createElement(import_recharts2.XAxis, { dataKey: "date", tick: { fontSize: 11, fill: tickFill } }), /* @__PURE__ */ import_react5.default.createElement(import_recharts2.YAxis, { tick: { fontSize: 11, fill: tickFill }, tickFormatter: (v) => `$${v.toFixed(2)}` }), /* @__PURE__ */ import_react5.default.createElement(import_recharts2.Tooltip, { formatter: (v) => [`$${v.toFixed(4)}`, "Spend"] }), /* @__PURE__ */ import_react5.default.createElement(import_recharts2.Area, { type: "monotone", dataKey: "spend", stroke: "#8884d8", fill: "#8884d8", fillOpacity: 0.3 })))), /* @__PURE__ */ import_react5.default.createElement(import_material5.Divider, { sx: { mb: 2 } })) : null, /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ import_react5.default.createElement(import_icons_material4.Memory, { fontSize: "small", color: "action" }), /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "subtitle2", color: "text.secondary" }, "Members")), team.members_with_roles?.length ? /* @__PURE__ */ import_react5.default.createElement(import_material5.TableContainer, null, /* @__PURE__ */ import_react5.default.createElement(import_material5.Table, { size: "small" }, /* @__PURE__ */ import_react5.default.createElement(import_material5.TableHead, null, /* @__PURE__ */ import_react5.default.createElement(import_material5.TableRow, null, /* @__PURE__ */ import_react5.default.createElement(import_material5.TableCell, null, "User"), /* @__PURE__ */ import_react5.default.createElement(import_material5.TableCell, null, "Role"))), /* @__PURE__ */ import_react5.default.createElement(import_material5.TableBody, null, team.members_with_roles.map((m) => /* @__PURE__ */ import_react5.default.createElement(import_material5.TableRow, { key: m.user_id }, /* @__PURE__ */ import_react5.default.createElement(import_material5.TableCell, null, m.user_email ? /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "body2" }, m.user_email), /* @__PURE__ */ import_react5.default.createElement(
-        import_material5.Typography,
+          sx: (theme) => ({
+            width: 36,
+            height: 36,
+            borderRadius: 1.5,
+            flexShrink: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            bgcolor: (0, import_styles4.alpha)(theme.palette.primary.main, 0.1),
+            color: theme.palette.primary.main
+          })
+        },
+        /* @__PURE__ */ import_react6.default.createElement(import_icons_material4.Group, { fontSize: "small" })
+      ), /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { flexGrow: 1, minWidth: 0 }, /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "subtitle1", sx: { fontWeight: 600, lineHeight: 1.3 } }, team.team_alias || "Untitled team"), /* @__PURE__ */ import_react6.default.createElement(
+        import_Typography6.default,
         {
           variant: "caption",
           color: "text.secondary",
-          sx: { fontFamily: "monospace" }
+          sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 }
         },
-        m.user_id
-      )) : /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "body2", sx: { fontFamily: "monospace" } }, m.user_id)), /* @__PURE__ */ import_react5.default.createElement(import_material5.TableCell, null, /* @__PURE__ */ import_react5.default.createElement(
-        import_material5.Chip,
+        team.team_id
+      )), isOver && /* @__PURE__ */ import_react6.default.createElement(StatusPill, { label: "Over budget", tone: "danger" }), isNear && /* @__PURE__ */ import_react6.default.createElement(StatusPill, { label: "Near limit", tone: "warning" }), /* @__PURE__ */ import_react6.default.createElement(
+        import_IconButton3.default,
         {
-          label: m.role,
           size: "small",
-          color: m.role === "admin" ? "primary" : "default"
-        }
-      ))))))) : /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "body2", color: "text.secondary" }, "No members assigned."))));
+          onClick: () => setExpanded((e) => !e),
+          "aria-label": expanded ? "Hide team details" : "Show team details",
+          "aria-expanded": expanded,
+          sx: (theme) => ({
+            color: theme.palette.text.secondary,
+            transform: expanded ? "rotate(180deg)" : "none",
+            transition: theme.transitions.create("transform")
+          })
+        },
+        /* @__PURE__ */ import_react6.default.createElement(import_icons_material4.ExpandMore, null)
+      )), /* @__PURE__ */ import_react6.default.createElement(
+        import_Box6.default,
+        {
+          sx: {
+            display: "grid",
+            gridTemplateColumns: { xs: "repeat(3, minmax(0, 1fr))", sm: "repeat(6, minmax(0, 1fr))" },
+            gap: 2,
+            mt: 2.5,
+            maxWidth: 640
+          }
+        },
+        /* @__PURE__ */ import_react6.default.createElement(Stat, { label: "Members", value: team.members_with_roles?.length ?? "\u2014" }),
+        /* @__PURE__ */ import_react6.default.createElement(Stat, { label: "Models", value: team.models?.length ? team.models.length : "All" }),
+        /* @__PURE__ */ import_react6.default.createElement(Stat, { label: "Budget", value: budget > 0 ? fmtUsd2(budget) : "Unlimited" }),
+        /* @__PURE__ */ import_react6.default.createElement(Stat, { label: "Spend", value: fmtUsd2(spend) }),
+        /* @__PURE__ */ import_react6.default.createElement(Stat, { label: "TPM", value: team.tpm_limit && team.tpm_limit > 0 ? team.tpm_limit.toLocaleString() : "\u2014" }),
+        /* @__PURE__ */ import_react6.default.createElement(Stat, { label: "RPM", value: team.rpm_limit && team.rpm_limit > 0 ? team.rpm_limit.toLocaleString() : "\u2014" })
+      ), budget > 0 && /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, fmtUsd2(spend), " of ", fmtUsd2(budget)), /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "%")), /* @__PURE__ */ import_react6.default.createElement(Meter, { value: budgetPct, tone: budgetTone2(isOver, isNear), height: 5 })), /* @__PURE__ */ import_react6.default.createElement(import_Collapse.default, { in: expanded, unmountOnExit: true }, /* @__PURE__ */ import_react6.default.createElement(import_Divider2.default, { sx: { my: 2.5 } }), /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { mb: 2.5 }, sectionLabel("Models"), team.models?.length ? /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { display: "flex", gap: 0.5, flexWrap: "wrap" }, team.models.map((m) => /* @__PURE__ */ import_react6.default.createElement(TagChip, { key: m, label: m, title: m }))) : /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "body2", color: "text.secondary" }, "All models allowed")), renderDailySpendSection(), /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, null, sectionLabel("Members"), team.members_with_roles?.length ? /* @__PURE__ */ import_react6.default.createElement(
+        import_TableContainer3.default,
+        {
+          component: import_Paper4.default,
+          variant: "outlined",
+          sx: { borderRadius: 1.5 }
+        },
+        /* @__PURE__ */ import_react6.default.createElement(import_Table3.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react6.default.createElement(import_TableHead3.default, null, /* @__PURE__ */ import_react6.default.createElement(import_TableRow3.default, null, /* @__PURE__ */ import_react6.default.createElement(import_TableCell3.default, null, "User"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell3.default, { align: "right" }, "Role"))), /* @__PURE__ */ import_react6.default.createElement(import_TableBody3.default, null, team.members_with_roles.map((m) => /* @__PURE__ */ import_react6.default.createElement(import_TableRow3.default, { key: m.user_id }, /* @__PURE__ */ import_react6.default.createElement(import_TableCell3.default, null, m.user_email ? /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "body2" }, m.user_email), /* @__PURE__ */ import_react6.default.createElement(
+          import_Typography6.default,
+          {
+            variant: "caption",
+            color: "text.secondary",
+            sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 }
+          },
+          m.user_id
+        )) : /* @__PURE__ */ import_react6.default.createElement(
+          import_Typography6.default,
+          {
+            variant: "body2",
+            sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }
+          },
+          m.user_id
+        )), /* @__PURE__ */ import_react6.default.createElement(import_TableCell3.default, { align: "right" }, /* @__PURE__ */ import_react6.default.createElement(
+          StatusPill,
+          {
+            label: m.role,
+            tone: m.role === "admin" ? "accent" : "neutral",
+            dot: false
+          }
+        ))))))
+      ) : /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "body2", color: "text.secondary" }, "No members assigned."))));
     };
     TeamUsage = ({
       teams,
@@ -1269,12 +2314,18 @@ var init_TeamUsage = __esm({
       getTeamUsageLoading
     }) => {
       if (loading) {
-        return /* @__PURE__ */ import_react5.default.createElement(import_material5.Paper, { sx: { p: 2 } }, /* @__PURE__ */ import_react5.default.createElement(import_material5.LinearProgress, null));
+        return /* @__PURE__ */ import_react6.default.createElement(SectionCard, { title: "Teams" }, /* @__PURE__ */ import_react6.default.createElement(import_Skeleton4.default, { variant: "rounded", height: 120, sx: { mb: 2 } }), /* @__PURE__ */ import_react6.default.createElement(import_Skeleton4.default, { variant: "rounded", height: 120 }));
       }
       if (!teams.length) {
-        return /* @__PURE__ */ import_react5.default.createElement(import_material5.Paper, { sx: { p: 2 } }, /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, { display: "flex", alignItems: "flex-start", gap: 1.5 }, /* @__PURE__ */ import_react5.default.createElement(import_icons_material4.Group, { color: "disabled", sx: { mt: 0.5 } }), /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, null, /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { color: "text.secondary", variant: "body2" }, "You're not a member of any LiteLLM team yet."), /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { color: "text.secondary", variant: "body2", mt: 0.5 }, "That's fine \u2014 your account is provisioned, so you can still generate personal keys and use models. If you need a shared budget with colleagues, ask an admin to add you to a team."))));
+        return /* @__PURE__ */ import_react6.default.createElement(SectionCard, { title: "Teams" }, /* @__PURE__ */ import_react6.default.createElement(
+          EmptyState,
+          {
+            message: "You're not a member of any LiteLLM team yet.",
+            hint: "Your account is provisioned, so you can still generate personal keys and use models. Ask an admin to add you to a team if you need a shared budget."
+          }
+        ));
       }
-      return /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, null, /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "h6", mb: 1 }, "Teams"), teams.map((team) => /* @__PURE__ */ import_react5.default.createElement(
+      return /* @__PURE__ */ import_react6.default.createElement(SectionCard, { title: "Teams", subtitle: `${teams.length} team${teams.length === 1 ? "" : "s"}` }, /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, teams.map((team) => /* @__PURE__ */ import_react6.default.createElement(
         TeamCard,
         {
           key: team.team_id,
@@ -1282,19 +2333,23 @@ var init_TeamUsage = __esm({
           usage: getTeamUsage(team.team_id),
           usageLoading: getTeamUsageLoading(team.team_id)
         }
-      )));
+      ))));
     };
   }
 });
 
 // src/components/AuditLog.tsx
-function actionColor(action) {
-  if (!action) return "default";
-  for (const [key, color] of Object.entries(ACTION_COLORS)) {
-    if (action.toLowerCase().includes(key)) return color;
+function actionTone(action) {
+  if (!action) return "neutral";
+  for (const [key, tone] of Object.entries(ACTION_TONES)) {
+    if (action.toLowerCase().includes(key)) return tone;
   }
   return "info";
 }
+function prettyTableName(name) {
+  if (!name) return "\u2014";
+  return TABLE_LABELS[name] ?? name;
+}
 function formatDateTime(iso) {
   try {
     return new Date(iso).toLocaleString();
@@ -1302,31 +2357,126 @@ function formatDateTime(iso) {
     return iso;
   }
 }
-var import_react6, import_material6, import_icons_material5, import_react_use, ACTION_COLORS, DetailRow, AuditLog;
+function renderAuditLogBody(loading, entries) {
+  if (loading) {
+    return /* @__PURE__ */ import_react7.default.createElement(import_TableRow4.default, null, /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, { colSpan: 6, sx: { py: 2 } }, /* @__PURE__ */ import_react7.default.createElement(import_Skeleton5.default, { variant: "rounded", height: 160 })));
+  }
+  if (entries.length === 0) {
+    return /* @__PURE__ */ import_react7.default.createElement(import_TableRow4.default, null, /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, { colSpan: 6 }, /* @__PURE__ */ import_react7.default.createElement(
+      EmptyState,
+      {
+        message: "No audit events found",
+        hint: "Try widening the filters or a different time window."
+      }
+    )));
+  }
+  return entries.map((entry) => /* @__PURE__ */ import_react7.default.createElement(DetailRow, { key: entry.id, entry }));
+}
+var import_react7, import_Box7, import_Typography7, import_Table4, import_TableBody4, import_TableCell4, import_TableContainer4, import_TableHead4, import_TableRow4, import_TablePagination, import_TextField4, import_MenuItem3, import_Skeleton5, import_Collapse2, import_IconButton4, import_Alert2, import_styles5, import_icons_material5, import_react_use, ACTION_TONES, TABLE_LABELS, DetailRow, AuditLog;
 var init_AuditLog = __esm({
   "src/components/AuditLog.tsx"() {
     "use strict";
-    import_react6 = __toESM(require("react"));
-    import_material6 = require("@mui/material");
+    import_react7 = __toESM(require("react"));
+    import_Box7 = __toESM(require("@mui/material/Box"));
+    import_Typography7 = __toESM(require("@mui/material/Typography"));
+    import_Table4 = __toESM(require("@mui/material/Table"));
+    import_TableBody4 = __toESM(require("@mui/material/TableBody"));
+    import_TableCell4 = __toESM(require("@mui/material/TableCell"));
+    import_TableContainer4 = __toESM(require("@mui/material/TableContainer"));
+    import_TableHead4 = __toESM(require("@mui/material/TableHead"));
+    import_TableRow4 = __toESM(require("@mui/material/TableRow"));
+    import_TablePagination = __toESM(require("@mui/material/TablePagination"));
+    import_TextField4 = __toESM(require("@mui/material/TextField"));
+    import_MenuItem3 = __toESM(require("@mui/material/MenuItem"));
+    import_Skeleton5 = __toESM(require("@mui/material/Skeleton"));
+    import_Collapse2 = __toESM(require("@mui/material/Collapse"));
+    import_IconButton4 = __toESM(require("@mui/material/IconButton"));
+    import_Alert2 = __toESM(require("@mui/material/Alert"));
+    import_styles5 = require("@mui/material/styles");
     import_icons_material5 = require("@mui/icons-material");
     import_react_use = require("react-use");
-    ACTION_COLORS = {
+    init_ui();
+    ACTION_TONES = {
       created: "success",
-      deleted: "error",
+      deleted: "danger",
       updated: "warning",
-      blocked: "error",
+      blocked: "danger",
       unblocked: "success"
     };
+    TABLE_LABELS = {
+      LiteLLM_VerificationToken: "Key",
+      LiteLLM_TeamTable: "Team",
+      LiteLLM_UserTable: "User"
+    };
     DetailRow = ({ entry }) => {
-      const [open, setOpen] = (0, import_react6.useState)(false);
+      const [open, setOpen] = (0, import_react7.useState)(false);
       const hasDetail = entry.before_value || entry.updated_values;
-      return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(import_material6.TableRow, { hover: true }, /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, { sx: { width: 40, pr: 0 } }, hasDetail && /* @__PURE__ */ import_react6.default.createElement(import_material6.IconButton, { size: "small", onClick: () => setOpen((o) => !o) }, open ? /* @__PURE__ */ import_react6.default.createElement(import_icons_material5.KeyboardArrowUp, { fontSize: "small" }) : /* @__PURE__ */ import_react6.default.createElement(import_icons_material5.KeyboardArrowDown, { fontSize: "small" }))), /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, { sx: { whiteSpace: "nowrap" } }, formatDateTime(entry.updated_at)), /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, null, entry.action && /* @__PURE__ */ import_react6.default.createElement(import_material6.Chip, { label: entry.action, color: actionColor(entry.action), size: "small" })), /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, null, entry.table_name ?? "-"), /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, null, /* @__PURE__ */ import_react6.default.createElement(import_material6.Typography, { variant: "body2", component: "code", sx: { fontFamily: "monospace", fontSize: "0.75rem" } }, entry.object_id ? entry.object_id.slice(0, 20) + (entry.object_id.length > 20 ? "\u2026" : "") : "-")), /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, null, entry.changed_by ?? "-")), hasDetail && /* @__PURE__ */ import_react6.default.createElement(import_material6.TableRow, null, /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, { colSpan: 6, sx: { py: 0 } }, /* @__PURE__ */ import_react6.default.createElement(import_material6.Collapse, { in: open, unmountOnExit: true }, /* @__PURE__ */ import_react6.default.createElement(import_material6.Box, { p: 2, display: "flex", gap: 2, flexWrap: "wrap" }, entry.before_value && /* @__PURE__ */ import_react6.default.createElement(import_material6.Box, { flex: 1, minWidth: 200 }, /* @__PURE__ */ import_react6.default.createElement(import_material6.Typography, { variant: "caption", color: "text.secondary", display: "block", mb: 0.5 }, "Before"), /* @__PURE__ */ import_react6.default.createElement(import_material6.Typography, { component: "pre", variant: "caption", sx: { fontFamily: "monospace", whiteSpace: "pre-wrap", wordBreak: "break-all" } }, JSON.stringify(entry.before_value, null, 2))), entry.updated_values && /* @__PURE__ */ import_react6.default.createElement(import_material6.Box, { flex: 1, minWidth: 200 }, /* @__PURE__ */ import_react6.default.createElement(import_material6.Typography, { variant: "caption", color: "text.secondary", display: "block", mb: 0.5 }, "After"), /* @__PURE__ */ import_react6.default.createElement(import_material6.Typography, { component: "pre", variant: "caption", sx: { fontFamily: "monospace", whiteSpace: "pre-wrap", wordBreak: "break-all" } }, JSON.stringify(entry.updated_values, null, 2))))))));
+      return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(import_TableRow4.default, null, /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, { sx: { width: 40, pr: 0 } }, hasDetail && /* @__PURE__ */ import_react7.default.createElement(
+        import_IconButton4.default,
+        {
+          size: "small",
+          onClick: () => setOpen((o) => !o),
+          "aria-label": open ? "Hide changes" : "Show changes",
+          "aria-expanded": open,
+          sx: (theme) => ({
+            color: theme.palette.text.secondary,
+            transform: open ? "rotate(180deg)" : "none",
+            transition: theme.transitions.create("transform")
+          })
+        },
+        /* @__PURE__ */ import_react7.default.createElement(import_icons_material5.KeyboardArrowDown, { fontSize: "small" })
+      )), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, { sx: { whiteSpace: "nowrap" } }, /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", color: "text.secondary" }, formatDateTime(entry.updated_at))), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, entry.action && /* @__PURE__ */ import_react7.default.createElement(StatusPill, { label: entry.action, tone: actionTone(entry.action) })), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2" }, prettyTableName(entry.table_name))), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, /* @__PURE__ */ import_react7.default.createElement(
+        import_Typography7.default,
+        {
+          variant: "body2",
+          component: "code",
+          color: "text.secondary",
+          title: entry.object_id ?? void 0,
+          sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 12 }
+        },
+        entry.object_id ? entry.object_id.slice(0, 20) + (entry.object_id.length > 20 ? "\u2026" : "") : "\u2014"
+      )), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, entry.changed_by ?? "\u2014")), hasDetail && /* @__PURE__ */ import_react7.default.createElement(import_TableRow4.default, { sx: { "&&:hover": { bgcolor: "transparent" } } }, /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } } }, /* @__PURE__ */ import_react7.default.createElement(import_Collapse2.default, { in: open, unmountOnExit: true }, /* @__PURE__ */ import_react7.default.createElement(
+        import_Box7.default,
+        {
+          display: "flex",
+          gap: 2,
+          flexWrap: "wrap",
+          sx: (theme) => ({
+            p: 2,
+            mb: 1.5,
+            borderRadius: 1.5,
+            bgcolor: (0, import_styles5.alpha)(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.05 : 0.03)
+          })
+        },
+        entry.before_value && /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { flex: 1, minWidth: 200 }, /* @__PURE__ */ import_react7.default.createElement(
+          import_Typography7.default,
+          {
+            variant: "caption",
+            color: "text.secondary",
+            display: "block",
+            mb: 0.75,
+            sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" }
+          },
+          "Before"
+        ), /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.before_value, null, 2))),
+        entry.updated_values && /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { flex: 1, minWidth: 200 }, /* @__PURE__ */ import_react7.default.createElement(
+          import_Typography7.default,
+          {
+            variant: "caption",
+            color: "text.secondary",
+            display: "block",
+            mb: 0.75,
+            sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" }
+          },
+          "After"
+        ), /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.updated_values, null, 2)))
+      )))));
     };
     AuditLog = ({ api }) => {
-      const [page, setPage] = (0, import_react6.useState)(0);
-      const [pageSize, setPageSize] = (0, import_react6.useState)(25);
-      const [filters, setFilters] = (0, import_react6.useState)({});
-      const fetchParams = (0, import_react6.useCallback)(
+      const [page, setPage] = (0, import_react7.useState)(0);
+      const [pageSize, setPageSize] = (0, import_react7.useState)(25);
+      const [filters, setFilters] = (0, import_react7.useState)({});
+      const fetchParams = (0, import_react7.useCallback)(
         () => ({ page: page + 1, page_size: pageSize, ...filters }),
         [page, pageSize, filters]
       )();
@@ -1336,68 +2486,80 @@ var init_AuditLog = __esm({
       );
       const entries = value?.audit_logs ?? [];
       const total = value?.total ?? 0;
-      return /* @__PURE__ */ import_react6.default.createElement(import_material6.Paper, null, /* @__PURE__ */ import_react6.default.createElement(import_material6.Box, { p: 2, display: "flex", gap: 2, flexWrap: "wrap", alignItems: "center" }, /* @__PURE__ */ import_react6.default.createElement(import_material6.Typography, { variant: "h6", sx: { flex: "0 0 auto", mr: 1 } }, "Audit Log"), /* @__PURE__ */ import_react6.default.createElement(
-        import_material6.TextField,
-        {
-          size: "small",
-          label: "Action",
-          select: true,
-          value: filters.action ?? "",
-          onChange: (e) => {
-            setFilters((f) => ({ ...f, action: e.target.value || void 0 }));
-            setPage(0);
-          },
-          sx: { minWidth: 160 }
-        },
-        /* @__PURE__ */ import_react6.default.createElement(import_material6.MenuItem, { value: "" }, "All actions"),
-        /* @__PURE__ */ import_react6.default.createElement(import_material6.MenuItem, { value: "created" }, "Created"),
-        /* @__PURE__ */ import_react6.default.createElement(import_material6.MenuItem, { value: "updated" }, "Updated"),
-        /* @__PURE__ */ import_react6.default.createElement(import_material6.MenuItem, { value: "deleted" }, "Deleted"),
-        /* @__PURE__ */ import_react6.default.createElement(import_material6.MenuItem, { value: "blocked" }, "Blocked")
-      ), /* @__PURE__ */ import_react6.default.createElement(
-        import_material6.TextField,
+      return /* @__PURE__ */ import_react7.default.createElement(
+        SectionCard,
         {
-          size: "small",
-          label: "Table",
-          select: true,
-          value: filters.table_name ?? "",
-          onChange: (e) => {
-            setFilters((f) => ({ ...f, table_name: e.target.value || void 0 }));
-            setPage(0);
-          },
-          sx: { minWidth: 160 }
+          title: "Audit Log",
+          subtitle: loading ? "Loading\u2026" : `${total.toLocaleString()} event${total === 1 ? "" : "s"}`,
+          flush: true,
+          actions: /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
+            import_TextField4.default,
+            {
+              size: "small",
+              label: "Action",
+              select: true,
+              value: filters.action ?? "",
+              onChange: (e) => {
+                setFilters((f) => ({ ...f, action: e.target.value || void 0 }));
+                setPage(0);
+              },
+              sx: { minWidth: 150 }
+            },
+            /* @__PURE__ */ import_react7.default.createElement(import_MenuItem3.default, { value: "" }, "All actions"),
+            /* @__PURE__ */ import_react7.default.createElement(import_MenuItem3.default, { value: "created" }, "Created"),
+            /* @__PURE__ */ import_react7.default.createElement(import_MenuItem3.default, { value: "updated" }, "Updated"),
+            /* @__PURE__ */ import_react7.default.createElement(import_MenuItem3.default, { value: "deleted" }, "Deleted"),
+            /* @__PURE__ */ import_react7.default.createElement(import_MenuItem3.default, { value: "blocked" }, "Blocked")
+          ), /* @__PURE__ */ import_react7.default.createElement(
+            import_TextField4.default,
+            {
+              size: "small",
+              label: "Table",
+              select: true,
+              value: filters.table_name ?? "",
+              onChange: (e) => {
+                setFilters((f) => ({ ...f, table_name: e.target.value || void 0 }));
+                setPage(0);
+              },
+              sx: { minWidth: 150 }
+            },
+            /* @__PURE__ */ import_react7.default.createElement(import_MenuItem3.default, { value: "" }, "All tables"),
+            /* @__PURE__ */ import_react7.default.createElement(import_MenuItem3.default, { value: "LiteLLM_VerificationToken" }, "Key"),
+            /* @__PURE__ */ import_react7.default.createElement(import_MenuItem3.default, { value: "LiteLLM_TeamTable" }, "Team"),
+            /* @__PURE__ */ import_react7.default.createElement(import_MenuItem3.default, { value: "LiteLLM_UserTable" }, "User")
+          ), /* @__PURE__ */ import_react7.default.createElement(
+            import_TextField4.default,
+            {
+              size: "small",
+              label: "Changed by",
+              value: filters.changed_by ?? "",
+              onChange: (e) => {
+                setFilters((f) => ({ ...f, changed_by: e.target.value || void 0 }));
+                setPage(0);
+              },
+              sx: { minWidth: 180 }
+            }
+          ))
         },
-        /* @__PURE__ */ import_react6.default.createElement(import_material6.MenuItem, { value: "" }, "All tables"),
-        /* @__PURE__ */ import_react6.default.createElement(import_material6.MenuItem, { value: "LiteLLM_VerificationToken" }, "Key"),
-        /* @__PURE__ */ import_react6.default.createElement(import_material6.MenuItem, { value: "LiteLLM_TeamTable" }, "Team"),
-        /* @__PURE__ */ import_react6.default.createElement(import_material6.MenuItem, { value: "LiteLLM_UserTable" }, "User")
-      ), /* @__PURE__ */ import_react6.default.createElement(
-        import_material6.TextField,
-        {
-          size: "small",
-          label: "Changed by",
-          value: filters.changed_by ?? "",
-          onChange: (e) => {
-            setFilters((f) => ({ ...f, changed_by: e.target.value || void 0 }));
-            setPage(0);
-          },
-          sx: { minWidth: 200 }
-        }
-      )), error && /* @__PURE__ */ import_react6.default.createElement(import_material6.Box, { px: 2, pb: 2 }, /* @__PURE__ */ import_react6.default.createElement(import_material6.Alert, { severity: "error" }, error.message)), /* @__PURE__ */ import_react6.default.createElement(import_material6.TableContainer, null, /* @__PURE__ */ import_react6.default.createElement(import_material6.Table, { size: "small" }, /* @__PURE__ */ import_react6.default.createElement(import_material6.TableHead, null, /* @__PURE__ */ import_react6.default.createElement(import_material6.TableRow, null, /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, { sx: { width: 40 } }), /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, null, "Time"), /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, null, "Action"), /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, null, "Table"), /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, null, "Object ID"), /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, null, "Changed By"))), /* @__PURE__ */ import_react6.default.createElement(import_material6.TableBody, null, loading ? /* @__PURE__ */ import_react6.default.createElement(import_material6.TableRow, null, /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, { colSpan: 6, align: "center", sx: { py: 4 } }, /* @__PURE__ */ import_react6.default.createElement(import_material6.CircularProgress, { size: 24 }))) : entries.length === 0 ? /* @__PURE__ */ import_react6.default.createElement(import_material6.TableRow, null, /* @__PURE__ */ import_react6.default.createElement(import_material6.TableCell, { colSpan: 6, align: "center", sx: { py: 4 } }, /* @__PURE__ */ import_react6.default.createElement(import_material6.Typography, { color: "text.secondary" }, "No audit events found"))) : entries.map((entry) => /* @__PURE__ */ import_react6.default.createElement(DetailRow, { key: entry.id, entry }))))), /* @__PURE__ */ import_react6.default.createElement(
-        import_material6.TablePagination,
-        {
-          component: "div",
-          count: total,
-          page,
-          onPageChange: (_, p) => setPage(p),
-          rowsPerPage: pageSize,
-          onRowsPerPageChange: (e) => {
-            setPageSize(Number(e.target.value));
-            setPage(0);
-          },
-          rowsPerPageOptions: [10, 25, 50]
-        }
-      ));
+        error && /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { px: 2.5, pb: 2 }, /* @__PURE__ */ import_react7.default.createElement(import_Alert2.default, { severity: "error" }, error.message)),
+        /* @__PURE__ */ import_react7.default.createElement(import_TableContainer4.default, null, /* @__PURE__ */ import_react7.default.createElement(import_Table4.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react7.default.createElement(import_TableHead4.default, null, /* @__PURE__ */ import_react7.default.createElement(import_TableRow4.default, null, /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, { sx: { width: 40 } }), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, "Time"), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, "Action"), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, "Table"), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, "Object ID"), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, "Changed By"))), /* @__PURE__ */ import_react7.default.createElement(import_TableBody4.default, null, renderAuditLogBody(loading, entries)))),
+        /* @__PURE__ */ import_react7.default.createElement(
+          import_TablePagination.default,
+          {
+            component: "div",
+            count: total,
+            page,
+            onPageChange: (_, p) => setPage(p),
+            rowsPerPage: pageSize,
+            onRowsPerPageChange: (e) => {
+              setPageSize(Number(e.target.value));
+              setPage(0);
+            },
+            rowsPerPageOptions: [10, 25, 50],
+            sx: (theme) => ({ borderTop: `1px solid ${theme.palette.divider}` })
+          }
+        )
+      );
     };
   }
 });
@@ -1421,12 +2583,19 @@ function initDateRange() {
   else start.setDate(start.getDate() - 7);
   return { start, end };
 }
-var import_react7, import_material7, import_react_use2, import_core_plugin_api2, PERIOD_LS_KEY2, LiteLLMPage;
+var import_react8, import_Box8, import_Snackbar, import_Alert3, import_CircularProgress4, import_Typography8, import_Paper5, import_Tabs2, import_Tab2, import_react_use2, import_core_plugin_api2, PERIOD_LS_KEY2, LiteLLMPage;
 var init_LiteLLMPage = __esm({
   "src/components/LiteLLMPage.tsx"() {
     "use strict";
-    import_react7 = __toESM(require("react"));
-    import_material7 = require("@mui/material");
+    import_react8 = __toESM(require("react"));
+    import_Box8 = __toESM(require("@mui/material/Box"));
+    import_Snackbar = __toESM(require("@mui/material/Snackbar"));
+    import_Alert3 = __toESM(require("@mui/material/Alert"));
+    import_CircularProgress4 = __toESM(require("@mui/material/CircularProgress"));
+    import_Typography8 = __toESM(require("@mui/material/Typography"));
+    import_Paper5 = __toESM(require("@mui/material/Paper"));
+    import_Tabs2 = __toESM(require("@mui/material/Tabs"));
+    import_Tab2 = __toESM(require("@mui/material/Tab"));
     import_react_use2 = require("react-use");
     import_core_plugin_api2 = require("@backstage/core-plugin-api");
     init_DashboardHeader();
@@ -1439,12 +2608,12 @@ var init_LiteLLMPage = __esm({
     PERIOD_LS_KEY2 = "litellm_usage_period";
     LiteLLMPage = () => {
       const api = (0, import_core_plugin_api2.useApi)(liteLlmApiRef);
-      const [dateRange, setDateRange] = (0, import_react7.useState)(initDateRange);
-      const [activeTab, setActiveTab] = (0, import_react7.useState)("overview");
-      const [snackbar, setSnackbar] = (0, import_react7.useState)(null);
-      const [generateDialogOpen, setGenerateDialogOpen] = (0, import_react7.useState)(false);
-      const [teamUsageCache, setTeamUsageCache] = (0, import_react7.useState)({});
-      const [teamUsageLoading, setTeamUsageLoading] = (0, import_react7.useState)({});
+      const [dateRange, setDateRange] = (0, import_react8.useState)(initDateRange);
+      const [activeTab, setActiveTab] = (0, import_react8.useState)("overview");
+      const [snackbar, setSnackbar] = (0, import_react8.useState)(null);
+      const [generateDialogOpen, setGenerateDialogOpen] = (0, import_react8.useState)(false);
+      const [teamUsageCache, setTeamUsageCache] = (0, import_react8.useState)({});
+      const [teamUsageLoading, setTeamUsageLoading] = (0, import_react8.useState)({});
       const { value: userInfo, loading: userLoading, error: userError } = (0, import_react_use2.useAsync)(
         () => api.getUserInfo(),
         [api]
@@ -1469,7 +2638,7 @@ var init_LiteLLMPage = __esm({
         [api]
       );
       const { value: liteLlmConfig } = (0, import_react_use2.useAsync)(() => api.getConfig(), [api]);
-      const teams = (0, import_react7.useMemo)(() => {
+      const teams = (0, import_react8.useMemo)(() => {
         if (!allTeams?.length) return [];
         if (!userInfo) return allTeams;
         const userId = userInfo.user_id;
@@ -1486,12 +2655,12 @@ var init_LiteLLMPage = __esm({
         const endDate = dateRange.end.toISOString().split("T")[0];
         return api.getUsage(startDate, endDate);
       }, [api, dateRange]);
-      const handleDateRangeChange = (0, import_react7.useCallback)((range) => {
+      const handleDateRangeChange = (0, import_react8.useCallback)((range) => {
         setDateRange(range);
         setTeamUsageCache({});
         setTeamUsageLoading({});
       }, [setDateRange]);
-      const loadTeamUsage = (0, import_react7.useCallback)(async (teamId) => {
+      const loadTeamUsage = (0, import_react8.useCallback)(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
         setTeamUsageLoading((prev) => ({ ...prev, [teamId]: true }));
         try {
@@ -1505,7 +2674,7 @@ var init_LiteLLMPage = __esm({
           setTeamUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
       }, [api, dateRange, teamUsageCache, teamUsageLoading]);
-      const allowedModels = (0, import_react7.useMemo)(() => {
+      const allowedModels = (0, import_react8.useMemo)(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
         const teamModels = teams?.flatMap((t) => t.models ?? []);
@@ -1518,7 +2687,7 @@ var init_LiteLLMPage = __esm({
         ]);
         return allModels.filter((m) => allowed.has(m.model_name));
       }, [allModels, userInfo, teams]);
-      const handleGenerateKey = (0, import_react7.useCallback)(
+      const handleGenerateKey = (0, import_react8.useCallback)(
         async (request) => {
           try {
             const response = await api.generateKey(request);
@@ -1532,7 +2701,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleUpdateKey = (0, import_react7.useCallback)(
+      const handleUpdateKey = (0, import_react8.useCallback)(
         async (keyId, request) => {
           try {
             await api.updateKey(keyId, request);
@@ -1545,7 +2714,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleBlockKey = (0, import_react7.useCallback)(
+      const handleBlockKey = (0, import_react8.useCallback)(
         async (keyId) => {
           try {
             await api.blockKey(keyId);
@@ -1557,7 +2726,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleUnblockKey = (0, import_react7.useCallback)(
+      const handleUnblockKey = (0, import_react8.useCallback)(
         async (keyId) => {
           try {
             await api.unblockKey(keyId);
@@ -1569,7 +2738,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleResetKeySpend = (0, import_react7.useCallback)(
+      const handleResetKeySpend = (0, import_react8.useCallback)(
         async (keyId) => {
           try {
             await api.resetKeySpend(keyId);
@@ -1581,7 +2750,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleDeleteKey = (0, import_react7.useCallback)(
+      const handleDeleteKey = (0, import_react8.useCallback)(
         async (keyId) => {
           try {
             await api.deleteKey(keyId);
@@ -1598,7 +2767,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handlePruneExpiredKeys = (0, import_react7.useCallback)(
+      const handlePruneExpiredKeys = (0, import_react8.useCallback)(
         async () => {
           try {
             const result = await api.pruneExpiredKeys();
@@ -1613,34 +2782,42 @@ var init_LiteLLMPage = __esm({
       );
       const isInitialLoading = userLoading && !userInfo;
       if (isInitialLoading) {
-        return /* @__PURE__ */ import_react7.default.createElement(import_material7.Box, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ import_react7.default.createElement(import_material7.CircularProgress, null));
+        return /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ import_react8.default.createElement(import_CircularProgress4.default, null));
       }
       if (userError || !userInfo) {
         const isProvisioningEnabled = userError?.body?.provisioning === true;
         const hint = userError?.body?.hint;
-        return /* @__PURE__ */ import_react7.default.createElement(import_material7.Box, { p: 3 }, /* @__PURE__ */ import_react7.default.createElement(import_material7.Paper, { sx: { p: 3 } }, /* @__PURE__ */ import_react7.default.createElement(import_material7.Typography, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ import_react7.default.createElement(import_material7.Typography, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ import_react7.default.createElement(import_material7.Typography, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ import_react7.default.createElement(import_material7.Typography, { variant: "body2", color: "text.secondary" }, isProvisioningEnabled ? "Auto-provisioning is enabled but failed. Check the backend logs." : "Set litellm.provisioning.enabled: true in app-config.yaml to enable auto-provisioning, or ask your administrator to create the account manually.")));
+        return /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { p: 3 }, /* @__PURE__ */ import_react8.default.createElement(import_Paper5.default, { sx: { p: 3 } }, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2", color: "text.secondary" }, isProvisioningEnabled ? "Auto-provisioning is enabled but failed. Check the backend logs." : "Set litellm.provisioning.enabled: true in app-config.yaml to enable auto-provisioning, or ask your administrator to create the account manually.")));
       }
-      return /* @__PURE__ */ import_react7.default.createElement(import_material7.Box, { p: 3 }, /* @__PURE__ */ import_react7.default.createElement(import_material7.Box, { mb: 2 }, /* @__PURE__ */ import_react7.default.createElement(
+      const pageTabs = /* @__PURE__ */ import_react8.default.createElement(
+        import_Tabs2.default,
+        {
+          value: activeTab,
+          onChange: (_, v) => setActiveTab(v),
+          variant: "scrollable",
+          scrollButtons: "auto",
+          sx: {
+            minHeight: 44,
+            '& [class*="MuiTabs-indicator"]': { height: 2, borderRadius: "2px 2px 0 0" },
+            '& [class*="MuiTab-root"]': { minHeight: 44, textTransform: "none", fontSize: 14 }
+          }
+        },
+        /* @__PURE__ */ import_react8.default.createElement(import_Tab2.default, { label: "Overview", value: "overview" }),
+        /* @__PURE__ */ import_react8.default.createElement(import_Tab2.default, { label: "Keys", value: "keys" }),
+        /* @__PURE__ */ import_react8.default.createElement(import_Tab2.default, { label: "Teams", value: "teams" }),
+        userInfo.can_view_audit && /* @__PURE__ */ import_react8.default.createElement(import_Tab2.default, { label: "Audit Log", value: "audit" })
+      );
+      return /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ import_react8.default.createElement(
         DashboardHeader,
         {
           userInfo,
           teams: teams ?? [],
           keys: keys ?? [],
           loading: userLoading || teamsLoading,
-          onGenerateKeyClick: () => setGenerateDialogOpen(true)
+          onGenerateKeyClick: () => setGenerateDialogOpen(true),
+          tabs: pageTabs
         }
-      )), /* @__PURE__ */ import_react7.default.createElement(
-        import_material7.Tabs,
-        {
-          value: activeTab,
-          onChange: (_, v) => setActiveTab(v),
-          sx: { mb: 2, borderBottom: 1, borderColor: "divider" }
-        },
-        /* @__PURE__ */ import_react7.default.createElement(import_material7.Tab, { label: "Overview", value: "overview" }),
-        /* @__PURE__ */ import_react7.default.createElement(import_material7.Tab, { label: "Keys", value: "keys" }),
-        /* @__PURE__ */ import_react7.default.createElement(import_material7.Tab, { label: "Teams", value: "teams" }),
-        userInfo.can_view_audit && /* @__PURE__ */ import_react7.default.createElement(import_material7.Tab, { label: "Audit Log", value: "audit" })
-      ), activeTab === "overview" && /* @__PURE__ */ import_react7.default.createElement(
+      ), activeTab === "overview" && /* @__PURE__ */ import_react8.default.createElement(
         UsageStats,
         {
           usage: usage ?? null,
@@ -1650,7 +2827,7 @@ var init_LiteLLMPage = __esm({
           loading: usageLoading,
           userInfo
         }
-      ), activeTab === "keys" && /* @__PURE__ */ import_react7.default.createElement(
+      ), activeTab === "keys" && /* @__PURE__ */ import_react8.default.createElement(
         KeysTable,
         {
           keys: keys ?? [],
@@ -1664,7 +2841,7 @@ var init_LiteLLMPage = __esm({
           onDeleteKey: handleDeleteKey,
           onPruneExpiredKeys: handlePruneExpiredKeys
         }
-      ), activeTab === "teams" && /* @__PURE__ */ import_react7.default.createElement(
+      ), activeTab === "teams" && /* @__PURE__ */ import_react8.default.createElement(
         TeamUsage,
         {
           teams: teams ?? [],
@@ -1675,7 +2852,7 @@ var init_LiteLLMPage = __esm({
           },
           getTeamUsageLoading: (teamId) => teamUsageLoading[teamId] ?? false
         }
-      ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ import_react7.default.createElement(AuditLog, { api }), /* @__PURE__ */ import_react7.default.createElement(
+      ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ import_react8.default.createElement(AuditLog, { api }), /* @__PURE__ */ import_react8.default.createElement(
         GenerateKeyDialog,
         {
           open: generateDialogOpen,
@@ -1688,15 +2865,15 @@ var init_LiteLLMPage = __esm({
           onGenerateKey: handleGenerateKey,
           onGetConfig: () => api.getConfig()
         }
-      ), /* @__PURE__ */ import_react7.default.createElement(
-        import_material7.Snackbar,
+      ), /* @__PURE__ */ import_react8.default.createElement(
+        import_Snackbar.default,
         {
           open: !!snackbar,
           autoHideDuration: 5e3,
           onClose: () => setSnackbar(null),
           anchorOrigin: { vertical: "bottom", horizontal: "right" }
         },
-        snackbar ? /* @__PURE__ */ import_react7.default.createElement(import_material7.Alert, { severity: snackbar.severity, onClose: () => setSnackbar(null) }, snackbar.message) : void 0
+        snackbar ? /* @__PURE__ */ import_react8.default.createElement(import_Alert3.default, { severity: snackbar.severity, onClose: () => setSnackbar(null) }, snackbar.message) : void 0
       ));
     };
   }
@@ -1718,7 +2895,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/plugin.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_icons_material6 = require("@mui/icons-material");
 var import_frontend_plugin_api = require("@backstage/frontend-plugin-api");
 init_api();
@@ -1733,10 +2910,10 @@ var liteLlmPage = import_frontend_plugin_api.PageBlueprint.make({
   params: {
     path: "/litellm",
     title: "LiteLLM",
-    icon: /* @__PURE__ */ import_react8.default.createElement(import_icons_material6.TrendingUp, null),
+    icon: /* @__PURE__ */ import_react9.default.createElement(import_icons_material6.TrendingUp, null),
     loader: async () => {
       const { LiteLLMPage: LiteLLMPage2 } = await Promise.resolve().then(() => (init_LiteLLMPage(), LiteLLMPage_exports));
-      return /* @__PURE__ */ import_react8.default.createElement(LiteLLMPage2, null);
+      return /* @__PURE__ */ import_react9.default.createElement(LiteLLMPage2, null);
     }
   }
 });
@@ -1753,8 +2930,16 @@ init_UsageStats();
 init_TeamUsage();
 
 // src/components/LiteLLMHomeWidget.tsx
-var import_react9 = __toESM(require("react"));
-var import_material8 = require("@mui/material");
+var import_react10 = __toESM(require("react"));
+var import_Paper6 = __toESM(require("@mui/material/Paper"));
+var import_Box9 = __toESM(require("@mui/material/Box"));
+var import_Typography9 = __toESM(require("@mui/material/Typography"));
+var import_FormControl = __toESM(require("@mui/material/FormControl"));
+var import_Select = __toESM(require("@mui/material/Select"));
+var import_MenuItem4 = __toESM(require("@mui/material/MenuItem"));
+var import_Grid2 = __toESM(require("@mui/material/Grid"));
+var import_CircularProgress5 = __toESM(require("@mui/material/CircularProgress"));
+var import_Alert4 = __toESM(require("@mui/material/Alert"));
 var import_recharts3 = require("recharts");
 var import_core_plugin_api3 = require("@backstage/core-plugin-api");
 init_api();
@@ -1771,19 +2956,19 @@ function presetToDateRange(preset) {
   }
   return { start, end };
 }
-var Kpi = ({ label, value }) => /* @__PURE__ */ import_react9.default.createElement(import_material8.Box, null, /* @__PURE__ */ import_react9.default.createElement(import_material8.Typography, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ import_react9.default.createElement(import_material8.Typography, { variant: "subtitle1", fontWeight: 600 }, value));
+var Kpi = ({ label, value }) => /* @__PURE__ */ import_react10.default.createElement(import_Box9.default, null, /* @__PURE__ */ import_react10.default.createElement(import_Typography9.default, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ import_react10.default.createElement(import_Typography9.default, { variant: "subtitle1", fontWeight: 600 }, value));
 var LiteLLMHomeWidget = ({
   defaultPeriod = "7d",
   title = "LiteLLM Usage"
 }) => {
   const api = (0, import_core_plugin_api3.useApi)(liteLlmApiRef);
-  const [period, setPeriod] = (0, import_react9.useState)(defaultPeriod);
-  const [loading, setLoading] = (0, import_react9.useState)(true);
-  const [usageError, setUsageError] = (0, import_react9.useState)(null);
-  const [keysError, setKeysError] = (0, import_react9.useState)(null);
-  const [usage, setUsage] = (0, import_react9.useState)(null);
-  const [keys, setKeys] = (0, import_react9.useState)([]);
-  (0, import_react9.useEffect)(() => {
+  const [period, setPeriod] = (0, import_react10.useState)(defaultPeriod);
+  const [loading, setLoading] = (0, import_react10.useState)(true);
+  const [usageError, setUsageError] = (0, import_react10.useState)(null);
+  const [keysError, setKeysError] = (0, import_react10.useState)(null);
+  const [usage, setUsage] = (0, import_react10.useState)(null);
+  const [keys, setKeys] = (0, import_react10.useState)([]);
+  (0, import_react10.useEffect)(() => {
     let cancelled = false;
     setLoading(true);
     setUsageError(null);
@@ -1820,17 +3005,17 @@ var LiteLLMHomeWidget = ({
     spend: d.spend
   }));
   const hasSparkline = dailyData.length > 0;
-  return /* @__PURE__ */ import_react9.default.createElement(import_material8.Paper, { sx: { p: 2 } }, /* @__PURE__ */ import_react9.default.createElement(import_material8.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ import_react9.default.createElement(import_material8.Typography, { variant: "h6" }, title), /* @__PURE__ */ import_react9.default.createElement(import_material8.FormControl, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ import_react9.default.createElement(
-    import_material8.Select,
+  return /* @__PURE__ */ import_react10.default.createElement(import_Paper6.default, { sx: { p: 2 } }, /* @__PURE__ */ import_react10.default.createElement(import_Box9.default, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ import_react10.default.createElement(import_Typography9.default, { variant: "h6" }, title), /* @__PURE__ */ import_react10.default.createElement(import_FormControl.default, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ import_react10.default.createElement(
+    import_Select.default,
     {
       value: period,
       onChange: (e) => setPeriod(e.target.value),
       displayEmpty: true
     },
-    /* @__PURE__ */ import_react9.default.createElement(import_material8.MenuItem, { value: "today" }, "Today"),
-    /* @__PURE__ */ import_react9.default.createElement(import_material8.MenuItem, { value: "7d" }, "7d"),
-    /* @__PURE__ */ import_react9.default.createElement(import_material8.MenuItem, { value: "30d" }, "30d")
-  ))), loading && /* @__PURE__ */ import_react9.default.createElement(import_material8.Box, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ import_react9.default.createElement(import_material8.CircularProgress, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ import_react9.default.createElement(import_material8.Alert, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, partialFailure && /* @__PURE__ */ import_react9.default.createElement(import_material8.Alert, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ import_react9.default.createElement(import_material8.Grid, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ import_react9.default.createElement(import_material8.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react9.default.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ import_react9.default.createElement(import_material8.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react9.default.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ import_react9.default.createElement(import_material8.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react9.default.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ import_react9.default.createElement(import_material8.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react9.default.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ import_react9.default.createElement(import_material8.Box, { height: 120 }, /* @__PURE__ */ import_react9.default.createElement(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react9.default.createElement(import_recharts3.AreaChart, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ import_react9.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(import_MenuItem4.default, { value: "today" }, "Today"),
+    /* @__PURE__ */ import_react10.default.createElement(import_MenuItem4.default, { value: "7d" }, "7d"),
+    /* @__PURE__ */ import_react10.default.createElement(import_MenuItem4.default, { value: "30d" }, "30d")
+  ))), loading && /* @__PURE__ */ import_react10.default.createElement(import_Box9.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ import_react10.default.createElement(import_CircularProgress5.default, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ import_react10.default.createElement(import_Alert4.default, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, partialFailure && /* @__PURE__ */ import_react10.default.createElement(import_Alert4.default, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ import_react10.default.createElement(import_Grid2.default, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ import_react10.default.createElement(import_Grid2.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react10.default.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ import_react10.default.createElement(import_Grid2.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react10.default.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ import_react10.default.createElement(import_Grid2.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react10.default.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ import_react10.default.createElement(import_Grid2.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react10.default.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ import_react10.default.createElement(import_Box9.default, { height: 120 }, /* @__PURE__ */ import_react10.default.createElement(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react10.default.createElement(import_recharts3.AreaChart, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ import_react10.default.createElement(
     import_recharts3.Area,
     {
       type: "monotone",