@acarmisc/backstage-plugin-litellm 0.32.0 → 0.33.0

package/dist/components/ManageTeamDialog.d.ts

@@ -1,5 +1,10 @@
 import { FC } from 'react';
 import { TeamInfo, ModelInfo, LiteLlmConfig, CreateTeamRequest, UpdateTeamRequest, VectorStoreInfo, McpServerInfo } from '../types';
+/** A catalog User entity flattened into what the member picker needs. */
+export interface InitialMember {
+    userEntityRef: string;
+    maxBudgetInTeam?: number;
+}
 interface ManageTeamDialogProps {
     open: boolean;
     onClose: () => void;
@@ -7,7 +12,11 @@ interface ManageTeamDialogProps {
     team?: TeamInfo;
     allModels: ModelInfo[];
     config?: LiteLlmConfig;
-    onSubmit: (payload: CreateTeamRequest | UpdateTeamRequest) => Promise<void>;
+    /**
+     * Saves the team. In create mode, `initialMembers` lists the members picked
+     * in the dialog; the parent adds them once the team exists.
+     */
+    onSubmit: (payload: CreateTeamRequest | UpdateTeamRequest, initialMembers?: InitialMember[]) => Promise<void>;
     /** When true, the Members section (edit mode only) exposes add/remove controls. */
     canManageMembers?: boolean;
     /** Called to add a member; the parent is expected to refresh `team` on success. */

package/dist/index.cjs.js

@@ -3204,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);
@@ -3214,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 || membersOnly;
+      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);
@@ -3260,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) {
@@ -3295,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 ?? []);
@@ -3353,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");
@@ -3362,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 = !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);
@@ -3382,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 {
@@ -3435,13 +3469,14 @@ var init_ManageTeamDialog = __esm({
         }
         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: "sm", fullWidth: true, children: [
+      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 }),
@@ -3450,186 +3485,215 @@ var init_ManageTeamDialog = __esm({
             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" }),
-            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 }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            import_Box10.default,
+            {
+              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: (() => {
-                  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,
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    import_Autocomplete2.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);
+                      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"
                     }
                   )
-                }
-              ),
-              !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: 160 }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                import_Button4.default,
-                {
-                  onClick: handleAddMember,
-                  disabled: memberBusy || !memberRef.trim(),
-                  variant: "outlined",
-                  sx: { mt: 0.5 },
-                  children: "Add"
-                }
-              )
-            ] })
-          ] }),
+                ] }),
+                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" }),
@@ -3687,7 +3751,7 @@ 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: membersOnly ? "Done" : "Cancel" }),
-          !membersOnly && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Button4.default, { onClick: handleSubmit, disabled: submitting, variant: "contained", children: submitting ? "Saving..." : "Save" })
+          !membersOnly && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Button4.default, { onClick: handleSubmit, disabled: submitting, variant: "contained", children: submitting ? "Saving..." : submitLabel })
         ] })
       ] });
     };
@@ -6505,7 +6569,7 @@ var init_LiteLLMPage = __esm({
             membersOnly: manageTeam?.mode === "members",
             currentUserId: userInfo?.user_id,
             memberManagerRoles: liteLlmConfig?.teamManagement?.memberManagerRoles,
-            onSubmit: async (payload) => {
+            onSubmit: async (payload, initialMembers) => {
               try {
                 if (manageTeam?.mode === "edit" && manageTeam.team) {
                   const loadedAt = manageTeam.team.metadata?.updated_at_iso;
@@ -6515,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);