@acarmisc/backstage-plugin-litellm 0.21.3 → 0.23.0

package/dist/index.esm.js

@@ -2001,6 +2001,8 @@ var init_ManageTeamDialog = __esm({
       const [mcpError, setMcpError] = useState3(null);
       const allowUnlimitedBudget = config?.teamManagement?.allowUnlimitedBudget ?? false;
       const maxBudgetCeiling = config?.teamManagement?.maxBudgetCeiling ?? FALLBACK_BUDGET_CEILING;
+      const hideBudgetForManagers = config?.display?.hideTeamBudgetForManagers ?? false;
+      const budgetWriteOnly = hideBudgetForManagers && mode === "edit";
       const members = useMemo4(() => team?.members_with_roles ?? [], [team]);
       const showMembers = mode === "edit" && !!canManageMembers;
       const catalogApi = useApi(catalogApiRef);
@@ -2036,9 +2038,13 @@ var init_ManageTeamDialog = __esm({
           if (mode === "edit" && team) {
             setAlias(team.team_alias ?? "");
             setModels(team.models ?? []);
-            setMaxBudget(
-              team.max_budget ? String(team.max_budget) : String(maxBudgetCeiling)
-            );
+            if (hideBudgetForManagers) {
+              setMaxBudget("");
+            } else {
+              setMaxBudget(
+                team.max_budget ? String(team.max_budget) : String(maxBudgetCeiling)
+              );
+            }
             setUnlimited(allowUnlimitedBudget && !team.max_budget);
             setBudgetDuration(team.budget_duration ?? DEFAULT_BUDGET_DURATION);
           } else {
@@ -2058,7 +2064,7 @@ var init_ManageTeamDialog = __esm({
           setMcpIds(team?.object_permission?.mcp_servers ?? []);
           setMcpError(null);
         }
-      }, [open, mode, team, allowUnlimitedBudget, maxBudgetCeiling]);
+      }, [open, mode, team, allowUnlimitedBudget, maxBudgetCeiling, hideBudgetForManagers]);
       const handleSubmit = async () => {
         setError(null);
         if (!alias.trim()) {
@@ -2070,18 +2076,21 @@ var init_ManageTeamDialog = __esm({
           return;
         }
         if (!unlimited) {
-          if (!maxBudget) {
-            setError("Budget is required when unlimited budgets are disabled");
-            return;
-          }
-          const budget = parseFloat(maxBudget);
-          if (isNaN(budget) || budget <= 0) {
-            setError("Budget must be a positive number");
-            return;
-          }
-          if (budget > maxBudgetCeiling) {
-            setError(`Budget cannot exceed $${maxBudgetCeiling}`);
-            return;
+          const budgetLeftBlank = budgetWriteOnly && !maxBudget.trim();
+          if (!budgetLeftBlank) {
+            if (!maxBudget) {
+              setError("Budget is required when unlimited budgets are disabled");
+              return;
+            }
+            const budget = parseFloat(maxBudget);
+            if (isNaN(budget) || budget <= 0) {
+              setError("Budget must be a positive number");
+              return;
+            }
+            if (budget > maxBudgetCeiling) {
+              setError(`Budget cannot exceed $${maxBudgetCeiling}`);
+              return;
+            }
           }
         }
         try {
@@ -2095,10 +2104,16 @@ var init_ManageTeamDialog = __esm({
               ...budgetDuration && { budget_duration: budgetDuration }
             };
           } else {
+            let budgetField = {};
+            if (unlimited) {
+              budgetField = { max_budget: null };
+            } else if (maxBudget.trim()) {
+              budgetField = { max_budget: parseFloat(maxBudget) };
+            }
             payload = {
               team_alias: alias.trim(),
               models,
-              ...unlimited ? { max_budget: null } : { max_budget: parseFloat(maxBudget) },
+              ...budgetField,
               ...budgetDuration && { budget_duration: budgetDuration }
             };
           }
@@ -2204,13 +2219,13 @@ var init_ManageTeamDialog = __esm({
       ), /* @__PURE__ */ React5.createElement(
         TextField3,
         {
-          label: "Max Budget ($)",
+          label: budgetWriteOnly ? "New Max Budget ($)" : "Max Budget ($)",
           type: "number",
           value: maxBudget,
           onChange: (e) => setMaxBudget(e.target.value),
           disabled: submitting || unlimited,
           inputProps: { min: 0, max: maxBudgetCeiling },
-          helperText: `Maximum: $${maxBudgetCeiling}`,
+          helperText: budgetWriteOnly ? "Current budget is hidden \u2014 leave blank to keep it, or enter a new value" : `Maximum: $${maxBudgetCeiling}`,
           fullWidth: true
         }
       ), allowUnlimitedBudget && /* @__PURE__ */ React5.createElement(
@@ -2781,7 +2796,19 @@ function buildBudgetSummary(user, teams, keys, maxKeys = 3) {
       pct: limitPct(spend, budget)
     };
   })() : void 0;
-  const teamLimits = teams.filter((t) => (t.max_budget ?? 0) > 0).map((t) => {
+  const teamLimits = teams.filter((t) => (t.max_budget ?? 0) > 0 || t.budget_hidden === true).map((t) => {
+    if (t.budget_hidden === true) {
+      return {
+        kind: "team",
+        label: t.team_alias || "Untitled team",
+        sublabel: t.team_id,
+        budget: 0,
+        spend: 0,
+        budgetDuration: t.budget_duration,
+        pct: Math.min(100, Math.max(0, t.budget_pct ?? 0)),
+        hidden: true
+      };
+    }
     const spend = t.spend ?? 0;
     return {
       kind: "team",
@@ -2957,7 +2984,7 @@ var init_LiteLLMBudgetWidget = __esm({
           }
         },
         limit.sublabel
-      )), /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, fmtUsd(limit.spend), /* @__PURE__ */ React7.createElement(Box7, { component: "span", color: "text.secondary", sx: { fontWeight: 400 } }, " / ", fmtUsd(limit.budget)))), /* @__PURE__ */ React7.createElement(Box7, { sx: { mt: 1 } }, /* @__PURE__ */ React7.createElement(Meter, { value: limit.pct, tone, height: 6 })), /* @__PURE__ */ React7.createElement(
+      )), limit.hidden ? /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, pct, "% used") : /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", sx: { fontWeight: 600, fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" } }, fmtUsd(limit.spend), /* @__PURE__ */ React7.createElement(Box7, { component: "span", color: "text.secondary", sx: { fontWeight: 400 } }, " / ", fmtUsd(limit.budget)))), /* @__PURE__ */ React7.createElement(Box7, { sx: { mt: 1 } }, /* @__PURE__ */ React7.createElement(Meter, { value: limit.pct, tone, height: 6 })), /* @__PURE__ */ React7.createElement(
         Box7,
         {
           sx: {
@@ -2968,7 +2995,7 @@ var init_LiteLLMBudgetWidget = __esm({
             mt: 0.75
           }
         },
-        /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, pct, "% of budget", closeTo && ` \xB7 soft-limit warning`),
+        /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, limit.hidden ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, "Hidden by admin") : /* @__PURE__ */ React7.createElement(React7.Fragment, null, pct, "% of budget", closeTo && ` \xB7 soft-limit warning`)),
         /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary" }, fmtBudgetDuration(limit.budgetDuration) ? `resets ${fmtBudgetDuration(limit.budgetDuration)}` : "never resets")
       ));
     };
@@ -3176,6 +3203,15 @@ function budgetTone3(isOver, isNear) {
   if (isNear) return "warning";
   return "accent";
 }
+function visibleBudgetPct(spend, budget) {
+  if (budget <= 0) return 0;
+  return Math.min(spend / budget * 100, 100);
+}
+function budgetStatValue(hidden, budget) {
+  if (hidden) return "Hidden";
+  if (budget > 0) return fmtUsd2(budget);
+  return "Unlimited";
+}
 var fmtUsd2, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
@@ -3185,13 +3221,15 @@ var init_TeamUsage = __esm({
     TeamCard = ({ team, usage, usageLoading, canManage, onEditTeam }) => {
       const [expanded, setExpanded] = useState6(false);
       const chart = useChartTheme();
-      const budget = team.max_budget ?? 0;
-      const spend = team.spend ?? 0;
-      const budgetPct = budget > 0 ? Math.min(spend / budget * 100, 100) : 0;
-      const isOver = budget > 0 && spend >= budget;
-      const isNear = budget > 0 && spend >= budget * 0.8 && !isOver;
+      const hidden = team.budget_hidden === true;
+      const budget = hidden ? 0 : team.max_budget ?? 0;
+      const spend = hidden ? 0 : team.spend ?? 0;
+      const budgetPct = hidden ? Math.min(100, Math.max(0, team.budget_pct ?? 0)) : visibleBudgetPct(spend, budget);
+      const isOver = hidden ? team.budget_status === "over" : budget > 0 && spend >= budget;
+      const isNear = hidden ? team.budget_status === "near" : budget > 0 && spend >= budget * 0.8 && !isOver;
       const dailyData = usage?.daily_usage?.map((d) => ({ date: d.date, spend: d.spend })) ?? [];
       const renderDailySpendSection = () => {
+        if (hidden) return null;
         if (usageLoading) {
           return /* @__PURE__ */ React8.createElement(Box8, { display: "flex", justifyContent: "center", py: 3 }, /* @__PURE__ */ React8.createElement(CircularProgress5, { size: 22 }));
         }
@@ -3292,11 +3330,11 @@ var init_TeamUsage = __esm({
         },
         /* @__PURE__ */ React8.createElement(Stat, { label: "Members", value: team.members_with_roles?.length ?? "\u2014" }),
         /* @__PURE__ */ React8.createElement(Stat, { label: "Models", value: team.models?.length ? team.models.length : "All" }),
-        /* @__PURE__ */ React8.createElement(Stat, { label: "Budget", value: budget > 0 ? fmtUsd2(budget) : "Unlimited" }),
-        /* @__PURE__ */ React8.createElement(Stat, { label: "Spend", value: fmtUsd2(spend) }),
+        /* @__PURE__ */ React8.createElement(Stat, { label: "Budget", value: budgetStatValue(hidden, budget) }),
+        /* @__PURE__ */ React8.createElement(Stat, { label: "Spend", value: hidden ? "\u2014" : fmtUsd2(spend) }),
         /* @__PURE__ */ React8.createElement(Stat, { label: "TPM", value: team.tpm_limit && team.tpm_limit > 0 ? team.tpm_limit.toLocaleString() : "\u2014" }),
         /* @__PURE__ */ React8.createElement(Stat, { label: "RPM", value: team.rpm_limit && team.rpm_limit > 0 ? team.rpm_limit.toLocaleString() : "\u2014" })
-      ), budget > 0 && /* @__PURE__ */ React8.createElement(Box8, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ React8.createElement(Box8, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, fmtUsd2(spend), " of ", fmtUsd2(budget)), /* @__PURE__ */ React8.createElement(Typography8, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "%")), /* @__PURE__ */ React8.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 })), /* @__PURE__ */ React8.createElement(Collapse2, { in: expanded, unmountOnExit: true }, /* @__PURE__ */ React8.createElement(Divider3, { sx: { my: 2.5 } }), /* @__PURE__ */ React8.createElement(Box8, { mb: 2.5 }, sectionLabel("Models"), team.models?.length ? /* @__PURE__ */ React8.createElement(Box8, { display: "flex", gap: 0.5, flexWrap: "wrap" }, team.models.map((m) => /* @__PURE__ */ React8.createElement(TagChip, { key: m, label: m, title: m }))) : /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", color: "text.secondary" }, "All models allowed")), renderDailySpendSection(), /* @__PURE__ */ React8.createElement(Box8, null, sectionLabel("Members"), team.members_with_roles?.length ? /* @__PURE__ */ React8.createElement(
+      ), hidden && /* @__PURE__ */ React8.createElement(Box8, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ React8.createElement(Box8, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "% used"), /* @__PURE__ */ React8.createElement(Typography8, { variant: "caption", color: "text.secondary" }, "Hidden by admin")), /* @__PURE__ */ React8.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 }), /* @__PURE__ */ React8.createElement(Typography8, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 0.75 } }, "Team budget is hidden \u2014 showing usage level only", team.budget_duration ? ` \xB7 resets every ${team.budget_duration}` : "", ".")), !hidden && budget > 0 && /* @__PURE__ */ React8.createElement(Box8, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ React8.createElement(Box8, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, fmtUsd2(spend), " of ", fmtUsd2(budget)), /* @__PURE__ */ React8.createElement(Typography8, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "%")), /* @__PURE__ */ React8.createElement(Meter, { value: budgetPct, tone: budgetTone3(isOver, isNear), height: 5 })), /* @__PURE__ */ React8.createElement(Collapse2, { in: expanded, unmountOnExit: true }, /* @__PURE__ */ React8.createElement(Divider3, { sx: { my: 2.5 } }), /* @__PURE__ */ React8.createElement(Box8, { mb: 2.5 }, sectionLabel("Models"), team.models?.length ? /* @__PURE__ */ React8.createElement(Box8, { display: "flex", gap: 0.5, flexWrap: "wrap" }, team.models.map((m) => /* @__PURE__ */ React8.createElement(TagChip, { key: m, label: m, title: m }))) : /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", color: "text.secondary" }, "All models allowed")), renderDailySpendSection(), /* @__PURE__ */ React8.createElement(Box8, null, sectionLabel("Members"), team.members_with_roles?.length ? /* @__PURE__ */ React8.createElement(
         TableContainer4,
         {
           component: Paper6,
@@ -3625,7 +3663,7 @@ var init_ModelsTable = __esm({
 });
 
 // src/components/AuditLog.tsx
-import React10, { useState as useState8, useCallback as useCallback2 } from "react";
+import React10, { useState as useState8, useMemo as useMemo8 } from "react";
 import Box10 from "@mui/material/Box";
 import Typography10 from "@mui/material/Typography";
 import Table6 from "@mui/material/Table";
@@ -3764,10 +3802,10 @@ var init_AuditLog = __esm({
       const [page, setPage] = useState8(0);
       const [pageSize, setPageSize] = useState8(25);
       const [filters, setFilters] = useState8({});
-      const fetchParams = useCallback2(
+      const fetchParams = useMemo8(
         () => ({ page: page + 1, page_size: pageSize, ...filters }),
         [page, pageSize, filters]
-      )();
+      );
       const { value, loading, error } = useAsync2(
         () => api.getAuditLogs(fetchParams),
         [api, fetchParams]
@@ -3888,7 +3926,7 @@ var LiteLLMPage_exports = {};
 __export(LiteLLMPage_exports, {
   LiteLLMPage: () => LiteLLMPage
 });
-import React11, { useState as useState9, useCallback as useCallback3, useMemo as useMemo8 } from "react";
+import React11, { useState as useState9, useCallback as useCallback2, useMemo as useMemo9 } from "react";
 import Box11 from "@mui/material/Box";
 import Snackbar2 from "@mui/material/Snackbar";
 import Alert6 from "@mui/material/Alert";
@@ -3949,7 +3987,7 @@ var init_LiteLLMPage = __esm({
         const t = searchParams.get("tab");
         return isPageTab(t) ? t : "overview";
       });
-      const selectTab = useCallback3(
+      const selectTab = useCallback2(
         (tab) => {
           setActiveTab(tab);
           setSearchParams(
@@ -4011,7 +4049,7 @@ var init_LiteLLMPage = __esm({
         async () => objectPermsEnabled ? api.getMcpServers().catch(() => []) : [],
         [api, objectPermsEnabled]
       );
-      const teams = useMemo8(() => {
+      const teams = useMemo9(() => {
         if (!allTeams?.length) return [];
         if (!userInfo) return allTeams;
         const userId = userInfo.user_id;
@@ -4028,7 +4066,7 @@ var init_LiteLLMPage = __esm({
         const endDate = dateRange.end.toISOString().split("T")[0];
         return api.getUsage(startDate, endDate);
       }, [api, dateRange]);
-      const handleDateRangeChange = useCallback3((range, preset) => {
+      const handleDateRangeChange = useCallback2((range, preset) => {
         setDateRange(range);
         if (preset) {
           setCurrentPreset(preset);
@@ -4036,7 +4074,7 @@ var init_LiteLLMPage = __esm({
         setTeamUsageCache({});
         setTeamUsageLoading({});
       }, [setDateRange, setCurrentPreset]);
-      const loadTeamUsage = useCallback3(async (teamId) => {
+      const loadTeamUsage = useCallback2(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
         setTeamUsageLoading((prev) => ({ ...prev, [teamId]: true }));
         try {
@@ -4050,7 +4088,7 @@ var init_LiteLLMPage = __esm({
           setTeamUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
       }, [api, dateRange, teamUsageCache, teamUsageLoading]);
-      const allowedModels = useMemo8(() => {
+      const allowedModels = useMemo9(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
         const teamModels = teams?.flatMap((t) => t.models ?? []);
@@ -4063,7 +4101,7 @@ var init_LiteLLMPage = __esm({
         ]);
         return allModels.filter((m) => allowed.has(m.model_name));
       }, [allModels, userInfo, teams]);
-      const handleGenerateKey = useCallback3(
+      const handleGenerateKey = useCallback2(
         async (request) => {
           try {
             const response = await api.generateKey(request);
@@ -4077,7 +4115,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleUpdateKey = useCallback3(
+      const handleUpdateKey = useCallback2(
         async (keyId, request) => {
           try {
             await api.updateKey(keyId, request);
@@ -4090,7 +4128,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleBlockKey = useCallback3(
+      const handleBlockKey = useCallback2(
         async (keyId) => {
           try {
             await api.blockKey(keyId);
@@ -4102,7 +4140,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleUnblockKey = useCallback3(
+      const handleUnblockKey = useCallback2(
         async (keyId) => {
           try {
             await api.unblockKey(keyId);
@@ -4114,7 +4152,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleResetKeySpend = useCallback3(
+      const handleResetKeySpend = useCallback2(
         async (keyId) => {
           try {
             await api.resetKeySpend(keyId);
@@ -4126,7 +4164,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleDeleteKey = useCallback3(
+      const handleDeleteKey = useCallback2(
         async (keyId) => {
           try {
             await api.deleteKey(keyId);
@@ -4143,7 +4181,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handlePruneExpiredKeys = useCallback3(
+      const handlePruneExpiredKeys = useCallback2(
         async () => {
           try {
             const result = await api.pruneExpiredKeys();