@acarmisc/backstage-plugin-litellm 0.3.0 → 0.3.2

package/dist/index.cjs.js

@@ -165,7 +165,7 @@ var init_DashboardHeader = __esm({
 });
 
 // src/components/KeysTable.tsx
-var import_react2, import_material2, import_icons_material2, maskKey, formatDate, emptyForm, keyToEditForm, KeysTable;
+var import_react2, import_material2, import_icons_material2, maskKey, shortKeyId, formatDate, emptyForm, keyToEditForm, KeysTable;
 var init_KeysTable = __esm({
   "src/components/KeysTable.tsx"() {
     "use strict";
@@ -176,6 +176,11 @@ var init_KeysTable = __esm({
       if (key.length <= 8) return "***";
       return `${key.slice(0, 4)}...${key.slice(-4)}`;
     };
+    shortKeyId = (token) => {
+      if (!token) return "-";
+      if (token.length <= 16) return token;
+      return `${token.slice(0, 12)}\u2026`;
+    };
     formatDate = (dateStr) => {
       try {
         return new Date(dateStr).toLocaleDateString();
@@ -187,7 +192,7 @@ var init_KeysTable = __esm({
       alias: "",
       models: [],
       duration: "30d",
-      max_budget: void 0,
+      max_budget: 100,
       tpm_limit: void 0,
       team_id: void 0,
       key_type: "llm_api"
@@ -209,16 +214,9 @@ var init_KeysTable = __esm({
       onDeleteKey
     }) => {
       const [generateModalOpen, setGenerateModalOpen] = (0, import_react2.useState)(false);
-      const [showKeyValue, setShowKeyValue] = (0, import_react2.useState)(null);
       const [newKeyValue, setNewKeyValue] = (0, import_react2.useState)(null);
       const [formData, setFormData] = (0, import_react2.useState)(emptyForm());
       const [submitting, setSubmitting] = (0, import_react2.useState)(false);
-      (0, import_react2.useEffect)(() => {
-        if (!generateModalOpen) return;
-        if (!formData.team_id && teams.length > 0) {
-          setFormData((f) => ({ ...f, team_id: teams[0].team_id }));
-        }
-      }, [generateModalOpen, teams, formData.team_id]);
       const canGenerate = true;
       const [editingKey, setEditingKey] = (0, import_react2.useState)(null);
       const [editForm, setEditForm] = (0, import_react2.useState)({});
@@ -232,10 +230,6 @@ var init_KeysTable = __esm({
           const response = await onGenerateKey(formData);
           setNewKeyValue(response.key);
           setFormData(emptyForm());
-          setTimeout(() => {
-            setGenerateModalOpen(false);
-            setNewKeyValue(null);
-          }, 1500);
         } catch (error) {
           console.error("Failed to generate key:", error);
         } finally {
@@ -279,32 +273,26 @@ var init_KeysTable = __esm({
           onClick: () => setGenerateModalOpen(true)
         },
         "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"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Created"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Spend"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Budget"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "TPM Limit"), /* @__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 }))) : keys.length === 0 ? /* @__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.Typography, { color: "text.secondary" }, "No keys found"))) : keys.map((key) => /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, { key: key.key }, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, key.key_alias || "-"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.Typography,
-        {
-          variant: "body2",
-          component: "code",
-          color: "primary",
-          sx: {
-            fontFamily: "monospace",
-            backgroundColor: "background.default",
-            px: 1,
-            py: 0.5,
-            borderRadius: 1,
-            maxWidth: "250px",
-            overflow: "hidden",
-            textOverflow: "ellipsis"
-          }
-        },
-        showKeyValue === key.key ? key.key : maskKey(key.key)
-      ), /* @__PURE__ */ import_react2.default.createElement(
-        import_material2.IconButton,
-        {
-          size: "small",
-          onClick: () => setShowKeyValue(showKeyValue === key.key ? null : key.key)
-        },
-        showKeyValue === key.key ? /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.VisibilityOff, null) : /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Visibility, null)
-      ), /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { size: "small", onClick: () => copyToClipboard(key.key) }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.ContentCopy, { fontSize: "small" })))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, formatDate(key.created_at)), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "$", key.spend?.toFixed(4) || "0.00"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, key.max_budget ? `$${key.max_budget}` : "-"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, key.tpm_limit || "-"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", gap: 0.5, flexWrap: "wrap" }, key.models?.slice(0, 2).map((model) => /* @__PURE__ */ import_react2.default.createElement(import_material2.Chip, { key: model, label: model, size: "small" })), (key.models?.length || 0) > 2 && /* @__PURE__ */ import_react2.default.createElement(import_material2.Chip, { label: `+${(key.models?.length || 0) - 2}`, size: "small", variant: "outlined" }))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { align: "right" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { onClick: () => handleOpenEdit(key) }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Edit, { fontSize: "small" })), /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { color: "error", onClick: () => onDeleteKey(key.key) }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Delete, null))))))))), /* @__PURE__ */ import_react2.default.createElement(import_material2.Dialog, { open: generateModalOpen, onClose: handleCloseModal, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogTitle, null, newKeyValue ? "Key Generated" : "Generate New Key"), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogContent, null, newKeyValue ? /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "text.secondary", gutterBottom: true }, "Copy this key now. You won't be able to see it again."), /* @__PURE__ */ import_react2.default.createElement(
+      )), /* @__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, "Spend"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Budget"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "TPM Limit"), /* @__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 }))) : keys.length === 0 ? /* @__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.Typography, { color: "text.secondary" }, "No keys found"))) : keys.map((key) => {
+        const keyId = key.token ?? key.key;
+        return /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, { key: keyId }, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, key.key_alias || "-"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ import_react2.default.createElement(
+          import_material2.Typography,
+          {
+            variant: "body2",
+            component: "code",
+            color: "text.secondary",
+            title: keyId,
+            sx: {
+              fontFamily: "monospace",
+              backgroundColor: "background.default",
+              px: 1,
+              py: 0.5,
+              borderRadius: 1
+            }
+          },
+          shortKeyId(keyId)
+        ), /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { size: "small", onClick: () => copyToClipboard(keyId), title: "Copy Key ID" }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.ContentCopy, { fontSize: "small" })))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, formatDate(key.created_at)), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "$", key.spend?.toFixed(4) || "0.00"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, key.max_budget ? `$${key.max_budget}` : "-"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, key.tpm_limit || "-"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", gap: 0.5, flexWrap: "wrap" }, key.models?.slice(0, 2).map((model) => /* @__PURE__ */ import_react2.default.createElement(import_material2.Chip, { key: model, label: model, size: "small" })), (key.models?.length || 0) > 2 && /* @__PURE__ */ import_react2.default.createElement(import_material2.Chip, { label: `+${(key.models?.length || 0) - 2}`, size: "small", variant: "outlined" }))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { align: "right" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { onClick: () => handleOpenEdit(key) }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Edit, { fontSize: "small" })), /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { color: "error", onClick: () => onDeleteKey(key.key) }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Delete, null))));
+      }))))), /* @__PURE__ */ import_react2.default.createElement(import_material2.Dialog, { open: generateModalOpen, onClose: handleCloseModal, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogTitle, null, newKeyValue ? "Key Generated" : "Generate New Key"), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogContent, null, newKeyValue ? /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "text.secondary", gutterBottom: true }, "Copy this key now. You won't be able to see it again."), /* @__PURE__ */ import_react2.default.createElement(
         import_material2.Box,
         {
           display: "flex",
@@ -313,7 +301,9 @@ var init_KeysTable = __esm({
           mt: 2,
           p: 2,
           sx: {
-            backgroundColor: "grey.100",
+            backgroundColor: "action.hover",
+            border: "1px solid",
+            borderColor: "divider",
             borderRadius: 1
           }
         },
@@ -333,6 +323,7 @@ var init_KeysTable = __esm({
           label: "Alias",
           value: formData.alias || "",
           onChange: (e) => setFormData({ ...formData, alias: e.target.value }),
+          required: true,
           fullWidth: true
         }
       ), /* @__PURE__ */ import_react2.default.createElement(
@@ -376,7 +367,7 @@ var init_KeysTable = __esm({
           value: selectedModels,
           onChange: (_e, selected) => setFormData({ ...formData, models: selected.map((m) => m.model_name) }),
           renderOption: (props, m) => /* @__PURE__ */ import_react2.default.createElement("li", { ...props }, m.model_name, m.supports_function_calling && " \u{1F527}", m.supports_vision && " \u{1F441}\uFE0F"),
-          renderInput: (params) => /* @__PURE__ */ import_react2.default.createElement(import_material2.TextField, { ...params, label: "Models", fullWidth: true })
+          renderInput: (params) => /* @__PURE__ */ import_react2.default.createElement(import_material2.TextField, { ...params, label: "Models", helperText: "Leave empty to allow all models", fullWidth: true })
         }
       ), /* @__PURE__ */ import_react2.default.createElement(
         import_material2.TextField,
@@ -385,6 +376,7 @@ var init_KeysTable = __esm({
           type: "number",
           value: formData.max_budget ?? "",
           onChange: (e) => setFormData({ ...formData, max_budget: e.target.value ? Number(e.target.value) : void 0 }),
+          required: true,
           fullWidth: true
         }
       ), /* @__PURE__ */ import_react2.default.createElement(