@iblai/iblai-js 2.10.0 → 2.10.1

package/dist/web-containers/source/index.esm.js

@@ -186120,6 +186120,12 @@ function Profile({ tenant, username, tenants, onClose, customization = {}, isAdm
         var _a;
         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
+    // The picture itself, with no editing affordance around it. The wrapper
+    // below decides whether it is clickable.
+    const profileAvatar = (jsxs(Avatar, { className: "h-20 w-20", children: [((_b = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _b === void 0 ? void 0 : _b.has_image) ? (jsx(AvatarImage, { src: (_c = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _c === void 0 ? void 0 : _c.image_url_full, alt: t('profileIndex.altProfilePicture'), className: "rounded-full object-cover w-full h-full group-hover:opacity-80 transition-opacity" })) : customization.useGravatarPicFallback ? (jsx(Gravatar, { className: "w-full h-full rounded-full object-cover group-hover:opacity-80 transition-opacity", email: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email, size: 80, alt: t('profileIndex.altProfilePictureGravatar') })) : (jsx(Fragment$1, {})), jsx(AvatarFallback, { className: cn('bg-blue-800 text-white text-xl rounded-full', customization.useGravatarPicFallback &&
+                    !((_d = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _d === void 0 ? void 0 : _d.image_url_full)
+                    ? 'hidden'
+                    : ''), children: getInitials((userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.name) || (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.username) || (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email) || '') })] }));
     const handleFileUpload = (event) => {
         var _a;
         const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
@@ -186170,10 +186176,9 @@ function Profile({ tenant, username, tenants, onClose, customization = {}, isAdm
     return (jsxs("div", { className: "flex flex-col lg:flex-row h-full", children: [jsx("div", { className: "lg:hidden", children: jsx("div", { className: "px-6 py-4 border-b border-gray-200", children: jsx("h2", { className: "text-lg font-semibold text-gray-900", children: t('profileIndex.profileHeading') }) }) }), jsxs("div", { className: "hidden lg:flex bg-white border-r border-gray-200 dark:border-gray-700 flex-col overflow-hidden", style: {
                     width: '320px',
                     height: '100%',
-                }, children: [jsxs("div", { className: "flex flex-col items-center justify-center py-6 px-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0", children: [isUserMetadataEdxLoading || isUploadingProfileImage ? (jsx(Skeleton, { className: "h-20 w-20 mb-6 rounded-full", "aria-label": t('profileIndex.ariaLoadingProfileImage') })) : (jsxs("button", { type: "button", className: "relative w-20 h-20 mb-4 cursor-pointer group rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), onClick: handleAvatarClick, "aria-label": t('profileIndex.ariaUploadProfilePicture'), children: [jsxs(Avatar, { className: "h-20 w-20", children: [((_b = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _b === void 0 ? void 0 : _b.has_image) ? (jsx(AvatarImage, { src: (_c = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _c === void 0 ? void 0 : _c.image_url_full, alt: t('profileIndex.altProfilePicture'), className: "rounded-full object-cover w-full h-full group-hover:opacity-80 transition-opacity" })) : customization.useGravatarPicFallback ? (jsx(Gravatar, { className: "w-full h-full rounded-full object-cover group-hover:opacity-80 transition-opacity", email: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email, size: 80, alt: t('profileIndex.altProfilePictureGravatar') })) : (jsx(Fragment$1, {})), jsx(AvatarFallback, { className: cn('bg-blue-800 text-white text-xl rounded-full', customization.useGravatarPicFallback &&
-                                                    !((_d = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _d === void 0 ? void 0 : _d.image_url_full)
-                                                    ? 'hidden'
-                                                    : ''), children: getInitials((userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.name) || (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.username) || (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email) || '') })] }), isHovering && (jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-blue-800 rounded-full border-4 border-white/20", "aria-hidden": "true", children: jsx("span", { className: "text-white text-xs font-medium text-center px-2", children: t('profileIndex.uploadOverlay') }) })), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileUpload, className: "hidden", "aria-label": t('profileIndex.ariaChooseProfilePicture'), tabIndex: -1 })] })), jsx("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100 text-center mb-3 break-all px-2", title: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email, children: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email }), jsxs("div", { className: "flex justify-center space-x-3", children: [jsxs("div", { className: "bg-blue-100 text-blue-700 px-2 py-1 rounded font-medium flex items-center text-sm", children: [jsx(RoleIcon, { className: "h-4 w-4 mr-2", "aria-hidden": "true" }), jsx("span", { children: isAdmin ? t('profileIndex.roleAdmin') : t('profileIndex.roleUser') })] }), customization.showPlatformName && (jsx("div", { className: "bg-gray-100 text-gray-600 px-4 py-2 rounded text-xs font-medium", children: tenant.toUpperCase() }))] })] }), jsx("nav", { className: "flex-1 overflow-y-auto", style: { minHeight: 0 }, "aria-label": t('profileIndex.ariaProfileTabs'), children: jsx("div", { className: "p-4", children: jsx("div", { className: "flex flex-col space-y-1.5", role: "tablist", "aria-orientation": "vertical", children: TABS.map((tab) => (jsxs("button", { role: "tab", "aria-selected": activeTab === tab.id, "aria-controls": `${tab.id}-tabpanel`, id: `${tab.id}-tab`, onClick: () => setActiveTab(tab.id), className: `w-full justify-start px-4 py-2.5 text-left rounded-lg transition-all flex items-center text-base ${activeTab === tab.id
+                }, children: [jsxs("div", { className: "flex flex-col items-center justify-center py-6 px-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0", children: [isUserMetadataEdxLoading || isUploadingProfileImage ? (jsx(Skeleton, { className: "h-20 w-20 mb-6 rounded-full", "aria-label": t('profileIndex.ariaLoadingProfileImage') })) : isReadOnly ? (
+                            // Someone else's profile: show the picture, offer no way to replace it.
+                            jsx("div", { className: "relative w-20 h-20 mb-4 rounded-full", children: profileAvatar })) : (jsxs("button", { type: "button", className: "relative w-20 h-20 mb-4 cursor-pointer group rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), onClick: handleAvatarClick, "aria-label": t('profileIndex.ariaUploadProfilePicture'), children: [profileAvatar, isHovering && (jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-blue-800 rounded-full border-4 border-white/20", "aria-hidden": "true", children: jsx("span", { className: "text-white text-xs font-medium text-center px-2", children: t('profileIndex.uploadOverlay') }) })), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileUpload, className: "hidden", "aria-label": t('profileIndex.ariaChooseProfilePicture'), tabIndex: -1 })] })), jsx("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100 text-center mb-3 break-all px-2", title: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email, children: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email }), jsxs("div", { className: "flex justify-center space-x-3", children: [jsxs("div", { className: "bg-blue-100 text-blue-700 px-2 py-1 rounded font-medium flex items-center text-sm", children: [jsx(RoleIcon, { className: "h-4 w-4 mr-2", "aria-hidden": "true" }), jsx("span", { children: isAdmin ? t('profileIndex.roleAdmin') : t('profileIndex.roleUser') })] }), customization.showPlatformName && (jsx("div", { className: "bg-gray-100 text-gray-600 px-4 py-2 rounded text-xs font-medium", children: tenant.toUpperCase() }))] })] }), jsx("nav", { className: "flex-1 overflow-y-auto", style: { minHeight: 0 }, "aria-label": t('profileIndex.ariaProfileTabs'), children: jsx("div", { className: "p-4", children: jsx("div", { className: "flex flex-col space-y-1.5", role: "tablist", "aria-orientation": "vertical", children: TABS.map((tab) => (jsxs("button", { role: "tab", "aria-selected": activeTab === tab.id, "aria-controls": `${tab.id}-tabpanel`, id: `${tab.id}-tab`, onClick: () => setActiveTab(tab.id), className: `w-full justify-start px-4 py-2.5 text-left rounded-lg transition-all flex items-center text-base ${activeTab === tab.id
                                         ? 'bg-blue-50 text-blue-700 font-medium'
                                         : 'hover:bg-gray-50 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100'}`, children: [jsx(tab.renderIcon, { className: "h-5 w-5 mr-3 flex-shrink-0", "aria-hidden": "true" }), jsx("span", { className: "truncate", children: tab.label })] }, tab.id))) }) }) })] }), jsx("nav", { className: "lg:hidden", "aria-label": t('profileIndex.ariaProfileTabsMobile'), children: jsx("div", { className: "w-full justify-start px-6 py-2 bg-white border-b border-gray-200 rounded-none h-auto overflow-x-auto", children: jsx("div", { className: "flex space-x-2", role: "tablist", "aria-orientation": "horizontal", children: TABS.map((tab) => (jsxs("button", { role: "tab", "aria-selected": activeTab === tab.id, "aria-controls": `${tab.id}-tabpanel`, id: `${tab.id}-tab-mobile`, onClick: () => setActiveTab(tab.id), className: `flex items-center gap-2 px-3 py-2 rounded-lg whitespace-nowrap text-sm transition-all ${activeTab === tab.id
                                 ? 'bg-blue-50 text-blue-600 font-medium'
@@ -191450,7 +191455,18 @@ const TabDescription = ({ icon, title, children }) => {
 };
 const Admin = ({ tenant, onInviteClick, hasUserTabPermission = false, hasGroupsTabPermission = false, hasRolesTabPermission = false, hasPoliciesTabPermission = false, hasTeamsTabPermission = false, hasAlertsTabPermission = false, hasInviteUserPermission = false, hasCreateTeamPermission = false, onLoadGroupPermissions, rbacPermissions = {}, enableRbac = false, showGradebookTab = false, currentSpa, authSpaUrl, onboardingBasePath, }) => {
     const t = useT();
-    return (jsx("div", { className: "border border-gray-200 rounded-lg p-6", children: jsxs(Tabs, { defaultValue: "users", "aria-label": t('profileAdmin.rbacManagementTabsAriaLabel'), children: [jsxs(TabsList, { "aria-label": t('profileAdmin.managementTabsAriaLabel'), className: "max-w-full overflow-x-auto justify-start px-1", children: [hasUserTabPermission && (jsx(TabsTrigger, { value: "users", children: t('profileAdmin.usersTab') })), hasGroupsTabPermission && (jsx(TabsTrigger, { value: "groups", children: t('profileAdmin.groupsTab') })), hasRolesTabPermission && (jsx(TabsTrigger, { value: "roles", children: t('profileAdmin.rolesTab') })), hasPoliciesTabPermission && (jsx(TabsTrigger, { value: "policies", children: t('profileAdmin.policiesTab') })), hasTeamsTabPermission && (jsx(TabsTrigger, { value: "teams", children: t('profileAdmin.teamsTab') })), hasAlertsTabPermission && (jsx(TabsTrigger, { value: "alerts", children: t('profileAdmin.alertsTab') })), jsx(TabsTrigger, { value: "applications", children: t('profileAdmin.applicationsTab') }), jsx(TabsTrigger, { value: "onboarding", children: t('profileAdmin.onboardingTab') })] }), hasUserTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "users", children: [jsx(TabDescription, { icon: jsx(Users, { className: "w-5 h-5" }), title: t('profileAdmin.usersTab'), children: t('profileAdmin.usersDescription') }), jsx(UsersTab, { tenant: tenant, onInviteClick: onInviteClick, currentSpa: currentSpa, showGradebookTab: showGradebookTab })] })), hasGroupsTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "groups", children: [jsx(TabDescription, { icon: jsx(UsersRound, { className: "w-5 h-5" }), title: t('profileAdmin.groupsTab'), children: t('profileAdmin.groupsDescription') }), jsx(GroupsTab, { tenant: tenant })] })), hasRolesTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "roles", children: [jsx(TabDescription, { icon: jsx(UserCog, { className: "w-5 h-5" }), title: t('profileAdmin.rolesTab'), children: t('profileAdmin.rolesDescription') }), jsx(RolesTab, { tenant: tenant })] })), hasPoliciesTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "policies", children: [jsx(TabDescription, { icon: jsx(ScrollText, { className: "w-5 h-5" }), title: t('profileAdmin.policiesTab'), children: t('profileAdmin.policiesDescription') }), jsx(PoliciesTab, { tenant: tenant })] })), hasTeamsTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "teams", children: [jsx(TabDescription, { icon: jsx(Shield, { className: "w-5 h-5" }), title: t('profileAdmin.teamsTab'), children: t('profileAdmin.teamsDescription') }), jsx(GroupsTab, { tenant: tenant, isTeam: true, onInviteClick: onInviteClick, hasInviteUserPermission: hasInviteUserPermission, hasCreateTeamPermission: hasCreateTeamPermission, onLoadGroupPermissions: onLoadGroupPermissions, rbacPermissions: rbacPermissions, enableRbac: enableRbac })] })), hasAlertsTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "alerts", children: [jsx(TabDescription, { icon: jsx(BellRing, { className: "w-5 h-5" }), title: t('profileAdmin.alertsTab'), children: t('profileAdmin.alertsDescription') }), jsx(AlertsTab$1, { tenant: tenant })] })), jsxs(TabsContent, { className: "mt-4", value: "applications", children: [jsx(TabDescription, { icon: jsx(ClipboardList, { className: "w-5 h-5" }), title: t('profileAdmin.applicationsTab'), children: t('profileAdmin.applicationsTabDescription') }), jsx(ApplicationsTab, { platformKey: tenant, authSpaUrl: authSpaUrl })] }), jsxs(TabsContent, { className: "mt-4", value: "onboarding", children: [jsx(TabDescription, { icon: jsx(UserPlus, { className: "w-5 h-5" }), title: t('profileAdmin.onboardingTab'), children: t('profileAdmin.onboardingTabDescription') }), jsx(OnboardingTab, { platformKey: tenant, onboardingBasePath: onboardingBasePath })] })] }) }));
+    const { currentTenant } = useCurrentTenant();
+    const storeRbacPermissions = useSelector(selectRbacPermissions);
+    /**
+     * A pure watcher administers nothing — Users is the only tab they get, and
+     * `UsersTab` serves them the users they may watch rather than the tenant
+     * roster. Their `/watchedgroups/#list` permission would otherwise open
+     * Alerts and Teams, and Applications and Onboarding are ungated for
+     * everyone else.
+     */
+    const isWatcher = isPureWatcher(storeRbacPermissions, currentTenant);
+    const showUsersTab = isWatcher || hasUserTabPermission;
+    return (jsx("div", { className: "border border-gray-200 rounded-lg p-6", children: jsxs(Tabs, { defaultValue: "users", "aria-label": t('profileAdmin.rbacManagementTabsAriaLabel'), children: [jsxs(TabsList, { "aria-label": t('profileAdmin.managementTabsAriaLabel'), className: "max-w-full overflow-x-auto justify-start px-1", children: [showUsersTab && jsx(TabsTrigger, { value: "users", children: t('profileAdmin.usersTab') }), !isWatcher && hasGroupsTabPermission && (jsx(TabsTrigger, { value: "groups", children: t('profileAdmin.groupsTab') })), !isWatcher && hasRolesTabPermission && (jsx(TabsTrigger, { value: "roles", children: t('profileAdmin.rolesTab') })), !isWatcher && hasPoliciesTabPermission && (jsx(TabsTrigger, { value: "policies", children: t('profileAdmin.policiesTab') })), !isWatcher && hasTeamsTabPermission && (jsx(TabsTrigger, { value: "teams", children: t('profileAdmin.teamsTab') })), !isWatcher && hasAlertsTabPermission && (jsx(TabsTrigger, { value: "alerts", children: t('profileAdmin.alertsTab') })), !isWatcher && (jsx(TabsTrigger, { value: "applications", children: t('profileAdmin.applicationsTab') })), !isWatcher && (jsx(TabsTrigger, { value: "onboarding", children: t('profileAdmin.onboardingTab') }))] }), showUsersTab && (jsxs(TabsContent, { className: "mt-4", value: "users", children: [jsx(TabDescription, { icon: jsx(Users, { className: "w-5 h-5" }), title: t('profileAdmin.usersTab'), children: t('profileAdmin.usersDescription') }), jsx(UsersTab, { tenant: tenant, onInviteClick: onInviteClick, currentSpa: currentSpa, showGradebookTab: showGradebookTab })] })), !isWatcher && hasGroupsTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "groups", children: [jsx(TabDescription, { icon: jsx(UsersRound, { className: "w-5 h-5" }), title: t('profileAdmin.groupsTab'), children: t('profileAdmin.groupsDescription') }), jsx(GroupsTab, { tenant: tenant })] })), !isWatcher && hasRolesTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "roles", children: [jsx(TabDescription, { icon: jsx(UserCog, { className: "w-5 h-5" }), title: t('profileAdmin.rolesTab'), children: t('profileAdmin.rolesDescription') }), jsx(RolesTab, { tenant: tenant })] })), !isWatcher && hasPoliciesTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "policies", children: [jsx(TabDescription, { icon: jsx(ScrollText, { className: "w-5 h-5" }), title: t('profileAdmin.policiesTab'), children: t('profileAdmin.policiesDescription') }), jsx(PoliciesTab, { tenant: tenant })] })), !isWatcher && hasTeamsTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "teams", children: [jsx(TabDescription, { icon: jsx(Shield, { className: "w-5 h-5" }), title: t('profileAdmin.teamsTab'), children: t('profileAdmin.teamsDescription') }), jsx(GroupsTab, { tenant: tenant, isTeam: true, onInviteClick: onInviteClick, hasInviteUserPermission: hasInviteUserPermission, hasCreateTeamPermission: hasCreateTeamPermission, onLoadGroupPermissions: onLoadGroupPermissions, rbacPermissions: rbacPermissions, enableRbac: enableRbac })] })), !isWatcher && hasAlertsTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "alerts", children: [jsx(TabDescription, { icon: jsx(BellRing, { className: "w-5 h-5" }), title: t('profileAdmin.alertsTab'), children: t('profileAdmin.alertsDescription') }), jsx(AlertsTab$1, { tenant: tenant })] })), !isWatcher && (jsxs(TabsContent, { className: "mt-4", value: "applications", children: [jsx(TabDescription, { icon: jsx(ClipboardList, { className: "w-5 h-5" }), title: t('profileAdmin.applicationsTab'), children: t('profileAdmin.applicationsTabDescription') }), jsx(ApplicationsTab, { platformKey: tenant, authSpaUrl: authSpaUrl })] })), !isWatcher && (jsxs(TabsContent, { className: "mt-4", value: "onboarding", children: [jsx(TabDescription, { icon: jsx(UserPlus, { className: "w-5 h-5" }), title: t('profileAdmin.onboardingTab'), children: t('profileAdmin.onboardingTabDescription') }), jsx(OnboardingTab, { platformKey: tenant, onboardingBasePath: onboardingBasePath })] }))] }) }));
 };
 
 function DeleteApiModal({ isOpen, onClose, apiKey, tenantKey }) {

package/dist/web-containers/source/next/index.esm.js

@@ -218740,6 +218740,12 @@ function Profile({ tenant, username, tenants, onClose, customization = {}, isAdm
         var _a;
         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
+    // The picture itself, with no editing affordance around it. The wrapper
+    // below decides whether it is clickable.
+    const profileAvatar = (jsxs(Avatar, { className: "h-20 w-20", children: [((_b = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _b === void 0 ? void 0 : _b.has_image) ? (jsx(AvatarImage, { src: (_c = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _c === void 0 ? void 0 : _c.image_url_full, alt: t('profileIndex.altProfilePicture'), className: "rounded-full object-cover w-full h-full group-hover:opacity-80 transition-opacity" })) : customization.useGravatarPicFallback ? (jsx(Gravatar, { className: "w-full h-full rounded-full object-cover group-hover:opacity-80 transition-opacity", email: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email, size: 80, alt: t('profileIndex.altProfilePictureGravatar') })) : (jsx(Fragment$1, {})), jsx(AvatarFallback, { className: cn('bg-blue-800 text-white text-xl rounded-full', customization.useGravatarPicFallback &&
+                    !((_d = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _d === void 0 ? void 0 : _d.image_url_full)
+                    ? 'hidden'
+                    : ''), children: getInitials((userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.name) || (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.username) || (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email) || '') })] }));
     const handleFileUpload = (event) => {
         var _a;
         const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
@@ -218790,10 +218796,9 @@ function Profile({ tenant, username, tenants, onClose, customization = {}, isAdm
     return (jsxs("div", { className: "flex flex-col lg:flex-row h-full", children: [jsx("div", { className: "lg:hidden", children: jsx("div", { className: "px-6 py-4 border-b border-gray-200", children: jsx("h2", { className: "text-lg font-semibold text-gray-900", children: t('profileIndex.profileHeading') }) }) }), jsxs("div", { className: "hidden lg:flex bg-white border-r border-gray-200 dark:border-gray-700 flex-col overflow-hidden", style: {
                     width: '320px',
                     height: '100%',
-                }, children: [jsxs("div", { className: "flex flex-col items-center justify-center py-6 px-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0", children: [isUserMetadataEdxLoading || isUploadingProfileImage ? (jsx(Skeleton, { className: "h-20 w-20 mb-6 rounded-full", "aria-label": t('profileIndex.ariaLoadingProfileImage') })) : (jsxs("button", { type: "button", className: "relative w-20 h-20 mb-4 cursor-pointer group rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), onClick: handleAvatarClick, "aria-label": t('profileIndex.ariaUploadProfilePicture'), children: [jsxs(Avatar, { className: "h-20 w-20", children: [((_b = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _b === void 0 ? void 0 : _b.has_image) ? (jsx(AvatarImage, { src: (_c = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _c === void 0 ? void 0 : _c.image_url_full, alt: t('profileIndex.altProfilePicture'), className: "rounded-full object-cover w-full h-full group-hover:opacity-80 transition-opacity" })) : customization.useGravatarPicFallback ? (jsx(Gravatar, { className: "w-full h-full rounded-full object-cover group-hover:opacity-80 transition-opacity", email: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email, size: 80, alt: t('profileIndex.altProfilePictureGravatar') })) : (jsx(Fragment$1, {})), jsx(AvatarFallback, { className: cn('bg-blue-800 text-white text-xl rounded-full', customization.useGravatarPicFallback &&
-                                                    !((_d = userMetadataEdx === null || userMetadataEdx === void 0 ? void 0 : userMetadataEdx.profile_image) === null || _d === void 0 ? void 0 : _d.image_url_full)
-                                                    ? 'hidden'
-                                                    : ''), children: getInitials((userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.name) || (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.username) || (userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email) || '') })] }), isHovering && (jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-blue-800 rounded-full border-4 border-white/20", "aria-hidden": "true", children: jsx("span", { className: "text-white text-xs font-medium text-center px-2", children: t('profileIndex.uploadOverlay') }) })), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileUpload, className: "hidden", "aria-label": t('profileIndex.ariaChooseProfilePicture'), tabIndex: -1 })] })), jsx("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100 text-center mb-3 break-all px-2", title: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email, children: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email }), jsxs("div", { className: "flex justify-center space-x-3", children: [jsxs("div", { className: "bg-blue-100 text-blue-700 px-2 py-1 rounded font-medium flex items-center text-sm", children: [jsx(RoleIcon, { className: "h-4 w-4 mr-2", "aria-hidden": "true" }), jsx("span", { children: isAdmin ? t('profileIndex.roleAdmin') : t('profileIndex.roleUser') })] }), customization.showPlatformName && (jsx("div", { className: "bg-gray-100 text-gray-600 px-4 py-2 rounded text-xs font-medium", children: tenant.toUpperCase() }))] })] }), jsx("nav", { className: "flex-1 overflow-y-auto", style: { minHeight: 0 }, "aria-label": t('profileIndex.ariaProfileTabs'), children: jsx("div", { className: "p-4", children: jsx("div", { className: "flex flex-col space-y-1.5", role: "tablist", "aria-orientation": "vertical", children: TABS.map((tab) => (jsxs("button", { role: "tab", "aria-selected": activeTab === tab.id, "aria-controls": `${tab.id}-tabpanel`, id: `${tab.id}-tab`, onClick: () => setActiveTab(tab.id), className: `w-full justify-start px-4 py-2.5 text-left rounded-lg transition-all flex items-center text-base ${activeTab === tab.id
+                }, children: [jsxs("div", { className: "flex flex-col items-center justify-center py-6 px-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0", children: [isUserMetadataEdxLoading || isUploadingProfileImage ? (jsx(Skeleton, { className: "h-20 w-20 mb-6 rounded-full", "aria-label": t('profileIndex.ariaLoadingProfileImage') })) : isReadOnly ? (
+                            // Someone else's profile: show the picture, offer no way to replace it.
+                            jsx("div", { className: "relative w-20 h-20 mb-4 rounded-full", children: profileAvatar })) : (jsxs("button", { type: "button", className: "relative w-20 h-20 mb-4 cursor-pointer group rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), onClick: handleAvatarClick, "aria-label": t('profileIndex.ariaUploadProfilePicture'), children: [profileAvatar, isHovering && (jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-blue-800 rounded-full border-4 border-white/20", "aria-hidden": "true", children: jsx("span", { className: "text-white text-xs font-medium text-center px-2", children: t('profileIndex.uploadOverlay') }) })), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileUpload, className: "hidden", "aria-label": t('profileIndex.ariaChooseProfilePicture'), tabIndex: -1 })] })), jsx("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100 text-center mb-3 break-all px-2", title: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email, children: userMetadata === null || userMetadata === void 0 ? void 0 : userMetadata.email }), jsxs("div", { className: "flex justify-center space-x-3", children: [jsxs("div", { className: "bg-blue-100 text-blue-700 px-2 py-1 rounded font-medium flex items-center text-sm", children: [jsx(RoleIcon, { className: "h-4 w-4 mr-2", "aria-hidden": "true" }), jsx("span", { children: isAdmin ? t('profileIndex.roleAdmin') : t('profileIndex.roleUser') })] }), customization.showPlatformName && (jsx("div", { className: "bg-gray-100 text-gray-600 px-4 py-2 rounded text-xs font-medium", children: tenant.toUpperCase() }))] })] }), jsx("nav", { className: "flex-1 overflow-y-auto", style: { minHeight: 0 }, "aria-label": t('profileIndex.ariaProfileTabs'), children: jsx("div", { className: "p-4", children: jsx("div", { className: "flex flex-col space-y-1.5", role: "tablist", "aria-orientation": "vertical", children: TABS.map((tab) => (jsxs("button", { role: "tab", "aria-selected": activeTab === tab.id, "aria-controls": `${tab.id}-tabpanel`, id: `${tab.id}-tab`, onClick: () => setActiveTab(tab.id), className: `w-full justify-start px-4 py-2.5 text-left rounded-lg transition-all flex items-center text-base ${activeTab === tab.id
                                         ? 'bg-blue-50 text-blue-700 font-medium'
                                         : 'hover:bg-gray-50 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100'}`, children: [jsx(tab.renderIcon, { className: "h-5 w-5 mr-3 flex-shrink-0", "aria-hidden": "true" }), jsx("span", { className: "truncate", children: tab.label })] }, tab.id))) }) }) })] }), jsx("nav", { className: "lg:hidden", "aria-label": t('profileIndex.ariaProfileTabsMobile'), children: jsx("div", { className: "w-full justify-start px-6 py-2 bg-white border-b border-gray-200 rounded-none h-auto overflow-x-auto", children: jsx("div", { className: "flex space-x-2", role: "tablist", "aria-orientation": "horizontal", children: TABS.map((tab) => (jsxs("button", { role: "tab", "aria-selected": activeTab === tab.id, "aria-controls": `${tab.id}-tabpanel`, id: `${tab.id}-tab-mobile`, onClick: () => setActiveTab(tab.id), className: `flex items-center gap-2 px-3 py-2 rounded-lg whitespace-nowrap text-sm transition-all ${activeTab === tab.id
                                 ? 'bg-blue-50 text-blue-600 font-medium'
@@ -223986,7 +223991,18 @@ const TabDescription = ({ icon, title, children }) => {
 };
 const Admin = ({ tenant, onInviteClick, hasUserTabPermission = false, hasGroupsTabPermission = false, hasRolesTabPermission = false, hasPoliciesTabPermission = false, hasTeamsTabPermission = false, hasAlertsTabPermission = false, hasInviteUserPermission = false, hasCreateTeamPermission = false, onLoadGroupPermissions, rbacPermissions = {}, enableRbac = false, showGradebookTab = false, currentSpa, authSpaUrl, onboardingBasePath, }) => {
     const t = useT();
-    return (jsx("div", { className: "border border-gray-200 rounded-lg p-6", children: jsxs(Tabs, { defaultValue: "users", "aria-label": t('profileAdmin.rbacManagementTabsAriaLabel'), children: [jsxs(TabsList, { "aria-label": t('profileAdmin.managementTabsAriaLabel'), className: "max-w-full overflow-x-auto justify-start px-1", children: [hasUserTabPermission && (jsx(TabsTrigger, { value: "users", children: t('profileAdmin.usersTab') })), hasGroupsTabPermission && (jsx(TabsTrigger, { value: "groups", children: t('profileAdmin.groupsTab') })), hasRolesTabPermission && (jsx(TabsTrigger, { value: "roles", children: t('profileAdmin.rolesTab') })), hasPoliciesTabPermission && (jsx(TabsTrigger, { value: "policies", children: t('profileAdmin.policiesTab') })), hasTeamsTabPermission && (jsx(TabsTrigger, { value: "teams", children: t('profileAdmin.teamsTab') })), hasAlertsTabPermission && (jsx(TabsTrigger, { value: "alerts", children: t('profileAdmin.alertsTab') })), jsx(TabsTrigger, { value: "applications", children: t('profileAdmin.applicationsTab') }), jsx(TabsTrigger, { value: "onboarding", children: t('profileAdmin.onboardingTab') })] }), hasUserTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "users", children: [jsx(TabDescription, { icon: jsx(Users, { className: "w-5 h-5" }), title: t('profileAdmin.usersTab'), children: t('profileAdmin.usersDescription') }), jsx(UsersTab, { tenant: tenant, onInviteClick: onInviteClick, currentSpa: currentSpa, showGradebookTab: showGradebookTab })] })), hasGroupsTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "groups", children: [jsx(TabDescription, { icon: jsx(UsersRound, { className: "w-5 h-5" }), title: t('profileAdmin.groupsTab'), children: t('profileAdmin.groupsDescription') }), jsx(GroupsTab, { tenant: tenant })] })), hasRolesTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "roles", children: [jsx(TabDescription, { icon: jsx(UserCog, { className: "w-5 h-5" }), title: t('profileAdmin.rolesTab'), children: t('profileAdmin.rolesDescription') }), jsx(RolesTab, { tenant: tenant })] })), hasPoliciesTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "policies", children: [jsx(TabDescription, { icon: jsx(ScrollText, { className: "w-5 h-5" }), title: t('profileAdmin.policiesTab'), children: t('profileAdmin.policiesDescription') }), jsx(PoliciesTab, { tenant: tenant })] })), hasTeamsTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "teams", children: [jsx(TabDescription, { icon: jsx(Shield, { className: "w-5 h-5" }), title: t('profileAdmin.teamsTab'), children: t('profileAdmin.teamsDescription') }), jsx(GroupsTab, { tenant: tenant, isTeam: true, onInviteClick: onInviteClick, hasInviteUserPermission: hasInviteUserPermission, hasCreateTeamPermission: hasCreateTeamPermission, onLoadGroupPermissions: onLoadGroupPermissions, rbacPermissions: rbacPermissions, enableRbac: enableRbac })] })), hasAlertsTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "alerts", children: [jsx(TabDescription, { icon: jsx(BellRing, { className: "w-5 h-5" }), title: t('profileAdmin.alertsTab'), children: t('profileAdmin.alertsDescription') }), jsx(AlertsTab, { tenant: tenant })] })), jsxs(TabsContent, { className: "mt-4", value: "applications", children: [jsx(TabDescription, { icon: jsx(ClipboardList, { className: "w-5 h-5" }), title: t('profileAdmin.applicationsTab'), children: t('profileAdmin.applicationsTabDescription') }), jsx(ApplicationsTab, { platformKey: tenant, authSpaUrl: authSpaUrl })] }), jsxs(TabsContent, { className: "mt-4", value: "onboarding", children: [jsx(TabDescription, { icon: jsx(UserPlus, { className: "w-5 h-5" }), title: t('profileAdmin.onboardingTab'), children: t('profileAdmin.onboardingTabDescription') }), jsx(OnboardingTab, { platformKey: tenant, onboardingBasePath: onboardingBasePath })] })] }) }));
+    const { currentTenant } = useCurrentTenant();
+    const storeRbacPermissions = useSelector(selectRbacPermissions);
+    /**
+     * A pure watcher administers nothing — Users is the only tab they get, and
+     * `UsersTab` serves them the users they may watch rather than the tenant
+     * roster. Their `/watchedgroups/#list` permission would otherwise open
+     * Alerts and Teams, and Applications and Onboarding are ungated for
+     * everyone else.
+     */
+    const isWatcher = isPureWatcher(storeRbacPermissions, currentTenant);
+    const showUsersTab = isWatcher || hasUserTabPermission;
+    return (jsx("div", { className: "border border-gray-200 rounded-lg p-6", children: jsxs(Tabs, { defaultValue: "users", "aria-label": t('profileAdmin.rbacManagementTabsAriaLabel'), children: [jsxs(TabsList, { "aria-label": t('profileAdmin.managementTabsAriaLabel'), className: "max-w-full overflow-x-auto justify-start px-1", children: [showUsersTab && jsx(TabsTrigger, { value: "users", children: t('profileAdmin.usersTab') }), !isWatcher && hasGroupsTabPermission && (jsx(TabsTrigger, { value: "groups", children: t('profileAdmin.groupsTab') })), !isWatcher && hasRolesTabPermission && (jsx(TabsTrigger, { value: "roles", children: t('profileAdmin.rolesTab') })), !isWatcher && hasPoliciesTabPermission && (jsx(TabsTrigger, { value: "policies", children: t('profileAdmin.policiesTab') })), !isWatcher && hasTeamsTabPermission && (jsx(TabsTrigger, { value: "teams", children: t('profileAdmin.teamsTab') })), !isWatcher && hasAlertsTabPermission && (jsx(TabsTrigger, { value: "alerts", children: t('profileAdmin.alertsTab') })), !isWatcher && (jsx(TabsTrigger, { value: "applications", children: t('profileAdmin.applicationsTab') })), !isWatcher && (jsx(TabsTrigger, { value: "onboarding", children: t('profileAdmin.onboardingTab') }))] }), showUsersTab && (jsxs(TabsContent, { className: "mt-4", value: "users", children: [jsx(TabDescription, { icon: jsx(Users, { className: "w-5 h-5" }), title: t('profileAdmin.usersTab'), children: t('profileAdmin.usersDescription') }), jsx(UsersTab, { tenant: tenant, onInviteClick: onInviteClick, currentSpa: currentSpa, showGradebookTab: showGradebookTab })] })), !isWatcher && hasGroupsTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "groups", children: [jsx(TabDescription, { icon: jsx(UsersRound, { className: "w-5 h-5" }), title: t('profileAdmin.groupsTab'), children: t('profileAdmin.groupsDescription') }), jsx(GroupsTab, { tenant: tenant })] })), !isWatcher && hasRolesTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "roles", children: [jsx(TabDescription, { icon: jsx(UserCog, { className: "w-5 h-5" }), title: t('profileAdmin.rolesTab'), children: t('profileAdmin.rolesDescription') }), jsx(RolesTab, { tenant: tenant })] })), !isWatcher && hasPoliciesTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "policies", children: [jsx(TabDescription, { icon: jsx(ScrollText, { className: "w-5 h-5" }), title: t('profileAdmin.policiesTab'), children: t('profileAdmin.policiesDescription') }), jsx(PoliciesTab, { tenant: tenant })] })), !isWatcher && hasTeamsTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "teams", children: [jsx(TabDescription, { icon: jsx(Shield, { className: "w-5 h-5" }), title: t('profileAdmin.teamsTab'), children: t('profileAdmin.teamsDescription') }), jsx(GroupsTab, { tenant: tenant, isTeam: true, onInviteClick: onInviteClick, hasInviteUserPermission: hasInviteUserPermission, hasCreateTeamPermission: hasCreateTeamPermission, onLoadGroupPermissions: onLoadGroupPermissions, rbacPermissions: rbacPermissions, enableRbac: enableRbac })] })), !isWatcher && hasAlertsTabPermission && (jsxs(TabsContent, { className: "mt-4", value: "alerts", children: [jsx(TabDescription, { icon: jsx(BellRing, { className: "w-5 h-5" }), title: t('profileAdmin.alertsTab'), children: t('profileAdmin.alertsDescription') }), jsx(AlertsTab, { tenant: tenant })] })), !isWatcher && (jsxs(TabsContent, { className: "mt-4", value: "applications", children: [jsx(TabDescription, { icon: jsx(ClipboardList, { className: "w-5 h-5" }), title: t('profileAdmin.applicationsTab'), children: t('profileAdmin.applicationsTabDescription') }), jsx(ApplicationsTab, { platformKey: tenant, authSpaUrl: authSpaUrl })] })), !isWatcher && (jsxs(TabsContent, { className: "mt-4", value: "onboarding", children: [jsx(TabDescription, { icon: jsx(UserPlus, { className: "w-5 h-5" }), title: t('profileAdmin.onboardingTab'), children: t('profileAdmin.onboardingTabDescription') }), jsx(OnboardingTab, { platformKey: tenant, onboardingBasePath: onboardingBasePath })] }))] }) }));
 };
 
 function DeleteApiModal$1({ isOpen, onClose, apiKey, tenantKey }) {
@@ -264667,11 +264683,18 @@ function BenchmarksTab({ tenantKey, username, }) {
 }
 
 function Account({ tenant, tenants = [], username, onInviteClick, email, mainPlatformKey, userActiveApp = null, showPlatformName = false, isAdmin = false, targetTab = 'basic', currentPlan: _currentPlan = '', currentSPA = '', authURL, onTenantUpdate, currentPlatformBaseDomain = '', enableRbac = false, showBenchmarks = false, rbacPermissions = {}, onLoadGroupPermissions, onTabChange, defaultSupportPhone = '', enableSupportPhone, showGradebookTab = false, onboardingBasePath = '', }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const t = useT();
     const currentTenant = tenants.find((ten) => ten.key === tenant);
     const hasMonetizationPermission = checkRbacPermission(rbacPermissions, `/platforms/${tenant}/#can_sell_items`, enableRbac);
     const canMonetize = (currentTenant === null || currentTenant === void 0 ? void 0 : currentTenant.enable_monetization) && hasMonetizationPermission;
+    /**
+     * Billing is gated by the tenant's paywall, and on top of that by the
+     * selling permission whenever RBAC is on and the viewer is not an admin.
+     * `checkRbacPermission` already passes everything through with RBAC off,
+     * so only the admin bypass needs spelling out here.
+     */
+    const canSeeBilling = !!(currentTenant === null || currentTenant === void 0 ? void 0 : currentTenant.show_paywall) && (isAdmin || hasMonetizationPermission);
     const TABS = [
         { id: 'organization', label: t('profileAccount.tabOrganization'), icon: Briefcase },
         { id: 'management', label: t('profileAccount.tabManagement'), icon: Users },
@@ -264685,7 +264708,6 @@ function Account({ tenant, tenants = [], username, onInviteClick, email, mainPla
         { id: 'memory', label: t('profileAccount.tabMemory'), icon: Brain },
         { id: 'advanced', label: t('profileAccount.tabAdvanced'), icon: Settings$1 },
     ];
-    const [activeTab, setActiveTab] = useState(targetTab);
     const [organizationLogo, setOrganizationLogo] = useState(`${LOGO_ENDPOINTS.light_logo(tenant)}?v=${Date.now()}`);
     const hasUserTabPermission = checkRbacPermission(rbacPermissions, `/platforms/${tenant}/#can_manage_users`, enableRbac);
     const hasGroupsTabPermission = checkRbacPermission(rbacPermissions, `/groups/#list`, enableRbac);
@@ -264701,6 +264723,28 @@ function Account({ tenant, tenants = [], username, onInviteClick, email, mainPla
         hasRolesTabPermission ||
         hasTeamsTabPermission ||
         hasAlertsTabPermission;
+    /**
+     * Tabs this user may actually open, in the order the sidebar lists them.
+     * Everything but Management is admin-only, and Billing sits outside `TABS`
+     * because the paywall gates it, so it is appended last here too.
+     */
+    const visibleTabIds = [
+        ...TABS.filter((tab) => (tab.id === 'management' ? hasManagementPermissions : isAdmin)).map((tab) => tab.id),
+        ...(canSeeBilling ? ['billing'] : []),
+    ];
+    const visibleTabKey = visibleTabIds.join(',');
+    // Entry points ask for a tab by name, and the name can be one this user has
+    // no business seeing — a watcher opening the modal is sent to Organization,
+    // which their sidebar does not even list. Open their first real tab instead.
+    const [activeTab, setActiveTab] = useState(visibleTabIds.includes(targetTab) ? targetTab : ((_a = visibleTabIds[0]) !== null && _a !== void 0 ? _a : targetTab));
+    // `tenants` can arrive after mount, which is when the paywall tab appears and
+    // the permission checks settle, so re-run the same fallback once it does.
+    useEffect(() => {
+        const available = visibleTabKey ? visibleTabKey.split(',') : [];
+        if (available.length > 0 && !available.includes(activeTab)) {
+            setActiveTab(available[0]);
+        }
+    }, [visibleTabKey, activeTab]);
     useEffect(() => {
         const firstInput = document.getElementById('fullName');
         if (firstInput) {
@@ -264712,14 +264756,7 @@ function Account({ tenant, tenants = [], username, onInviteClick, email, mainPla
                     height: '100%',
                 }, children: [jsxs("div", { className: "flex flex-col items-center justify-center py-6 px-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0", children: [organizationLogo ? (jsx("div", { className: "w-auto h-auto max-w-[140px] max-h-[140px] overflow-hidden", children: jsx(Image$4, { src: organizationLogo, alt: t('profileAccount.organizationLogoAlt'), width: 140, height: 140, className: "object-cover w-full h-full group-hover:opacity-80 transition-opacity", onError: () => {
                                         setOrganizationLogo('');
-                                    } }) })) : (jsx(BriefcaseBusiness, { className: "h-20 w-20 mb-4 text-blue-500" })), jsxs("div", { className: "flex justify-center space-x-3 mt-3", children: [jsxs("div", { className: "bg-blue-100 text-blue-700 px-2 py-1 rounded font-medium flex items-center text-sm", children: [jsx(User, { className: "h-4 w-4 mr-2" }), isAdmin ? t('profileAccount.roleAdmin') : t('profileAccount.roleUser')] }), showPlatformName && (jsx("div", { className: "bg-gray-100 text-gray-600 px-4 py-2 rounded text-xs font-medium", children: tenant.toUpperCase() }))] })] }), jsx("div", { className: "flex-1 overflow-y-auto", style: { minHeight: 0 }, children: jsx("div", { className: "p-4", children: jsxs("div", { className: "flex flex-col space-y-1.5", children: [TABS.filter((tab) => {
-                                        if (tab.id === 'management') {
-                                            return hasManagementPermissions;
-                                        }
-                                        else {
-                                            return isAdmin;
-                                        }
-                                    }).map((tab) => (jsxs("button", { onClick: () => {
+                                    } }) })) : (jsx(BriefcaseBusiness, { className: "h-20 w-20 mb-4 text-blue-500" })), jsxs("div", { className: "flex justify-center space-x-3 mt-3", children: [jsxs("div", { className: "bg-blue-100 text-blue-700 px-2 py-1 rounded font-medium flex items-center text-sm", children: [jsx(User, { className: "h-4 w-4 mr-2" }), isAdmin ? t('profileAccount.roleAdmin') : t('profileAccount.roleUser')] }), showPlatformName && (jsx("div", { className: "bg-gray-100 text-gray-600 px-4 py-2 rounded text-xs font-medium", children: tenant.toUpperCase() }))] })] }), jsx("div", { className: "flex-1 overflow-y-auto", style: { minHeight: 0 }, children: jsx("div", { className: "p-4", children: jsxs("div", { className: "flex flex-col space-y-1.5", children: [TABS.filter((tab) => visibleTabIds.includes(tab.id)).map((tab) => (jsxs("button", { onClick: () => {
                                             setActiveTab(tab.id);
                                             // Clear URL param when switching away from billing/monetization
                                             if ((activeTab === 'billing' || activeTab === 'monetization') &&
@@ -264732,20 +264769,13 @@ function Account({ tenant, tenants = [], username, onInviteClick, email, mainPla
                                             }
                                         }, className: `w-full justify-start px-4 py-2.5 text-left rounded-lg transition-all flex items-center text-base ${activeTab === tab.id
                                             ? 'bg-blue-50 text-blue-700 font-medium'
-                                            : 'hover:bg-gray-50 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100'}`, children: [jsx(tab.icon, { className: "h-5 w-5 mr-3 flex-shrink-0" }), jsx("span", { className: "truncate", children: tab.label })] }, tab.id))), (currentTenant === null || currentTenant === void 0 ? void 0 : currentTenant.show_paywall) && (jsxs("button", { onClick: () => {
+                                            : 'hover:bg-gray-50 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100'}`, children: [jsx(tab.icon, { className: "h-5 w-5 mr-3 flex-shrink-0" }), jsx("span", { className: "truncate", children: tab.label })] }, tab.id))), canSeeBilling && (jsxs("button", { onClick: () => {
                                             setActiveTab('billing');
                                             // Set URL param for billing tab
                                             onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange('billing');
                                         }, className: `w-full justify-start px-4 py-2.5 text-left rounded-lg transition-all flex items-center text-base ${activeTab === 'billing'
                                             ? 'bg-blue-50 text-blue-700 font-medium'
-                                            : 'hover:bg-gray-50 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100'}`, children: [jsx(CreditCard, { className: "h-5 w-5 mr-3 flex-shrink-0" }), jsx("span", { className: "truncate", children: t('profileAccount.tabBilling') })] }, 'billing'))] }) }) })] }), jsx("div", { className: "lg:hidden", children: jsx("div", { className: "w-full justify-start px-6 py-2 bg-white border-b border-gray-200 rounded-none h-auto overflow-x-auto", children: jsxs("div", { className: "flex space-x-2", children: [TABS.filter((tab) => {
-                                if (tab.id === 'management') {
-                                    return hasManagementPermissions || !enableRbac;
-                                }
-                                else {
-                                    return isAdmin;
-                                }
-                            }).map((tab) => (jsxs("button", { onClick: () => {
+                                            : 'hover:bg-gray-50 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100'}`, children: [jsx(CreditCard, { className: "h-5 w-5 mr-3 flex-shrink-0" }), jsx("span", { className: "truncate", children: t('profileAccount.tabBilling') })] }, 'billing'))] }) }) })] }), jsx("div", { className: "lg:hidden", children: jsx("div", { className: "w-full justify-start px-6 py-2 bg-white border-b border-gray-200 rounded-none h-auto overflow-x-auto", children: jsxs("div", { className: "flex space-x-2", children: [TABS.filter((tab) => visibleTabIds.includes(tab.id)).map((tab) => (jsxs("button", { onClick: () => {
                                     setActiveTab(tab.id);
                                     // Clear URL param when switching away from billing/monetization
                                     if ((activeTab === 'billing' || activeTab === 'monetization') &&
@@ -264758,16 +264788,16 @@ function Account({ tenant, tenants = [], username, onInviteClick, email, mainPla
                                     }
                                 }, className: `flex items-center gap-2 px-3 py-2 rounded-lg whitespace-nowrap text-sm transition-all ${activeTab === tab.id
                                     ? 'bg-blue-50 text-blue-600 font-medium'
-                                    : 'text-gray-600 hover:bg-gray-50'}`, children: [jsx(tab.icon, { className: "h-4 w-4" }), jsx("span", { className: "hidden sm:inline", children: tab.label }), jsx("span", { className: "sm:hidden", children: tab.label })] }, tab.id))), (currentTenant === null || currentTenant === void 0 ? void 0 : currentTenant.show_paywall) && (jsxs("button", { onClick: () => {
+                                    : 'text-gray-600 hover:bg-gray-50'}`, children: [jsx(tab.icon, { className: "h-4 w-4" }), jsx("span", { className: "hidden sm:inline", children: tab.label }), jsx("span", { className: "sm:hidden", children: tab.label })] }, tab.id))), canSeeBilling && (jsxs("button", { onClick: () => {
                                     setActiveTab('billing');
                                     // Set URL param for billing tab
                                     onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange('billing');
                                 }, className: `flex items-center gap-2 px-3 py-2 rounded-lg whitespace-nowrap text-sm transition-all ${activeTab === 'billing'
                                     ? 'bg-blue-50 text-blue-600 font-medium'
-                                    : 'text-gray-600 hover:bg-gray-50'}`, children: [jsx(CreditCard, { className: "h-4 w-4" }), jsx("span", { className: "hidden sm:inline", children: t('profileAccount.tabBilling') }), jsx("span", { className: "sm:hidden", children: t('profileAccount.tabBilling') })] }, 'billing'))] }) }) }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", style: { height: '100%' }, children: [jsxs("div", { className: "hidden lg:block flex-shrink-0 p-6 border-b border-gray-200 bg-white dark:bg-gray-900", children: [jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2", children: (_b = (_a = TABS.find((t) => t.id === activeTab)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (activeTab === 'billing' ? t('profileAccount.tabBilling') : activeTab) }), jsxs("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [activeTab === 'management' && t('profileAccount.descManagement'), activeTab === 'organization' && t('profileAccount.descOrganization'), activeTab === 'integrations' && t('profileAccount.descIntegrations'), activeTab === 'billing' && t('profileAccount.descBilling'), activeTab === 'monetization' && t('profileAccount.descMonetization'), activeTab === 'datasets' && t('profileAccount.descBenchmarks'), activeTab === 'memory' && t('profileAccount.descMemory'), activeTab === 'advanced' && t('profileAccount.descAdvanced')] })] }), jsxs("div", { className: "flex-1 p-6 space-y-6", style: {
+                                    : 'text-gray-600 hover:bg-gray-50'}`, children: [jsx(CreditCard, { className: "h-4 w-4" }), jsx("span", { className: "hidden sm:inline", children: t('profileAccount.tabBilling') }), jsx("span", { className: "sm:hidden", children: t('profileAccount.tabBilling') })] }, 'billing'))] }) }) }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", style: { height: '100%' }, children: [jsxs("div", { className: "hidden lg:block flex-shrink-0 p-6 border-b border-gray-200 bg-white dark:bg-gray-900", children: [jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2", children: (_c = (_b = TABS.find((t) => t.id === activeTab)) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : (activeTab === 'billing' ? t('profileAccount.tabBilling') : activeTab) }), jsxs("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [activeTab === 'management' && t('profileAccount.descManagement'), activeTab === 'organization' && t('profileAccount.descOrganization'), activeTab === 'integrations' && t('profileAccount.descIntegrations'), activeTab === 'billing' && t('profileAccount.descBilling'), activeTab === 'monetization' && t('profileAccount.descMonetization'), activeTab === 'datasets' && t('profileAccount.descBenchmarks'), activeTab === 'memory' && t('profileAccount.descMemory'), activeTab === 'advanced' && t('profileAccount.descAdvanced')] })] }), jsxs("div", { className: "flex-1 p-6 space-y-6", style: {
                             overflowY: 'auto',
                             overflowX: 'hidden',
-                        }, children: [jsxs("div", { className: "lg:hidden mb-6", children: [jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2", children: (_d = (_c = TABS.find((t) => t.id === activeTab)) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : (activeTab === 'billing' ? t('profileAccount.tabBilling') : activeTab) }), jsxs("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [activeTab === 'billing' && t('profileAccount.descBilling'), activeTab === 'basic' && t('profileAccount.descBasic'), activeTab === 'social' && t('profileAccount.descSocial'), activeTab === 'security' && t('profileAccount.descSecurity'), activeTab === 'management' && t('profileAccount.descManagement'), activeTab === 'organization' && t('profileAccount.descOrganization'), activeTab === 'monetization' && t('profileAccount.descMonetization'), activeTab === 'datasets' && t('profileAccount.descBenchmarks'), activeTab === 'memory' && t('profileAccount.descMemory'), activeTab === 'advanced' && t('profileAccount.descAdvanced')] })] }), activeTab === 'management' && hasManagementPermissions && (jsx(Admin, { onboardingBasePath: onboardingBasePath, authSpaUrl: authURL, onInviteClick: onInviteClick, tenant: tenant, currentSpa: currentSPA, hasUserTabPermission: hasUserTabPermission, hasGroupsTabPermission: hasGroupsTabPermission, hasPoliciesTabPermission: hasPoliciesTabPermission, hasRolesTabPermission: hasRolesTabPermission, hasTeamsTabPermission: hasTeamsTabPermission, hasInviteUserPermission: hasInviteUserPermission, hasCreateTeamPermission: hasCreateTeamPermission, onLoadGroupPermissions: onLoadGroupPermissions, hasAlertsTabPermission: hasAlertsTabPermission, rbacPermissions: rbacPermissions, enableRbac: enableRbac, showGradebookTab: showGradebookTab })), activeTab === 'organization' && (jsx(OrganizationTab, { platformKey: tenant, tenant: tenants.find((ten) => ten.key === tenant), onTenantUpdate: onTenantUpdate, setOrganizationLogoFromOutside: setOrganizationLogo, defaultSupportPhone: defaultSupportPhone, enableSupportPhone: enableSupportPhone })), activeTab === 'integrations' && (jsx(IntegrationsTab, { tenantKey: tenant, username: username })), activeTab === 'billing' && (jsx(BillingTab, { tenant: tenant, userActiveApp: userActiveApp, username: username, currentUserEmail: email, mainPlatformKey: mainPlatformKey })), activeTab === 'monetization' && (jsx(MonetizationTab, { platformKey: tenant, authURL: authURL })), activeTab === 'datasets' && showBenchmarks && (jsx(BenchmarksTab, { tenantKey: tenant, username: username })), activeTab === 'memory' && jsx(MemoryAdminTab, { tenantKey: tenant, username: username }), activeTab === 'advanced' && (jsx(AdvancedTab, { platformKey: tenant, currentSPA: currentSPA, username: username, authURL: authURL, currentPlatformBaseDomain: currentPlatformBaseDomain }))] })] }), jsx(ToastProvider, {})] }));
+                        }, children: [jsxs("div", { className: "lg:hidden mb-6", children: [jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2", children: (_e = (_d = TABS.find((t) => t.id === activeTab)) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : (activeTab === 'billing' ? t('profileAccount.tabBilling') : activeTab) }), jsxs("p", { className: "text-gray-600 dark:text-gray-400 text-sm", children: [activeTab === 'billing' && t('profileAccount.descBilling'), activeTab === 'basic' && t('profileAccount.descBasic'), activeTab === 'social' && t('profileAccount.descSocial'), activeTab === 'security' && t('profileAccount.descSecurity'), activeTab === 'management' && t('profileAccount.descManagement'), activeTab === 'organization' && t('profileAccount.descOrganization'), activeTab === 'monetization' && t('profileAccount.descMonetization'), activeTab === 'datasets' && t('profileAccount.descBenchmarks'), activeTab === 'memory' && t('profileAccount.descMemory'), activeTab === 'advanced' && t('profileAccount.descAdvanced')] })] }), activeTab === 'management' && hasManagementPermissions && (jsx(Admin, { onboardingBasePath: onboardingBasePath, authSpaUrl: authURL, onInviteClick: onInviteClick, tenant: tenant, currentSpa: currentSPA, hasUserTabPermission: hasUserTabPermission, hasGroupsTabPermission: hasGroupsTabPermission, hasPoliciesTabPermission: hasPoliciesTabPermission, hasRolesTabPermission: hasRolesTabPermission, hasTeamsTabPermission: hasTeamsTabPermission, hasInviteUserPermission: hasInviteUserPermission, hasCreateTeamPermission: hasCreateTeamPermission, onLoadGroupPermissions: onLoadGroupPermissions, hasAlertsTabPermission: hasAlertsTabPermission, rbacPermissions: rbacPermissions, enableRbac: enableRbac, showGradebookTab: showGradebookTab })), activeTab === 'organization' && (jsx(OrganizationTab, { platformKey: tenant, tenant: tenants.find((ten) => ten.key === tenant), onTenantUpdate: onTenantUpdate, setOrganizationLogoFromOutside: setOrganizationLogo, defaultSupportPhone: defaultSupportPhone, enableSupportPhone: enableSupportPhone })), activeTab === 'integrations' && (jsx(IntegrationsTab, { tenantKey: tenant, username: username })), activeTab === 'billing' && canSeeBilling && (jsx(BillingTab, { tenant: tenant, userActiveApp: userActiveApp, username: username, currentUserEmail: email, mainPlatformKey: mainPlatformKey })), activeTab === 'monetization' && (jsx(MonetizationTab, { platformKey: tenant, authURL: authURL })), activeTab === 'datasets' && showBenchmarks && (jsx(BenchmarksTab, { tenantKey: tenant, username: username })), activeTab === 'memory' && jsx(MemoryAdminTab, { tenantKey: tenant, username: username }), activeTab === 'advanced' && (jsx(AdvancedTab, { platformKey: tenant, currentSPA: currentSPA, username: username, authURL: authURL, currentPlatformBaseDomain: currentPlatformBaseDomain }))] })] }), jsx(ToastProvider, {})] }));
 }
 
 function UserProfileModal({ isOpen, onClose, params, email, mainPlatformKey, showMentorAIDisplayCheckbox = false, showLeaderboardDisplayCheckbox = false, showGradebookTab = false, showUsernameField = false, showPlatformName = false, useGravatarPicFallback = true, enableCatalogInvite = false, targetTab = 'basic', currentPlan = '', currentSPA = '', userActiveApp = null, authURL, tenants = [], onTenantUpdate, currentPlatformBaseDomain = '', rbacPermissions = {}, enableRbac = false, onLoadGroupPermissions, onTabChange, defaultSupportPhone = '', onBillingTabRequest, onAccountDeleted, enableMemoryTab = false, showBenchmarks = false, localLLMProps, enableSupportPhone, onboardingBasePath = '', }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iblai/iblai-js",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "description": "Unified JavaScript SDK for IBL.ai — re-exports data-layer, web-containers, and web-utils under a single package",
   "type": "module",
   "engines": {
@@ -76,9 +76,9 @@
     "axios": "1.13.6",
     "dotenv": "16.6.1",
     "winston": "3.19.0",
-    "@iblai/mcp": "1.12.11",
     "@iblai/data-layer": "1.13.3",
-    "@iblai/web-containers": "1.19.12",
+    "@iblai/mcp": "1.12.12",
+    "@iblai/web-containers": "1.19.13",
     "@iblai/web-utils": "2.4.6"
   },
   "peerDependencies": {