@acarmisc/backstage-plugin-litellm 0.21.0 → 0.21.2

package/dist/index.esm.js

@@ -2802,16 +2802,14 @@ function buildBudgetSummary(user, teams, keys, maxKeys = 3) {
   };
 }
 function budgetHeadline(summary) {
-  const pcts = [
-    ...summary.keys.map((k) => k.pct),
-    ...summary.user ? [summary.user.pct] : [],
-    ...summary.teams.map((t) => t.pct)
+  const all = [
+    ...summary.keys,
+    ...summary.user ? [summary.user] : [],
+    ...summary.teams
   ];
   const count = summary.keys.length + summary.hiddenBudgetedKeys + (summary.user ? 1 : 0) + summary.teams.length;
-  return {
-    count,
-    closestPct: pcts.length ? Math.max(...pcts) : null
-  };
+  const closest = all.length ? all.reduce((a, b) => b.pct > a.pct ? b : a) : null;
+  return { count, closest };
 }
 function fmtBudgetDuration(duration) {
   if (!duration) return null;
@@ -2847,6 +2845,7 @@ import IconButton4 from "@mui/material/IconButton";
 import { ExpandMore as ExpandMore2 } from "@mui/icons-material";
 import { alpha as alpha4 } from "@mui/material/styles";
 import { useApi as useApi2 } from "@backstage/core-plugin-api";
+import { Link } from "@backstage/core-components";
 function levelToneColor(tone, theme) {
   switch (tone) {
     case "success":
@@ -2861,7 +2860,7 @@ function levelToneColor(tone, theme) {
       return theme.palette.primary.main;
   }
 }
-var LevelFrame, EmptyLimitCard, LimitCard, TaggedLimit, FullBody, CompactBody, LiteLLMBudgetWidget;
+var LevelFrame, EmptyLimitCard, LimitCard, CLOSEST_LEVEL_LABEL, KEYS_PATH, MoreKeysNote, HierarchyNote, TaggedLimit, FullBody, CompactBody, LiteLLMBudgetWidget;
 var init_LiteLLMBudgetWidget = __esm({
   "src/components/LiteLLMBudgetWidget.tsx"() {
     "use strict";
@@ -2973,6 +2972,26 @@ var init_LiteLLMBudgetWidget = __esm({
         /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary" }, fmtBudgetDuration(limit.budgetDuration) ? `resets ${fmtBudgetDuration(limit.budgetDuration)}` : "never resets")
       ));
     };
+    CLOSEST_LEVEL_LABEL = {
+      key: "key",
+      user: "personal",
+      team: "team"
+    };
+    KEYS_PATH = "/litellm?tab=keys";
+    MoreKeysNote = ({ count }) => /* @__PURE__ */ React7.createElement(Link, { to: KEYS_PATH, variant: "caption" }, "+", count, " more budgeted key", count > 1 ? "s" : "", " further from the cap \u2192");
+    HierarchyNote = ({ withReset }) => /* @__PURE__ */ React7.createElement(
+      Box7,
+      {
+        sx: (theme) => ({
+          px: 1.5,
+          py: 1.25,
+          borderRadius: 1.5,
+          border: "1px dashed",
+          borderColor: alpha4(theme.palette.text.primary, 0.18)
+        })
+      },
+      /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary", display: "block" }, /* @__PURE__ */ React7.createElement("b", null, "Order:"), " key \u2192 personal \u2192 team \u2192 global. The first cap you reach blocks the request; a key that belongs to a team uses the team's cap, not your personal one.", withReset && " A cap with a reset window drops to $0 when the window closes; without one it never resets.")
+    );
     TaggedLimit = ({ limit }) => {
       const tone = budgetTone2(limit.pct);
       return /* @__PURE__ */ React7.createElement(Box7, null, /* @__PURE__ */ React7.createElement(
@@ -3002,7 +3021,7 @@ var init_LiteLLMBudgetWidget = __esm({
         },
         !hasBudgetedKeys && /* @__PURE__ */ React7.createElement(EmptyLimitCard, null, "No key has a budget, so no key-level cap applies."),
         summary.keys.map((k) => /* @__PURE__ */ React7.createElement(LimitCard, { key: k.sublabel ?? k.label, limit: k })),
-        summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary" }, "+", summary.hiddenBudgetedKeys, " more budgeted key", summary.hiddenBudgetedKeys > 1 ? "s" : "", " further from the cap")
+        summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ React7.createElement(MoreKeysNote, { count: summary.hiddenBudgetedKeys })
       ), /* @__PURE__ */ React7.createElement(
         LevelFrame,
         {
@@ -3012,27 +3031,14 @@ var init_LiteLLMBudgetWidget = __esm({
           note: "skipped for team-bound keys"
         },
         summary.user ? /* @__PURE__ */ React7.createElement(LimitCard, { limit: summary.user }) : /* @__PURE__ */ React7.createElement(EmptyLimitCard, null, "No personal budget is set on your account.")
-      ), /* @__PURE__ */ React7.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__ */ React7.createElement(LimitCard, { key: t.sublabel ?? t.label, limit: t })) : /* @__PURE__ */ React7.createElement(EmptyLimitCard, null, "No team you belong to has a budget.")), /* @__PURE__ */ React7.createElement(LevelFrame, { rank: 4, name: "Global", tagline: "proxy-wide cap set by your admin", isLast: true }, /* @__PURE__ */ React7.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__ */ React7.createElement(
-        Box7,
-        {
-          sx: (theme) => ({
-            mt: 2,
-            px: 1.5,
-            py: 1.25,
-            borderRadius: 1.5,
-            border: "1px dashed",
-            borderColor: alpha4(theme.palette.text.primary, 0.18)
-          })
-        },
-        /* @__PURE__ */ React7.createElement(Typography7, { 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.")
-      ));
+      ), /* @__PURE__ */ React7.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__ */ React7.createElement(LimitCard, { key: t.sublabel ?? t.label, limit: t })) : /* @__PURE__ */ React7.createElement(EmptyLimitCard, null, "No team you belong to has a budget.")), /* @__PURE__ */ React7.createElement(LevelFrame, { rank: 4, name: "Global", tagline: "proxy-wide cap set by your admin", isLast: true }, /* @__PURE__ */ React7.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__ */ React7.createElement(Box7, { sx: { mt: 2 } }, /* @__PURE__ */ React7.createElement(HierarchyNote, { withReset: true })));
     };
     CompactBody = ({ summary }) => {
       const { count } = budgetHeadline(summary);
       if (count === 0) {
         return /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", color: "text.secondary", sx: { fontSize: 13 } }, "No budget limits apply to you right now.");
       }
-      return /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", flexDirection: "column", gap: 1.25 } }, summary.keys.map((k) => /* @__PURE__ */ React7.createElement(TaggedLimit, { key: k.sublabel ?? k.label, limit: k })), summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary" }, "+", summary.hiddenBudgetedKeys, " more budgeted key", summary.hiddenBudgetedKeys > 1 ? "s" : "", " further from the cap"), summary.user && /* @__PURE__ */ React7.createElement(TaggedLimit, { limit: summary.user }), summary.teams.map((t) => /* @__PURE__ */ React7.createElement(TaggedLimit, { key: t.sublabel ?? t.label, limit: t })));
+      return /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", flexDirection: "column", gap: 1.25 } }, /* @__PURE__ */ React7.createElement(HierarchyNote, null), summary.keys.map((k) => /* @__PURE__ */ React7.createElement(TaggedLimit, { key: k.sublabel ?? k.label, limit: k })), summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ React7.createElement(MoreKeysNote, { count: summary.hiddenBudgetedKeys }), summary.user && /* @__PURE__ */ React7.createElement(TaggedLimit, { limit: summary.user }), summary.teams.map((t) => /* @__PURE__ */ React7.createElement(TaggedLimit, { key: t.sublabel ?? t.label, limit: t })));
     };
     LiteLLMBudgetWidget = ({
       title = "Budget Policy",
@@ -3079,7 +3085,9 @@ var init_LiteLLMBudgetWidget = __esm({
       );
       const headline = useMemo6(() => budgetHeadline(summary), [summary]);
       const limitsWord = `${headline.count} limit${headline.count === 1 ? "" : "s"}`;
-      const closestWord = headline.closestPct === null ? "" : ` \xB7 closest ${Math.round(headline.closestPct)}%`;
+      const closestWord = headline.closest === null ? "" : ` \xB7 closest: ${CLOSEST_LEVEL_LABEL[headline.closest.kind]} ${Math.round(
+        headline.closest.pct
+      )}%`;
       const summaryText = headline.count === 0 ? "no limits apply" : `${limitsWord}${closestWord}`;
       const body = /* @__PURE__ */ React7.createElement(React7.Fragment, null, loading && /* @__PURE__ */ React7.createElement(Box7, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 140 }, /* @__PURE__ */ React7.createElement(CircularProgress4, { size: 32 })), !loading && error && /* @__PURE__ */ React7.createElement(Alert3, { severity: "error", sx: { mt: 0.5 } }, error), !loading && !error && (compact ? /* @__PURE__ */ React7.createElement(CompactBody, { summary }) : /* @__PURE__ */ React7.createElement(FullBody, { summary })));
       return /* @__PURE__ */ React7.createElement(Paper5, { sx: { p: 2 } }, collapsible ? /* @__PURE__ */ React7.createElement(
@@ -3095,7 +3103,13 @@ var init_LiteLLMBudgetWidget = __esm({
             mb: expanded ? 1.5 : 0
           }
         },
-        /* @__PURE__ */ React7.createElement(Box7, { sx: { minWidth: 0, flex: 1, display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" } }, /* @__PURE__ */ React7.createElement(Typography7, { variant: "h6", lineHeight: 1.2 }, title), !loading && !error && /* @__PURE__ */ React7.createElement(StatusPill, { label: summaryText, tone: budgetTone2(headline.closestPct ?? 0) })),
+        /* @__PURE__ */ React7.createElement(Box7, { sx: { minWidth: 0, flex: 1 } }, /* @__PURE__ */ React7.createElement(Typography7, { variant: "h6", lineHeight: 1.2 }, title), !loading && !error && /* @__PURE__ */ React7.createElement(Box7, { sx: { mt: 0.5 } }, /* @__PURE__ */ React7.createElement(
+          StatusPill,
+          {
+            label: summaryText,
+            tone: budgetTone2(headline.closest?.pct ?? 0)
+          }
+        ))),
         /* @__PURE__ */ React7.createElement(
           IconButton4,
           {
@@ -3833,6 +3847,7 @@ import Paper7 from "@mui/material/Paper";
 import Tabs2 from "@mui/material/Tabs";
 import Tab2 from "@mui/material/Tab";
 import Grid2 from "@mui/material/Grid";
+import { useSearchParams } from "react-router-dom";
 import { useAsync as useAsync3, useAsyncRetry } from "react-use";
 import { useApi as useApi3 } from "@backstage/core-plugin-api";
 import { usePermission } from "@backstage/plugin-permission-react";
@@ -3850,7 +3865,7 @@ function initDateRange() {
   else start.setDate(start.getDate() - 7);
   return { start, end };
 }
-var PERIOD_LS_KEY2, LiteLLMPage;
+var PERIOD_LS_KEY2, PAGE_TABS, isPageTab, LiteLLMPage;
 var init_LiteLLMPage = __esm({
   "src/components/LiteLLMPage.tsx"() {
     "use strict";
@@ -3866,6 +3881,8 @@ var init_LiteLLMPage = __esm({
     init_api();
     init_permissions();
     PERIOD_LS_KEY2 = "litellm_usage_period";
+    PAGE_TABS = ["overview", "keys", "teams", "models", "audit"];
+    isPageTab = (v) => !!v && PAGE_TABS.includes(v);
     LiteLLMPage = () => {
       const api = useApi3(liteLlmApiRef);
       const [dateRange, setDateRange] = useState9(initDateRange);
@@ -3876,7 +3893,25 @@ var init_LiteLLMPage = __esm({
           return "7d";
         }
       });
-      const [activeTab, setActiveTab] = useState9("overview");
+      const [searchParams, setSearchParams] = useSearchParams();
+      const [activeTab, setActiveTab] = useState9(() => {
+        const t = searchParams.get("tab");
+        return isPageTab(t) ? t : "overview";
+      });
+      const selectTab = useCallback3(
+        (tab) => {
+          setActiveTab(tab);
+          setSearchParams(
+            (prev) => {
+              const next = new URLSearchParams(prev);
+              next.set("tab", tab);
+              return next;
+            },
+            { replace: true }
+          );
+        },
+        [setSearchParams]
+      );
       const [snackbar, setSnackbar] = useState9(null);
       const [generateDialogOpen, setGenerateDialogOpen] = useState9(false);
       const [manageTeam, setManageTeam] = useState9(null);
@@ -4083,7 +4118,7 @@ var init_LiteLLMPage = __esm({
         Tabs2,
         {
           value: activeTab,
-          onChange: (_, v) => setActiveTab(v),
+          onChange: (_, v) => selectTab(v),
           variant: "scrollable",
           scrollButtons: "auto",
           sx: {