@agent-native/core 0.127.1 → 0.128.0

package/dist/client/DefaultSpinner.d.ts

@@ -2,6 +2,13 @@
  * Full-screen loading spinner rendered during SSR and initial hydration.
  * Uses inline SVG + styles because Tailwind may not be loaded yet on the server.
  * Respects the user's OS color scheme so dark-mode users don't get a white flash.
+ *
+ * The stall hint is revealed by a pure-CSS `animation-delay`, never a timer:
+ * the states that strand a user here (hydration never runs, the route module
+ * 404s, a cold dev-server compile) are exactly the states where no JS of ours
+ * executes, so a `setTimeout` fallback would never fire. A featureless spinner
+ * is indistinguishable from a blank screen, and reads as "the app is broken"
+ * rather than "look at the terminal" — that mis-read is what this text buys.
  */
 export declare function DefaultSpinner(): import("react").JSX.Element;
 //# sourceMappingURL=DefaultSpinner.d.ts.map

package/dist/client/DefaultSpinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSpinner.d.ts","sourceRoot":"","sources":["../../src/client/DefaultSpinner.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,cAAc,gCAyC7B"}
+{"version":3,"file":"DefaultSpinner.d.ts","sourceRoot":"","sources":["../../src/client/DefaultSpinner.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,gCA+D7B"}

package/dist/client/DefaultSpinner.js

@@ -3,16 +3,40 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Full-screen loading spinner rendered during SSR and initial hydration.
  * Uses inline SVG + styles because Tailwind may not be loaded yet on the server.
  * Respects the user's OS color scheme so dark-mode users don't get a white flash.
+ *
+ * The stall hint is revealed by a pure-CSS `animation-delay`, never a timer:
+ * the states that strand a user here (hydration never runs, the route module
+ * 404s, a cold dev-server compile) are exactly the states where no JS of ours
+ * executes, so a `setTimeout` fallback would never fire. A featureless spinner
+ * is indistinguishable from a blank screen, and reads as "the app is broken"
+ * rather than "look at the terminal" — that mis-read is what this text buys.
  */
 export function DefaultSpinner() {
     return (_jsxs("div", { style: {
             display: "flex",
+            flexDirection: "column",
             alignItems: "center",
             justifyContent: "center",
+            gap: 16,
             height: "100vh",
             width: "100%",
-        }, children: [_jsx("svg", { role: "status", "aria-label": "Loading", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", style: { animation: "an-spin 1s linear infinite", opacity: 0.7 }, children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }), _jsx("style", { children: `
+        }, children: [_jsx("svg", { role: "status", "aria-label": "Loading", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", style: { animation: "an-spin 1s linear infinite", opacity: 0.7 }, children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }), _jsx("p", { className: "an-stall-hint", children: "Still loading. A first run compiles dependencies and can take a minute \u2014 if it does not finish, check the terminal running the dev server for errors." }), _jsx("style", { children: `
         @keyframes an-spin { to { transform: rotate(360deg) } }
+        @keyframes an-stall-in { to { opacity: 0.6 } }
+        .an-stall-hint {
+          opacity: 0;
+          margin: 0;
+          max-width: 32rem;
+          padding: 0 1.5rem;
+          text-align: center;
+          font-size: 0.875rem;
+          line-height: 1.5;
+          font-family: ui-sans-serif, system-ui, sans-serif;
+          animation: an-stall-in 0.4s ease-out 10s forwards;
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .an-stall-hint { animation-duration: 0s }
+        }
         html {
           background: hsl(var(--background, 0 0% 100%));
           color: hsl(var(--foreground, 240 10% 3.9%));

package/dist/client/DefaultSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSpinner.js","sourceRoot":"","sources":["../../src/client/DefaultSpinner.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,CACL,eACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,MAAM;SACd,aAED,cACE,IAAI,EAAC,QAAQ,gBACF,SAAS,EACpB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,CAAC,EACd,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,KAAK,EAAE,EAAE,SAAS,EAAE,4BAA4B,EAAE,OAAO,EAAE,GAAG,EAAE,YAEhE,eAAM,CAAC,EAAC,6BAA6B,GAAG,GACpC,EACN,0BAAQ;;;;;;;;;;;;OAYP,GAAS,IACN,CACP,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Full-screen loading spinner rendered during SSR and initial hydration.\n * Uses inline SVG + styles because Tailwind may not be loaded yet on the server.\n * Respects the user's OS color scheme so dark-mode users don't get a white flash.\n */\nexport function DefaultSpinner() {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        height: \"100vh\",\n        width: \"100%\",\n      }}\n    >\n      <svg\n        role=\"status\"\n        aria-label=\"Loading\"\n        width={24}\n        height={24}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={2}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        style={{ animation: \"an-spin 1s linear infinite\", opacity: 0.7 }}\n      >\n        <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n      </svg>\n      <style>{`\n        @keyframes an-spin { to { transform: rotate(360deg) } }\n        html {\n          background: hsl(var(--background, 0 0% 100%));\n          color: hsl(var(--foreground, 240 10% 3.9%));\n        }\n        @media (prefers-color-scheme: dark) {\n          html {\n            background: hsl(var(--background, 240 10% 3.9%));\n            color: hsl(var(--foreground, 0 0% 98%));\n          }\n        }\n      `}</style>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"DefaultSpinner.js","sourceRoot":"","sources":["../../src/client/DefaultSpinner.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,CACL,eACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,GAAG,EAAE,EAAE;YACP,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,MAAM;SACd,aAED,cACE,IAAI,EAAC,QAAQ,gBACF,SAAS,EACpB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,CAAC,EACd,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,KAAK,EAAE,EAAE,SAAS,EAAE,4BAA4B,EAAE,OAAO,EAAE,GAAG,EAAE,YAEhE,eAAM,CAAC,EAAC,6BAA6B,GAAG,GACpC,EACN,YAAG,SAAS,EAAC,eAAe,2KAIxB,EACJ,0BAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BP,GAAS,IACN,CACP,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Full-screen loading spinner rendered during SSR and initial hydration.\n * Uses inline SVG + styles because Tailwind may not be loaded yet on the server.\n * Respects the user's OS color scheme so dark-mode users don't get a white flash.\n *\n * The stall hint is revealed by a pure-CSS `animation-delay`, never a timer:\n * the states that strand a user here (hydration never runs, the route module\n * 404s, a cold dev-server compile) are exactly the states where no JS of ours\n * executes, so a `setTimeout` fallback would never fire. A featureless spinner\n * is indistinguishable from a blank screen, and reads as \"the app is broken\"\n * rather than \"look at the terminal\" — that mis-read is what this text buys.\n */\nexport function DefaultSpinner() {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        gap: 16,\n        height: \"100vh\",\n        width: \"100%\",\n      }}\n    >\n      <svg\n        role=\"status\"\n        aria-label=\"Loading\"\n        width={24}\n        height={24}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={2}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        style={{ animation: \"an-spin 1s linear infinite\", opacity: 0.7 }}\n      >\n        <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n      </svg>\n      <p className=\"an-stall-hint\">\n        Still loading. A first run compiles dependencies and can take a minute —\n        if it does not finish, check the terminal running the dev server for\n        errors.\n      </p>\n      <style>{`\n        @keyframes an-spin { to { transform: rotate(360deg) } }\n        @keyframes an-stall-in { to { opacity: 0.6 } }\n        .an-stall-hint {\n          opacity: 0;\n          margin: 0;\n          max-width: 32rem;\n          padding: 0 1.5rem;\n          text-align: center;\n          font-size: 0.875rem;\n          line-height: 1.5;\n          font-family: ui-sans-serif, system-ui, sans-serif;\n          animation: an-stall-in 0.4s ease-out 10s forwards;\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .an-stall-hint { animation-duration: 0s }\n        }\n        html {\n          background: hsl(var(--background, 0 0% 100%));\n          color: hsl(var(--foreground, 240 10% 3.9%));\n        }\n        @media (prefers-color-scheme: dark) {\n          html {\n            background: hsl(var(--background, 240 10% 3.9%));\n            color: hsl(var(--foreground, 0 0% 98%));\n          }\n        }\n      `}</style>\n    </div>\n  );\n}\n"]}

package/dist/client/org/TeamPage.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import type { AppRolesDescriptor } from "../../org/app-roles.js";
 export interface TeamPageProps {
     /**
      * Optional wrapper around the page contents. Templates pass their own Layout
@@ -24,10 +25,21 @@ export interface TeamPageProps {
      * tweak page width.
      */
     className?: string;
+    /**
+     * Opt in to an app-role column on the members table, using the same
+     * descriptor the app passes to `defineAppRoles`. Pass it explicitly rather
+     * than letting the page discover registered apps: a workspace can host
+     * several, and a members table that silently grows a column when some
+     * unrelated module registers itself is a surprise, not a feature.
+     *
+     * Only org owners/admins can change assignments; everyone else sees the
+     * column read-only.
+     */
+    appRoles?: AppRolesDescriptor;
 }
 /**
  * Default Team management page. Templates can route directly to this component
  * or wrap it with their own Layout via the `layout` prop.
  */
-export declare function TeamPage({ layout, title, showTitle, createOrgDescription, className, }: TeamPageProps): import("react").JSX.Element;
+export declare function TeamPage({ layout, title, showTitle, createOrgDescription, className, appRoles, }: TeamPageProps): import("react").JSX.Element;
 //# sourceMappingURL=TeamPage.d.ts.map

package/dist/client/org/TeamPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TeamPage.d.ts","sourceRoot":"","sources":["../../../src/client/org/TeamPage.tsx"],"names":[],"mappings":"AAiDA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAgDf,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;IAC5C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA28CD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,KAAK,EACL,SAAgB,EAChB,oBAAoB,EACpB,SAAS,GACV,EAAE,aAAa,+BA4Cf"}
+{"version":3,"file":"TeamPage.d.ts","sourceRoot":"","sources":["../../../src/client/org/TeamPage.tsx"],"names":[],"mappings":"AAiDA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAiDjE,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;IAC5C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAqlDD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,KAAK,EACL,SAAgB,EAChB,oBAAoB,EACpB,SAAS,EACT,QAAQ,GACT,EAAE,aAAa,+BA4Cf"}

package/dist/client/org/TeamPage.js

@@ -8,7 +8,7 @@ import { forwardRef, useMemo, useRef, useState, } from "react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { useT } from "../i18n.js";
 import { cn } from "../utils.js";
-import { useOrg, useOrgMembers, useOrgInvitations, useCreateOrg, useUpdateOrg, useBulkInviteMembers, useChangeMemberRole, useAcceptInvitation, useRemoveMember, useDeleteOrg, useSwitchOrg, useSetOrgDomain, useRevealA2ASecret, useSetA2ASecret, useSyncA2ASecret, useJoinByDomain, } from "./hooks.js";
+import { useOrg, useOrgMembers, useOrgInvitations, useCreateOrg, useUpdateOrg, useBulkInviteMembers, useChangeMemberRole, useAcceptInvitation, useRemoveMember, useDeleteOrg, useSwitchOrg, useSetOrgDomain, 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 })));
 Button.displayName = "TeamPrimitiveButton";
 function RoleIcon({ role }) {
@@ -86,7 +86,7 @@ function OrgNameDisplay({ name, canEdit }) {
                         setEditing(false);
                 }, onBlur: save, className: "rounded border border-border bg-background px-1.5 py-0.5 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-foreground", autoFocus: true }), _jsx(ErrorText, { error: updateOrg.error })] }));
 }
-function MembersCard() {
+function MembersCard({ appRoles }) {
     const t = useT();
     const { data: org } = useOrg();
     const { data: membersData, isLoading: isLoadingMembers } = useOrgMembers();
@@ -99,13 +99,19 @@ function MembersCard() {
     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 }), 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 }), isOwner && _jsx(DangerZoneCard, { orgName: org.orgName ?? "" })] }));
+    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 }), 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 ?? "" })] }));
 }
-function MembersTableCard({ members, pendingInvites, isLoadingMembers, currentUserEmail, currentUserRole, }) {
+function MembersTableCard({ members, pendingInvites, isLoadingMembers, currentUserEmail, currentUserRole, appRoles, }) {
     const t = useT();
     const [showInviteForm, setShowInviteForm] = useState(false);
     const canInvite = currentUserRole === "owner" || currentUserRole === "admin";
-    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") }), _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: 4, 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: 4, 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 }, m.email))), pendingInvites.map((inv) => (_jsx(PendingInviteRow, { invite: inv }, inv.id)))] })) })] })] }));
+    const { data: appRoleData } = useAppRoles(appRoles?.appId);
+    const appRoleByEmail = new Map((appRoleData?.assignments ?? []).map((a) => [
+        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)))] })) })] })] }));
 }
 function DangerZoneCard({ orgName }) {
     const t = useT();
@@ -136,11 +142,35 @@ 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 }) {
+function PendingInviteRow({ invite, hasAppRoleColumn, }) {
     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 }) }), _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(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: "-" })] }));
 }
-function MemberRow({ email, role, isCurrentUser, currentUserRole, }) {
+/** Sentinel for "clear the assignment" — Select cannot carry an empty value. */
+const UNASSIGNED = "__unassigned__";
+function AppRoleCell({ 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)))] })] }) }));
+    }
+    // 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) }));
+}
+function MemberRow({ email, role, isCurrentUser, currentUserRole, appRoles, appRole, canManageAppRoles, }) {
     const t = useT();
     const removeMember = useRemoveMember();
     const changeRole = useChangeMemberRole();
@@ -153,7 +183,7 @@ function MemberRow({ email, role, isCurrentUser, currentUserRole, }) {
         !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 }) }), _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) => {
+    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) => {
@@ -407,10 +437,10 @@ function A2ASecretSection({ isSet }) {
  * Default Team management page. Templates can route directly to this component
  * or wrap it with their own Layout via the `layout` prop.
  */
-export function TeamPage({ layout, title, showTitle = true, createOrgDescription, className, }) {
+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, {}))] }))] }));
+    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 wrapped = (_jsx(TooltipProvider, { delayDuration: 200, children: content }));
     return layout ? _jsx(_Fragment, { children: layout(wrapped) }) : wrapped;
 }