@acarmisc/backstage-plugin-litellm 0.22.0 → 0.24.0

package/dist/budget.d.ts

@@ -17,6 +17,12 @@ export interface BudgetLimit {
     softLimit?: number;
     /** Share of the cap spent, 0..100+ (unclamped). */
     pct: number;
+    /**
+     * True when the backend redacted the dollar amounts (team budget hiding).
+     * `budget`/`spend` are then 0 and only `pct` carries the signal — render
+     * the meter without `$` figures.
+     */
+    hidden?: boolean;
 }
 /** The budgets that apply to the current user, grouped by enforcement level. */
 export interface BudgetSummary {
@@ -39,6 +45,28 @@ export interface BudgetSummary {
  * team falls back to the owner's personal budget.
  */
 export declare function buildBudgetSummary(user: UserInfo | null, teams: TeamInfo[], keys: VirtualKey[], maxKeys?: number): BudgetSummary;
+/** One gauge in the condensed homepage card — a single enforcement level. */
+export interface BudgetGauge {
+    kind: 'key' | 'user' | 'team';
+    /**
+     * The limit of this level nearest its cap, or undefined when the user has
+     * no cap at this level (render an empty gauge).
+     */
+    limit?: BudgetLimit;
+    /** How many limits apply at this level (1 for a personal budget). */
+    count: number;
+}
+/**
+ * Collapses a `BudgetSummary` to exactly one gauge per enforcement level —
+ * key, user, team — carrying the limit nearest its cap and how many limits
+ * that level holds. Every level is always returned, with `limit` undefined
+ * when the user has no cap there, so the caller can render a stable row.
+ *
+ * Pass a summary built with a large `maxKeys` (e.g. `keys.length`) so the
+ * nearest key is present even when it falls outside the display cap; a key
+ * count hidden by that cap is still reflected in `count`.
+ */
+export declare function buildBudgetGauges(summary: BudgetSummary): BudgetGauge[];
 /**
  * One-line summary of a `BudgetSummary`, for a collapsed/compact header:
  * how many concrete limits the user is subject to, and the one closest to

package/dist/components/LiteLLMBudgetGauges.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Condensed budget card for a homepage column: one ring gauge per
+ * enforcement level (key → personal → team), each showing the limit nearest
+ * its cap. Where the full `LiteLLMBudgetWidget` lists every limit as a
+ * spend-vs-cap meter, this trades detail for density — a single row of rings
+ * with a label and spend figure under each.
+ *
+ * Gauges are always rendered in the same order, with an empty ring when the
+ * user has no cap at that level, so the card keeps a stable shape as data
+ * loads and across users. When a level holds several limits, the ring shows
+ * the one closest to its cap and a "+N more" link counts the rest.
+ */
+import React from 'react';
+export interface LiteLLMBudgetGaugesProps {
+    /** Optional title override. Defaults to 'Budget'. */
+    title?: string;
+    /** Ring diameter in px. Defaults to 72. */
+    size?: number;
+    /** Where the "+N more" key link points. Defaults to the Keys tab. */
+    keysHref?: string;
+    /**
+     * Node rendered at the card bottom, below a divider — e.g. a "create key"
+     * button.
+     */
+    action?: React.ReactNode;
+}
+export declare const LiteLLMBudgetGauges: React.FC<LiteLLMBudgetGaugesProps>;

package/dist/components/ui.d.ts

@@ -156,6 +156,26 @@ export declare const Meter: React.FC<{
     tone?: Tone;
     height?: number;
 }>;
+/**
+ * Ring gauge for at-a-glance ratios. Hand-drawn SVG rather than MUI's
+ * `CircularProgress`: the track has to stay a neutral hairline (MUI tints it
+ * from the bar colour, so an empty ring reads as full), and the value may
+ * legitimately exceed 100% — the arc clamps at a full turn while the centre
+ * label keeps the real number.
+ */
+export declare const Gauge: React.FC<{
+    /** Share consumed, 0..100+ (unclamped for the label). */
+    value: number;
+    tone?: Tone;
+    /** Outer diameter in px. */
+    size?: number;
+    /** Ring thickness in px. */
+    thickness?: number;
+    /** Centre content; defaults to the rounded percentage. */
+    label?: React.ReactNode;
+    /** Small caption under the value, inside the ring. */
+    caption?: React.ReactNode;
+}>;
 /**
  * Secondary navigation inside a card. Hand-rolled rather than a second set of
  * `Tabs` so it reads as subordinate to the page tabs instead of competing

package/dist/index.cjs.js

@@ -335,7 +335,7 @@ function SegmentedControl({
     })
   );
 }
-var import_react, import_Box, import_ButtonBase, import_Paper, import_Typography, import_styles, MONTHS, fmtDateShort, fmtCompact, fmtUsdCompact, CHART_COLORS, SERIES, OTHER_COLOR, ChartTooltip, SeriesLegend, StatusPill, TagChip, SectionCard, ChartCard, MetricStrip, Stat, Meter, dataTableSx, quietIconButtonSx, EmptyState;
+var import_react, import_Box, import_ButtonBase, import_Paper, import_Typography, import_styles, MONTHS, fmtDateShort, fmtCompact, fmtUsdCompact, CHART_COLORS, SERIES, OTHER_COLOR, ChartTooltip, SeriesLegend, StatusPill, TagChip, SectionCard, ChartCard, MetricStrip, Stat, Meter, Gauge, dataTableSx, quietIconButtonSx, EmptyState;
 var init_ui = __esm({
   "src/components/ui.tsx"() {
     "use strict";
@@ -705,6 +705,102 @@ var init_ui = __esm({
         }
       )
     );
+    Gauge = ({ value, tone = "accent", size = 72, thickness = 6, label, caption }) => {
+      const clamped = Math.max(0, Math.min(100, value ?? 0));
+      const r = (size - thickness) / 2;
+      const c = 2 * Math.PI * r;
+      const dash = clamped / 100 * c;
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_Box.default,
+        {
+          sx: (theme) => ({
+            position: "relative",
+            width: size,
+            height: size,
+            flexShrink: 0,
+            color: toneColor(theme, tone)
+          })
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_Box.default,
+          {
+            component: "svg",
+            viewBox: `0 0 ${size} ${size}`,
+            width: size,
+            height: size,
+            sx: { display: "block", transform: "rotate(-90deg)" }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_Box.default,
+            {
+              component: "circle",
+              cx: size / 2,
+              cy: size / 2,
+              r,
+              fill: "none",
+              strokeWidth: thickness,
+              sx: (theme) => ({
+                stroke: (0, import_styles.alpha)(
+                  theme.palette.text.primary,
+                  theme.palette.mode === "dark" ? 0.14 : 0.09
+                )
+              })
+            }
+          ),
+          /* @__PURE__ */ import_react.default.createElement(
+            import_Box.default,
+            {
+              component: "circle",
+              cx: size / 2,
+              cy: size / 2,
+              r,
+              fill: "none",
+              strokeWidth: thickness,
+              strokeLinecap: "round",
+              strokeDasharray: `${dash} ${c - dash}`,
+              sx: (theme) => ({
+                stroke: "currentColor",
+                transition: theme.transitions.create("stroke-dasharray")
+              })
+            }
+          )
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          import_Box.default,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              lineHeight: 1
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_Typography.default,
+            {
+              sx: {
+                fontSize: size <= 64 ? 15 : 18,
+                fontWeight: 700,
+                fontVariantNumeric: "tabular-nums",
+                color: "text.primary"
+              }
+            },
+            label ?? `${Math.round(value)}%`
+          ),
+          caption && /* @__PURE__ */ import_react.default.createElement(
+            import_Typography.default,
+            {
+              variant: "caption",
+              sx: { fontSize: 9.5, color: "text.secondary", mt: 0.25 }
+            },
+            caption
+          )
+        )
+      );
+    };
     dataTableSx = (theme) => ({
       // Element selectors, not `.MuiTableCell-head`: host apps may set a MUI
       // classname prefix (Backstage ships `v5-`), which breaks global class targeting.
@@ -2023,6 +2119,8 @@ var init_ManageTeamDialog = __esm({
       const [mcpError, setMcpError] = (0, import_react5.useState)(null);
       const allowUnlimitedBudget = config?.teamManagement?.allowUnlimitedBudget ?? false;
       const maxBudgetCeiling = config?.teamManagement?.maxBudgetCeiling ?? FALLBACK_BUDGET_CEILING;
+      const hideBudgetForManagers = config?.display?.hideTeamBudgetForManagers ?? false;
+      const budgetWriteOnly = hideBudgetForManagers && mode === "edit";
       const members = (0, import_react5.useMemo)(() => team?.members_with_roles ?? [], [team]);
       const showMembers = mode === "edit" && !!canManageMembers;
       const catalogApi = (0, import_core_plugin_api2.useApi)(import_plugin_catalog_react.catalogApiRef);
@@ -2058,9 +2156,13 @@ var init_ManageTeamDialog = __esm({
           if (mode === "edit" && team) {
             setAlias(team.team_alias ?? "");
             setModels(team.models ?? []);
-            setMaxBudget(
-              team.max_budget ? String(team.max_budget) : String(maxBudgetCeiling)
-            );
+            if (hideBudgetForManagers) {
+              setMaxBudget("");
+            } else {
+              setMaxBudget(
+                team.max_budget ? String(team.max_budget) : String(maxBudgetCeiling)
+              );
+            }
             setUnlimited(allowUnlimitedBudget && !team.max_budget);
             setBudgetDuration(team.budget_duration ?? DEFAULT_BUDGET_DURATION);
           } else {
@@ -2080,7 +2182,7 @@ var init_ManageTeamDialog = __esm({
           setMcpIds(team?.object_permission?.mcp_servers ?? []);
           setMcpError(null);
         }
-      }, [open, mode, team, allowUnlimitedBudget, maxBudgetCeiling]);
+      }, [open, mode, team, allowUnlimitedBudget, maxBudgetCeiling, hideBudgetForManagers]);
       const handleSubmit = async () => {
         setError(null);
         if (!alias.trim()) {
@@ -2092,18 +2194,21 @@ var init_ManageTeamDialog = __esm({
           return;
         }
         if (!unlimited) {
-          if (!maxBudget) {
-            setError("Budget is required when unlimited budgets are disabled");
-            return;
-          }
-          const budget = parseFloat(maxBudget);
-          if (isNaN(budget) || budget <= 0) {
-            setError("Budget must be a positive number");
-            return;
-          }
-          if (budget > maxBudgetCeiling) {
-            setError(`Budget cannot exceed $${maxBudgetCeiling}`);
-            return;
+          const budgetLeftBlank = budgetWriteOnly && !maxBudget.trim();
+          if (!budgetLeftBlank) {
+            if (!maxBudget) {
+              setError("Budget is required when unlimited budgets are disabled");
+              return;
+            }
+            const budget = parseFloat(maxBudget);
+            if (isNaN(budget) || budget <= 0) {
+              setError("Budget must be a positive number");
+              return;
+            }
+            if (budget > maxBudgetCeiling) {
+              setError(`Budget cannot exceed $${maxBudgetCeiling}`);
+              return;
+            }
           }
         }
         try {
@@ -2117,10 +2222,16 @@ var init_ManageTeamDialog = __esm({
               ...budgetDuration && { budget_duration: budgetDuration }
             };
           } else {
+            let budgetField = {};
+            if (unlimited) {
+              budgetField = { max_budget: null };
+            } else if (maxBudget.trim()) {
+              budgetField = { max_budget: parseFloat(maxBudget) };
+            }
             payload = {
               team_alias: alias.trim(),
               models,
-              ...unlimited ? { max_budget: null } : { max_budget: parseFloat(maxBudget) },
+              ...budgetField,
               ...budgetDuration && { budget_duration: budgetDuration }
             };
           }
@@ -2226,13 +2337,13 @@ var init_ManageTeamDialog = __esm({
       ), /* @__PURE__ */ import_react5.default.createElement(
         import_TextField3.default,
         {
-          label: "Max Budget ($)",
+          label: budgetWriteOnly ? "New Max Budget ($)" : "Max Budget ($)",
           type: "number",
           value: maxBudget,
           onChange: (e) => setMaxBudget(e.target.value),
           disabled: submitting || unlimited,
           inputProps: { min: 0, max: maxBudgetCeiling },
-          helperText: `Maximum: $${maxBudgetCeiling}`,
+          helperText: budgetWriteOnly ? "Current budget is hidden \u2014 leave blank to keep it, or enter a new value" : `Maximum: $${maxBudgetCeiling}`,
           fullWidth: true
         }
       ), allowUnlimitedBudget && /* @__PURE__ */ import_react5.default.createElement(
@@ -2788,7 +2899,19 @@ function buildBudgetSummary(user, teams, keys, maxKeys = 3) {
       pct: limitPct(spend, budget)
     };
   })() : void 0;
-  const teamLimits = teams.filter((t) => (t.max_budget ?? 0) > 0).map((t) => {
+  const teamLimits = teams.filter((t) => (t.max_budget ?? 0) > 0 || t.budget_hidden === true).map((t) => {
+    if (t.budget_hidden === true) {
+      return {
+        kind: "team",
+        label: t.team_alias || "Untitled team",
+        sublabel: t.team_id,
+        budget: 0,
+        spend: 0,
+        budgetDuration: t.budget_duration,
+        pct: Math.min(100, Math.max(0, t.budget_pct ?? 0)),
+        hidden: true
+      };
+    }
     const spend = t.spend ?? 0;
     return {
       kind: "team",
@@ -2808,6 +2931,22 @@ function buildBudgetSummary(user, teams, keys, maxKeys = 3) {
     teams: teamLimits
   };
 }
+function buildBudgetGauges(summary) {
+  const byLevel = {
+    key: summary.keys,
+    user: summary.user ? [summary.user] : [],
+    team: summary.teams
+  };
+  return GAUGE_KINDS.map((kind) => {
+    const limits = byLevel[kind];
+    const count = kind === "key" ? limits.length + summary.hiddenBudgetedKeys : limits.length;
+    return {
+      kind,
+      count,
+      limit: limits.length ? limits.reduce((a, b) => b.pct > a.pct ? b : a) : void 0
+    };
+  });
+}
 function budgetHeadline(summary) {
   const all = [
     ...summary.keys,
@@ -2834,9 +2973,11 @@ function budgetTone2(pct) {
   if (pct >= 80) return "warning";
   return "accent";
 }
+var GAUGE_KINDS;
 var init_budget = __esm({
   "src/budget.ts"() {
     "use strict";
+    GAUGE_KINDS = ["key", "user", "team"];
   }
 });
 
@@ -2964,7 +3105,7 @@ var init_LiteLLMBudgetWidget = __esm({
           }
         },
         limit.sublabel
-      )), /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, fmtUsd(limit.spend), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { component: "span", color: "text.secondary", sx: { fontWeight: 400 } }, " / ", fmtUsd(limit.budget)))), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { mt: 1 } }, /* @__PURE__ */ import_react7.default.createElement(Meter, { value: limit.pct, tone, height: 6 })), /* @__PURE__ */ import_react7.default.createElement(
+      )), limit.hidden ? /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, pct, "% used") : /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, fmtUsd(limit.spend), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { component: "span", color: "text.secondary", sx: { fontWeight: 400 } }, " / ", fmtUsd(limit.budget)))), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { mt: 1 } }, /* @__PURE__ */ import_react7.default.createElement(Meter, { value: limit.pct, tone, height: 6 })), /* @__PURE__ */ import_react7.default.createElement(
         import_Box7.default,
         {
           sx: {
@@ -2975,7 +3116,7 @@ var init_LiteLLMBudgetWidget = __esm({
             mt: 0.75
           }
         },
-        /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, pct, "% of budget", closeTo && ` \xB7 soft-limit warning`),
+        /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, limit.hidden ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, "Hidden by admin") : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, pct, "% of budget", closeTo && ` \xB7 soft-limit warning`)),
         /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary" }, fmtBudgetDuration(limit.budgetDuration) ? `resets ${fmtBudgetDuration(limit.budgetDuration)}` : "never resets")
       ));
     };
@@ -3156,6 +3297,15 @@ function budgetTone3(isOver, isNear) {
   if (isNear) return "warning";
   return "accent";
 }
+function visibleBudgetPct(spend, budget) {
+  if (budget <= 0) return 0;
+  return Math.min(spend / budget * 100, 100);
+}
+function budgetStatValue(hidden, budget) {
+  if (hidden) return "Hidden";
+  if (budget > 0) return fmtUsd2(budget);
+  return "Unlimited";
+}
 var import_react8, import_Paper6, import_Box8, import_Typography8, import_Skeleton4, import_Divider3, import_Table4, import_TableBody4, import_TableCell4, import_TableHead4, import_TableRow4, import_TableContainer4, import_Collapse2, import_IconButton5, import_Button5, import_CircularProgress5, import_styles5, import_icons_material6, import_recharts2, fmtUsd2, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
@@ -3184,13 +3334,15 @@ var init_TeamUsage = __esm({
     TeamCard = ({ team, usage, usageLoading, canManage, onEditTeam }) => {
       const [expanded, setExpanded] = (0, import_react8.useState)(false);
       const chart = useChartTheme();
-      const budget = team.max_budget ?? 0;
-      const spend = team.spend ?? 0;
-      const budgetPct = budget > 0 ? Math.min(spend / budget * 100, 100) : 0;
-      const isOver = budget > 0 && spend >= budget;
-      const isNear = budget > 0 && spend >= budget * 0.8 && !isOver;
+      const hidden = team.budget_hidden === true;
+      const budget = hidden ? 0 : team.max_budget ?? 0;
+      const spend = hidden ? 0 : team.spend ?? 0;
+      const budgetPct = hidden ? Math.min(100, Math.max(0, team.budget_pct ?? 0)) : visibleBudgetPct(spend, budget);
+      const isOver = hidden ? team.budget_status === "over" : budget > 0 && spend >= budget;
+      const isNear = hidden ? team.budget_status === "near" : budget > 0 && spend >= budget * 0.8 && !isOver;
       const dailyData = usage?.daily_usage?.map((d) => ({ date: d.date, spend: d.spend })) ?? [];
       const renderDailySpendSection = () => {
+        if (hidden) return null;
         if (usageLoading) {
           return /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { display: "flex", justifyContent: "center", py: 3 }, /* @__PURE__ */ import_react8.default.createElement(import_CircularProgress5.default, { size: 22 }));
         }
@@ -3291,11 +3443,11 @@ var init_TeamUsage = __esm({
         },
         /* @__PURE__ */ import_react8.default.createElement(Stat, { label: "Members", value: team.members_with_roles?.length ?? "\u2014" }),
         /* @__PURE__ */ import_react8.default.createElement(Stat, { label: "Models", value: team.models?.length ? team.models.length : "All" }),
-        /* @__PURE__ */ import_react8.default.createElement(Stat, { label: "Budget", value: budget > 0 ? fmtUsd2(budget) : "Unlimited" }),
-        /* @__PURE__ */ import_react8.default.createElement(Stat, { label: "Spend", value: fmtUsd2(spend) }),
+        /* @__PURE__ */ import_react8.default.createElement(Stat, { label: "Budget", value: budgetStatValue(hidden, budget) }),
+        /* @__PURE__ */ import_react8.default.createElement(Stat, { label: "Spend", value: hidden ? "\u2014" : fmtUsd2(spend) }),
         /* @__PURE__ */ import_react8.default.createElement(Stat, { label: "TPM", value: team.tpm_limit && team.tpm_limit > 0 ? team.tpm_limit.toLocaleString() : "\u2014" }),
         /* @__PURE__ */ import_react8.default.createElement(Stat, { label: "RPM", value: team.rpm_limit && team.rpm_limit > 0 ? team.rpm_limit.toLocaleString() : "\u2014" })
-      ), budget > 0 && /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, fmtUsd2(spend), " of ", fmtUsd2(budget)), /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "%")), /* @__PURE__ */ import_react8.default.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 })), /* @__PURE__ */ import_react8.default.createElement(import_Collapse2.default, { in: expanded, unmountOnExit: true }, /* @__PURE__ */ import_react8.default.createElement(import_Divider3.default, { sx: { my: 2.5 } }), /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { mb: 2.5 }, sectionLabel("Models"), team.models?.length ? /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { display: "flex", gap: 0.5, flexWrap: "wrap" }, team.models.map((m) => /* @__PURE__ */ import_react8.default.createElement(TagChip, { key: m, label: m, title: m }))) : /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2", color: "text.secondary" }, "All models allowed")), renderDailySpendSection(), /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, null, sectionLabel("Members"), team.members_with_roles?.length ? /* @__PURE__ */ import_react8.default.createElement(
+      ), hidden && /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "% used"), /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary" }, "Hidden by admin")), /* @__PURE__ */ import_react8.default.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 }), /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 0.75 } }, "Team budget is hidden \u2014 showing usage level only", team.budget_duration ? ` \xB7 resets every ${team.budget_duration}` : "", ".")), !hidden && budget > 0 && /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, fmtUsd2(spend), " of ", fmtUsd2(budget)), /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "%")), /* @__PURE__ */ import_react8.default.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 })), /* @__PURE__ */ import_react8.default.createElement(import_Collapse2.default, { in: expanded, unmountOnExit: true }, /* @__PURE__ */ import_react8.default.createElement(import_Divider3.default, { sx: { my: 2.5 } }), /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { mb: 2.5 }, sectionLabel("Models"), team.models?.length ? /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { display: "flex", gap: 0.5, flexWrap: "wrap" }, team.models.map((m) => /* @__PURE__ */ import_react8.default.createElement(TagChip, { key: m, label: m, title: m }))) : /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2", color: "text.secondary" }, "All models allowed")), renderDailySpendSection(), /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, null, sectionLabel("Members"), team.members_with_roles?.length ? /* @__PURE__ */ import_react8.default.createElement(
         import_TableContainer4.default,
         {
           component: import_Paper6.default,
@@ -4341,6 +4493,7 @@ __export(index_exports, {
   DashboardHeader: () => DashboardHeader,
   GenerateKeyDialog: () => GenerateKeyDialog,
   KeysTable: () => KeysTable,
+  LiteLLMBudgetGauges: () => LiteLLMBudgetGauges,
   LiteLLMBudgetWidget: () => LiteLLMBudgetWidget,
   LiteLLMHomeWidget: () => LiteLLMHomeWidget,
   LiteLLMPage: () => LiteLLMPage,
@@ -4495,6 +4648,201 @@ var LiteLLMHomeWidget = ({
 
 // src/index.ts
 init_LiteLLMBudgetWidget();
+
+// src/components/LiteLLMBudgetGauges.tsx
+var import_react14 = __toESM(require("react"));
+var import_Paper9 = __toESM(require("@mui/material/Paper"));
+var import_Box13 = __toESM(require("@mui/material/Box"));
+var import_Typography13 = __toESM(require("@mui/material/Typography"));
+var import_CircularProgress8 = __toESM(require("@mui/material/CircularProgress"));
+var import_Alert8 = __toESM(require("@mui/material/Alert"));
+var import_core_plugin_api6 = require("@backstage/core-plugin-api");
+var import_core_components2 = require("@backstage/core-components");
+init_api();
+init_format();
+init_ui();
+init_budget();
+var DEFAULT_KEYS_HREF = "/litellm?tab=keys";
+var LEVEL = {
+  key: { name: "Key", none: "No key budget" },
+  user: { name: "User", none: "No personal budget" },
+  team: { name: "Team", none: "No team budget" }
+};
+function fmtUsdShort(n) {
+  const v = n ?? 0;
+  if (v >= 100 && Number.isInteger(v)) return `$${v}`;
+  return fmtUsd(v);
+}
+function spendCaption(limit) {
+  if (limit.hidden) return "hidden by admin";
+  return `${fmtUsdShort(limit.spend)} / ${fmtUsdShort(limit.budget)}`;
+}
+function resetLabel(limit) {
+  const window2 = fmtBudgetDuration(limit.budgetDuration);
+  return window2 ? `resets ${window2}` : "never resets";
+}
+var LevelGauge = ({
+  gauge,
+  size,
+  keysHref
+}) => {
+  const { name, none } = LEVEL[gauge.kind];
+  const limit = gauge.limit;
+  const tone = limit ? budgetTone2(limit.pct) : "neutral";
+  const extra = gauge.kind === "key" ? Math.max(0, gauge.count - 1) : 0;
+  return /* @__PURE__ */ import_react14.default.createElement(
+    import_Box13.default,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        minWidth: 0,
+        flex: 1
+      }
+    },
+    /* @__PURE__ */ import_react14.default.createElement(
+      Gauge,
+      {
+        value: limit?.pct ?? 0,
+        tone,
+        size,
+        label: limit ? `${Math.round(limit.pct)}%` : "\u2014"
+      }
+    ),
+    /* @__PURE__ */ import_react14.default.createElement(
+      import_Typography13.default,
+      {
+        sx: (theme) => ({
+          mt: 0.75,
+          fontSize: 10.5,
+          fontWeight: 700,
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+          color: tone === "neutral" ? theme.palette.text.secondary : void 0
+        })
+      },
+      name
+    ),
+    limit ? /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(
+      import_Typography13.default,
+      {
+        variant: "caption",
+        title: limit.sublabel ? `${limit.label} \xB7 ${limit.sublabel}` : limit.label,
+        sx: {
+          mt: 0.25,
+          fontSize: 11,
+          fontWeight: 600,
+          maxWidth: "100%",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        }
+      },
+      limit.label
+    ), /* @__PURE__ */ import_react14.default.createElement(
+      import_Typography13.default,
+      {
+        variant: "caption",
+        color: "text.secondary",
+        sx: {
+          fontSize: 10.5,
+          fontVariantNumeric: "tabular-nums",
+          textAlign: "center"
+        }
+      },
+      spendCaption(limit)
+    ), extra > 0 ? /* @__PURE__ */ import_react14.default.createElement(
+      import_Typography13.default,
+      {
+        component: import_core_components2.Link,
+        to: keysHref,
+        variant: "caption",
+        sx: {
+          fontSize: 10.5,
+          color: "primary.main",
+          textDecoration: "none",
+          "&:hover": { textDecoration: "underline" }
+        }
+      },
+      "+",
+      extra,
+      " more"
+    ) : /* @__PURE__ */ import_react14.default.createElement(import_Typography13.default, { variant: "caption", color: "text.secondary", sx: { fontSize: 10.5 } }, resetLabel(limit))) : /* @__PURE__ */ import_react14.default.createElement(
+      import_Typography13.default,
+      {
+        variant: "caption",
+        color: "text.secondary",
+        sx: { mt: 0.25, fontSize: 10.5, textAlign: "center" }
+      },
+      none
+    )
+  );
+};
+var LiteLLMBudgetGauges = ({
+  title = "Budget",
+  size = 72,
+  keysHref = DEFAULT_KEYS_HREF,
+  action
+}) => {
+  const api = (0, import_core_plugin_api6.useApi)(liteLlmApiRef);
+  const [loading, setLoading] = (0, import_react14.useState)(true);
+  const [error, setError] = (0, import_react14.useState)(null);
+  const [user, setUser] = (0, import_react14.useState)(null);
+  const [teams, setTeams] = (0, import_react14.useState)([]);
+  const [keys, setKeys] = (0, import_react14.useState)([]);
+  (0, import_react14.useEffect)(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    Promise.allSettled([api.getUserInfo(), api.getTeams(), api.listKeys()]).then(
+      ([userResult, teamsResult, keysResult]) => {
+        if (cancelled) return;
+        if (userResult.status === "fulfilled") {
+          setUser(userResult.value);
+        } else {
+          setUser(null);
+          setError(
+            userResult.reason?.message ?? "Failed to load your LiteLLM profile"
+          );
+        }
+        setTeams(teamsResult.status === "fulfilled" ? teamsResult.value : []);
+        setKeys(keysResult.status === "fulfilled" ? keysResult.value : []);
+        setLoading(false);
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [api]);
+  const summary = (0, import_react14.useMemo)(
+    () => buildBudgetSummary(user, teams, keys, keys.length),
+    [user, teams, keys]
+  );
+  const gauges = (0, import_react14.useMemo)(() => buildBudgetGauges(summary), [summary]);
+  const headline = (0, import_react14.useMemo)(() => budgetHeadline(summary), [summary]);
+  const summaryText = headline.count === 0 ? "no limits apply" : `${headline.count} limit${headline.count === 1 ? "" : "s"}`;
+  return /* @__PURE__ */ import_react14.default.createElement(import_Paper9.default, { sx: { p: 2 } }, /* @__PURE__ */ import_react14.default.createElement(import_Box13.default, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.5, minWidth: 0 } }, /* @__PURE__ */ import_react14.default.createElement(import_Typography13.default, { variant: "h6", lineHeight: 1.2, sx: { minWidth: 0, flex: 1 } }, title), !loading && !error && /* @__PURE__ */ import_react14.default.createElement(
+    StatusPill,
+    {
+      label: summaryText,
+      tone: budgetTone2(headline.closest?.pct ?? 0),
+      dot: headline.count > 0
+    }
+  )), loading && /* @__PURE__ */ import_react14.default.createElement(import_Box13.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 110 }, /* @__PURE__ */ import_react14.default.createElement(import_CircularProgress8.default, { size: 28 })), !loading && error && /* @__PURE__ */ import_react14.default.createElement(import_Alert8.default, { severity: "error", sx: { mt: 0.5 } }, error), !loading && !error && /* @__PURE__ */ import_react14.default.createElement(import_Box13.default, { sx: { display: "flex", alignItems: "flex-start", gap: 1 } }, gauges.map((gauge) => /* @__PURE__ */ import_react14.default.createElement(LevelGauge, { key: gauge.kind, gauge, size, keysHref }))), action && /* @__PURE__ */ import_react14.default.createElement(
+    import_Box13.default,
+    {
+      sx: (theme) => ({
+        mt: 2,
+        pt: 2,
+        borderTop: `1px solid ${theme.palette.divider}`
+      })
+    },
+    action
+  ));
+};
+
+// src/index.ts
 init_GenerateKeyDialog();
 init_ManageTeamDialog();
 init_api();