@acarmisc/backstage-plugin-litellm 0.34.0 → 0.36.0

package/dist/index.cjs.js

@@ -257,6 +257,10 @@ var init_api = __esm({
       async listModels() {
         return this.get("/models");
       }
+      /** Mints (or rotates) the caller's connect-flow key, optionally bound to one of their teams. */
+      async connectLocalClient(redirectUri, team) {
+        return this.post("/opencode/connect", { redirect_uri: redirectUri, team });
+      }
       async getTeams() {
         return this.get("/teams");
       }
@@ -307,6 +311,12 @@ var init_api = __esm({
           end_date: endDate
         });
       }
+      async getTeamMemberUsage(teamId, startDate, endDate) {
+        return this.get(`/teams/${encodeURIComponent(teamId)}/usage/members`, {
+          start_date: startDate,
+          end_date: endDate
+        });
+      }
       async getConfig() {
         return this.get("/config");
       }
@@ -4986,7 +4996,7 @@ function budgetStatValue(hidden, budget) {
   if (budget > 0) return fmtUsd2(budget);
   return "Unlimited";
 }
-var import_react10, import_Paper8, import_Box14, import_Typography12, import_Skeleton5, import_Divider3, import_Table4, import_TableBody4, import_TableCell4, import_TableHead4, import_TableRow4, import_TableContainer4, import_Collapse2, import_IconButton6, import_Button6, import_CircularProgress4, import_styles10, import_Tooltip5, import_icons_material7, import_recharts2, import_jsx_runtime15, fmtUsd2, TeamCard, TeamUsage;
+var import_react10, import_Paper8, import_Box14, import_Typography12, import_Skeleton5, import_Divider3, import_Table4, import_TableBody4, import_TableCell4, import_TableHead4, import_TableRow4, import_TableContainer4, import_Collapse2, import_IconButton6, import_Button6, import_CircularProgress4, import_styles10, import_Tooltip5, import_icons_material7, import_recharts2, import_jsx_runtime15, fmtUsd2, monoSx, MemberUsageTable, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
     "use strict";
@@ -5013,7 +5023,43 @@ var init_TeamUsage = __esm({
     init_ui();
     import_jsx_runtime15 = require("react/jsx-runtime");
     fmtUsd2 = (n) => `$${(n ?? 0).toFixed(2)}`;
-    TeamCard = ({ team, usage, usageLoading, canManage, onEditTeam, canManageMembers, onManageMembers, onExpand }) => {
+    monoSx = { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 };
+    MemberUsageTable = ({ usage }) => {
+      const hidden = usage.budget_hidden === true;
+      if (!usage.members.length) {
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "body2", color: "text.secondary", children: "No members or activity in this period." });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableContainer4.default, { component: import_Paper8.default, variant: "outlined", sx: { borderRadius: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_Table4.default, { size: "small", sx: dataTableSx, "aria-label": "Usage by member", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableHead4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_TableRow4.default, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { children: "Member" }),
+          !hidden && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: "Spend" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: "Share" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: "Tokens" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: "Requests" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: "Success" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: "Keys" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableBody4.default, { children: usage.members.map((m) => {
+          const name = m.display_name ?? m.user_email ?? m.user_id;
+          let sub = null;
+          if (m.display_name) sub = m.user_email ?? m.user_id;
+          else if (m.user_email && m.user_id !== m.user_email) sub = m.user_id;
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_TableRow4.default, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { children: m.user_id === null ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Tooltip5.default, { title: "Activity of keys that were deleted or have no owner", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "body2", color: "text.secondary", sx: { fontStyle: "italic" }, children: "Unattributed" }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "body2", children: name }),
+              sub && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "caption", color: "text.secondary", sx: monoSx, children: sub })
+            ] }) }),
+            !hidden && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: fmtUsd2(m.spend) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: `${m.spend_share_pct.toFixed(m.spend_share_pct > 0 && m.spend_share_pct < 1 ? 1 : 0)}%` }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: fmtCompact(m.total_tokens) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: m.api_requests.toLocaleString() }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: m.success_rate === null ? "\u2014" : `${m.success_rate.toFixed(0)}%` }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: m.user_id === null ? "\u2014" : m.key_count })
+          ] }, m.user_id ?? "__unattributed");
+        }) })
+      ] }) });
+    };
+    TeamCard = ({ team, usage, usageLoading, memberUsage, memberUsageLoading, canManage, onEditTeam, canManageMembers, onManageMembers, onExpand }) => {
       const [expanded, setExpanded] = (0, import_react10.useState)(false);
       const chart = useChartTheme();
       const handleExpandChange = (newExpanded) => {
@@ -5206,6 +5252,10 @@ var init_TeamUsage = __esm({
             team.models?.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box14.default, { display: "flex", gap: 0.5, flexWrap: "wrap", children: team.models.map((m) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TagChip, { label: m, title: m }, m)) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "body2", color: "text.secondary", children: "All models allowed" })
           ] }),
           renderDailySpendSection(),
+          (memberUsageLoading || memberUsage) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_Box14.default, { mb: 2.5, children: [
+            sectionLabel("Usage by member"),
+            memberUsage ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemberUsageTable, { usage: memberUsage }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box14.default, { display: "flex", justifyContent: "center", py: 2, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_CircularProgress4.default, { size: 22 }) })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_Box14.default, { children: [
             sectionLabel("Members"),
             team.members_with_roles?.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -5260,6 +5310,8 @@ var init_TeamUsage = __esm({
       loading,
       getTeamUsage,
       getTeamUsageLoading,
+      getTeamMemberUsage,
+      getTeamMemberUsageLoading,
       canManage,
       onEditTeam,
       canCreate,
@@ -5319,6 +5371,8 @@ var init_TeamUsage = __esm({
               team,
               usage: getTeamUsage(team.team_id),
               usageLoading: getTeamUsageLoading(team.team_id),
+              memberUsage: getTeamMemberUsage?.(team.team_id) ?? null,
+              memberUsageLoading: getTeamMemberUsageLoading?.(team.team_id) ?? false,
               canManage,
               onEditTeam,
               canManageMembers: canManageMembers?.(team),
@@ -6125,6 +6179,8 @@ var init_LiteLLMPage = __esm({
       const keyFormOpen = generateDialogOpen || !!keyToEdit;
       const [teamUsageCache, setTeamUsageCache] = (0, import_react13.useState)({});
       const [teamUsageLoading, setTeamUsageLoading] = (0, import_react13.useState)({});
+      const [memberUsageCache, setMemberUsageCache] = (0, import_react13.useState)({});
+      const [memberUsageLoading, setMemberUsageLoading] = (0, import_react13.useState)({});
       const { value: userInfo, loading: userLoading, error: userError } = (0, import_react_use2.useAsync)(
         () => api.getUserInfo(),
         [api]
@@ -6185,6 +6241,8 @@ var init_LiteLLMPage = __esm({
         }
         setTeamUsageCache({});
         setTeamUsageLoading({});
+        setMemberUsageCache({});
+        setMemberUsageLoading({});
       }, [setDateRange, setCurrentPreset]);
       const loadTeamUsage = (0, import_react13.useCallback)(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
@@ -6200,6 +6258,20 @@ var init_LiteLLMPage = __esm({
           setTeamUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
       }, [api, dateRange, teamUsageCache, teamUsageLoading]);
+      const loadMemberUsage = (0, import_react13.useCallback)(async (teamId) => {
+        if (memberUsageCache[teamId] !== void 0 || memberUsageLoading[teamId]) return;
+        setMemberUsageLoading((prev) => ({ ...prev, [teamId]: true }));
+        try {
+          const startDate = toLocalDay(dateRange.start);
+          const endDate = toLocalDay(dateRange.end);
+          const data = await api.getTeamMemberUsage(teamId, startDate, endDate);
+          setMemberUsageCache((prev) => ({ ...prev, [teamId]: data }));
+        } catch {
+          setMemberUsageCache((prev) => ({ ...prev, [teamId]: null }));
+        } finally {
+          setMemberUsageLoading((prev) => ({ ...prev, [teamId]: false }));
+        }
+      }, [api, dateRange, memberUsageCache, memberUsageLoading]);
       const allowedModels = (0, import_react13.useMemo)(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
@@ -6494,6 +6566,8 @@ var init_LiteLLMPage = __esm({
                 loading: teamsLoading,
                 getTeamUsage: (teamId) => teamUsageCache[teamId] ?? null,
                 getTeamUsageLoading: (teamId) => teamUsageLoading[teamId] ?? false,
+                getTeamMemberUsage: (teamId) => memberUsageCache[teamId] ?? null,
+                getTeamMemberUsageLoading: (teamId) => memberUsageLoading[teamId] ?? false,
                 canManage: teamMgmtEnabled && canManageTeam && !readOnly,
                 onEditTeam: (t) => setManageTeam({ mode: "edit", team: t }),
                 canCreate: teamMgmtEnabled && canCreateTeam && !readOnly,
@@ -6501,7 +6575,10 @@ var init_LiteLLMPage = __esm({
                 canManageMembers: (t) => teamMgmtEnabled && canManageMembers && isTeamMemberManager(t, userInfo?.user_id, memberManagerRoles, readOnly),
                 onManageMembers: (t) => setManageTeam({ mode: "members", team: t }),
                 readOnly,
-                onTeamExpand: (team) => loadTeamUsage(team.team_id)
+                onTeamExpand: (team) => {
+                  loadTeamUsage(team.team_id);
+                  if (liteLlmConfig?.teamUsage?.memberBreakdown) loadMemberUsage(team.team_id);
+                }
               }
             );
           })(),
@@ -6657,6 +6734,131 @@ var init_LiteLLMPage = __esm({
   }
 });
 
+// src/connect.ts
+function isLoopbackCallback(uri) {
+  if (!uri) return false;
+  try {
+    const url = new URL(uri);
+    return url.protocol === "http:" && (url.hostname === "localhost" || url.hostname === "127.0.0.1") && url.pathname === "/callback" && url.search === "" && url.hash === "";
+  } catch {
+    return false;
+  }
+}
+function postToLoopback(redirectUri, fields) {
+  const form = document.createElement("form");
+  form.method = "POST";
+  form.action = redirectUri;
+  for (const [name, value] of fields) {
+    const input = document.createElement("input");
+    input.type = "hidden";
+    input.name = name;
+    input.value = value;
+    form.appendChild(input);
+  }
+  document.body.appendChild(form);
+  form.submit();
+}
+var init_connect = __esm({
+  "src/connect.ts"() {
+    "use strict";
+  }
+});
+
+// src/components/ConnectPage.tsx
+var ConnectPage_exports = {};
+__export(ConnectPage_exports, {
+  ConnectPage: () => ConnectPage
+});
+var import_react14, import_Alert7, import_Box18, import_Button8, import_Checkbox3, import_FormControlLabel3, import_FormGroup, import_Paper9, import_Typography16, import_react_router_dom2, import_react_use3, import_core_plugin_api6, import_core_components4, import_jsx_runtime19, ConnectPage;
+var init_ConnectPage = __esm({
+  "src/components/ConnectPage.tsx"() {
+    "use strict";
+    import_react14 = require("react");
+    import_Alert7 = __toESM(require("@mui/material/Alert"));
+    import_Box18 = __toESM(require("@mui/material/Box"));
+    import_Button8 = __toESM(require("@mui/material/Button"));
+    import_Checkbox3 = __toESM(require("@mui/material/Checkbox"));
+    import_FormControlLabel3 = __toESM(require("@mui/material/FormControlLabel"));
+    import_FormGroup = __toESM(require("@mui/material/FormGroup"));
+    import_Paper9 = __toESM(require("@mui/material/Paper"));
+    import_Typography16 = __toESM(require("@mui/material/Typography"));
+    import_react_router_dom2 = require("react-router-dom");
+    import_react_use3 = require("react-use");
+    import_core_plugin_api6 = require("@backstage/core-plugin-api");
+    import_core_components4 = require("@backstage/core-components");
+    init_api();
+    init_connect();
+    import_jsx_runtime19 = require("react/jsx-runtime");
+    ConnectPage = () => {
+      const api = (0, import_core_plugin_api6.useApi)(liteLlmApiRef);
+      const [params] = (0, import_react_router_dom2.useSearchParams)();
+      const redirectUri = params.get("redirect_uri");
+      const state = params.get("state") ?? "";
+      const client = params.get("client") || "a local application";
+      const teams = (0, import_react_use3.useAsync)(() => api.getTeams(), [api]);
+      const [selected, setSelected] = (0, import_react14.useState)();
+      const [busy, setBusy] = (0, import_react14.useState)(false);
+      const [error, setError] = (0, import_react14.useState)();
+      if (!isLoopbackCallback(redirectUri)) {
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core_components4.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Alert7.default, { severity: "error", children: "Invalid connection link: redirect_uri must be http://localhost:<port>/callback." }) });
+      }
+      if (teams.loading) return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core_components4.Progress, {});
+      const all = teams.value ?? [];
+      const chosen = selected ?? new Set(all.map((t) => t.team_id));
+      const toggle = (id) => {
+        const next = new Set(chosen);
+        if (!next.delete(id)) next.add(id);
+        setSelected(next);
+      };
+      const connect = async () => {
+        setBusy(true);
+        setError(void 0);
+        try {
+          const ids = all.length ? all.filter((t) => chosen.has(t.team_id)).map((t) => t.team_id) : [void 0];
+          const keys = [];
+          for (const id of ids) keys.push(["key", (await api.connectLocalClient(redirectUri, id)).key]);
+          postToLoopback(redirectUri, [["state", state], ...keys]);
+        } catch (e) {
+          setError(e instanceof Error ? e.message : String(e));
+          setBusy(false);
+        }
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core_components4.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Box18.default, { maxWidth: 520, mx: "auto", mt: 4, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Paper9.default, { sx: { p: 3 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Typography16.default, { variant: "h5", gutterBottom: true, children: [
+          "Connect ",
+          client
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Typography16.default, { variant: "body2", color: "text.secondary", paragraph: true, children: [
+          client,
+          " will receive an API key for each selected team. Connecting again replaces the keys created by a previous connection."
+        ] }),
+        teams.error && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Alert7.default, { severity: "error", children: [
+          "Could not load your teams: ",
+          teams.error.message
+        ] }),
+        all.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_FormGroup.default, { sx: { mb: 2 }, children: all.map((t) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          import_FormControlLabel3.default,
+          {
+            control: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Checkbox3.default, { checked: chosen.has(t.team_id), onChange: () => toggle(t.team_id) }),
+            label: t.team_alias ?? t.team_id
+          },
+          t.team_id
+        )) }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Alert7.default, { severity: "error", sx: { mb: 2 }, children: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          import_Button8.default,
+          {
+            variant: "contained",
+            onClick: connect,
+            disabled: busy || !!teams.error || all.length > 0 && chosen.size === 0,
+            children: busy ? "Connecting\u2026" : "Connect"
+          }
+        )
+      ] }) }) });
+    };
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
@@ -6688,7 +6890,7 @@ var import_icons_material10 = require("@mui/icons-material");
 var import_frontend_plugin_api4 = require("@backstage/frontend-plugin-api");
 init_api();
 init_routes();
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var liteLlmApi = import_frontend_plugin_api4.ApiBlueprint.make({
   params: (defineParams) => defineParams({
     api: liteLlmApiRef,
@@ -6700,11 +6902,21 @@ var liteLlmPage = import_frontend_plugin_api4.PageBlueprint.make({
   params: {
     path: "/litellm",
     title: "LiteLLM",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_material10.TrendingUp, {}),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_material10.TrendingUp, {}),
     routeRef: rootRouteRef,
     loader: async () => {
       const { LiteLLMPage: LiteLLMPage2 } = await Promise.resolve().then(() => (init_LiteLLMPage(), LiteLLMPage_exports));
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LiteLLMPage2, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LiteLLMPage2, {});
+    }
+  }
+});
+var liteLlmConnectPage = import_frontend_plugin_api4.PageBlueprint.make({
+  name: "connect",
+  params: {
+    path: "/litellm/connect",
+    loader: async () => {
+      const { ConnectPage: ConnectPage2 } = await Promise.resolve().then(() => (init_ConnectPage(), ConnectPage_exports));
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ConnectPage2, {});
     }
   }
 });
@@ -6713,7 +6925,7 @@ var litellmPlugin = (0, import_frontend_plugin_api4.createFrontendPlugin)({
   routes: {
     root: rootRouteRef
   },
-  extensions: [liteLlmApi, liteLlmPage]
+  extensions: [liteLlmApi, liteLlmPage, liteLlmConnectPage]
 });
 
 // src/index.ts
@@ -6724,18 +6936,18 @@ init_UsageStats();
 init_TeamUsage();
 
 // src/components/LiteLLMHomeWidget.tsx
-var import_react14 = require("react");
-var import_Paper9 = __toESM(require("@mui/material/Paper"));
-var import_Box18 = __toESM(require("@mui/material/Box"));
-var import_Typography16 = __toESM(require("@mui/material/Typography"));
+var import_react15 = require("react");
+var import_Paper10 = __toESM(require("@mui/material/Paper"));
+var import_Box19 = __toESM(require("@mui/material/Box"));
+var import_Typography17 = __toESM(require("@mui/material/Typography"));
 var import_FormControl2 = __toESM(require("@mui/material/FormControl"));
 var import_Select2 = __toESM(require("@mui/material/Select"));
 var import_MenuItem6 = __toESM(require("@mui/material/MenuItem"));
 var import_Skeleton7 = __toESM(require("@mui/material/Skeleton"));
 var import_recharts3 = require("recharts");
-var import_core_plugin_api6 = require("@backstage/core-plugin-api");
+var import_core_plugin_api7 = require("@backstage/core-plugin-api");
 var import_frontend_plugin_api5 = require("@backstage/frontend-plugin-api");
-var import_core_components4 = require("@backstage/core-components");
+var import_core_components5 = require("@backstage/core-components");
 init_useLiteLLMProfile();
 init_api();
 init_routes();
@@ -6787,7 +6999,7 @@ function usageSummary(usage) {
 }
 
 // src/components/LiteLLMHomeWidget.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function presetToDateRange(preset) {
   const end = /* @__PURE__ */ new Date();
   const start = /* @__PURE__ */ new Date();
@@ -6805,14 +7017,14 @@ var LiteLLMHomeWidget = ({
   title = "LiteLLM Usage",
   bare = false
 }) => {
-  const api = (0, import_core_plugin_api6.useApi)(liteLlmApiRef);
+  const api = (0, import_core_plugin_api7.useApi)(liteLlmApiRef);
   const moduleRouteRef = (0, import_frontend_plugin_api5.useRouteRef)(rootRouteRef);
   const { userInfo, keys, loading: profileLoading, error: profileError } = useLiteLLMProfile();
-  const [period, setPeriod] = (0, import_react14.useState)(defaultPeriod);
-  const [usageLoading, setUsageLoading] = (0, import_react14.useState)(true);
-  const [usageError, setUsageError] = (0, import_react14.useState)(null);
-  const [usage, setUsage] = (0, import_react14.useState)(null);
-  (0, import_react14.useEffect)(() => {
+  const [period, setPeriod] = (0, import_react15.useState)(defaultPeriod);
+  const [usageLoading, setUsageLoading] = (0, import_react15.useState)(true);
+  const [usageError, setUsageError] = (0, import_react15.useState)(null);
+  const [usage, setUsage] = (0, import_react15.useState)(null);
+  (0, import_react15.useEffect)(() => {
     let cancelled = false;
     setUsageLoading(true);
     setUsageError(null);
@@ -6834,7 +7046,7 @@ var LiteLLMHomeWidget = ({
       cancelled = true;
     };
   }, [api, period]);
-  const viewState = (0, import_react14.useMemo)(
+  const viewState = (0, import_react15.useMemo)(
     () => widgetViewState({
       loading: profileLoading || usageLoading,
       error: profileError,
@@ -6844,7 +7056,7 @@ var LiteLLMHomeWidget = ({
     }),
     [profileLoading, usageLoading, profileError, userInfo, usageError, keys]
   );
-  const Wrapper = bare ? import_Box18.default : import_Paper9.default;
+  const Wrapper = bare ? import_Box19.default : import_Paper10.default;
   const partialFailure = !usageLoading && usageError && usage;
   const dailyData = (usage?.daily_usage ?? []).map((d) => ({
     date: d.date,
@@ -6856,10 +7068,10 @@ var LiteLLMHomeWidget = ({
   const endDate = toLocalDay(end);
   const dateRangeCaption = rangeCaption(startDate, endDate);
   const sparklineAriaLabelText = sparklineAriaLabel(dailyData);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Wrapper, { sx: bare ? { height: "100%" } : { p: 2, height: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_Box18.default, { display: "flex", justifyContent: bare ? "flex-end" : "space-between", alignItems: "center", mb: 1.5, children: [
-      !bare && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Typography16.default, { variant: "h6", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_FormControl2.default, { size: "small", sx: { minWidth: 90 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Wrapper, { sx: bare ? { height: "100%" } : { p: 2, height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { display: "flex", justifyContent: bare ? "flex-end" : "space-between", alignItems: "center", mb: 1.5, children: [
+      !bare && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography17.default, { variant: "h6", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_FormControl2.default, { size: "small", sx: { minWidth: 90 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         import_Select2.default,
         {
           value: period,
@@ -6867,23 +7079,23 @@ var LiteLLMHomeWidget = ({
           displayEmpty: true,
           inputProps: { "aria-label": "Usage period" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_MenuItem6.default, { value: "today", children: "Today" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_MenuItem6.default, { value: "7d", children: "7d" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_MenuItem6.default, { value: "30d", children: "30d" })
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_MenuItem6.default, { value: "today", children: "Today" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_MenuItem6.default, { value: "7d", children: "7d" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_MenuItem6.default, { value: "30d", children: "30d" })
           ]
         }
       ) })
     ] }),
-    viewState.kind === "loading" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_Box18.default, { sx: { minHeight: 120 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Skeleton7.default, { variant: "text", width: "60%", height: 20, sx: { mb: 1 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Skeleton7.default, { variant: "rectangular", width: "100%", height: 100 })
+    viewState.kind === "loading" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { minHeight: 120 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton7.default, { variant: "text", width: "60%", height: 20, sx: { mb: 1 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton7.default, { variant: "rectangular", width: "100%", height: 100 })
     ] }),
-    viewState.kind === "error" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Typography16.default, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: viewState.message }),
-    viewState.kind === "unprovisioned" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Typography16.default, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: UNPROVISIONED_MSG }),
-    viewState.kind === "ready" && partialFailure && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Box18.default, { sx: { mt: 1, mb: 1, p: 1, backgroundColor: "action.hover", borderRadius: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Typography16.default, { variant: "body2", color: "text.secondary", children: USAGE_UNAVAILABLE_MSG }) }),
-    viewState.kind === "ready" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_Typography16.default,
+    viewState.kind === "error" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography17.default, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: viewState.message }),
+    viewState.kind === "unprovisioned" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography17.default, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: UNPROVISIONED_MSG }),
+    viewState.kind === "ready" && partialFailure && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Box19.default, { sx: { mt: 1, mb: 1, p: 1, backgroundColor: "action.hover", borderRadius: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography17.default, { variant: "body2", color: "text.secondary", children: USAGE_UNAVAILABLE_MSG }) }),
+    viewState.kind === "ready" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_Typography17.default,
         {
           variant: "body2",
           sx: {
@@ -6894,18 +7106,18 @@ var LiteLLMHomeWidget = ({
           children: viewState.usageUnavailable ? USAGE_UNAVAILABLE_MSG : usageSummary(usage)
         }
       ),
-      hasSparkline && !viewState.usageUnavailable && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_Box18.default,
+      hasSparkline && !viewState.usageUnavailable && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_Box19.default,
           {
             height: 80,
             role: "img",
             "aria-label": sparklineAriaLabelText,
             sx: { mb: 0.5 },
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_recharts3.AreaChart, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_recharts3.XAxis, { dataKey: "date", hide: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartTooltip, { valueFormatter: fmtUsd }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_recharts3.AreaChart, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_recharts3.XAxis, { dataKey: "date", hide: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartTooltip, { valueFormatter: fmtUsd }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 import_recharts3.Area,
                 {
                   type: "monotone",
@@ -6921,13 +7133,13 @@ var LiteLLMHomeWidget = ({
             ] }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_Typography16.default, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Typography17.default, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: [
           "daily spend (",
           dateRangeCaption,
           ")"
         ] })
       ] }),
-      moduleRouteRef?.() && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Typography16.default, { variant: "caption", sx: { mt: 1, display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core_components4.Link, { to: moduleRouteRef(), color: "primary", children: "Open LiteLLM \u2192" }) })
+      moduleRouteRef?.() && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography17.default, { variant: "caption", sx: { mt: 1, display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core_components5.Link, { to: moduleRouteRef(), color: "primary", children: "Open LiteLLM \u2192" }) })
     ] })
   ] });
 };
@@ -6936,20 +7148,20 @@ var LiteLLMHomeWidget = ({
 init_LiteLLMBudgetWidget();
 
 // src/components/LiteLLMBudgetGauges.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_frontend_plugin_api6 = require("@backstage/frontend-plugin-api");
-var import_Paper10 = __toESM(require("@mui/material/Paper"));
-var import_Box19 = __toESM(require("@mui/material/Box"));
-var import_Button8 = __toESM(require("@mui/material/Button"));
-var import_Typography17 = __toESM(require("@mui/material/Typography"));
+var import_Paper11 = __toESM(require("@mui/material/Paper"));
+var import_Box20 = __toESM(require("@mui/material/Box"));
+var import_Button9 = __toESM(require("@mui/material/Button"));
+var import_Typography18 = __toESM(require("@mui/material/Typography"));
 var import_Skeleton8 = __toESM(require("@mui/material/Skeleton"));
 var import_Collapse4 = __toESM(require("@mui/material/Collapse"));
 var import_styles13 = require("@mui/material/styles");
 var import_useMediaQuery = __toESM(require("@mui/material/useMediaQuery"));
 var import_icons_material11 = require("@mui/icons-material");
 var import_recharts4 = require("recharts");
-var import_core_plugin_api7 = require("@backstage/core-plugin-api");
-var import_core_components5 = require("@backstage/core-components");
+var import_core_plugin_api8 = require("@backstage/core-plugin-api");
+var import_core_components6 = require("@backstage/core-components");
 init_useLiteLLMProfile();
 init_api();
 init_format();
@@ -6980,7 +7192,7 @@ init_GenerateKeyButton();
 init_BudgetLimitList();
 init_budget();
 init_routes();
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var LEVEL = {
   key: { name: "Key", none: "No cap (unlimited)" },
   user: { name: "User", none: "No personal budget" },
@@ -7004,8 +7216,8 @@ function resetLabel(limit) {
   const window2 = fmtBudgetDuration(limit.budgetDuration);
   return window2 ? `resets ${window2}` : "never resets";
 }
-var Tag = ({ children, tone, title }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-  import_Typography17.default,
+var Tag = ({ children, tone, title }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  import_Typography18.default,
   {
     title,
     sx: (theme) => ({
@@ -7022,10 +7234,10 @@ var Tag = ({ children, tone, title }) => /* @__PURE__ */ (0, import_jsx_runtime2
     children
   }
 );
-var InlineStat = ({ label, value, hint, tone = "accent", title }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { minWidth: 0, flex: 1 }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { display: "flex", alignItems: "center", gap: 0.625, minWidth: 0 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      import_Box19.default,
+var InlineStat = ({ label, value, hint, tone = "accent", title }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_Box20.default, { sx: { minWidth: 0, flex: 1 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_Box20.default, { sx: { display: "flex", alignItems: "center", gap: 0.625, minWidth: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_Box20.default,
       {
         sx: (theme) => ({
           width: 6,
@@ -7036,10 +7248,10 @@ var InlineStat = ({ label, value, hint, tone = "accent", title }) => /* @__PURE_
         })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Tag, { children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Tag, { children: label })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_Typography17.default,
+  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_Typography18.default,
     {
       title,
       sx: {
@@ -7055,8 +7267,8 @@ var InlineStat = ({ label, value, hint, tone = "accent", title }) => /* @__PURE_
       children: value
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_Typography17.default,
+  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_Typography18.default,
     {
       variant: "caption",
       color: "text.secondary",
@@ -7086,10 +7298,10 @@ var LevelRow = ({
   const subNote = () => {
     if (overCap) return "Over cap";
     if (extra > 0 && keysHref) {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-        import_Typography17.default,
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        import_Typography18.default,
         {
-          component: import_core_components5.Link,
+          component: import_core_components6.Link,
           to: keysHref,
           variant: "caption",
           sx: {
@@ -7109,8 +7321,8 @@ var LevelRow = ({
     return limit?.sublabel ?? null;
   };
   const gaugeAriaLabel = limit ? `${name} budget used: ${Math.round(limit.pct)}%` : `${name} \u2014 no cap`;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-    import_Box19.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    import_Box20.default,
     {
       sx: {
         display: "grid",
@@ -7121,7 +7333,7 @@ var LevelRow = ({
         minWidth: 0
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           Gauge,
           {
             value: limit?.pct ?? 0,
@@ -7131,11 +7343,11 @@ var LevelRow = ({
             ariaLabel: gaugeAriaLabel
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { minWidth: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Tag, { tone: tone === "warning" || tone === "danger" ? tone : void 0, children: name }),
-          limit ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_Typography17.default,
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_Box20.default, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Tag, { tone: tone === "warning" || tone === "danger" ? tone : void 0, children: name }),
+          limit ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              import_Typography18.default,
               {
                 variant: "caption",
                 title: limit.sublabel ? `${limit.label} \xB7 ${limit.sublabel}` : limit.label,
@@ -7151,8 +7363,8 @@ var LevelRow = ({
                 children: limit.label
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_Typography17.default,
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              import_Typography18.default,
               {
                 variant: "caption",
                 color: overCap ? "error" : "text.secondary",
@@ -7168,8 +7380,8 @@ var LevelRow = ({
                 children: subNote()
               }
             )
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_Typography17.default,
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_Typography18.default,
             {
               variant: "caption",
               color: "text.secondary",
@@ -7185,9 +7397,9 @@ var LevelRow = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { minWidth: 0, textAlign: "right" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_Typography17.default,
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_Box20.default, { sx: { minWidth: 0, textAlign: "right" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_Typography18.default,
             {
               title: limit ? `${fmtUsd(limit.spend)} of ${fmtUsd(limit.budget)}` : void 0,
               sx: {
@@ -7204,8 +7416,8 @@ var LevelRow = ({
               children: amountCaption(limit)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_Typography17.default,
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_Typography18.default,
             {
               variant: "caption",
               color: "text.secondary",
@@ -7236,11 +7448,11 @@ function amountNote(limit) {
 var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, maxBudget }) => {
   const renderPlot = () => {
     if (loading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton8.default, { variant: "rectangular", width: "100%", height: "100%" });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Skeleton8.default, { variant: "rectangular", width: "100%", height: "100%" });
     }
     if (data.length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_Box19.default,
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        import_Box20.default,
         {
           display: "flex",
           justifyContent: "center",
@@ -7251,10 +7463,10 @@ var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, m
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_recharts4.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_recharts4.AreaChart, { data, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_recharts4.XAxis, { dataKey: "date", hide: true }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_recharts4.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartTooltip, { valueFormatter: fmtUsd }) }),
-      maxBudget !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_recharts4.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_recharts4.AreaChart, { data, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_recharts4.XAxis, { dataKey: "date", hide: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_recharts4.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartTooltip, { valueFormatter: fmtUsd }) }),
+      maxBudget !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         import_recharts4.ReferenceLine,
         {
           y: maxBudget,
@@ -7263,7 +7475,7 @@ var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, m
           strokeWidth: 1
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         import_recharts4.Area,
         {
           type: "monotone",
@@ -7285,10 +7497,10 @@ var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, m
     if (data.length === 0) return "No spend this month";
     return mtdCaption();
   })();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { role: "img", "aria-label": sparklineAriaLabel(data), sx: { minWidth: 0 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Box19.default, { sx: { height, width: "100%" }, children: renderPlot() }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-      import_Box19.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_Box20.default, { role: "img", "aria-label": sparklineAriaLabel(data), sx: { minWidth: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Box20.default, { sx: { height, width: "100%" }, children: renderPlot() }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      import_Box20.default,
       {
         sx: {
           display: "flex",
@@ -7299,10 +7511,10 @@ var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, m
           minWidth: 0
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { display: "flex", alignItems: "baseline", gap: 0.75, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Tag, { children: "Spent (mtd)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_Typography17.default,
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_Box20.default, { sx: { display: "flex", alignItems: "baseline", gap: 0.75, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Tag, { children: "Spent (mtd)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              import_Typography18.default,
               {
                 variant: "caption",
                 color: "text.secondary",
@@ -7311,8 +7523,8 @@ var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, m
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_Typography17.default,
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_Typography18.default,
             {
               title: loading || usageUnavailable ? void 0 : `${fmtUsd(mtdSpend)} spent month to date`,
               sx: {
@@ -7356,33 +7568,33 @@ var LiteLLMBudgetGauges = ({
   teams: propTeams,
   keys: propKeys
 }) => {
-  const api = (0, import_core_plugin_api7.useApi)(liteLlmApiRef);
+  const api = (0, import_core_plugin_api8.useApi)(liteLlmApiRef);
   const theme = (0, import_styles13.useTheme)();
   const isSmallScreen = (0, import_useMediaQuery.default)(theme.breakpoints.down("sm"));
   const gaugeSize = isSmallScreen ? Math.min(48, size) : size;
-  const expandedRegionId = (0, import_react15.useId)();
+  const expandedRegionId = (0, import_react16.useId)();
   const moduleRouteRef = (0, import_frontend_plugin_api6.useRouteRef)(rootRouteRef);
   const moduleHref = propModuleHref ?? moduleRouteRef?.();
   const { userInfo: hookUserInfo, teams: hookTeams, keys: hookKeys, loading: profileLoading, error: profileError } = useLiteLLMProfile();
-  const [usageLoading, setUsageLoading] = (0, import_react15.useState)(true);
-  const [usageError, setUsageError] = (0, import_react15.useState)(null);
-  const [dailySpend, setDailySpend] = (0, import_react15.useState)([]);
-  const [mtdSpend, setMtdSpend] = (0, import_react15.useState)(0);
+  const [usageLoading, setUsageLoading] = (0, import_react16.useState)(true);
+  const [usageError, setUsageError] = (0, import_react16.useState)(null);
+  const [dailySpend, setDailySpend] = (0, import_react16.useState)([]);
+  const [mtdSpend, setMtdSpend] = (0, import_react16.useState)(0);
   const user = propUserInfo !== void 0 ? propUserInfo : hookUserInfo;
   const teams = propTeams !== void 0 ? propTeams : hookTeams;
   const keys = propKeys !== void 0 ? propKeys : hookKeys;
   const loading = propUserInfo === void 0 ? profileLoading : usageLoading;
   const error = propUserInfo === void 0 ? profileError : usageError;
   const isControlled = expanded !== void 0;
-  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react15.useState)(defaultExpanded);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react16.useState)(defaultExpanded);
   const isExpanded = isControlled ? expanded : uncontrolledExpanded;
-  const toggleExpanded = (0, import_react15.useCallback)(() => {
+  const toggleExpanded = (0, import_react16.useCallback)(() => {
     const next = !isExpanded;
     if (!isControlled) setUncontrolledExpanded(next);
     onExpandedChange?.(next);
   }, [isControlled, isExpanded, onExpandedChange]);
   const keysTabHref = keysHref ?? (moduleHref ? `${moduleHref}?tab=keys` : void 0);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     let cancelled = false;
     setUsageLoading(true);
     setUsageError(null);
@@ -7410,21 +7622,21 @@ var LiteLLMBudgetGauges = ({
       cancelled = true;
     };
   }, [api]);
-  const summary = (0, import_react15.useMemo)(
+  const summary = (0, import_react16.useMemo)(
     () => buildBudgetSummary(user, teams, keys, keys.length),
     [user, teams, keys]
   );
-  const gauges = (0, import_react15.useMemo)(() => buildBudgetGauges(summary), [summary]);
-  const headline = (0, import_react15.useMemo)(() => budgetHeadline(summary), [summary]);
-  const expandedSummary = (0, import_react15.useMemo)(
+  const gauges = (0, import_react16.useMemo)(() => buildBudgetGauges(summary), [summary]);
+  const headline = (0, import_react16.useMemo)(() => budgetHeadline(summary), [summary]);
+  const expandedSummary = (0, import_react16.useMemo)(
     () => buildBudgetSummary(user, teams, keys, maxExpandedKeys),
     [user, teams, keys, maxExpandedKeys]
   );
-  const expandedLimits = (0, import_react15.useMemo)(
+  const expandedLimits = (0, import_react16.useMemo)(
     () => allBudgetLimits(expandedSummary),
     [expandedSummary]
   );
-  const viewState = (0, import_react15.useMemo)(
+  const viewState = (0, import_react16.useMemo)(
     () => widgetViewState({
       loading,
       error: profileError,
@@ -7441,7 +7653,7 @@ var LiteLLMBudgetGauges = ({
   const yesterdaySpend = dailySpend.some((d) => d.date === toLocalDay(yesterday)) ? spendOnDay(dailySpend, yesterday) : null;
   const todayHint = yesterdaySpend === null ? void 0 : `vs ${fmtUsd(yesterdaySpend)} yesterday`;
   const summaryText = headline.count === 0 ? "no limits apply" : `${headline.count} limit${headline.count === 1 ? "" : "s"}`;
-  const resolvedCtas = (0, import_react15.useMemo)(() => {
+  const resolvedCtas = (0, import_react16.useMemo)(() => {
     return resolveCtas({
       ctas,
       hasKeys: (keys?.length ?? 0) > 0,
@@ -7455,20 +7667,20 @@ var LiteLLMBudgetGauges = ({
     switch (cta.kind) {
       case "new-key":
         if (!onCreateKey && !moduleHref) return null;
-        return onCreateKey ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GenerateKeyButton, { size: "small", label, onClick: onCreateKey }, key) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GenerateKeyButton, { size: "small", label, to: `${moduleHref}?generate=1` }, key);
+        return onCreateKey ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GenerateKeyButton, { size: "small", label, onClick: onCreateKey }, key) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GenerateKeyButton, { size: "small", label, to: `${moduleHref}?generate=1` }, key);
       case "module":
         if (!moduleHref) return null;
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Button8.default, { size: "small", variant: "text", component: import_core_components5.Link, to: moduleHref, children: label }, key);
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Button9.default, { size: "small", variant: "text", component: import_core_components6.Link, to: moduleHref, children: label }, key);
       case "all-limits":
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_Button8.default,
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          import_Button9.default,
           {
             size: "small",
             variant: "text",
             onClick: toggleExpanded,
             "aria-expanded": isExpanded,
             "aria-controls": expandedRegionId,
-            endIcon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            endIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               import_icons_material11.ExpandMore,
               {
                 sx: (muiTheme) => ({
@@ -7487,11 +7699,11 @@ var LiteLLMBudgetGauges = ({
     }
   };
   const hasFooter = resolvedCtas.length > 0 || !!action;
-  const Wrapper = bare ? import_Box19.default : import_Paper10.default;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Wrapper, { sx: bare ? { height: "100%" } : { p: 2, height: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.5, minWidth: 0, justifyContent: bare ? "flex-end" : void 0 }, children: [
-      !bare && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography17.default, { variant: "h6", lineHeight: 1.2, sx: { minWidth: 0, flex: 1 }, children: title }),
-      !loading && !error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const Wrapper = bare ? import_Box20.default : import_Paper11.default;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Wrapper, { sx: bare ? { height: "100%" } : { p: 2, height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_Box20.default, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.5, minWidth: 0, justifyContent: bare ? "flex-end" : void 0 }, children: [
+      !bare && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Typography18.default, { variant: "h6", lineHeight: 1.2, sx: { minWidth: 0, flex: 1 }, children: title }),
+      !loading && !error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         StatusPill,
         {
           label: summaryText,
@@ -7500,19 +7712,19 @@ var LiteLLMBudgetGauges = ({
         }
       )
     ] }),
-    viewState.kind === "loading" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Box19.default, { sx: { display: "flex", flexDirection: "column", gap: 1.25, minHeight: size }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { display: "flex", alignItems: "center", gap: 1.25 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton8.default, { variant: "circular", width: size, height: size }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton8.default, { variant: "text", width: "70%", height: 12, sx: { mb: 0.25 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton8.default, { variant: "text", width: "45%", height: 11 })
+    viewState.kind === "loading" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Box20.default, { sx: { display: "flex", flexDirection: "column", gap: 1.25, minHeight: size }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_Box20.default, { sx: { display: "flex", alignItems: "center", gap: 1.25 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Skeleton8.default, { variant: "circular", width: size, height: size }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_Box20.default, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Skeleton8.default, { variant: "text", width: "70%", height: 12, sx: { mb: 0.25 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Skeleton8.default, { variant: "text", width: "45%", height: 11 })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton8.default, { variant: "text", width: 64, height: 12 })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Skeleton8.default, { variant: "text", width: 64, height: 12 })
     ] }, i)) }),
-    viewState.kind === "error" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography17.default, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: viewState.message }),
-    viewState.kind === "unprovisioned" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography17.default, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: UNPROVISIONED_MSG }),
-    viewState.kind === "ready" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-        import_Box19.default,
+    viewState.kind === "error" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Typography18.default, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: viewState.message }),
+    viewState.kind === "unprovisioned" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Typography18.default, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: UNPROVISIONED_MSG }),
+    viewState.kind === "ready" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        import_Box20.default,
         {
           sx: {
             display: "flex",
@@ -7522,7 +7734,7 @@ var LiteLLMBudgetGauges = ({
             minWidth: 0
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               InlineStat,
               {
                 label: "Today spent",
@@ -7532,8 +7744,8 @@ var LiteLLMBudgetGauges = ({
                 title: usageLoading || viewState.usageUnavailable ? void 0 : "Spend since local midnight"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Box19.default, { sx: { width: "1px", bgcolor: "divider", flexShrink: 0 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Box20.default, { sx: { width: "1px", bgcolor: "divider", flexShrink: 0 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               InlineStat,
               {
                 label: "Month to date",
@@ -7545,15 +7757,15 @@ var LiteLLMBudgetGauges = ({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Box19.default, { sx: { borderTop: "1px solid", borderColor: "divider" }, children: gauges.map((gauge, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_Box19.default,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Box20.default, { sx: { borderTop: "1px solid", borderColor: "divider" }, children: gauges.map((gauge, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        import_Box20.default,
         {
           sx: i === 0 ? void 0 : { borderTop: "1px solid", borderColor: "divider" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LevelRow, { gauge, size: gaugeSize, keysHref: keysTabHref })
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LevelRow, { gauge, size: gaugeSize, keysHref: keysTabHref })
         },
         gauge.kind
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Box19.default, { sx: { mt: 1.25 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Box20.default, { sx: { mt: 1.25 }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         SpendStrip,
         {
           data: dailySpend,
@@ -7564,8 +7776,8 @@ var LiteLLMBudgetGauges = ({
           maxBudget: user?.max_budget ?? void 0
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Collapse4.default, { in: isExpanded, unmountOnExit: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_Box19.default,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Collapse4.default, { in: isExpanded, unmountOnExit: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        import_Box20.default,
         {
           id: expandedRegionId,
           sx: {
@@ -7575,7 +7787,7 @@ var LiteLLMBudgetGauges = ({
             maxHeight: 300,
             overflowY: "auto"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LimitListPanel, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LimitListPanel, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             BudgetLimitList,
             {
               limits: expandedLimits,
@@ -7586,8 +7798,8 @@ var LiteLLMBudgetGauges = ({
         }
       ) })
     ] }),
-    hasFooter && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-      import_Box19.default,
+    hasFooter && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      import_Box20.default,
       {
         sx: (muiTheme) => ({
           mt: 2,