+ );
+}
diff --git a/vite/src/components/v2/scope-selector/ScopeSelector.tsx b/vite/src/components/v2/scope-selector/ScopeSelector.tsx
new file mode 100644
index 000000000..3d248eb8d
--- /dev/null
+++ b/vite/src/components/v2/scope-selector/ScopeSelector.tsx
@@ -0,0 +1,290 @@
+import {
+ expandScopes,
+ groupAndFormatScopes,
+ RESOURCE_METADATA,
+ RESOURCES,
+ type ResourceType,
+ Scopes,
+ type ScopeString,
+} from "@autumn/shared";
+import { useMemo, useState } from "react";
+import { Checkbox } from "@/components/v2/checkboxes/Checkbox";
+import { ConditionalTooltip } from "@/components/v2/tooltips/ConditionalTooltip";
+import { cn } from "@/lib/utils";
+
+export type ScopeSelectorProps = {
+ /** Current scopes. Empty array = unrestricted (all scopes granted). */
+ value: ScopeString[];
+ onChange: (scopes: ScopeString[]) => void;
+ /**
+ * Optional: the caller's own scopes. If provided, any scope NOT in this
+ * set is disabled with a tooltip explaining the caller can't grant it.
+ */
+ availableScopes?: readonly string[];
+ disabled?: boolean;
+};
+
+type TriState = "none" | "read" | "write";
+
+type TriOption = { value: TriState; label: string };
+
+const TRI_OPTIONS_FULL: TriOption[] = [
+ { value: "none", label: "None" },
+ { value: "read", label: "Read" },
+ { value: "write", label: "Write" },
+];
+
+const UNAVAILABLE_TOOLTIP =
+ "You don't have this scope on your current session";
+const READ_ONLY_RESOURCE_TOOLTIP =
+ "This resource is read-only — no write scope exists";
+
+function deriveTriState(
+ value: readonly ScopeString[],
+ resource: ResourceType,
+): TriState {
+ const write = `${resource}:write` as ScopeString;
+ const read = `${resource}:read` as ScopeString;
+ if (value.includes(write)) return "write";
+ if (value.includes(read)) return "read";
+ return "none";
+}
+
+function applyTriState(
+ value: readonly ScopeString[],
+ resource: ResourceType,
+ next: TriState,
+): ScopeString[] {
+ const write = `${resource}:write`;
+ const read = `${resource}:read`;
+ const filtered = value.filter((s) => s !== write && s !== read);
+ if (next === "read") filtered.push(read as ScopeString);
+ if (next === "write") filtered.push(write as ScopeString);
+ return filtered;
+}
+
+/**
+ * Tri-state action picker that mirrors the visual language of
+ * `GroupedTabButton` but supports per-option disabling (with tooltip).
+ *
+ * `GroupedTabButton` only supports group-level `disabled`, which is not
+ * sufficient for the "W unavailable but R allowed" case required by
+ * `availableScopes`. Class names are intentionally kept in sync with
+ * `GroupedTabButton` so this renders identically.
+ */
+function TriStatePicker({
+ options,
+ value,
+ onChange,
+ readEnabled,
+ writeEnabled,
+ writeUnavailableReason,
+ disabled,
+}: {
+ options: TriOption[];
+ value: TriState;
+ onChange: (next: TriState) => void;
+ readEnabled: boolean;
+ writeEnabled: boolean;
+ /**
+ * Override tooltip text for a disabled `write` option. Used for the
+ * analytics resource, which has no write scope at all (distinct from
+ * "caller can't grant it").
+ */
+ writeUnavailableReason?: string | null;
+ disabled: boolean;
+}) {
+ return (
+ // Fixed width so every row's picker column is the same size. 3
+ // segments × 72px ≈ 216px keeps "Read"/"Write" labels readable.
+
+ {options.map((option, index) => {
+ const isActive = value === option.value;
+ const isFirst = index === 0;
+ const isLast = index === options.length - 1;
+
+ let optionDisabled = disabled;
+ let tooltip: string | null = null;
+ if (option.value === "write" && !writeEnabled) {
+ optionDisabled = true;
+ tooltip = writeUnavailableReason ?? UNAVAILABLE_TOOLTIP;
+ } else if (option.value === "read" && !readEnabled) {
+ optionDisabled = true;
+ tooltip = UNAVAILABLE_TOOLTIP;
+ }
+
+ const button = (
+
+ );
+
+ return (
+
+ {/* Wrap in span so Radix can attach listeners even when the button is disabled. */}
+ {button}
+
+ );
+ })}
+
+ );
+}
+
+export function ScopeSelector({
+ value,
+ onChange,
+ availableScopes,
+ disabled = false,
+}: ScopeSelectorProps) {
+ // Restricted mode is a local UI concern. We seed it from the initial
+ // `value` length so a key that already has scopes opens in restricted
+ // mode, but we intentionally do NOT re-sync with `value` on every
+ // render — otherwise the user toggling all scopes to "None" would
+ // flip the checkbox off and lose the grid.
+ const [restricted, setRestricted] = useState(value.length > 0);
+
+ const expandedAvailable = useMemo(
+ () => (availableScopes ? expandScopes(availableScopes) : null),
+ [availableScopes],
+ );
+
+ const isScopeAvailable = (scope: ScopeString): boolean => {
+ if (!expandedAvailable) return true;
+ // The `admin` meta-scope is a product-level bypass that grants
+ // every modern R/W scope. Without this short-circuit, a caller
+ // whose session only carries `admin` would see every row as
+ // unavailable, which is the opposite of the truth.
+ if (expandedAvailable.has("admin")) return true;
+ return expandedAvailable.has(scope);
+ };
+
+ const handleToggleRestricted = (checked: boolean) => {
+ setRestricted(checked);
+ if (!checked) {
+ onChange([]);
+ return;
+ }
+ if (value.length === 0) {
+ onChange([Scopes.Customers.Read]);
+ }
+ };
+
+ const summary = useMemo(() => {
+ const grouped = groupAndFormatScopes(value);
+ return { scopeCount: value.length, resourceCount: grouped.length };
+ }, [value]);
+
+ return (
+
+
+
+ {restricted && (
+
+ {RESOURCES.map((resource) => {
+ const meta = RESOURCE_METADATA[resource];
+ const isAnalytics = resource === "analytics";
+
+ const readScope = `${resource}:read` as ScopeString;
+ const readAvailable = isScopeAvailable(readScope);
+ const writeAvailable = isAnalytics
+ ? false
+ : isScopeAvailable(
+ `${resource}:write` as ScopeString,
+ );
+
+ const fullyUnavailable =
+ !!expandedAvailable &&
+ !readAvailable &&
+ (isAnalytics || !writeAvailable);
+
+ const triValue = deriveTriState(value, resource);
+ // Always render 3 segments so every row has the same
+ // width. For analytics, `Write` is permanently disabled
+ // with an explanatory tooltip.
+ const writeReason = isAnalytics
+ ? READ_ONLY_RESOURCE_TOOLTIP
+ : null;
+
+ return (
+
diff --git a/vite/src/views/main-sidebar/org-dropdown/manage-org/InvitePopover.tsx b/vite/src/views/main-sidebar/org-dropdown/manage-org/InvitePopover.tsx
index 443fd3edf..71f341858 100644
--- a/vite/src/views/main-sidebar/org-dropdown/manage-org/InvitePopover.tsx
+++ b/vite/src/views/main-sidebar/org-dropdown/manage-org/InvitePopover.tsx
@@ -1,3 +1,4 @@
+import type { Role } from "@autumn/shared";
import { Mail } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
@@ -9,14 +10,22 @@ import {
} from "@/components/ui/popover";
import { Button } from "@/components/v2/buttons/Button";
import { Input } from "@/components/v2/inputs/Input";
+import { RoleSelect } from "@/components/v2/selects/RoleSelect";
import { authClient } from "@/lib/auth-client";
import { getBackendErr } from "@/utils/genUtils";
import { useMemberships } from "../hooks/useMemberships";
const emailSchema = z.email();
+// Owners can invite co-owners (better-auth supports multiple owners on a
+// single org). We expose the full role set here and let the server's AC
+// gate the action — if a non-owner tries to send `role: "owner"` they'll
+// get a 403 back from better-auth's invite endpoint.
+const INVITE_ROLES: Role[] = ["owner", "admin", "developer", "sales", "member"];
+
export const InvitePopover = () => {
const [email, setEmail] = useState("");
+ const [role, setRole] = useState("developer");
const [loading, setLoading] = useState(false);
const [open, setOpen] = useState(false);
const { refetch } = useMemberships();
@@ -31,7 +40,7 @@ export const InvitePopover = () => {
setLoading(true);
const { error } = await authClient.organization.inviteMember({
email: email,
- role: "admin",
+ role: role,
resend: true,
});
@@ -43,6 +52,7 @@ export const InvitePopover = () => {
await refetch();
toast.success(`Successfully sent invitation to ${email}`);
setEmail("");
+ setRole("developer");
setOpen(false);
} catch (error) {
console.error(error);
@@ -63,23 +73,81 @@ export const InvitePopover = () => {
Invite by email
+ {/*
+ Password managers (especially Bitwarden) aggressively autofill
+ any visible email-looking input with the current user's own
+ credentials — which is exactly wrong for an invite form.
+
+ We defeat autofill with a layered approach:
+
+ 1. A throwaway hidden dummy input with `type="email"` placed
+ ABOVE the real field. Password managers typically fill the
+ first email-shaped field they encounter; sending them
+ into an `aria-hidden`/tab-index=-1 sink absorbs the
+ hit and leaves the real field untouched.
+
+ 2. Randomised `name` (per-session) so manager heuristics
+ can't memoise "fill this orgname's invite box".
+
+ 3. `autoComplete="off"` + Bitwarden/1P/LastPass/Dashlane
+ opt-out data-attrs.
+
+ 4. `inputMode="email"` keeps the mobile keyboard correct
+ without the field declaring `type="email"` (which is what
+ triggers autofill in the first place).
+ */}
+
+