@acarmisc/backstage-plugin-litellm 0.18.1 → 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

@@ -3004,14 +3004,14 @@ import MenuItem4 from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
+import TextField5 from "@mui/material/TextField";
+import InputAdornment2 from "@mui/material/InputAdornment";
+import { Search as Search2 } from "@mui/icons-material";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import Tooltip3 from "@mui/material/Tooltip";
 import Snackbar from "@mui/material/Snackbar";
 import Alert3 from "@mui/material/Alert";
 import { alpha as alpha5, useTheme as useTheme2 } from "@mui/material/styles";
-import TextField5 from "@mui/material/TextField";
-import InputAdornment2 from "@mui/material/InputAdornment";
-import { Search as Search2 } from "@mui/icons-material";
 function isModelAllowedByTeam2(model, teamModels) {
   if (!teamModels || teamModels.length === 0 || teamModels.includes(ALL_PROXY_MODELS2)) return true;
   return teamModels.includes(model.model_name) || !!model.access_groups?.some((group) => teamModels.includes(group));
@@ -3044,17 +3044,17 @@ var init_ModelsTable = __esm({
         () => teams.find((t) => t.team_id === selectedTeamId) ?? null,
         [teams, selectedTeamId]
       );
-      const filteredModels = useMemo6(() => {
+      const teamModels = useMemo6(() => {
         if (!selectedTeam) return [];
-        let result = allModels.filter((model) => isModelAllowedByTeam2(model, selectedTeam.models));
-        if (filterText.trim()) {
-          const q = filterText.toLowerCase();
-          result = result.filter(
-            (model) => model.model_name.toLowerCase().includes(q) || (model.access_groups || []).some((group) => group.toLowerCase().includes(q))
-          );
-        }
-        return result;
-      }, [allModels, selectedTeam, filterText]);
+        return allModels.filter((model) => isModelAllowedByTeam2(model, selectedTeam.models));
+      }, [allModels, selectedTeam]);
+      const filteredModels = useMemo6(() => {
+        const q = filterText.trim().toLowerCase();
+        if (!q) return teamModels;
+        return teamModels.filter(
+          (model) => model.model_name.toLowerCase().includes(q) || (model.access_groups || []).some((group) => group.toLowerCase().includes(q))
+        );
+      }, [teamModels, filterText]);
       const handleCopyModelId = useCallback((modelId) => {
         navigator.clipboard.writeText(modelId).then(() => setCopiedSnackbar(true));
       }, []);
@@ -3076,9 +3076,9 @@ var init_ModelsTable = __esm({
         SectionCard,
         {
           title: "Available Models",
-          subtitle: selectedTeam ? `${filteredModels.length} model${filteredModels.length !== 1 ? "s" : ""} in ${selectedTeam.team_alias ?? selectedTeam.team_id}` : "Select a team to view its models"
+          subtitle: selectedTeam ? `${filteredModels.length}${filterText.trim() ? ` of ${teamModels.length}` : ""} model${filteredModels.length === 1 ? "" : "s"}` : "Select a team to view its models"
         },
-        /* @__PURE__ */ React8.createElement(Box8, { sx: { px: 2.5, pb: 2.5, pt: 1 } }, /* @__PURE__ */ React8.createElement(FormControl, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ React8.createElement(InputLabel, { id: "team-select-label" }, "Team"), /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React8.createElement(Box8, { sx: { px: 2.5, pb: 2.5, pt: 1, display: "flex", gap: 2, flexWrap: "wrap" } }, /* @__PURE__ */ React8.createElement(FormControl, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ React8.createElement(InputLabel, { id: "team-select-label" }, "Team"), /* @__PURE__ */ React8.createElement(
           Select,
           {
             labelId: "team-select-label",
@@ -3094,6 +3094,7 @@ var init_ModelsTable = __esm({
             size: "small",
             value: filterText,
             onChange: (e) => setFilterText(e.target.value),
+            disabled: !selectedTeamId,
             sx: { minWidth: 240, mb: 2 },
             InputProps: {
               startAdornment: /* @__PURE__ */ React8.createElement(InputAdornment2, { position: "start" }, /* @__PURE__ */ React8.createElement(Search2, { fontSize: "small" }))
@@ -3108,14 +3109,32 @@ var init_ModelsTable = __esm({
             hint: "Each team may have a different set of models assigned"
           }
         ),
-        !loading && selectedTeamId && filteredModels.length === 0 && /* @__PURE__ */ React8.createElement(
+        !loading && selectedTeamId && teamModels.length === 0 && /* @__PURE__ */ React8.createElement(
           EmptyState,
           {
             message: "No models available for this team",
             hint: allModels.length === 0 ? "No models are configured in the system" : "None of the team's assigned models were found in the catalog"
           }
         ),
-        !loading && filteredModels.length > 0 && /* @__PURE__ */ React8.createElement(TableContainer5, null, /* @__PURE__ */ React8.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React8.createElement(TableHead5, null, /* @__PURE__ */ React8.createElement(TableRow5, null, /* @__PURE__ */ React8.createElement(TableCell5, null, "Model ID"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Mode"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Input Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Output Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Input"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Output"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Capabilities"))), /* @__PURE__ */ React8.createElement(TableBody5, null, filteredModels.map((m) => /* @__PURE__ */ React8.createElement(TableRow5, { key: m.model_name, hover: true }, /* @__PURE__ */ React8.createElement(TableCell5, null, /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(TagChip, { label: m.model_name, title: m.model_name }), /* @__PURE__ */ React8.createElement(Tooltip3, { title: "Copy model ID" }, /* @__PURE__ */ React8.createElement(
+        !loading && selectedTeamId && teamModels.length > 0 && filteredModels.length === 0 && /* @__PURE__ */ React8.createElement(
+          EmptyState,
+          {
+            message: "No models match your search",
+            hint: "Try a different search term"
+          }
+        ),
+        !loading && filteredModels.length > 0 && /* @__PURE__ */ React8.createElement(TableContainer5, null, /* @__PURE__ */ React8.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React8.createElement(TableHead5, null, /* @__PURE__ */ React8.createElement(TableRow5, null, /* @__PURE__ */ React8.createElement(TableCell5, null, "Model ID"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Mode"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Input Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Output Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Input"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Output"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Capabilities"))), /* @__PURE__ */ React8.createElement(TableBody5, null, filteredModels.map((m) => /* @__PURE__ */ React8.createElement(TableRow5, { key: m.model_name, hover: true }, /* @__PURE__ */ React8.createElement(TableCell5, null, /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(Tooltip3, { title: m.model_name, placement: "top" }, /* @__PURE__ */ React8.createElement(
+          "span",
+          {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "Copy model ID",
+            onClick: () => handleCopyModelId(m.model_name),
+            onKeyDown: (e) => e.key === "Enter" && handleCopyModelId(m.model_name),
+            style: { cursor: "pointer", display: "inline-flex" }
+          },
+          /* @__PURE__ */ React8.createElement(TagChip, { label: m.model_name, title: "Copy model ID" })
+        )), /* @__PURE__ */ React8.createElement(Tooltip3, { title: "Copy model ID" }, /* @__PURE__ */ React8.createElement(
           Box8,
           {
             component: "span",
@@ -3989,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();
@@ -3998,6 +4291,7 @@ export {
   DashboardHeader,
   GenerateKeyDialog,
   KeysTable,
+  LiteLLMBudgetWidget,
   LiteLLMHomeWidget,
   LiteLLMPage,
   LiteLlmApi,