@acarmisc/backstage-plugin-litellm 0.31.0 → 0.32.0

package/dist/components/ManageTeamDialog.d.ts

@@ -26,6 +26,12 @@ interface ManageTeamDialogProps {
     mcpServers?: McpServerInfo[];
     /** Called to replace the team's attached MCP servers; parent refreshes `team`. */
     onSaveMcpServers?: (mcpServerIds: string[]) => Promise<void>;
+    /** When true, only members section is shown (not budget/models/KB/MCP); title changes; Save becomes Done. */
+    membersOnly?: boolean;
+    /** Current user's LiteLLM ID; used in membersOnly mode to prevent self-removal and role-restricted removal. */
+    currentUserId?: string;
+    /** Roles that can manage members in membersOnly mode; used to disable removal of role holders. */
+    memberManagerRoles?: string[];
 }
 export declare const ManageTeamDialog: FC<ManageTeamDialogProps>;
 export {};

package/dist/components/TeamUsage.d.ts

@@ -12,6 +12,11 @@ interface TeamUsageProps {
     onCreateTeam?: () => void;
     /** Called when a team card is expanded to trigger data loading. */
     onTeamExpand?: (team: TeamInfo) => void;
+    /** Per-team: whether the caller may manage this team's members only. */
+    canManageMembers?: (team: TeamInfo) => boolean;
+    onManageMembers?: (team: TeamInfo) => void;
+    /** Teams are synced from an identity provider: show a badge, no write controls. */
+    readOnly?: boolean;
 }
 export declare const TeamUsage: FC<TeamUsageProps>;
 export {};

package/dist/index.cjs.js

@@ -2575,9 +2575,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 = (0, import_react6.useRef)(onGetConfig);
+      onGetConfigRef.current = onGetConfig;
+      (0, import_react6.useEffect)(() => {
+        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;
@@ -3114,7 +3127,7 @@ var init_KeyFormDialog = __esm({
 });
 
 // src/components/ManageTeamDialog.tsx
-var import_react7, import_Dialog3, import_DialogTitle3, import_DialogContent3, import_DialogActions3, import_TextField3, import_Button4, import_Alert2, import_Checkbox2, import_FormControlLabel2, import_Autocomplete2, import_CircularProgress3, import_MenuItem2, import_Box10, import_Divider2, import_Typography8, import_IconButton4, import_Paper4, import_Table2, import_TableBody2, import_TableCell2, import_TableContainer2, import_TableHead2, import_TableRow2, import_icons_material5, import_core_plugin_api4, import_plugin_catalog_react, import_catalog_model, import_jsx_runtime11, BUDGET_DURATION_OPTIONS, DEFAULT_BUDGET_DURATION, FALLBACK_BUDGET_CEILING, ManageTeamDialog;
+var import_react7, import_Dialog3, import_DialogTitle3, import_DialogContent3, import_DialogActions3, import_TextField3, import_Button4, import_Alert2, import_Checkbox2, import_FormControlLabel2, import_Autocomplete2, import_CircularProgress3, import_MenuItem2, import_Box10, import_Divider2, import_Typography8, import_IconButton4, import_Tooltip4, import_Paper4, import_Table2, import_TableBody2, import_TableCell2, import_TableContainer2, import_TableHead2, import_TableRow2, import_icons_material5, import_core_plugin_api4, import_plugin_catalog_react, import_catalog_model, import_jsx_runtime11, BUDGET_DURATION_OPTIONS, DEFAULT_BUDGET_DURATION, FALLBACK_BUDGET_CEILING, ManageTeamDialog;
 var init_ManageTeamDialog = __esm({
   "src/components/ManageTeamDialog.tsx"() {
     "use strict";
@@ -3135,6 +3148,7 @@ var init_ManageTeamDialog = __esm({
     import_Divider2 = __toESM(require("@mui/material/Divider"));
     import_Typography8 = __toESM(require("@mui/material/Typography"));
     import_IconButton4 = __toESM(require("@mui/material/IconButton"));
+    import_Tooltip4 = __toESM(require("@mui/material/Tooltip"));
     import_Paper4 = __toESM(require("@mui/material/Paper"));
     import_Table2 = __toESM(require("@mui/material/Table"));
     import_TableBody2 = __toESM(require("@mui/material/TableBody"));
@@ -3173,7 +3187,10 @@ var init_ManageTeamDialog = __esm({
       onSaveKnowledgeBases,
       canManageMcpServers,
       mcpServers,
-      onSaveMcpServers
+      onSaveMcpServers,
+      membersOnly,
+      currentUserId,
+      memberManagerRoles
     }) => {
       const [alias, setAlias] = (0, import_react7.useState)("");
       const [models, setModels] = (0, import_react7.useState)([]);
@@ -3198,7 +3215,7 @@ var init_ManageTeamDialog = __esm({
       const hideBudgetForManagers = config?.display?.hideTeamBudgetForManagers ?? false;
       const budgetWriteOnly = hideBudgetForManagers && mode === "edit";
       const members = (0, import_react7.useMemo)(() => team?.members_with_roles ?? [], [team]);
-      const showMembers = mode === "edit" && !!canManageMembers;
+      const showMembers = mode === "edit" && !!canManageMembers || membersOnly;
       const catalogApi = (0, import_core_plugin_api4.useApi)(import_plugin_catalog_react.catalogApiRef);
       const [searchUsers, setSearchUsers] = (0, import_react7.useState)([]);
       const [usersLoading, setUsersLoading] = (0, import_react7.useState)(false);
@@ -3347,7 +3364,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;
@@ -3408,72 +3425,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__ */ (0, import_jsx_runtime11.jsxs)(import_Dialog3.default, { open, onClose, maxWidth: "sm", fullWidth: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_DialogTitle3.default, { children: mode === "create" ? "Create Team" : "Edit Team" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_DialogTitle3.default, { children: getDialogTitle() }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_DialogContent3.default, { sx: { pt: 2, display: "flex", flexDirection: "column", gap: 2 }, children: [
           error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Alert2.default, { severity: "error", children: error }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_TextField3.default,
-            {
-              label: "Team Alias",
-              value: alias,
-              onChange: (e) => setAlias(e.target.value),
-              disabled: submitting,
-              fullWidth: true
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_Autocomplete2.default,
-            {
-              multiple: true,
-              options: modelNames,
-              value: models,
-              onChange: (_, newValue) => setModels(newValue),
-              disabled: submitting,
-              renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                import_TextField3.default,
-                {
-                  ...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__ */ (0, import_jsx_runtime11.jsx)(
-            import_TextField3.default,
-            {
-              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__ */ (0, import_jsx_runtime11.jsx)(
-            import_FormControlLabel2.default,
-            {
-              control: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Checkbox2.default, { checked: unlimited, onChange: (e) => setUnlimited(e.target.checked), disabled: submitting }),
-              label: "Unlimited Budget"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_TextField3.default,
-            {
-              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__ */ (0, import_jsx_runtime11.jsx)(import_MenuItem2.default, { value: o.value, children: o.label }, o.value))
-            }
-          ),
+          membersOnly && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Alert2.default, { 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__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_TextField3.default,
+              {
+                label: "Team Alias",
+                value: alias,
+                onChange: (e) => setAlias(e.target.value),
+                disabled: submitting,
+                fullWidth: true
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_Autocomplete2.default,
+              {
+                multiple: true,
+                options: modelNames,
+                value: models,
+                onChange: (_, newValue) => setModels(newValue),
+                disabled: submitting,
+                renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_TextField3.default,
+                  {
+                    ...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__ */ (0, import_jsx_runtime11.jsx)(
+              import_TextField3.default,
+              {
+                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__ */ (0, import_jsx_runtime11.jsx)(
+              import_FormControlLabel2.default,
+              {
+                control: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Checkbox2.default, { checked: unlimited, onChange: (e) => setUnlimited(e.target.checked), disabled: submitting }),
+                label: "Unlimited Budget"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_TextField3.default,
+              {
+                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__ */ (0, import_jsx_runtime11.jsx)(import_MenuItem2.default, { value: o.value, children: o.label }, o.value))
+              }
+            )
+          ] }),
           showMembers && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Box10.default, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Divider2.default, { sx: { my: 1 } }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Typography8.default, { variant: "subtitle2", sx: { mb: 1 }, children: "Members" }),
@@ -3505,17 +3545,20 @@ var init_ManageTeamDialog = __esm({
                   }
                 ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableCell2.default, { align: "right", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StatusPill, { label: m.role, tone: m.role === "admin" ? "accent" : "neutral", dot: false }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableCell2.default, { align: "right", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  import_IconButton4.default,
-                  {
-                    edge: "end",
-                    size: "small",
-                    "aria-label": `remove ${m.user_id}`,
-                    disabled: memberBusy,
-                    onClick: () => handleRemoveMember(m.user_id),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons_material5.Delete, { fontSize: "small" })
-                  }
-                ) })
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableCell2.default, { align: "right", children: (() => {
+                  const { disabled, reason } = isRemovalDisabled(m.user_id, m.role);
+                  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Tooltip4.default, { title: reason ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    import_IconButton4.default,
+                    {
+                      edge: "end",
+                      size: "small",
+                      "aria-label": `remove ${m.user_id}`,
+                      disabled: memberBusy || disabled,
+                      onClick: () => handleRemoveMember(m.user_id),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons_material5.Delete, { fontSize: "small" })
+                    }
+                  ) }) });
+                })() })
               ] }, m.user_id)) })
             ] }) }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Box10.default, { sx: { display: "flex", gap: 1, alignItems: "flex-start", flexWrap: "wrap" }, children: [
@@ -3563,7 +3606,7 @@ var init_ManageTeamDialog = __esm({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              !membersOnly && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 import_TextField3.default,
                 {
                   label: "Max budget in team ($)",
@@ -3587,7 +3630,7 @@ var init_ManageTeamDialog = __esm({
               )
             ] })
           ] }),
-          showKnowledgeBases && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Box10.default, { children: [
+          !membersOnly && showKnowledgeBases && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Box10.default, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Divider2.default, { sx: { my: 1 } }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Typography8.default, { variant: "subtitle2", sx: { mb: 1 }, children: "Knowledge Bases" }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Typography8.default, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "Attaching a knowledge base exposes its documents to every key in this team." }),
@@ -3614,7 +3657,7 @@ var init_ManageTeamDialog = __esm({
               }
             ) })
           ] }),
-          showMcpServers && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Box10.default, { children: [
+          !membersOnly && showMcpServers && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Box10.default, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Divider2.default, { sx: { my: 1 } }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Typography8.default, { variant: "subtitle2", sx: { mb: 1 }, children: "MCP Servers" }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Typography8.default, { 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." }),
@@ -3643,8 +3686,8 @@ var init_ManageTeamDialog = __esm({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_DialogActions3.default, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Button4.default, { onClick: onClose, disabled: submitting, children: "Cancel" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Button4.default, { onClick: handleSubmit, disabled: submitting, variant: "contained", children: submitting ? "Saving..." : "Save" })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Button4.default, { onClick: onClose, disabled: submitting, children: membersOnly ? "Done" : "Cancel" }),
+          !membersOnly && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Button4.default, { onClick: handleSubmit, disabled: submitting, variant: "contained", children: submitting ? "Saving..." : "Save" })
         ] })
       ] });
     };
@@ -4880,7 +4923,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_icons_material7, import_recharts2, import_jsx_runtime15, fmtUsd2, 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_CircularProgress4, import_styles10, import_Tooltip5, import_icons_material7, import_recharts2, import_jsx_runtime15, fmtUsd2, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
     "use strict";
@@ -4901,12 +4944,13 @@ var init_TeamUsage = __esm({
     import_Button6 = __toESM(require("@mui/material/Button"));
     import_CircularProgress4 = __toESM(require("@mui/material/CircularProgress"));
     import_styles10 = require("@mui/material/styles");
+    import_Tooltip5 = __toESM(require("@mui/material/Tooltip"));
     import_icons_material7 = require("@mui/icons-material");
     import_recharts2 = require("recharts");
     init_ui();
     import_jsx_runtime15 = require("react/jsx-runtime");
     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] = (0, import_react10.useState)(false);
       const chart = useChartTheme();
       const handleExpandChange = (newExpanded) => {
@@ -5016,6 +5060,17 @@ var init_TeamUsage = __esm({
               children: "Edit"
             }
           ),
+          canManageMembers && onManageMembers && !canManage && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Tooltip5.default, { title: "Add or remove members of this team", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            import_Button6.default,
+            {
+              size: "small",
+              variant: "text",
+              startIcon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_material7.GroupAddOutlined, {}),
+              onClick: () => onManageMembers(team),
+              sx: { textTransform: "none" },
+              children: "Manage members"
+            }
+          ) }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             import_IconButton6.default,
             {
@@ -5146,9 +5201,23 @@ var init_TeamUsage = __esm({
       onEditTeam,
       canCreate,
       onCreateTeam,
-      onTeamExpand
+      onTeamExpand,
+      canManageMembers,
+      onManageMembers,
+      readOnly
     }) => {
-      const createAction = canCreate && onCreateTeam ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      const readOnlyBadge = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Tooltip5.default, { title: "Teams and memberships are managed in your identity provider. Changes made here would be overwritten, so editing is disabled.", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        import_Box14.default,
+        {
+          component: "span",
+          sx: { display: "inline-flex", alignItems: "center", gap: 0.5, color: "text.secondary", fontSize: 12.5 },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_material7.LockOutlined, { sx: { fontSize: 15 } }),
+            "Synced from identity provider"
+          ]
+        }
+      ) });
+      const createButton = canCreate && onCreateTeam ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         import_Button6.default,
         {
           variant: "contained",
@@ -5159,6 +5228,7 @@ var init_TeamUsage = __esm({
           children: "Create Team"
         }
       ) : void 0;
+      const createAction = readOnly ? readOnlyBadge : createButton;
       if (loading) {
         return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(SectionCard, { title: "Teams", actions: createAction, children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Skeleton5.default, { variant: "rounded", height: 120, sx: { mb: 2 } }),
@@ -5188,6 +5258,8 @@ var init_TeamUsage = __esm({
               usageLoading: getTeamUsageLoading(team.team_id),
               canManage,
               onEditTeam,
+              canManageMembers: canManageMembers?.(team),
+              onManageMembers,
               onExpand: onTeamExpand
             },
             team.team_id
@@ -5216,7 +5288,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_MenuItem4, import_Select, import_FormControl, import_InputLabel, import_TextField5, import_InputAdornment3, import_icons_material8, import_ContentCopy, import_Tooltip4, 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_MenuItem4, 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 init_ModelsTable = __esm({
   "src/components/ModelsTable.tsx"() {
     "use strict";
@@ -5238,7 +5310,7 @@ var init_ModelsTable = __esm({
     import_InputAdornment3 = __toESM(require("@mui/material/InputAdornment"));
     import_icons_material8 = require("@mui/icons-material");
     import_ContentCopy = __toESM(require("@mui/icons-material/ContentCopy"));
-    import_Tooltip4 = __toESM(require("@mui/material/Tooltip"));
+    import_Tooltip6 = __toESM(require("@mui/material/Tooltip"));
     import_Snackbar = __toESM(require("@mui/material/Snackbar"));
     import_Alert4 = __toESM(require("@mui/material/Alert"));
     init_ui();
@@ -5401,7 +5473,7 @@ var init_ModelsTable = __esm({
               ] }) }),
               /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_TableBody5.default, { children: filteredModels.map((m) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_TableRow5.default, { hover: true, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_TableCell5.default, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Box15.default, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Tooltip4.default, { title: m.model_name, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Tooltip6.default, { title: m.model_name, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     "span",
                     {
                       role: "button",
@@ -5413,7 +5485,7 @@ var init_ModelsTable = __esm({
                       children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TagChip, { label: m.model_name, title: "Copy model ID" })
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Tooltip4.default, { title: "Copy model ID", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Tooltip6.default, { title: "Copy model ID", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     import_Box15.default,
                     {
                       component: "span",
@@ -5823,6 +5895,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";
@@ -5899,6 +5984,7 @@ var init_LiteLLMPage = __esm({
     init_dates();
     init_permissions();
     init_feedback();
+    init_teamMemberManager();
     init_unprovisionedCopy();
     import_jsx_runtime18 = require("react/jsx-runtime");
     PERIOD_LS_KEY2 = "litellm_usage_period";
@@ -6073,6 +6159,7 @@ var init_LiteLLMPage = __esm({
         ]);
         return allModels.filter((m) => allowed.has(m.model_name));
       }, [allModels, userInfo, teams]);
+      const getConfig = (0, import_react13.useCallback)(() => api.getConfig(), [api]);
       const handleGenerateKey = (0, import_react13.useCallback)(
         async (request) => {
           try {
@@ -6344,6 +6431,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__ */ (0, import_jsx_runtime18.jsx)(
               TeamUsage,
               {
@@ -6351,10 +6440,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)
               }
             );
@@ -6398,7 +6490,7 @@ var init_LiteLLMPage = __esm({
             onCreateKey: handleGenerateKey,
             onUpdateKey: handleUpdateKey,
             onResetKeySpend: handleResetKeySpend,
-            onGetConfig: () => api.getConfig()
+            onGetConfig: getConfig
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -6406,10 +6498,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) {
@@ -6430,7 +6525,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, {