@acarmisc/backstage-plugin-litellm 0.35.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");
       }
@@ -6739,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();
@@ -6750,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,
@@ -6762,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, {});
     }
   }
 });
@@ -6775,7 +6914,7 @@ var litellmPlugin = createFrontendPlugin({
   routes: {
     root: rootRouteRef
   },
-  extensions: [liteLlmApi, liteLlmPage]
+  extensions: [liteLlmApi, liteLlmPage, liteLlmConnectPage]
 });
 
 // src/index.ts
@@ -6793,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";
 
@@ -6849,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();
@@ -6867,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);
@@ -6906,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,
@@ -6918,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,
@@ -6929,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: {
@@ -6956,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",
@@ -6983,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" }) })
     ] })
   ] });
 };
@@ -7002,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
@@ -7042,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" },
@@ -7066,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) => ({
@@ -7084,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,
@@ -7098,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: {
@@ -7117,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",
@@ -7148,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,
@@ -7171,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",
@@ -7183,7 +7322,7 @@ var LevelRow = ({
         minWidth: 0
       },
       children: [
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           Gauge,
           {
             value: limit?.pct ?? 0,
@@ -7193,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,
@@ -7213,8 +7352,8 @@ var LevelRow = ({
                 children: limit.label
               }
             ),
-            /* @__PURE__ */ jsx21(
-              Typography17,
+            /* @__PURE__ */ jsx22(
+              Typography18,
               {
                 variant: "caption",
                 color: overCap ? "error" : "text.secondary",
@@ -7230,8 +7369,8 @@ var LevelRow = ({
                 children: subNote()
               }
             )
-          ] }) : /* @__PURE__ */ jsx21(
-            Typography17,
+          ] }) : /* @__PURE__ */ jsx22(
+            Typography18,
             {
               variant: "caption",
               color: "text.secondary",
@@ -7247,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: {
@@ -7266,8 +7405,8 @@ var LevelRow = ({
               children: amountCaption(limit)
             }
           ),
-          /* @__PURE__ */ jsx21(
-            Typography17,
+          /* @__PURE__ */ jsx22(
+            Typography18,
             {
               variant: "caption",
               color: "text.secondary",
@@ -7298,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",
@@ -7313,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,
@@ -7325,7 +7464,7 @@ var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, m
           strokeWidth: 1
         }
       ),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         Area4,
         {
           type: "monotone",
@@ -7347,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",
@@ -7361,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",
@@ -7373,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: {
@@ -7418,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;
@@ -7426,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;
@@ -7517,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) => ({
@@ -7549,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,
@@ -7562,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",
@@ -7584,7 +7723,7 @@ var LiteLLMBudgetGauges = ({
             minWidth: 0
           },
           children: [
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(
               InlineStat,
               {
                 label: "Today spent",
@@ -7594,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",
@@ -7607,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,
@@ -7626,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: {
@@ -7637,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,
@@ -7648,8 +7787,8 @@ var LiteLLMBudgetGauges = ({
         }
       ) })
     ] }),
-    hasFooter && /* @__PURE__ */ jsxs19(
-      Box19,
+    hasFooter && /* @__PURE__ */ jsxs20(
+      Box20,
       {
         sx: (muiTheme) => ({
           mt: 2,