@acarmisc/backstage-plugin-litellm 0.31.0 → 0.32.0

package/dist/index.esm.js

@@ -2555,9 +2555,22 @@ var init_KeyFormDialog = __esm({
           setCloseWithoutCopyConfirm(false);
           setTouched({});
           setSubmitAttempted(false);
-          onGetConfig().then(setConfig).catch(() => setConfig(null));
         }
-      }, [open, isCreate, keyToEdit, username, keyGenerationSettings?.allowUnlimitedBudget, onGetConfig]);
+      }, [open, isCreate, keyToEdit, username, keyGenerationSettings?.allowUnlimitedBudget]);
+      const onGetConfigRef = useRef3(onGetConfig);
+      onGetConfigRef.current = onGetConfig;
+      useEffect3(() => {
+        if (!open) return void 0;
+        let cancelled = false;
+        onGetConfigRef.current().then((c) => {
+          if (!cancelled) setConfig(c);
+        }).catch(() => {
+          if (!cancelled) setConfig(null);
+        });
+        return () => {
+          cancelled = true;
+        };
+      }, [open]);
       const allowUnlimitedBudget = keyGenerationSettings?.allowUnlimitedBudget ?? false;
       const teamRequired = keyGenerationSettings?.teamRequired ?? true;
       const formData = isCreate ? generateForm : editFormState;
@@ -3111,6 +3124,7 @@ import Box10 from "@mui/material/Box";
 import Divider2 from "@mui/material/Divider";
 import Typography8 from "@mui/material/Typography";
 import IconButton4 from "@mui/material/IconButton";
+import Tooltip4 from "@mui/material/Tooltip";
 import Paper4 from "@mui/material/Paper";
 import Table2 from "@mui/material/Table";
 import TableBody2 from "@mui/material/TableBody";
@@ -3153,7 +3167,10 @@ var init_ManageTeamDialog = __esm({
       onSaveKnowledgeBases,
       canManageMcpServers,
       mcpServers,
-      onSaveMcpServers
+      onSaveMcpServers,
+      membersOnly,
+      currentUserId,
+      memberManagerRoles
     }) => {
       const [alias, setAlias] = useState6("");
       const [models, setModels] = useState6([]);
@@ -3178,7 +3195,7 @@ var init_ManageTeamDialog = __esm({
       const hideBudgetForManagers = config?.display?.hideTeamBudgetForManagers ?? false;
       const budgetWriteOnly = hideBudgetForManagers && mode === "edit";
       const members = useMemo4(() => team?.members_with_roles ?? [], [team]);
-      const showMembers = mode === "edit" && !!canManageMembers;
+      const showMembers = mode === "edit" && !!canManageMembers || membersOnly;
       const catalogApi = useApi3(catalogApiRef);
       const [searchUsers, setSearchUsers] = useState6([]);
       const [usersLoading, setUsersLoading] = useState6(false);
@@ -3327,7 +3344,7 @@ var init_ManageTeamDialog = __esm({
       const handleAddMember = async () => {
         if (!onAddMember || !memberRef.trim()) return;
         setMemberError(null);
-        const budget = memberBudget ? parseFloat(memberBudget) : void 0;
+        const budget = !membersOnly && memberBudget ? parseFloat(memberBudget) : void 0;
         if (budget !== void 0 && (isNaN(budget) || budget <= 0)) {
           setMemberError("Max budget in team must be a positive number");
           return;
@@ -3388,72 +3405,95 @@ var init_ManageTeamDialog = __esm({
       const showMcpServers = mode === "edit" && !!canManageMcpServers;
       const mcpOptions = (mcpServers ?? []).map((s) => s.id);
       const mcpLabel = (id) => (mcpServers ?? []).find((s) => s.id === id)?.name ?? id;
+      const isRemovalDisabled = (memberUserId, memberRole) => {
+        if (!membersOnly) return { disabled: false };
+        if (memberUserId === currentUserId) {
+          return { disabled: true, reason: "You can't remove yourself" };
+        }
+        if (memberManagerRoles?.includes(memberRole)) {
+          return { disabled: true, reason: `Only platform admins can remove a team ${memberRole}` };
+        }
+        return { disabled: false };
+      };
+      const getDialogTitle = () => {
+        if (membersOnly) {
+          return `Manage members \u2014 ${team?.team_alias || "Untitled team"}`;
+        }
+        return mode === "create" ? "Create Team" : "Edit Team";
+      };
       return /* @__PURE__ */ jsxs10(Dialog3, { open, onClose, maxWidth: "sm", fullWidth: true, children: [
-        /* @__PURE__ */ jsx11(DialogTitle3, { children: mode === "create" ? "Create Team" : "Edit Team" }),
+        /* @__PURE__ */ jsx11(DialogTitle3, { children: getDialogTitle() }),
         /* @__PURE__ */ jsxs10(DialogContent3, { sx: { pt: 2, display: "flex", flexDirection: "column", gap: 2 }, children: [
           error && /* @__PURE__ */ jsx11(Alert2, { severity: "error", children: error }),
-          /* @__PURE__ */ jsx11(
-            TextField3,
-            {
-              label: "Team Alias",
-              value: alias,
-              onChange: (e) => setAlias(e.target.value),
-              disabled: submitting,
-              fullWidth: true
-            }
-          ),
-          /* @__PURE__ */ jsx11(
-            Autocomplete2,
-            {
-              multiple: true,
-              options: modelNames,
-              value: models,
-              onChange: (_, newValue) => setModels(newValue),
-              disabled: submitting,
-              renderInput: (params) => /* @__PURE__ */ jsx11(
-                TextField3,
-                {
-                  ...params,
-                  label: "Models",
-                  required: true,
-                  helperText: "At least one model is required here \u2014 this delegated flow only grants access to models your admin has allow-listed for team creation, not every proxy model. (Teams with no model restriction shown elsewhere were configured directly in LiteLLM.)"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx11(
-            TextField3,
-            {
-              label: budgetWriteOnly ? "New Max Budget ($)" : "Max Budget ($)",
-              type: "number",
-              value: maxBudget,
-              onChange: (e) => setMaxBudget(e.target.value),
-              disabled: submitting || unlimited,
-              inputProps: { min: 0, max: maxBudgetCeiling },
-              helperText: budgetWriteOnly ? "Current budget is hidden \u2014 leave blank to keep it, or enter a new value" : `Maximum: $${maxBudgetCeiling}`,
-              fullWidth: true
-            }
-          ),
-          allowUnlimitedBudget && /* @__PURE__ */ jsx11(
-            FormControlLabel2,
-            {
-              control: /* @__PURE__ */ jsx11(Checkbox2, { checked: unlimited, onChange: (e) => setUnlimited(e.target.checked), disabled: submitting }),
-              label: "Unlimited Budget"
-            }
-          ),
-          /* @__PURE__ */ jsx11(
-            TextField3,
-            {
-              select: true,
-              label: "Budget Duration",
-              value: budgetDuration,
-              onChange: (e) => setBudgetDuration(e.target.value),
-              disabled: submitting || unlimited,
-              helperText: "Spend-reset period for the team budget",
-              fullWidth: true,
-              children: durationOptions.map((o) => /* @__PURE__ */ jsx11(MenuItem2, { value: o.value, children: o.label }, o.value))
-            }
-          ),
+          membersOnly && /* @__PURE__ */ jsxs10(Alert2, { severity: "info", children: [
+            "As a team ",
+            team?.members_with_roles?.find((m) => m.user_id === currentUserId)?.role || "member",
+            " you can add or remove members. Budgets and models are managed by your platform admins."
+          ] }),
+          !membersOnly && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+            /* @__PURE__ */ jsx11(
+              TextField3,
+              {
+                label: "Team Alias",
+                value: alias,
+                onChange: (e) => setAlias(e.target.value),
+                disabled: submitting,
+                fullWidth: true
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              Autocomplete2,
+              {
+                multiple: true,
+                options: modelNames,
+                value: models,
+                onChange: (_, newValue) => setModels(newValue),
+                disabled: submitting,
+                renderInput: (params) => /* @__PURE__ */ jsx11(
+                  TextField3,
+                  {
+                    ...params,
+                    label: "Models",
+                    required: true,
+                    helperText: "At least one model is required here \u2014 this delegated flow only grants access to models your admin has allow-listed for team creation, not every proxy model. (Teams with no model restriction shown elsewhere were configured directly in LiteLLM.)"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              TextField3,
+              {
+                label: budgetWriteOnly ? "New Max Budget ($)" : "Max Budget ($)",
+                type: "number",
+                value: maxBudget,
+                onChange: (e) => setMaxBudget(e.target.value),
+                disabled: submitting || unlimited,
+                inputProps: { min: 0, max: maxBudgetCeiling },
+                helperText: budgetWriteOnly ? "Current budget is hidden \u2014 leave blank to keep it, or enter a new value" : `Maximum: $${maxBudgetCeiling}`,
+                fullWidth: true
+              }
+            ),
+            allowUnlimitedBudget && /* @__PURE__ */ jsx11(
+              FormControlLabel2,
+              {
+                control: /* @__PURE__ */ jsx11(Checkbox2, { checked: unlimited, onChange: (e) => setUnlimited(e.target.checked), disabled: submitting }),
+                label: "Unlimited Budget"
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              TextField3,
+              {
+                select: true,
+                label: "Budget Duration",
+                value: budgetDuration,
+                onChange: (e) => setBudgetDuration(e.target.value),
+                disabled: submitting || unlimited,
+                helperText: "Spend-reset period for the team budget",
+                fullWidth: true,
+                children: durationOptions.map((o) => /* @__PURE__ */ jsx11(MenuItem2, { value: o.value, children: o.label }, o.value))
+              }
+            )
+          ] }),
           showMembers && /* @__PURE__ */ jsxs10(Box10, { children: [
             /* @__PURE__ */ jsx11(Divider2, { sx: { my: 1 } }),
             /* @__PURE__ */ jsx11(Typography8, { variant: "subtitle2", sx: { mb: 1 }, children: "Members" }),
@@ -3485,17 +3525,20 @@ var init_ManageTeamDialog = __esm({
                   }
                 ) }),
                 /* @__PURE__ */ jsx11(TableCell2, { align: "right", children: /* @__PURE__ */ jsx11(StatusPill, { label: m.role, tone: m.role === "admin" ? "accent" : "neutral", dot: false }) }),
-                /* @__PURE__ */ jsx11(TableCell2, { align: "right", children: /* @__PURE__ */ jsx11(
-                  IconButton4,
-                  {
-                    edge: "end",
-                    size: "small",
-                    "aria-label": `remove ${m.user_id}`,
-                    disabled: memberBusy,
-                    onClick: () => handleRemoveMember(m.user_id),
-                    children: /* @__PURE__ */ jsx11(DeleteIcon, { fontSize: "small" })
-                  }
-                ) })
+                /* @__PURE__ */ jsx11(TableCell2, { align: "right", children: (() => {
+                  const { disabled, reason } = isRemovalDisabled(m.user_id, m.role);
+                  return /* @__PURE__ */ jsx11(Tooltip4, { title: reason ?? "", children: /* @__PURE__ */ jsx11("span", { children: /* @__PURE__ */ jsx11(
+                    IconButton4,
+                    {
+                      edge: "end",
+                      size: "small",
+                      "aria-label": `remove ${m.user_id}`,
+                      disabled: memberBusy || disabled,
+                      onClick: () => handleRemoveMember(m.user_id),
+                      children: /* @__PURE__ */ jsx11(DeleteIcon, { fontSize: "small" })
+                    }
+                  ) }) });
+                })() })
               ] }, m.user_id)) })
             ] }) }),
             /* @__PURE__ */ jsxs10(Box10, { sx: { display: "flex", gap: 1, alignItems: "flex-start", flexWrap: "wrap" }, children: [
@@ -3543,7 +3586,7 @@ var init_ManageTeamDialog = __esm({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx11(
+              !membersOnly && /* @__PURE__ */ jsx11(
                 TextField3,
                 {
                   label: "Max budget in team ($)",
@@ -3567,7 +3610,7 @@ var init_ManageTeamDialog = __esm({
               )
             ] })
           ] }),
-          showKnowledgeBases && /* @__PURE__ */ jsxs10(Box10, { children: [
+          !membersOnly && showKnowledgeBases && /* @__PURE__ */ jsxs10(Box10, { children: [
             /* @__PURE__ */ jsx11(Divider2, { sx: { my: 1 } }),
             /* @__PURE__ */ jsx11(Typography8, { variant: "subtitle2", sx: { mb: 1 }, children: "Knowledge Bases" }),
             /* @__PURE__ */ jsx11(Typography8, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "Attaching a knowledge base exposes its documents to every key in this team." }),
@@ -3594,7 +3637,7 @@ var init_ManageTeamDialog = __esm({
               }
             ) })
           ] }),
-          showMcpServers && /* @__PURE__ */ jsxs10(Box10, { children: [
+          !membersOnly && showMcpServers && /* @__PURE__ */ jsxs10(Box10, { children: [
             /* @__PURE__ */ jsx11(Divider2, { sx: { my: 1 } }),
             /* @__PURE__ */ jsx11(Typography8, { variant: "subtitle2", sx: { mb: 1 }, children: "MCP Servers" }),
             /* @__PURE__ */ jsx11(Typography8, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "Attaching an MCP server lets every key in this team invoke that server's tools through the model \u2014 including any side effects those tools have." }),
@@ -3623,8 +3666,8 @@ var init_ManageTeamDialog = __esm({
           ] })
         ] }),
         /* @__PURE__ */ jsxs10(DialogActions3, { children: [
-          /* @__PURE__ */ jsx11(Button4, { onClick: onClose, disabled: submitting, children: "Cancel" }),
-          /* @__PURE__ */ jsx11(Button4, { onClick: handleSubmit, disabled: submitting, variant: "contained", children: submitting ? "Saving..." : "Save" })
+          /* @__PURE__ */ jsx11(Button4, { onClick: onClose, disabled: submitting, children: membersOnly ? "Done" : "Cancel" }),
+          !membersOnly && /* @__PURE__ */ jsx11(Button4, { onClick: handleSubmit, disabled: submitting, variant: "contained", children: submitting ? "Saving..." : "Save" })
         ] })
       ] });
     };
@@ -3835,7 +3878,7 @@ import {
   XAxis,
   YAxis,
   CartesianGrid,
-  Tooltip as Tooltip4,
+  Tooltip as Tooltip5,
   ResponsiveContainer,
   Legend,
   ReferenceLine,
@@ -4172,7 +4215,7 @@ var init_UsageStats = __esm({
                   /* @__PURE__ */ jsx12(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }),
                   /* @__PURE__ */ jsx12(YAxis, { tickFormatter: fmtUsdCompact, width: 56, ...chart.axis }),
                   /* @__PURE__ */ jsx12(
-                    Tooltip4,
+                    Tooltip5,
                     {
                       cursor: chart.cursor,
                       content: /* @__PURE__ */ jsx12(ChartTooltip, { valueFormatter: fmtUsd, hideZero: true })
@@ -4198,7 +4241,7 @@ var init_UsageStats = __esm({
                 /* @__PURE__ */ jsx12(CartesianGrid, { ...chart.grid }),
                 /* @__PURE__ */ jsx12(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }),
                 /* @__PURE__ */ jsx12(YAxis, { tickFormatter: fmtCompact, width: 48, ...chart.axis }),
-                /* @__PURE__ */ jsx12(Tooltip4, { cursor: chart.cursor, content: /* @__PURE__ */ jsx12(ChartTooltip, { valueFormatter: fmtInt }) }),
+                /* @__PURE__ */ jsx12(Tooltip5, { cursor: chart.cursor, content: /* @__PURE__ */ jsx12(ChartTooltip, { valueFormatter: fmtInt }) }),
                 /* @__PURE__ */ jsx12(Legend, { ...chart.legend }),
                 /* @__PURE__ */ jsx12(Area, { type: "monotone", dataKey: "promptTokens", name: "Input", stackId: "tok", stroke: SERIES.input, strokeWidth: 1.5, fill: SERIES.input, fillOpacity: 0.25 }),
                 /* @__PURE__ */ jsx12(Area, { type: "monotone", dataKey: "completionTokens", name: "Output", stackId: "tok", stroke: SERIES.output, strokeWidth: 1.5, fill: SERIES.output, fillOpacity: 0.25 })
@@ -4207,7 +4250,7 @@ var init_UsageStats = __esm({
                 /* @__PURE__ */ jsx12(CartesianGrid, { ...chart.grid }),
                 /* @__PURE__ */ jsx12(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }),
                 /* @__PURE__ */ jsx12(YAxis, { tickFormatter: fmtCompact, width: 48, ...chart.axis }),
-                /* @__PURE__ */ jsx12(Tooltip4, { cursor: chart.cursor, content: /* @__PURE__ */ jsx12(ChartTooltip, { valueFormatter: fmtInt }) }),
+                /* @__PURE__ */ jsx12(Tooltip5, { cursor: chart.cursor, content: /* @__PURE__ */ jsx12(ChartTooltip, { valueFormatter: fmtInt }) }),
                 /* @__PURE__ */ jsx12(Legend, { ...chart.legend }),
                 /* @__PURE__ */ jsx12(Bar, { dataKey: "successfulRequests", name: "Successful", fill: SERIES.success, stackId: "r" }),
                 /* @__PURE__ */ jsx12(Bar, { dataKey: "failedRequests", name: "Failed", fill: SERIES.failure, stackId: "r", radius: [3, 3, 0, 0] })
@@ -4217,7 +4260,7 @@ var init_UsageStats = __esm({
                 /* @__PURE__ */ jsx12(XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }),
                 /* @__PURE__ */ jsx12(YAxis, { domain: [0, 100], tickFormatter: (v) => `${v}%`, width: 44, ...chart.axis }),
                 /* @__PURE__ */ jsx12(
-                  Tooltip4,
+                  Tooltip5,
                   {
                     cursor: chart.cursor,
                     content: /* @__PURE__ */ jsx12(ChartTooltip, { valueFormatter: (v) => `${v}%` })
@@ -4254,7 +4297,7 @@ var init_UsageStats = __esm({
                       }
                     ),
                     /* @__PURE__ */ jsx12(
-                      Tooltip4,
+                      Tooltip5,
                       {
                         cursor: chart.cursor,
                         content: /* @__PURE__ */ jsx12(ChartTooltip, { valueFormatter: fmtUsd })
@@ -4296,7 +4339,7 @@ var init_UsageStats = __esm({
                     /* @__PURE__ */ jsx12(CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }),
                     /* @__PURE__ */ jsx12(XAxis, { type: "number", tickFormatter: fmtUsdCompact, ...chart.axis }),
                     /* @__PURE__ */ jsx12(YAxis, { type: "category", dataKey: "model", width: 170, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }),
-                    /* @__PURE__ */ jsx12(Tooltip4, { cursor: chart.cursor, content: /* @__PURE__ */ jsx12(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }),
+                    /* @__PURE__ */ jsx12(Tooltip5, { cursor: chart.cursor, content: /* @__PURE__ */ jsx12(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }),
                     /* @__PURE__ */ jsx12(Bar, { dataKey: "spend", name: "Spend", radius: [0, 3, 3, 0], barSize: 14, children: topModelSpendBars.map((r) => /* @__PURE__ */ jsx12(Cell, { fill: chartColor(r.model) }, r.model)) })
                   ] }) })
                 }
@@ -4311,7 +4354,7 @@ var init_UsageStats = __esm({
                     /* @__PURE__ */ jsx12(CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }),
                     /* @__PURE__ */ jsx12(XAxis, { type: "number", tickFormatter: fmtCompact, ...chart.axis }),
                     /* @__PURE__ */ jsx12(YAxis, { type: "category", dataKey: "model", width: 170, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }),
-                    /* @__PURE__ */ jsx12(Tooltip4, { cursor: chart.cursor, content: /* @__PURE__ */ jsx12(ChartTooltip, { valueFormatter: fmtInt, labelFormatter: (l) => l }) }),
+                    /* @__PURE__ */ jsx12(Tooltip5, { cursor: chart.cursor, content: /* @__PURE__ */ jsx12(ChartTooltip, { valueFormatter: fmtInt, labelFormatter: (l) => l }) }),
                     /* @__PURE__ */ jsx12(Legend, { ...chart.legend }),
                     /* @__PURE__ */ jsx12(Bar, { dataKey: "promptTokens", name: "Input", fill: SERIES.input, stackId: "t", barSize: 14 }),
                     /* @__PURE__ */ jsx12(Bar, { dataKey: "completionTokens", name: "Output", fill: SERIES.output, stackId: "t", barSize: 14, radius: [0, 3, 3, 0] })
@@ -4343,7 +4386,7 @@ var init_UsageStats = __esm({
                     /* @__PURE__ */ jsx12(CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }),
                     /* @__PURE__ */ jsx12(XAxis, { type: "number", tickFormatter: fmtUsdCompact, ...chart.axis }),
                     /* @__PURE__ */ jsx12(YAxis, { type: "category", dataKey: "keyAlias", width: 160, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }),
-                    /* @__PURE__ */ jsx12(Tooltip4, { cursor: chart.cursor, content: /* @__PURE__ */ jsx12(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }),
+                    /* @__PURE__ */ jsx12(Tooltip5, { cursor: chart.cursor, content: /* @__PURE__ */ jsx12(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }),
                     /* @__PURE__ */ jsx12(Bar, { dataKey: "spend", name: "Spend", fill: SERIES.input, radius: [0, 3, 3, 0], barSize: 14 })
                   ] }) })
                 }
@@ -4878,14 +4921,15 @@ import IconButton6 from "@mui/material/IconButton";
 import Button6 from "@mui/material/Button";
 import CircularProgress4 from "@mui/material/CircularProgress";
 import { alpha as alpha10 } from "@mui/material/styles";
-import { ExpandMore as ExpandMore3, Group, Add as Add2 } from "@mui/icons-material";
+import MuiTooltip from "@mui/material/Tooltip";
+import { ExpandMore as ExpandMore3, Group, Add as Add2, LockOutlined, GroupAddOutlined } from "@mui/icons-material";
 import {
   AreaChart as AreaChart2,
   Area as Area2,
   XAxis as XAxis2,
   YAxis as YAxis2,
   CartesianGrid as CartesianGrid2,
-  Tooltip as Tooltip5,
+  Tooltip as Tooltip6,
   ResponsiveContainer as ResponsiveContainer2
 } from "recharts";
 import { Fragment as Fragment8, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -4909,7 +4953,7 @@ var init_TeamUsage = __esm({
     "use strict";
     init_ui();
     fmtUsd2 = (n) => `$${(n ?? 0).toFixed(2)}`;
-    TeamCard = ({ team, usage, usageLoading, canManage, onEditTeam, onExpand }) => {
+    TeamCard = ({ team, usage, usageLoading, canManage, onEditTeam, canManageMembers, onManageMembers, onExpand }) => {
       const [expanded, setExpanded] = useState9(false);
       const chart = useChartTheme();
       const handleExpandChange = (newExpanded) => {
@@ -4946,7 +4990,7 @@ var init_TeamUsage = __esm({
             /* @__PURE__ */ jsx15(XAxis2, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }),
             /* @__PURE__ */ jsx15(YAxis2, { tickFormatter: fmtUsdCompact, width: 52, ...chart.axis }),
             /* @__PURE__ */ jsx15(
-              Tooltip5,
+              Tooltip6,
               {
                 cursor: chart.cursor,
                 content: /* @__PURE__ */ jsx15(ChartTooltip, { valueFormatter: (v) => `$${v.toFixed(4)}` })
@@ -5019,6 +5063,17 @@ var init_TeamUsage = __esm({
               children: "Edit"
             }
           ),
+          canManageMembers && onManageMembers && !canManage && /* @__PURE__ */ jsx15(MuiTooltip, { title: "Add or remove members of this team", children: /* @__PURE__ */ jsx15(
+            Button6,
+            {
+              size: "small",
+              variant: "text",
+              startIcon: /* @__PURE__ */ jsx15(GroupAddOutlined, {}),
+              onClick: () => onManageMembers(team),
+              sx: { textTransform: "none" },
+              children: "Manage members"
+            }
+          ) }),
           /* @__PURE__ */ jsx15(
             IconButton6,
             {
@@ -5149,9 +5204,23 @@ var init_TeamUsage = __esm({
       onEditTeam,
       canCreate,
       onCreateTeam,
-      onTeamExpand
+      onTeamExpand,
+      canManageMembers,
+      onManageMembers,
+      readOnly
     }) => {
-      const createAction = canCreate && onCreateTeam ? /* @__PURE__ */ jsx15(
+      const readOnlyBadge = /* @__PURE__ */ jsx15(MuiTooltip, { title: "Teams and memberships are managed in your identity provider. Changes made here would be overwritten, so editing is disabled.", children: /* @__PURE__ */ jsxs14(
+        Box14,
+        {
+          component: "span",
+          sx: { display: "inline-flex", alignItems: "center", gap: 0.5, color: "text.secondary", fontSize: 12.5 },
+          children: [
+            /* @__PURE__ */ jsx15(LockOutlined, { sx: { fontSize: 15 } }),
+            "Synced from identity provider"
+          ]
+        }
+      ) });
+      const createButton = canCreate && onCreateTeam ? /* @__PURE__ */ jsx15(
         Button6,
         {
           variant: "contained",
@@ -5162,6 +5231,7 @@ var init_TeamUsage = __esm({
           children: "Create Team"
         }
       ) : void 0;
+      const createAction = readOnly ? readOnlyBadge : createButton;
       if (loading) {
         return /* @__PURE__ */ jsxs14(SectionCard, { title: "Teams", actions: createAction, children: [
           /* @__PURE__ */ jsx15(Skeleton5, { variant: "rounded", height: 120, sx: { mb: 2 } }),
@@ -5191,6 +5261,8 @@ var init_TeamUsage = __esm({
               usageLoading: getTeamUsageLoading(team.team_id),
               canManage,
               onEditTeam,
+              canManageMembers: canManageMembers?.(team),
+              onManageMembers,
               onExpand: onTeamExpand
             },
             team.team_id
@@ -5220,7 +5292,7 @@ import TextField5 from "@mui/material/TextField";
 import InputAdornment3 from "@mui/material/InputAdornment";
 import { Search as Search2 } from "@mui/icons-material";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import Tooltip6 from "@mui/material/Tooltip";
+import Tooltip7 from "@mui/material/Tooltip";
 import Snackbar from "@mui/material/Snackbar";
 import Alert4 from "@mui/material/Alert";
 import { alpha as alpha11, useTheme as useTheme3 } from "@mui/material/styles";
@@ -5404,7 +5476,7 @@ var init_ModelsTable = __esm({
               ] }) }),
               /* @__PURE__ */ jsx16(TableBody5, { children: filteredModels.map((m) => /* @__PURE__ */ jsxs15(TableRow5, { hover: true, children: [
                 /* @__PURE__ */ jsx16(TableCell5, { children: /* @__PURE__ */ jsxs15(Box15, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-                  /* @__PURE__ */ jsx16(Tooltip6, { title: m.model_name, placement: "top", children: /* @__PURE__ */ jsx16(
+                  /* @__PURE__ */ jsx16(Tooltip7, { title: m.model_name, placement: "top", children: /* @__PURE__ */ jsx16(
                     "span",
                     {
                       role: "button",
@@ -5416,7 +5488,7 @@ var init_ModelsTable = __esm({
                       children: /* @__PURE__ */ jsx16(TagChip, { label: m.model_name, title: "Copy model ID" })
                     }
                   ) }),
-                  /* @__PURE__ */ jsx16(Tooltip6, { title: "Copy model ID", children: /* @__PURE__ */ jsx16(
+                  /* @__PURE__ */ jsx16(Tooltip7, { title: "Copy model ID", children: /* @__PURE__ */ jsx16(
                     Box15,
                     {
                       component: "span",
@@ -5839,6 +5911,19 @@ var init_feedback = __esm({
   }
 });
 
+// src/teamMemberManager.ts
+function isTeamMemberManager(team, userId, memberManagerRoles, readOnly) {
+  if (!team || !userId || !memberManagerRoles || memberManagerRoles.length === 0 || readOnly) {
+    return false;
+  }
+  return team.members_with_roles?.some((m) => m.user_id === userId && memberManagerRoles.includes(m.role)) ?? false;
+}
+var init_teamMemberManager = __esm({
+  "src/teamMemberManager.ts"() {
+    "use strict";
+  }
+});
+
 // src/unprovisionedCopy.ts
 function getUnprovisionedTitle() {
   return "Your LiteLLM account isn't set up yet";
@@ -5916,6 +6001,7 @@ var init_LiteLLMPage = __esm({
     init_dates();
     init_permissions();
     init_feedback();
+    init_teamMemberManager();
     init_unprovisionedCopy();
     PERIOD_LS_KEY2 = "litellm_usage_period";
     PAGE_TABS = ["overview", "keys", "teams", "models", "audit"];
@@ -6089,6 +6175,7 @@ var init_LiteLLMPage = __esm({
         ]);
         return allModels.filter((m) => allowed.has(m.model_name));
       }, [allModels, userInfo, teams]);
+      const getConfig = useCallback4(() => api.getConfig(), [api]);
       const handleGenerateKey = useCallback4(
         async (request) => {
           try {
@@ -6360,6 +6447,8 @@ var init_LiteLLMPage = __esm({
             for (const t of managedTeams ?? []) teamsById.set(t.team_id, t);
             for (const t of teams ?? []) teamsById.set(t.team_id, t);
             const visibleTeams = Array.from(teamsById.values());
+            const readOnly = liteLlmConfig?.teamManagement?.readOnly ?? false;
+            const memberManagerRoles = liteLlmConfig?.teamManagement?.memberManagerRoles ?? [];
             return /* @__PURE__ */ jsx18(
               TeamUsage,
               {
@@ -6367,10 +6456,13 @@ var init_LiteLLMPage = __esm({
                 loading: teamsLoading,
                 getTeamUsage: (teamId) => teamUsageCache[teamId] ?? null,
                 getTeamUsageLoading: (teamId) => teamUsageLoading[teamId] ?? false,
-                canManage: teamMgmtEnabled && canManageTeam,
+                canManage: teamMgmtEnabled && canManageTeam && !readOnly,
                 onEditTeam: (t) => setManageTeam({ mode: "edit", team: t }),
-                canCreate: teamMgmtEnabled && canCreateTeam,
+                canCreate: teamMgmtEnabled && canCreateTeam && !readOnly,
                 onCreateTeam: () => setManageTeam({ mode: "create" }),
+                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)
               }
             );
@@ -6414,7 +6506,7 @@ var init_LiteLLMPage = __esm({
             onCreateKey: handleGenerateKey,
             onUpdateKey: handleUpdateKey,
             onResetKeySpend: handleResetKeySpend,
-            onGetConfig: () => api.getConfig()
+            onGetConfig: getConfig
           }
         ),
         /* @__PURE__ */ jsx18(
@@ -6422,10 +6514,13 @@ var init_LiteLLMPage = __esm({
           {
             open: !!manageTeam,
             onClose: () => setManageTeam(null),
-            mode: manageTeam?.mode ?? "create",
+            mode: manageTeam?.mode === "members" ? "edit" : manageTeam?.mode ?? "create",
             team: manageTeam?.team,
             allModels: allModels ?? [],
             config: liteLlmConfig,
+            membersOnly: manageTeam?.mode === "members",
+            currentUserId: userInfo?.user_id,
+            memberManagerRoles: liteLlmConfig?.teamManagement?.memberManagerRoles,
             onSubmit: async (payload) => {
               try {
                 if (manageTeam?.mode === "edit" && manageTeam.team) {
@@ -6446,7 +6541,7 @@ var init_LiteLLMPage = __esm({
                 if (alert) alertApi.post(alert);
               }
             },
-            canManageMembers: teamMgmtEnabled && canManageMembers,
+            canManageMembers: teamMgmtEnabled && canManageMembers && !liteLlmConfig?.teamManagement?.readOnly,
             onAddMember: async (userEntityRef, maxBudgetInTeam) => {
               if (!manageTeam?.team) return;
               const updated = await api.addTeamMember(manageTeam.team.team_id, {
@@ -6570,7 +6665,7 @@ import FormControl2 from "@mui/material/FormControl";
 import Select2 from "@mui/material/Select";
 import MenuItem6 from "@mui/material/MenuItem";
 import Skeleton7 from "@mui/material/Skeleton";
-import { AreaChart as AreaChart3, Area as Area3, XAxis as XAxis3, Tooltip as Tooltip7, ResponsiveContainer as ResponsiveContainer3 } from "recharts";
+import { AreaChart as AreaChart3, Area as Area3, XAxis as XAxis3, Tooltip as Tooltip8, ResponsiveContainer as ResponsiveContainer3 } from "recharts";
 import { useApi as useApi5 } from "@backstage/core-plugin-api";
 import { useRouteRef as useRouteRef2 } from "@backstage/frontend-plugin-api";
 import { Link as Link3 } from "@backstage/core-components";
@@ -6735,7 +6830,7 @@ var LiteLLMHomeWidget = ({
             sx: { mb: 0.5 },
             children: /* @__PURE__ */ jsx20(ResponsiveContainer3, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs18(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [
               /* @__PURE__ */ jsx20(XAxis3, { dataKey: "date", hide: true }),
-              /* @__PURE__ */ jsx20(Tooltip7, { content: /* @__PURE__ */ jsx20(ChartTooltip, { valueFormatter: fmtUsd }) }),
+              /* @__PURE__ */ jsx20(Tooltip8, { content: /* @__PURE__ */ jsx20(ChartTooltip, { valueFormatter: fmtUsd }) }),
               /* @__PURE__ */ jsx20(
                 Area3,
                 {
@@ -6782,7 +6877,7 @@ import Collapse4 from "@mui/material/Collapse";
 import { useTheme as useTheme4 } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { ExpandMore as ExpandMore4 } from "@mui/icons-material";
-import { AreaChart as AreaChart4, Area as Area4, ResponsiveContainer as ResponsiveContainer4, Tooltip as Tooltip8, ReferenceLine as ReferenceLine2, XAxis as XAxis4 } from "recharts";
+import { AreaChart as AreaChart4, Area as Area4, ResponsiveContainer as ResponsiveContainer4, Tooltip as Tooltip9, ReferenceLine as ReferenceLine2, XAxis as XAxis4 } from "recharts";
 import { useApi as useApi6 } from "@backstage/core-plugin-api";
 import { Link as Link4 } from "@backstage/core-components";
 
@@ -7084,7 +7179,7 @@ var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, m
     }
     return /* @__PURE__ */ jsx21(ResponsiveContainer4, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs19(AreaChart4, { data, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [
       /* @__PURE__ */ jsx21(XAxis4, { dataKey: "date", hide: true }),
-      /* @__PURE__ */ jsx21(Tooltip8, { content: /* @__PURE__ */ jsx21(ChartTooltip, { valueFormatter: fmtUsd }) }),
+      /* @__PURE__ */ jsx21(Tooltip9, { content: /* @__PURE__ */ jsx21(ChartTooltip, { valueFormatter: fmtUsd }) }),
       maxBudget !== void 0 && /* @__PURE__ */ jsx21(
         ReferenceLine2,
         {