@acarmisc/backstage-plugin-litellm 0.45.0 → 0.47.0

package/dist/index.esm.js

@@ -5056,10 +5056,12 @@ import TableContainer4 from "@mui/material/TableContainer";
 import Collapse2 from "@mui/material/Collapse";
 import IconButton6 from "@mui/material/IconButton";
 import Button6 from "@mui/material/Button";
+import TextField5 from "@mui/material/TextField";
+import InputAdornment3 from "@mui/material/InputAdornment";
 import CircularProgress4 from "@mui/material/CircularProgress";
 import { alpha as alpha10 } from "@mui/material/styles";
 import MuiTooltip from "@mui/material/Tooltip";
-import { ExpandMore as ExpandMore3, Group, Add as Add2, LockOutlined, GroupAddOutlined } from "@mui/icons-material";
+import { ExpandMore as ExpandMore3, Group, Add as Add2, LockOutlined, GroupAddOutlined, Search as SearchIcon, Close as CloseIcon } from "@mui/icons-material";
 import {
   AreaChart as AreaChart2,
   Area as Area2,
@@ -5084,53 +5086,92 @@ 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, filterText }) => {
       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 query = (filterText ?? "").trim().toLowerCase();
+      const matches = (m) => {
+        if (!query) return true;
+        const haystacks = m.user_id === null ? ["Unattributed"] : [m.display_name, m.user_email, m.user_id];
+        return haystacks.some((h) => h && h.toLowerCase().includes(query));
+      };
+      const visible = usage.members.filter(matches);
+      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` }),
+        visible.length === 0 ? /* @__PURE__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", sx: { display: "block", py: 1 }, children: "No members match that filter." }) : /* @__PURE__ */ jsx15(
+          Box14,
+          {
+            role: "list",
+            "aria-label": "Usage by member",
+            sx: { display: "grid", gap: 1.5, gridTemplateColumns: "repeat(auto-fill, minmax(230px, 1fr))" },
+            children: visible.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 }) => {
+    TeamKeyUsageTable = ({ usage, filterText }) => {
       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." });
       }
+      const query = (filterText ?? "").trim().toLowerCase();
+      const visible = usage.keys.filter((k) => {
+        if (!query) return true;
+        const haystacks = [k.key_alias, k.key, k.user_email, k.user_id, k.display_name];
+        return haystacks.some((h) => h && h.toLowerCase().includes(query));
+      });
+      if (visible.length === 0) {
+        return /* @__PURE__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", sx: { display: "block", py: 1 }, children: "No keys match that filter." });
+      }
       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" }),
@@ -5142,7 +5183,7 @@ var init_TeamUsage = __esm({
           /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Tokens" }),
           /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Requests" })
         ] }) }),
-        /* @__PURE__ */ jsx15(TableBody4, { children: usage.keys.map((k) => {
+        /* @__PURE__ */ jsx15(TableBody4, { children: visible.map((k) => {
           const owner = k.display_name ?? k.user_email ?? k.user_id;
           return /* @__PURE__ */ jsxs14(TableRow4, { children: [
             /* @__PURE__ */ jsxs14(TableCell4, { children: [
@@ -5168,7 +5209,9 @@ var init_TeamUsage = __esm({
     };
     TeamCard = ({ team, usage, usageLoading, memberUsage, memberUsageLoading, memberUsageFailed, keyUsage, keyUsageLoading, keyUsageFailed, canManage, onEditTeam, canManageMembers, onManageMembers, onExpand, vectorStores, mcpServers }) => {
       const [expanded, setExpanded] = useState9(false);
+      const [teamSearch, setTeamSearch] = useState9("");
       const chart = useChartTheme();
+      const searchValue = teamSearch.trim() ? teamSearch : "";
       const handleExpandChange = (newExpanded) => {
         setExpanded(newExpanded);
         if (newExpanded && onExpand) {
@@ -5366,18 +5409,37 @@ var init_TeamUsage = __esm({
           renderNamedTags("MCP servers", team.object_permission?.mcp_servers, mcpServers),
           renderDailySpendSection(),
           (memberUsageLoading || memberUsage || memberUsageFailed) && /* @__PURE__ */ jsxs14(Box14, { mb: 2.5, children: [
-            sectionLabel("Usage by member"),
-            memberUsage && /* @__PURE__ */ jsx15(MemberUsageTable, { usage: memberUsage }),
+            /* @__PURE__ */ jsxs14(Box14, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1, children: [
+              sectionLabel("Usage by member"),
+              /* @__PURE__ */ jsx15(
+                TextField5,
+                {
+                  size: "small",
+                  placeholder: "Filter members by name or email\u2026",
+                  value: teamSearch,
+                  onChange: (e) => setTeamSearch(e.target.value),
+                  sx: { width: { xs: "100%", sm: 260 } },
+                  InputProps: {
+                    startAdornment: /* @__PURE__ */ jsx15(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx15(SearchIcon, { fontSize: "small", color: "disabled" }) }),
+                    endAdornment: searchValue ? /* @__PURE__ */ jsx15(InputAdornment3, { position: "end", children: /* @__PURE__ */ jsx15(IconButton6, { size: "small", onClick: () => setTeamSearch(""), "aria-label": "Clear member filter", children: /* @__PURE__ */ jsx15(CloseIcon, { fontSize: "small" }) }) }) : void 0
+                  }
+                }
+              )
+            ] }),
+            memberUsage && /* @__PURE__ */ jsx15(MemberUsageCards, { usage: memberUsage, filterText: searchValue }),
             !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 || keyUsageFailed) && /* @__PURE__ */ jsxs14(Box14, { mb: 2.5, children: [
-            sectionLabel("Keys by member"),
-            keyUsage && /* @__PURE__ */ jsx15(TeamKeyUsageTable, { usage: keyUsage }),
+            /* @__PURE__ */ jsxs14(Box14, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1, children: [
+              sectionLabel("Keys by member"),
+              /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", noWrap: true, children: "Filter member keys, owner or alias" })
+            ] }),
+            keyUsage && /* @__PURE__ */ jsx15(TeamKeyUsageTable, { usage: keyUsage, filterText: searchValue }),
             !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,
@@ -5535,8 +5597,8 @@ import MenuItem5 from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
-import TextField5 from "@mui/material/TextField";
-import InputAdornment3 from "@mui/material/InputAdornment";
+import TextField6 from "@mui/material/TextField";
+import InputAdornment4 from "@mui/material/InputAdornment";
 import { Search as Search2 } from "@mui/icons-material";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import Tooltip7 from "@mui/material/Tooltip";
@@ -5675,7 +5737,7 @@ var init_ModelsTable = __esm({
                 )
               ] }),
               /* @__PURE__ */ jsx16(
-                TextField5,
+                TextField6,
                 {
                   label: "Filter Models",
                   size: "small",
@@ -5684,7 +5746,7 @@ var init_ModelsTable = __esm({
                   disabled: !selectedTeamId,
                   sx: { minWidth: 240, mb: 2 },
                   InputProps: {
-                    startAdornment: /* @__PURE__ */ jsx16(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx16(Search2, { fontSize: "small" }) })
+                    startAdornment: /* @__PURE__ */ jsx16(InputAdornment4, { position: "start", children: /* @__PURE__ */ jsx16(Search2, { fontSize: "small" }) })
                   }
                 }
               )