@acarmisc/backstage-plugin-litellm 0.19.0 → 0.21.0

package/dist/index.esm.js

@@ -2749,11 +2749,391 @@ var init_UsageStats = __esm({
   }
 });
 
-// src/components/TeamUsage.tsx
-import React7, { useState as useState5 } from "react";
+// src/budget.ts
+function limitPct(spend, budget) {
+  if (budget <= 0) return 0;
+  return spend / budget * 100;
+}
+function buildBudgetSummary(user, teams, keys, maxKeys = 3) {
+  const budgeted = keys.filter((k) => (k.max_budget ?? 0) > 0).map((k) => {
+    const spend = k.spend ?? 0;
+    return {
+      kind: "key",
+      label: k.key_alias || k.key || "Untitled key",
+      sublabel: k.key,
+      budget: k.max_budget,
+      spend,
+      budgetDuration: k.budget_duration,
+      pct: limitPct(spend, k.max_budget)
+    };
+  }).sort((a, b) => b.pct - a.pct);
+  const userBudget = user && (user.max_budget ?? user.hard_limit ?? 0) > 0 ? (() => {
+    const budget = user.max_budget ?? user.hard_limit ?? 0;
+    const spend = user.current_spend ?? user.spend ?? 0;
+    return {
+      kind: "user",
+      label: "Personal budget",
+      sublabel: user.user_email || user.user_id,
+      budget,
+      spend,
+      budgetDuration: user.budget_duration,
+      softLimit: user.soft_limit,
+      pct: limitPct(spend, budget)
+    };
+  })() : void 0;
+  const teamLimits = teams.filter((t) => (t.max_budget ?? 0) > 0).map((t) => {
+    const spend = t.spend ?? 0;
+    return {
+      kind: "team",
+      label: t.team_alias || "Untitled team",
+      sublabel: t.team_id,
+      budget: t.max_budget,
+      spend,
+      budgetDuration: t.budget_duration,
+      pct: limitPct(spend, t.max_budget)
+    };
+  }).sort((a, b) => b.pct - a.pct);
+  return {
+    keys: budgeted.slice(0, maxKeys),
+    hiddenBudgetedKeys: Math.max(0, budgeted.length - maxKeys),
+    totalKeyCount: keys.length,
+    user: userBudget,
+    teams: teamLimits
+  };
+}
+function budgetHeadline(summary) {
+  const pcts = [
+    ...summary.keys.map((k) => k.pct),
+    ...summary.user ? [summary.user.pct] : [],
+    ...summary.teams.map((t) => t.pct)
+  ];
+  const count = summary.keys.length + summary.hiddenBudgetedKeys + (summary.user ? 1 : 0) + summary.teams.length;
+  return {
+    count,
+    closestPct: pcts.length ? Math.max(...pcts) : null
+  };
+}
+function fmtBudgetDuration(duration) {
+  if (!duration) return null;
+  const m = /^(\d+)(s|m|h|d)$/.exec(duration);
+  if (!m) return duration;
+  const n = Number(m[1]);
+  const unit = m[2];
+  if (unit === "d") return n === 1 ? "daily" : `every ${n} days`;
+  if (unit === "h") return n === 1 ? "hourly" : `every ${n} hours`;
+  if (unit === "m") return n === 1 ? "every minute" : `every ${n} minutes`;
+  return n === 1 ? "every second" : `every ${n} seconds`;
+}
+function budgetTone2(pct) {
+  if (pct >= 100) return "danger";
+  if (pct >= 80) return "warning";
+  return "accent";
+}
+var init_budget = __esm({
+  "src/budget.ts"() {
+    "use strict";
+  }
+});
+
+// src/components/LiteLLMBudgetWidget.tsx
+import React7, { useEffect as useEffect3, useMemo as useMemo6, useState as useState5 } from "react";
 import Paper5 from "@mui/material/Paper";
 import Box7 from "@mui/material/Box";
 import Typography7 from "@mui/material/Typography";
+import CircularProgress4 from "@mui/material/CircularProgress";
+import Alert3 from "@mui/material/Alert";
+import Collapse from "@mui/material/Collapse";
+import IconButton4 from "@mui/material/IconButton";
+import { ExpandMore as ExpandMore2 } from "@mui/icons-material";
+import { alpha as alpha4 } from "@mui/material/styles";
+import { useApi as useApi2 } from "@backstage/core-plugin-api";
+function levelToneColor(tone, theme) {
+  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;
+    default:
+      return theme.palette.primary.main;
+  }
+}
+var LevelFrame, EmptyLimitCard, LimitCard, TaggedLimit, FullBody, CompactBody, LiteLLMBudgetWidget;
+var init_LiteLLMBudgetWidget = __esm({
+  "src/components/LiteLLMBudgetWidget.tsx"() {
+    "use strict";
+    init_api();
+    init_format();
+    init_ui();
+    init_budget();
+    LevelFrame = ({
+      rank,
+      name,
+      tagline,
+      note,
+      tone,
+      isLast,
+      children
+    }) => /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", gap: 1.5 } }, /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", flexDirection: "column", alignItems: "center", width: 26, flexShrink: 0 } }, /* @__PURE__ */ React7.createElement(
+      Box7,
+      {
+        sx: (theme) => ({
+          width: 26,
+          height: 26,
+          borderRadius: "50%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          bgcolor: alpha4(levelToneColor(tone, theme), 0.14),
+          color: levelToneColor(tone, theme),
+          fontSize: 12,
+          fontWeight: 700,
+          flexShrink: 0
+        })
+      },
+      rank
+    ), /* @__PURE__ */ React7.createElement(
+      Box7,
+      {
+        sx: (theme) => ({
+          flex: 1,
+          width: 2,
+          minHeight: 14,
+          bgcolor: isLast ? "transparent" : alpha4(theme.palette.text.primary, 0.12)
+        })
+      }
+    )), /* @__PURE__ */ React7.createElement(Box7, { sx: { flex: 1, minWidth: 0, pb: isLast ? 0 : 2 } }, /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", alignItems: "baseline", gap: 1, flexWrap: "wrap", mb: 0.75 } }, /* @__PURE__ */ React7.createElement(
+      Typography7,
+      {
+        sx: (theme) => ({
+          fontSize: 12.5,
+          fontWeight: 700,
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+          color: levelToneColor(tone, theme)
+        })
+      },
+      name
+    ), /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary", sx: { fontSize: 11.5 } }, tagline), note && /* @__PURE__ */ React7.createElement(StatusPill, { label: note, tone: "neutral", dot: false, sx: { ml: "auto" } })), /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", flexDirection: "column", gap: 1 } }, children)));
+    EmptyLimitCard = ({ children }) => /* @__PURE__ */ React7.createElement(
+      Paper5,
+      {
+        variant: "outlined",
+        sx: (theme) => ({
+          px: 1.5,
+          py: 1.25,
+          borderRadius: 1.5,
+          bgcolor: alpha4(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.03 : 0.015)
+        })
+      },
+      /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", color: "text.secondary", sx: { fontSize: 13 } }, children)
+    );
+    LimitCard = ({ limit }) => {
+      const tone = budgetTone2(limit.pct);
+      const pct = Math.round(limit.pct);
+      const closeTo = limit.softLimit !== void 0 && limit.spend >= limit.softLimit;
+      return /* @__PURE__ */ React7.createElement(Paper5, { variant: "outlined", sx: { px: 1.5, py: 1.25, borderRadius: 1.5 } }, /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 1.5 } }, /* @__PURE__ */ React7.createElement(Box7, { sx: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ React7.createElement(
+        Typography7,
+        {
+          variant: "body2",
+          sx: { fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+          title: limit.sublabel ? `${limit.label} \xB7 ${limit.sublabel}` : limit.label
+        },
+        limit.label
+      ), limit.sublabel && /* @__PURE__ */ React7.createElement(
+        Typography7,
+        {
+          variant: "caption",
+          color: "text.secondary",
+          sx: {
+            fontSize: 10.5,
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+            display: "block",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }
+        },
+        limit.sublabel
+      )), /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, fmtUsd(limit.spend), /* @__PURE__ */ React7.createElement(Box7, { component: "span", color: "text.secondary", sx: { fontWeight: 400 } }, " / ", fmtUsd(limit.budget)))), /* @__PURE__ */ React7.createElement(Box7, { sx: { mt: 1 } }, /* @__PURE__ */ React7.createElement(Meter, { value: limit.pct, tone, height: 6 })), /* @__PURE__ */ React7.createElement(
+        Box7,
+        {
+          sx: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: 1,
+            mt: 0.75
+          }
+        },
+        /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, pct, "% of budget", closeTo && ` \xB7 soft-limit warning`),
+        /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary" }, fmtBudgetDuration(limit.budgetDuration) ? `resets ${fmtBudgetDuration(limit.budgetDuration)}` : "never resets")
+      ));
+    };
+    TaggedLimit = ({ limit }) => {
+      const tone = budgetTone2(limit.pct);
+      return /* @__PURE__ */ React7.createElement(Box7, null, /* @__PURE__ */ React7.createElement(
+        Typography7,
+        {
+          sx: (theme) => ({
+            fontSize: 11,
+            fontWeight: 700,
+            letterSpacing: "0.08em",
+            textTransform: "uppercase",
+            color: tone === "accent" ? theme.palette.text.secondary : levelToneColor(tone, theme),
+            mb: 0.5
+          })
+        },
+        limit.kind
+      ), /* @__PURE__ */ React7.createElement(LimitCard, { limit }));
+    };
+    FullBody = ({ summary }) => {
+      const hasBudgetedKeys = summary.keys.length + summary.hiddenBudgetedKeys > 0;
+      return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+        LevelFrame,
+        {
+          rank: 1,
+          name: "Key",
+          tagline: "per-key cap \xB7 highest priority",
+          note: hasBudgetedKeys ? void 0 : "no key budgets set"
+        },
+        !hasBudgetedKeys && /* @__PURE__ */ React7.createElement(EmptyLimitCard, null, "No key has a budget, so no key-level cap applies."),
+        summary.keys.map((k) => /* @__PURE__ */ React7.createElement(LimitCard, { key: k.sublabel ?? k.label, limit: k })),
+        summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary" }, "+", summary.hiddenBudgetedKeys, " more budgeted key", summary.hiddenBudgetedKeys > 1 ? "s" : "", " further from the cap")
+      ), /* @__PURE__ */ React7.createElement(
+        LevelFrame,
+        {
+          rank: 2,
+          name: "User",
+          tagline: "cap on everything you spend with your own keys",
+          note: "skipped for team-bound keys"
+        },
+        summary.user ? /* @__PURE__ */ React7.createElement(LimitCard, { limit: summary.user }) : /* @__PURE__ */ React7.createElement(EmptyLimitCard, null, "No personal budget is set on your account.")
+      ), /* @__PURE__ */ React7.createElement(LevelFrame, { rank: 3, name: "Team", tagline: "shared cap for all keys in a team (if any)" }, summary.teams.length > 0 ? summary.teams.map((t) => /* @__PURE__ */ React7.createElement(LimitCard, { key: t.sublabel ?? t.label, limit: t })) : /* @__PURE__ */ React7.createElement(EmptyLimitCard, null, "No team you belong to has a budget.")), /* @__PURE__ */ React7.createElement(LevelFrame, { rank: 4, name: "Global", tagline: "proxy-wide cap set by your admin", isLast: true }, /* @__PURE__ */ React7.createElement(EmptyLimitCard, null, "Configured by your admin in the proxy config \u2014 it isn't visible from this page. When set, it limits spend across every request on the proxy.")), /* @__PURE__ */ React7.createElement(
+        Box7,
+        {
+          sx: (theme) => ({
+            mt: 2,
+            px: 1.5,
+            py: 1.25,
+            borderRadius: 1.5,
+            border: "1px dashed",
+            borderColor: alpha4(theme.palette.text.primary, 0.18)
+          })
+        },
+        /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary", display: "block" }, "The first cap a request runs into is the one that stops it. A limit with a reset window (e.g. daily or every 30 days) clears its spend to $0 when the window closes; without a window it never resets.")
+      ));
+    };
+    CompactBody = ({ summary }) => {
+      const { count } = budgetHeadline(summary);
+      if (count === 0) {
+        return /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", color: "text.secondary", sx: { fontSize: 13 } }, "No budget limits apply to you right now.");
+      }
+      return /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", flexDirection: "column", gap: 1.25 } }, summary.keys.map((k) => /* @__PURE__ */ React7.createElement(TaggedLimit, { key: k.sublabel ?? k.label, limit: k })), summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary" }, "+", summary.hiddenBudgetedKeys, " more budgeted key", summary.hiddenBudgetedKeys > 1 ? "s" : "", " further from the cap"), summary.user && /* @__PURE__ */ React7.createElement(TaggedLimit, { limit: summary.user }), summary.teams.map((t) => /* @__PURE__ */ React7.createElement(TaggedLimit, { key: t.sublabel ?? t.label, limit: t })));
+    };
+    LiteLLMBudgetWidget = ({
+      title = "Budget Policy",
+      maxKeys = 3,
+      compact = false,
+      collapsible = false,
+      defaultExpanded = true,
+      action
+    }) => {
+      const api = useApi2(liteLlmApiRef);
+      const [loading, setLoading] = useState5(true);
+      const [error, setError] = useState5(null);
+      const [user, setUser] = useState5(null);
+      const [teams, setTeams] = useState5([]);
+      const [keys, setKeys] = useState5([]);
+      const [expanded, setExpanded] = useState5(defaultExpanded);
+      useEffect3(() => {
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        Promise.allSettled([api.getUserInfo(), api.getTeams(), api.listKeys()]).then(
+          ([userResult, teamsResult, keysResult]) => {
+            if (cancelled) return;
+            if (userResult.status === "fulfilled") {
+              setUser(userResult.value);
+            } else {
+              setUser(null);
+              setError(
+                userResult.reason?.message ?? "Failed to load your LiteLLM profile"
+              );
+            }
+            setTeams(teamsResult.status === "fulfilled" ? teamsResult.value : []);
+            setKeys(keysResult.status === "fulfilled" ? keysResult.value : []);
+            setLoading(false);
+          }
+        );
+        return () => {
+          cancelled = true;
+        };
+      }, [api]);
+      const summary = useMemo6(
+        () => buildBudgetSummary(user, teams, keys, maxKeys),
+        [user, teams, keys, maxKeys]
+      );
+      const headline = useMemo6(() => budgetHeadline(summary), [summary]);
+      const limitsWord = `${headline.count} limit${headline.count === 1 ? "" : "s"}`;
+      const closestWord = headline.closestPct === null ? "" : ` \xB7 closest ${Math.round(headline.closestPct)}%`;
+      const summaryText = headline.count === 0 ? "no limits apply" : `${limitsWord}${closestWord}`;
+      const body = /* @__PURE__ */ React7.createElement(React7.Fragment, null, loading && /* @__PURE__ */ React7.createElement(Box7, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 140 }, /* @__PURE__ */ React7.createElement(CircularProgress4, { size: 32 })), !loading && error && /* @__PURE__ */ React7.createElement(Alert3, { severity: "error", sx: { mt: 0.5 } }, error), !loading && !error && (compact ? /* @__PURE__ */ React7.createElement(CompactBody, { summary }) : /* @__PURE__ */ React7.createElement(FullBody, { summary })));
+      return /* @__PURE__ */ React7.createElement(Paper5, { sx: { p: 2 } }, collapsible ? /* @__PURE__ */ React7.createElement(
+        Box7,
+        {
+          onClick: () => setExpanded((e) => !e),
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            cursor: "pointer",
+            userSelect: "none",
+            mb: expanded ? 1.5 : 0
+          }
+        },
+        /* @__PURE__ */ React7.createElement(Box7, { sx: { minWidth: 0, flex: 1, display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" } }, /* @__PURE__ */ React7.createElement(Typography7, { variant: "h6", lineHeight: 1.2 }, title), !loading && !error && /* @__PURE__ */ React7.createElement(StatusPill, { label: summaryText, tone: budgetTone2(headline.closestPct ?? 0) })),
+        /* @__PURE__ */ React7.createElement(
+          IconButton4,
+          {
+            size: "small",
+            "aria-label": expanded ? "Collapse budget policy" : "Expand budget policy",
+            "aria-expanded": expanded,
+            onClick: (e) => {
+              e.stopPropagation();
+              setExpanded((x) => !x);
+            },
+            sx: (theme) => ({
+              color: theme.palette.text.secondary,
+              transform: expanded ? "rotate(180deg)" : "none",
+              transition: theme.transitions.create("transform")
+            })
+          },
+          /* @__PURE__ */ React7.createElement(ExpandMore2, null)
+        )
+      ) : /* @__PURE__ */ React7.createElement(Box7, { sx: { mb: 1.5 } }, /* @__PURE__ */ React7.createElement(Typography7, { variant: "h6", lineHeight: 1.2 }, title), /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary" }, "How LiteLLM caps spend \u2014 and where you stand right now")), collapsible ? /* @__PURE__ */ React7.createElement(Collapse, { in: expanded, unmountOnExit: true }, body) : body, action && /* @__PURE__ */ React7.createElement(
+        Box7,
+        {
+          sx: (theme) => ({
+            mt: 2,
+            pt: 2,
+            borderTop: `1px solid ${theme.palette.divider}`
+          })
+        },
+        action
+      ));
+    };
+  }
+});
+
+// src/components/TeamUsage.tsx
+import React8, { useState as useState6 } from "react";
+import Paper6 from "@mui/material/Paper";
+import Box8 from "@mui/material/Box";
+import Typography8 from "@mui/material/Typography";
 import Skeleton4 from "@mui/material/Skeleton";
 import Divider3 from "@mui/material/Divider";
 import Table4 from "@mui/material/Table";
@@ -2762,12 +3142,12 @@ import TableCell4 from "@mui/material/TableCell";
 import TableHead4 from "@mui/material/TableHead";
 import TableRow4 from "@mui/material/TableRow";
 import TableContainer4 from "@mui/material/TableContainer";
-import Collapse from "@mui/material/Collapse";
-import IconButton4 from "@mui/material/IconButton";
+import Collapse2 from "@mui/material/Collapse";
+import IconButton5 from "@mui/material/IconButton";
 import Button5 from "@mui/material/Button";
-import CircularProgress4 from "@mui/material/CircularProgress";
-import { alpha as alpha4 } from "@mui/material/styles";
-import { ExpandMore as ExpandMore2, Group, Add as Add3 } from "@mui/icons-material";
+import CircularProgress5 from "@mui/material/CircularProgress";
+import { alpha as alpha5 } from "@mui/material/styles";
+import { ExpandMore as ExpandMore3, Group, Add as Add3 } from "@mui/icons-material";
 import {
   AreaChart as AreaChart2,
   Area as Area2,
@@ -2777,7 +3157,7 @@ import {
   Tooltip as Tooltip2,
   ResponsiveContainer as ResponsiveContainer2
 } from "recharts";
-function budgetTone2(isOver, isNear) {
+function budgetTone3(isOver, isNear) {
   if (isOver) return "danger";
   if (isNear) return "warning";
   return "accent";
@@ -2789,7 +3169,7 @@ var init_TeamUsage = __esm({
     init_ui();
     fmtUsd2 = (n) => `$${(n ?? 0).toFixed(2)}`;
     TeamCard = ({ team, usage, usageLoading, canManage, onEditTeam }) => {
-      const [expanded, setExpanded] = useState5(false);
+      const [expanded, setExpanded] = useState6(false);
       const chart = useChartTheme();
       const budget = team.max_budget ?? 0;
       const spend = team.spend ?? 0;
@@ -2799,24 +3179,24 @@ var init_TeamUsage = __esm({
       const dailyData = usage?.daily_usage?.map((d) => ({ date: d.date, spend: d.spend })) ?? [];
       const renderDailySpendSection = () => {
         if (usageLoading) {
-          return /* @__PURE__ */ React7.createElement(Box7, { display: "flex", justifyContent: "center", py: 3 }, /* @__PURE__ */ React7.createElement(CircularProgress4, { size: 22 }));
+          return /* @__PURE__ */ React8.createElement(Box8, { display: "flex", justifyContent: "center", py: 3 }, /* @__PURE__ */ React8.createElement(CircularProgress5, { size: 22 }));
         }
         if (dailyData.length === 0) return null;
-        return /* @__PURE__ */ React7.createElement(Box7, { mb: 2.5 }, /* @__PURE__ */ React7.createElement(
-          Typography7,
+        return /* @__PURE__ */ React8.createElement(Box8, { mb: 2.5 }, /* @__PURE__ */ React8.createElement(
+          Typography8,
           {
             variant: "caption",
             color: "text.secondary",
             sx: { display: "block", fontSize: 11, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase", mb: 1 }
           },
           "Daily spend"
-        ), /* @__PURE__ */ React7.createElement(Box7, { height: 150 }, /* @__PURE__ */ React7.createElement(ResponsiveContainer2, { width: "100%", height: "100%" }, /* @__PURE__ */ React7.createElement(AreaChart2, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ React7.createElement(CartesianGrid2, { ...chart.grid }), /* @__PURE__ */ React7.createElement(XAxis2, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React7.createElement(YAxis2, { tickFormatter: fmtUsdCompact, width: 52, ...chart.axis }), /* @__PURE__ */ React7.createElement(
+        ), /* @__PURE__ */ React8.createElement(Box8, { height: 150 }, /* @__PURE__ */ React8.createElement(ResponsiveContainer2, { width: "100%", height: "100%" }, /* @__PURE__ */ React8.createElement(AreaChart2, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ React8.createElement(CartesianGrid2, { ...chart.grid }), /* @__PURE__ */ React8.createElement(XAxis2, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React8.createElement(YAxis2, { tickFormatter: fmtUsdCompact, width: 52, ...chart.axis }), /* @__PURE__ */ React8.createElement(
           Tooltip2,
           {
             cursor: chart.cursor,
-            content: /* @__PURE__ */ React7.createElement(ChartTooltip, { valueFormatter: (v) => `$${v.toFixed(4)}` })
+            content: /* @__PURE__ */ React8.createElement(ChartTooltip, { valueFormatter: (v) => `$${v.toFixed(4)}` })
           }
-        ), /* @__PURE__ */ React7.createElement(
+        ), /* @__PURE__ */ React8.createElement(
           Area2,
           {
             type: "monotone",
@@ -2829,8 +3209,8 @@ var init_TeamUsage = __esm({
           }
         )))));
       };
-      const sectionLabel = (label) => /* @__PURE__ */ React7.createElement(
-        Typography7,
+      const sectionLabel = (label) => /* @__PURE__ */ React8.createElement(
+        Typography8,
         {
           variant: "caption",
           color: "text.secondary",
@@ -2838,8 +3218,8 @@ var init_TeamUsage = __esm({
         },
         label
       );
-      return /* @__PURE__ */ React7.createElement(Paper5, { variant: "outlined", sx: { borderRadius: 2, p: 2.5 } }, /* @__PURE__ */ React7.createElement(Box7, { display: "flex", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React7.createElement(
-        Box7,
+      return /* @__PURE__ */ React8.createElement(Paper6, { variant: "outlined", sx: { borderRadius: 2, p: 2.5 } }, /* @__PURE__ */ React8.createElement(Box8, { display: "flex", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React8.createElement(
+        Box8,
         {
           sx: (theme) => ({
             width: 36,
@@ -2849,20 +3229,20 @@ var init_TeamUsage = __esm({
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            bgcolor: alpha4(theme.palette.primary.main, 0.1),
+            bgcolor: alpha5(theme.palette.primary.main, 0.1),
             color: theme.palette.primary.main
           })
         },
-        /* @__PURE__ */ React7.createElement(Group, { fontSize: "small" })
-      ), /* @__PURE__ */ React7.createElement(Box7, { flexGrow: 1, minWidth: 0 }, /* @__PURE__ */ React7.createElement(Typography7, { variant: "subtitle1", sx: { fontWeight: 600, lineHeight: 1.3 } }, team.team_alias || "Untitled team"), /* @__PURE__ */ React7.createElement(
-        Typography7,
+        /* @__PURE__ */ React8.createElement(Group, { fontSize: "small" })
+      ), /* @__PURE__ */ React8.createElement(Box8, { flexGrow: 1, minWidth: 0 }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "subtitle1", sx: { fontWeight: 600, lineHeight: 1.3 } }, team.team_alias || "Untitled team"), /* @__PURE__ */ React8.createElement(
+        Typography8,
         {
           variant: "caption",
           color: "text.secondary",
           sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 }
         },
         team.team_id
-      )), isOver && /* @__PURE__ */ React7.createElement(StatusPill, { label: "Over budget", tone: "danger" }), isNear && /* @__PURE__ */ React7.createElement(StatusPill, { label: "Near limit", tone: "warning" }), canManage && onEditTeam && /* @__PURE__ */ React7.createElement(
+      )), isOver && /* @__PURE__ */ React8.createElement(StatusPill, { label: "Over budget", tone: "danger" }), isNear && /* @__PURE__ */ React8.createElement(StatusPill, { label: "Near limit", tone: "warning" }), canManage && onEditTeam && /* @__PURE__ */ React8.createElement(
         Button5,
         {
           size: "small",
@@ -2871,8 +3251,8 @@ var init_TeamUsage = __esm({
           sx: { textTransform: "none" }
         },
         "Edit"
-      ), /* @__PURE__ */ React7.createElement(
-        IconButton4,
+      ), /* @__PURE__ */ React8.createElement(
+        IconButton5,
         {
           size: "small",
           onClick: () => setExpanded((e) => !e),
@@ -2884,9 +3264,9 @@ var init_TeamUsage = __esm({
             transition: theme.transitions.create("transform")
           })
         },
-        /* @__PURE__ */ React7.createElement(ExpandMore2, null)
-      )), /* @__PURE__ */ React7.createElement(
-        Box7,
+        /* @__PURE__ */ React8.createElement(ExpandMore3, null)
+      )), /* @__PURE__ */ React8.createElement(
+        Box8,
         {
           sx: {
             display: "grid",
@@ -2896,35 +3276,35 @@ var init_TeamUsage = __esm({
             maxWidth: 640
           }
         },
-        /* @__PURE__ */ React7.createElement(Stat, { label: "Members", value: team.members_with_roles?.length ?? "\u2014" }),
-        /* @__PURE__ */ React7.createElement(Stat, { label: "Models", value: team.models?.length ? team.models.length : "All" }),
-        /* @__PURE__ */ React7.createElement(Stat, { label: "Budget", value: budget > 0 ? fmtUsd2(budget) : "Unlimited" }),
-        /* @__PURE__ */ React7.createElement(Stat, { label: "Spend", value: fmtUsd2(spend) }),
-        /* @__PURE__ */ React7.createElement(Stat, { label: "TPM", value: team.tpm_limit && team.tpm_limit > 0 ? team.tpm_limit.toLocaleString() : "\u2014" }),
-        /* @__PURE__ */ React7.createElement(Stat, { label: "RPM", value: team.rpm_limit && team.rpm_limit > 0 ? team.rpm_limit.toLocaleString() : "\u2014" })
-      ), budget > 0 && /* @__PURE__ */ React7.createElement(Box7, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ React7.createElement(Box7, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, fmtUsd2(spend), " of ", fmtUsd2(budget)), /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "%")), /* @__PURE__ */ React7.createElement(Meter, { value: budgetPct, tone: budgetTone2(isOver, isNear), height: 5 })), /* @__PURE__ */ React7.createElement(Collapse, { in: expanded, unmountOnExit: true }, /* @__PURE__ */ React7.createElement(Divider3, { sx: { my: 2.5 } }), /* @__PURE__ */ React7.createElement(Box7, { mb: 2.5 }, sectionLabel("Models"), team.models?.length ? /* @__PURE__ */ React7.createElement(Box7, { display: "flex", gap: 0.5, flexWrap: "wrap" }, team.models.map((m) => /* @__PURE__ */ React7.createElement(TagChip, { key: m, label: m, title: m }))) : /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", color: "text.secondary" }, "All models allowed")), renderDailySpendSection(), /* @__PURE__ */ React7.createElement(Box7, null, sectionLabel("Members"), team.members_with_roles?.length ? /* @__PURE__ */ React7.createElement(
+        /* @__PURE__ */ React8.createElement(Stat, { label: "Members", value: team.members_with_roles?.length ?? "\u2014" }),
+        /* @__PURE__ */ React8.createElement(Stat, { label: "Models", value: team.models?.length ? team.models.length : "All" }),
+        /* @__PURE__ */ React8.createElement(Stat, { label: "Budget", value: budget > 0 ? fmtUsd2(budget) : "Unlimited" }),
+        /* @__PURE__ */ React8.createElement(Stat, { label: "Spend", value: fmtUsd2(spend) }),
+        /* @__PURE__ */ React8.createElement(Stat, { label: "TPM", value: team.tpm_limit && team.tpm_limit > 0 ? team.tpm_limit.toLocaleString() : "\u2014" }),
+        /* @__PURE__ */ React8.createElement(Stat, { label: "RPM", value: team.rpm_limit && team.rpm_limit > 0 ? team.rpm_limit.toLocaleString() : "\u2014" })
+      ), budget > 0 && /* @__PURE__ */ React8.createElement(Box8, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ React8.createElement(Box8, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, fmtUsd2(spend), " of ", fmtUsd2(budget)), /* @__PURE__ */ React8.createElement(Typography8, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "%")), /* @__PURE__ */ React8.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 })), /* @__PURE__ */ React8.createElement(Collapse2, { in: expanded, unmountOnExit: true }, /* @__PURE__ */ React8.createElement(Divider3, { sx: { my: 2.5 } }), /* @__PURE__ */ React8.createElement(Box8, { mb: 2.5 }, sectionLabel("Models"), team.models?.length ? /* @__PURE__ */ React8.createElement(Box8, { display: "flex", gap: 0.5, flexWrap: "wrap" }, team.models.map((m) => /* @__PURE__ */ React8.createElement(TagChip, { key: m, label: m, title: m }))) : /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", color: "text.secondary" }, "All models allowed")), renderDailySpendSection(), /* @__PURE__ */ React8.createElement(Box8, null, sectionLabel("Members"), team.members_with_roles?.length ? /* @__PURE__ */ React8.createElement(
         TableContainer4,
         {
-          component: Paper5,
+          component: Paper6,
           variant: "outlined",
           sx: { borderRadius: 1.5 }
         },
-        /* @__PURE__ */ React7.createElement(Table4, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React7.createElement(TableHead4, null, /* @__PURE__ */ React7.createElement(TableRow4, null, /* @__PURE__ */ React7.createElement(TableCell4, null, "User"), /* @__PURE__ */ React7.createElement(TableCell4, { align: "right" }, "Role"))), /* @__PURE__ */ React7.createElement(TableBody4, null, team.members_with_roles.map((m) => /* @__PURE__ */ React7.createElement(TableRow4, { key: m.user_id }, /* @__PURE__ */ React7.createElement(TableCell4, null, m.user_email ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2" }, m.user_email), /* @__PURE__ */ React7.createElement(
-          Typography7,
+        /* @__PURE__ */ React8.createElement(Table4, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React8.createElement(TableHead4, null, /* @__PURE__ */ React8.createElement(TableRow4, null, /* @__PURE__ */ React8.createElement(TableCell4, null, "User"), /* @__PURE__ */ React8.createElement(TableCell4, { align: "right" }, "Role"))), /* @__PURE__ */ React8.createElement(TableBody4, null, team.members_with_roles.map((m) => /* @__PURE__ */ React8.createElement(TableRow4, { key: m.user_id }, /* @__PURE__ */ React8.createElement(TableCell4, null, m.user_email ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2" }, m.user_email), /* @__PURE__ */ React8.createElement(
+          Typography8,
           {
             variant: "caption",
             color: "text.secondary",
             sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 }
           },
           m.user_id
-        )) : /* @__PURE__ */ React7.createElement(
-          Typography7,
+        )) : /* @__PURE__ */ React8.createElement(
+          Typography8,
           {
             variant: "body2",
             sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }
           },
           m.user_id
-        )), /* @__PURE__ */ React7.createElement(TableCell4, { align: "right" }, /* @__PURE__ */ React7.createElement(
+        )), /* @__PURE__ */ React8.createElement(TableCell4, { align: "right" }, /* @__PURE__ */ React8.createElement(
           StatusPill,
           {
             label: m.role,
@@ -2932,7 +3312,7 @@ var init_TeamUsage = __esm({
             dot: false
           }
         ))))))
-      ) : /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", color: "text.secondary" }, "No members assigned."))));
+      ) : /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", color: "text.secondary" }, "No members assigned."))));
     };
     TeamUsage = ({
       teams,
@@ -2944,22 +3324,22 @@ var init_TeamUsage = __esm({
       canCreate,
       onCreateTeam
     }) => {
-      const createAction = canCreate && onCreateTeam ? /* @__PURE__ */ React7.createElement(
+      const createAction = canCreate && onCreateTeam ? /* @__PURE__ */ React8.createElement(
         Button5,
         {
           variant: "contained",
           color: "primary",
           disableElevation: true,
-          startIcon: /* @__PURE__ */ React7.createElement(Add3, null),
+          startIcon: /* @__PURE__ */ React8.createElement(Add3, null),
           onClick: onCreateTeam
         },
         "Create Team"
       ) : void 0;
       if (loading) {
-        return /* @__PURE__ */ React7.createElement(SectionCard, { title: "Teams", actions: createAction }, /* @__PURE__ */ React7.createElement(Skeleton4, { variant: "rounded", height: 120, sx: { mb: 2 } }), /* @__PURE__ */ React7.createElement(Skeleton4, { variant: "rounded", height: 120 }));
+        return /* @__PURE__ */ React8.createElement(SectionCard, { title: "Teams", actions: createAction }, /* @__PURE__ */ React8.createElement(Skeleton4, { variant: "rounded", height: 120, sx: { mb: 2 } }), /* @__PURE__ */ React8.createElement(Skeleton4, { variant: "rounded", height: 120 }));
       }
       if (!teams.length) {
-        return /* @__PURE__ */ React7.createElement(SectionCard, { title: "Teams", actions: createAction }, /* @__PURE__ */ React7.createElement(
+        return /* @__PURE__ */ React8.createElement(SectionCard, { title: "Teams", actions: createAction }, /* @__PURE__ */ React8.createElement(
           EmptyState,
           {
             message: "You're not a member of any LiteLLM team yet.",
@@ -2967,14 +3347,14 @@ var init_TeamUsage = __esm({
           }
         ));
       }
-      return /* @__PURE__ */ React7.createElement(
+      return /* @__PURE__ */ React8.createElement(
         SectionCard,
         {
           title: "Teams",
           subtitle: `${teams.length} team${teams.length === 1 ? "" : "s"}`,
           actions: createAction
         },
-        /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, teams.map((team) => /* @__PURE__ */ React7.createElement(
+        /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, teams.map((team) => /* @__PURE__ */ React8.createElement(
           TeamCard,
           {
             key: team.team_id,
@@ -2991,15 +3371,15 @@ var init_TeamUsage = __esm({
 });
 
 // src/components/ModelsTable.tsx
-import React8, { useState as useState6, useMemo as useMemo6, useCallback } from "react";
-import Box8 from "@mui/material/Box";
+import React9, { useState as useState7, useMemo as useMemo7, useCallback } from "react";
+import Box9 from "@mui/material/Box";
 import Table5 from "@mui/material/Table";
 import TableBody5 from "@mui/material/TableBody";
 import TableCell5 from "@mui/material/TableCell";
 import TableContainer5 from "@mui/material/TableContainer";
 import TableHead5 from "@mui/material/TableHead";
 import TableRow5 from "@mui/material/TableRow";
-import Typography8 from "@mui/material/Typography";
+import Typography9 from "@mui/material/Typography";
 import MenuItem4 from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import FormControl from "@mui/material/FormControl";
@@ -3010,8 +3390,8 @@ import { Search as Search2 } from "@mui/icons-material";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import Tooltip3 from "@mui/material/Tooltip";
 import Snackbar from "@mui/material/Snackbar";
-import Alert3 from "@mui/material/Alert";
-import { alpha as alpha5, useTheme as useTheme2 } from "@mui/material/styles";
+import Alert4 from "@mui/material/Alert";
+import { alpha as alpha6, useTheme as useTheme2 } from "@mui/material/styles";
 function isModelAllowedByTeam2(model, teamModels) {
   if (!teamModels || teamModels.length === 0 || teamModels.includes(ALL_PROXY_MODELS2)) return true;
   return teamModels.includes(model.model_name) || !!model.access_groups?.some((group) => teamModels.includes(group));
@@ -3037,18 +3417,18 @@ var init_ModelsTable = __esm({
     ALL_PROXY_MODELS2 = "all-proxy-models";
     ModelsTable = ({ allModels, teams, loading }) => {
       const theme = useTheme2();
-      const [selectedTeamId, setSelectedTeamId] = useState6("");
-      const [filterText, setFilterText] = useState6("");
-      const [copiedSnackbar, setCopiedSnackbar] = useState6(false);
-      const selectedTeam = useMemo6(
+      const [selectedTeamId, setSelectedTeamId] = useState7("");
+      const [filterText, setFilterText] = useState7("");
+      const [copiedSnackbar, setCopiedSnackbar] = useState7(false);
+      const selectedTeam = useMemo7(
         () => teams.find((t) => t.team_id === selectedTeamId) ?? null,
         [teams, selectedTeamId]
       );
-      const teamModels = useMemo6(() => {
+      const teamModels = useMemo7(() => {
         if (!selectedTeam) return [];
         return allModels.filter((model) => isModelAllowedByTeam2(model, selectedTeam.models));
       }, [allModels, selectedTeam]);
-      const filteredModels = useMemo6(() => {
+      const filteredModels = useMemo7(() => {
         const q = filterText.trim().toLowerCase();
         if (!q) return teamModels;
         return teamModels.filter(
@@ -3072,13 +3452,13 @@ var init_ModelsTable = __esm({
             return theme.palette.info.main;
         }
       };
-      return /* @__PURE__ */ React8.createElement(
+      return /* @__PURE__ */ React9.createElement(
         SectionCard,
         {
           title: "Available Models",
           subtitle: selectedTeam ? `${filteredModels.length}${filterText.trim() ? ` of ${teamModels.length}` : ""} model${filteredModels.length === 1 ? "" : "s"}` : "Select a team to view its models"
         },
-        /* @__PURE__ */ React8.createElement(Box8, { sx: { px: 2.5, pb: 2.5, pt: 1, display: "flex", gap: 2, flexWrap: "wrap" } }, /* @__PURE__ */ React8.createElement(FormControl, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ React8.createElement(InputLabel, { id: "team-select-label" }, "Team"), /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React9.createElement(Box9, { sx: { px: 2.5, pb: 2.5, pt: 1, display: "flex", gap: 2, flexWrap: "wrap" } }, /* @__PURE__ */ React9.createElement(FormControl, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ React9.createElement(InputLabel, { id: "team-select-label" }, "Team"), /* @__PURE__ */ React9.createElement(
           Select,
           {
             labelId: "team-select-label",
@@ -3086,8 +3466,8 @@ var init_ModelsTable = __esm({
             label: "Team",
             onChange: (e) => setSelectedTeamId(e.target.value)
           },
-          teams.map((t) => /* @__PURE__ */ React8.createElement(MenuItem4, { key: t.team_id, value: t.team_id }, t.team_alias ?? t.team_id))
-        )), /* @__PURE__ */ React8.createElement(
+          teams.map((t) => /* @__PURE__ */ React9.createElement(MenuItem4, { key: t.team_id, value: t.team_id }, t.team_alias ?? t.team_id))
+        )), /* @__PURE__ */ React9.createElement(
           TextField5,
           {
             label: "Filter Models",
@@ -3097,33 +3477,33 @@ var init_ModelsTable = __esm({
             disabled: !selectedTeamId,
             sx: { minWidth: 240, mb: 2 },
             InputProps: {
-              startAdornment: /* @__PURE__ */ React8.createElement(InputAdornment2, { position: "start" }, /* @__PURE__ */ React8.createElement(Search2, { fontSize: "small" }))
+              startAdornment: /* @__PURE__ */ React9.createElement(InputAdornment2, { position: "start" }, /* @__PURE__ */ React9.createElement(Search2, { fontSize: "small" }))
             }
           }
         )),
-        loading && /* @__PURE__ */ React8.createElement(EmptyState, { message: "Loading models\u2026" }),
-        !loading && !selectedTeamId && /* @__PURE__ */ React8.createElement(
+        loading && /* @__PURE__ */ React9.createElement(EmptyState, { message: "Loading models\u2026" }),
+        !loading && !selectedTeamId && /* @__PURE__ */ React9.createElement(
           EmptyState,
           {
             message: "Select a team to see available models",
             hint: "Each team may have a different set of models assigned"
           }
         ),
-        !loading && selectedTeamId && teamModels.length === 0 && /* @__PURE__ */ React8.createElement(
+        !loading && selectedTeamId && teamModels.length === 0 && /* @__PURE__ */ React9.createElement(
           EmptyState,
           {
             message: "No models available for this team",
             hint: allModels.length === 0 ? "No models are configured in the system" : "None of the team's assigned models were found in the catalog"
           }
         ),
-        !loading && selectedTeamId && teamModels.length > 0 && filteredModels.length === 0 && /* @__PURE__ */ React8.createElement(
+        !loading && selectedTeamId && teamModels.length > 0 && filteredModels.length === 0 && /* @__PURE__ */ React9.createElement(
           EmptyState,
           {
             message: "No models match your search",
             hint: "Try a different search term"
           }
         ),
-        !loading && filteredModels.length > 0 && /* @__PURE__ */ React8.createElement(TableContainer5, null, /* @__PURE__ */ React8.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React8.createElement(TableHead5, null, /* @__PURE__ */ React8.createElement(TableRow5, null, /* @__PURE__ */ React8.createElement(TableCell5, null, "Model ID"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Mode"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Input Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Output Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Input"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Output"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Capabilities"))), /* @__PURE__ */ React8.createElement(TableBody5, null, filteredModels.map((m) => /* @__PURE__ */ React8.createElement(TableRow5, { key: m.model_name, hover: true }, /* @__PURE__ */ React8.createElement(TableCell5, null, /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(Tooltip3, { title: m.model_name, placement: "top" }, /* @__PURE__ */ React8.createElement(
+        !loading && filteredModels.length > 0 && /* @__PURE__ */ React9.createElement(TableContainer5, null, /* @__PURE__ */ React9.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React9.createElement(TableHead5, null, /* @__PURE__ */ React9.createElement(TableRow5, null, /* @__PURE__ */ React9.createElement(TableCell5, null, "Model ID"), /* @__PURE__ */ React9.createElement(TableCell5, null, "Mode"), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right" }, "Input Cost"), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right" }, "Output Cost"), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right" }, "Max Input"), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right" }, "Max Output"), /* @__PURE__ */ React9.createElement(TableCell5, null, "Capabilities"))), /* @__PURE__ */ React9.createElement(TableBody5, null, filteredModels.map((m) => /* @__PURE__ */ React9.createElement(TableRow5, { key: m.model_name, hover: true }, /* @__PURE__ */ React9.createElement(TableCell5, null, /* @__PURE__ */ React9.createElement(Box9, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React9.createElement(Tooltip3, { title: m.model_name, placement: "top" }, /* @__PURE__ */ React9.createElement(
           "span",
           {
             role: "button",
@@ -3133,9 +3513,9 @@ var init_ModelsTable = __esm({
             onKeyDown: (e) => e.key === "Enter" && handleCopyModelId(m.model_name),
             style: { cursor: "pointer", display: "inline-flex" }
           },
-          /* @__PURE__ */ React8.createElement(TagChip, { label: m.model_name, title: "Copy model ID" })
-        )), /* @__PURE__ */ React8.createElement(Tooltip3, { title: "Copy model ID" }, /* @__PURE__ */ React8.createElement(
-          Box8,
+          /* @__PURE__ */ React9.createElement(TagChip, { label: m.model_name, title: "Copy model ID" })
+        )), /* @__PURE__ */ React9.createElement(Tooltip3, { title: "Copy model ID" }, /* @__PURE__ */ React9.createElement(
+          Box9,
           {
             component: "span",
             role: "button",
@@ -3145,9 +3525,9 @@ var init_ModelsTable = __esm({
             sx: quietIconButtonSx("accent"),
             style: { cursor: "pointer", display: "inline-flex" }
           },
-          /* @__PURE__ */ React8.createElement(ContentCopyIcon, { sx: { fontSize: 14 } })
-        )))), /* @__PURE__ */ React8.createElement(TableCell5, null, /* @__PURE__ */ React8.createElement(
-          Box8,
+          /* @__PURE__ */ React9.createElement(ContentCopyIcon, { sx: { fontSize: 14 } })
+        )))), /* @__PURE__ */ React9.createElement(TableCell5, null, /* @__PURE__ */ React9.createElement(
+          Box9,
           {
             component: "span",
             sx: {
@@ -3158,13 +3538,13 @@ var init_ModelsTable = __esm({
               fontSize: 11,
               fontWeight: 600,
               textTransform: "capitalize",
-              bgcolor: alpha5(modeColor(m.mode), 0.1),
+              bgcolor: alpha6(modeColor(m.mode), 0.1),
               color: modeColor(m.mode)
             }
           },
           m.mode
-        )), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.input_cost_per_token))), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.output_cost_per_token))), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_input_tokens))), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_output_tokens))), /* @__PURE__ */ React8.createElement(TableCell5, null, /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" } }, m.supports_function_calling && /* @__PURE__ */ React8.createElement(TagChip, { label: "Fn", title: "Function calling" }), m.supports_vision && /* @__PURE__ */ React8.createElement(TagChip, { label: "\u{1F441}", title: "Vision" })))))))),
-        /* @__PURE__ */ React8.createElement(
+        )), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.input_cost_per_token))), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.output_cost_per_token))), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_input_tokens))), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_output_tokens))), /* @__PURE__ */ React9.createElement(TableCell5, null, /* @__PURE__ */ React9.createElement(Box9, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" } }, m.supports_function_calling && /* @__PURE__ */ React9.createElement(TagChip, { label: "Fn", title: "Function calling" }), m.supports_vision && /* @__PURE__ */ React9.createElement(TagChip, { label: "\u{1F441}", title: "Vision" })))))))),
+        /* @__PURE__ */ React9.createElement(
           Snackbar,
           {
             open: copiedSnackbar,
@@ -3172,7 +3552,7 @@ var init_ModelsTable = __esm({
             onClose: () => setCopiedSnackbar(false),
             anchorOrigin: { vertical: "bottom", horizontal: "center" }
           },
-          /* @__PURE__ */ React8.createElement(Alert3, { severity: "success", variant: "filled", sx: { fontSize: 13 } }, "Model ID copied to clipboard")
+          /* @__PURE__ */ React9.createElement(Alert4, { severity: "success", variant: "filled", sx: { fontSize: 13 } }, "Model ID copied to clipboard")
         )
       );
     };
@@ -3180,9 +3560,9 @@ var init_ModelsTable = __esm({
 });
 
 // src/components/AuditLog.tsx
-import React9, { useState as useState7, useCallback as useCallback2 } from "react";
-import Box9 from "@mui/material/Box";
-import Typography9 from "@mui/material/Typography";
+import React10, { useState as useState8, useCallback as useCallback2 } from "react";
+import Box10 from "@mui/material/Box";
+import Typography10 from "@mui/material/Typography";
 import Table6 from "@mui/material/Table";
 import TableBody6 from "@mui/material/TableBody";
 import TableCell6 from "@mui/material/TableCell";
@@ -3193,10 +3573,10 @@ import TablePagination from "@mui/material/TablePagination";
 import TextField6 from "@mui/material/TextField";
 import MenuItem5 from "@mui/material/MenuItem";
 import Skeleton5 from "@mui/material/Skeleton";
-import Collapse2 from "@mui/material/Collapse";
-import IconButton5 from "@mui/material/IconButton";
-import Alert4 from "@mui/material/Alert";
-import { alpha as alpha6 } from "@mui/material/styles";
+import Collapse3 from "@mui/material/Collapse";
+import IconButton6 from "@mui/material/IconButton";
+import Alert5 from "@mui/material/Alert";
+import { alpha as alpha7 } from "@mui/material/styles";
 import { KeyboardArrowDown } from "@mui/icons-material";
 import { useAsync as useAsync2 } from "react-use";
 function actionTone(action) {
@@ -3219,10 +3599,10 @@ function formatDateTime(iso) {
 }
 function renderAuditLogBody(loading, entries) {
   if (loading) {
-    return /* @__PURE__ */ React9.createElement(TableRow6, null, /* @__PURE__ */ React9.createElement(TableCell6, { colSpan: 6, sx: { py: 2 } }, /* @__PURE__ */ React9.createElement(Skeleton5, { variant: "rounded", height: 160 })));
+    return /* @__PURE__ */ React10.createElement(TableRow6, null, /* @__PURE__ */ React10.createElement(TableCell6, { colSpan: 6, sx: { py: 2 } }, /* @__PURE__ */ React10.createElement(Skeleton5, { variant: "rounded", height: 160 })));
   }
   if (entries.length === 0) {
-    return /* @__PURE__ */ React9.createElement(TableRow6, null, /* @__PURE__ */ React9.createElement(TableCell6, { colSpan: 6 }, /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React10.createElement(TableRow6, null, /* @__PURE__ */ React10.createElement(TableCell6, { colSpan: 6 }, /* @__PURE__ */ React10.createElement(
       EmptyState,
       {
         message: "No audit events found",
@@ -3230,7 +3610,7 @@ function renderAuditLogBody(loading, entries) {
       }
     )));
   }
-  return entries.map((entry) => /* @__PURE__ */ React9.createElement(DetailRow, { key: entry.id, entry }));
+  return entries.map((entry) => /* @__PURE__ */ React10.createElement(DetailRow, { key: entry.id, entry }));
 }
 var ACTION_TONES, TABLE_LABELS, DetailRow, AuditLog;
 var init_AuditLog = __esm({
@@ -3252,10 +3632,10 @@ var init_AuditLog = __esm({
       LiteLLM_UserTable: "User"
     };
     DetailRow = ({ entry }) => {
-      const [open, setOpen] = useState7(false);
+      const [open, setOpen] = useState8(false);
       const hasDetail = entry.before_value || entry.updated_values;
-      return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(TableRow6, null, /* @__PURE__ */ React9.createElement(TableCell6, { sx: { width: 40, pr: 0 } }, hasDetail && /* @__PURE__ */ React9.createElement(
-        IconButton5,
+      return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(TableRow6, null, /* @__PURE__ */ React10.createElement(TableCell6, { sx: { width: 40, pr: 0 } }, hasDetail && /* @__PURE__ */ React10.createElement(
+        IconButton6,
         {
           size: "small",
           onClick: () => setOpen((o) => !o),
@@ -3267,9 +3647,9 @@ var init_AuditLog = __esm({
             transition: theme.transitions.create("transform")
           })
         },
-        /* @__PURE__ */ React9.createElement(KeyboardArrowDown, { fontSize: "small" })
-      )), /* @__PURE__ */ React9.createElement(TableCell6, { sx: { whiteSpace: "nowrap" } }, /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2", color: "text.secondary" }, formatDateTime(entry.updated_at))), /* @__PURE__ */ React9.createElement(TableCell6, null, entry.action && /* @__PURE__ */ React9.createElement(StatusPill, { label: entry.action, tone: actionTone(entry.action) })), /* @__PURE__ */ React9.createElement(TableCell6, null, /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2" }, prettyTableName(entry.table_name))), /* @__PURE__ */ React9.createElement(TableCell6, null, /* @__PURE__ */ React9.createElement(
-        Typography9,
+        /* @__PURE__ */ React10.createElement(KeyboardArrowDown, { fontSize: "small" })
+      )), /* @__PURE__ */ React10.createElement(TableCell6, { sx: { whiteSpace: "nowrap" } }, /* @__PURE__ */ React10.createElement(Typography10, { variant: "body2", color: "text.secondary" }, formatDateTime(entry.updated_at))), /* @__PURE__ */ React10.createElement(TableCell6, null, entry.action && /* @__PURE__ */ React10.createElement(StatusPill, { label: entry.action, tone: actionTone(entry.action) })), /* @__PURE__ */ React10.createElement(TableCell6, null, /* @__PURE__ */ React10.createElement(Typography10, { variant: "body2" }, prettyTableName(entry.table_name))), /* @__PURE__ */ React10.createElement(TableCell6, null, /* @__PURE__ */ React10.createElement(
+        Typography10,
         {
           variant: "body2",
           component: "code",
@@ -3278,8 +3658,8 @@ var init_AuditLog = __esm({
           sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 12 }
         },
         entry.object_id ? entry.object_id.slice(0, 20) + (entry.object_id.length > 20 ? "\u2026" : "") : "\u2014"
-      )), /* @__PURE__ */ React9.createElement(TableCell6, null, entry.changed_by ?? "\u2014")), hasDetail && /* @__PURE__ */ React9.createElement(TableRow6, { sx: { "&&:hover": { bgcolor: "transparent" } } }, /* @__PURE__ */ React9.createElement(TableCell6, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } } }, /* @__PURE__ */ React9.createElement(Collapse2, { in: open, unmountOnExit: true }, /* @__PURE__ */ React9.createElement(
-        Box9,
+      )), /* @__PURE__ */ React10.createElement(TableCell6, null, entry.changed_by ?? "\u2014")), hasDetail && /* @__PURE__ */ React10.createElement(TableRow6, { sx: { "&&:hover": { bgcolor: "transparent" } } }, /* @__PURE__ */ React10.createElement(TableCell6, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } } }, /* @__PURE__ */ React10.createElement(Collapse3, { in: open, unmountOnExit: true }, /* @__PURE__ */ React10.createElement(
+        Box10,
         {
           display: "flex",
           gap: 2,
@@ -3288,11 +3668,11 @@ var init_AuditLog = __esm({
             p: 2,
             mb: 1.5,
             borderRadius: 1.5,
-            bgcolor: alpha6(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.05 : 0.03)
+            bgcolor: alpha7(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.05 : 0.03)
           })
         },
-        entry.before_value && /* @__PURE__ */ React9.createElement(Box9, { flex: 1, minWidth: 200 }, /* @__PURE__ */ React9.createElement(
-          Typography9,
+        entry.before_value && /* @__PURE__ */ React10.createElement(Box10, { flex: 1, minWidth: 200 }, /* @__PURE__ */ React10.createElement(
+          Typography10,
           {
             variant: "caption",
             color: "text.secondary",
@@ -3301,9 +3681,9 @@ var init_AuditLog = __esm({
             sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" }
           },
           "Before"
-        ), /* @__PURE__ */ React9.createElement(Typography9, { 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__ */ React9.createElement(Box9, { flex: 1, minWidth: 200 }, /* @__PURE__ */ React9.createElement(
-          Typography9,
+        ), /* @__PURE__ */ React10.createElement(Typography10, { 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__ */ React10.createElement(Box10, { flex: 1, minWidth: 200 }, /* @__PURE__ */ React10.createElement(
+          Typography10,
           {
             variant: "caption",
             color: "text.secondary",
@@ -3312,13 +3692,13 @@ var init_AuditLog = __esm({
             sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" }
           },
           "After"
-        ), /* @__PURE__ */ React9.createElement(Typography9, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.updated_values, null, 2)))
+        ), /* @__PURE__ */ React10.createElement(Typography10, { 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] = useState7(0);
-      const [pageSize, setPageSize] = useState7(25);
-      const [filters, setFilters] = useState7({});
+      const [page, setPage] = useState8(0);
+      const [pageSize, setPageSize] = useState8(25);
+      const [filters, setFilters] = useState8({});
       const fetchParams = useCallback2(
         () => ({ page: page + 1, page_size: pageSize, ...filters }),
         [page, pageSize, filters]
@@ -3329,13 +3709,13 @@ var init_AuditLog = __esm({
       );
       const entries = value?.audit_logs ?? [];
       const total = value?.total ?? 0;
-      return /* @__PURE__ */ React9.createElement(
+      return /* @__PURE__ */ React10.createElement(
         SectionCard,
         {
           title: "Audit Log",
           subtitle: loading ? "Loading\u2026" : `${total.toLocaleString()} event${total === 1 ? "" : "s"}`,
           flush: true,
-          actions: /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+          actions: /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
             TextField6,
             {
               size: "small",
@@ -3348,12 +3728,12 @@ var init_AuditLog = __esm({
               },
               sx: { minWidth: 150 }
             },
-            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "" }, "All actions"),
-            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "created" }, "Created"),
-            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "updated" }, "Updated"),
-            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "deleted" }, "Deleted"),
-            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "blocked" }, "Blocked")
-          ), /* @__PURE__ */ React9.createElement(
+            /* @__PURE__ */ React10.createElement(MenuItem5, { value: "" }, "All actions"),
+            /* @__PURE__ */ React10.createElement(MenuItem5, { value: "created" }, "Created"),
+            /* @__PURE__ */ React10.createElement(MenuItem5, { value: "updated" }, "Updated"),
+            /* @__PURE__ */ React10.createElement(MenuItem5, { value: "deleted" }, "Deleted"),
+            /* @__PURE__ */ React10.createElement(MenuItem5, { value: "blocked" }, "Blocked")
+          ), /* @__PURE__ */ React10.createElement(
             TextField6,
             {
               size: "small",
@@ -3366,13 +3746,13 @@ var init_AuditLog = __esm({
               },
               sx: { minWidth: 150 }
             },
-            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "" }, "All tables"),
-            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "LiteLLM_VerificationToken" }, "Key"),
-            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "LiteLLM_TeamTable" }, "Team"),
-            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "LiteLLM_TeamMembership" }, "Team member"),
-            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "LiteLLM_ObjectPermissionTable" }, "Team access (KB / MCP)"),
-            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "LiteLLM_UserTable" }, "User")
-          ), /* @__PURE__ */ React9.createElement(
+            /* @__PURE__ */ React10.createElement(MenuItem5, { value: "" }, "All tables"),
+            /* @__PURE__ */ React10.createElement(MenuItem5, { value: "LiteLLM_VerificationToken" }, "Key"),
+            /* @__PURE__ */ React10.createElement(MenuItem5, { value: "LiteLLM_TeamTable" }, "Team"),
+            /* @__PURE__ */ React10.createElement(MenuItem5, { value: "LiteLLM_TeamMembership" }, "Team member"),
+            /* @__PURE__ */ React10.createElement(MenuItem5, { value: "LiteLLM_ObjectPermissionTable" }, "Team access (KB / MCP)"),
+            /* @__PURE__ */ React10.createElement(MenuItem5, { value: "LiteLLM_UserTable" }, "User")
+          ), /* @__PURE__ */ React10.createElement(
             TextField6,
             {
               size: "small",
@@ -3386,9 +3766,9 @@ var init_AuditLog = __esm({
             }
           ))
         },
-        error && /* @__PURE__ */ React9.createElement(Box9, { px: 2.5, pb: 2 }, /* @__PURE__ */ React9.createElement(Alert4, { severity: "error" }, error.message)),
-        /* @__PURE__ */ React9.createElement(TableContainer6, null, /* @__PURE__ */ React9.createElement(Table6, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React9.createElement(TableHead6, null, /* @__PURE__ */ React9.createElement(TableRow6, null, /* @__PURE__ */ React9.createElement(TableCell6, { sx: { width: 40 } }), /* @__PURE__ */ React9.createElement(TableCell6, null, "Time"), /* @__PURE__ */ React9.createElement(TableCell6, null, "Action"), /* @__PURE__ */ React9.createElement(TableCell6, null, "Table"), /* @__PURE__ */ React9.createElement(TableCell6, null, "Object ID"), /* @__PURE__ */ React9.createElement(TableCell6, null, "Changed By"))), /* @__PURE__ */ React9.createElement(TableBody6, null, renderAuditLogBody(loading, entries)))),
-        /* @__PURE__ */ React9.createElement(
+        error && /* @__PURE__ */ React10.createElement(Box10, { px: 2.5, pb: 2 }, /* @__PURE__ */ React10.createElement(Alert5, { severity: "error" }, error.message)),
+        /* @__PURE__ */ React10.createElement(TableContainer6, null, /* @__PURE__ */ React10.createElement(Table6, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React10.createElement(TableHead6, null, /* @__PURE__ */ React10.createElement(TableRow6, null, /* @__PURE__ */ React10.createElement(TableCell6, { sx: { width: 40 } }), /* @__PURE__ */ React10.createElement(TableCell6, null, "Time"), /* @__PURE__ */ React10.createElement(TableCell6, null, "Action"), /* @__PURE__ */ React10.createElement(TableCell6, null, "Table"), /* @__PURE__ */ React10.createElement(TableCell6, null, "Object ID"), /* @__PURE__ */ React10.createElement(TableCell6, null, "Changed By"))), /* @__PURE__ */ React10.createElement(TableBody6, null, renderAuditLogBody(loading, entries)))),
+        /* @__PURE__ */ React10.createElement(
           TablePagination,
           {
             component: "div",
@@ -3443,17 +3823,18 @@ var LiteLLMPage_exports = {};
 __export(LiteLLMPage_exports, {
   LiteLLMPage: () => LiteLLMPage
 });
-import React10, { useState as useState8, useCallback as useCallback3, useMemo as useMemo7 } from "react";
-import Box10 from "@mui/material/Box";
+import React11, { useState as useState9, useCallback as useCallback3, useMemo as useMemo8 } from "react";
+import Box11 from "@mui/material/Box";
 import Snackbar2 from "@mui/material/Snackbar";
-import Alert5 from "@mui/material/Alert";
-import CircularProgress5 from "@mui/material/CircularProgress";
-import Typography10 from "@mui/material/Typography";
-import Paper6 from "@mui/material/Paper";
+import Alert6 from "@mui/material/Alert";
+import CircularProgress6 from "@mui/material/CircularProgress";
+import Typography11 from "@mui/material/Typography";
+import Paper7 from "@mui/material/Paper";
 import Tabs2 from "@mui/material/Tabs";
 import Tab2 from "@mui/material/Tab";
+import Grid2 from "@mui/material/Grid";
 import { useAsync as useAsync3, useAsyncRetry } from "react-use";
-import { useApi as useApi2 } from "@backstage/core-plugin-api";
+import { useApi as useApi3 } from "@backstage/core-plugin-api";
 import { usePermission } from "@backstage/plugin-permission-react";
 function initDateRange() {
   let preset = "7d";
@@ -3478,6 +3859,7 @@ var init_LiteLLMPage = __esm({
     init_GenerateKeyDialog();
     init_ManageTeamDialog();
     init_UsageStats();
+    init_LiteLLMBudgetWidget();
     init_TeamUsage();
     init_ModelsTable();
     init_AuditLog();
@@ -3485,21 +3867,21 @@ var init_LiteLLMPage = __esm({
     init_permissions();
     PERIOD_LS_KEY2 = "litellm_usage_period";
     LiteLLMPage = () => {
-      const api = useApi2(liteLlmApiRef);
-      const [dateRange, setDateRange] = useState8(initDateRange);
-      const [currentPreset, setCurrentPreset] = useState8(() => {
+      const api = useApi3(liteLlmApiRef);
+      const [dateRange, setDateRange] = useState9(initDateRange);
+      const [currentPreset, setCurrentPreset] = useState9(() => {
         try {
           return localStorage.getItem(PERIOD_LS_KEY2) ?? "7d";
         } catch {
           return "7d";
         }
       });
-      const [activeTab, setActiveTab] = useState8("overview");
-      const [snackbar, setSnackbar] = useState8(null);
-      const [generateDialogOpen, setGenerateDialogOpen] = useState8(false);
-      const [manageTeam, setManageTeam] = useState8(null);
-      const [teamUsageCache, setTeamUsageCache] = useState8({});
-      const [teamUsageLoading, setTeamUsageLoading] = useState8({});
+      const [activeTab, setActiveTab] = useState9("overview");
+      const [snackbar, setSnackbar] = useState9(null);
+      const [generateDialogOpen, setGenerateDialogOpen] = useState9(false);
+      const [manageTeam, setManageTeam] = useState9(null);
+      const [teamUsageCache, setTeamUsageCache] = useState9({});
+      const [teamUsageLoading, setTeamUsageLoading] = useState9({});
       const { value: userInfo, loading: userLoading, error: userError } = useAsync3(
         () => api.getUserInfo(),
         [api]
@@ -3543,7 +3925,7 @@ var init_LiteLLMPage = __esm({
         async () => objectPermsEnabled ? api.getMcpServers().catch(() => []) : [],
         [api, objectPermsEnabled]
       );
-      const teams = useMemo7(() => {
+      const teams = useMemo8(() => {
         if (!allTeams?.length) return [];
         if (!userInfo) return allTeams;
         const userId = userInfo.user_id;
@@ -3582,7 +3964,7 @@ var init_LiteLLMPage = __esm({
           setTeamUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
       }, [api, dateRange, teamUsageCache, teamUsageLoading]);
-      const allowedModels = useMemo7(() => {
+      const allowedModels = useMemo8(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
         const teamModels = teams?.flatMap((t) => t.models ?? []);
@@ -3690,14 +4072,14 @@ var init_LiteLLMPage = __esm({
       );
       const isInitialLoading = userLoading && !userInfo;
       if (isInitialLoading) {
-        return /* @__PURE__ */ React10.createElement(Box10, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ React10.createElement(CircularProgress5, null));
+        return /* @__PURE__ */ React11.createElement(Box11, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ React11.createElement(CircularProgress6, null));
       }
       if (userError || !userInfo) {
         const isProvisioningEnabled = userError?.body?.provisioning === true;
         const hint = userError?.body?.hint;
-        return /* @__PURE__ */ React10.createElement(Box10, { p: 3 }, /* @__PURE__ */ React10.createElement(Paper6, { sx: { p: 3 } }, /* @__PURE__ */ React10.createElement(Typography10, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ React10.createElement(Typography10, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ React10.createElement(Typography10, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ React10.createElement(Typography10, { 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__ */ React11.createElement(Box11, { p: 3 }, /* @__PURE__ */ React11.createElement(Paper7, { sx: { p: 3 } }, /* @__PURE__ */ React11.createElement(Typography11, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ React11.createElement(Typography11, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ React11.createElement(Typography11, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ React11.createElement(Typography11, { variant: "body2", color: "text.secondary" }, isProvisioningEnabled ? "Auto-provisioning is enabled but failed. Check the backend logs." : "Set litellm.provisioning.enabled: true in app-config.yaml to enable auto-provisioning, or ask your administrator to create the account manually.")));
       }
-      const pageTabs = /* @__PURE__ */ React10.createElement(
+      const pageTabs = /* @__PURE__ */ React11.createElement(
         Tabs2,
         {
           value: activeTab,
@@ -3710,13 +4092,13 @@ var init_LiteLLMPage = __esm({
             '& [class*="MuiTab-root"]': { minHeight: 44, textTransform: "none", fontSize: 14 }
           }
         },
-        /* @__PURE__ */ React10.createElement(Tab2, { label: "Overview", value: "overview" }),
-        /* @__PURE__ */ React10.createElement(Tab2, { label: "Keys", value: "keys" }),
-        /* @__PURE__ */ React10.createElement(Tab2, { label: "Teams", value: "teams" }),
-        /* @__PURE__ */ React10.createElement(Tab2, { label: "Models", value: "models" }),
-        userInfo.can_view_audit && /* @__PURE__ */ React10.createElement(Tab2, { label: "Audit Log", value: "audit" })
+        /* @__PURE__ */ React11.createElement(Tab2, { label: "Overview", value: "overview" }),
+        /* @__PURE__ */ React11.createElement(Tab2, { label: "Keys", value: "keys" }),
+        /* @__PURE__ */ React11.createElement(Tab2, { label: "Teams", value: "teams" }),
+        /* @__PURE__ */ React11.createElement(Tab2, { label: "Models", value: "models" }),
+        userInfo.can_view_audit && /* @__PURE__ */ React11.createElement(Tab2, { label: "Audit Log", value: "audit" })
       );
-      return /* @__PURE__ */ React10.createElement(Box10, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React10.createElement(
+      return /* @__PURE__ */ React11.createElement(Box11, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React11.createElement(
         DashboardHeader,
         {
           userInfo,
@@ -3726,7 +4108,7 @@ var init_LiteLLMPage = __esm({
           onGenerateKeyClick: () => setGenerateDialogOpen(true),
           tabs: pageTabs
         }
-      ), activeTab === "overview" && /* @__PURE__ */ React10.createElement(
+      ), activeTab === "overview" && /* @__PURE__ */ React11.createElement(Grid2, { container: true, spacing: 2, alignItems: "flex-start" }, /* @__PURE__ */ React11.createElement(Grid2, { item: true, xs: 12, lg: 8 }, /* @__PURE__ */ React11.createElement(
         UsageStats,
         {
           usage: usage ?? null,
@@ -3737,7 +4119,7 @@ var init_LiteLLMPage = __esm({
           loading: usageLoading,
           userInfo
         }
-      ), activeTab === "keys" && /* @__PURE__ */ React10.createElement(
+      )), /* @__PURE__ */ React11.createElement(Grid2, { item: true, xs: 12, lg: 4 }, /* @__PURE__ */ React11.createElement(LiteLLMBudgetWidget, { compact: true, collapsible: true }))), activeTab === "keys" && /* @__PURE__ */ React11.createElement(
         KeysTable,
         {
           keys: keys ?? [],
@@ -3756,7 +4138,7 @@ var init_LiteLLMPage = __esm({
         for (const t of managedTeams ?? []) teamsById.set(t.team_id, t);
         for (const t of teams ?? []) teamsById.set(t.team_id, t);
         const visibleTeams = Array.from(teamsById.values());
-        return /* @__PURE__ */ React10.createElement(
+        return /* @__PURE__ */ React11.createElement(
           TeamUsage,
           {
             teams: visibleTeams,
@@ -3772,14 +4154,14 @@ var init_LiteLLMPage = __esm({
             onCreateTeam: () => setManageTeam({ mode: "create" })
           }
         );
-      })(), activeTab === "models" && /* @__PURE__ */ React10.createElement(
+      })(), activeTab === "models" && /* @__PURE__ */ React11.createElement(
         ModelsTable,
         {
           allModels: allModels ?? [],
           teams: teams ?? [],
           loading: modelsLoading
         }
-      ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ React10.createElement(AuditLog, { api }), /* @__PURE__ */ React10.createElement(
+      ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ React11.createElement(AuditLog, { api }), /* @__PURE__ */ React11.createElement(
         GenerateKeyDialog,
         {
           open: generateDialogOpen,
@@ -3792,7 +4174,7 @@ var init_LiteLLMPage = __esm({
           onGenerateKey: handleGenerateKey,
           onGetConfig: () => api.getConfig()
         }
-      ), /* @__PURE__ */ React10.createElement(
+      ), /* @__PURE__ */ React11.createElement(
         ManageTeamDialog,
         {
           open: !!manageTeam,
@@ -3854,7 +4236,7 @@ var init_LiteLLMPage = __esm({
             refreshTeams();
           }
         }
-      ), /* @__PURE__ */ React10.createElement(
+      ), /* @__PURE__ */ React11.createElement(
         Snackbar2,
         {
           open: !!snackbar,
@@ -3862,7 +4244,7 @@ var init_LiteLLMPage = __esm({
           onClose: () => setSnackbar(null),
           anchorOrigin: { vertical: "bottom", horizontal: "right" }
         },
-        snackbar ? /* @__PURE__ */ React10.createElement(Alert5, { severity: snackbar.severity, onClose: () => setSnackbar(null) }, snackbar.message) : void 0
+        snackbar ? /* @__PURE__ */ React11.createElement(Alert6, { severity: snackbar.severity, onClose: () => setSnackbar(null) }, snackbar.message) : void 0
       ));
     };
   }
@@ -3870,7 +4252,7 @@ var init_LiteLLMPage = __esm({
 
 // src/plugin.tsx
 init_api();
-import React11 from "react";
+import React12 from "react";
 import { TrendingUp as TrendingUpIcon } from "@mui/icons-material";
 import {
   createFrontendPlugin,
@@ -3889,10 +4271,10 @@ var liteLlmPage = PageBlueprint.make({
   params: {
     path: "/litellm",
     title: "LiteLLM",
-    icon: /* @__PURE__ */ React11.createElement(TrendingUpIcon, null),
+    icon: /* @__PURE__ */ React12.createElement(TrendingUpIcon, null),
     loader: async () => {
       const { LiteLLMPage: LiteLLMPage2 } = await Promise.resolve().then(() => (init_LiteLLMPage(), LiteLLMPage_exports));
-      return /* @__PURE__ */ React11.createElement(LiteLLMPage2, null);
+      return /* @__PURE__ */ React12.createElement(LiteLLMPage2, null);
     }
   }
 });
@@ -3911,18 +4293,18 @@ init_TeamUsage();
 // src/components/LiteLLMHomeWidget.tsx
 init_api();
 init_format();
-import React12, { useState as useState9, useEffect as useEffect3 } from "react";
-import Paper7 from "@mui/material/Paper";
-import Box11 from "@mui/material/Box";
-import Typography11 from "@mui/material/Typography";
+import React13, { useState as useState10, useEffect as useEffect4 } from "react";
+import Paper8 from "@mui/material/Paper";
+import Box12 from "@mui/material/Box";
+import Typography12 from "@mui/material/Typography";
 import FormControl2 from "@mui/material/FormControl";
 import Select2 from "@mui/material/Select";
 import MenuItem6 from "@mui/material/MenuItem";
-import Grid2 from "@mui/material/Grid";
-import CircularProgress6 from "@mui/material/CircularProgress";
-import Alert6 from "@mui/material/Alert";
+import Grid3 from "@mui/material/Grid";
+import CircularProgress7 from "@mui/material/CircularProgress";
+import Alert7 from "@mui/material/Alert";
 import { AreaChart as AreaChart3, Area as Area3, ResponsiveContainer as ResponsiveContainer3 } from "recharts";
-import { useApi as useApi3 } from "@backstage/core-plugin-api";
+import { useApi as useApi4 } from "@backstage/core-plugin-api";
 function presetToDateRange(preset) {
   const end = /* @__PURE__ */ new Date();
   const start = /* @__PURE__ */ new Date();
@@ -3935,19 +4317,19 @@ function presetToDateRange(preset) {
   }
   return { start, end };
 }
-var Kpi = ({ label, value }) => /* @__PURE__ */ React12.createElement(Box11, null, /* @__PURE__ */ React12.createElement(Typography11, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ React12.createElement(Typography11, { variant: "subtitle1", fontWeight: 600 }, value));
+var Kpi = ({ label, value }) => /* @__PURE__ */ React13.createElement(Box12, null, /* @__PURE__ */ React13.createElement(Typography12, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ React13.createElement(Typography12, { variant: "subtitle1", fontWeight: 600 }, value));
 var LiteLLMHomeWidget = ({
   defaultPeriod = "7d",
   title = "LiteLLM Usage"
 }) => {
-  const api = useApi3(liteLlmApiRef);
-  const [period, setPeriod] = useState9(defaultPeriod);
-  const [loading, setLoading] = useState9(true);
-  const [usageError, setUsageError] = useState9(null);
-  const [keysError, setKeysError] = useState9(null);
-  const [usage, setUsage] = useState9(null);
-  const [keys, setKeys] = useState9([]);
-  useEffect3(() => {
+  const api = useApi4(liteLlmApiRef);
+  const [period, setPeriod] = useState10(defaultPeriod);
+  const [loading, setLoading] = useState10(true);
+  const [usageError, setUsageError] = useState10(null);
+  const [keysError, setKeysError] = useState10(null);
+  const [usage, setUsage] = useState10(null);
+  const [keys, setKeys] = useState10([]);
+  useEffect4(() => {
     let cancelled = false;
     setLoading(true);
     setUsageError(null);
@@ -3984,17 +4366,17 @@ var LiteLLMHomeWidget = ({
     spend: d.spend
   }));
   const hasSparkline = dailyData.length > 0;
-  return /* @__PURE__ */ React12.createElement(Paper7, { sx: { p: 2 } }, /* @__PURE__ */ React12.createElement(Box11, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ React12.createElement(Typography11, { variant: "h6" }, title), /* @__PURE__ */ React12.createElement(FormControl2, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(Paper8, { sx: { p: 2 } }, /* @__PURE__ */ React13.createElement(Box12, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ React13.createElement(Typography12, { variant: "h6" }, title), /* @__PURE__ */ React13.createElement(FormControl2, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ React13.createElement(
     Select2,
     {
       value: period,
       onChange: (e) => setPeriod(e.target.value),
       displayEmpty: true
     },
-    /* @__PURE__ */ React12.createElement(MenuItem6, { value: "today" }, "Today"),
-    /* @__PURE__ */ React12.createElement(MenuItem6, { value: "7d" }, "7d"),
-    /* @__PURE__ */ React12.createElement(MenuItem6, { value: "30d" }, "30d")
-  ))), loading && /* @__PURE__ */ React12.createElement(Box11, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ React12.createElement(CircularProgress6, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ React12.createElement(Alert6, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ React12.createElement(React12.Fragment, null, partialFailure && /* @__PURE__ */ React12.createElement(Alert6, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ React12.createElement(Grid2, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ React12.createElement(Box11, { height: 120 }, /* @__PURE__ */ React12.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React12.createElement(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(MenuItem6, { value: "today" }, "Today"),
+    /* @__PURE__ */ React13.createElement(MenuItem6, { value: "7d" }, "7d"),
+    /* @__PURE__ */ React13.createElement(MenuItem6, { value: "30d" }, "30d")
+  ))), loading && /* @__PURE__ */ React13.createElement(Box12, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ React13.createElement(CircularProgress7, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ React13.createElement(Alert7, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ React13.createElement(React13.Fragment, null, partialFailure && /* @__PURE__ */ React13.createElement(Alert7, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ React13.createElement(Grid3, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ React13.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React13.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ React13.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React13.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ React13.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React13.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ React13.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React13.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ React13.createElement(Box12, { height: 120 }, /* @__PURE__ */ React13.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React13.createElement(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React13.createElement(
     Area3,
     {
       type: "monotone",
@@ -4009,6 +4391,7 @@ var LiteLLMHomeWidget = ({
 };
 
 // src/index.ts
+init_LiteLLMBudgetWidget();
 init_GenerateKeyDialog();
 init_ManageTeamDialog();
 init_api();
@@ -4017,6 +4400,7 @@ export {
   DashboardHeader,
   GenerateKeyDialog,
   KeysTable,
+  LiteLLMBudgetWidget,
   LiteLLMHomeWidget,
   LiteLLMPage,
   LiteLlmApi,