@acarmisc/backstage-plugin-litellm 0.16.0 → 0.17.0

package/dist/index.esm.js

@@ -1931,6 +1931,7 @@ import Alert2 from "@mui/material/Alert";
 import Checkbox2 from "@mui/material/Checkbox";
 import FormControlLabel2 from "@mui/material/FormControlLabel";
 import Autocomplete3 from "@mui/material/Autocomplete";
+import MenuItem2 from "@mui/material/MenuItem";
 import Box5 from "@mui/material/Box";
 import Divider2 from "@mui/material/Divider";
 import Typography5 from "@mui/material/Typography";
@@ -1939,10 +1940,19 @@ import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import { Delete as DeleteIcon } from "@mui/icons-material";
-var ManageTeamDialog;
+var BUDGET_DURATION_OPTIONS, DEFAULT_BUDGET_DURATION, FALLBACK_BUDGET_CEILING, ManageTeamDialog;
 var init_ManageTeamDialog = __esm({
   "src/components/ManageTeamDialog.tsx"() {
     "use strict";
+    BUDGET_DURATION_OPTIONS = [
+      { value: "1d", label: "Daily (1d)" },
+      { value: "7d", label: "Weekly (7d)" },
+      { value: "30d", label: "Monthly (30d)" },
+      { value: "90d", label: "Quarterly (90d)" },
+      { value: "365d", label: "Yearly (365d)" }
+    ];
+    DEFAULT_BUDGET_DURATION = "30d";
+    FALLBACK_BUDGET_CEILING = 1e3;
     ManageTeamDialog = ({
       open,
       onClose,
@@ -1979,21 +1989,23 @@ var init_ManageTeamDialog = __esm({
       const [mcpBusy, setMcpBusy] = useState3(false);
       const [mcpError, setMcpError] = useState3(null);
       const allowUnlimitedBudget = config?.teamManagement?.allowUnlimitedBudget ?? false;
-      const maxBudgetCeiling = config?.teamManagement?.maxBudgetCeiling;
+      const maxBudgetCeiling = config?.teamManagement?.maxBudgetCeiling ?? FALLBACK_BUDGET_CEILING;
       useEffect2(() => {
         if (open) {
           if (mode === "edit" && team) {
             setAlias(team.team_alias ?? "");
             setModels(team.models ?? []);
-            setMaxBudget(team.max_budget ? String(team.max_budget) : "");
+            setMaxBudget(
+              team.max_budget ? String(team.max_budget) : String(maxBudgetCeiling)
+            );
             setUnlimited(allowUnlimitedBudget && !team.max_budget);
-            setBudgetDuration("");
+            setBudgetDuration(team.budget_duration ?? DEFAULT_BUDGET_DURATION);
           } else {
             setAlias("");
             setModels([]);
-            setMaxBudget("");
+            setMaxBudget(String(maxBudgetCeiling));
             setUnlimited(allowUnlimitedBudget);
-            setBudgetDuration("");
+            setBudgetDuration(DEFAULT_BUDGET_DURATION);
           }
           setError(null);
           setMemberRef("");
@@ -2004,7 +2016,7 @@ var init_ManageTeamDialog = __esm({
           setMcpIds(team?.object_permission?.mcp_servers ?? []);
           setMcpError(null);
         }
-      }, [open, mode, team, allowUnlimitedBudget]);
+      }, [open, mode, team, allowUnlimitedBudget, maxBudgetCeiling]);
       const handleSubmit = async () => {
         setError(null);
         if (!alias.trim()) {
@@ -2025,7 +2037,7 @@ var init_ManageTeamDialog = __esm({
             setError("Budget must be a positive number");
             return;
           }
-          if (maxBudgetCeiling !== null && maxBudgetCeiling !== void 0 && budget > maxBudgetCeiling) {
+          if (budget > maxBudgetCeiling) {
             setError(`Budget cannot exceed $${maxBudgetCeiling}`);
             return;
           }
@@ -2112,6 +2124,7 @@ var init_ManageTeamDialog = __esm({
         }
       };
       const modelNames = allModels.map((m) => m.model_name);
+      const durationOptions = BUDGET_DURATION_OPTIONS.some((o) => o.value === budgetDuration) ? BUDGET_DURATION_OPTIONS : [...BUDGET_DURATION_OPTIONS, { value: budgetDuration, label: budgetDuration }];
       const members = team?.members_with_roles ?? [];
       const showMembers = mode === "edit" && !!canManageMembers;
       const showKnowledgeBases = mode === "edit" && !!canManageKnowledgeBases;
@@ -2147,7 +2160,8 @@ var init_ManageTeamDialog = __esm({
           value: maxBudget,
           onChange: (e) => setMaxBudget(e.target.value),
           disabled: submitting || unlimited,
-          helperText: maxBudgetCeiling !== null && maxBudgetCeiling !== void 0 ? `Maximum: $${maxBudgetCeiling}` : void 0,
+          inputProps: { min: 0, max: maxBudgetCeiling },
+          helperText: `Maximum: $${maxBudgetCeiling}`,
           fullWidth: true
         }
       ), allowUnlimitedBudget && /* @__PURE__ */ React5.createElement(
@@ -2159,13 +2173,15 @@ var init_ManageTeamDialog = __esm({
       ), /* @__PURE__ */ React5.createElement(
         TextField3,
         {
+          select: true,
           label: "Budget Duration",
           value: budgetDuration,
           onChange: (e) => setBudgetDuration(e.target.value),
-          placeholder: "30d",
-          disabled: submitting,
+          disabled: submitting || unlimited,
+          helperText: "Spend-reset period for the team budget",
           fullWidth: true
-        }
+        },
+        durationOptions.map((o) => /* @__PURE__ */ React5.createElement(MenuItem2, { key: o.value, value: o.value }, o.label))
       ), showMembers && /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Divider2, { sx: { my: 1 } }), /* @__PURE__ */ React5.createElement(Typography5, { variant: "subtitle2", sx: { mb: 1 } }, "Members"), memberError && /* @__PURE__ */ React5.createElement(Alert2, { severity: "error", sx: { mb: 1 }, onClose: () => setMemberError(null) }, memberError), members.length === 0 ? /* @__PURE__ */ React5.createElement(Typography5, { variant: "body2", color: "text.secondary" }, "No members yet.") : /* @__PURE__ */ React5.createElement(List, { dense: true, disablePadding: true }, members.map((m) => /* @__PURE__ */ React5.createElement(
         ListItem,
         {
@@ -2264,7 +2280,7 @@ import Paper3 from "@mui/material/Paper";
 import Box6 from "@mui/material/Box";
 import Typography6 from "@mui/material/Typography";
 import TextField4 from "@mui/material/TextField";
-import MenuItem2 from "@mui/material/MenuItem";
+import MenuItem3 from "@mui/material/MenuItem";
 import Grid from "@mui/material/Grid";
 import Table2 from "@mui/material/Table";
 import TableBody2 from "@mui/material/TableBody";
@@ -2493,7 +2509,7 @@ var init_UsageStats = __esm({
           onChange: (e) => handlePresetChange(e.target.value),
           sx: { minWidth: 160 }
         },
-        Object.keys(PRESET_LABELS).map((p) => /* @__PURE__ */ React6.createElement(MenuItem2, { key: p, value: p }, PRESET_LABELS[p]))
+        Object.keys(PRESET_LABELS).map((p) => /* @__PURE__ */ React6.createElement(MenuItem3, { key: p, value: p }, PRESET_LABELS[p]))
       );
       return /* @__PURE__ */ React6.createElement(
         SectionCard,
@@ -2538,8 +2554,8 @@ var init_UsageStats = __esm({
               onChange: (e) => setSelectedModel(e.target.value),
               sx: { minWidth: 220 }
             },
-            /* @__PURE__ */ React6.createElement(MenuItem2, { value: "all" }, "All models"),
-            models.map((m) => /* @__PURE__ */ React6.createElement(MenuItem2, { key: m.model_name, value: m.model_name }, m.model_name))
+            /* @__PURE__ */ React6.createElement(MenuItem3, { value: "all" }, "All models"),
+            models.map((m) => /* @__PURE__ */ React6.createElement(MenuItem3, { key: m.model_name, value: m.model_name }, m.model_name))
           )
         ),
         tab === "costs" && /* @__PURE__ */ React6.createElement(Grid, { container: true, spacing: 2 }, /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(ChartCard, { title: "Daily spend by model", height: 260 }, /* @__PURE__ */ React6.createElement(ChartOrFallback, { loading, empty: modelSpendByDate.length === 0, height: 260 }, /* @__PURE__ */ React6.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React6.createElement(AreaChart, { data: modelSpendByDate, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ React6.createElement(CartesianGrid, { ...chart.grid }), /* @__PURE__ */ React6.createElement(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ React6.createElement(YAxis, { tickFormatter: fmtUsdCompact, width: 56, ...chart.axis }), /* @__PURE__ */ React6.createElement(
@@ -2879,7 +2895,7 @@ import TableContainer4 from "@mui/material/TableContainer";
 import TableHead4 from "@mui/material/TableHead";
 import TableRow4 from "@mui/material/TableRow";
 import Typography8 from "@mui/material/Typography";
-import MenuItem3 from "@mui/material/MenuItem";
+import MenuItem4 from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
@@ -2954,7 +2970,7 @@ var init_ModelsTable = __esm({
             label: "Team",
             onChange: (e) => setSelectedTeamId(e.target.value)
           },
-          teams.map((t) => /* @__PURE__ */ React8.createElement(MenuItem3, { key: t.team_id, value: t.team_id }, t.team_alias ?? t.team_id))
+          teams.map((t) => /* @__PURE__ */ React8.createElement(MenuItem4, { key: t.team_id, value: t.team_id }, t.team_alias ?? t.team_id))
         ))),
         loading && /* @__PURE__ */ React8.createElement(EmptyState, { message: "Loading models\u2026" }),
         !loading && !selectedTeamId && /* @__PURE__ */ React8.createElement(
@@ -3028,7 +3044,7 @@ import TableHead5 from "@mui/material/TableHead";
 import TableRow5 from "@mui/material/TableRow";
 import TablePagination from "@mui/material/TablePagination";
 import TextField5 from "@mui/material/TextField";
-import MenuItem4 from "@mui/material/MenuItem";
+import MenuItem5 from "@mui/material/MenuItem";
 import Skeleton5 from "@mui/material/Skeleton";
 import Collapse2 from "@mui/material/Collapse";
 import IconButton5 from "@mui/material/IconButton";
@@ -3185,11 +3201,11 @@ var init_AuditLog = __esm({
               },
               sx: { minWidth: 150 }
             },
-            /* @__PURE__ */ React9.createElement(MenuItem4, { value: "" }, "All actions"),
-            /* @__PURE__ */ React9.createElement(MenuItem4, { value: "created" }, "Created"),
-            /* @__PURE__ */ React9.createElement(MenuItem4, { value: "updated" }, "Updated"),
-            /* @__PURE__ */ React9.createElement(MenuItem4, { value: "deleted" }, "Deleted"),
-            /* @__PURE__ */ React9.createElement(MenuItem4, { value: "blocked" }, "Blocked")
+            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "" }, "All actions"),
+            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "created" }, "Created"),
+            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "updated" }, "Updated"),
+            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "deleted" }, "Deleted"),
+            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "blocked" }, "Blocked")
           ), /* @__PURE__ */ React9.createElement(
             TextField5,
             {
@@ -3203,12 +3219,12 @@ var init_AuditLog = __esm({
               },
               sx: { minWidth: 150 }
             },
-            /* @__PURE__ */ React9.createElement(MenuItem4, { value: "" }, "All tables"),
-            /* @__PURE__ */ React9.createElement(MenuItem4, { value: "LiteLLM_VerificationToken" }, "Key"),
-            /* @__PURE__ */ React9.createElement(MenuItem4, { value: "LiteLLM_TeamTable" }, "Team"),
-            /* @__PURE__ */ React9.createElement(MenuItem4, { value: "LiteLLM_TeamMembership" }, "Team member"),
-            /* @__PURE__ */ React9.createElement(MenuItem4, { value: "LiteLLM_ObjectPermissionTable" }, "Team access (KB / MCP)"),
-            /* @__PURE__ */ React9.createElement(MenuItem4, { value: "LiteLLM_UserTable" }, "User")
+            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "" }, "All tables"),
+            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "LiteLLM_VerificationToken" }, "Key"),
+            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "LiteLLM_TeamTable" }, "Team"),
+            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "LiteLLM_TeamMembership" }, "Team member"),
+            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "LiteLLM_ObjectPermissionTable" }, "Team access (KB / MCP)"),
+            /* @__PURE__ */ React9.createElement(MenuItem5, { value: "LiteLLM_UserTable" }, "User")
           ), /* @__PURE__ */ React9.createElement(
             TextField5,
             {
@@ -3760,7 +3776,7 @@ import Box11 from "@mui/material/Box";
 import Typography11 from "@mui/material/Typography";
 import FormControl2 from "@mui/material/FormControl";
 import Select2 from "@mui/material/Select";
-import MenuItem5 from "@mui/material/MenuItem";
+import MenuItem6 from "@mui/material/MenuItem";
 import Grid2 from "@mui/material/Grid";
 import CircularProgress5 from "@mui/material/CircularProgress";
 import Alert6 from "@mui/material/Alert";
@@ -3834,9 +3850,9 @@ var LiteLLMHomeWidget = ({
       onChange: (e) => setPeriod(e.target.value),
       displayEmpty: true
     },
-    /* @__PURE__ */ React12.createElement(MenuItem5, { value: "today" }, "Today"),
-    /* @__PURE__ */ React12.createElement(MenuItem5, { value: "7d" }, "7d"),
-    /* @__PURE__ */ React12.createElement(MenuItem5, { value: "30d" }, "30d")
+    /* @__PURE__ */ React12.createElement(MenuItem6, { value: "today" }, "Today"),
+    /* @__PURE__ */ React12.createElement(MenuItem6, { value: "7d" }, "7d"),
+    /* @__PURE__ */ React12.createElement(MenuItem6, { value: "30d" }, "30d")
   ))), loading && /* @__PURE__ */ React12.createElement(Box11, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ React12.createElement(CircularProgress5, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ React12.createElement(Alert6, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ React12.createElement(React12.Fragment, null, partialFailure && /* @__PURE__ */ React12.createElement(Alert6, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ React12.createElement(Grid2, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ React12.createElement(Box11, { height: 120 }, /* @__PURE__ */ React12.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React12.createElement(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React12.createElement(
     Area3,
     {