@acarmisc/backstage-plugin-litellm 0.35.0 → 0.37.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");
       }
@@ -6730,6 +6734,136 @@ 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();
+}
+function initialTeams(all, have) {
+  const missing = all.filter((id) => !have.has(id));
+  return new Set(have.size ? missing : all);
+}
+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 have = new Set((params.get("have") ?? "").split(",").filter(Boolean));
+      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 ?? initialTeams(all.map((t) => t.team_id), have);
+      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. Selecting a team that is already connected replaces its key, also on your other devices."
+        ] }),
+        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}${have.has(t.team_id) ? " (already connected)" : ""}`
+          },
+          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, {
@@ -6761,7 +6895,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,
@@ -6773,11 +6907,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, {});
     }
   }
 });
@@ -6786,7 +6930,7 @@ var litellmPlugin = (0, import_frontend_plugin_api4.createFrontendPlugin)({
   routes: {
     root: rootRouteRef
   },
-  extensions: [liteLlmApi, liteLlmPage]
+  extensions: [liteLlmApi, liteLlmPage, liteLlmConnectPage]
 });
 
 // src/index.ts
@@ -6797,18 +6941,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();
@@ -6860,7 +7004,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();
@@ -6878,14 +7022,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);
@@ -6907,7 +7051,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,
@@ -6917,7 +7061,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,
@@ -6929,10 +7073,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,
@@ -6940,23 +7084,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: {
@@ -6967,18 +7111,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",
@@ -6994,13 +7138,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" }) })
     ] })
   ] });
 };
@@ -7009,20 +7153,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();
@@ -7053,7 +7197,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" },
@@ -7077,8 +7221,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) => ({
@@ -7095,10 +7239,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,
@@ -7109,10 +7253,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: {
@@ -7128,8 +7272,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",
@@ -7159,10 +7303,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: {
@@ -7182,8 +7326,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",
@@ -7194,7 +7338,7 @@ var LevelRow = ({
         minWidth: 0
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           Gauge,
           {
             value: limit?.pct ?? 0,
@@ -7204,11 +7348,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,
@@ -7224,8 +7368,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",
@@ -7241,8 +7385,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",
@@ -7258,9 +7402,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: {
@@ -7277,8 +7421,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",
@@ -7309,11 +7453,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",
@@ -7324,10 +7468,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,
@@ -7336,7 +7480,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",
@@ -7358,10 +7502,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",
@@ -7372,10 +7516,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",
@@ -7384,8 +7528,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: {
@@ -7429,33 +7573,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);
@@ -7483,21 +7627,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,
@@ -7514,7 +7658,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,
@@ -7528,20 +7672,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) => ({
@@ -7560,11 +7704,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,
@@ -7573,19 +7717,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",
@@ -7595,7 +7739,7 @@ var LiteLLMBudgetGauges = ({
             minWidth: 0
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               InlineStat,
               {
                 label: "Today spent",
@@ -7605,8 +7749,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",
@@ -7618,15 +7762,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,
@@ -7637,8 +7781,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: {
@@ -7648,7 +7792,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,
@@ -7659,8 +7803,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,