@acarmisc/backstage-plugin-litellm 0.10.2 → 0.11.0

package/dist/components/KeysTable.d.ts

@@ -4,6 +4,13 @@ interface KeysTableProps {
     keys: VirtualKey[];
     models: ModelInfo[];
     teams: TeamInfo[];
+    /** Current user's LiteLLM user id, used to pre-fill a default key alias. */
+    username?: string;
+    /** Controls for the "Generate New Key" form; see litellm.keyGeneration in app-config.yaml. */
+    keyGenerationSettings?: {
+        allowUnlimitedBudget: boolean;
+        teamRequired: boolean;
+    };
     loading: boolean;
     onGenerateKey: (request: GenerateKeyRequest) => Promise<GenerateKeyResponse>;
     onUpdateKey: (keyId: string, request: UpdateKeyRequest) => Promise<void>;

package/dist/index.cjs.js

@@ -276,7 +276,7 @@ response = client.chat.completions.create(
 print(response.choices[0].message.content)`
   };
 }
-var import_react2, import_material2, import_icons_material, maskKey, shortKeyId, formatDate, emptyForm, keyToEditForm, KeysTable, SnippetTabs;
+var import_react2, import_material2, import_icons_material, maskKey, generateDefaultAlias, shortKeyId, formatDate, emptyForm, keyToEditForm, KeysTable, SnippetTabs;
 var init_KeysTable = __esm({
   "src/components/KeysTable.tsx"() {
     "use strict";
@@ -289,6 +289,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;
@@ -322,6 +327,8 @@ var init_KeysTable = __esm({
       keys,
       models,
       teams,
+      username,
+      keyGenerationSettings,
       loading,
       onGenerateKey,
       onUpdateKey,
@@ -355,12 +362,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 = (0, import_react2.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 = (0, import_react2.useMemo)(() => {
         if (unlimitedBudget || budgetInvalid) return null;
         const inputCosts = selectedModels.map((m) => m.input_cost_per_token).filter((c) => typeof c === "number" && c > 0);
@@ -393,6 +411,10 @@ var init_KeysTable = __esm({
           setSubmitting(false);
         }
       };
+      const handleOpenGenerate = () => {
+        setFormData({ ...emptyForm(), alias: generateDefaultAlias(username) });
+        setGenerateModalOpen(true);
+      };
       const handleCloseModal = () => {
         setGenerateModalOpen(false);
         setNewKeyValue(null);
@@ -510,7 +532,7 @@ var init_KeysTable = __esm({
           variant: "contained",
           color: "primary",
           startIcon: /* @__PURE__ */ import_react2.default.createElement(import_icons_material.Add, null),
-          onClick: () => setGenerateModalOpen(true)
+          onClick: handleOpenGenerate
         },
         "Generate New Key"
       ))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableContainer, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Table, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableHead, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Alias"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Key ID"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Created"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Expires"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Budget"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "TPM / RPM"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Models"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { align: "right" }, "Actions"))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableBody, null, loading ? /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { colSpan: 8, align: "center" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 24 }))) : filteredKeys.length === 0 ? /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { colSpan: 8, align: "center", sx: { py: 4 } }, filterText ? /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { color: "text.secondary" }, "No keys match filter") : /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { color: "text.secondary", gutterBottom: true }, "No keys yet \u2014 generate your first key to start calling models."), /* @__PURE__ */ import_react2.default.createElement(
@@ -520,7 +542,7 @@ var init_KeysTable = __esm({
           color: "primary",
           size: "small",
           startIcon: /* @__PURE__ */ import_react2.default.createElement(import_icons_material.Add, null),
-          onClick: () => setGenerateModalOpen(true)
+          onClick: handleOpenGenerate
         },
         "Generate Your First Key"
       )))) : filteredKeys.map((key) => {
@@ -610,36 +632,50 @@ var init_KeysTable = __esm({
         /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { value: "30d" }, "30 Days"),
         /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { value: "90d" }, "90 Days"),
         /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { value: "1y" }, "1 Year")
-      ), teams.length > 0 && /* @__PURE__ */ import_react2.default.createElement(
+      ), teams.length > 0 ? /* @__PURE__ */ import_react2.default.createElement(
         import_material2.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__ */ import_react2.default.createElement(
             import_material2.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__ */ import_react2.default.createElement(
+      ) : teamRequired ? /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { 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__ */ import_react2.default.createElement(
         import_material2.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__ */ import_react2.default.createElement("li", { ...props }, modelOption(m)),
-          renderInput: (params) => /* @__PURE__ */ import_react2.default.createElement(import_material2.TextField, { ...params, label: "Models", helperText: "Leave empty to allow all models", fullWidth: true })
+          renderInput: (params) => /* @__PURE__ */ import_react2.default.createElement(
+            import_material2.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__ */ import_react2.default.createElement(
+      ), allowUnlimitedBudget && /* @__PURE__ */ import_react2.default.createElement(
         import_material2.FormControlLabel,
         {
           control: /* @__PURE__ */ import_react2.default.createElement(
@@ -678,6 +714,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__ */ import_react2.default.createElement(
@@ -687,6 +724,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__ */ import_react2.default.createElement(import_material2.DialogActions, null, newKeyValue ? /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: handleCloseModal, variant: "contained", color: "success" }, "Done") : /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: handleCloseModal }, "Cancel"), /* @__PURE__ */ import_react2.default.createElement(
@@ -734,6 +772,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__ */ import_react2.default.createElement(
@@ -743,6 +782,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__ */ import_react2.default.createElement(import_material2.Box, { mt: 1, pt: 2, borderTop: "1px solid", sx: { borderColor: "divider" } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "caption", color: "text.secondary", display: "block", mb: 1 }, "Danger Zone"), !resetSpendConfirm ? /* @__PURE__ */ import_react2.default.createElement(
@@ -1326,6 +1366,7 @@ var init_LiteLLMPage = __esm({
         () => api.getTeams().catch(() => []),
         [api]
       );
+      const { value: liteLlmConfig } = (0, import_react_use2.useAsync)(() => api.getConfig(), [api]);
       const teams = (0, import_react6.useMemo)(() => {
         if (!allTeams?.length) return [];
         if (!userInfo) return allTeams;
@@ -1504,6 +1545,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,