@acarmisc/backstage-plugin-litellm 0.21.1 → 0.21.3

package/dist/index.cjs.js

@@ -2855,7 +2855,7 @@ function levelToneColor(tone, theme) {
       return theme.palette.primary.main;
   }
 }
-var import_react7, import_Paper5, import_Box7, import_Typography7, import_CircularProgress4, import_Alert3, import_Collapse, import_IconButton4, import_icons_material5, import_styles4, import_core_plugin_api3, LevelFrame, EmptyLimitCard, LimitCard, CLOSEST_LEVEL_LABEL, TaggedLimit, FullBody, CompactBody, LiteLLMBudgetWidget;
+var import_react7, import_Paper5, import_Box7, import_Typography7, import_CircularProgress4, import_Alert3, import_Collapse, import_IconButton4, import_icons_material5, import_styles4, import_core_plugin_api3, import_core_components, LevelFrame, EmptyLimitCard, LimitCard, CLOSEST_LEVEL_LABEL, KEYS_PATH, MoreKeysNote, HierarchyNote, TaggedLimit, FullBody, CompactBody, LiteLLMBudgetWidget;
 var init_LiteLLMBudgetWidget = __esm({
   "src/components/LiteLLMBudgetWidget.tsx"() {
     "use strict";
@@ -2870,6 +2870,7 @@ var init_LiteLLMBudgetWidget = __esm({
     import_icons_material5 = require("@mui/icons-material");
     import_styles4 = require("@mui/material/styles");
     import_core_plugin_api3 = require("@backstage/core-plugin-api");
+    import_core_components = require("@backstage/core-components");
     init_api();
     init_format();
     init_ui();
@@ -2983,6 +2984,21 @@ var init_LiteLLMBudgetWidget = __esm({
       user: "personal",
       team: "team"
     };
+    KEYS_PATH = "/litellm?tab=keys";
+    MoreKeysNote = ({ count }) => /* @__PURE__ */ import_react7.default.createElement(import_core_components.Link, { to: KEYS_PATH, variant: "caption" }, "+", count, " more budgeted key", count > 1 ? "s" : "", " further from the cap \u2192");
+    HierarchyNote = ({ withReset }) => /* @__PURE__ */ import_react7.default.createElement(
+      import_Box7.default,
+      {
+        sx: (theme) => ({
+          px: 1.5,
+          py: 1.25,
+          borderRadius: 1.5,
+          border: "1px dashed",
+          borderColor: (0, import_styles4.alpha)(theme.palette.text.primary, 0.18)
+        })
+      },
+      /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary", display: "block" }, /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement(import_Box7.default, null, /* @__PURE__ */ import_react7.default.createElement(
@@ -3012,7 +3028,7 @@ var init_LiteLLMBudgetWidget = __esm({
         },
         !hasBudgetedKeys && /* @__PURE__ */ import_react7.default.createElement(EmptyLimitCard, null, "No key has a budget, so no key-level cap applies."),
         summary.keys.map((k) => /* @__PURE__ */ import_react7.default.createElement(LimitCard, { key: k.sublabel ?? k.label, limit: k })),
-        summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary" }, "+", summary.hiddenBudgetedKeys, " more budgeted key", summary.hiddenBudgetedKeys > 1 ? "s" : "", " further from the cap")
+        summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ import_react7.default.createElement(MoreKeysNote, { count: summary.hiddenBudgetedKeys })
       ), /* @__PURE__ */ import_react7.default.createElement(
         LevelFrame,
         {
@@ -3022,27 +3038,14 @@ var init_LiteLLMBudgetWidget = __esm({
           note: "skipped for team-bound keys"
         },
         summary.user ? /* @__PURE__ */ import_react7.default.createElement(LimitCard, { limit: summary.user }) : /* @__PURE__ */ import_react7.default.createElement(EmptyLimitCard, null, "No personal budget is set on your account.")
-      ), /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement(LimitCard, { key: t.sublabel ?? t.label, limit: t })) : /* @__PURE__ */ import_react7.default.createElement(EmptyLimitCard, null, "No team you belong to has a budget.")), /* @__PURE__ */ import_react7.default.createElement(LevelFrame, { rank: 4, name: "Global", tagline: "proxy-wide cap set by your admin", isLast: true }, /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement(
-        import_Box7.default,
-        {
-          sx: (theme) => ({
-            mt: 2,
-            px: 1.5,
-            py: 1.25,
-            borderRadius: 1.5,
-            border: "1px dashed",
-            borderColor: (0, import_styles4.alpha)(theme.palette.text.primary, 0.18)
-          })
-        },
-        /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { 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__ */ import_react7.default.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__ */ import_react7.default.createElement(LimitCard, { key: t.sublabel ?? t.label, limit: t })) : /* @__PURE__ */ import_react7.default.createElement(EmptyLimitCard, null, "No team you belong to has a budget.")), /* @__PURE__ */ import_react7.default.createElement(LevelFrame, { rank: 4, name: "Global", tagline: "proxy-wide cap set by your admin", isLast: true }, /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement(import_Box7.default, { sx: { mt: 2 } }, /* @__PURE__ */ import_react7.default.createElement(HierarchyNote, { withReset: true })));
     };
     CompactBody = ({ summary }) => {
       const { count } = budgetHeadline(summary);
       if (count === 0) {
         return /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", color: "text.secondary", sx: { fontSize: 13 } }, "No budget limits apply to you right now.");
       }
-      return /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { display: "flex", flexDirection: "column", gap: 1.25 } }, summary.keys.map((k) => /* @__PURE__ */ import_react7.default.createElement(TaggedLimit, { key: k.sublabel ?? k.label, limit: k })), summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary" }, "+", summary.hiddenBudgetedKeys, " more budgeted key", summary.hiddenBudgetedKeys > 1 ? "s" : "", " further from the cap"), summary.user && /* @__PURE__ */ import_react7.default.createElement(TaggedLimit, { limit: summary.user }), summary.teams.map((t) => /* @__PURE__ */ import_react7.default.createElement(TaggedLimit, { key: t.sublabel ?? t.label, limit: t })));
+      return /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { display: "flex", flexDirection: "column", gap: 1.25 } }, /* @__PURE__ */ import_react7.default.createElement(HierarchyNote, null), summary.keys.map((k) => /* @__PURE__ */ import_react7.default.createElement(TaggedLimit, { key: k.sublabel ?? k.label, limit: k })), summary.hiddenBudgetedKeys > 0 && /* @__PURE__ */ import_react7.default.createElement(MoreKeysNote, { count: summary.hiddenBudgetedKeys }), summary.user && /* @__PURE__ */ import_react7.default.createElement(TaggedLimit, { limit: summary.user }), summary.teams.map((t) => /* @__PURE__ */ import_react7.default.createElement(TaggedLimit, { key: t.sublabel ?? t.label, limit: t })));
     };
     LiteLLMBudgetWidget = ({
       title = "Budget Policy",
@@ -3398,7 +3401,7 @@ function fmtTokens(n) {
   if (n >= 1e3) return `${(n / 1e3).toFixed(0)}K`;
   return String(n);
 }
-var import_react9, import_Box9, import_Table5, import_TableBody5, import_TableCell5, import_TableContainer5, import_TableHead5, import_TableRow5, import_Typography9, import_MenuItem4, import_Select, import_FormControl, import_InputLabel, import_TextField5, import_InputAdornment2, import_icons_material7, import_ContentCopy, import_Tooltip, import_Snackbar, import_Alert4, import_styles6, ALL_PROXY_MODELS2, ModelsTable;
+var import_react9, import_Box9, import_Table5, import_TableBody5, import_TableCell5, import_TableContainer5, import_TableHead5, import_TableRow5, import_TableSortLabel2, import_Typography9, import_MenuItem4, import_Select, import_FormControl, import_InputLabel, import_TextField5, import_InputAdornment2, import_icons_material7, import_ContentCopy, import_Tooltip, import_Snackbar, import_Alert4, import_styles6, ALL_PROXY_MODELS2, ModelsTable;
 var init_ModelsTable = __esm({
   "src/components/ModelsTable.tsx"() {
     "use strict";
@@ -3410,6 +3413,7 @@ var init_ModelsTable = __esm({
     import_TableContainer5 = __toESM(require("@mui/material/TableContainer"));
     import_TableHead5 = __toESM(require("@mui/material/TableHead"));
     import_TableRow5 = __toESM(require("@mui/material/TableRow"));
+    import_TableSortLabel2 = __toESM(require("@mui/material/TableSortLabel"));
     import_Typography9 = __toESM(require("@mui/material/Typography"));
     import_MenuItem4 = __toESM(require("@mui/material/MenuItem"));
     import_Select = __toESM(require("@mui/material/Select"));
@@ -3430,6 +3434,8 @@ var init_ModelsTable = __esm({
       const [selectedTeamId, setSelectedTeamId] = (0, import_react9.useState)("");
       const [filterText, setFilterText] = (0, import_react9.useState)("");
       const [copiedSnackbar, setCopiedSnackbar] = (0, import_react9.useState)(false);
+      const [sortKey, setSortKey] = (0, import_react9.useState)("model_name");
+      const [sortDirection, setSortDirection] = (0, import_react9.useState)("asc");
       const selectedTeam = (0, import_react9.useMemo)(
         () => teams.find((t) => t.team_id === selectedTeamId) ?? null,
         [teams, selectedTeamId]
@@ -3440,14 +3446,62 @@ var init_ModelsTable = __esm({
       }, [allModels, selectedTeam]);
       const filteredModels = (0, import_react9.useMemo)(() => {
         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]);
+        let models = teamModels;
+        if (q) {
+          models = teamModels.filter(
+            (model) => model.model_name.toLowerCase().includes(q) || (model.access_groups || []).some((group) => group.toLowerCase().includes(q))
+          );
+        }
+        return [...models].sort((a, b) => {
+          let aVal;
+          let bVal;
+          switch (sortKey) {
+            case "model_name":
+              aVal = a.model_name;
+              bVal = b.model_name;
+              break;
+            case "mode":
+              aVal = a.mode;
+              bVal = b.mode;
+              break;
+            case "input_cost_per_token":
+              aVal = a.input_cost_per_token ?? 0;
+              bVal = b.input_cost_per_token ?? 0;
+              break;
+            case "output_cost_per_token":
+              aVal = a.output_cost_per_token ?? 0;
+              bVal = b.output_cost_per_token ?? 0;
+              break;
+            case "max_input_tokens":
+              aVal = a.max_input_tokens ?? 0;
+              bVal = b.max_input_tokens ?? 0;
+              break;
+            case "max_output_tokens":
+              aVal = a.max_output_tokens ?? 0;
+              bVal = b.max_output_tokens ?? 0;
+              break;
+            default:
+              return 0;
+          }
+          if (aVal === void 0 || aVal === null) aVal = "";
+          if (bVal === void 0 || bVal === null) bVal = "";
+          if (typeof aVal === "string" && typeof bVal === "string") {
+            return sortDirection === "asc" ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+          }
+          return sortDirection === "asc" ? aVal - bVal : bVal - aVal;
+        });
+      }, [teamModels, filterText, sortKey, sortDirection]);
       const handleCopyModelId = (0, import_react9.useCallback)((modelId) => {
         navigator.clipboard.writeText(modelId).then(() => setCopiedSnackbar(true));
       }, []);
+      const handleSort = (0, import_react9.useCallback)((key) => {
+        if (sortKey === key) {
+          setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
+        } else {
+          setSortKey(key);
+          setSortDirection("asc");
+        }
+      }, [sortKey]);
       const modeColor = (mode) => {
         switch (mode) {
           case "chat":
@@ -3513,7 +3567,7 @@ var init_ModelsTable = __esm({
             hint: "Try a different search term"
           }
         ),
-        !loading && filteredModels.length > 0 && /* @__PURE__ */ import_react9.default.createElement(import_TableContainer5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_Table5.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react9.default.createElement(import_TableHead5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, "Model ID"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, "Mode"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right" }, "Input Cost"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right" }, "Output Cost"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right" }, "Max Input"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right" }, "Max Output"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, "Capabilities"))), /* @__PURE__ */ import_react9.default.createElement(import_TableBody5.default, null, filteredModels.map((m) => /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, { key: m.model_name, hover: true }, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ import_react9.default.createElement(import_Tooltip.default, { title: m.model_name, placement: "top" }, /* @__PURE__ */ import_react9.default.createElement(
+        !loading && filteredModels.length > 0 && /* @__PURE__ */ import_react9.default.createElement(import_TableContainer5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_Table5.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react9.default.createElement(import_TableHead5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { sortDirection: sortKey === "model_name" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "model_name", direction: sortKey === "model_name" ? sortDirection : "asc", onClick: () => handleSort("model_name") }, "Model ID")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { sortDirection: sortKey === "mode" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "mode", direction: sortKey === "mode" ? sortDirection : "asc", onClick: () => handleSort("mode") }, "Mode")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "input_cost_per_token" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "input_cost_per_token", direction: sortKey === "input_cost_per_token" ? sortDirection : "asc", onClick: () => handleSort("input_cost_per_token") }, "Input Cost")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "output_cost_per_token" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "output_cost_per_token", direction: sortKey === "output_cost_per_token" ? sortDirection : "asc", onClick: () => handleSort("output_cost_per_token") }, "Output Cost")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "max_input_tokens" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "max_input_tokens", direction: sortKey === "max_input_tokens" ? sortDirection : "asc", onClick: () => handleSort("max_input_tokens") }, "Max Input")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "max_output_tokens" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "max_output_tokens", direction: sortKey === "max_output_tokens" ? sortDirection : "asc", onClick: () => handleSort("max_output_tokens") }, "Max Output")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, "Capabilities"))), /* @__PURE__ */ import_react9.default.createElement(import_TableBody5.default, null, filteredModels.map((m) => /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, { key: m.model_name, hover: true }, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ import_react9.default.createElement(import_Tooltip.default, { title: m.model_name, placement: "top" }, /* @__PURE__ */ import_react9.default.createElement(
           "span",
           {
             role: "button",
@@ -3847,7 +3901,7 @@ function initDateRange() {
   else start.setDate(start.getDate() - 7);
   return { start, end };
 }
-var import_react11, import_Box11, import_Snackbar2, import_Alert6, import_CircularProgress6, import_Typography11, import_Paper7, import_Tabs2, import_Tab2, import_Grid2, import_react_use3, import_core_plugin_api4, import_plugin_permission_react, PERIOD_LS_KEY2, LiteLLMPage;
+var import_react11, import_Box11, import_Snackbar2, import_Alert6, import_CircularProgress6, import_Typography11, import_Paper7, import_Tabs2, import_Tab2, import_Grid2, import_react_router_dom, import_react_use3, import_core_plugin_api4, import_plugin_permission_react, PERIOD_LS_KEY2, PAGE_TABS, isPageTab, LiteLLMPage;
 var init_LiteLLMPage = __esm({
   "src/components/LiteLLMPage.tsx"() {
     "use strict";
@@ -3861,6 +3915,7 @@ var init_LiteLLMPage = __esm({
     import_Tabs2 = __toESM(require("@mui/material/Tabs"));
     import_Tab2 = __toESM(require("@mui/material/Tab"));
     import_Grid2 = __toESM(require("@mui/material/Grid"));
+    import_react_router_dom = require("react-router-dom");
     import_react_use3 = require("react-use");
     import_core_plugin_api4 = require("@backstage/core-plugin-api");
     import_plugin_permission_react = require("@backstage/plugin-permission-react");
@@ -3876,6 +3931,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 = (0, import_core_plugin_api4.useApi)(liteLlmApiRef);
       const [dateRange, setDateRange] = (0, import_react11.useState)(initDateRange);
@@ -3886,7 +3943,25 @@ var init_LiteLLMPage = __esm({
           return "7d";
         }
       });
-      const [activeTab, setActiveTab] = (0, import_react11.useState)("overview");
+      const [searchParams, setSearchParams] = (0, import_react_router_dom.useSearchParams)();
+      const [activeTab, setActiveTab] = (0, import_react11.useState)(() => {
+        const t = searchParams.get("tab");
+        return isPageTab(t) ? t : "overview";
+      });
+      const selectTab = (0, import_react11.useCallback)(
+        (tab) => {
+          setActiveTab(tab);
+          setSearchParams(
+            (prev) => {
+              const next = new URLSearchParams(prev);
+              next.set("tab", tab);
+              return next;
+            },
+            { replace: true }
+          );
+        },
+        [setSearchParams]
+      );
       const [snackbar, setSnackbar] = (0, import_react11.useState)(null);
       const [generateDialogOpen, setGenerateDialogOpen] = (0, import_react11.useState)(false);
       const [manageTeam, setManageTeam] = (0, import_react11.useState)(null);
@@ -4093,7 +4168,7 @@ var init_LiteLLMPage = __esm({
         import_Tabs2.default,
         {
           value: activeTab,
-          onChange: (_, v) => setActiveTab(v),
+          onChange: (_, v) => selectTab(v),
           variant: "scrollable",
           scrollButtons: "auto",
           sx: {