@acarmisc/backstage-plugin-litellm 0.42.0 → 0.44.0

package/dist/index.esm.js

@@ -265,6 +265,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`,
@@ -295,6 +299,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,
@@ -3225,9 +3235,11 @@ var init_ManageTeamDialog = __esm({
       onRemoveMember,
       canManageKnowledgeBases,
       vectorStores,
+      vectorStoreNames,
       onSaveKnowledgeBases,
       canManageMcpServers,
       mcpServers,
+      mcpServerNames,
       onSaveMcpServers,
       membersOnly,
       currentUserId,
@@ -3496,10 +3508,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) {
@@ -5072,7 +5084,7 @@ function budgetStatValue(hidden, budget) {
   if (budget > 0) return fmtUsd2(budget);
   return "Unlimited";
 }
-var fmtUsd2, monoSx, MemberUsageTable, TeamCard, TeamUsage;
+var fmtUsd2, monoSx, MemberUsageTable, TeamKeyUsageTable, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
     "use strict";
@@ -5114,7 +5126,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__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", children: "This team has no keys." });
+      }
+      return /* @__PURE__ */ jsx15(TableContainer4, { component: Paper8, variant: "outlined", sx: { borderRadius: 1.5 }, children: /* @__PURE__ */ jsxs14(Table4, { size: "small", sx: dataTableSx, "aria-label": "Keys by member", children: [
+        /* @__PURE__ */ jsx15(TableHead4, { children: /* @__PURE__ */ jsxs14(TableRow4, { children: [
+          /* @__PURE__ */ jsx15(TableCell4, { children: "Key" }),
+          /* @__PURE__ */ jsx15(TableCell4, { children: "Owner" }),
+          /* @__PURE__ */ jsx15(TableCell4, { children: "Created" }),
+          /* @__PURE__ */ jsx15(TableCell4, { children: "Status" }),
+          !hidden && /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Spend" }),
+          !hidden && /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Budget" }),
+          /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Tokens" }),
+          /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Requests" })
+        ] }) }),
+        /* @__PURE__ */ jsx15(TableBody4, { children: usage.keys.map((k) => {
+          const owner = k.display_name ?? k.user_email ?? k.user_id;
+          return /* @__PURE__ */ jsxs14(TableRow4, { children: [
+            /* @__PURE__ */ jsxs14(TableCell4, { children: [
+              /* @__PURE__ */ jsx15(Typography12, { variant: "body2", children: k.key_alias ?? k.key }),
+              k.key_alias && /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", sx: monoSx, children: k.key })
+            ] }),
+            /* @__PURE__ */ jsx15(TableCell4, { children: owner ?? /* @__PURE__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", children: "\u2014" }) }),
+            /* @__PURE__ */ jsx15(TableCell4, { children: fmtDateShort(k.created_at) }),
+            /* @__PURE__ */ jsx15(TableCell4, { children: /* @__PURE__ */ jsx15(
+              StatusPill,
+              {
+                label: k.blocked ? "Blocked" : "Active",
+                tone: k.blocked ? "danger" : "success"
+              }
+            ) }),
+            !hidden && /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: fmtUsd2(k.spend) }),
+            !hidden && /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: k.max_budget === void 0 ? "Unlimited" : fmtUsd2(k.max_budget) }),
+            /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: fmtCompact(k.total_tokens) }),
+            /* @__PURE__ */ jsx15(TableCell4, { 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] = useState9(false);
       const chart = useChartTheme();
       const handleExpandChange = (newExpanded) => {
@@ -5317,6 +5369,10 @@ var init_TeamUsage = __esm({
             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 }) })
           ] }),
+          (keyUsageLoading || keyUsage) && /* @__PURE__ */ jsxs14(Box14, { mb: 2.5, children: [
+            sectionLabel("Keys by member"),
+            keyUsage ? /* @__PURE__ */ jsx15(TeamKeyUsageTable, { usage: keyUsage }) : /* @__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(
@@ -5373,6 +5429,8 @@ var init_TeamUsage = __esm({
       getTeamUsageLoading,
       getTeamMemberUsage,
       getTeamMemberUsageLoading,
+      getTeamKeyUsage,
+      getTeamKeyUsageLoading,
       canManage,
       onEditTeam,
       canCreate,
@@ -5436,6 +5494,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),
@@ -6388,6 +6448,8 @@ var init_LiteLLMPage = __esm({
       const [teamUsageLoading, setTeamUsageLoading] = useState11({});
       const [memberUsageCache, setMemberUsageCache] = useState11({});
       const [memberUsageLoading, setMemberUsageLoading] = useState11({});
+      const [keyUsageCache, setKeyUsageCache] = useState11({});
+      const [keyUsageLoading, setKeyUsageLoading] = useState11({});
       const { value: userInfo, loading: userLoading, error: userError } = useAsync(
         () => api.getUserInfo(),
         [api]
@@ -6424,6 +6486,10 @@ var init_LiteLLMPage = __esm({
         () => api.getMcpServers().catch(() => []),
         [api]
       );
+      const { value: objectNames } = useAsync(
+        () => api.getObjectNames().catch(() => ({ vector_stores: [], mcp_servers: [] })),
+        [api]
+      );
       const teams = useMemo9(() => {
         if (!allTeams?.length) return [];
         if (!userInfo) return allTeams;
@@ -6450,6 +6516,8 @@ var init_LiteLLMPage = __esm({
         setTeamUsageLoading({});
         setMemberUsageCache({});
         setMemberUsageLoading({});
+        setKeyUsageCache({});
+        setKeyUsageLoading({});
       }, [setDateRange, setCurrentPreset]);
       const loadTeamUsage = useCallback4(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
@@ -6479,6 +6547,20 @@ var init_LiteLLMPage = __esm({
           setMemberUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
       }, [api, dateRange, memberUsageCache, memberUsageLoading]);
+      const loadKeyUsage = useCallback4(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 = useMemo9(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
@@ -6776,18 +6858,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);
+                  }
                 }
               }
             );
@@ -6913,6 +7000,7 @@ var init_LiteLLMPage = __esm({
             },
             canManageKnowledgeBases: teamMgmtEnabled && objectPermsEnabled && canManageKnowledgeBases,
             vectorStores: vectorStores ?? [],
+            vectorStoreNames: objectNames?.vector_stores ?? [],
             onSaveKnowledgeBases: async (vectorStoreIds) => {
               if (!manageTeam?.team) return;
               try {
@@ -6931,6 +7019,7 @@ var init_LiteLLMPage = __esm({
             },
             canManageMcpServers: teamMgmtEnabled && objectPermsEnabled && canManageMcpServers,
             mcpServers: mcpServers ?? [],
+            mcpServerNames: objectNames?.mcp_servers ?? [],
             onSaveMcpServers: async (mcpServerIds) => {
               if (!manageTeam?.team) return;
               try {