@acarmisc/backstage-plugin-litellm 0.10.1 → 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

@@ -72,7 +72,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) {
@@ -275,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";
@@ -288,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;
@@ -321,6 +327,8 @@ var init_KeysTable = __esm({
       keys,
       models,
       teams,
+      username,
+      keyGenerationSettings,
       loading,
       onGenerateKey,
       onUpdateKey,
@@ -354,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);
@@ -392,6 +411,10 @@ var init_KeysTable = __esm({
           setSubmitting(false);
         }
       };
+      const handleOpenGenerate = () => {
+        setFormData({ ...emptyForm(), alias: generateDefaultAlias(username) });
+        setGenerateModalOpen(true);
+      };
       const handleCloseModal = () => {
         setGenerateModalOpen(false);
         setNewKeyValue(null);
@@ -509,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(
@@ -519,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) => {
@@ -609,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(
@@ -677,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(
@@ -686,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(
@@ -733,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(
@@ -742,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(
@@ -1104,7 +1145,15 @@ var init_TeamUsage = __esm({
           color: isOver ? "error" : isNear ? "warning" : "primary",
           sx: { height: 6, borderRadius: 1 }
         }
-      )), /* @__PURE__ */ import_react4.default.createElement(import_material4.Collapse, { in: expanded }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { mt: 2 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material2.Speed, { fontSize: "small", color: "action" }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary" }, "Rate limits")), /* @__PURE__ */ import_react4.default.createElement(import_material4.Stack, { direction: "row", spacing: 3, flexWrap: "wrap", useFlexGap: true, gap: 1.5, mb: 2 }, /* @__PURE__ */ import_react4.default.createElement(Stat, { label: "TPM limit", value: team.tpm_limit != null && team.tpm_limit > 0 ? String(team.tpm_limit) : "Unlimited" }), /* @__PURE__ */ import_react4.default.createElement(Stat, { label: "RPM limit", value: team.rpm_limit != null && team.rpm_limit > 0 ? String(team.rpm_limit) : "Unlimited" }), /* @__PURE__ */ import_react4.default.createElement(Stat, { label: "Max budget", value: budget > 0 ? `$${budget.toFixed(2)}` : "Unlimited" })), /* @__PURE__ */ import_react4.default.createElement(import_material4.Divider, { sx: { mb: 2 } }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Models"), team.models?.length ? /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", gap: 0.5, flexWrap: "wrap", mb: 2 }, team.models.map((m) => /* @__PURE__ */ import_react4.default.createElement(import_material4.Chip, { key: m, label: m, size: "small", variant: "outlined" }))) : /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "body2", color: "text.secondary", mb: 2 }, "All models allowed"), /* @__PURE__ */ import_react4.default.createElement(import_material4.Divider, { sx: { mb: 2 } }), usageLoading ? /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", justifyContent: "center", p: 2 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.CircularProgress, { size: 24 })) : dailyData.length > 0 ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Daily Spend"), /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { height: 160, mb: 2 }, /* @__PURE__ */ import_react4.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts2.AreaChart, { data: dailyData }, /* @__PURE__ */ import_react4.default.createElement(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }), /* @__PURE__ */ import_react4.default.createElement(import_recharts2.XAxis, { dataKey: "date", tick: { fontSize: 11, fill: tickFill } }), /* @__PURE__ */ import_react4.default.createElement(import_recharts2.YAxis, { tick: { fontSize: 11, fill: tickFill }, tickFormatter: (v) => `$${v.toFixed(2)}` }), /* @__PURE__ */ import_react4.default.createElement(import_recharts2.Tooltip, { formatter: (v) => [`$${v.toFixed(4)}`, "Spend"] }), /* @__PURE__ */ import_react4.default.createElement(import_recharts2.Area, { type: "monotone", dataKey: "spend", stroke: "#8884d8", fill: "#8884d8", fillOpacity: 0.3 })))), /* @__PURE__ */ import_react4.default.createElement(import_material4.Divider, { sx: { mb: 2 } })) : null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material2.Memory, { fontSize: "small", color: "action" }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary" }, "Members")), team.members_with_roles?.length ? /* @__PURE__ */ import_react4.default.createElement(import_material4.TableContainer, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Table, { size: "small" }, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableHead, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableRow, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, "User"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, "Role"))), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableBody, null, team.members_with_roles.map((m) => /* @__PURE__ */ import_react4.default.createElement(import_material4.TableRow, { key: m.user_id }, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { sx: { fontFamily: "monospace", fontSize: 12 } }, m.user_id), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, /* @__PURE__ */ import_react4.default.createElement(
+      )), /* @__PURE__ */ import_react4.default.createElement(import_material4.Collapse, { in: expanded }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { mt: 2 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material2.Speed, { fontSize: "small", color: "action" }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary" }, "Rate limits")), /* @__PURE__ */ import_react4.default.createElement(import_material4.Stack, { direction: "row", spacing: 3, flexWrap: "wrap", useFlexGap: true, gap: 1.5, mb: 2 }, /* @__PURE__ */ import_react4.default.createElement(Stat, { label: "TPM limit", value: team.tpm_limit != null && team.tpm_limit > 0 ? String(team.tpm_limit) : "Unlimited" }), /* @__PURE__ */ import_react4.default.createElement(Stat, { label: "RPM limit", value: team.rpm_limit != null && team.rpm_limit > 0 ? String(team.rpm_limit) : "Unlimited" }), /* @__PURE__ */ import_react4.default.createElement(Stat, { label: "Max budget", value: budget > 0 ? `$${budget.toFixed(2)}` : "Unlimited" })), /* @__PURE__ */ import_react4.default.createElement(import_material4.Divider, { sx: { mb: 2 } }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Models"), team.models?.length ? /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", gap: 0.5, flexWrap: "wrap", mb: 2 }, team.models.map((m) => /* @__PURE__ */ import_react4.default.createElement(import_material4.Chip, { key: m, label: m, size: "small", variant: "outlined" }))) : /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "body2", color: "text.secondary", mb: 2 }, "All models allowed"), /* @__PURE__ */ import_react4.default.createElement(import_material4.Divider, { sx: { mb: 2 } }), usageLoading ? /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", justifyContent: "center", p: 2 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.CircularProgress, { size: 24 })) : dailyData.length > 0 ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Daily Spend"), /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { height: 160, mb: 2 }, /* @__PURE__ */ import_react4.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts2.AreaChart, { data: dailyData }, /* @__PURE__ */ import_react4.default.createElement(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }), /* @__PURE__ */ import_react4.default.createElement(import_recharts2.XAxis, { dataKey: "date", tick: { fontSize: 11, fill: tickFill } }), /* @__PURE__ */ import_react4.default.createElement(import_recharts2.YAxis, { tick: { fontSize: 11, fill: tickFill }, tickFormatter: (v) => `$${v.toFixed(2)}` }), /* @__PURE__ */ import_react4.default.createElement(import_recharts2.Tooltip, { formatter: (v) => [`$${v.toFixed(4)}`, "Spend"] }), /* @__PURE__ */ import_react4.default.createElement(import_recharts2.Area, { type: "monotone", dataKey: "spend", stroke: "#8884d8", fill: "#8884d8", fillOpacity: 0.3 })))), /* @__PURE__ */ import_react4.default.createElement(import_material4.Divider, { sx: { mb: 2 } })) : null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material2.Memory, { fontSize: "small", color: "action" }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary" }, "Members")), team.members_with_roles?.length ? /* @__PURE__ */ import_react4.default.createElement(import_material4.TableContainer, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Table, { size: "small" }, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableHead, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableRow, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, "User"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, "Role"))), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableBody, null, team.members_with_roles.map((m) => /* @__PURE__ */ import_react4.default.createElement(import_material4.TableRow, { key: m.user_id }, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, m.user_email ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "body2" }, m.user_email), /* @__PURE__ */ import_react4.default.createElement(
+        import_material4.Typography,
+        {
+          variant: "caption",
+          color: "text.secondary",
+          sx: { fontFamily: "monospace" }
+        },
+        m.user_id
+      )) : /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "body2", sx: { fontFamily: "monospace" } }, m.user_id)), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, /* @__PURE__ */ import_react4.default.createElement(
         import_material4.Chip,
         {
           label: m.role,
@@ -1317,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;
@@ -1368,10 +1418,15 @@ var init_LiteLLMPage = __esm({
       }, [allModels, userInfo, teams]);
       const handleGenerateKey = (0, import_react6.useCallback)(
         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]
       );
@@ -1490,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,