@acarmisc/backstage-plugin-litellm 0.44.0 → 0.46.0

package/dist/index.esm.js

@@ -5084,47 +5084,70 @@ function budgetStatValue(hidden, budget) {
   if (budget > 0) return fmtUsd2(budget);
   return "Unlimited";
 }
-var fmtUsd2, monoSx, MemberUsageTable, TeamKeyUsageTable, TeamCard, TeamUsage;
+var fmtUsd2, monoSx, fmtShare, MemberUsageCards, TeamKeyUsageTable, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
     "use strict";
     init_ui();
     fmtUsd2 = (n) => `$${(n ?? 0).toFixed(2)}`;
     monoSx = { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 };
-    MemberUsageTable = ({ usage }) => {
+    fmtShare = (pct) => `${pct.toFixed(pct > 0 && pct < 1 ? 1 : 0)}%`;
+    MemberUsageCards = ({ 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");
-        }) })
-      ] }) });
+      const people = usage.members.filter((m) => m.user_id !== null).length;
+      return /* @__PURE__ */ jsxs14(Box14, { children: [
+        !hidden && people > 0 && /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: `Team spend ${fmtUsd2(usage.total_spend)} \xB7 avg ${fmtUsd2(usage.total_spend / people)} per member` }),
+        /* @__PURE__ */ jsx15(
+          Box14,
+          {
+            role: "list",
+            "aria-label": "Usage by member",
+            sx: { display: "grid", gap: 1.5, gridTemplateColumns: "repeat(auto-fill, minmax(230px, 1fr))" },
+            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;
+              const stats = [
+                ["Tokens", fmtCompact(m.total_tokens)],
+                ["Requests", m.api_requests.toLocaleString()],
+                ["Success", m.success_rate === null ? "\u2014" : `${m.success_rate.toFixed(0)}%`],
+                ["Keys", m.user_id === null ? "\u2014" : String(m.key_count)]
+              ];
+              return /* @__PURE__ */ jsxs14(
+                Paper8,
+                {
+                  role: "listitem",
+                  variant: "outlined",
+                  sx: { borderRadius: 1.5, p: 1.5, minWidth: 0 },
+                  children: [
+                    /* @__PURE__ */ jsxs14(Box14, { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 1, children: [
+                      /* @__PURE__ */ jsx15(Box14, { minWidth: 0, 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", fontWeight: 600, noWrap: true, children: name }),
+                        sub && /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", noWrap: true, sx: { ...monoSx, display: "block" }, children: sub })
+                      ] }) }),
+                      m.role && /* @__PURE__ */ jsx15(StatusPill, { label: m.role, tone: m.role === "admin" ? "accent" : "neutral", dot: false })
+                    ] }),
+                    /* @__PURE__ */ jsxs14(Box14, { mt: 1.5, display: "flex", alignItems: "baseline", justifyContent: "space-between", children: [
+                      /* @__PURE__ */ jsx15(Typography12, { variant: "h6", component: "span", sx: { lineHeight: 1.2 }, children: hidden ? fmtShare(m.spend_share_pct) : fmtUsd2(m.spend) }),
+                      /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", children: hidden ? "of team usage" : `${fmtShare(m.spend_share_pct)} of team` })
+                    ] }),
+                    /* @__PURE__ */ jsx15(Box14, { mt: 0.75, children: /* @__PURE__ */ jsx15(Meter, { value: m.spend_share_pct, ariaLabel: `${name ?? "Unattributed"} share of team spend` }) }),
+                    /* @__PURE__ */ jsx15(Box14, { mt: 1.5, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0.5, children: stats.map(([label, value]) => /* @__PURE__ */ jsxs14(Box14, { children: [
+                      /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", display: "block", children: label }),
+                      /* @__PURE__ */ jsx15(Typography12, { variant: "body2", children: value })
+                    ] }, label)) })
+                  ]
+                },
+                m.user_id ?? "__unattributed"
+              );
+            })
+          }
+        )
+      ] });
     };
     TeamKeyUsageTable = ({ usage }) => {
       const hidden = usage.budget_hidden === true;
@@ -5166,7 +5189,7 @@ var init_TeamUsage = __esm({
         }) })
       ] }) });
     };
-    TeamCard = ({ team, usage, usageLoading, memberUsage, memberUsageLoading, keyUsage, keyUsageLoading, canManage, onEditTeam, canManageMembers, onManageMembers, onExpand, vectorStores, mcpServers }) => {
+    TeamCard = ({ team, usage, usageLoading, memberUsage, memberUsageLoading, memberUsageFailed, keyUsage, keyUsageLoading, keyUsageFailed, canManage, onEditTeam, canManageMembers, onManageMembers, onExpand, vectorStores, mcpServers }) => {
       const [expanded, setExpanded] = useState9(false);
       const chart = useChartTheme();
       const handleExpandChange = (newExpanded) => {
@@ -5365,15 +5388,19 @@ var init_TeamUsage = __esm({
           renderNamedTags("Knowledge bases", team.object_permission?.vector_stores, vectorStores),
           renderNamedTags("MCP servers", team.object_permission?.mcp_servers, mcpServers),
           renderDailySpendSection(),
-          (memberUsageLoading || memberUsage) && /* @__PURE__ */ jsxs14(Box14, { mb: 2.5, children: [
+          (memberUsageLoading || memberUsage || memberUsageFailed) && /* @__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 }) })
+            memberUsage && /* @__PURE__ */ jsx15(MemberUsageCards, { usage: memberUsage }),
+            !memberUsage && memberUsageFailed && /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", children: "Could not load per-member usage" }),
+            !memberUsage && !memberUsageFailed && /* @__PURE__ */ jsx15(Box14, { display: "flex", justifyContent: "center", py: 2, children: /* @__PURE__ */ jsx15(CircularProgress4, { size: 22 }) })
           ] }),
-          (keyUsageLoading || keyUsage) && /* @__PURE__ */ jsxs14(Box14, { mb: 2.5, children: [
+          (keyUsageLoading || keyUsage || keyUsageFailed) && /* @__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 }) })
+            keyUsage && /* @__PURE__ */ jsx15(TeamKeyUsageTable, { usage: keyUsage }),
+            !keyUsage && keyUsageFailed && /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", children: "Could not load per-key usage" }),
+            !keyUsage && !keyUsageFailed && /* @__PURE__ */ jsx15(Box14, { display: "flex", justifyContent: "center", py: 2, children: /* @__PURE__ */ jsx15(CircularProgress4, { size: 22 }) })
           ] }),
-          /* @__PURE__ */ jsxs14(Box14, { children: [
+          !memberUsage && /* @__PURE__ */ jsxs14(Box14, { children: [
             sectionLabel("Members"),
             team.members_with_roles?.length ? /* @__PURE__ */ jsx15(
               TableContainer4,
@@ -5431,6 +5458,8 @@ var init_TeamUsage = __esm({
       getTeamMemberUsageLoading,
       getTeamKeyUsage,
       getTeamKeyUsageLoading,
+      getTeamMemberUsageFailed,
+      getTeamKeyUsageFailed,
       canManage,
       onEditTeam,
       canCreate,
@@ -5496,6 +5525,8 @@ var init_TeamUsage = __esm({
               memberUsageLoading: getTeamMemberUsageLoading?.(team.team_id) ?? false,
               keyUsage: getTeamKeyUsage?.(team.team_id) ?? null,
               keyUsageLoading: getTeamKeyUsageLoading?.(team.team_id) ?? false,
+              memberUsageFailed: getTeamMemberUsageFailed?.(team.team_id) ?? false,
+              keyUsageFailed: getTeamKeyUsageFailed?.(team.team_id) ?? false,
               canManage,
               onEditTeam,
               canManageMembers: canManageMembers?.(team),
@@ -6344,7 +6375,7 @@ function initDateRange() {
   else start.setDate(start.getDate() - 7);
   return { start, end };
 }
-var PERIOD_LS_KEY2, PAGE_TABS, isPageTab, LiteLLMPage;
+var PERIOD_LS_KEY2, PAGE_TABS, isPageTab, isRefusal, LiteLLMPage;
 var init_LiteLLMPage = __esm({
   "src/components/LiteLLMPage.tsx"() {
     "use strict";
@@ -6365,6 +6396,7 @@ var init_LiteLLMPage = __esm({
     PERIOD_LS_KEY2 = "litellm_usage_period";
     PAGE_TABS = ["overview", "keys", "teams", "models", "insights"];
     isPageTab = (v) => !!v && PAGE_TABS.includes(v);
+    isRefusal = (err) => err instanceof ApiError && (err.status === 403 || err.status === 404);
     LiteLLMPage = () => {
       const api = useApi4(liteLlmApiRef);
       const alertApi = useApi4(alertApiRef2);
@@ -6450,6 +6482,8 @@ var init_LiteLLMPage = __esm({
       const [memberUsageLoading, setMemberUsageLoading] = useState11({});
       const [keyUsageCache, setKeyUsageCache] = useState11({});
       const [keyUsageLoading, setKeyUsageLoading] = useState11({});
+      const [memberUsageFailed, setMemberUsageFailed] = useState11({});
+      const [keyUsageFailed, setKeyUsageFailed] = useState11({});
       const { value: userInfo, loading: userLoading, error: userError } = useAsync(
         () => api.getUserInfo(),
         [api]
@@ -6518,6 +6552,8 @@ var init_LiteLLMPage = __esm({
         setMemberUsageLoading({});
         setKeyUsageCache({});
         setKeyUsageLoading({});
+        setMemberUsageFailed({});
+        setKeyUsageFailed({});
       }, [setDateRange, setCurrentPreset]);
       const loadTeamUsage = useCallback4(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
@@ -6541,8 +6577,9 @@ var init_LiteLLMPage = __esm({
           const endDate = toLocalDay(dateRange.end);
           const data = await api.getTeamMemberUsage(teamId, startDate, endDate);
           setMemberUsageCache((prev) => ({ ...prev, [teamId]: data }));
-        } catch {
+        } catch (err) {
           setMemberUsageCache((prev) => ({ ...prev, [teamId]: null }));
+          setMemberUsageFailed((prev) => ({ ...prev, [teamId]: !isRefusal(err) }));
         } finally {
           setMemberUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
@@ -6555,8 +6592,9 @@ var init_LiteLLMPage = __esm({
           const endDate = toLocalDay(dateRange.end);
           const data = await api.getTeamKeyUsage(teamId, startDate, endDate);
           setKeyUsageCache((prev) => ({ ...prev, [teamId]: data }));
-        } catch {
+        } catch (err) {
           setKeyUsageCache((prev) => ({ ...prev, [teamId]: null }));
+          setKeyUsageFailed((prev) => ({ ...prev, [teamId]: !isRefusal(err) }));
         } finally {
           setKeyUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
@@ -6860,6 +6898,8 @@ var init_LiteLLMPage = __esm({
                 getTeamMemberUsageLoading: (teamId) => memberUsageLoading[teamId] ?? false,
                 getTeamKeyUsage: (teamId) => keyUsageCache[teamId] ?? null,
                 getTeamKeyUsageLoading: (teamId) => keyUsageLoading[teamId] ?? false,
+                getTeamMemberUsageFailed: (teamId) => memberUsageFailed[teamId] ?? false,
+                getTeamKeyUsageFailed: (teamId) => keyUsageFailed[teamId] ?? false,
                 canManage: teamMgmtEnabled && canManageTeam && !readOnly,
                 onEditTeam: (t) => setManageTeam({ mode: "edit", team: t }),
                 canCreate: teamMgmtEnabled && canCreateTeam && !readOnly,