@agent-native/core 0.141.5 → 0.141.7

package/dist/client/integrations/IntegrationsPanel.js

@@ -1,12 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconPlus, IconBrandSlack, IconBrandTelegram, IconBrandWhatsapp, IconBrandGoogleDrive, IconTerminal2, IconBuildingSkyscraper, IconCopy, IconCheck, IconChevronLeft, IconChevronRight, IconExternalLink, IconCircleCheck, IconInfoCircle, IconSearch, IconServer, } from "@tabler/icons-react";
+import { IconPlus, IconBrandSlack, IconBrandTelegram, IconBrandWhatsapp, IconBrandGoogleDrive, IconTerminal2, IconBuildingSkyscraper, IconCopy, IconCheck, IconChevronLeft, IconChevronRight, IconExternalLink, IconCircleCheck, IconInfoCircle, IconSearch, IconServer, IconLoader2, IconRefresh, } from "@tabler/icons-react";
 import { useState, useCallback, useEffect, useMemo } from "react";
 import { agentNativePath } from "../api-path.js";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { useT } from "../i18n.js";
 import { getDefaultMcpIntegrations, } from "../resources/mcp-integration-catalog.js";
 import { McpIntegrationDialog } from "../resources/McpIntegrationDialog.js";
-import { useCreateMcpServer, useDeleteMcpServer, useMcpServers, } from "../resources/use-mcp-servers.js";
+import { useCreateMcpServer, useDeleteMcpServer, useMcpServers, useReconnectMcpServer, } from "../resources/use-mcp-servers.js";
 import { useIntegrationStatus, } from "./useIntegrationStatus.js";
 import { isNonPublicWebhookUrl } from "./webhook-url.js";
 const PLATFORMS = [
@@ -257,12 +257,19 @@ function McpLogo({ integration }) {
     const [failed, setFailed] = useState(false);
     return (_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border/70 bg-background text-xs font-semibold text-muted-foreground", children: failed ? (integration.name.slice(0, 1)) : (_jsx("img", { src: integration.logoUrl, alt: "", loading: "lazy", decoding: "async", className: "size-7 object-contain", onError: () => setFailed(true) })) }));
 }
-function McpServerStatus({ server }) {
+function McpServerStatus({ server, onReconnect, reconnecting = false, reconnectError, }) {
+    const t = useT();
     if (server.status.state === "connected") {
         return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400", children: [_jsx("span", { className: "size-1.5 rounded-full bg-emerald-500" }), "Connected \u00B7 ", server.status.toolCount, " tool", server.status.toolCount === 1 ? "" : "s"] }));
     }
     if (server.status.state === "error") {
-        return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-destructive", children: [_jsx("span", { className: "size-1.5 rounded-full bg-destructive" }), "Connection error"] }));
+        return (_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "inline-flex items-center gap-1.5 text-xs text-destructive", children: [_jsx("span", { className: "size-1.5 rounded-full bg-destructive" }), t("mcpIntegrations.connectionError")] }), _jsx("p", { className: "mt-1 max-w-3xl break-words text-xs leading-5 text-destructive/85", children: t("mcpIntegrations.connectionErrorReason", {
+                                reason: server.status.error,
+                            }) }), reconnectError && (_jsx("p", { className: "mt-1 break-words text-xs leading-5 text-destructive", children: t("mcpIntegrations.reconnectFailed", {
+                                error: reconnectError,
+                            }) }))] }), onReconnect && (_jsxs("button", { type: "button", onClick: onReconnect, disabled: reconnecting, className: "inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-accent disabled:cursor-wait disabled:opacity-60", children: [reconnecting ? (_jsx(IconLoader2, { className: "size-3.5 animate-spin" })) : (_jsx(IconRefresh, { className: "size-3.5" })), reconnecting
+                            ? t("mcpIntegrations.reconnecting")
+                            : t("mcpIntegrations.reconnect")] }))] }));
     }
     return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("span", { className: "size-1.5 rounded-full bg-muted-foreground/50" }), "Status unknown"] }));
 }
@@ -273,10 +280,13 @@ function McpIntegrationsSection({ query }) {
     const serversQuery = useMcpServers();
     const createServer = useCreateMcpServer();
     const deleteServer = useDeleteMcpServer();
+    const reconnectServer = useReconnectMcpServer();
     const [dialogOpen, setDialogOpen] = useState(false);
     const [initialIntegrationId, setInitialIntegrationId] = useState(null);
     const [deleteTarget, setDeleteTarget] = useState(null);
     const [deleteError, setDeleteError] = useState(null);
+    const [reconnectingKey, setReconnectingKey] = useState(null);
+    const [reconnectError, setReconnectError] = useState(null);
     const catalog = useMemo(() => getDefaultMcpIntegrations(), []);
     const normalizedQuery = query.trim().toLowerCase();
     const filteredCatalog = useMemo(() => {
@@ -318,14 +328,38 @@ function McpIntegrationsSection({ query }) {
                 : "Could not remove agent integration.");
         }
     }, [deleteServer, deleteTarget]);
+    const reconnect = useCallback(async (server) => {
+        const key = `${server.scope}:${server.id}`;
+        setReconnectingKey(key);
+        setReconnectError(null);
+        try {
+            await reconnectServer.mutateAsync({
+                id: server.id,
+                scope: server.scope,
+            });
+        }
+        catch (error) {
+            setReconnectError({
+                key,
+                message: error instanceof Error ? error.message : String(error),
+            });
+        }
+        finally {
+            setReconnectingKey(null);
+        }
+    }, [reconnectServer]);
     return (_jsxs("section", { "data-testid": "mcp-integrations", className: "space-y-5", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(IconServer, { className: "size-4 text-muted-foreground" }), _jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Agent integrations" })] }), _jsx("p", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: "Give your agent tools and context from the services you use." })] }), _jsxs("button", { type: "button", onClick: () => openCatalog(), className: "inline-flex w-fit items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90", children: [_jsx(IconPlus, { className: "size-3.5" }), "Add integration"] })] }), deleteError && (_jsx("p", { className: "border-y border-destructive/20 bg-destructive/5 py-3 text-xs text-destructive", children: deleteError })), serversQuery.isError ? (_jsx("p", { className: "border-y border-destructive/20 bg-destructive/5 py-3 text-xs text-destructive", children: "Could not load connected agent integrations. The catalog is still available." })) : serversQuery.isLoading ? (_jsxs("div", { className: "space-y-3 rounded-xl border border-border/70 bg-card px-4 py-4", children: [_jsx("div", { className: "h-5 w-1/2 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-5 w-3/4 animate-pulse rounded bg-muted" })] })) : servers.length > 0 && !normalizedQuery ? (_jsxs("section", { className: "space-y-2", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Installed" }), _jsx("div", { className: "overflow-hidden rounded-xl border border-border/70 bg-card text-card-foreground", children: _jsx("div", { className: "divide-y divide-border/60 px-4", children: servers.map((server) => {
                                 const key = `${server.scope}:${server.id}`;
                                 const canRemove = server.scope === "user" ||
                                     serversQuery.data?.role === "owner" ||
                                     serversQuery.data?.role === "admin";
-                                return (_jsxs("div", { className: "flex items-center gap-3 py-3.5", children: [_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-background text-muted-foreground", children: _jsx(IconServer, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: server.name }), _jsx("span", { className: "text-[11px] text-muted-foreground", children: server.scope === "user"
+                                return (_jsxs("div", { className: "flex items-start gap-3 py-3.5", children: [_jsx("span", { className: "mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-background text-muted-foreground", children: _jsx(IconServer, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: server.name }), _jsx("span", { className: "text-[11px] text-muted-foreground", children: server.scope === "user"
                                                                 ? "Personal"
-                                                                : "Organization" })] }), _jsx(McpServerStatus, { server: server })] }), canRemove && (_jsx("button", { type: "button", onClick: () => void removeServer(server), disabled: deleteServer.isPending, className: "shrink-0 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-accent disabled:opacity-50", children: deleteTarget === key ? "Confirm" : "Remove" }))] }, key));
+                                                                : "Organization" })] }), _jsx(McpServerStatus, { server: server, onReconnect: server.status.state === "error"
+                                                        ? () => void reconnect(server)
+                                                        : undefined, reconnecting: reconnectingKey === key, reconnectError: reconnectError?.key === key
+                                                        ? reconnectError.message
+                                                        : undefined })] }), canRemove && (_jsx("button", { type: "button", onClick: () => void removeServer(server), disabled: deleteServer.isPending, className: "shrink-0 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-accent disabled:opacity-50", children: deleteTarget === key ? "Confirm" : "Remove" }))] }, key));
                             }) }) })] })) : null, filteredCatalog.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between gap-3", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Available integrations" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [filteredCatalog.length, " integrations"] })] }), _jsx("div", { className: "grid gap-x-8 overflow-hidden rounded-xl border border-border/70 bg-card px-4 sm:grid-cols-2", children: filteredCatalog.map((integration) => (_jsx(McpCatalogItem, { integration: integration, connected: connectedUrls.has(compareMcpUrl(integration.url)), onConnect: openCatalog }, integration.id))) })] })), filteredCatalog.length === 0 && normalizedQuery && (_jsxs("p", { className: "border-y border-border/60 py-4 text-xs text-muted-foreground", children: ["No agent integrations match \u201C", query, "\u201D."] })), _jsx(McpIntegrationDialog, { open: dialogOpen, onOpenChange: setDialogOpen, initialIntegrationId: initialIntegrationId, defaultScope: "user", canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrg, onCreateMcpServer: (args) => createServer.mutateAsync(args) })] }));
 }
 export function IntegrationsPanel() {

package/dist/client/org/OrgSwitcher.js

@@ -30,8 +30,8 @@ const SECTION_LABEL_CLASS = "px-2.5 pt-1 pb-0.5 text-[10px] uppercase tracking-w
 const APP_SUBMENU_CONTENT_CLASS = "z-50 w-72 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
 const SWITCHER_BUTTON_CLASS = "flex w-full items-center gap-2 rounded-md border-0 bg-accent/50 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent/70 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-60 cursor-pointer";
 const COMPACT_SWITCHER_BUTTON_CLASS = "flex items-center justify-center rounded-md border-0 bg-accent/50 p-1.5 text-muted-foreground hover:bg-accent/70 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-60 cursor-pointer";
-const DEFAULT_ORGANIZATION_SETTINGS_PATH = "/settings#organization";
-const DEFAULT_PROFILE_PATH = "/settings#account";
+const DEFAULT_ORGANIZATION_SETTINGS_PATH = "/settings/organization";
+const DEFAULT_PROFILE_PATH = "/settings/account";
 const DEFAULT_AGENT_PATH = "/agent";
 const APP_ICON_MAP = {
     Mail: IconMail,

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", 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;

package/dist/client/resources/use-mcp-servers.d.ts

@@ -46,10 +46,15 @@ export interface CreateMcpServerArgs {
     description?: string;
 }
 export declare function useCreateMcpServer(): import("@tanstack/react-query").UseMutationResult<McpServer, Error, CreateMcpServerArgs, unknown>;
+export interface ReconnectMcpServerArgs {
+    id: string;
+    scope: McpServerScope;
+}
 export declare function useDeleteMcpServer(): import("@tanstack/react-query").UseMutationResult<void, Error, {
     id: string;
     scope: McpServerScope;
 }, unknown>;
+export declare function useReconnectMcpServer(): import("@tanstack/react-query").UseMutationResult<void, Error, ReconnectMcpServerArgs, unknown>;
 export interface TestMcpUrlResult {
     ok: boolean;
     error?: string;

package/dist/client/resources/use-mcp-servers.js

@@ -59,6 +59,42 @@ export function useDeleteMcpServer() {
         onSuccess: () => qc.invalidateQueries({ queryKey: LIST_KEY }),
     });
 }
+async function readMcpMutationBody(res) {
+    const text = (await res.text()).trim();
+    if (!text)
+        return null;
+    try {
+        return JSON.parse(text);
+    }
+    catch (cause) {
+        throw new Error(`Reconnect response was not valid JSON (HTTP ${res.status}).`, { cause });
+    }
+}
+function reconnectMcpServerUrl(args) {
+    return `${ENDPOINT}/${encodeURIComponent(args.id)}/reconnect?scope=${args.scope}`;
+}
+export function useReconnectMcpServer() {
+    const qc = useQueryClient();
+    return useMutation({
+        mutationFn: async (args) => {
+            const res = await fetch(reconnectMcpServerUrl(args), {
+                method: "POST",
+                credentials: "include",
+            });
+            const body = await readMcpMutationBody(res);
+            const error = typeof body?.error === "string" && body.error.trim()
+                ? body.error.trim()
+                : undefined;
+            if (!res.ok) {
+                throw new Error(error || `Reconnect failed (${res.status})`);
+            }
+            if (body?.ok !== true) {
+                throw new Error(error || "Reconnect failed");
+            }
+        },
+        onSuccess: () => qc.invalidateQueries({ queryKey: LIST_KEY }),
+    });
+}
 export function getMcpUrlValidationError(rawUrl) {
     const trimmed = rawUrl.trim();
     if (!trimmed)