@acarmisc/backstage-plugin-litellm 0.19.0 → 0.20.0

package/dist/index.d.ts

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

package/dist/index.esm.js

@@ -4008,6 +4008,280 @@ var LiteLLMHomeWidget = ({
   ))))));
 };
 
+// src/components/LiteLLMBudgetWidget.tsx
+init_api();
+init_format();
+init_ui();
+import React13, { useEffect as useEffect4, useMemo as useMemo8, useState as useState10 } from "react";
+import Paper8 from "@mui/material/Paper";
+import Box12 from "@mui/material/Box";
+import Typography12 from "@mui/material/Typography";
+import CircularProgress7 from "@mui/material/CircularProgress";
+import Alert7 from "@mui/material/Alert";
+import { alpha as alpha7 } from "@mui/material/styles";
+import { useApi as useApi4 } from "@backstage/core-plugin-api";
+
+// src/budget.ts
+function limitPct(spend, budget) {
+  if (budget <= 0) return 0;
+  return spend / budget * 100;
+}
+function buildBudgetSummary(user, teams, keys, maxKeys = 3) {
+  const budgeted = keys.filter((k) => (k.max_budget ?? 0) > 0).map((k) => {
+    const spend = k.spend ?? 0;
+    return {
+      kind: "key",
+      label: k.key_alias || k.key || "Untitled key",
+      sublabel: k.key,
+      budget: k.max_budget,
+      spend,
+      budgetDuration: k.budget_duration,
+      pct: limitPct(spend, k.max_budget)
+    };
+  }).sort((a, b) => b.pct - a.pct);
+  const userBudget = user && (user.max_budget ?? user.hard_limit ?? 0) > 0 ? (() => {
+    const budget = user.max_budget ?? user.hard_limit ?? 0;
+    const spend = user.current_spend ?? user.spend ?? 0;
+    return {
+      kind: "user",
+      label: "Personal budget",
+      sublabel: user.user_email || user.user_id,
+      budget,
+      spend,
+      budgetDuration: user.budget_duration,
+      softLimit: user.soft_limit,
+      pct: limitPct(spend, budget)
+    };
+  })() : void 0;
+  const teamLimits = teams.filter((t) => (t.max_budget ?? 0) > 0).map((t) => {
+    const spend = t.spend ?? 0;
+    return {
+      kind: "team",
+      label: t.team_alias || "Untitled team",
+      sublabel: t.team_id,
+      budget: t.max_budget,
+      spend,
+      budgetDuration: t.budget_duration,
+      pct: limitPct(spend, t.max_budget)
+    };
+  }).sort((a, b) => b.pct - a.pct);
+  return {
+    keys: budgeted.slice(0, maxKeys),
+    hiddenBudgetedKeys: Math.max(0, budgeted.length - maxKeys),
+    totalKeyCount: keys.length,
+    user: userBudget,
+    teams: teamLimits
+  };
+}
+function fmtBudgetDuration(duration) {
+  if (!duration) return null;
+  const m = /^(\d+)(s|m|h|d)$/.exec(duration);
+  if (!m) return duration;
+  const n = Number(m[1]);
+  const unit = m[2];
+  if (unit === "d") return n === 1 ? "daily" : `every ${n} days`;
+  if (unit === "h") return n === 1 ? "hourly" : `every ${n} hours`;
+  if (unit === "m") return n === 1 ? "every minute" : `every ${n} minutes`;
+  return n === 1 ? "every second" : `every ${n} seconds`;
+}
+function budgetTone3(pct) {
+  if (pct >= 100) return "danger";
+  if (pct >= 80) return "warning";
+  return "accent";
+}
+
+// src/components/LiteLLMBudgetWidget.tsx
+function levelToneColor(tone, theme) {
+  switch (tone) {
+    case "success":
+      return theme.palette.success.main;
+    case "warning":
+      return theme.palette.warning.main;
+    case "danger":
+      return theme.palette.error.main;
+    case "info":
+      return theme.palette.info.main;
+    default:
+      return theme.palette.primary.main;
+  }
+}
+var LevelFrame = ({
+  rank,
+  name,
+  tagline,
+  note,
+  tone,
+  isLast,
+  children
+}) => /* @__PURE__ */ React13.createElement(Box12, { sx: { display: "flex", gap: 1.5 } }, /* @__PURE__ */ React13.createElement(Box12, { sx: { display: "flex", flexDirection: "column", alignItems: "center", width: 26, flexShrink: 0 } }, /* @__PURE__ */ React13.createElement(
+  Box12,
+  {
+    sx: (theme) => ({
+      width: 26,
+      height: 26,
+      borderRadius: "50%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      bgcolor: alpha7(levelToneColor(tone, theme), 0.14),
+      color: levelToneColor(tone, theme),
+      fontSize: 12,
+      fontWeight: 700,
+      flexShrink: 0
+    })
+  },
+  rank
+), /* @__PURE__ */ React13.createElement(
+  Box12,
+  {
+    sx: (theme) => ({
+      flex: 1,
+      width: 2,
+      minHeight: 14,
+      bgcolor: isLast ? "transparent" : alpha7(theme.palette.text.primary, 0.12)
+    })
+  }
+)), /* @__PURE__ */ React13.createElement(Box12, { sx: { flex: 1, minWidth: 0, pb: isLast ? 0 : 2 } }, /* @__PURE__ */ React13.createElement(Box12, { sx: { display: "flex", alignItems: "baseline", gap: 1, flexWrap: "wrap", mb: 0.75 } }, /* @__PURE__ */ React13.createElement(
+  Typography12,
+  {
+    sx: (theme) => ({
+      fontSize: 12.5,
+      fontWeight: 700,
+      letterSpacing: "0.08em",
+      textTransform: "uppercase",
+      color: levelToneColor(tone, theme)
+    })
+  },
+  name
+), /* @__PURE__ */ React13.createElement(Typography12, { variant: "caption", color: "text.secondary", sx: { fontSize: 11.5 } }, tagline), note && /* @__PURE__ */ React13.createElement(StatusPill, { label: note, tone: "neutral", dot: false, sx: { ml: "auto" } })), /* @__PURE__ */ React13.createElement(Box12, { sx: { display: "flex", flexDirection: "column", gap: 1 } }, children)));
+var EmptyLimitCard = ({ children }) => /* @__PURE__ */ React13.createElement(
+  Paper8,
+  {
+    variant: "outlined",
+    sx: (theme) => ({
+      px: 1.5,
+      py: 1.25,
+      borderRadius: 1.5,
+      bgcolor: alpha7(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.03 : 0.015)
+    })
+  },
+  /* @__PURE__ */ React13.createElement(Typography12, { variant: "body2", color: "text.secondary", sx: { fontSize: 13 } }, children)
+);
+var LimitCard = ({ limit }) => {
+  const tone = budgetTone3(limit.pct);
+  const pct = Math.round(limit.pct);
+  const closeTo = limit.softLimit !== void 0 && limit.spend >= limit.softLimit;
+  return /* @__PURE__ */ React13.createElement(Paper8, { variant: "outlined", sx: { px: 1.5, py: 1.25, borderRadius: 1.5 } }, /* @__PURE__ */ React13.createElement(Box12, { sx: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 1.5 } }, /* @__PURE__ */ React13.createElement(Box12, { sx: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ React13.createElement(
+    Typography12,
+    {
+      variant: "body2",
+      sx: { fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+      title: limit.sublabel ? `${limit.label} \xB7 ${limit.sublabel}` : limit.label
+    },
+    limit.label
+  ), limit.sublabel && /* @__PURE__ */ React13.createElement(
+    Typography12,
+    {
+      variant: "caption",
+      color: "text.secondary",
+      sx: {
+        fontSize: 10.5,
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+        display: "block",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
+    },
+    limit.sublabel
+  )), /* @__PURE__ */ React13.createElement(Typography12, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, fmtUsd(limit.spend), /* @__PURE__ */ React13.createElement(Box12, { component: "span", color: "text.secondary", sx: { fontWeight: 400 } }, " / ", fmtUsd(limit.budget)))), /* @__PURE__ */ React13.createElement(Box12, { sx: { mt: 1 } }, /* @__PURE__ */ React13.createElement(Meter, { value: limit.pct, tone, height: 6 })), /* @__PURE__ */ React13.createElement(
+    Box12,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: 1,
+        mt: 0.75
+      }
+    },
+    /* @__PURE__ */ React13.createElement(Typography12, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, pct, "% of budget", closeTo && ` \xB7 soft-limit warning`),
+    /* @__PURE__ */ React13.createElement(Typography12, { variant: "caption", color: "text.secondary" }, fmtBudgetDuration(limit.budgetDuration) ? `resets ${fmtBudgetDuration(limit.budgetDuration)}` : "never resets")
+  ));
+};
+var LiteLLMBudgetWidget = ({
+  title = "Budget Policy",
+  maxKeys = 3
+}) => {
+  const api = useApi4(liteLlmApiRef);
+  const [loading, setLoading] = useState10(true);
+  const [error, setError] = useState10(null);
+  const [user, setUser] = useState10(null);
+  const [teams, setTeams] = useState10([]);
+  const [keys, setKeys] = useState10([]);
+  useEffect4(() => {
+    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 hasAnyLimit = !!user && (user.max_budget ?? user.hard_limit ?? 0) > 0;
+  const summary = useMemo8(() => buildBudgetSummary(user, teams, keys, maxKeys), [user, teams, keys, maxKeys]);
+  const hasBudgetedKeys = keys.some((k) => (k.max_budget ?? 0) > 0);
+  return /* @__PURE__ */ React13.createElement(Paper8, { sx: { p: 2 } }, /* @__PURE__ */ React13.createElement(Box12, { sx: { mb: 1.5 } }, /* @__PURE__ */ React13.createElement(Typography12, { variant: "h6", lineHeight: 1.2 }, title), /* @__PURE__ */ React13.createElement(Typography12, { variant: "caption", color: "text.secondary" }, "How LiteLLM caps spend \u2014 and where you stand right now")), loading && /* @__PURE__ */ React13.createElement(Box12, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 140 }, /* @__PURE__ */ React13.createElement(CircularProgress7, { size: 32 })), !loading && error && /* @__PURE__ */ React13.createElement(Alert7, { severity: "error", sx: { mt: 0.5 } }, error), !loading && !error && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
+    LevelFrame,
+    {
+      rank: 1,
+      name: "Key",
+      tagline: "per-key cap \xB7 highest priority",
+      note: hasBudgetedKeys ? void 0 : "no key budgets set"
+    },
+    !hasBudgetedKeys && /* @__PURE__ */ React13.createElement(EmptyLimitCard, null, "No key has a budget, so no key-level cap applies."),
+    summary.keys.map((k) => /* @__PURE__ */ React13.createElement(LimitCard, { key: k.sublabel ?? k.label, limit: k })),
+    summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ React13.createElement(Typography12, { variant: "caption", color: "text.secondary" }, "+", summary.hiddenBudgetedKeys, " more budgeted key", summary.hiddenBudgetedKeys > 1 ? "s" : "", " further from the cap")
+  ), /* @__PURE__ */ React13.createElement(
+    LevelFrame,
+    {
+      rank: 2,
+      name: "User",
+      tagline: "cap on everything you spend with your own keys",
+      note: "skipped for team-bound keys"
+    },
+    hasAnyLimit && summary.user ? /* @__PURE__ */ React13.createElement(LimitCard, { limit: summary.user }) : /* @__PURE__ */ React13.createElement(EmptyLimitCard, null, "No personal budget is set on your account.")
+  ), /* @__PURE__ */ React13.createElement(LevelFrame, { rank: 3, name: "Team", tagline: "shared cap for all keys in a team (if any)" }, summary.teams.length > 0 ? summary.teams.map((t) => /* @__PURE__ */ React13.createElement(LimitCard, { key: t.sublabel ?? t.label, limit: t })) : /* @__PURE__ */ React13.createElement(EmptyLimitCard, null, "No team you belong to has a budget.")), /* @__PURE__ */ React13.createElement(LevelFrame, { rank: 4, name: "Global", tagline: "proxy-wide cap set by your admin", isLast: true }, /* @__PURE__ */ React13.createElement(EmptyLimitCard, null, "Configured by your admin in the proxy config \u2014 it isn't visible from this page. When set, it limits spend across every request on the proxy.")), /* @__PURE__ */ React13.createElement(
+    Box12,
+    {
+      sx: (theme) => ({
+        mt: 2,
+        px: 1.5,
+        py: 1.25,
+        borderRadius: 1.5,
+        border: "1px dashed",
+        borderColor: alpha7(theme.palette.text.primary, 0.18)
+      })
+    },
+    /* @__PURE__ */ React13.createElement(Typography12, { variant: "caption", color: "text.secondary", display: "block" }, "The first cap a request runs into is the one that stops it. A limit with a reset window (e.g. daily or every 30 days) clears its spend to $0 when the window closes; without a window it never resets.")
+  )));
+};
+
 // src/index.ts
 init_GenerateKeyDialog();
 init_ManageTeamDialog();
@@ -4017,6 +4291,7 @@ export {
   DashboardHeader,
   GenerateKeyDialog,
   KeysTable,
+  LiteLLMBudgetWidget,
   LiteLLMHomeWidget,
   LiteLLMPage,
   LiteLlmApi,