@acarmisc/backstage-plugin-litellm 0.10.1 → 0.11.0

package/dist/index.esm.js

@@ -50,7 +50,8 @@ var init_api = __esm({
           } catch {
             body = await response.text().catch(() => "");
           }
-          throw new ApiError(`${response.status} ${response.statusText}`, response.status, body);
+          const message = (typeof body === "object" && body && typeof body.error === "string" ? body.error : void 0) ?? `${response.status} ${response.statusText}`;
+          throw new ApiError(message, response.status, body);
         }
       }
       async get(path, params) {
@@ -283,7 +284,7 @@ response = client.chat.completions.create(
 print(response.choices[0].message.content)`
   };
 }
-var maskKey, shortKeyId, formatDate, emptyForm, keyToEditForm, KeysTable, SnippetTabs;
+var maskKey, generateDefaultAlias, shortKeyId, formatDate, emptyForm, keyToEditForm, KeysTable, SnippetTabs;
 var init_KeysTable = __esm({
   "src/components/KeysTable.tsx"() {
     "use strict";
@@ -293,6 +294,11 @@ var init_KeysTable = __esm({
       if (key.length <= 8) return "***";
       return `${key.slice(0, 4)}...${key.slice(-4)}`;
     };
+    generateDefaultAlias = (username) => {
+      const base = (username || "user").split("@")[0].toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "user";
+      const hash = Math.random().toString(36).slice(2, 8);
+      return `${base}-${hash}`;
+    };
     shortKeyId = (token) => {
       if (!token) return "-";
       if (token.length <= 16) return token;
@@ -326,6 +332,8 @@ var init_KeysTable = __esm({
       keys,
       models,
       teams,
+      username,
+      keyGenerationSettings,
       loading,
       onGenerateKey,
       onUpdateKey,
@@ -359,12 +367,23 @@ var init_KeysTable = __esm({
           (k) => (k.key_alias ?? "").toLowerCase().includes(q) || k.models?.some((m) => m.toLowerCase().includes(q))
         );
       }, [keys, filterText]);
-      const selectedModels = models.filter((m) => (formData.models || []).includes(m.model_name));
+      const allowUnlimitedBudget = keyGenerationSettings?.allowUnlimitedBudget ?? false;
+      const teamRequired = keyGenerationSettings?.teamRequired ?? true;
       const selectedTeam = teams.find((t) => t.team_id === formData.team_id) ?? null;
+      const availableModels = useMemo(() => {
+        const teamModels = selectedTeam?.models;
+        if (teamModels && teamModels.length > 0) {
+          const allowed = new Set(teamModels);
+          return models.filter((m) => allowed.has(m.model_name));
+        }
+        return models;
+      }, [models, selectedTeam]);
+      const selectedModels = availableModels.filter((m) => (formData.models || []).includes(m.model_name));
       const editSelectedModels = models.filter((m) => (editForm.models || []).includes(m.model_name));
       const aliasError = !(formData.alias || "").trim();
+      const teamError = teamRequired && !formData.team_id;
       const budgetInvalid = !unlimitedBudget && (formData.max_budget === void 0 || formData.max_budget === null || formData.max_budget <= 0);
-      const canGenerate = !aliasError && !budgetInvalid && !submitting;
+      const canGenerate = !aliasError && !teamError && !budgetInvalid && !submitting;
       const budgetEstimate = useMemo(() => {
         if (unlimitedBudget || budgetInvalid) return null;
         const inputCosts = selectedModels.map((m) => m.input_cost_per_token).filter((c) => typeof c === "number" && c > 0);
@@ -397,6 +416,10 @@ var init_KeysTable = __esm({
           setSubmitting(false);
         }
       };
+      const handleOpenGenerate = () => {
+        setFormData({ ...emptyForm(), alias: generateDefaultAlias(username) });
+        setGenerateModalOpen(true);
+      };
       const handleCloseModal = () => {
         setGenerateModalOpen(false);
         setNewKeyValue(null);
@@ -514,7 +537,7 @@ var init_KeysTable = __esm({
           variant: "contained",
           color: "primary",
           startIcon: /* @__PURE__ */ React2.createElement(Add, null),
-          onClick: () => setGenerateModalOpen(true)
+          onClick: handleOpenGenerate
         },
         "Generate New Key"
       ))), /* @__PURE__ */ React2.createElement(TableContainer, null, /* @__PURE__ */ React2.createElement(Table, null, /* @__PURE__ */ React2.createElement(TableHead, null, /* @__PURE__ */ React2.createElement(TableRow, null, /* @__PURE__ */ React2.createElement(TableCell, null, "Alias"), /* @__PURE__ */ React2.createElement(TableCell, null, "Key ID"), /* @__PURE__ */ React2.createElement(TableCell, null, "Created"), /* @__PURE__ */ React2.createElement(TableCell, null, "Expires"), /* @__PURE__ */ React2.createElement(TableCell, null, "Budget"), /* @__PURE__ */ React2.createElement(TableCell, null, "TPM / RPM"), /* @__PURE__ */ React2.createElement(TableCell, null, "Models"), /* @__PURE__ */ React2.createElement(TableCell, { align: "right" }, "Actions"))), /* @__PURE__ */ React2.createElement(TableBody, null, loading ? /* @__PURE__ */ React2.createElement(TableRow, null, /* @__PURE__ */ React2.createElement(TableCell, { colSpan: 8, align: "center" }, /* @__PURE__ */ React2.createElement(CircularProgress, { size: 24 }))) : filteredKeys.length === 0 ? /* @__PURE__ */ React2.createElement(TableRow, null, /* @__PURE__ */ React2.createElement(TableCell, { colSpan: 8, align: "center", sx: { py: 4 } }, filterText ? /* @__PURE__ */ React2.createElement(Typography2, { color: "text.secondary" }, "No keys match filter") : /* @__PURE__ */ React2.createElement(Box2, null, /* @__PURE__ */ React2.createElement(Typography2, { color: "text.secondary", gutterBottom: true }, "No keys yet \u2014 generate your first key to start calling models."), /* @__PURE__ */ React2.createElement(
@@ -524,7 +547,7 @@ var init_KeysTable = __esm({
           color: "primary",
           size: "small",
           startIcon: /* @__PURE__ */ React2.createElement(Add, null),
-          onClick: () => setGenerateModalOpen(true)
+          onClick: handleOpenGenerate
         },
         "Generate Your First Key"
       )))) : filteredKeys.map((key) => {
@@ -614,36 +637,50 @@ var init_KeysTable = __esm({
         /* @__PURE__ */ React2.createElement(MenuItem, { value: "30d" }, "30 Days"),
         /* @__PURE__ */ React2.createElement(MenuItem, { value: "90d" }, "90 Days"),
         /* @__PURE__ */ React2.createElement(MenuItem, { value: "1y" }, "1 Year")
-      ), teams.length > 0 && /* @__PURE__ */ React2.createElement(
+      ), teams.length > 0 ? /* @__PURE__ */ React2.createElement(
         Autocomplete,
         {
           options: teams,
           getOptionLabel: (t) => t.team_alias || t.team_id,
           value: selectedTeam,
-          onChange: (_e, team) => setFormData({ ...formData, team_id: team?.team_id }),
+          onChange: (_e, team) => {
+            const teamModels = team?.models;
+            const restrictedModels = teamModels && teamModels.length > 0 ? (formData.models || []).filter((m) => teamModels.includes(m)) : formData.models;
+            setFormData({ ...formData, team_id: team?.team_id, models: restrictedModels });
+          },
           renderInput: (params) => /* @__PURE__ */ React2.createElement(
             TextField,
             {
               ...params,
               label: "Team",
-              helperText: "Optional: bind this key to a specific team for scoped access",
+              error: teamError,
+              helperText: teamError ? "Team is required" : teamRequired ? "Bind this key to a team for scoped access" : "Optional: bind this key to a specific team for scoped access",
+              required: teamRequired,
               fullWidth: true
             }
           )
         }
-      ), models.length > 0 && /* @__PURE__ */ React2.createElement(
+      ) : teamRequired ? /* @__PURE__ */ React2.createElement(Typography2, { variant: "body2", color: "error" }, "Team selection is required, but you don't belong to any team yet \u2014 contact your administrator.") : null, availableModels.length > 0 && /* @__PURE__ */ React2.createElement(
         Autocomplete,
         {
           multiple: true,
-          options: models,
+          options: availableModels,
           groupBy: (m) => m.mode || "other",
           getOptionLabel: (m) => m.model_name,
           value: selectedModels,
           onChange: (_e, selected) => setFormData({ ...formData, models: selected.map((m) => m.model_name) }),
           renderOption: (props, m) => /* @__PURE__ */ React2.createElement("li", { ...props }, modelOption(m)),
-          renderInput: (params) => /* @__PURE__ */ React2.createElement(TextField, { ...params, label: "Models", helperText: "Leave empty to allow all models", fullWidth: true })
+          renderInput: (params) => /* @__PURE__ */ React2.createElement(
+            TextField,
+            {
+              ...params,
+              label: "Models",
+              helperText: selectedTeam ? "Leave empty to allow all models available to this team" : "Leave empty to allow all models",
+              fullWidth: true
+            }
+          )
         }
-      ), /* @__PURE__ */ React2.createElement(
+      ), allowUnlimitedBudget && /* @__PURE__ */ React2.createElement(
         FormControlLabel,
         {
           control: /* @__PURE__ */ React2.createElement(
@@ -682,6 +719,7 @@ var init_KeysTable = __esm({
           type: "number",
           value: formData.tpm_limit ?? "",
           onChange: (e) => setFormData({ ...formData, tpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
+          helperText: "Max tokens per minute this key can consume across all models. Leave blank for no limit.",
           fullWidth: true
         }
       ), /* @__PURE__ */ React2.createElement(
@@ -691,6 +729,7 @@ var init_KeysTable = __esm({
           type: "number",
           value: formData.rpm_limit ?? "",
           onChange: (e) => setFormData({ ...formData, rpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
+          helperText: "Max requests per minute this key can make across all models. Leave blank for no limit.",
           fullWidth: true
         }
       ))), /* @__PURE__ */ React2.createElement(DialogActions, null, newKeyValue ? /* @__PURE__ */ React2.createElement(Button, { onClick: handleCloseModal, variant: "contained", color: "success" }, "Done") : /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Button, { onClick: handleCloseModal }, "Cancel"), /* @__PURE__ */ React2.createElement(
@@ -738,6 +777,7 @@ var init_KeysTable = __esm({
           type: "number",
           value: editForm.tpm_limit ?? "",
           onChange: (e) => setEditForm({ ...editForm, tpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
+          helperText: "Max tokens per minute this key can consume across all models. Leave blank for no limit.",
           fullWidth: true
         }
       ), /* @__PURE__ */ React2.createElement(
@@ -747,6 +787,7 @@ var init_KeysTable = __esm({
           type: "number",
           value: editForm.rpm_limit ?? "",
           onChange: (e) => setEditForm({ ...editForm, rpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
+          helperText: "Max requests per minute this key can make across all models. Leave blank for no limit.",
           fullWidth: true
         }
       ), /* @__PURE__ */ React2.createElement(Box2, { mt: 1, pt: 2, borderTop: "1px solid", sx: { borderColor: "divider" } }, /* @__PURE__ */ React2.createElement(Typography2, { variant: "caption", color: "text.secondary", display: "block", mb: 1 }, "Danger Zone"), !resetSpendConfirm ? /* @__PURE__ */ React2.createElement(
@@ -1170,7 +1211,15 @@ var init_TeamUsage = __esm({
           color: isOver ? "error" : isNear ? "warning" : "primary",
           sx: { height: 6, borderRadius: 1 }
         }
-      )), /* @__PURE__ */ React4.createElement(Collapse, { in: expanded }, /* @__PURE__ */ React4.createElement(Box4, { mt: 2 }, /* @__PURE__ */ React4.createElement(Box4, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ React4.createElement(Speed, { fontSize: "small", color: "action" }), /* @__PURE__ */ React4.createElement(Typography4, { variant: "subtitle2", color: "text.secondary" }, "Rate limits")), /* @__PURE__ */ React4.createElement(Stack, { direction: "row", spacing: 3, flexWrap: "wrap", useFlexGap: true, gap: 1.5, mb: 2 }, /* @__PURE__ */ React4.createElement(Stat, { label: "TPM limit", value: team.tpm_limit != null && team.tpm_limit > 0 ? String(team.tpm_limit) : "Unlimited" }), /* @__PURE__ */ React4.createElement(Stat, { label: "RPM limit", value: team.rpm_limit != null && team.rpm_limit > 0 ? String(team.rpm_limit) : "Unlimited" }), /* @__PURE__ */ React4.createElement(Stat, { label: "Max budget", value: budget > 0 ? `$${budget.toFixed(2)}` : "Unlimited" })), /* @__PURE__ */ React4.createElement(Divider, { sx: { mb: 2 } }), /* @__PURE__ */ React4.createElement(Typography4, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Models"), team.models?.length ? /* @__PURE__ */ React4.createElement(Box4, { display: "flex", gap: 0.5, flexWrap: "wrap", mb: 2 }, team.models.map((m) => /* @__PURE__ */ React4.createElement(Chip4, { key: m, label: m, size: "small", variant: "outlined" }))) : /* @__PURE__ */ React4.createElement(Typography4, { variant: "body2", color: "text.secondary", mb: 2 }, "All models allowed"), /* @__PURE__ */ React4.createElement(Divider, { sx: { mb: 2 } }), usageLoading ? /* @__PURE__ */ React4.createElement(Box4, { display: "flex", justifyContent: "center", p: 2 }, /* @__PURE__ */ React4.createElement(CircularProgress2, { size: 24 })) : dailyData.length > 0 ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Typography4, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Daily Spend"), /* @__PURE__ */ React4.createElement(Box4, { height: 160, mb: 2 }, /* @__PURE__ */ React4.createElement(ResponsiveContainer2, { width: "100%", height: "100%" }, /* @__PURE__ */ React4.createElement(AreaChart2, { data: dailyData }, /* @__PURE__ */ React4.createElement(CartesianGrid2, { strokeDasharray: "3 3", stroke: gridStroke }), /* @__PURE__ */ React4.createElement(XAxis2, { dataKey: "date", tick: { fontSize: 11, fill: tickFill } }), /* @__PURE__ */ React4.createElement(YAxis2, { tick: { fontSize: 11, fill: tickFill }, tickFormatter: (v) => `$${v.toFixed(2)}` }), /* @__PURE__ */ React4.createElement(Tooltip2, { formatter: (v) => [`$${v.toFixed(4)}`, "Spend"] }), /* @__PURE__ */ React4.createElement(Area2, { type: "monotone", dataKey: "spend", stroke: "#8884d8", fill: "#8884d8", fillOpacity: 0.3 })))), /* @__PURE__ */ React4.createElement(Divider, { sx: { mb: 2 } })) : null, /* @__PURE__ */ React4.createElement(Box4, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ React4.createElement(Memory, { fontSize: "small", color: "action" }), /* @__PURE__ */ React4.createElement(Typography4, { variant: "subtitle2", color: "text.secondary" }, "Members")), team.members_with_roles?.length ? /* @__PURE__ */ React4.createElement(TableContainer3, null, /* @__PURE__ */ React4.createElement(Table3, { size: "small" }, /* @__PURE__ */ React4.createElement(TableHead3, null, /* @__PURE__ */ React4.createElement(TableRow3, null, /* @__PURE__ */ React4.createElement(TableCell3, null, "User"), /* @__PURE__ */ React4.createElement(TableCell3, null, "Role"))), /* @__PURE__ */ React4.createElement(TableBody3, null, team.members_with_roles.map((m) => /* @__PURE__ */ React4.createElement(TableRow3, { key: m.user_id }, /* @__PURE__ */ React4.createElement(TableCell3, { sx: { fontFamily: "monospace", fontSize: 12 } }, m.user_id), /* @__PURE__ */ React4.createElement(TableCell3, null, /* @__PURE__ */ React4.createElement(
+      )), /* @__PURE__ */ React4.createElement(Collapse, { in: expanded }, /* @__PURE__ */ React4.createElement(Box4, { mt: 2 }, /* @__PURE__ */ React4.createElement(Box4, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ React4.createElement(Speed, { fontSize: "small", color: "action" }), /* @__PURE__ */ React4.createElement(Typography4, { variant: "subtitle2", color: "text.secondary" }, "Rate limits")), /* @__PURE__ */ React4.createElement(Stack, { direction: "row", spacing: 3, flexWrap: "wrap", useFlexGap: true, gap: 1.5, mb: 2 }, /* @__PURE__ */ React4.createElement(Stat, { label: "TPM limit", value: team.tpm_limit != null && team.tpm_limit > 0 ? String(team.tpm_limit) : "Unlimited" }), /* @__PURE__ */ React4.createElement(Stat, { label: "RPM limit", value: team.rpm_limit != null && team.rpm_limit > 0 ? String(team.rpm_limit) : "Unlimited" }), /* @__PURE__ */ React4.createElement(Stat, { label: "Max budget", value: budget > 0 ? `$${budget.toFixed(2)}` : "Unlimited" })), /* @__PURE__ */ React4.createElement(Divider, { sx: { mb: 2 } }), /* @__PURE__ */ React4.createElement(Typography4, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Models"), team.models?.length ? /* @__PURE__ */ React4.createElement(Box4, { display: "flex", gap: 0.5, flexWrap: "wrap", mb: 2 }, team.models.map((m) => /* @__PURE__ */ React4.createElement(Chip4, { key: m, label: m, size: "small", variant: "outlined" }))) : /* @__PURE__ */ React4.createElement(Typography4, { variant: "body2", color: "text.secondary", mb: 2 }, "All models allowed"), /* @__PURE__ */ React4.createElement(Divider, { sx: { mb: 2 } }), usageLoading ? /* @__PURE__ */ React4.createElement(Box4, { display: "flex", justifyContent: "center", p: 2 }, /* @__PURE__ */ React4.createElement(CircularProgress2, { size: 24 })) : dailyData.length > 0 ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Typography4, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Daily Spend"), /* @__PURE__ */ React4.createElement(Box4, { height: 160, mb: 2 }, /* @__PURE__ */ React4.createElement(ResponsiveContainer2, { width: "100%", height: "100%" }, /* @__PURE__ */ React4.createElement(AreaChart2, { data: dailyData }, /* @__PURE__ */ React4.createElement(CartesianGrid2, { strokeDasharray: "3 3", stroke: gridStroke }), /* @__PURE__ */ React4.createElement(XAxis2, { dataKey: "date", tick: { fontSize: 11, fill: tickFill } }), /* @__PURE__ */ React4.createElement(YAxis2, { tick: { fontSize: 11, fill: tickFill }, tickFormatter: (v) => `$${v.toFixed(2)}` }), /* @__PURE__ */ React4.createElement(Tooltip2, { formatter: (v) => [`$${v.toFixed(4)}`, "Spend"] }), /* @__PURE__ */ React4.createElement(Area2, { type: "monotone", dataKey: "spend", stroke: "#8884d8", fill: "#8884d8", fillOpacity: 0.3 })))), /* @__PURE__ */ React4.createElement(Divider, { sx: { mb: 2 } })) : null, /* @__PURE__ */ React4.createElement(Box4, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ React4.createElement(Memory, { fontSize: "small", color: "action" }), /* @__PURE__ */ React4.createElement(Typography4, { variant: "subtitle2", color: "text.secondary" }, "Members")), team.members_with_roles?.length ? /* @__PURE__ */ React4.createElement(TableContainer3, null, /* @__PURE__ */ React4.createElement(Table3, { size: "small" }, /* @__PURE__ */ React4.createElement(TableHead3, null, /* @__PURE__ */ React4.createElement(TableRow3, null, /* @__PURE__ */ React4.createElement(TableCell3, null, "User"), /* @__PURE__ */ React4.createElement(TableCell3, null, "Role"))), /* @__PURE__ */ React4.createElement(TableBody3, null, team.members_with_roles.map((m) => /* @__PURE__ */ React4.createElement(TableRow3, { key: m.user_id }, /* @__PURE__ */ React4.createElement(TableCell3, null, m.user_email ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Typography4, { variant: "body2" }, m.user_email), /* @__PURE__ */ React4.createElement(
+        Typography4,
+        {
+          variant: "caption",
+          color: "text.secondary",
+          sx: { fontFamily: "monospace" }
+        },
+        m.user_id
+      )) : /* @__PURE__ */ React4.createElement(Typography4, { variant: "body2", sx: { fontFamily: "monospace" } }, m.user_id)), /* @__PURE__ */ React4.createElement(TableCell3, null, /* @__PURE__ */ React4.createElement(
         Chip4,
         {
           label: m.role,
@@ -1401,6 +1450,7 @@ var init_LiteLLMPage = __esm({
         () => api.getTeams().catch(() => []),
         [api]
       );
+      const { value: liteLlmConfig } = useAsync2(() => api.getConfig(), [api]);
       const teams = useMemo3(() => {
         if (!allTeams?.length) return [];
         if (!userInfo) return allTeams;
@@ -1452,10 +1502,15 @@ var init_LiteLLMPage = __esm({
       }, [allModels, userInfo, teams]);
       const handleGenerateKey = useCallback2(
         async (request) => {
-          const response = await api.generateKey(request);
-          setSnackbar({ message: "Key generated successfully", severity: "success" });
-          refreshKeys();
-          return response;
+          try {
+            const response = await api.generateKey(request);
+            setSnackbar({ message: "Key generated successfully", severity: "success" });
+            refreshKeys();
+            return response;
+          } catch (e) {
+            setSnackbar({ message: `Failed to generate key: ${e.message}`, severity: "error" });
+            throw e;
+          }
         },
         [api, refreshKeys]
       );
@@ -1574,6 +1629,8 @@ var init_LiteLLMPage = __esm({
           keys: keys ?? [],
           models: allowedModels,
           teams: teams ?? [],
+          username: userInfo.user_id,
+          keyGenerationSettings: liteLlmConfig?.keyGeneration,
           loading: keysLoading || modelsLoading,
           onGenerateKey: handleGenerateKey,
           onUpdateKey: handleUpdateKey,