@acarmisc/backstage-plugin-litellm 0.42.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;
@@ -37,6 +37,11 @@ export interface LiteLlmApiInterface {
     }): Promise<TeamInfo>;
     removeTeamMember(teamId: string, userEntityRef: string): Promise<TeamInfo>;
     getVectorStores(): Promise<VectorStoreInfo[]>;
+    /** Id → name for every KB and MCP server, for labels only (not allowlist-filtered). */
+    getObjectNames(): Promise<{
+        vector_stores: VectorStoreInfo[];
+        mcp_servers: McpServerInfo[];
+    }>;
     setTeamKnowledgeBases(teamId: string, vectorStores: string[]): Promise<TeamInfo>;
     getMcpServers(): Promise<McpServerInfo[]>;
     setTeamMcpServers(teamId: string, mcpServers: string[]): Promise<TeamInfo>;
@@ -44,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. */
@@ -105,12 +112,17 @@ export declare class LiteLlmApi implements LiteLlmApiInterface {
     }): Promise<TeamInfo>;
     removeTeamMember(teamId: string, userEntityRef: string): Promise<TeamInfo>;
     getVectorStores(): Promise<VectorStoreInfo[]>;
+    getObjectNames(): Promise<{
+        vector_stores: VectorStoreInfo[];
+        mcp_servers: McpServerInfo[];
+    }>;
     setTeamKnowledgeBases(teamId: string, vectorStores: string[]): Promise<TeamInfo>;
     getMcpServers(): Promise<McpServerInfo[]>;
     setTeamMcpServers(teamId: string, mcpServers: string[]): Promise<TeamInfo>;
     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/ManageTeamDialog.d.ts

@@ -27,12 +27,16 @@ interface ManageTeamDialogProps {
     canManageKnowledgeBases?: boolean;
     /** Vector stores the caller may attach (already allowlist-filtered server-side). */
     vectorStores?: VectorStoreInfo[];
+    /** Names for labelling attached stores; may include stores not offered in the picker. */
+    vectorStoreNames?: VectorStoreInfo[];
     /** Called to replace the team's attached knowledge bases; parent refreshes `team`. */
     onSaveKnowledgeBases?: (vectorStoreIds: string[]) => Promise<void>;
     /** When true, the MCP Servers section (edit mode only) is shown. */
     canManageMcpServers?: boolean;
     /** MCP servers the caller may attach (already allowlist-filtered server-side). */
     mcpServers?: McpServerInfo[];
+    /** Names for labelling attached servers; may include servers not offered in the picker. */
+    mcpServerNames?: McpServerInfo[];
     /** Called to replace the team's attached MCP servers; parent refreshes `team`. */
     onSaveMcpServers?: (mcpServerIds: string[]) => Promise<void>;
     /** When true, only members section is shown (not budget/models/KB/MCP); title changes; Save becomes Done. */

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

@@ -287,6 +287,10 @@ var init_api = __esm({
       async getVectorStores() {
         return this.get("/vector-stores");
       }
+      // Names only, readable by any signed-in user; never used for the picker.
+      async getObjectNames() {
+        return this.get("/object-names");
+      }
       async setTeamKnowledgeBases(teamId, vectorStores) {
         return this.put(
           `/teams/${encodeURIComponent(teamId)}/knowledge-bases`,
@@ -317,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,
@@ -3245,9 +3255,11 @@ var init_ManageTeamDialog = __esm({
       onRemoveMember,
       canManageKnowledgeBases,
       vectorStores,
+      vectorStoreNames,
       onSaveKnowledgeBases,
       canManageMcpServers,
       mcpServers,
+      mcpServerNames,
       onSaveMcpServers,
       membersOnly,
       currentUserId,
@@ -3516,10 +3528,10 @@ var init_ManageTeamDialog = __esm({
       const durationOptions = BUDGET_DURATION_OPTIONS.some((o) => o.value === budgetDuration) ? BUDGET_DURATION_OPTIONS : [...BUDGET_DURATION_OPTIONS, { value: budgetDuration, label: budgetDuration }];
       const showKnowledgeBases = mode === "edit" && !!canManageKnowledgeBases;
       const kbOptions = (vectorStores ?? []).map((v) => v.id);
-      const kbLabel = (id) => (vectorStores ?? []).find((v) => v.id === id)?.name ?? id;
+      const kbLabel = (id) => (vectorStoreNames ?? []).find((v) => v.id === id)?.name ?? id;
       const showMcpServers = mode === "edit" && !!canManageMcpServers;
       const mcpOptions = (mcpServers ?? []).map((s) => s.id);
-      const mcpLabel = (id) => (mcpServers ?? []).find((s) => s.id === id)?.name ?? id;
+      const mcpLabel = (id) => (mcpServerNames ?? []).find((s) => s.id === id)?.name ?? id;
       const isRemovalDisabled = (memberUserId, memberRole) => {
         if (!membersOnly) return { disabled: false };
         if (memberUserId === currentUserId) {
@@ -5048,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";
@@ -5111,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) => {
@@ -5314,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)(
@@ -5370,6 +5426,8 @@ var init_TeamUsage = __esm({
       getTeamUsageLoading,
       getTeamMemberUsage,
       getTeamMemberUsageLoading,
+      getTeamKeyUsage,
+      getTeamKeyUsageLoading,
       canManage,
       onEditTeam,
       canCreate,
@@ -5433,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),
@@ -6379,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]
@@ -6415,6 +6477,10 @@ var init_LiteLLMPage = __esm({
         () => api.getMcpServers().catch(() => []),
         [api]
       );
+      const { value: objectNames } = (0, import_react_use2.useAsync)(
+        () => api.getObjectNames().catch(() => ({ vector_stores: [], mcp_servers: [] })),
+        [api]
+      );
       const teams = (0, import_react13.useMemo)(() => {
         if (!allTeams?.length) return [];
         if (!userInfo) return allTeams;
@@ -6441,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;
@@ -6470,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;
@@ -6767,18 +6849,23 @@ 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,
                 onCreateTeam: () => setManageTeam({ mode: "create" }),
-                vectorStores: vectorStores ?? [],
-                mcpServers: mcpServers ?? [],
+                vectorStores: objectNames?.vector_stores ?? [],
+                mcpServers: objectNames?.mcp_servers ?? [],
                 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);
-                  if (liteLlmConfig?.teamUsage?.memberBreakdown) loadMemberUsage(team.team_id);
+                  if (liteLlmConfig?.teamUsage?.memberBreakdown) {
+                    loadMemberUsage(team.team_id);
+                    loadKeyUsage(team.team_id);
+                  }
                 }
               }
             );
@@ -6904,6 +6991,7 @@ var init_LiteLLMPage = __esm({
             },
             canManageKnowledgeBases: teamMgmtEnabled && objectPermsEnabled && canManageKnowledgeBases,
             vectorStores: vectorStores ?? [],
+            vectorStoreNames: objectNames?.vector_stores ?? [],
             onSaveKnowledgeBases: async (vectorStoreIds) => {
               if (!manageTeam?.team) return;
               try {
@@ -6922,6 +7010,7 @@ var init_LiteLLMPage = __esm({
             },
             canManageMcpServers: teamMgmtEnabled && objectPermsEnabled && canManageMcpServers,
             mcpServers: mcpServers ?? [],
+            mcpServerNames: objectNames?.mcp_servers ?? [],
             onSaveMcpServers: async (mcpServerIds) => {
               if (!manageTeam?.team) return;
               try {