@agent-native/core 0.141.6 → 0.144.0

package/dist/client/org/TeamPage.js

@@ -3,11 +3,11 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { Button as ToolkitButton } from "@agent-native/toolkit/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@agent-native/toolkit/ui/select";
 import { Switch } from "@agent-native/toolkit/ui/switch";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@agent-native/toolkit/ui/table";
 import { IconUserPlus, IconTrash, IconCrown, IconShieldCheck, IconLoader2, IconCheck, IconPencil, IconAt, IconX, IconKey, IconCopy, IconRefresh, IconEye, IconEyeOff, IconCloudUpload, IconFileImport, IconPlus, IconAlertTriangle, IconUsersGroup, IconHelpCircle, IconExternalLink, } from "@tabler/icons-react";
 import { forwardRef, useMemo, useRef, useState, } from "react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { useT } from "../i18n.js";
+import { SettingsGroup, SettingsRow } from "../settings/SettingsRow.js";
 import { cn } from "../utils.js";
 import { useOrg, useOrgMembers, useOrgInvitations, useCreateOrg, useUpdateOrg, useBulkInviteMembers, useChangeMemberRole, useAcceptInvitation, useRemoveMember, useDeleteOrg, useSwitchOrg, useSetOrgDomain, useSetOrgWorkspaceUrl, useSetOrgAuthProvider, useRevealA2ASecret, useSetA2ASecret, useSyncA2ASecret, useJoinByDomain, useAppRoles, useSetAppMemberRole, } from "./hooks.js";
 const Button = forwardRef(({ className, ...props }, ref) => (_jsx(ToolkitButton, { ref: ref, variant: "ghost", className: cn("h-auto p-0 hover:bg-transparent hover:text-inherit active:scale-100 [&_svg]:!size-auto", className), ...props })));
@@ -24,6 +24,12 @@ function ErrorText({ error }) {
         return null;
     return (_jsx("p", { className: "text-xs text-destructive", children: error instanceof Error ? error.message : String(error) }));
 }
+function OrganizationHelpIcon({ content, docsUrl, }) {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", "aria-label": "More information", className: "inline-flex size-3.5 shrink-0 items-center justify-center rounded-full text-muted-foreground/70 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring [&_svg]:!size-3", children: _jsx(IconHelpCircle, { className: "size-3" }) }) }), _jsxs(TooltipContent, { className: "max-w-xs leading-5", children: [_jsx("p", { children: content }), docsUrl ? (_jsx("a", { href: docsUrl, target: "_blank", rel: "noreferrer", className: "mt-1 inline-block underline underline-offset-2", children: "Learn more" })) : null] })] }));
+}
+function OrganizationDescription({ children, help, docsUrl, }) {
+    return (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1.5", children: [_jsx("span", { children: children }), help ? _jsx(OrganizationHelpIcon, { content: help, docsUrl: docsUrl }) : null] }));
+}
 function PendingInvitationsCard() {
     const t = useT();
     const { data: org } = useOrg();
@@ -100,7 +106,7 @@ function MembersCard({ appRoles }) {
     const members = membersData?.members ?? [];
     const pendingInvites = invitationsData?.invitations ?? [];
     const hasMultipleOrgs = (org.orgs?.length ?? 0) > 1;
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("section", { className: "rounded-lg border border-border bg-card p-4 space-y-4", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10", children: _jsx(IconUsersGroup, { className: "h-5 w-5 text-primary" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx(OrgNameDisplay, { name: org.orgName ?? "", canEdit: isOwnerOrAdmin }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [t("org.memberCount", { count: members.length }), " \u00B7", " ", t("org.youAreRole", { role: org.role })] })] })] }), hasMultipleOrgs && (_jsxs(Select, { value: org.orgId ?? "", onValueChange: (value) => switchOrg.mutate(value || null), disabled: switchOrg.isPending, children: [_jsx(SelectTrigger, { className: "h-auto w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs sm:w-auto", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: org.orgs.map((o) => (_jsx(SelectItem, { value: o.orgId, children: o.orgName }, o.orgId))) })] }))] }), isOwnerOrAdmin && (_jsxs("div", { className: "grid gap-5 border-t border-border pt-4 lg:grid-cols-2", children: [_jsx(DomainSettingsSection, { domain: org.allowedDomain, ownerEmail: org.email }), _jsx(WorkspaceUrlSettingsSection, { workspaceUrl: org.workspaceUrl }), _jsx(AuthProviderSettingsSection, { requiredAuthProvider: org.requiredAuthProvider }), isOwner && _jsx(A2ASecretSection, { isSet: Boolean(org.a2aSecretSet) })] })), _jsx(ErrorText, { error: switchOrg.error })] }), _jsx(MembersTableCard, { members: members, pendingInvites: pendingInvites, isLoadingMembers: isLoadingMembers, currentUserEmail: org.email, currentUserRole: org.role ?? null, appRoles: appRoles }), isOwner && _jsx(DangerZoneCard, { orgName: org.orgName ?? "" })] }));
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(SettingsGroup, { title: "Organization", children: [_jsx(SettingsRow, { id: "organization", label: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(IconUsersGroup, { className: "size-4 text-muted-foreground" }), _jsx(OrgNameDisplay, { name: org.orgName ?? "", canEdit: isOwnerOrAdmin })] }), description: `${t("org.memberCount", { count: members.length })} · ${t("org.youAreRole", { role: org.role })}`, control: hasMultipleOrgs ? (_jsxs(Select, { value: org.orgId ?? "", onValueChange: (value) => switchOrg.mutate(value || null), disabled: switchOrg.isPending, children: [_jsx(SelectTrigger, { className: "h-auto w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs sm:w-auto", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: org.orgs.map((o) => (_jsx(SelectItem, { value: o.orgId, children: o.orgName }, o.orgId))) })] })) : undefined }), isOwnerOrAdmin && (_jsxs(_Fragment, { children: [_jsx(DomainSettingsSection, { domain: org.allowedDomain, ownerEmail: org.email }), _jsx(WorkspaceUrlSettingsSection, { workspaceUrl: org.workspaceUrl }), _jsx(AuthProviderSettingsSection, { requiredAuthProvider: org.requiredAuthProvider }), isOwner && _jsx(A2ASecretSection, { isSet: Boolean(org.a2aSecretSet) })] })), switchOrg.error && (_jsx("div", { className: "px-5 pb-4", children: _jsx(ErrorText, { error: switchOrg.error }) }))] }), _jsx(MembersTableCard, { members: members, pendingInvites: pendingInvites, isLoadingMembers: isLoadingMembers, currentUserEmail: org.email, currentUserRole: org.role ?? null, appRoles: appRoles }), isOwner && _jsx(DangerZoneCard, { orgName: org.orgName ?? "" })] }));
 }
 function MembersTableCard({ members, pendingInvites, isLoadingMembers, currentUserEmail, currentUserRole, appRoles, }) {
     const t = useT();
@@ -111,8 +117,7 @@ function MembersTableCard({ members, pendingInvites, isLoadingMembers, currentUs
         a.email.toLowerCase(),
         a.role,
     ]));
-    const columnCount = appRoles ? 5 : 4;
-    return (_jsxs("section", { className: "rounded-lg border border-border bg-card", children: [_jsxs("div", { className: "flex flex-col gap-3 border-b border-border px-4 py-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium", children: t("org.members") }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("org.memberCount", { count: members.length }) })] }), canInvite && !showInviteForm && (_jsxs(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: () => setShowInviteForm(true), className: "inline-flex items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90", children: [_jsx(IconUserPlus, { size: 14 }), t("org.inviteMembers")] }))] }), canInvite && showInviteForm && (_jsx("div", { className: "border-b border-border p-4", children: _jsx(BulkInviteForm, { currentUserRole: currentUserRole, onClose: () => setShowInviteForm(false) }) })), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t("org.member") }), _jsx(TableHead, { children: t("org.role") }), appRoles && (_jsx(TableHead, { children: appRoles.label ?? appRoles.appId })), _jsx(TableHead, { children: t("org.status") }), _jsx(TableHead, { className: "text-end", children: t("org.actions") })] }) }), _jsx(TableBody, { children: isLoadingMembers && members.length === 0 ? ([0, 1, 2].map((i) => (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columnCount, children: _jsx("div", { className: "h-3.5 rounded bg-muted animate-pulse", style: { width: `${180 + i * 48}px` } }) }) }, i)))) : members.length === 0 && pendingInvites.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columnCount, className: "py-8 text-center text-sm text-muted-foreground", children: t("org.noMembers") }) })) : (_jsxs(_Fragment, { children: [members.map((m) => (_jsx(MemberRow, { email: m.email, role: m.role, isCurrentUser: m.email === currentUserEmail, currentUserRole: currentUserRole, appRoles: appRoles, appRole: appRoleByEmail.get(m.email.toLowerCase()) ?? null, canManageAppRoles: Boolean(appRoleData?.canManage) }, m.email))), pendingInvites.map((inv) => (_jsx(PendingInviteRow, { invite: inv, hasAppRoleColumn: Boolean(appRoles) }, inv.id)))] })) })] })] }));
+    return (_jsxs("section", { className: "overflow-hidden rounded-xl border border-border/70 bg-card text-card-foreground", children: [_jsxs("div", { className: "flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium", children: t("org.members") }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("org.memberCount", { count: members.length }) })] }), canInvite && !showInviteForm && (_jsxs(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: () => setShowInviteForm(true), className: "inline-flex items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90", children: [_jsx(IconUserPlus, { size: 14 }), t("org.inviteMembers")] }))] }), canInvite && showInviteForm && (_jsx("div", { className: "border-b border-border p-4", children: _jsx(BulkInviteForm, { currentUserRole: currentUserRole, onClose: () => setShowInviteForm(false) }) })), _jsx("div", { className: "divide-y divide-border/60 border-t border-border/60", children: isLoadingMembers && members.length === 0 ? ([0, 1, 2].map((i) => (_jsxs("div", { className: "flex items-center gap-3 px-5 py-4", children: [_jsx("div", { className: "size-8 animate-pulse rounded-full bg-muted" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-3.5 animate-pulse rounded bg-muted", style: { width: `${180 + i * 48}px` } }), _jsx("div", { className: "h-3 w-20 animate-pulse rounded bg-muted" })] })] }, i)))) : members.length === 0 && pendingInvites.length === 0 ? (_jsx("div", { className: "px-5 py-10 text-center text-sm text-muted-foreground", children: t("org.noMembers") })) : (_jsxs(_Fragment, { children: [members.map((m) => (_jsx(MemberRow, { email: m.email, role: m.role, isCurrentUser: m.email === currentUserEmail, currentUserRole: currentUserRole, appRoles: appRoles, appRole: appRoleByEmail.get(m.email.toLowerCase()) ?? null, canManageAppRoles: Boolean(appRoleData?.canManage) }, m.email))), pendingInvites.map((inv) => (_jsx(PendingInviteRow, { invite: inv }, inv.id)))] })) })] }));
 }
 function DangerZoneCard({ orgName }) {
     const t = useT();
@@ -126,11 +131,11 @@ function DangerZoneCard({ orgName }) {
             return;
         deleteOrg.mutate(orgName, { onSuccess: () => setOpen(false) });
     }
-    return (_jsxs("section", { className: "rounded-lg border border-destructive/40 bg-card p-4 space-y-3", children: [_jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx(IconAlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0 text-destructive" }), _jsxs("div", { className: "space-y-1", children: [_jsx("h3", { className: "text-sm font-medium text-destructive", children: t("org.dangerZone") }), _jsx("p", { className: "text-sm text-muted-foreground", children: t("org.deleteOrgDescription") })] })] }), _jsxs(AlertDialog, { open: open, onOpenChange: (next) => {
-                    setOpen(next);
-                    if (!next)
-                        setConfirmText("");
-                }, children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { type: "button", intent: "danger", emphasis: "outline", className: "cursor-pointer rounded-md border border-destructive/40 px-3 py-1.5 text-xs font-medium text-destructive hover:bg-destructive/10", children: t("org.deleteOrg") }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t("org.deleteOrg") }), _jsx(AlertDialogDescription, { children: t("org.deleteOrgConfirmPrompt", { name: orgName }) })] }), _jsx("input", { type: "text", value: confirmText, onChange: (e) => setConfirmText(e.target.value), placeholder: t("org.deleteOrgConfirmPlaceholder"), className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-destructive", autoFocus: true }), _jsx(ErrorText, { error: deleteOrg.error }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { className: "cursor-pointer", children: t("org.cancel") }), _jsx(AlertDialogAction, { disabled: !canConfirm || deleteOrg.isPending, onClick: handleConfirm, className: "cursor-pointer bg-destructive text-destructive-foreground hover:bg-destructive/90 disabled:cursor-not-allowed disabled:opacity-50", children: deleteOrg.isPending ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(IconLoader2, { size: 14, className: "animate-spin" }), t("org.deleteOrgPending")] })) : (t("org.deleteOrgConfirmCta")) })] })] })] })] }));
+    return (_jsx("section", { className: "rounded-lg border border-destructive/40 bg-card p-4 space-y-3", children: _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx(IconAlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0 text-destructive" }), _jsxs("div", { className: "min-w-0 space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h3", { className: "text-sm font-medium text-destructive", children: t("org.dangerZone") }), _jsx("p", { className: "text-sm leading-6 text-muted-foreground", children: _jsx(OrganizationDescription, { help: t("org.deleteOrgDescription"), children: "Delete this organization and all of its members." }) })] }), _jsxs(AlertDialog, { open: open, onOpenChange: (next) => {
+                                setOpen(next);
+                                if (!next)
+                                    setConfirmText("");
+                            }, children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { type: "button", intent: "danger", emphasis: "outline", className: "cursor-pointer rounded-md border border-destructive/40 px-3 py-1.5 text-xs font-medium text-destructive hover:bg-destructive/10", children: t("org.deleteOrg") }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t("org.deleteOrg") }), _jsx(AlertDialogDescription, { children: t("org.deleteOrgConfirmPrompt", { name: orgName }) })] }), _jsx("input", { type: "text", value: confirmText, onChange: (e) => setConfirmText(e.target.value), placeholder: t("org.deleteOrgConfirmPlaceholder"), className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-destructive", autoFocus: true }), _jsx(ErrorText, { error: deleteOrg.error }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { className: "cursor-pointer", children: t("org.cancel") }), _jsx(AlertDialogAction, { disabled: !canConfirm || deleteOrg.isPending, onClick: handleConfirm, className: "cursor-pointer bg-destructive text-destructive-foreground hover:bg-destructive/90 disabled:cursor-not-allowed disabled:opacity-50", children: deleteOrg.isPending ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(IconLoader2, { size: 14, className: "animate-spin" }), t("org.deleteOrgPending")] })) : (t("org.deleteOrgConfirmCta")) })] })] })] })] })] }) }));
 }
 function roleLabel(role, t) {
     if (role === "owner")
@@ -143,33 +148,43 @@ function RoleBadge({ role }) {
     const t = useT();
     return (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded border border-border px-2 py-1 text-xs text-muted-foreground", children: [_jsx(RoleIcon, { role: role }), roleLabel(role, t)] }));
 }
-function PendingInviteRow({ invite, hasAppRoleColumn, }) {
+function memberInitials(email) {
+    const localPart = email.split("@", 1)[0] ?? email;
+    const initials = localPart
+        .split(/[._-]+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part[0]?.toUpperCase())
+        .join("");
+    return initials || "?";
+}
+function PendingInviteRow({ invite }) {
     const t = useT();
-    return (_jsxs(TableRow, { className: "opacity-70", children: [_jsx(TableCell, { className: "min-w-56", children: _jsx("span", { className: "truncate text-sm", children: invite.email }) }), _jsx(TableCell, { children: _jsx(RoleBadge, { role: invite.role }) }), hasAppRoleColumn && (_jsx(TableCell, { children: _jsx("span", { className: "text-muted-foreground", children: "-" }) })), _jsx(TableCell, { children: _jsx("span", { className: "rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground", children: t("org.invited") }) }), _jsx(TableCell, { className: "text-end text-muted-foreground", children: "-" })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-3 px-5 py-3.5 opacity-70 sm:flex-row sm:items-center", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [_jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-background text-xs font-medium text-muted-foreground", children: memberInitials(invite.email) }), _jsx("span", { className: "min-w-0 truncate text-sm", children: invite.email })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:justify-end", children: [_jsx(RoleBadge, { role: invite.role }), _jsx("span", { className: "rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground", children: t("org.invited") })] })] }));
 }
 /** Sentinel for "clear the assignment" — Select cannot carry an empty value. */
 const UNASSIGNED = "__unassigned__";
-function AppRoleCell({ email, appRoles, appRole, canManage, }) {
+function AppRoleControl({ email, appRoles, appRole, canManage, }) {
     const [editing, setEditing] = useState(false);
     const setAppRole = useSetAppMemberRole(appRoles.appId);
     const labelFor = (r) => appRoles.roleLabels?.[r] ?? r;
     if (editing) {
-        return (_jsx(TableCell, { children: _jsxs(Select, { defaultOpen: true, value: appRole ?? UNASSIGNED, onOpenChange: (open) => {
-                    if (!open)
-                        setEditing(false);
-                }, onValueChange: (value) => {
-                    const next = value === UNASSIGNED ? null : value;
-                    if (next === appRole) {
-                        setEditing(false);
-                        return;
-                    }
-                    setAppRole.mutate({ email, role: next }, { onSuccess: () => setEditing(false) });
-                }, disabled: setAppRole.isPending, children: [_jsx(SelectTrigger, { autoFocus: true, className: "h-auto w-auto rounded-md border border-border bg-background px-1.5 py-0.5 text-[11px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: UNASSIGNED, children: appRoles.defaultRole ? labelFor(appRoles.defaultRole) : "—" }), appRoles.roles.map((r) => (_jsx(SelectItem, { value: r, children: labelFor(r) }, r)))] })] }) }));
+        return (_jsxs(Select, { defaultOpen: true, value: appRole ?? UNASSIGNED, onOpenChange: (open) => {
+                if (!open)
+                    setEditing(false);
+            }, onValueChange: (value) => {
+                const next = value === UNASSIGNED ? null : value;
+                if (next === appRole) {
+                    setEditing(false);
+                    return;
+                }
+                setAppRole.mutate({ email, role: next }, { onSuccess: () => setEditing(false) });
+            }, disabled: setAppRole.isPending, children: [_jsx(SelectTrigger, { autoFocus: true, className: "h-auto w-auto rounded-md border border-border bg-background px-2 py-1 text-xs", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: UNASSIGNED, children: appRoles.defaultRole ? labelFor(appRoles.defaultRole) : "—" }), appRoles.roles.map((r) => (_jsx(SelectItem, { value: r, children: labelFor(r) }, r)))] })] }));
     }
     // An unassigned member shows the app's default only as a hint. The default
     // never satisfies a server guard, so it must not read as a granted role.
     const display = appRole ? (_jsx("span", { className: "inline-flex items-center rounded border border-border px-2 py-1 text-xs text-muted-foreground", children: labelFor(appRole) })) : (_jsx("span", { className: "text-xs text-muted-foreground/70", children: appRoles.defaultRole ? labelFor(appRoles.defaultRole) : "—" }));
-    return (_jsx(TableCell, { children: canManage ? (_jsx(Button, { type: "button", onClick: () => setEditing(true), className: "cursor-pointer rounded hover:opacity-80", children: display })) : (display) }));
+    return canManage ? (_jsx(Button, { type: "button", onClick: () => setEditing(true), className: "cursor-pointer rounded hover:opacity-80", children: display })) : (display);
 }
 function MemberRow({ email, role, isCurrentUser, currentUserRole, appRoles, appRole, canManageAppRoles, }) {
     const t = useT();
@@ -184,20 +199,20 @@ function MemberRow({ email, role, isCurrentUser, currentUserRole, appRoles, appR
         !isCurrentUser &&
         (currentUserRole === "owner" ||
             (currentUserRole === "admin" && role === "member"));
-    return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "min-w-56", children: _jsx("span", { className: "truncate text-sm", children: email }) }), _jsx(TableCell, { children: _jsx(RoleBadge, { role: role }) }), appRoles && (_jsx(AppRoleCell, { email: email, appRoles: appRoles, appRole: appRole ?? null, canManage: Boolean(canManageAppRoles) })), _jsx(TableCell, { children: isCurrentUser ? (_jsx("span", { className: "rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground", children: t("org.you") })) : (_jsx("span", { className: "text-muted-foreground", children: "-" })) }), _jsx(TableCell, { children: canManage ? (_jsxs("div", { className: "flex shrink-0 items-center justify-end gap-1", children: [editing ? (_jsxs(Select, { defaultOpen: true, value: role, onOpenChange: (open) => {
-                                if (!open)
-                                    setEditing(false);
-                            }, onValueChange: (value) => {
-                                const next = value === "admin" ? "admin" : "member";
-                                if (next !== role) {
-                                    changeRole.mutate({ email, role: next }, { onSuccess: () => setEditing(false) });
-                                }
-                                else {
-                                    setEditing(false);
-                                }
-                            }, disabled: changeRole.isPending, children: [_jsx(SelectTrigger, { autoFocus: true, className: "h-auto w-auto rounded-md border border-border bg-background px-1.5 py-0.5 text-[11px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "member", children: t("org.member") }), _jsx(SelectItem, { value: "admin", children: t("org.admin") })] })] })) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", onClick: () => setEditing(true), className: "text-muted-foreground hover:text-foreground", children: _jsx(IconPencil, { size: 14 }) }) }), _jsx(TooltipContent, { children: t("org.changeRole") })] })), confirmingRemove ? (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { type: "button", intent: "neutral", emphasis: "ghost", onClick: () => setConfirmingRemove(false), className: "rounded px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-accent hover:text-foreground", children: t("org.cancel") }), _jsx(Button, { type: "button", intent: "danger", emphasis: "solid", disabled: removeMember.isPending, onClick: () => removeMember.mutate(email, {
-                                        onSettled: () => setConfirmingRemove(false),
-                                    }), className: "rounded bg-destructive px-1.5 py-0.5 text-[11px] text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50", children: t("org.remove") })] })) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", intent: "danger", emphasis: "ghost", disabled: removeMember.isPending, onClick: () => setConfirmingRemove(true), className: "text-muted-foreground hover:text-destructive disabled:opacity-50", children: _jsx(IconTrash, { size: 14 }) }) }), _jsx(TooltipContent, { children: t("org.removeMember") })] }))] })) : (_jsx("div", { className: "text-end text-muted-foreground", children: "-" })) })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-3 px-5 py-3.5 sm:flex-row sm:items-center", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [_jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-background text-xs font-medium text-muted-foreground", children: memberInitials(email) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm", children: email }), isCurrentUser && (_jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: t("org.you") }))] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:justify-end", children: [_jsx(RoleBadge, { role: role }), appRoles && (_jsx(AppRoleControl, { email: email, appRoles: appRoles, appRole: appRole ?? null, canManage: Boolean(canManageAppRoles) })), canManage && (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [editing ? (_jsxs(Select, { defaultOpen: true, value: role, onOpenChange: (open) => {
+                                    if (!open)
+                                        setEditing(false);
+                                }, onValueChange: (value) => {
+                                    const next = value === "admin" ? "admin" : "member";
+                                    if (next !== role) {
+                                        changeRole.mutate({ email, role: next }, { onSuccess: () => setEditing(false) });
+                                    }
+                                    else {
+                                        setEditing(false);
+                                    }
+                                }, disabled: changeRole.isPending, children: [_jsx(SelectTrigger, { autoFocus: true, className: "h-auto w-auto rounded-md border border-border bg-background px-2 py-1 text-xs", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "member", children: t("org.member") }), _jsx(SelectItem, { value: "admin", children: t("org.admin") })] })] })) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", onClick: () => setEditing(true), className: "text-muted-foreground hover:text-foreground", children: _jsx(IconPencil, { size: 14 }) }) }), _jsx(TooltipContent, { children: t("org.changeRole") })] })), confirmingRemove ? (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { type: "button", intent: "neutral", emphasis: "ghost", onClick: () => setConfirmingRemove(false), className: "rounded px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-accent hover:text-foreground", children: t("org.cancel") }), _jsx(Button, { type: "button", intent: "danger", emphasis: "solid", disabled: removeMember.isPending, onClick: () => removeMember.mutate(email, {
+                                            onSettled: () => setConfirmingRemove(false),
+                                        }), className: "rounded bg-destructive px-1.5 py-0.5 text-[11px] text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50", children: t("org.remove") })] })) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", intent: "danger", emphasis: "ghost", disabled: removeMember.isPending, onClick: () => setConfirmingRemove(true), className: "text-muted-foreground hover:text-destructive disabled:opacity-50", children: _jsx(IconTrash, { size: 14 }) }) }), _jsx(TooltipContent, { children: t("org.removeMember") })] }))] }))] })] }));
 }
 const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 function parseEmailList(input) {
@@ -334,18 +349,18 @@ function DomainSettingsSection({ domain, ownerEmail, }) {
             onSuccess: () => setEditing(false),
         });
     }
-    return (_jsxs("div", { className: "space-y-2 border-t border-border pt-3 first:border-t-0 first:pt-0", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Email domain auto-join" }), _jsxs("p", { className: "text-[11px] text-muted-foreground", children: ["Anyone who signs up with an email at this domain will join your organization automatically. You can only set your own email domain (", ownDomain || "—", "); free email providers like gmail.com or outlook.com aren't allowed."] }), !editing ? (_jsx("div", { className: "flex items-center gap-2", children: domain ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-sm", children: [_jsx(IconAt, { className: "h-3.5 w-3.5 text-muted-foreground" }), domain] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", onClick: () => {
-                                            setDraft(domain);
-                                            setEditing(true);
-                                        }, className: "text-muted-foreground hover:text-foreground", children: _jsx(IconPencil, { size: 14 }) }) }), _jsx(TooltipContent, { children: "Edit domain" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", intent: "danger", emphasis: "ghost", disabled: setOrgDomain.isPending, onClick: () => setOrgDomain.mutate(null), className: "text-muted-foreground hover:text-destructive disabled:opacity-50", children: _jsx(IconX, { size: 14 }) }) }), _jsx(TooltipContent, { children: "Remove domain" })] })] })) : (_jsxs(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => {
-                        setDraft(ownDomain);
-                        setEditing(true);
-                    }, className: "flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium hover:bg-accent/50", children: [_jsx(IconAt, { size: 14 }), "Allow ", ownDomain || "your domain", " to auto-join"] })) })) : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: (e) => {
-                            if (e.key === "Enter")
-                                save();
-                            if (e.key === "Escape")
-                                setEditing(false);
-                        }, placeholder: ownDomain || "example.com", className: "rounded-md border border-border bg-background px-2.5 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-foreground", autoFocus: true }), _jsx(Button, { type: "button", intent: "primary", emphasis: "solid", disabled: setOrgDomain.isPending, onClick: save, className: "rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50", children: setOrgDomain.isPending ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : ("Save") }), _jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => setEditing(false), className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground", children: "Cancel" })] })), _jsx(ErrorText, { error: setOrgDomain.error })] }));
+    return (_jsx(SettingsRow, { id: "email-domain", label: "Email domain auto-join", description: _jsx(OrganizationDescription, { help: `Anyone who signs up with an email at this domain joins the organization automatically. Only your own email domain (${ownDomain || "—"}) can be used; free email providers are not allowed.`, docsUrl: "https://www.builder.io/c/docs/agent-native-authentication?utm_source=agent-native&utm_medium=product&utm_campaign=organization_settings&utm_content=domain_auto_join", children: "Automatically add members with your work email." }), control: !editing ? (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: domain ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-sm", children: [_jsx(IconAt, { className: "h-3.5 w-3.5 text-muted-foreground" }), domain] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", onClick: () => {
+                                        setDraft(domain);
+                                        setEditing(true);
+                                    }, className: "text-muted-foreground hover:text-foreground", children: _jsx(IconPencil, { size: 14 }) }) }), _jsx(TooltipContent, { children: "Edit domain" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", intent: "danger", emphasis: "ghost", disabled: setOrgDomain.isPending, onClick: () => setOrgDomain.mutate(null), className: "text-muted-foreground hover:text-destructive disabled:opacity-50", children: _jsx(IconX, { size: 14 }) }) }), _jsx(TooltipContent, { children: "Remove domain" })] })] })) : (_jsxs(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => {
+                    setDraft(ownDomain);
+                    setEditing(true);
+                }, className: "flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium hover:bg-accent/50", children: [_jsx(IconAt, { size: 14 }), "Set domain"] })) })) : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: (e) => {
+                        if (e.key === "Enter")
+                            save();
+                        if (e.key === "Escape")
+                            setEditing(false);
+                    }, placeholder: ownDomain || "example.com", className: "w-44 rounded-md border border-border bg-background px-2.5 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-foreground", autoFocus: true }), _jsx(Button, { type: "button", intent: "primary", emphasis: "solid", disabled: setOrgDomain.isPending, onClick: save, className: "rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50", children: setOrgDomain.isPending ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : ("Save") }), _jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => setEditing(false), className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground", children: "Cancel" })] })), children: setOrgDomain.error ? _jsx(ErrorText, { error: setOrgDomain.error }) : null }));
 }
 function WorkspaceUrlSettingsSection({ workspaceUrl, }) {
     const setWorkspaceUrl = useSetOrgWorkspaceUrl();
@@ -361,15 +376,15 @@ function WorkspaceUrlSettingsSection({ workspaceUrl, }) {
             onSuccess: () => setEditing(false),
         });
     }
-    return (_jsxs("div", { className: "space-y-2 border-t border-border pt-3 first:border-t-0 first:pt-0", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Your workspace" }), _jsx("p", { className: "text-[11px] text-muted-foreground", children: "If your team runs its own workspace, members who land on a different deployment \u2014 opening a template from the catalog, for instance \u2014 get pointed here instead of an app that looks empty." }), !editing ? (_jsx("div", { className: "flex items-center gap-2", children: workspaceUrl ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-sm", children: [_jsx(IconExternalLink, { className: "h-3.5 w-3.5 text-muted-foreground" }), workspaceUrl] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", onClick: () => {
-                                            setDraft(workspaceUrl);
-                                            setEditing(true);
-                                        }, className: "text-muted-foreground hover:text-foreground", children: _jsx(IconPencil, { size: 14 }) }) }), _jsx(TooltipContent, { children: "Edit workspace URL" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", intent: "danger", emphasis: "ghost", disabled: setWorkspaceUrl.isPending, onClick: () => setWorkspaceUrl.mutate(null), className: "text-muted-foreground hover:text-destructive disabled:opacity-50", children: _jsx(IconX, { size: 14 }) }) }), _jsx(TooltipContent, { children: "Remove workspace URL" })] })] })) : (_jsxs(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => setEditing(true), className: "flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium hover:bg-accent/50", children: [_jsx(IconExternalLink, { size: 14 }), "Set workspace URL"] })) })) : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: (e) => {
-                            if (e.key === "Enter")
-                                save();
-                            if (e.key === "Escape")
-                                setEditing(false);
-                        }, placeholder: "workspace.example.com", className: "rounded-md border border-border bg-background px-2.5 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-foreground", autoFocus: true }), _jsx(Button, { type: "button", intent: "primary", emphasis: "solid", disabled: setWorkspaceUrl.isPending, onClick: save, className: "rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50", children: setWorkspaceUrl.isPending ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : ("Save") }), _jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => setEditing(false), className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground", children: "Cancel" })] })), _jsx(ErrorText, { error: setWorkspaceUrl.error })] }));
+    return (_jsx(SettingsRow, { id: "workspace-url", label: "Workspace URL", description: _jsx(OrganizationDescription, { help: "Members who land on another deployment can be sent to this workspace URL instead of an empty app.", docsUrl: "https://www.builder.io/c/docs/agent-native-deployment?utm_source=agent-native&utm_medium=product&utm_campaign=organization_settings&utm_content=workspace_url", children: "Send members to this workspace from another deployment." }), control: !editing ? (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: workspaceUrl ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "inline-flex max-w-72 items-center gap-1.5 truncate rounded-md border border-border bg-background px-2.5 py-1.5 text-sm", children: [_jsx(IconExternalLink, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: workspaceUrl })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", onClick: () => {
+                                        setDraft(workspaceUrl);
+                                        setEditing(true);
+                                    }, className: "text-muted-foreground hover:text-foreground", children: _jsx(IconPencil, { size: 14 }) }) }), _jsx(TooltipContent, { children: "Edit workspace URL" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", intent: "danger", emphasis: "ghost", disabled: setWorkspaceUrl.isPending, onClick: () => setWorkspaceUrl.mutate(null), className: "text-muted-foreground hover:text-destructive disabled:opacity-50", children: _jsx(IconX, { size: 14 }) }) }), _jsx(TooltipContent, { children: "Remove workspace URL" })] })] })) : (_jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => setEditing(true), className: "flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium hover:bg-accent/50", children: "Set URL" })) })) : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: (e) => {
+                        if (e.key === "Enter")
+                            save();
+                        if (e.key === "Escape")
+                            setEditing(false);
+                    }, placeholder: "workspace.example.com", className: "w-56 rounded-md border border-border bg-background px-2.5 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-foreground", autoFocus: true }), _jsx(Button, { type: "button", intent: "primary", emphasis: "solid", disabled: setWorkspaceUrl.isPending, onClick: save, className: "rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50", children: setWorkspaceUrl.isPending ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : ("Save") }), _jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => setEditing(false), className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground", children: "Cancel" })] })), children: setWorkspaceUrl.error ? (_jsx(ErrorText, { error: setWorkspaceUrl.error })) : null }));
 }
 function AuthProviderSettingsSection({ requiredAuthProvider, }) {
     const setAuthProvider = useSetOrgAuthProvider();
@@ -382,7 +397,7 @@ function AuthProviderSettingsSection({ requiredAuthProvider, }) {
         }
         setAuthProvider.mutate(null);
     }
-    return (_jsxs("div", { className: "space-y-2 border-t border-border pt-3 first:border-t-0 first:pt-0", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Organization sign-in" }), _jsx("p", { className: "text-[11px] text-muted-foreground", children: "Require Google sign-in for every member of this organization. Enabling this revokes all current sessions, and future password or non-Google sign-ins will be rejected." }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { checked: enabled, disabled: setAuthProvider.isPending, onCheckedChange: changeProvider, "aria-label": "Require Google sign-in" }), _jsx("span", { className: "text-sm font-medium", children: enabled ? "Google sign-in required" : "Google sign-in optional" })] }), _jsx(ErrorText, { error: setAuthProvider.error }), _jsx(AlertDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Require Google sign-in?" }), _jsx(AlertDialogDescription, { children: "Every current session in this organization will be revoked. Members must use their Google Workspace account the next time they sign in. Continue only after Google sign-in is configured for this app." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: setAuthProvider.isPending, children: "Cancel" }), _jsx(AlertDialogAction, { disabled: setAuthProvider.isPending, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(SettingsRow, { id: "organization-sign-in", label: "Organization sign-in", description: _jsx(OrganizationDescription, { help: "Require Google sign-in for every member. Enabling this revokes current sessions and rejects future password or non-Google sign-ins.", docsUrl: "https://www.builder.io/c/docs/agent-native-authentication?utm_source=agent-native&utm_medium=product&utm_campaign=organization_settings&utm_content=organization_sign_in", children: "Choose how members sign in." }), control: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-sm font-medium", children: enabled ? "Google required" : "Google optional" }), _jsx(Switch, { checked: enabled, disabled: setAuthProvider.isPending, onCheckedChange: changeProvider, "aria-label": "Require Google sign-in" })] }), children: setAuthProvider.error ? (_jsx(ErrorText, { error: setAuthProvider.error })) : null }), _jsx(AlertDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Require Google sign-in?" }), _jsx(AlertDialogDescription, { children: "Every current session in this organization will be revoked. Members must use their Google Workspace account the next time they sign in. Continue only after Google sign-in is configured for this app." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: setAuthProvider.isPending, children: "Cancel" }), _jsx(AlertDialogAction, { disabled: setAuthProvider.isPending, onClick: () => {
                                         setAuthProvider.mutate("google", {
                                             onSuccess: () => setConfirmOpen(false),
                                         });
@@ -463,19 +478,24 @@ function A2ASecretSection({ isSet }) {
         });
     }
     const masked = isSet ? "••••••••••••" : "Not set";
-    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-1 text-xs font-medium text-muted-foreground uppercase tracking-wide", children: [_jsx("span", { children: "Cross-app authentication" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("a", { href: "/docs/a2a-protocol#organization-secret-sync", target: "_blank", rel: "noopener noreferrer", "aria-label": "Read the cross-app authentication documentation", className: "inline-flex size-3.5 items-center justify-center rounded-full text-muted-foreground hover:text-foreground", children: _jsx(IconHelpCircle, { className: "size-3" }) }) }), _jsx(TooltipContent, { children: "Read the cross-app authentication documentation" })] })] }), _jsx("p", { className: "text-[11px] text-muted-foreground", children: "This secret authenticates cross-app delegation (e.g. Dispatch to Analytics). All apps in your organization need the same secret." }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-sm font-mono", children: [_jsx(IconKey, { className: "h-3.5 w-3.5 text-muted-foreground" }), secret ?? masked] }), isSet && (_jsxs(_Fragment, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", onClick: toggleReveal, disabled: revealA2ASecret.isPending, className: "text-muted-foreground hover:text-foreground", children: secret ? _jsx(IconEyeOff, { size: 14 }) : _jsx(IconEye, { size: 14 }) }) }), _jsx(TooltipContent, { children: secret ? "Hide secret" : "Reveal secret" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", onClick: copyToClipboard, disabled: revealA2ASecret.isPending, className: "text-muted-foreground hover:text-foreground", children: copied ? (_jsx(IconCheck, { size: 14, className: "text-primary" })) : (_jsx(IconCopy, { size: 14 })) }) }), _jsx(TooltipContent, { children: "Copy secret" })] })] })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { type: "button", intent: "danger", emphasis: "outline", onClick: regenerate, disabled: setA2ASecret.isPending || syncA2ASecret.isPending, className: "inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium hover:bg-accent/50 disabled:opacity-50", children: [setA2ASecret.isPending ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : (_jsx(IconRefresh, { size: 14 })), "Regenerate"] }) }), _jsx(TooltipContent, { children: "Regenerate secret and sync to connected apps" })] }), isSet && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => syncToApps(), disabled: setA2ASecret.isPending || syncA2ASecret.isPending, className: "inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium hover:bg-accent/50 disabled:opacity-50", children: [syncA2ASecret.isPending ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : (_jsx(IconCloudUpload, { size: 14 })), "Sync to apps"] }) }), _jsx(TooltipContent, { children: "Push this secret to every connected app" })] }))] }), syncA2ASecret.isPending && (_jsx("p", { className: "text-[11px] text-muted-foreground", children: "Syncing to connected apps\u2026" })), syncResult && !syncA2ASecret.isPending && (_jsxs("div", { className: "space-y-1", children: [_jsxs("p", { className: "text-[11px] text-muted-foreground", children: ["Synced to ", syncResult.succeeded, "/", syncResult.total, " app", syncResult.total === 1 ? "" : "s", syncResult.failed > 0 ? ` (${syncResult.failed} failed)` : "", "."] }), syncResult.failed > 0 && (_jsx("ul", { className: "text-[11px] text-destructive list-disc ps-5 space-y-0.5", children: syncResult.results
-                            .filter((r) => !r.ok)
-                            .map((r) => (_jsxs("li", { children: [r.name, ": ", r.error || `HTTP ${r.status ?? "?"}`] }, r.id))) }))] })), !pasteMode ? (_jsxs(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => setPasteMode(true), className: "flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium hover:bg-accent/50", children: [_jsx(IconKey, { size: 14 }), "Paste secret from another app"] })) : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: pasteValue, onChange: (e) => setPasteValue(e.target.value), onKeyDown: (e) => {
-                            if (e.key === "Enter")
-                                saveSecret();
-                            if (e.key === "Escape") {
+    return (_jsx(SettingsRow, { id: "cross-app-authentication", label: "Cross-app authentication", description: _jsx(OrganizationDescription, { help: "This secret authenticates cross-app delegation. Every app in the organization must share it.", children: "Share one secret across connected apps." }), control: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-sm font-mono", children: [_jsx(IconKey, { className: "h-3.5 w-3.5 text-muted-foreground" }), secret ?? masked] }), isSet && (_jsxs(_Fragment, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", onClick: toggleReveal, disabled: revealA2ASecret.isPending, className: "text-muted-foreground hover:text-foreground", children: secret ? _jsx(IconEyeOff, { size: 14 }) : _jsx(IconEye, { size: 14 }) }) }), _jsx(TooltipContent, { children: secret ? "Hide secret" : "Reveal secret" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", onClick: copyToClipboard, disabled: revealA2ASecret.isPending, className: "text-muted-foreground hover:text-foreground", children: copied ? (_jsx(IconCheck, { size: 14, className: "text-primary" })) : (_jsx(IconCopy, { size: 14 })) }) }), _jsx(TooltipContent, { children: "Copy secret" })] })] })), _jsxs(Button, { type: "button", intent: "danger", emphasis: "outline", onClick: regenerate, disabled: setA2ASecret.isPending || syncA2ASecret.isPending, className: "inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium hover:bg-accent/50 disabled:opacity-50", children: [setA2ASecret.isPending ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : (_jsx(IconRefresh, { size: 14 })), "Regenerate"] }), isSet && (_jsxs(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => syncToApps(), disabled: setA2ASecret.isPending || syncA2ASecret.isPending, className: "inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium hover:bg-accent/50 disabled:opacity-50", children: [syncA2ASecret.isPending ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : (_jsx(IconCloudUpload, { size: 14 })), "Sync"] })), !pasteMode && (_jsxs(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => setPasteMode(true), className: "inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium hover:bg-accent/50", children: [_jsx(IconKey, { size: 14 }), "Paste secret"] }))] }), children: (pasteMode ||
+            syncA2ASecret.isPending ||
+            syncResult ||
+            revealA2ASecret.error ||
+            setA2ASecret.error ||
+            syncA2ASecret.error) && (_jsxs("div", { className: "space-y-3", children: [syncA2ASecret.isPending && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Syncing to connected apps\u2026" })), syncResult && !syncA2ASecret.isPending && (_jsxs("div", { className: "space-y-1", children: [_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Synced to ", syncResult.succeeded, "/", syncResult.total, " app", syncResult.total === 1 ? "" : "s", syncResult.failed > 0 ? ` (${syncResult.failed} failed)` : "", "."] }), syncResult.failed > 0 && (_jsx("ul", { className: "list-disc space-y-0.5 ps-5 text-xs text-destructive", children: syncResult.results
+                                .filter((r) => !r.ok)
+                                .map((r) => (_jsxs("li", { children: [r.name, ": ", r.error || `HTTP ${r.status ?? "?"}`] }, r.id))) }))] })), pasteMode ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: pasteValue, onChange: (e) => setPasteValue(e.target.value), onKeyDown: (e) => {
+                                if (e.key === "Enter")
+                                    saveSecret();
+                                if (e.key === "Escape") {
+                                    setPasteMode(false);
+                                    setPasteValue("");
+                                }
+                            }, placeholder: "Paste A2A secret", className: "min-w-0 flex-1 rounded-md border border-border bg-background px-2.5 py-1.5 text-sm font-mono focus:outline-none focus:ring-1 focus:ring-foreground", autoFocus: true }), _jsx(Button, { type: "button", intent: "primary", emphasis: "solid", disabled: !pasteValue.trim() || setA2ASecret.isPending, onClick: saveSecret, className: "rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50", children: setA2ASecret.isPending ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : ("Save") }), _jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => {
                                 setPasteMode(false);
                                 setPasteValue("");
-                            }
-                        }, placeholder: "Paste A2A secret", className: "flex-1 rounded-md border border-border bg-background px-2.5 py-1.5 text-sm font-mono focus:outline-none focus:ring-1 focus:ring-foreground", autoFocus: true }), _jsx(Button, { type: "button", intent: "primary", emphasis: "solid", disabled: !pasteValue.trim() || setA2ASecret.isPending, onClick: saveSecret, className: "rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50", children: setA2ASecret.isPending ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : ("Save") }), _jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => {
-                            setPasteMode(false);
-                            setPasteValue("");
-                        }, className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground", children: "Cancel" })] })), _jsx(ErrorText, { error: revealA2ASecret.error }), _jsx(ErrorText, { error: setA2ASecret.error }), _jsx(ErrorText, { error: syncA2ASecret.error })] }));
+                            }, className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground", children: "Cancel" })] })) : null, _jsx(ErrorText, { error: revealA2ASecret.error }), _jsx(ErrorText, { error: setA2ASecret.error }), _jsx(ErrorText, { error: syncA2ASecret.error })] })) }));
 }
 /**
  * Default Team management page. Templates can route directly to this component
@@ -484,7 +504,7 @@ function A2ASecretSection({ isSet }) {
 export function TeamPage({ layout, title, showTitle = true, createOrgDescription, className, appRoles, }) {
     const t = useT();
     const { data: org, isLoading } = useOrg();
-    const content = (_jsxs("div", { className: `space-y-6 ${className ?? "max-w-2xl"}`, children: [showTitle ? (_jsx("h2", { className: "text-2xl font-bold tracking-tight", children: title ?? t("org.team") })) : null, isLoading && (_jsx("section", { className: "rounded-lg border border-border bg-card p-6", children: _jsx("div", { className: "text-sm text-muted-foreground", children: t("org.loading") }) })), !isLoading && (_jsxs(_Fragment, { children: [_jsx(PendingInvitationsCard, {}), org?.domainMatches && org.domainMatches.length > 0 && (_jsx(JoinByDomainCard, { matches: org.domainMatches })), !org?.orgId ? (_jsx(CreateOrgCard, { description: createOrgDescription })) : (_jsx(MembersCard, { appRoles: appRoles }))] }))] }));
+    const content = (_jsxs("div", { className: `w-full space-y-6 ${className ?? ""}`, children: [showTitle ? (_jsx("h2", { className: "text-2xl font-bold tracking-tight", children: title ?? t("org.team") })) : null, isLoading && (_jsx("section", { className: "rounded-lg border border-border bg-card p-6", children: _jsx("div", { className: "text-sm text-muted-foreground", children: t("org.loading") }) })), !isLoading && (_jsxs(_Fragment, { children: [_jsx(PendingInvitationsCard, {}), org?.domainMatches && org.domainMatches.length > 0 && (_jsx(JoinByDomainCard, { matches: org.domainMatches })), !org?.orgId ? (_jsx(CreateOrgCard, { description: createOrgDescription })) : (_jsx(MembersCard, { appRoles: appRoles }))] }))] }));
     const wrapped = (_jsx(TooltipProvider, { delayDuration: 200, children: content }));
     return layout ? _jsx(_Fragment, { children: layout(wrapped) }) : wrapped;
 }

package/dist/client/require-session.d.ts

@@ -37,7 +37,7 @@ export interface RequireSessionProps {
     fallback?: React.ReactNode;
     /**
      * When true (default), unauthenticated visitors are redirected to the
-     * framework sign-in entry point (`/_agent-native/sign-in`) carrying a `c`
+     * framework sign-in entry point (`/sign-in`) carrying a `c`
      * continuation for the current URL — so they land back here once signed in.
      * When false, `signedOut` is rendered instead and no navigation happens.
      */

package/dist/client/require-session.js

@@ -29,8 +29,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * surfaces that authenticate by another mechanism.
  */
 import { useEffect, useRef } from "react";
-import { signInJourney } from "../shared/sign-in-journey.js";
-import { agentNativePath, appBasePath } from "./api-path.js";
+import { SIGN_IN_ENTRY_PATH, signInJourney, } from "../shared/sign-in-journey.js";
+import { appBasePath, appPath } from "./api-path.js";
 import { DefaultSpinner } from "./DefaultSpinner.js";
 import { useSession } from "./use-session.js";
 /**
@@ -59,7 +59,7 @@ function currentJourney(returnTo) {
  * directly and honour its `signInHref: null`.
  */
 export function buildSignInReturnHref(opts) {
-    const base = agentNativePath("/_agent-native/sign-in");
+    const base = appPath(SIGN_IN_ENTRY_PATH);
     if (typeof window === "undefined")
         return base;
     return currentJourney(opts?.returnTo).signInHref ?? base;
@@ -113,5 +113,5 @@ function ResolvedSessionGate({ children, fallback, redirect = true, signedOut, }
     return _jsx(_Fragment, { children: children });
 }
 function SessionUnavailableNotice({ retry }) {
-    return (_jsxs("div", { className: "flex h-screen w-full flex-col items-center justify-center gap-4 px-6 text-center", children: [_jsx("p", { className: "max-w-md text-sm text-muted-foreground", children: "We couldn't reach the server to confirm you're signed in. This is usually temporary." }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", onClick: retry, className: "rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground", children: "Try again" }), _jsx("button", { type: "button", onClick: () => window.location.reload(), className: "rounded-md border border-border px-3 py-1.5 text-sm font-medium", children: "Reload page" })] })] }));
+    return (_jsxs("div", { className: "flex h-screen w-full flex-col items-center justify-center gap-4 px-6 text-center", children: [_jsx("p", { className: "max-w-md text-sm text-muted-foreground", children: "We couldn't reach the server to confirm your session. This is usually temporary." }), _jsx("p", { className: "max-w-md text-xs text-muted-foreground", children: "Retry connection checks your session here. Reload page starts the app over." }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", onClick: retry, className: "rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground", children: "Retry connection" }), _jsx("button", { type: "button", onClick: () => window.location.reload(), className: "rounded-md border border-border px-3 py-1.5 text-sm font-medium", children: "Reload page" })] })] }));
 }

package/dist/client/resources/McpConnectionSuggestion.d.ts

@@ -7,4 +7,5 @@ export interface McpConnectionSuggestionProps {
     integrations?: DefaultMcpIntegration[];
 }
 export declare function findMcpConnectionSuggestionIntegration({ text, contextText, variant, integrations, }: McpConnectionSuggestionProps): DefaultMcpIntegration | null;
+export declare function shouldRenderMcpIntegrationFallback(logoUrl: string, logoLoadFailed: boolean): boolean;
 export declare function McpConnectionSuggestion({ text, contextText, variant, integrations: integrationOptions, }: McpConnectionSuggestionProps): import("react").JSX.Element | null;

package/dist/client/resources/McpConnectionSuggestion.js

@@ -5,12 +5,15 @@ import { agentNativePath } from "../api-path.js";
 import { openAgentSettings } from "../CommandMenu.js";
 import { useT } from "../i18n.js";
 import { clearMcpConnectionResume, notifyMcpConnectionComplete, saveMcpConnectionResume, } from "./mcp-connection-resume.js";
-import { buildMcpOAuthStartUrl, findMcpIntegrationForText, getMcpIntegrationApiFallback, getDefaultMcpIntegrations, isMcpConnectionFailureText, navigateToMcpOAuthStart, } from "./mcp-integration-catalog.js";
+import { buildMcpOAuthStartUrl, findMcpIntegrationForText, getMcpIntegrationApiFallback, getDefaultMcpIntegrations, isMcpConnectionFailureText, navigateToMcpOAuthStart, shouldOfferMcpIntegrationOrganizationScope, } from "./mcp-integration-catalog.js";
 import { McpIntegrationDialog } from "./McpIntegrationDialog.js";
 import { useCreateMcpServer, useMcpServers, } from "./use-mcp-servers.js";
 export function findMcpConnectionSuggestionIntegration({ text, contextText = "", variant = "composer", integrations = getDefaultMcpIntegrations(), }) {
     return findMcpIntegrationForText(variant === "response" ? contextText : text, integrations);
 }
+export function shouldRenderMcpIntegrationFallback(logoUrl, logoLoadFailed) {
+    return !logoUrl || logoLoadFailed;
+}
 function compareUrl(value) {
     try {
         const url = new URL(value.trim());
@@ -33,8 +36,9 @@ function returnUrl() {
 }
 function canStartOAuth(integration) {
     return (integration.authMode === "oauth" &&
-        integration.connectionMode === "oauth" &&
-        integration.availability === "ready");
+        ((integration.connectionMode === "oauth" &&
+            integration.availability === "ready") ||
+            integration.managedOAuth === true));
 }
 function hasApiFallback(apiFallback) {
     return Boolean(apiFallback);
@@ -47,6 +51,7 @@ export function McpConnectionSuggestion({ text, contextText = "", variant = "com
     const [dismissedId, setDismissedId] = useState(null);
     const [connecting, setConnecting] = useState(false);
     const [error, setError] = useState(null);
+    const [logoLoadFailed, setLogoLoadFailed] = useState(false);
     const integrations = useMemo(() => integrationOptions ?? getDefaultMcpIntegrations(), [integrationOptions]);
     const integration = useMemo(() => findMcpConnectionSuggestionIntegration({
         text,
@@ -62,6 +67,12 @@ export function McpConnectionSuggestion({ text, contextText = "", variant = "com
         ...(mcpServersQuery.data?.org ?? []),
     ], [mcpServersQuery.data]);
     const connected = integration ? isConnected(integration, servers) : false;
+    const hasOrg = Boolean(mcpServersQuery.data?.orgId);
+    const canCreateOrgMcp = Boolean(hasOrg &&
+        (mcpServersQuery.data?.role === "owner" ||
+            mcpServersQuery.data?.role === "admin"));
+    const shouldChooseScope = Boolean(integration &&
+        shouldOfferMcpIntegrationOrganizationScope(integration, hasOrg, canCreateOrgMcp));
     const shouldSuggest = mcpServersQuery.isSuccess &&
         integration &&
         !connected &&
@@ -70,7 +81,8 @@ export function McpConnectionSuggestion({ text, contextText = "", variant = "com
     useEffect(() => {
         setError(null);
         setConnecting(false);
-    }, [integration?.id, variant]);
+        setLogoLoadFailed(false);
+    }, [integration?.id, integration?.logoUrl, variant]);
     if (!shouldSuggest)
         return null;
     const connect = async () => {
@@ -81,6 +93,11 @@ export function McpConnectionSuggestion({ text, contextText = "", variant = "com
             openAgentSettings(`secrets:${apiFallback.secretKey}`);
             return;
         }
+        if (shouldChooseScope) {
+            saveMcpConnectionResume(variant === "response" ? contextText : text);
+            setDialogOpen(true);
+            return;
+        }
         if (canStartOAuth(integration)) {
             setConnecting(true);
             saveMcpConnectionResume(variant === "response" ? contextText : text);
@@ -128,20 +145,20 @@ export function McpConnectionSuggestion({ text, contextText = "", variant = "com
                 ? t("mcpIntegrations.viewSetup")
                 : t("mcpIntegrations.connect");
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: variant === "response"
-                    ? "mt-3 flex max-w-[520px] items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 px-3 py-2 text-[12px]"
-                    : "mx-auto mb-2 flex w-[min(calc(100%_-_1.5rem),680px)] items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 px-3 py-2 text-[12px]", "data-mcp-connection-suggestion": integration.id, children: [_jsxs("div", { className: "relative flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-background text-[10px] font-semibold text-muted-foreground", children: [_jsx("span", { "aria-hidden": "true", children: integration.name.slice(0, 1) }), integration.logoUrl && (_jsx("img", { src: integration.logoUrl, alt: "", className: "absolute h-5 w-5 object-contain", onError: (event) => {
-                                    event.currentTarget.hidden = true;
-                                } }))] }), _jsx("span", { className: "min-w-0 flex-1 leading-snug text-foreground", children: t(hasApiFallback(apiFallback)
+                    ? "agent-mcp-connection-suggestion agent-mcp-connection-suggestion--response mt-3 flex max-w-[520px] items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 px-3 py-2 text-[12px]"
+                    : "agent-mcp-connection-suggestion agent-mcp-connection-suggestion--composer mx-auto mb-2 flex w-[min(calc(100%_-_1.5rem),684px)] items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 px-3 py-2 text-[12px]", "data-mcp-connection-suggestion": integration.id, "data-mcp-connection-suggestion-variant": variant, children: [_jsxs("div", { className: "relative flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-background text-[10px] font-semibold text-muted-foreground", children: [shouldRenderMcpIntegrationFallback(integration.logoUrl, logoLoadFailed) ? (_jsx("span", { "aria-hidden": "true", children: integration.name.slice(0, 1) })) : null, integration.logoUrl && (_jsx("img", { src: integration.logoUrl, alt: "", className: `absolute h-5 w-5 object-contain${logoLoadFailed ? " hidden" : ""}`, onError: () => setLogoLoadFailed(true) }))] }), _jsx("span", { className: "min-w-0 flex-1 leading-snug text-foreground", children: t(hasApiFallback(apiFallback)
                             ? "mcpIntegrations.connectSuggestionWithApiToken"
                             : "mcpIntegrations.connectSuggestion", { name: integration.name }) }), _jsxs("button", { type: "button", onClick: () => void connect(), disabled: connecting, "aria-busy": connecting, className: "inline-flex shrink-0 items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-[11px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-60", children: [connecting && _jsx(IconLoader2, { className: "h-3 w-3 animate-spin" }), !connecting &&
                                 canStartOAuth(integration) &&
                                 !hasApiFallback(apiFallback) && (_jsx(IconPlugConnected, { className: "h-3 w-3" })), !connecting && hasApiFallback(apiFallback) && (_jsx(IconPlugConnected, { className: "h-3 w-3" })), actionLabel, !connecting &&
                                 !canStartOAuth(integration) &&
-                                !hasApiFallback(apiFallback) && (_jsx(IconArrowUpRight, { className: "h-3 w-3" }))] }), _jsx("button", { type: "button", onClick: () => setDismissedId(integration.id), className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-background hover:text-foreground", "aria-label": t("mcpIntegrations.dismissSuggestion"), children: _jsx(IconX, { className: "h-3.5 w-3.5" }) })] }), error && (_jsx("div", { className: "mx-auto mb-2 w-[min(100%,680px)] text-[11px] text-destructive", children: error })), _jsx(McpIntegrationDialog, { open: dialogOpen, onOpenChange: (open) => {
+                                !hasApiFallback(apiFallback) && (_jsx(IconArrowUpRight, { className: "h-3 w-3" }))] }), _jsx("button", { type: "button", onClick: () => setDismissedId(integration.id), className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-background hover:text-foreground", "aria-label": t("mcpIntegrations.dismissSuggestion"), children: _jsx(IconX, { className: "h-3.5 w-3.5" }) })] }), error && (_jsx("div", { className: variant === "response"
+                    ? "agent-mcp-connection-suggestion-error agent-mcp-connection-suggestion-error--response mt-1 max-w-[520px] text-[11px] text-destructive"
+                    : "agent-mcp-connection-suggestion-error agent-mcp-connection-suggestion-error--composer mx-auto mb-2 w-[min(calc(100%_-_1.5rem),684px)] text-[11px] text-destructive", children: error })), _jsx(McpIntegrationDialog, { open: dialogOpen, onOpenChange: (open) => {
                     setDialogOpen(open);
                     if (!open)
                         clearMcpConnectionResume();
-                }, initialIntegrationId: integration.id, defaultScope: "user", canCreateOrgMcp: false, hasOrg: Boolean(mcpServersQuery.data?.orgId), onCreateMcpServer: (args) => createMcpServer.mutateAsync(args), onCreated: () => {
+                }, initialIntegrationId: integration.id, defaultScope: "user", canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrg, onCreateMcpServer: (args) => createMcpServer.mutateAsync(args), onCreated: () => {
                     setDismissedId(integration.id);
                     saveMcpConnectionResume(variant === "response" ? contextText : text);
                     notifyMcpConnectionComplete();