@acarmisc/backstage-plugin-litellm 0.23.0 → 0.24.0

package/dist/index.d.ts

@@ -8,6 +8,8 @@ export { LiteLLMHomeWidget } from './components/LiteLLMHomeWidget';
 export type { LiteLLMHomeWidgetProps } from './components/LiteLLMHomeWidget';
 export { LiteLLMBudgetWidget } from './components/LiteLLMBudgetWidget';
 export type { LiteLLMBudgetWidgetProps } from './components/LiteLLMBudgetWidget';
+export { LiteLLMBudgetGauges } from './components/LiteLLMBudgetGauges';
+export type { LiteLLMBudgetGaugesProps } from './components/LiteLLMBudgetGauges';
 export { GenerateKeyDialog } from './components/GenerateKeyDialog';
 export { ManageTeamDialog } from './components/ManageTeamDialog';
 export { LiteLlmApi, liteLlmApiRef } from './api';

package/dist/index.esm.js

@@ -319,7 +319,7 @@ function SegmentedControl({
     })
   );
 }
-var MONTHS, fmtDateShort, fmtCompact, fmtUsdCompact, CHART_COLORS, SERIES, OTHER_COLOR, ChartTooltip, SeriesLegend, StatusPill, TagChip, SectionCard, ChartCard, MetricStrip, Stat, Meter, dataTableSx, quietIconButtonSx, EmptyState;
+var 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";
@@ -683,6 +683,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__ */ React.createElement(
+        Box,
+        {
+          sx: (theme) => ({
+            position: "relative",
+            width: size,
+            height: size,
+            flexShrink: 0,
+            color: toneColor(theme, tone)
+          })
+        },
+        /* @__PURE__ */ React.createElement(
+          Box,
+          {
+            component: "svg",
+            viewBox: `0 0 ${size} ${size}`,
+            width: size,
+            height: size,
+            sx: { display: "block", transform: "rotate(-90deg)" }
+          },
+          /* @__PURE__ */ React.createElement(
+            Box,
+            {
+              component: "circle",
+              cx: size / 2,
+              cy: size / 2,
+              r,
+              fill: "none",
+              strokeWidth: thickness,
+              sx: (theme) => ({
+                stroke: alpha(
+                  theme.palette.text.primary,
+                  theme.palette.mode === "dark" ? 0.14 : 0.09
+                )
+              })
+            }
+          ),
+          /* @__PURE__ */ React.createElement(
+            Box,
+            {
+              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__ */ React.createElement(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              lineHeight: 1
+            }
+          },
+          /* @__PURE__ */ React.createElement(
+            Typography,
+            {
+              sx: {
+                fontSize: size <= 64 ? 15 : 18,
+                fontWeight: 700,
+                fontVariantNumeric: "tabular-nums",
+                color: "text.primary"
+              }
+            },
+            label ?? `${Math.round(value)}%`
+          ),
+          caption && /* @__PURE__ */ React.createElement(
+            Typography,
+            {
+              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.
@@ -2828,6 +2924,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,
@@ -2854,9 +2966,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"];
   }
 });
 
@@ -4516,6 +4630,201 @@ var LiteLLMHomeWidget = ({
 
 // src/index.ts
 init_LiteLLMBudgetWidget();
+
+// src/components/LiteLLMBudgetGauges.tsx
+init_api();
+init_format();
+init_ui();
+init_budget();
+import React14, { useEffect as useEffect5, useMemo as useMemo10, useState as useState11 } from "react";
+import Paper9 from "@mui/material/Paper";
+import Box13 from "@mui/material/Box";
+import Typography13 from "@mui/material/Typography";
+import CircularProgress8 from "@mui/material/CircularProgress";
+import Alert8 from "@mui/material/Alert";
+import { useApi as useApi5 } from "@backstage/core-plugin-api";
+import { Link as Link2 } from "@backstage/core-components";
+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__ */ React14.createElement(
+    Box13,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        minWidth: 0,
+        flex: 1
+      }
+    },
+    /* @__PURE__ */ React14.createElement(
+      Gauge,
+      {
+        value: limit?.pct ?? 0,
+        tone,
+        size,
+        label: limit ? `${Math.round(limit.pct)}%` : "\u2014"
+      }
+    ),
+    /* @__PURE__ */ React14.createElement(
+      Typography13,
+      {
+        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__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+      Typography13,
+      {
+        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__ */ React14.createElement(
+      Typography13,
+      {
+        variant: "caption",
+        color: "text.secondary",
+        sx: {
+          fontSize: 10.5,
+          fontVariantNumeric: "tabular-nums",
+          textAlign: "center"
+        }
+      },
+      spendCaption(limit)
+    ), extra > 0 ? /* @__PURE__ */ React14.createElement(
+      Typography13,
+      {
+        component: Link2,
+        to: keysHref,
+        variant: "caption",
+        sx: {
+          fontSize: 10.5,
+          color: "primary.main",
+          textDecoration: "none",
+          "&:hover": { textDecoration: "underline" }
+        }
+      },
+      "+",
+      extra,
+      " more"
+    ) : /* @__PURE__ */ React14.createElement(Typography13, { variant: "caption", color: "text.secondary", sx: { fontSize: 10.5 } }, resetLabel(limit))) : /* @__PURE__ */ React14.createElement(
+      Typography13,
+      {
+        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 = useApi5(liteLlmApiRef);
+  const [loading, setLoading] = useState11(true);
+  const [error, setError] = useState11(null);
+  const [user, setUser] = useState11(null);
+  const [teams, setTeams] = useState11([]);
+  const [keys, setKeys] = useState11([]);
+  useEffect5(() => {
+    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 = useMemo10(
+    () => buildBudgetSummary(user, teams, keys, keys.length),
+    [user, teams, keys]
+  );
+  const gauges = useMemo10(() => buildBudgetGauges(summary), [summary]);
+  const headline = useMemo10(() => budgetHeadline(summary), [summary]);
+  const summaryText = headline.count === 0 ? "no limits apply" : `${headline.count} limit${headline.count === 1 ? "" : "s"}`;
+  return /* @__PURE__ */ React14.createElement(Paper9, { sx: { p: 2 } }, /* @__PURE__ */ React14.createElement(Box13, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.5, minWidth: 0 } }, /* @__PURE__ */ React14.createElement(Typography13, { variant: "h6", lineHeight: 1.2, sx: { minWidth: 0, flex: 1 } }, title), !loading && !error && /* @__PURE__ */ React14.createElement(
+    StatusPill,
+    {
+      label: summaryText,
+      tone: budgetTone2(headline.closest?.pct ?? 0),
+      dot: headline.count > 0
+    }
+  )), loading && /* @__PURE__ */ React14.createElement(Box13, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 110 }, /* @__PURE__ */ React14.createElement(CircularProgress8, { size: 28 })), !loading && error && /* @__PURE__ */ React14.createElement(Alert8, { severity: "error", sx: { mt: 0.5 } }, error), !loading && !error && /* @__PURE__ */ React14.createElement(Box13, { sx: { display: "flex", alignItems: "flex-start", gap: 1 } }, gauges.map((gauge) => /* @__PURE__ */ React14.createElement(LevelGauge, { key: gauge.kind, gauge, size, keysHref }))), action && /* @__PURE__ */ React14.createElement(
+    Box13,
+    {
+      sx: (theme) => ({
+        mt: 2,
+        pt: 2,
+        borderTop: `1px solid ${theme.palette.divider}`
+      })
+    },
+    action
+  ));
+};
+
+// src/index.ts
 init_GenerateKeyDialog();
 init_ManageTeamDialog();
 init_api();
@@ -4524,6 +4833,7 @@ export {
   DashboardHeader,
   GenerateKeyDialog,
   KeysTable,
+  LiteLLMBudgetGauges,
   LiteLLMBudgetWidget,
   LiteLLMHomeWidget,
   LiteLLMPage,