@acarmisc/backstage-plugin-litellm 0.33.0 → 0.35.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { litellmPlugin } from './plugin';
+export { litellmPlugin, litellmPlugin as default } from './plugin';
 export { LiteLLMPage } from './components/LiteLLMPage';
 export { DashboardHeader } from './components/DashboardHeader';
 export { KeysTable } from './components/KeysTable';
@@ -14,9 +14,8 @@ export { KeyFormDialog } from './components/KeyFormDialog';
 export type { KeyFormDialogMode, KeyFormDialogProps } from './components/KeyFormDialog';
 export { GenerateKeyButton } from './components/GenerateKeyButton';
 export type { GenerateKeyButtonProps } from './components/GenerateKeyButton';
-export { GenerateKeyDialog } from './components/GenerateKeyDialog';
 export { ManageTeamDialog } from './components/ManageTeamDialog';
 export { LiteLlmApi, liteLlmApiRef } from './api';
-export { litellmTeamCreatePermission, litellmTeamManagePermission, litellmTeamMembersManagePermission, litellmTeamKnowledgebaseManagePermission, litellmTeamMcpManagePermission, } from './permissions';
+export { litellmTeamCreatePermission, litellmTeamManagePermission, litellmTeamMembersManagePermission, litellmTeamKnowledgebaseManagePermission, litellmTeamMcpManagePermission, } from '@acarmisc/backstage-plugin-litellm-common';
 export type { LiteLlmApiInterface } from './api';
 export * from './types';

package/dist/index.esm.js

@@ -285,6 +285,12 @@ var init_api = __esm({
           end_date: endDate
         });
       }
+      async getTeamMemberUsage(teamId, startDate, endDate) {
+        return this.get(`/teams/${encodeURIComponent(teamId)}/usage/members`, {
+          start_date: startDate,
+          end_date: endDate
+        });
+      }
       async getConfig() {
         return this.get("/config");
       }
@@ -1823,8 +1829,6 @@ var init_KeysTable = __esm({
         setPruneSubmitting(true);
         try {
           await onPruneExpiredKeys();
-        } catch (error) {
-          console.error("Failed to prune expired keys:", error);
         } finally {
           setPruneSubmitting(false);
           setPruneConfirmCount(null);
@@ -1893,7 +1897,8 @@ var init_KeysTable = __esm({
                         bgcolor: alpha7(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.08 : 0.05),
                         px: 0.75,
                         py: 0.375,
-                        borderRadius: "5px"
+                        borderRadius: "5px",
+                        whiteSpace: "nowrap"
                       }),
                       children: shortKeyId(keyId)
                     }
@@ -5011,13 +5016,49 @@ function budgetStatValue(hidden, budget) {
   if (budget > 0) return fmtUsd2(budget);
   return "Unlimited";
 }
-var fmtUsd2, TeamCard, TeamUsage;
+var fmtUsd2, monoSx, MemberUsageTable, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
     "use strict";
     init_ui();
     fmtUsd2 = (n) => `$${(n ?? 0).toFixed(2)}`;
-    TeamCard = ({ team, usage, usageLoading, canManage, onEditTeam, canManageMembers, onManageMembers, onExpand }) => {
+    monoSx = { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 };
+    MemberUsageTable = ({ usage }) => {
+      const hidden = usage.budget_hidden === true;
+      if (!usage.members.length) {
+        return /* @__PURE__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", children: "No members or activity in this period." });
+      }
+      return /* @__PURE__ */ jsx15(TableContainer4, { component: Paper8, variant: "outlined", sx: { borderRadius: 1.5 }, children: /* @__PURE__ */ jsxs14(Table4, { size: "small", sx: dataTableSx, "aria-label": "Usage by member", children: [
+        /* @__PURE__ */ jsx15(TableHead4, { children: /* @__PURE__ */ jsxs14(TableRow4, { children: [
+          /* @__PURE__ */ jsx15(TableCell4, { children: "Member" }),
+          !hidden && /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Spend" }),
+          /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Share" }),
+          /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Tokens" }),
+          /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Requests" }),
+          /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Success" }),
+          /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Keys" })
+        ] }) }),
+        /* @__PURE__ */ jsx15(TableBody4, { children: usage.members.map((m) => {
+          const name = m.display_name ?? m.user_email ?? m.user_id;
+          let sub = null;
+          if (m.display_name) sub = m.user_email ?? m.user_id;
+          else if (m.user_email && m.user_id !== m.user_email) sub = m.user_id;
+          return /* @__PURE__ */ jsxs14(TableRow4, { children: [
+            /* @__PURE__ */ jsx15(TableCell4, { children: m.user_id === null ? /* @__PURE__ */ jsx15(MuiTooltip, { title: "Activity of keys that were deleted or have no owner", children: /* @__PURE__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", sx: { fontStyle: "italic" }, children: "Unattributed" }) }) : /* @__PURE__ */ jsxs14(Fragment8, { children: [
+              /* @__PURE__ */ jsx15(Typography12, { variant: "body2", children: name }),
+              sub && /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", sx: monoSx, children: sub })
+            ] }) }),
+            !hidden && /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: fmtUsd2(m.spend) }),
+            /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: `${m.spend_share_pct.toFixed(m.spend_share_pct > 0 && m.spend_share_pct < 1 ? 1 : 0)}%` }),
+            /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: fmtCompact(m.total_tokens) }),
+            /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: m.api_requests.toLocaleString() }),
+            /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: m.success_rate === null ? "\u2014" : `${m.success_rate.toFixed(0)}%` }),
+            /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: m.user_id === null ? "\u2014" : m.key_count })
+          ] }, m.user_id ?? "__unattributed");
+        }) })
+      ] }) });
+    };
+    TeamCard = ({ team, usage, usageLoading, memberUsage, memberUsageLoading, canManage, onEditTeam, canManageMembers, onManageMembers, onExpand }) => {
       const [expanded, setExpanded] = useState9(false);
       const chart = useChartTheme();
       const handleExpandChange = (newExpanded) => {
@@ -5210,6 +5251,10 @@ var init_TeamUsage = __esm({
             team.models?.length ? /* @__PURE__ */ jsx15(Box14, { display: "flex", gap: 0.5, flexWrap: "wrap", children: team.models.map((m) => /* @__PURE__ */ jsx15(TagChip, { label: m, title: m }, m)) }) : /* @__PURE__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", children: "All models allowed" })
           ] }),
           renderDailySpendSection(),
+          (memberUsageLoading || memberUsage) && /* @__PURE__ */ jsxs14(Box14, { mb: 2.5, children: [
+            sectionLabel("Usage by member"),
+            memberUsage ? /* @__PURE__ */ jsx15(MemberUsageTable, { usage: memberUsage }) : /* @__PURE__ */ jsx15(Box14, { display: "flex", justifyContent: "center", py: 2, children: /* @__PURE__ */ jsx15(CircularProgress4, { size: 22 }) })
+          ] }),
           /* @__PURE__ */ jsxs14(Box14, { children: [
             sectionLabel("Members"),
             team.members_with_roles?.length ? /* @__PURE__ */ jsx15(
@@ -5264,6 +5309,8 @@ var init_TeamUsage = __esm({
       loading,
       getTeamUsage,
       getTeamUsageLoading,
+      getTeamMemberUsage,
+      getTeamMemberUsageLoading,
       canManage,
       onEditTeam,
       canCreate,
@@ -5323,6 +5370,8 @@ var init_TeamUsage = __esm({
               team,
               usage: getTeamUsage(team.team_id),
               usageLoading: getTeamUsageLoading(team.team_id),
+              memberUsage: getTeamMemberUsage?.(team.team_id) ?? null,
+              memberUsageLoading: getTeamMemberUsageLoading?.(team.team_id) ?? false,
               canManage,
               onEditTeam,
               canManageMembers: canManageMembers?.(team),
@@ -5900,28 +5949,6 @@ var init_dates = __esm({
   }
 });
 
-// src/permissions.ts
-import {
-  litellmKeyCreatePermission,
-  litellmKeyRevokePermission as litellmKeyRevokePermission2,
-  litellmKeyManagePermission as litellmKeyManagePermission2,
-  litellmKeyResetSpendPermission as litellmKeyResetSpendPermission2,
-  litellmKeyUnblockPermission as litellmKeyUnblockPermission2,
-  litellmAuditReadPermission,
-  litellmTeamCreatePermission,
-  litellmTeamManagePermission,
-  litellmTeamMembersManagePermission,
-  litellmTeamKnowledgebaseManagePermission,
-  litellmTeamMcpManagePermission,
-  litellmTeamDeletePermission,
-  litellmPermissions
-} from "@acarmisc/backstage-plugin-litellm-common";
-var init_permissions = __esm({
-  "src/permissions.ts"() {
-    "use strict";
-  }
-});
-
 // src/feedback.ts
 function toastFor(kind, errorMsg) {
   switch (kind) {
@@ -6033,6 +6060,13 @@ import { useAsync as useAsync2, useAsyncRetry } from "react-use";
 import { useApi as useApi4, alertApiRef as alertApiRef2 } from "@backstage/core-plugin-api";
 import { Content, Progress } from "@backstage/core-components";
 import { usePermission as usePermission3 } from "@backstage/plugin-permission-react";
+import {
+  litellmTeamCreatePermission,
+  litellmTeamManagePermission,
+  litellmTeamMembersManagePermission,
+  litellmTeamKnowledgebaseManagePermission,
+  litellmTeamMcpManagePermission
+} from "@acarmisc/backstage-plugin-litellm-common";
 import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 function initDateRange() {
   let preset = "7d";
@@ -6063,7 +6097,6 @@ var init_LiteLLMPage = __esm({
     init_AuditLog();
     init_api();
     init_dates();
-    init_permissions();
     init_feedback();
     init_teamMemberManager();
     init_unprovisionedCopy();
@@ -6151,6 +6184,8 @@ var init_LiteLLMPage = __esm({
       const keyFormOpen = generateDialogOpen || !!keyToEdit;
       const [teamUsageCache, setTeamUsageCache] = useState12({});
       const [teamUsageLoading, setTeamUsageLoading] = useState12({});
+      const [memberUsageCache, setMemberUsageCache] = useState12({});
+      const [memberUsageLoading, setMemberUsageLoading] = useState12({});
       const { value: userInfo, loading: userLoading, error: userError } = useAsync2(
         () => api.getUserInfo(),
         [api]
@@ -6211,6 +6246,8 @@ var init_LiteLLMPage = __esm({
         }
         setTeamUsageCache({});
         setTeamUsageLoading({});
+        setMemberUsageCache({});
+        setMemberUsageLoading({});
       }, [setDateRange, setCurrentPreset]);
       const loadTeamUsage = useCallback4(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
@@ -6226,6 +6263,20 @@ var init_LiteLLMPage = __esm({
           setTeamUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
       }, [api, dateRange, teamUsageCache, teamUsageLoading]);
+      const loadMemberUsage = useCallback4(async (teamId) => {
+        if (memberUsageCache[teamId] !== void 0 || memberUsageLoading[teamId]) return;
+        setMemberUsageLoading((prev) => ({ ...prev, [teamId]: true }));
+        try {
+          const startDate = toLocalDay(dateRange.start);
+          const endDate = toLocalDay(dateRange.end);
+          const data = await api.getTeamMemberUsage(teamId, startDate, endDate);
+          setMemberUsageCache((prev) => ({ ...prev, [teamId]: data }));
+        } catch {
+          setMemberUsageCache((prev) => ({ ...prev, [teamId]: null }));
+        } finally {
+          setMemberUsageLoading((prev) => ({ ...prev, [teamId]: false }));
+        }
+      }, [api, dateRange, memberUsageCache, memberUsageLoading]);
       const allowedModels = useMemo9(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
@@ -6520,6 +6571,8 @@ var init_LiteLLMPage = __esm({
                 loading: teamsLoading,
                 getTeamUsage: (teamId) => teamUsageCache[teamId] ?? null,
                 getTeamUsageLoading: (teamId) => teamUsageLoading[teamId] ?? false,
+                getTeamMemberUsage: (teamId) => memberUsageCache[teamId] ?? null,
+                getTeamMemberUsageLoading: (teamId) => memberUsageLoading[teamId] ?? false,
                 canManage: teamMgmtEnabled && canManageTeam && !readOnly,
                 onEditTeam: (t) => setManageTeam({ mode: "edit", team: t }),
                 canCreate: teamMgmtEnabled && canCreateTeam && !readOnly,
@@ -6527,7 +6580,10 @@ var init_LiteLLMPage = __esm({
                 canManageMembers: (t) => teamMgmtEnabled && canManageMembers && isTeamMemberManager(t, userInfo?.user_id, memberManagerRoles, readOnly),
                 onManageMembers: (t) => setManageTeam({ mode: "members", team: t }),
                 readOnly,
-                onTeamExpand: (team) => loadTeamUsage(team.team_id)
+                onTeamExpand: (team) => {
+                  loadTeamUsage(team.team_id);
+                  if (liteLlmConfig?.teamUsage?.memberBreakdown) loadMemberUsage(team.team_id);
+                }
               }
             );
           })(),
@@ -7616,36 +7672,18 @@ var LiteLLMBudgetGauges = ({
 // src/index.ts
 init_KeyFormDialog();
 init_GenerateKeyButton();
-
-// src/components/GenerateKeyDialog.tsx
-init_KeyFormDialog();
-import { jsx as jsx22 } from "react/jsx-runtime";
-var GenerateKeyDialog = (props) => /* @__PURE__ */ jsx22(
-  KeyFormDialog,
-  {
-    open: props.open,
-    onClose: props.onClose,
-    mode: "create",
-    keys: props.keys,
-    models: props.models,
-    teams: props.teams,
-    username: props.username,
-    keyGenerationSettings: props.keyGenerationSettings,
-    onCreateKey: props.onGenerateKey,
-    onUpdateKey: async () => {
-    },
-    onGetConfig: props.onGetConfig
-  }
-);
-
-// src/index.ts
 init_ManageTeamDialog();
 init_api();
-init_permissions();
+import {
+  litellmTeamCreatePermission as litellmTeamCreatePermission2,
+  litellmTeamManagePermission as litellmTeamManagePermission2,
+  litellmTeamMembersManagePermission as litellmTeamMembersManagePermission2,
+  litellmTeamKnowledgebaseManagePermission as litellmTeamKnowledgebaseManagePermission2,
+  litellmTeamMcpManagePermission as litellmTeamMcpManagePermission2
+} from "@acarmisc/backstage-plugin-litellm-common";
 export {
   DashboardHeader,
   GenerateKeyButton,
-  GenerateKeyDialog,
   KeyFormDialog,
   KeysTable,
   LiteLLMBudgetGauges,
@@ -7656,12 +7694,13 @@ export {
   ManageTeamDialog,
   TeamUsage,
   UsageStats,
+  litellmPlugin as default,
   liteLlmApiRef,
   litellmPlugin,
-  litellmTeamCreatePermission,
-  litellmTeamKnowledgebaseManagePermission,
-  litellmTeamManagePermission,
-  litellmTeamMcpManagePermission,
-  litellmTeamMembersManagePermission
+  litellmTeamCreatePermission2 as litellmTeamCreatePermission,
+  litellmTeamKnowledgebaseManagePermission2 as litellmTeamKnowledgebaseManagePermission,
+  litellmTeamManagePermission2 as litellmTeamManagePermission,
+  litellmTeamMcpManagePermission2 as litellmTeamMcpManagePermission,
+  litellmTeamMembersManagePermission2 as litellmTeamMembersManagePermission
 };
 //# sourceMappingURL=index.esm.js.map