@acarmisc/backstage-plugin-litellm 0.34.0 → 0.35.0

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");
       }
@@ -5010,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) => {
@@ -5209,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(
@@ -5263,6 +5309,8 @@ var init_TeamUsage = __esm({
       loading,
       getTeamUsage,
       getTeamUsageLoading,
+      getTeamMemberUsage,
+      getTeamMemberUsageLoading,
       canManage,
       onEditTeam,
       canCreate,
@@ -5322,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),
@@ -6134,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]
@@ -6194,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;
@@ -6209,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;
@@ -6503,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,
@@ -6510,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);
+                }
               }
             );
           })(),