@acarmisc/backstage-plugin-litellm 0.31.1 → 0.33.0

package/dist/index.cjs.js

@@ -3127,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";
@@ -3148,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"));
@@ -3186,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)([]);
@@ -3200,6 +3204,7 @@ var init_ManageTeamDialog = __esm({
       const [memberBudget, setMemberBudget] = (0, import_react7.useState)("");
       const [memberBusy, setMemberBusy] = (0, import_react7.useState)(false);
       const [memberError, setMemberError] = (0, import_react7.useState)(null);
+      const [pendingMembers, setPendingMembers] = (0, import_react7.useState)([]);
       const [kbIds, setKbIds] = (0, import_react7.useState)([]);
       const [kbBusy, setKbBusy] = (0, import_react7.useState)(false);
       const [kbError, setKbError] = (0, import_react7.useState)(null);
@@ -3210,8 +3215,17 @@ var init_ManageTeamDialog = __esm({
       const maxBudgetCeiling = config?.teamManagement?.maxBudgetCeiling ?? FALLBACK_BUDGET_CEILING;
       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 creating = mode === "create";
+      const members = (0, import_react7.useMemo)(
+        () => creating ? pendingMembers.map((p) => ({
+          user_id: p.userEntityRef,
+          user_email: p.label,
+          role: "user"
+        })) : team?.members_with_roles ?? [],
+        [creating, pendingMembers, team]
+      );
+      const showMembers = !!canManageMembers || !!membersOnly;
+      const wide = showMembers && !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);
@@ -3256,8 +3270,8 @@ var init_ManageTeamDialog = __esm({
             email,
             label: email ? `${displayName} (${email})` : displayName
           };
-        }).filter((o) => !(o.email && existingEmails.has(o.email.toLowerCase()))).sort((a, b) => a.label.localeCompare(b.label));
-      }, [searchUsers, members]);
+        }).filter((o) => !(o.email && existingEmails.has(o.email.toLowerCase()))).filter((o) => !pendingMembers.some((p) => p.userEntityRef === o.ref)).sort((a, b) => a.label.localeCompare(b.label));
+      }, [searchUsers, members, pendingMembers]);
       (0, import_react7.useEffect)(() => {
         return () => {
           if (debounceTimerRef.current) {
@@ -3291,6 +3305,7 @@ var init_ManageTeamDialog = __esm({
           setMemberRef("");
           setMemberBudget("");
           setMemberError(null);
+          setPendingMembers([]);
           setKbIds(team?.object_permission?.vector_stores ?? []);
           setKbError(null);
           setMcpIds(team?.object_permission?.mcp_servers ?? []);
@@ -3349,7 +3364,13 @@ var init_ManageTeamDialog = __esm({
               ...budgetDuration && { budget_duration: budgetDuration }
             };
           }
-          await onSubmit(payload);
+          await onSubmit(
+            payload,
+            creating ? pendingMembers.map(({ userEntityRef, maxBudgetInTeam }) => ({
+              userEntityRef,
+              ...maxBudgetInTeam !== void 0 && { maxBudgetInTeam }
+            })) : void 0
+          );
           onClose();
         } catch (err) {
           setError(err instanceof Error ? err.message : "An error occurred");
@@ -3358,13 +3379,26 @@ var init_ManageTeamDialog = __esm({
         }
       };
       const handleAddMember = async () => {
-        if (!onAddMember || !memberRef.trim()) return;
+        if (!memberRef.trim() || !creating && !onAddMember) 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;
         }
+        if (creating) {
+          const ref = memberRef.trim();
+          if (!pendingMembers.some((p) => p.userEntityRef === ref)) {
+            setPendingMembers((list) => [
+              ...list,
+              { userEntityRef: ref, label: memberQuery.trim() || ref, maxBudgetInTeam: budget }
+            ]);
+          }
+          setMemberQuery("");
+          setMemberRef("");
+          setMemberBudget("");
+          return;
+        }
         try {
           setMemberBusy(true);
           await onAddMember(memberRef.trim(), budget);
@@ -3378,6 +3412,10 @@ var init_ManageTeamDialog = __esm({
         }
       };
       const handleRemoveMember = async (userId) => {
+        if (creating) {
+          setPendingMembers((list) => list.filter((p) => p.userEntityRef !== userId));
+          return;
+        }
         if (!onRemoveMember) return;
         setMemberError(null);
         try {
@@ -3421,186 +3459,242 @@ 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;
-      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" }),
+      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 submitLabel = creating ? "Create team" : "Save";
+      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: wide ? "md" : "sm", fullWidth: true, children: [
+        /* @__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,
+          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."
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            import_Box10.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" }),
-            memberError && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Alert2.default, { severity: "error", sx: { mb: 1 }, onClose: () => setMemberError(null), children: memberError }),
-            members.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Typography8.default, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "No members yet." }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableContainer2.default, { component: import_Paper4.default, variant: "outlined", sx: { borderRadius: 1.5, mb: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Table2.default, { size: "small", sx: dataTableSx, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableHead2.default, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_TableRow2.default, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableCell2.default, { children: "User" }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableCell2.default, { align: "right", children: "Role" }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableCell2.default, { align: "right", sx: { width: 40 } })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableBody2.default, { children: members.map((m) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_TableRow2.default, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableCell2.default, { children: m.user_email ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Typography8.default, { variant: "body2", children: m.user_email }),
+              sx: {
+                display: "grid",
+                gridTemplateColumns: {
+                  xs: "1fr",
+                  md: wide ? "minmax(0, 1fr) minmax(0, 1fr)" : "1fr"
+                },
+                gap: 3,
+                alignItems: "start"
+              },
+              children: [
+                !membersOnly && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Box10.default, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+                  wide && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Typography8.default, { variant: "subtitle2", children: "Settings" }),
                   /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                    import_Typography8.default,
+                    import_TextField3.default,
                     {
-                      variant: "caption",
-                      color: "text.secondary",
-                      sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 },
-                      children: m.user_id
+                      label: "Team Alias",
+                      value: alias,
+                      onChange: (e) => setAlias(e.target.value),
+                      disabled: submitting,
+                      fullWidth: true
                     }
-                  )
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  import_Typography8.default,
-                  {
-                    variant: "body2",
-                    sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" },
-                    children: m.user_id
-                  }
-                ) }),
-                /* @__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" })
-                  }
-                ) })
-              ] }, m.user_id)) })
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Box10.default, { sx: { display: "flex", gap: 1, alignItems: "flex-start", flexWrap: "wrap" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                import_Autocomplete2.default,
-                {
-                  freeSolo: true,
-                  autoHighlight: true,
-                  options: userOptions,
-                  loading: usersLoading,
-                  inputValue: memberQuery,
-                  onInputChange: (_, newInputValue, reason) => {
-                    setMemberQuery(newInputValue);
-                    if (reason === "input" || reason === "clear") {
-                      setMemberRef(newInputValue);
-                      handleUserSearch(newInputValue);
+                  ),
+                  /* @__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: "Only models your admin allow-listed for teams. At least one is required."
+                        }
+                      )
                     }
-                  },
-                  onChange: (_, newValue) => {
-                    if (newValue && typeof newValue !== "string") {
-                      setMemberQuery(newValue.label);
-                      setMemberRef(newValue.ref);
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                    import_Box10.default,
+                    {
+                      sx: {
+                        display: "grid",
+                        gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+                        gap: 2
+                      },
+                      children: [
+                        /* @__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
+                          }
+                        ),
+                        /* @__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))
+                          }
+                        )
+                      ]
                     }
-                  },
-                  getOptionLabel: (o) => typeof o === "string" ? o : o.label,
-                  isOptionEqualToValue: (o, v) => o.ref === (typeof v === "string" ? v : v.ref),
-                  disabled: memberBusy,
-                  sx: { flex: 1, minWidth: 260 },
-                  renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                    import_TextField3.default,
+                  ),
+                  allowUnlimitedBudget && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    import_FormControlLabel2.default,
                     {
-                      ...params,
-                      label: "Add member",
-                      placeholder: "Search by name or email\u2026",
-                      size: "small",
-                      helperText: "Pick a catalog user, or paste a user entity ref",
-                      InputProps: {
-                        ...params.InputProps,
-                        endAdornment: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-                          usersLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_CircularProgress3.default, { color: "inherit", size: 14 }) : null,
-                          params.InputProps.endAdornment
-                        ] })
-                      }
+                      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,
-                {
-                  label: "Max budget in team ($)",
-                  type: "number",
-                  value: memberBudget,
-                  onChange: (e) => setMemberBudget(e.target.value),
-                  disabled: memberBusy,
-                  size: "small",
-                  sx: { width: 160 }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                import_Button4.default,
-                {
-                  onClick: handleAddMember,
-                  disabled: memberBusy || !memberRef.trim(),
-                  variant: "outlined",
-                  sx: { mt: 0.5 },
-                  children: "Add"
-                }
-              )
-            ] })
-          ] }),
-          showKnowledgeBases && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Box10.default, { children: [
+                ] }),
+                showMembers && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Box10.default, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Typography8.default, { variant: "subtitle2", sx: { mb: creating ? 0.25 : 1 }, children: creating ? "Initial members" : "Members" }),
+                  creating && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Typography8.default, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "Added as team users right after the team is created." }),
+                  memberError && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Alert2.default, { severity: "error", sx: { mb: 1 }, onClose: () => setMemberError(null), children: memberError }),
+                  members.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Typography8.default, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: creating ? "No members picked yet \u2014 you can also add them later." : "No members yet." }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableContainer2.default, { component: import_Paper4.default, variant: "outlined", sx: { borderRadius: 1.5, mb: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Table2.default, { size: "small", sx: dataTableSx, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableHead2.default, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_TableRow2.default, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableCell2.default, { children: "User" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableCell2.default, { align: "right", children: "Role" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableCell2.default, { align: "right", sx: { width: 40 } })
+                    ] }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableBody2.default, { children: members.map((m) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_TableRow2.default, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_TableCell2.default, { children: m.user_email ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Typography8.default, { variant: "body2", children: m.user_email }),
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                          import_Typography8.default,
+                          {
+                            variant: "caption",
+                            color: "text.secondary",
+                            sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 },
+                            children: m.user_id
+                          }
+                        )
+                      ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                        import_Typography8.default,
+                        {
+                          variant: "body2",
+                          sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+                          children: m.user_id
+                        }
+                      ) }),
+                      /* @__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: (() => {
+                        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: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_Autocomplete2.default,
+                      {
+                        freeSolo: true,
+                        autoHighlight: true,
+                        options: userOptions,
+                        loading: usersLoading,
+                        inputValue: memberQuery,
+                        onInputChange: (_, newInputValue, reason) => {
+                          setMemberQuery(newInputValue);
+                          if (reason === "input" || reason === "clear") {
+                            setMemberRef(newInputValue);
+                            handleUserSearch(newInputValue);
+                          }
+                        },
+                        onChange: (_, newValue) => {
+                          if (newValue && typeof newValue !== "string") {
+                            setMemberQuery(newValue.label);
+                            setMemberRef(newValue.ref);
+                          }
+                        },
+                        getOptionLabel: (o) => typeof o === "string" ? o : o.label,
+                        isOptionEqualToValue: (o, v) => o.ref === (typeof v === "string" ? v : v.ref),
+                        disabled: memberBusy,
+                        sx: { flex: "1 1 240px" },
+                        renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                          import_TextField3.default,
+                          {
+                            ...params,
+                            label: "Add member",
+                            placeholder: "Search by name or email\u2026",
+                            size: "small",
+                            helperText: "Pick a catalog user, or paste a user entity ref",
+                            InputProps: {
+                              ...params.InputProps,
+                              endAdornment: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                                usersLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_CircularProgress3.default, { color: "inherit", size: 14 }) : null,
+                                params.InputProps.endAdornment
+                              ] })
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    !membersOnly && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_TextField3.default,
+                      {
+                        label: "Max budget in team ($)",
+                        type: "number",
+                        value: memberBudget,
+                        onChange: (e) => setMemberBudget(e.target.value),
+                        disabled: memberBusy,
+                        size: "small",
+                        sx: { width: 150 }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_Button4.default,
+                      {
+                        onClick: handleAddMember,
+                        disabled: memberBusy || !memberRef.trim(),
+                        variant: "outlined",
+                        sx: { mt: 0.5 },
+                        children: "Add"
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          !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." }),
@@ -3627,7 +3721,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." }),
@@ -3656,8 +3750,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..." : submitLabel })
         ] })
       ] });
     };
@@ -4893,7 +4987,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";
@@ -4914,12 +5008,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) => {
@@ -5029,6 +5124,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,
             {
@@ -5159,9 +5265,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",
@@ -5172,6 +5292,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 } }),
@@ -5201,6 +5322,8 @@ var init_TeamUsage = __esm({
               usageLoading: getTeamUsageLoading(team.team_id),
               canManage,
               onEditTeam,
+              canManageMembers: canManageMembers?.(team),
+              onManageMembers,
               onExpand: onTeamExpand
             },
             team.team_id
@@ -5229,7 +5352,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";
@@ -5251,7 +5374,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();
@@ -5414,7 +5537,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",
@@ -5426,7 +5549,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",
@@ -5836,6 +5959,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";
@@ -5912,6 +6048,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";
@@ -6358,6 +6495,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,
               {
@@ -6365,10 +6504,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)
               }
             );
@@ -6420,11 +6562,14 @@ 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,
-            onSubmit: async (payload) => {
+            membersOnly: manageTeam?.mode === "members",
+            currentUserId: userInfo?.user_id,
+            memberManagerRoles: liteLlmConfig?.teamManagement?.memberManagerRoles,
+            onSubmit: async (payload, initialMembers) => {
               try {
                 if (manageTeam?.mode === "edit" && manageTeam.team) {
                   const loadedAt = manageTeam.team.metadata?.updated_at_iso;
@@ -6434,7 +6579,23 @@ var init_LiteLLMPage = __esm({
                     ...typeof loadedAt === "string" ? { expectedUpdatedAtIso: loadedAt } : {}
                   });
                 } else {
-                  await api.createTeam(payload);
+                  const created = await api.createTeam(payload);
+                  const failed = [];
+                  for (const m of initialMembers ?? []) {
+                    try {
+                      await api.addTeamMember(created.team_id, m);
+                    } catch (e) {
+                      failed.push(`${m.userEntityRef} (${e.message})`);
+                    }
+                  }
+                  if (failed.length) {
+                    alertApi.post({
+                      message: `Team created, but some members could not be added: ${failed.join(", ")}`,
+                      severity: "warning"
+                    });
+                    refreshTeams();
+                    return;
+                  }
                 }
                 const alert = toastFor("teamSaveSuccess");
                 if (alert) alertApi.post(alert);
@@ -6444,7 +6605,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, {