@acarmisc/backstage-plugin-litellm 0.43.0 → 0.44.0

package/dist/api.d.ts

@@ -1,5 +1,5 @@
 import { type FetchApi, type DiscoveryApi } from '@backstage/frontend-plugin-api';
-import { UserInfo, VirtualKey, ModelInfo, UsageMetrics, TeamMemberUsage, TeamInfo, GenerateKeyRequest, GenerateKeyResponse, UpdateKeyRequest, AuditLogsParams, PaginatedAuditLogs, SpendLogsParams, PaginatedSpendLogs, LiteLlmConfig, QualityResponse, VectorStoreInfo, McpServerInfo, CreateTeamRequest, CreateTeamResponse, UpdateTeamRequest } from './types';
+import { UserInfo, VirtualKey, ModelInfo, UsageMetrics, TeamMemberUsage, TeamKeyUsage, TeamInfo, GenerateKeyRequest, GenerateKeyResponse, UpdateKeyRequest, AuditLogsParams, PaginatedAuditLogs, SpendLogsParams, PaginatedSpendLogs, LiteLlmConfig, QualityResponse, VectorStoreInfo, McpServerInfo, CreateTeamRequest, CreateTeamResponse, UpdateTeamRequest } from './types';
 export declare class ApiError extends Error {
     body: unknown;
     status: number;
@@ -49,6 +49,8 @@ export interface LiteLlmApiInterface {
     getTeamUsage(teamId: string, startDate: string, endDate: string): Promise<UsageMetrics>;
     /** Per-member breakdown; rejects (403/404) when the caller may not see it. */
     getTeamMemberUsage(teamId: string, startDate: string, endDate: string): Promise<TeamMemberUsage>;
+    /** A team's keys with per-key usage; same access rules as the per-member breakdown. */
+    getTeamKeyUsage(teamId: string, startDate: string, endDate: string): Promise<TeamKeyUsage>;
     getAuditLogs(params: AuditLogsParams): Promise<PaginatedAuditLogs>;
     getSpendLogs(params: SpendLogsParams): Promise<PaginatedSpendLogs>;
     /** Langfuse quality summary; `{configured:false}` when Langfuse is off. */
@@ -120,6 +122,7 @@ export declare class LiteLlmApi implements LiteLlmApiInterface {
     getUsage(startDate: string, endDate: string): Promise<UsageMetrics>;
     getTeamUsage(teamId: string, startDate: string, endDate: string): Promise<UsageMetrics>;
     getTeamMemberUsage(teamId: string, startDate: string, endDate: string): Promise<TeamMemberUsage>;
+    getTeamKeyUsage(teamId: string, startDate: string, endDate: string): Promise<TeamKeyUsage>;
     getSpendLogs(params: SpendLogsParams): Promise<PaginatedSpendLogs>;
     getQuality(params: SpendLogsParams): Promise<QualityResponse>;
     getConfig(): Promise<LiteLlmConfig>;

package/dist/components/TeamUsage.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { McpServerInfo, TeamInfo, TeamMemberUsage, UsageMetrics, VectorStoreInfo } from '../types';
+import { McpServerInfo, TeamInfo, TeamKeyUsage, TeamMemberUsage, UsageMetrics, VectorStoreInfo } from '../types';
 /**
  * Per-member usage for the period, sorted by spend. Dollars are replaced by
  * the share of team spend when the backend hides them.
@@ -7,6 +7,13 @@ import { McpServerInfo, TeamInfo, TeamMemberUsage, UsageMetrics, VectorStoreInfo
 export declare const MemberUsageTable: FC<{
     usage: TeamMemberUsage;
 }>;
+/**
+ * A team's keys with the period's usage, for team leads. The backend never
+ * sends secrets; dollars are dropped when it hides them.
+ */
+export declare const TeamKeyUsageTable: FC<{
+    usage: TeamKeyUsage;
+}>;
 interface TeamUsageProps {
     teams: TeamInfo[];
     loading: boolean;
@@ -15,6 +22,9 @@ interface TeamUsageProps {
     /** Per-member breakdown for a team; null hides the section. */
     getTeamMemberUsage?: (teamId: string) => TeamMemberUsage | null;
     getTeamMemberUsageLoading?: (teamId: string) => boolean;
+    /** Per-key usage for a team; null hides the section. */
+    getTeamKeyUsage?: (teamId: string) => TeamKeyUsage | null;
+    getTeamKeyUsageLoading?: (teamId: string) => boolean;
     canManage?: boolean;
     onEditTeam?: (team: TeamInfo) => void;
     /** When true (with `onCreateTeam`), a "Create Team" action renders in the section header. */

package/dist/index.cjs.js

@@ -321,6 +321,12 @@ var init_api = __esm({
           end_date: endDate
         });
       }
+      async getTeamKeyUsage(teamId, startDate, endDate) {
+        return this.get(`/teams/${encodeURIComponent(teamId)}/usage/keys`, {
+          start_date: startDate,
+          end_date: endDate
+        });
+      }
       async getSpendLogs(params) {
         const strParams = {
           start_date: params.startDate,
@@ -5054,7 +5060,7 @@ function budgetStatValue(hidden, budget) {
   if (budget > 0) return fmtUsd2(budget);
   return "Unlimited";
 }
-var import_react10, import_Paper8, import_Box14, import_Typography12, import_Skeleton5, import_Divider3, import_Table4, import_TableBody4, import_TableCell4, import_TableHead4, import_TableRow4, import_TableContainer4, import_Collapse2, import_IconButton6, import_Button6, import_CircularProgress4, import_styles10, import_Tooltip5, import_icons_material7, import_recharts2, import_jsx_runtime15, fmtUsd2, monoSx, MemberUsageTable, TeamCard, TeamUsage;
+var import_react10, import_Paper8, import_Box14, import_Typography12, import_Skeleton5, import_Divider3, import_Table4, import_TableBody4, import_TableCell4, import_TableHead4, import_TableRow4, import_TableContainer4, import_Collapse2, import_IconButton6, import_Button6, import_CircularProgress4, import_styles10, import_Tooltip5, import_icons_material7, import_recharts2, import_jsx_runtime15, fmtUsd2, monoSx, MemberUsageTable, TeamKeyUsageTable, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
     "use strict";
@@ -5117,7 +5123,47 @@ var init_TeamUsage = __esm({
         }) })
       ] }) });
     };
-    TeamCard = ({ team, usage, usageLoading, memberUsage, memberUsageLoading, canManage, onEditTeam, canManageMembers, onManageMembers, onExpand, vectorStores, mcpServers }) => {
+    TeamKeyUsageTable = ({ usage }) => {
+      const hidden = usage.budget_hidden === true;
+      if (!usage.keys.length) {
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "body2", color: "text.secondary", children: "This team has no keys." });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableContainer4.default, { component: import_Paper8.default, variant: "outlined", sx: { borderRadius: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_Table4.default, { size: "small", sx: dataTableSx, "aria-label": "Keys by member", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableHead4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_TableRow4.default, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { children: "Key" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { children: "Owner" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { children: "Created" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { children: "Status" }),
+          !hidden && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: "Spend" }),
+          !hidden && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: "Budget" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: "Tokens" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: "Requests" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableBody4.default, { children: usage.keys.map((k) => {
+          const owner = k.display_name ?? k.user_email ?? k.user_id;
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_TableRow4.default, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_TableCell4.default, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "body2", children: k.key_alias ?? k.key }),
+              k.key_alias && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "caption", color: "text.secondary", sx: monoSx, children: k.key })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { children: owner ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "body2", color: "text.secondary", children: "\u2014" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { children: fmtDateShort(k.created_at) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              StatusPill,
+              {
+                label: k.blocked ? "Blocked" : "Active",
+                tone: k.blocked ? "danger" : "success"
+              }
+            ) }),
+            !hidden && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: fmtUsd2(k.spend) }),
+            !hidden && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: k.max_budget === void 0 ? "Unlimited" : fmtUsd2(k.max_budget) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: fmtCompact(k.total_tokens) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableCell4.default, { align: "right", children: k.api_requests.toLocaleString() })
+          ] }, k.key);
+        }) })
+      ] }) });
+    };
+    TeamCard = ({ team, usage, usageLoading, memberUsage, memberUsageLoading, keyUsage, keyUsageLoading, canManage, onEditTeam, canManageMembers, onManageMembers, onExpand, vectorStores, mcpServers }) => {
       const [expanded, setExpanded] = (0, import_react10.useState)(false);
       const chart = useChartTheme();
       const handleExpandChange = (newExpanded) => {
@@ -5320,6 +5366,10 @@ var init_TeamUsage = __esm({
             sectionLabel("Usage by member"),
             memberUsage ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemberUsageTable, { usage: memberUsage }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box14.default, { display: "flex", justifyContent: "center", py: 2, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_CircularProgress4.default, { size: 22 }) })
           ] }),
+          (keyUsageLoading || keyUsage) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_Box14.default, { mb: 2.5, children: [
+            sectionLabel("Keys by member"),
+            keyUsage ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TeamKeyUsageTable, { usage: keyUsage }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box14.default, { display: "flex", justifyContent: "center", py: 2, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_CircularProgress4.default, { size: 22 }) })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_Box14.default, { children: [
             sectionLabel("Members"),
             team.members_with_roles?.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -5376,6 +5426,8 @@ var init_TeamUsage = __esm({
       getTeamUsageLoading,
       getTeamMemberUsage,
       getTeamMemberUsageLoading,
+      getTeamKeyUsage,
+      getTeamKeyUsageLoading,
       canManage,
       onEditTeam,
       canCreate,
@@ -5439,6 +5491,8 @@ var init_TeamUsage = __esm({
               usageLoading: getTeamUsageLoading(team.team_id),
               memberUsage: getTeamMemberUsage?.(team.team_id) ?? null,
               memberUsageLoading: getTeamMemberUsageLoading?.(team.team_id) ?? false,
+              keyUsage: getTeamKeyUsage?.(team.team_id) ?? null,
+              keyUsageLoading: getTeamKeyUsageLoading?.(team.team_id) ?? false,
               canManage,
               onEditTeam,
               canManageMembers: canManageMembers?.(team),
@@ -6385,6 +6439,8 @@ var init_LiteLLMPage = __esm({
       const [teamUsageLoading, setTeamUsageLoading] = (0, import_react13.useState)({});
       const [memberUsageCache, setMemberUsageCache] = (0, import_react13.useState)({});
       const [memberUsageLoading, setMemberUsageLoading] = (0, import_react13.useState)({});
+      const [keyUsageCache, setKeyUsageCache] = (0, import_react13.useState)({});
+      const [keyUsageLoading, setKeyUsageLoading] = (0, import_react13.useState)({});
       const { value: userInfo, loading: userLoading, error: userError } = (0, import_react_use2.useAsync)(
         () => api.getUserInfo(),
         [api]
@@ -6451,6 +6507,8 @@ var init_LiteLLMPage = __esm({
         setTeamUsageLoading({});
         setMemberUsageCache({});
         setMemberUsageLoading({});
+        setKeyUsageCache({});
+        setKeyUsageLoading({});
       }, [setDateRange, setCurrentPreset]);
       const loadTeamUsage = (0, import_react13.useCallback)(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
@@ -6480,6 +6538,20 @@ var init_LiteLLMPage = __esm({
           setMemberUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
       }, [api, dateRange, memberUsageCache, memberUsageLoading]);
+      const loadKeyUsage = (0, import_react13.useCallback)(async (teamId) => {
+        if (keyUsageCache[teamId] !== void 0 || keyUsageLoading[teamId]) return;
+        setKeyUsageLoading((prev) => ({ ...prev, [teamId]: true }));
+        try {
+          const startDate = toLocalDay(dateRange.start);
+          const endDate = toLocalDay(dateRange.end);
+          const data = await api.getTeamKeyUsage(teamId, startDate, endDate);
+          setKeyUsageCache((prev) => ({ ...prev, [teamId]: data }));
+        } catch {
+          setKeyUsageCache((prev) => ({ ...prev, [teamId]: null }));
+        } finally {
+          setKeyUsageLoading((prev) => ({ ...prev, [teamId]: false }));
+        }
+      }, [api, dateRange, keyUsageCache, keyUsageLoading]);
       const allowedModels = (0, import_react13.useMemo)(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
@@ -6777,6 +6849,8 @@ var init_LiteLLMPage = __esm({
                 getTeamUsageLoading: (teamId) => teamUsageLoading[teamId] ?? false,
                 getTeamMemberUsage: (teamId) => memberUsageCache[teamId] ?? null,
                 getTeamMemberUsageLoading: (teamId) => memberUsageLoading[teamId] ?? false,
+                getTeamKeyUsage: (teamId) => keyUsageCache[teamId] ?? null,
+                getTeamKeyUsageLoading: (teamId) => keyUsageLoading[teamId] ?? false,
                 canManage: teamMgmtEnabled && canManageTeam && !readOnly,
                 onEditTeam: (t) => setManageTeam({ mode: "edit", team: t }),
                 canCreate: teamMgmtEnabled && canCreateTeam && !readOnly,
@@ -6788,7 +6862,10 @@ var init_LiteLLMPage = __esm({
                 readOnly,
                 onTeamExpand: (team) => {
                   loadTeamUsage(team.team_id);
-                  if (liteLlmConfig?.teamUsage?.memberBreakdown) loadMemberUsage(team.team_id);
+                  if (liteLlmConfig?.teamUsage?.memberBreakdown) {
+                    loadMemberUsage(team.team_id);
+                    loadKeyUsage(team.team_id);
+                  }
                 }
               }
             );