@acarmisc/backstage-plugin-litellm 0.46.0 → 0.47.0

package/dist/components/TeamUsage.d.ts

@@ -7,6 +7,7 @@ import { McpServerInfo, TeamInfo, TeamKeyUsage, TeamMemberUsage, UsageMetrics, V
  */
 export declare const MemberUsageCards: FC<{
     usage: TeamMemberUsage;
+    filterText?: string;
 }>;
 /**
  * A team's keys with the period's usage, for team leads. The backend never
@@ -14,6 +15,7 @@ export declare const MemberUsageCards: FC<{
  */
 export declare const TeamKeyUsageTable: FC<{
     usage: TeamKeyUsage;
+    filterText?: string;
 }>;
 interface TeamUsageProps {
     teams: TeamInfo[];

package/dist/index.cjs.js

@@ -5060,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, fmtShare, MemberUsageCards, TeamKeyUsageTable, 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_TextField5, import_InputAdornment3, import_CircularProgress4, import_styles10, import_Tooltip5, import_icons_material7, import_recharts2, import_jsx_runtime15, fmtUsd2, monoSx, fmtShare, MemberUsageCards, TeamKeyUsageTable, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
     "use strict";
@@ -5079,6 +5079,8 @@ var init_TeamUsage = __esm({
     import_Collapse2 = __toESM(require("@mui/material/Collapse"));
     import_IconButton6 = __toESM(require("@mui/material/IconButton"));
     import_Button6 = __toESM(require("@mui/material/Button"));
+    import_TextField5 = __toESM(require("@mui/material/TextField"));
+    import_InputAdornment3 = __toESM(require("@mui/material/InputAdornment"));
     import_CircularProgress4 = __toESM(require("@mui/material/CircularProgress"));
     import_styles10 = require("@mui/material/styles");
     import_Tooltip5 = __toESM(require("@mui/material/Tooltip"));
@@ -5089,21 +5091,28 @@ var init_TeamUsage = __esm({
     fmtUsd2 = (n) => `$${(n ?? 0).toFixed(2)}`;
     monoSx = { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 };
     fmtShare = (pct) => `${pct.toFixed(pct > 0 && pct < 1 ? 1 : 0)}%`;
-    MemberUsageCards = ({ usage }) => {
+    MemberUsageCards = ({ usage, filterText }) => {
       const hidden = usage.budget_hidden === true;
       if (!usage.members.length) {
         return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "body2", color: "text.secondary", children: "No members or activity in this period." });
       }
+      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__ */ (0, import_jsx_runtime15.jsxs)(import_Box14.default, { children: [
         !hidden && people > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { 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__ */ (0, import_jsx_runtime15.jsx)(
+        visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "body2", color: "text.secondary", sx: { display: "block", py: 1 }, children: "No members match that filter." }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           import_Box14.default,
           {
             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) => {
+            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;
@@ -5146,11 +5155,20 @@ var init_TeamUsage = __esm({
         )
       ] });
     };
-    TeamKeyUsageTable = ({ usage }) => {
+    TeamKeyUsageTable = ({ usage, filterText }) => {
       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." });
       }
+      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__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "body2", color: "text.secondary", sx: { display: "block", py: 1 }, children: "No keys match that filter." });
+      }
       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" }),
@@ -5162,7 +5180,7 @@ var init_TeamUsage = __esm({
           /* @__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) => {
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_TableBody4.default, { children: visible.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: [
@@ -5188,7 +5206,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] = (0, import_react10.useState)(false);
+      const [teamSearch, setTeamSearch] = (0, import_react10.useState)("");
       const chart = useChartTheme();
+      const searchValue = teamSearch.trim() ? teamSearch : "";
       const handleExpandChange = (newExpanded) => {
         setExpanded(newExpanded);
         if (newExpanded && onExpand) {
@@ -5386,14 +5406,33 @@ var init_TeamUsage = __esm({
           renderNamedTags("MCP servers", team.object_permission?.mcp_servers, mcpServers),
           renderDailySpendSection(),
           (memberUsageLoading || memberUsage || memberUsageFailed) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_Box14.default, { mb: 2.5, children: [
-            sectionLabel("Usage by member"),
-            memberUsage && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemberUsageCards, { usage: memberUsage }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_Box14.default, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1, children: [
+              sectionLabel("Usage by member"),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_TextField5.default,
+                {
+                  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__ */ (0, import_jsx_runtime15.jsx)(import_InputAdornment3.default, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_material7.Search, { fontSize: "small", color: "disabled" }) }),
+                    endAdornment: searchValue ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_InputAdornment3.default, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_IconButton6.default, { size: "small", onClick: () => setTeamSearch(""), "aria-label": "Clear member filter", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_material7.Close, { fontSize: "small" }) }) }) : void 0
+                  }
+                }
+              )
+            ] }),
+            memberUsage && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MemberUsageCards, { usage: memberUsage, filterText: searchValue }),
             !memberUsage && memberUsageFailed && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "caption", color: "text.secondary", children: "Could not load per-member usage" }),
             !memberUsage && !memberUsageFailed && /* @__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 || keyUsageFailed) && /* @__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.jsxs)(import_Box14.default, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1, children: [
+              sectionLabel("Keys by member"),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "caption", color: "text.secondary", noWrap: true, children: "Filter member keys, owner or alias" })
+            ] }),
+            keyUsage && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TeamKeyUsageTable, { usage: keyUsage, filterText: searchValue }),
             !keyUsage && keyUsageFailed && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography12.default, { variant: "caption", color: "text.secondary", children: "Could not load per-key usage" }),
             !keyUsage && !keyUsageFailed && /* @__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 }) })
           ] }),
@@ -5558,7 +5597,7 @@ function fmtTokens(n) {
   if (n >= 1e3) return `${(n / 1e3).toFixed(0)}K`;
   return String(n);
 }
-var import_react11, import_Box15, import_Table5, import_TableBody5, import_TableCell5, import_TableContainer5, import_TableHead5, import_TableRow5, import_TableSortLabel2, import_Typography13, import_MenuItem5, import_Select, import_FormControl, import_InputLabel, import_TextField5, import_InputAdornment3, import_icons_material8, import_ContentCopy, import_Tooltip6, import_Snackbar, import_Alert4, import_styles11, import_jsx_runtime16, ALL_PROXY_MODELS, ModelsTable;
+var import_react11, import_Box15, import_Table5, import_TableBody5, import_TableCell5, import_TableContainer5, import_TableHead5, import_TableRow5, import_TableSortLabel2, import_Typography13, import_MenuItem5, import_Select, import_FormControl, import_InputLabel, import_TextField6, import_InputAdornment4, import_icons_material8, import_ContentCopy, import_Tooltip6, import_Snackbar, import_Alert4, import_styles11, import_jsx_runtime16, ALL_PROXY_MODELS, ModelsTable;
 var init_ModelsTable = __esm({
   "src/components/ModelsTable.tsx"() {
     "use strict";
@@ -5576,8 +5615,8 @@ var init_ModelsTable = __esm({
     import_Select = __toESM(require("@mui/material/Select"));
     import_FormControl = __toESM(require("@mui/material/FormControl"));
     import_InputLabel = __toESM(require("@mui/material/InputLabel"));
-    import_TextField5 = __toESM(require("@mui/material/TextField"));
-    import_InputAdornment3 = __toESM(require("@mui/material/InputAdornment"));
+    import_TextField6 = __toESM(require("@mui/material/TextField"));
+    import_InputAdornment4 = __toESM(require("@mui/material/InputAdornment"));
     import_icons_material8 = require("@mui/icons-material");
     import_ContentCopy = __toESM(require("@mui/icons-material/ContentCopy"));
     import_Tooltip6 = __toESM(require("@mui/material/Tooltip"));
@@ -5695,7 +5734,7 @@ var init_ModelsTable = __esm({
                 )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                import_TextField5.default,
+                import_TextField6.default,
                 {
                   label: "Filter Models",
                   size: "small",
@@ -5704,7 +5743,7 @@ var init_ModelsTable = __esm({
                   disabled: !selectedTeamId,
                   sx: { minWidth: 240, mb: 2 },
                   InputProps: {
-                    startAdornment: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_InputAdornment3.default, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_material8.Search, { fontSize: "small" }) })
+                    startAdornment: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_InputAdornment4.default, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_material8.Search, { fontSize: "small" }) })
                   }
                 }
               )