fix(webapp): only offer assignable roles in the team role picker

The team page's role dropdown listed every role the org's plan allows,
including roles above the viewer's own level. Picking one of those was
always rejected, so the dropdown advertised a change that could not
happen.

Narrow the list to the roles the viewer's own role lets them assign,
reusing the same ladder the invite flow already applies. Plan-locked
roles are kept in the list and still render as "Name (upgrade)" linking
to billing: being unable to assign a role and needing a plan upgrade to
assign it are different situations, and collapsing them would offer a
viewer an upgrade for a role their own role would still not let them
hand out. The member's current role stays listed so the dropdown keeps
showing what they actually hold.

TeamPresenter now returns `offerableRoleIds` (the ladder) alongside the
existing `assignableRoleIds` (the plan), and the invite loader reuses
both instead of re-querying — its dropdown has no upgrade affordance, so
it keeps intersecting the two.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: claude

.server-changes/team-role-picker-only-assignable-roles.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+The Team page's role dropdown now only lists roles you are actually allowed to assign, instead of showing higher roles that were rejected when you picked them. Roles that need a plan upgrade still appear, with a link to upgrade.

apps/webapp/app/presenters/TeamPresenter.server.ts

@@ -1,6 +1,7 @@
 import { getTeamMembersAndInvites } from "~/models/member.server";
 import { rbac } from "~/services/rbac.server";
 import { getCurrentPlan, getLimit, getPlans } from "~/services/platform.v3.server";
+import { offerableRoleIds as computeOfferableRoleIds } from "~/utils/inviteRoleLadder";
 import { BasePresenter } from "./v3/basePresenter.server";
 
 export class TeamPresenter extends BasePresenter {
@@ -14,25 +15,51 @@ export class TeamPresenter extends BasePresenter {
       return;
     }
 
-    const [baseLimit, currentPlan, plans, roles, assignableRoleIds, memberRoleMap] =
-      await Promise.all([
-        getLimit(organizationId, "teamMembers", 100_000_000),
-        getCurrentPlan(organizationId),
-        getPlans(),
-        // RBAC role catalogue (system roles + any org-defined custom
-        // roles). The default fallback returns []; an installed plugin
-        // may return the seeded system roles plus any custom roles.
-        rbac.allRoles(organizationId),
-        // Plan-gated subset — the Teams page disables dropdown options not
-        // in this set. Server-side enforcement is independent (setUserRole
-        // rejects a plan-gated assignment regardless of UI state).
-        rbac.getAssignableRoleIds(organizationId),
-        // Per-member current role in a single round-trip.
-        rbac.getUserRoles(
-          result.members.map((m) => m.user.id),
-          organizationId
-        ),
-      ]);
+    const [
+      baseLimit,
+      currentPlan,
+      plans,
+      roles,
+      assignableRoleIds,
+      memberRoleMap,
+      viewerRole,
+      systemRoles,
+    ] = await Promise.all([
+      getLimit(organizationId, "teamMembers", 100_000_000),
+      getCurrentPlan(organizationId),
+      getPlans(),
+      // RBAC role catalogue (system roles + any org-defined custom
+      // roles). The default fallback returns []; an installed plugin
+      // may return the seeded system roles plus any custom roles.
+      rbac.allRoles(organizationId),
+      // Plan-gated subset — the Teams page disables dropdown options not
+      // in this set. Server-side enforcement is independent (setUserRole
+      // rejects a plan-gated assignment regardless of UI state).
+      rbac.getAssignableRoleIds(organizationId),
+      // Per-member current role in a single round-trip.
+      rbac.getUserRoles(
+        result.members.map((m) => m.user.id),
+        organizationId
+      ),
+      // The viewer's own role, plus the system-role ladder it sits on —
+      // together these say how high this viewer is allowed to assign.
+      rbac.getUserRole({ userId, organizationId }),
+      rbac.systemRoles(organizationId),
+    ]);
+
+    // Roles this viewer is allowed to hand out: at or below their own level
+    // on the system-role ladder. Deliberately NOT intersected with
+    // `assignableRoleIds` — the two answer different questions and the Team
+    // page renders them differently. A role above the viewer's level is left
+    // out of the picker altogether, while a role that is merely plan-locked
+    // still needs to appear with an upgrade link. Merging them would offer a
+    // viewer "Owner (upgrade)", inviting them to pay for something their own
+    // role still would not let them assign.
+    //
+    // Off-ladder roles (custom org roles, and any role held by a viewer who
+    // is themselves on a custom role) are refused, the same way the invite
+    // flow refuses them.
+    const offerableRoleIds = computeOfferableRoleIds(roles, systemRoles, viewerRole?.id ?? null);
 
     const memberRoles = result.members.map((m) => ({
       userId: m.user.id,
@@ -60,6 +87,7 @@ export class TeamPresenter extends BasePresenter {
       planSeatLimit,
       roles,
       assignableRoleIds,
+      offerableRoleIds,
       memberRoles,
     };
   }

apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx

@@ -77,28 +77,18 @@ export const loader = dashboardLoader(
       throw new Response("Not Found", { status: 404 });
     }
 
-    // Inviter's own role drives the "below their level" filter on the
-    // dropdown. Plus assignable role IDs already encode the org's plan
-    // tier — the intersection is what we offer.
-    const [inviterRole, assignableRoleIds, systemRoles] = await Promise.all([
-      rbac.getUserRole({ userId, organizationId }),
-      rbac.getAssignableRoleIds(organizationId),
-      rbac.systemRoles(organizationId),
-    ]);
-
     // Build the dropdown's offerable set server-side: roles that are
-    // (a) assignable on the current plan AND (b) at or below the
-    // inviter's own level. The client just renders these — it doesn't
-    // need to know about the system-role catalogue or the ladder.
-    const assignableSet = new Set(assignableRoleIds);
-    const offerableRoleIds = systemRoles
-      ? result.roles
-          .filter(
-            (r) =>
-              assignableSet.has(r.id) && isAtOrBelow(systemRoles, inviterRole?.id ?? null, r.id)
-          )
-          .map((r) => r.id)
-      : [];
+    // (a) at or below the inviter's own level AND (b) assignable on the
+    // current plan. The client just renders these — it doesn't need to know
+    // about the system-role catalogue or the ladder.
+    //
+    // The presenter already applies the ladder; intersecting with the plan is
+    // right here, because the invite dropdown has no upgrade affordance and a
+    // plan-locked role is simply not offered. The Team page keeps the two
+    // sets apart instead, since it still shows plan-locked roles as an
+    // upgrade link — so it uses the presenter's `offerableRoleIds` unmerged.
+    const assignableSet = new Set(result.assignableRoleIds);
+    const offerableRoleIds = result.offerableRoleIds.filter((id) => assignableSet.has(id));
 
     // Buying seats is a billing operation: surface whether this user can, so
     // the purchase modal disables its trigger (the team action enforces it).

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx

@@ -328,6 +328,7 @@ export default function Page() {
     planSeatLimit,
     roles,
     assignableRoleIds,
+    offerableRoleIds,
     memberRoles,
     canManageMembers,
     canManageBilling,
@@ -499,6 +500,7 @@ export default function Page() {
                       currentRoleId={memberRoleByUserId.get(member.user.id) ?? null}
                       roles={roles}
                       assignableRoleIds={assignableRoleIds}
+                      offerableRoleIds={offerableRoleIds}
                       canManageMembers={canManageMembers}
                     />
                     <div className="justify-self-end">
@@ -688,29 +690,45 @@ function LeaveRemoveButton({
 }
 
 // Inline role picker — submits a `_formType=set-role` form via fetcher
-// so the change persists without a full page reload. Disabled options
-// (and the picker itself) reflect plan gating + manage:members; the
-// server's setUserRole enforces both checks again as the source of
-// truth, so this is a UI-affordance layer only.
+// so the change persists without a full page reload. The picker itself,
+// the roles it lists and which of those are selectable all reflect
+// manage:members, the viewer's own role and plan gating; the server
+// validates the submitted role independently, so this is a
+// UI-affordance layer only.
+//
+// Two different sets narrow the list, and they must stay separate:
+//   offerableRoleIds — roles the viewer's own role lets them assign.
+//                      Anything else is left out of the list entirely.
+//   assignableRoleIds — roles the org's plan allows. A role that is
+//                      offerable but not plan-assignable still shows,
+//                      as "Name (upgrade)" linking to billing.
 function RolePicker({
   memberUserId,
   currentRoleId,
   roles,
   assignableRoleIds,
+  offerableRoleIds,
   canManageMembers,
 }: {
   memberUserId: string;
   currentRoleId: string | null;
   roles: Role[];
   assignableRoleIds: string[];
+  offerableRoleIds: string[];
   canManageMembers: boolean;
 }) {
   const organization = useOrganization();
   const fetcher = useFetcher<{ ok: boolean; error?: string } | { ok: true }>();
   const assignable = new Set(assignableRoleIds);
-  // With no RBAC plugin installed, the loader returns no roles —
-  // render nothing rather than an empty dropdown.
-  if (roles.length === 0) return null;
+  const offerable = new Set(offerableRoleIds);
+  // The member's current role stays in the list even when the viewer could
+  // not assign it, so the controlled `value` below still resolves to a row
+  // and the dropdown shows the role the member actually holds.
+  const visibleRoles = roles.filter((r) => offerable.has(r.id) || r.id === currentRoleId);
+  // With no RBAC plugin installed the loader returns no roles, and a viewer
+  // with nothing to offer would get an empty dropdown — render nothing
+  // rather than a dead control.
+  if (visibleRoles.length === 0) return null;
 
   const isSubmitting = fetcher.state === "submitting";
   const error =
@@ -723,13 +741,16 @@ function RolePicker({
       // kept the old role; without `value` the UI would show the
       // attempted change).
       value={currentRoleId ?? ""}
-      items={roles}
+      items={visibleRoles}
       variant="tertiary/small"
       disabled={!canManageMembers || isSubmitting}
       dropdownIcon
-      text={(v) => roles.find((r) => r.id === v)?.name ?? "No role"}
+      text={(v) => visibleRoles.find((r) => r.id === v)?.name ?? "No role"}
       setValue={(next) => {
         if (typeof next !== "string" || next === (currentRoleId ?? "")) return;
+        // The member's current role is listed even when it isn't offerable,
+        // so re-check before submitting.
+        if (!offerable.has(next)) return;
         // Upgrade-link rows have a value too (Ariakit needs one to
         // make the row interactive — without it the Link inside
         // doesn't even register the click), but they shouldn't

apps/webapp/app/utils/inviteRoleLadder.ts

@@ -1,7 +1,8 @@
-// An inviter can only assign a role at or below their own. The systemRoles
-// array is in canonical order (highest authority first), so array index drives
-// the ladder. Custom roles aren't in the table and are refused. Dependency-free
-// so the rule can be unit-tested directly.
+// A user can only assign a role at or below their own — on invite, and on the
+// Team page's role picker. The systemRoles array is in canonical order
+// (highest authority first), so array index drives the ladder. Custom roles
+// aren't in the table and are refused. Dependency-free so the rule can be
+// unit-tested directly.
 
 export type LadderRole = { id: string };
 
@@ -31,3 +32,22 @@ export function isAtOrBelow(
   if (inviter === undefined || invited === undefined) return false;
   return invited <= inviter;
 }
+
+/**
+ * The subset of `roles` that a user holding `viewerRoleId` may assign, by the
+ * ladder above. Knows nothing about plan gating: a role the org's plan does
+ * not allow is still returned, so a caller that wants to surface it as an
+ * upgrade affordance can. Callers that have no upgrade affordance intersect
+ * with their plan-assignable set themselves.
+ *
+ * `systemRoles` is null when no RBAC plugin is installed — there is no ladder
+ * to check against, so nothing is offerable.
+ */
+export function offerableRoleIds(
+  roles: ReadonlyArray<LadderRole>,
+  systemRoles: ReadonlyArray<LadderRole> | null,
+  viewerRoleId: string | null
+): string[] {
+  if (!systemRoles) return [];
+  return roles.filter((r) => isAtOrBelow(systemRoles, viewerRoleId, r.id)).map((r) => r.id);
+}

apps/webapp/test/inviteRoleLadder.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { isAtOrBelow } from "../app/utils/inviteRoleLadder.js";
+import { isAtOrBelow, offerableRoleIds } from "../app/utils/inviteRoleLadder.js";
 
 // systemRoles in canonical order: highest authority first.
 const roles = [{ id: "owner" }, { id: "admin" }, { id: "member" }];
@@ -31,3 +31,34 @@ describe("isAtOrBelow", () => {
     expect(isAtOrBelow(roles, "custom-role-id", "member")).toBe(false);
   });
 });
+
+// Property under test: the picker/dropdown set is the ladder alone. Plan
+// gating is a separate concern the caller layers on, so a plan-locked role
+// must still come back here — the Team page renders it as an upgrade link.
+describe("offerableRoleIds", () => {
+  const catalogue = [{ id: "owner" }, { id: "admin" }, { id: "member" }, { id: "custom-1" }];
+
+  it("offers the viewer's own level and below", () => {
+    expect(offerableRoleIds(catalogue, roles, "admin")).toEqual(["admin", "member"]);
+    expect(offerableRoleIds(catalogue, roles, "member")).toEqual(["member"]);
+  });
+
+  it("leaves roles above the viewer out entirely", () => {
+    expect(offerableRoleIds(catalogue, roles, "admin")).not.toContain("owner");
+  });
+
+  it("does not filter on plan gating — a plan-locked role is still offerable", () => {
+    // `owner` may be unavailable on the org's plan; that is the caller's
+    // concern, and it still needs the id back to render the upgrade row.
+    expect(offerableRoleIds(catalogue, roles, "owner")).toContain("owner");
+  });
+
+  it("drops custom roles, which are not on the ladder", () => {
+    expect(offerableRoleIds(catalogue, roles, "owner")).not.toContain("custom-1");
+  });
+
+  it("offers nothing to a roleless viewer or with no ladder at all", () => {
+    expect(offerableRoleIds(catalogue, roles, null)).toEqual([]);
+    expect(offerableRoleIds(catalogue, null, "owner")).toEqual([]);
+  });
+});