@acarmisc/backstage-plugin-litellm 0.34.0 → 0.36.0

package/dist/index.esm.js

@@ -235,6 +235,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");
       }
@@ -285,6 +289,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");
       }
@@ -5010,13 +5020,49 @@ function budgetStatValue(hidden, budget) {
   if (budget > 0) return fmtUsd2(budget);
   return "Unlimited";
 }
-var fmtUsd2, TeamCard, TeamUsage;
+var fmtUsd2, monoSx, MemberUsageTable, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
     "use strict";
     init_ui();
     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__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", children: "No members or activity in this period." });
+      }
+      return /* @__PURE__ */ jsx15(TableContainer4, { component: Paper8, variant: "outlined", sx: { borderRadius: 1.5 }, children: /* @__PURE__ */ jsxs14(Table4, { size: "small", sx: dataTableSx, "aria-label": "Usage by member", children: [
+        /* @__PURE__ */ jsx15(TableHead4, { children: /* @__PURE__ */ jsxs14(TableRow4, { children: [
+          /* @__PURE__ */ jsx15(TableCell4, { children: "Member" }),
+          !hidden && /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Spend" }),
+          /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Share" }),
+          /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Tokens" }),
+          /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Requests" }),
+          /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Success" }),
+          /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Keys" })
+        ] }) }),
+        /* @__PURE__ */ jsx15(TableBody4, { 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__ */ jsxs14(TableRow4, { children: [
+            /* @__PURE__ */ jsx15(TableCell4, { children: m.user_id === null ? /* @__PURE__ */ jsx15(MuiTooltip, { title: "Activity of keys that were deleted or have no owner", children: /* @__PURE__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", sx: { fontStyle: "italic" }, children: "Unattributed" }) }) : /* @__PURE__ */ jsxs14(Fragment8, { children: [
+              /* @__PURE__ */ jsx15(Typography12, { variant: "body2", children: name }),
+              sub && /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", sx: monoSx, children: sub })
+            ] }) }),
+            !hidden && /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: fmtUsd2(m.spend) }),
+            /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: `${m.spend_share_pct.toFixed(m.spend_share_pct > 0 && m.spend_share_pct < 1 ? 1 : 0)}%` }),
+            /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: fmtCompact(m.total_tokens) }),
+            /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: m.api_requests.toLocaleString() }),
+            /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: m.success_rate === null ? "\u2014" : `${m.success_rate.toFixed(0)}%` }),
+            /* @__PURE__ */ jsx15(TableCell4, { 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] = useState9(false);
       const chart = useChartTheme();
       const handleExpandChange = (newExpanded) => {
@@ -5209,6 +5255,10 @@ var init_TeamUsage = __esm({
             team.models?.length ? /* @__PURE__ */ jsx15(Box14, { display: "flex", gap: 0.5, flexWrap: "wrap", children: team.models.map((m) => /* @__PURE__ */ jsx15(TagChip, { label: m, title: m }, m)) }) : /* @__PURE__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", children: "All models allowed" })
           ] }),
           renderDailySpendSection(),
+          (memberUsageLoading || memberUsage) && /* @__PURE__ */ jsxs14(Box14, { mb: 2.5, children: [
+            sectionLabel("Usage by member"),
+            memberUsage ? /* @__PURE__ */ jsx15(MemberUsageTable, { usage: memberUsage }) : /* @__PURE__ */ jsx15(Box14, { display: "flex", justifyContent: "center", py: 2, children: /* @__PURE__ */ jsx15(CircularProgress4, { size: 22 }) })
+          ] }),
           /* @__PURE__ */ jsxs14(Box14, { children: [
             sectionLabel("Members"),
             team.members_with_roles?.length ? /* @__PURE__ */ jsx15(
@@ -5263,6 +5313,8 @@ var init_TeamUsage = __esm({
       loading,
       getTeamUsage,
       getTeamUsageLoading,
+      getTeamMemberUsage,
+      getTeamMemberUsageLoading,
       canManage,
       onEditTeam,
       canCreate,
@@ -5322,6 +5374,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),
@@ -6134,6 +6188,8 @@ var init_LiteLLMPage = __esm({
       const keyFormOpen = generateDialogOpen || !!keyToEdit;
       const [teamUsageCache, setTeamUsageCache] = useState12({});
       const [teamUsageLoading, setTeamUsageLoading] = useState12({});
+      const [memberUsageCache, setMemberUsageCache] = useState12({});
+      const [memberUsageLoading, setMemberUsageLoading] = useState12({});
       const { value: userInfo, loading: userLoading, error: userError } = useAsync2(
         () => api.getUserInfo(),
         [api]
@@ -6194,6 +6250,8 @@ var init_LiteLLMPage = __esm({
         }
         setTeamUsageCache({});
         setTeamUsageLoading({});
+        setMemberUsageCache({});
+        setMemberUsageLoading({});
       }, [setDateRange, setCurrentPreset]);
       const loadTeamUsage = useCallback4(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
@@ -6209,6 +6267,20 @@ var init_LiteLLMPage = __esm({
           setTeamUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
       }, [api, dateRange, teamUsageCache, teamUsageLoading]);
+      const loadMemberUsage = useCallback4(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 = useMemo9(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
@@ -6503,6 +6575,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,
@@ -6510,7 +6584,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);
+                }
               }
             );
           })(),
@@ -6666,6 +6743,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
+});
+import { useState as useState13 } from "react";
+import Alert7 from "@mui/material/Alert";
+import Box18 from "@mui/material/Box";
+import Button8 from "@mui/material/Button";
+import Checkbox3 from "@mui/material/Checkbox";
+import FormControlLabel3 from "@mui/material/FormControlLabel";
+import FormGroup from "@mui/material/FormGroup";
+import Paper9 from "@mui/material/Paper";
+import Typography16 from "@mui/material/Typography";
+import { useSearchParams as useSearchParams2 } from "react-router-dom";
+import { useAsync as useAsync3 } from "react-use";
+import { useApi as useApi5 } from "@backstage/core-plugin-api";
+import { Content as Content2, Progress as Progress2 } from "@backstage/core-components";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+var ConnectPage;
+var init_ConnectPage = __esm({
+  "src/components/ConnectPage.tsx"() {
+    "use strict";
+    init_api();
+    init_connect();
+    ConnectPage = () => {
+      const api = useApi5(liteLlmApiRef);
+      const [params] = useSearchParams2();
+      const redirectUri = params.get("redirect_uri");
+      const state = params.get("state") ?? "";
+      const client = params.get("client") || "a local application";
+      const teams = useAsync3(() => api.getTeams(), [api]);
+      const [selected, setSelected] = useState13();
+      const [busy, setBusy] = useState13(false);
+      const [error, setError] = useState13();
+      if (!isLoopbackCallback(redirectUri)) {
+        return /* @__PURE__ */ jsx19(Content2, { children: /* @__PURE__ */ jsx19(Alert7, { severity: "error", children: "Invalid connection link: redirect_uri must be http://localhost:<port>/callback." }) });
+      }
+      if (teams.loading) return /* @__PURE__ */ jsx19(Progress2, {});
+      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__ */ jsx19(Content2, { children: /* @__PURE__ */ jsx19(Box18, { maxWidth: 520, mx: "auto", mt: 4, children: /* @__PURE__ */ jsxs18(Paper9, { sx: { p: 3 }, children: [
+        /* @__PURE__ */ jsxs18(Typography16, { variant: "h5", gutterBottom: true, children: [
+          "Connect ",
+          client
+        ] }),
+        /* @__PURE__ */ jsxs18(Typography16, { 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__ */ jsxs18(Alert7, { severity: "error", children: [
+          "Could not load your teams: ",
+          teams.error.message
+        ] }),
+        all.length > 0 && /* @__PURE__ */ jsx19(FormGroup, { sx: { mb: 2 }, children: all.map((t) => /* @__PURE__ */ jsx19(
+          FormControlLabel3,
+          {
+            control: /* @__PURE__ */ jsx19(Checkbox3, { checked: chosen.has(t.team_id), onChange: () => toggle(t.team_id) }),
+            label: t.team_alias ?? t.team_id
+          },
+          t.team_id
+        )) }),
+        error && /* @__PURE__ */ jsx19(Alert7, { severity: "error", sx: { mb: 2 }, children: error }),
+        /* @__PURE__ */ jsx19(
+          Button8,
+          {
+            variant: "contained",
+            onClick: connect,
+            disabled: busy || !!teams.error || all.length > 0 && chosen.size === 0,
+            children: busy ? "Connecting\u2026" : "Connect"
+          }
+        )
+      ] }) }) });
+    };
+  }
+});
+
 // src/plugin.tsx
 init_api();
 init_routes();
@@ -6677,7 +6879,7 @@ import {
   fetchApiRef,
   discoveryApiRef
 } from "@backstage/frontend-plugin-api";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var liteLlmApi = ApiBlueprint.make({
   params: (defineParams) => defineParams({
     api: liteLlmApiRef,
@@ -6689,11 +6891,21 @@ var liteLlmPage = PageBlueprint.make({
   params: {
     path: "/litellm",
     title: "LiteLLM",
-    icon: /* @__PURE__ */ jsx19(TrendingUpIcon, {}),
+    icon: /* @__PURE__ */ jsx20(TrendingUpIcon, {}),
     routeRef: rootRouteRef,
     loader: async () => {
       const { LiteLLMPage: LiteLLMPage2 } = await Promise.resolve().then(() => (init_LiteLLMPage(), LiteLLMPage_exports));
-      return /* @__PURE__ */ jsx19(LiteLLMPage2, {});
+      return /* @__PURE__ */ jsx20(LiteLLMPage2, {});
+    }
+  }
+});
+var liteLlmConnectPage = PageBlueprint.make({
+  name: "connect",
+  params: {
+    path: "/litellm/connect",
+    loader: async () => {
+      const { ConnectPage: ConnectPage2 } = await Promise.resolve().then(() => (init_ConnectPage(), ConnectPage_exports));
+      return /* @__PURE__ */ jsx20(ConnectPage2, {});
     }
   }
 });
@@ -6702,7 +6914,7 @@ var litellmPlugin = createFrontendPlugin({
   routes: {
     root: rootRouteRef
   },
-  extensions: [liteLlmApi, liteLlmPage]
+  extensions: [liteLlmApi, liteLlmPage, liteLlmConnectPage]
 });
 
 // src/index.ts
@@ -6720,16 +6932,16 @@ init_format();
 init_dates();
 init_ui();
 init_widgetState();
-import { useEffect as useEffect7, useMemo as useMemo10, useState as useState13 } from "react";
-import Paper9 from "@mui/material/Paper";
-import Box18 from "@mui/material/Box";
-import Typography16 from "@mui/material/Typography";
+import { useEffect as useEffect7, useMemo as useMemo10, useState as useState14 } from "react";
+import Paper10 from "@mui/material/Paper";
+import Box19 from "@mui/material/Box";
+import Typography17 from "@mui/material/Typography";
 import FormControl2 from "@mui/material/FormControl";
 import Select2 from "@mui/material/Select";
 import MenuItem6 from "@mui/material/MenuItem";
 import Skeleton7 from "@mui/material/Skeleton";
 import { AreaChart as AreaChart3, Area as Area3, XAxis as XAxis3, Tooltip as Tooltip8, ResponsiveContainer as ResponsiveContainer3 } from "recharts";
-import { useApi as useApi5 } from "@backstage/core-plugin-api";
+import { useApi as useApi6 } from "@backstage/core-plugin-api";
 import { useRouteRef as useRouteRef2 } from "@backstage/frontend-plugin-api";
 import { Link as Link3 } from "@backstage/core-components";
 
@@ -6776,7 +6988,7 @@ function usageSummary(usage) {
 }
 
 // src/components/LiteLLMHomeWidget.tsx
-import { Fragment as Fragment10, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function presetToDateRange(preset) {
   const end = /* @__PURE__ */ new Date();
   const start = /* @__PURE__ */ new Date();
@@ -6794,13 +7006,13 @@ var LiteLLMHomeWidget = ({
   title = "LiteLLM Usage",
   bare = false
 }) => {
-  const api = useApi5(liteLlmApiRef);
+  const api = useApi6(liteLlmApiRef);
   const moduleRouteRef = useRouteRef2(rootRouteRef);
   const { userInfo, keys, loading: profileLoading, error: profileError } = useLiteLLMProfile();
-  const [period, setPeriod] = useState13(defaultPeriod);
-  const [usageLoading, setUsageLoading] = useState13(true);
-  const [usageError, setUsageError] = useState13(null);
-  const [usage, setUsage] = useState13(null);
+  const [period, setPeriod] = useState14(defaultPeriod);
+  const [usageLoading, setUsageLoading] = useState14(true);
+  const [usageError, setUsageError] = useState14(null);
+  const [usage, setUsage] = useState14(null);
   useEffect7(() => {
     let cancelled = false;
     setUsageLoading(true);
@@ -6833,7 +7045,7 @@ var LiteLLMHomeWidget = ({
     }),
     [profileLoading, usageLoading, profileError, userInfo, usageError, keys]
   );
-  const Wrapper = bare ? Box18 : Paper9;
+  const Wrapper = bare ? Box19 : Paper10;
   const partialFailure = !usageLoading && usageError && usage;
   const dailyData = (usage?.daily_usage ?? []).map((d) => ({
     date: d.date,
@@ -6845,10 +7057,10 @@ var LiteLLMHomeWidget = ({
   const endDate = toLocalDay(end);
   const dateRangeCaption = rangeCaption(startDate, endDate);
   const sparklineAriaLabelText = sparklineAriaLabel(dailyData);
-  return /* @__PURE__ */ jsxs18(Wrapper, { sx: bare ? { height: "100%" } : { p: 2, height: "100%" }, children: [
-    /* @__PURE__ */ jsxs18(Box18, { display: "flex", justifyContent: bare ? "flex-end" : "space-between", alignItems: "center", mb: 1.5, children: [
-      !bare && /* @__PURE__ */ jsx20(Typography16, { variant: "h6", children: title }),
-      /* @__PURE__ */ jsx20(FormControl2, { size: "small", sx: { minWidth: 90 }, children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(Wrapper, { sx: bare ? { height: "100%" } : { p: 2, height: "100%" }, children: [
+    /* @__PURE__ */ jsxs19(Box19, { display: "flex", justifyContent: bare ? "flex-end" : "space-between", alignItems: "center", mb: 1.5, children: [
+      !bare && /* @__PURE__ */ jsx21(Typography17, { variant: "h6", children: title }),
+      /* @__PURE__ */ jsx21(FormControl2, { size: "small", sx: { minWidth: 90 }, children: /* @__PURE__ */ jsxs19(
         Select2,
         {
           value: period,
@@ -6856,23 +7068,23 @@ var LiteLLMHomeWidget = ({
           displayEmpty: true,
           inputProps: { "aria-label": "Usage period" },
           children: [
-            /* @__PURE__ */ jsx20(MenuItem6, { value: "today", children: "Today" }),
-            /* @__PURE__ */ jsx20(MenuItem6, { value: "7d", children: "7d" }),
-            /* @__PURE__ */ jsx20(MenuItem6, { value: "30d", children: "30d" })
+            /* @__PURE__ */ jsx21(MenuItem6, { value: "today", children: "Today" }),
+            /* @__PURE__ */ jsx21(MenuItem6, { value: "7d", children: "7d" }),
+            /* @__PURE__ */ jsx21(MenuItem6, { value: "30d", children: "30d" })
           ]
         }
       ) })
     ] }),
-    viewState.kind === "loading" && /* @__PURE__ */ jsxs18(Box18, { sx: { minHeight: 120 }, children: [
-      /* @__PURE__ */ jsx20(Skeleton7, { variant: "text", width: "60%", height: 20, sx: { mb: 1 } }),
-      /* @__PURE__ */ jsx20(Skeleton7, { variant: "rectangular", width: "100%", height: 100 })
+    viewState.kind === "loading" && /* @__PURE__ */ jsxs19(Box19, { sx: { minHeight: 120 }, children: [
+      /* @__PURE__ */ jsx21(Skeleton7, { variant: "text", width: "60%", height: 20, sx: { mb: 1 } }),
+      /* @__PURE__ */ jsx21(Skeleton7, { variant: "rectangular", width: "100%", height: 100 })
     ] }),
-    viewState.kind === "error" && /* @__PURE__ */ jsx20(Typography16, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: viewState.message }),
-    viewState.kind === "unprovisioned" && /* @__PURE__ */ jsx20(Typography16, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: UNPROVISIONED_MSG }),
-    viewState.kind === "ready" && partialFailure && /* @__PURE__ */ jsx20(Box18, { sx: { mt: 1, mb: 1, p: 1, backgroundColor: "action.hover", borderRadius: 1 }, children: /* @__PURE__ */ jsx20(Typography16, { variant: "body2", color: "text.secondary", children: USAGE_UNAVAILABLE_MSG }) }),
-    viewState.kind === "ready" && /* @__PURE__ */ jsxs18(Fragment10, { children: [
-      /* @__PURE__ */ jsx20(
-        Typography16,
+    viewState.kind === "error" && /* @__PURE__ */ jsx21(Typography17, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: viewState.message }),
+    viewState.kind === "unprovisioned" && /* @__PURE__ */ jsx21(Typography17, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: UNPROVISIONED_MSG }),
+    viewState.kind === "ready" && partialFailure && /* @__PURE__ */ jsx21(Box19, { sx: { mt: 1, mb: 1, p: 1, backgroundColor: "action.hover", borderRadius: 1 }, children: /* @__PURE__ */ jsx21(Typography17, { variant: "body2", color: "text.secondary", children: USAGE_UNAVAILABLE_MSG }) }),
+    viewState.kind === "ready" && /* @__PURE__ */ jsxs19(Fragment10, { children: [
+      /* @__PURE__ */ jsx21(
+        Typography17,
         {
           variant: "body2",
           sx: {
@@ -6883,18 +7095,18 @@ var LiteLLMHomeWidget = ({
           children: viewState.usageUnavailable ? USAGE_UNAVAILABLE_MSG : usageSummary(usage)
         }
       ),
-      hasSparkline && !viewState.usageUnavailable && /* @__PURE__ */ jsxs18(Fragment10, { children: [
-        /* @__PURE__ */ jsx20(
-          Box18,
+      hasSparkline && !viewState.usageUnavailable && /* @__PURE__ */ jsxs19(Fragment10, { children: [
+        /* @__PURE__ */ jsx21(
+          Box19,
           {
             height: 80,
             role: "img",
             "aria-label": sparklineAriaLabelText,
             sx: { mb: 0.5 },
-            children: /* @__PURE__ */ jsx20(ResponsiveContainer3, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs18(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [
-              /* @__PURE__ */ jsx20(XAxis3, { dataKey: "date", hide: true }),
-              /* @__PURE__ */ jsx20(Tooltip8, { content: /* @__PURE__ */ jsx20(ChartTooltip, { valueFormatter: fmtUsd }) }),
-              /* @__PURE__ */ jsx20(
+            children: /* @__PURE__ */ jsx21(ResponsiveContainer3, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs19(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [
+              /* @__PURE__ */ jsx21(XAxis3, { dataKey: "date", hide: true }),
+              /* @__PURE__ */ jsx21(Tooltip8, { content: /* @__PURE__ */ jsx21(ChartTooltip, { valueFormatter: fmtUsd }) }),
+              /* @__PURE__ */ jsx21(
                 Area3,
                 {
                   type: "monotone",
@@ -6910,13 +7122,13 @@ var LiteLLMHomeWidget = ({
             ] }) })
           }
         ),
-        /* @__PURE__ */ jsxs18(Typography16, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: [
+        /* @__PURE__ */ jsxs19(Typography17, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: [
           "daily spend (",
           dateRangeCaption,
           ")"
         ] })
       ] }),
-      moduleRouteRef?.() && /* @__PURE__ */ jsx20(Typography16, { variant: "caption", sx: { mt: 1, display: "block" }, children: /* @__PURE__ */ jsx20(Link3, { to: moduleRouteRef(), color: "primary", children: "Open LiteLLM \u2192" }) })
+      moduleRouteRef?.() && /* @__PURE__ */ jsx21(Typography17, { variant: "caption", sx: { mt: 1, display: "block" }, children: /* @__PURE__ */ jsx21(Link3, { to: moduleRouteRef(), color: "primary", children: "Open LiteLLM \u2192" }) })
     ] })
   ] });
 };
@@ -6929,19 +7141,19 @@ init_useLiteLLMProfile();
 init_api();
 init_format();
 init_dates();
-import { useCallback as useCallback5, useEffect as useEffect8, useId as useId2, useMemo as useMemo11, useState as useState14 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useId as useId2, useMemo as useMemo11, useState as useState15 } from "react";
 import { useRouteRef as useRouteRef3 } from "@backstage/frontend-plugin-api";
-import Paper10 from "@mui/material/Paper";
-import Box19 from "@mui/material/Box";
-import Button8 from "@mui/material/Button";
-import Typography17 from "@mui/material/Typography";
+import Paper11 from "@mui/material/Paper";
+import Box20 from "@mui/material/Box";
+import Button9 from "@mui/material/Button";
+import Typography18 from "@mui/material/Typography";
 import Skeleton8 from "@mui/material/Skeleton";
 import Collapse4 from "@mui/material/Collapse";
 import { useTheme as useTheme4 } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { ExpandMore as ExpandMore4 } from "@mui/icons-material";
 import { AreaChart as AreaChart4, Area as Area4, ResponsiveContainer as ResponsiveContainer4, Tooltip as Tooltip9, ReferenceLine as ReferenceLine2, XAxis as XAxis4 } from "recharts";
-import { useApi as useApi6 } from "@backstage/core-plugin-api";
+import { useApi as useApi7 } from "@backstage/core-plugin-api";
 import { Link as Link4 } from "@backstage/core-components";
 
 // src/ctas.ts
@@ -6969,7 +7181,7 @@ init_GenerateKeyButton();
 init_BudgetLimitList();
 init_budget();
 init_routes();
-import { Fragment as Fragment11, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 var LEVEL = {
   key: { name: "Key", none: "No cap (unlimited)" },
   user: { name: "User", none: "No personal budget" },
@@ -6993,8 +7205,8 @@ function resetLabel(limit) {
   const window2 = fmtBudgetDuration(limit.budgetDuration);
   return window2 ? `resets ${window2}` : "never resets";
 }
-var Tag = ({ children, tone, title }) => /* @__PURE__ */ jsx21(
-  Typography17,
+var Tag = ({ children, tone, title }) => /* @__PURE__ */ jsx22(
+  Typography18,
   {
     title,
     sx: (theme) => ({
@@ -7011,10 +7223,10 @@ var Tag = ({ children, tone, title }) => /* @__PURE__ */ jsx21(
     children
   }
 );
-var InlineStat = ({ label, value, hint, tone = "accent", title }) => /* @__PURE__ */ jsxs19(Box19, { sx: { minWidth: 0, flex: 1 }, children: [
-  /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", alignItems: "center", gap: 0.625, minWidth: 0 }, children: [
-    /* @__PURE__ */ jsx21(
-      Box19,
+var InlineStat = ({ label, value, hint, tone = "accent", title }) => /* @__PURE__ */ jsxs20(Box20, { sx: { minWidth: 0, flex: 1 }, children: [
+  /* @__PURE__ */ jsxs20(Box20, { sx: { display: "flex", alignItems: "center", gap: 0.625, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx22(
+      Box20,
       {
         sx: (theme) => ({
           width: 6,
@@ -7025,10 +7237,10 @@ var InlineStat = ({ label, value, hint, tone = "accent", title }) => /* @__PURE_
         })
       }
     ),
-    /* @__PURE__ */ jsx21(Tag, { children: label })
+    /* @__PURE__ */ jsx22(Tag, { children: label })
   ] }),
-  /* @__PURE__ */ jsx21(
-    Typography17,
+  /* @__PURE__ */ jsx22(
+    Typography18,
     {
       title,
       sx: {
@@ -7044,8 +7256,8 @@ var InlineStat = ({ label, value, hint, tone = "accent", title }) => /* @__PURE_
       children: value
     }
   ),
-  /* @__PURE__ */ jsx21(
-    Typography17,
+  /* @__PURE__ */ jsx22(
+    Typography18,
     {
       variant: "caption",
       color: "text.secondary",
@@ -7075,8 +7287,8 @@ var LevelRow = ({
   const subNote = () => {
     if (overCap) return "Over cap";
     if (extra > 0 && keysHref) {
-      return /* @__PURE__ */ jsxs19(
-        Typography17,
+      return /* @__PURE__ */ jsxs20(
+        Typography18,
         {
           component: Link4,
           to: keysHref,
@@ -7098,8 +7310,8 @@ var LevelRow = ({
     return limit?.sublabel ?? null;
   };
   const gaugeAriaLabel = limit ? `${name} budget used: ${Math.round(limit.pct)}%` : `${name} \u2014 no cap`;
-  return /* @__PURE__ */ jsxs19(
-    Box19,
+  return /* @__PURE__ */ jsxs20(
+    Box20,
     {
       sx: {
         display: "grid",
@@ -7110,7 +7322,7 @@ var LevelRow = ({
         minWidth: 0
       },
       children: [
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           Gauge,
           {
             value: limit?.pct ?? 0,
@@ -7120,11 +7332,11 @@ var LevelRow = ({
             ariaLabel: gaugeAriaLabel
           }
         ),
-        /* @__PURE__ */ jsxs19(Box19, { sx: { minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx21(Tag, { tone: tone === "warning" || tone === "danger" ? tone : void 0, children: name }),
-          limit ? /* @__PURE__ */ jsxs19(Fragment11, { children: [
-            /* @__PURE__ */ jsx21(
-              Typography17,
+        /* @__PURE__ */ jsxs20(Box20, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx22(Tag, { tone: tone === "warning" || tone === "danger" ? tone : void 0, children: name }),
+          limit ? /* @__PURE__ */ jsxs20(Fragment11, { children: [
+            /* @__PURE__ */ jsx22(
+              Typography18,
               {
                 variant: "caption",
                 title: limit.sublabel ? `${limit.label} \xB7 ${limit.sublabel}` : limit.label,
@@ -7140,8 +7352,8 @@ var LevelRow = ({
                 children: limit.label
               }
             ),
-            /* @__PURE__ */ jsx21(
-              Typography17,
+            /* @__PURE__ */ jsx22(
+              Typography18,
               {
                 variant: "caption",
                 color: overCap ? "error" : "text.secondary",
@@ -7157,8 +7369,8 @@ var LevelRow = ({
                 children: subNote()
               }
             )
-          ] }) : /* @__PURE__ */ jsx21(
-            Typography17,
+          ] }) : /* @__PURE__ */ jsx22(
+            Typography18,
             {
               variant: "caption",
               color: "text.secondary",
@@ -7174,9 +7386,9 @@ var LevelRow = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs19(Box19, { sx: { minWidth: 0, textAlign: "right" }, children: [
-          /* @__PURE__ */ jsx21(
-            Typography17,
+        /* @__PURE__ */ jsxs20(Box20, { sx: { minWidth: 0, textAlign: "right" }, children: [
+          /* @__PURE__ */ jsx22(
+            Typography18,
             {
               title: limit ? `${fmtUsd(limit.spend)} of ${fmtUsd(limit.budget)}` : void 0,
               sx: {
@@ -7193,8 +7405,8 @@ var LevelRow = ({
               children: amountCaption(limit)
             }
           ),
-          /* @__PURE__ */ jsx21(
-            Typography17,
+          /* @__PURE__ */ jsx22(
+            Typography18,
             {
               variant: "caption",
               color: "text.secondary",
@@ -7225,11 +7437,11 @@ function amountNote(limit) {
 var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, maxBudget }) => {
   const renderPlot = () => {
     if (loading) {
-      return /* @__PURE__ */ jsx21(Skeleton8, { variant: "rectangular", width: "100%", height: "100%" });
+      return /* @__PURE__ */ jsx22(Skeleton8, { variant: "rectangular", width: "100%", height: "100%" });
     }
     if (data.length === 0) {
-      return /* @__PURE__ */ jsx21(
-        Box19,
+      return /* @__PURE__ */ jsx22(
+        Box20,
         {
           display: "flex",
           justifyContent: "center",
@@ -7240,10 +7452,10 @@ var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, m
         }
       );
     }
-    return /* @__PURE__ */ jsx21(ResponsiveContainer4, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs19(AreaChart4, { data, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [
-      /* @__PURE__ */ jsx21(XAxis4, { dataKey: "date", hide: true }),
-      /* @__PURE__ */ jsx21(Tooltip9, { content: /* @__PURE__ */ jsx21(ChartTooltip, { valueFormatter: fmtUsd }) }),
-      maxBudget !== void 0 && /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(ResponsiveContainer4, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs20(AreaChart4, { data, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [
+      /* @__PURE__ */ jsx22(XAxis4, { dataKey: "date", hide: true }),
+      /* @__PURE__ */ jsx22(Tooltip9, { content: /* @__PURE__ */ jsx22(ChartTooltip, { valueFormatter: fmtUsd }) }),
+      maxBudget !== void 0 && /* @__PURE__ */ jsx22(
         ReferenceLine2,
         {
           y: maxBudget,
@@ -7252,7 +7464,7 @@ var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, m
           strokeWidth: 1
         }
       ),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         Area4,
         {
           type: "monotone",
@@ -7274,10 +7486,10 @@ var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, m
     if (data.length === 0) return "No spend this month";
     return mtdCaption();
   })();
-  return /* @__PURE__ */ jsxs19(Box19, { role: "img", "aria-label": sparklineAriaLabel(data), sx: { minWidth: 0 }, children: [
-    /* @__PURE__ */ jsx21(Box19, { sx: { height, width: "100%" }, children: renderPlot() }),
-    /* @__PURE__ */ jsxs19(
-      Box19,
+  return /* @__PURE__ */ jsxs20(Box20, { role: "img", "aria-label": sparklineAriaLabel(data), sx: { minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx22(Box20, { sx: { height, width: "100%" }, children: renderPlot() }),
+    /* @__PURE__ */ jsxs20(
+      Box20,
       {
         sx: {
           display: "flex",
@@ -7288,10 +7500,10 @@ var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, m
           minWidth: 0
         },
         children: [
-          /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", alignItems: "baseline", gap: 0.75, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx21(Tag, { children: "Spent (mtd)" }),
-            /* @__PURE__ */ jsx21(
-              Typography17,
+          /* @__PURE__ */ jsxs20(Box20, { sx: { display: "flex", alignItems: "baseline", gap: 0.75, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx22(Tag, { children: "Spent (mtd)" }),
+            /* @__PURE__ */ jsx22(
+              Typography18,
               {
                 variant: "caption",
                 color: "text.secondary",
@@ -7300,8 +7512,8 @@ var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, m
               }
             )
           ] }),
-          /* @__PURE__ */ jsx21(
-            Typography17,
+          /* @__PURE__ */ jsx22(
+            Typography18,
             {
               title: loading || usageUnavailable ? void 0 : `${fmtUsd(mtdSpend)} spent month to date`,
               sx: {
@@ -7345,7 +7557,7 @@ var LiteLLMBudgetGauges = ({
   teams: propTeams,
   keys: propKeys
 }) => {
-  const api = useApi6(liteLlmApiRef);
+  const api = useApi7(liteLlmApiRef);
   const theme = useTheme4();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const gaugeSize = isSmallScreen ? Math.min(48, size) : size;
@@ -7353,17 +7565,17 @@ var LiteLLMBudgetGauges = ({
   const moduleRouteRef = useRouteRef3(rootRouteRef);
   const moduleHref = propModuleHref ?? moduleRouteRef?.();
   const { userInfo: hookUserInfo, teams: hookTeams, keys: hookKeys, loading: profileLoading, error: profileError } = useLiteLLMProfile();
-  const [usageLoading, setUsageLoading] = useState14(true);
-  const [usageError, setUsageError] = useState14(null);
-  const [dailySpend, setDailySpend] = useState14([]);
-  const [mtdSpend, setMtdSpend] = useState14(0);
+  const [usageLoading, setUsageLoading] = useState15(true);
+  const [usageError, setUsageError] = useState15(null);
+  const [dailySpend, setDailySpend] = useState15([]);
+  const [mtdSpend, setMtdSpend] = useState15(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] = useState14(defaultExpanded);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState15(defaultExpanded);
   const isExpanded = isControlled ? expanded : uncontrolledExpanded;
   const toggleExpanded = useCallback5(() => {
     const next = !isExpanded;
@@ -7444,20 +7656,20 @@ var LiteLLMBudgetGauges = ({
     switch (cta.kind) {
       case "new-key":
         if (!onCreateKey && !moduleHref) return null;
-        return onCreateKey ? /* @__PURE__ */ jsx21(GenerateKeyButton, { size: "small", label, onClick: onCreateKey }, key) : /* @__PURE__ */ jsx21(GenerateKeyButton, { size: "small", label, to: `${moduleHref}?generate=1` }, key);
+        return onCreateKey ? /* @__PURE__ */ jsx22(GenerateKeyButton, { size: "small", label, onClick: onCreateKey }, key) : /* @__PURE__ */ jsx22(GenerateKeyButton, { size: "small", label, to: `${moduleHref}?generate=1` }, key);
       case "module":
         if (!moduleHref) return null;
-        return /* @__PURE__ */ jsx21(Button8, { size: "small", variant: "text", component: Link4, to: moduleHref, children: label }, key);
+        return /* @__PURE__ */ jsx22(Button9, { size: "small", variant: "text", component: Link4, to: moduleHref, children: label }, key);
       case "all-limits":
-        return /* @__PURE__ */ jsx21(
-          Button8,
+        return /* @__PURE__ */ jsx22(
+          Button9,
           {
             size: "small",
             variant: "text",
             onClick: toggleExpanded,
             "aria-expanded": isExpanded,
             "aria-controls": expandedRegionId,
-            endIcon: /* @__PURE__ */ jsx21(
+            endIcon: /* @__PURE__ */ jsx22(
               ExpandMore4,
               {
                 sx: (muiTheme) => ({
@@ -7476,11 +7688,11 @@ var LiteLLMBudgetGauges = ({
     }
   };
   const hasFooter = resolvedCtas.length > 0 || !!action;
-  const Wrapper = bare ? Box19 : Paper10;
-  return /* @__PURE__ */ jsxs19(Wrapper, { sx: bare ? { height: "100%" } : { p: 2, height: "100%" }, children: [
-    /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.5, minWidth: 0, justifyContent: bare ? "flex-end" : void 0 }, children: [
-      !bare && /* @__PURE__ */ jsx21(Typography17, { variant: "h6", lineHeight: 1.2, sx: { minWidth: 0, flex: 1 }, children: title }),
-      !loading && !error && /* @__PURE__ */ jsx21(
+  const Wrapper = bare ? Box20 : Paper11;
+  return /* @__PURE__ */ jsxs20(Wrapper, { sx: bare ? { height: "100%" } : { p: 2, height: "100%" }, children: [
+    /* @__PURE__ */ jsxs20(Box20, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.5, minWidth: 0, justifyContent: bare ? "flex-end" : void 0 }, children: [
+      !bare && /* @__PURE__ */ jsx22(Typography18, { variant: "h6", lineHeight: 1.2, sx: { minWidth: 0, flex: 1 }, children: title }),
+      !loading && !error && /* @__PURE__ */ jsx22(
         StatusPill,
         {
           label: summaryText,
@@ -7489,19 +7701,19 @@ var LiteLLMBudgetGauges = ({
         }
       )
     ] }),
-    viewState.kind === "loading" && /* @__PURE__ */ jsx21(Box19, { sx: { display: "flex", flexDirection: "column", gap: 1.25, minHeight: size }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs19(Box19, { sx: { display: "flex", alignItems: "center", gap: 1.25 }, children: [
-      /* @__PURE__ */ jsx21(Skeleton8, { variant: "circular", width: size, height: size }),
-      /* @__PURE__ */ jsxs19(Box19, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ jsx21(Skeleton8, { variant: "text", width: "70%", height: 12, sx: { mb: 0.25 } }),
-        /* @__PURE__ */ jsx21(Skeleton8, { variant: "text", width: "45%", height: 11 })
+    viewState.kind === "loading" && /* @__PURE__ */ jsx22(Box20, { sx: { display: "flex", flexDirection: "column", gap: 1.25, minHeight: size }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs20(Box20, { sx: { display: "flex", alignItems: "center", gap: 1.25 }, children: [
+      /* @__PURE__ */ jsx22(Skeleton8, { variant: "circular", width: size, height: size }),
+      /* @__PURE__ */ jsxs20(Box20, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx22(Skeleton8, { variant: "text", width: "70%", height: 12, sx: { mb: 0.25 } }),
+        /* @__PURE__ */ jsx22(Skeleton8, { variant: "text", width: "45%", height: 11 })
       ] }),
-      /* @__PURE__ */ jsx21(Skeleton8, { variant: "text", width: 64, height: 12 })
+      /* @__PURE__ */ jsx22(Skeleton8, { variant: "text", width: 64, height: 12 })
     ] }, i)) }),
-    viewState.kind === "error" && /* @__PURE__ */ jsx21(Typography17, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: viewState.message }),
-    viewState.kind === "unprovisioned" && /* @__PURE__ */ jsx21(Typography17, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: UNPROVISIONED_MSG }),
-    viewState.kind === "ready" && /* @__PURE__ */ jsxs19(Fragment11, { children: [
-      /* @__PURE__ */ jsxs19(
-        Box19,
+    viewState.kind === "error" && /* @__PURE__ */ jsx22(Typography18, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: viewState.message }),
+    viewState.kind === "unprovisioned" && /* @__PURE__ */ jsx22(Typography18, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: UNPROVISIONED_MSG }),
+    viewState.kind === "ready" && /* @__PURE__ */ jsxs20(Fragment11, { children: [
+      /* @__PURE__ */ jsxs20(
+        Box20,
         {
           sx: {
             display: "flex",
@@ -7511,7 +7723,7 @@ var LiteLLMBudgetGauges = ({
             minWidth: 0
           },
           children: [
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(
               InlineStat,
               {
                 label: "Today spent",
@@ -7521,8 +7733,8 @@ var LiteLLMBudgetGauges = ({
                 title: usageLoading || viewState.usageUnavailable ? void 0 : "Spend since local midnight"
               }
             ),
-            /* @__PURE__ */ jsx21(Box19, { sx: { width: "1px", bgcolor: "divider", flexShrink: 0 } }),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(Box20, { sx: { width: "1px", bgcolor: "divider", flexShrink: 0 } }),
+            /* @__PURE__ */ jsx22(
               InlineStat,
               {
                 label: "Month to date",
@@ -7534,15 +7746,15 @@ var LiteLLMBudgetGauges = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx21(Box19, { sx: { borderTop: "1px solid", borderColor: "divider" }, children: gauges.map((gauge, i) => /* @__PURE__ */ jsx21(
-        Box19,
+      /* @__PURE__ */ jsx22(Box20, { sx: { borderTop: "1px solid", borderColor: "divider" }, children: gauges.map((gauge, i) => /* @__PURE__ */ jsx22(
+        Box20,
         {
           sx: i === 0 ? void 0 : { borderTop: "1px solid", borderColor: "divider" },
-          children: /* @__PURE__ */ jsx21(LevelRow, { gauge, size: gaugeSize, keysHref: keysTabHref })
+          children: /* @__PURE__ */ jsx22(LevelRow, { gauge, size: gaugeSize, keysHref: keysTabHref })
         },
         gauge.kind
       )) }),
-      /* @__PURE__ */ jsx21(Box19, { sx: { mt: 1.25 }, children: /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(Box20, { sx: { mt: 1.25 }, children: /* @__PURE__ */ jsx22(
         SpendStrip,
         {
           data: dailySpend,
@@ -7553,8 +7765,8 @@ var LiteLLMBudgetGauges = ({
           maxBudget: user?.max_budget ?? void 0
         }
       ) }),
-      /* @__PURE__ */ jsx21(Collapse4, { in: isExpanded, unmountOnExit: true, children: /* @__PURE__ */ jsx21(
-        Box19,
+      /* @__PURE__ */ jsx22(Collapse4, { in: isExpanded, unmountOnExit: true, children: /* @__PURE__ */ jsx22(
+        Box20,
         {
           id: expandedRegionId,
           sx: {
@@ -7564,7 +7776,7 @@ var LiteLLMBudgetGauges = ({
             maxHeight: 300,
             overflowY: "auto"
           },
-          children: /* @__PURE__ */ jsx21(LimitListPanel, { children: /* @__PURE__ */ jsx21(
+          children: /* @__PURE__ */ jsx22(LimitListPanel, { children: /* @__PURE__ */ jsx22(
             BudgetLimitList,
             {
               limits: expandedLimits,
@@ -7575,8 +7787,8 @@ var LiteLLMBudgetGauges = ({
         }
       ) })
     ] }),
-    hasFooter && /* @__PURE__ */ jsxs19(
-      Box19,
+    hasFooter && /* @__PURE__ */ jsxs20(
+      Box20,
       {
         sx: (muiTheme) => ({
           mt: 2,