@datalayer/core 1.0.25 → 1.1.43

package/lib/components/principal/Principal.js

@@ -1,18 +1,139 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Principal – common, tunable display for an actor (user / team /
+ * organization). Combines a {@link PrincipalAvatar} with a
+ * {@link PrincipalDetailsOverlay} so all spots that need to show
+ * "avatar + clickable name with details overlay" can share a single
+ * component.
+ */
+import * as React from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { useCache } from '../../hooks/index.js';
+import { useIAMStore } from '../../state/index.js';
 import { PrincipalAvatar } from './PrincipalAvatar.js';
 import { PrincipalDetailsOverlay } from './PrincipalDetailsOverlay.js';
-export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2, square = false, sx, }) => {
-    const { useUser, useOrganization } = useCache();
-    const hydratedUserQuery = useUser(principal.kind === 'user' ? String(principal.uid || '') : '');
-    const hydratedOrgQuery = useOrganization(principal.kind === 'organization' ? String(principal.uid || '') : '');
-    const hydratedEntity = principal.kind === 'user'
-        ? hydratedUserQuery.data
+/**
+ * Default maximum length applied to the placeholder shown before a principal's
+ * real display name has been resolved. The placeholder (derived from the given
+ * handle or uid) is truncated to this many characters.
+ */
+const DEFAULT_PLACEHOLDER_MAX_LENGTH = 10;
+/**
+ * Generic, non-informative display names that callers pass while the real
+ * entity is still loading. When the provided display name is one of these we
+ * prefer a handle/uid-derived placeholder instead.
+ */
+const GENERIC_PLACEHOLDER_DISPLAY_NAMES = new Set([
+    'unknown',
+    'principal',
+    'personal',
+    'team',
+    'organization',
+    'billable account',
+]);
+/** Truncate a placeholder string to `maxLength`, appending an ellipsis. */
+function truncatePlaceholder(value, maxLength) {
+    const trimmed = value.trim();
+    if (maxLength <= 0 || trimmed.length <= maxLength) {
+        return trimmed;
+    }
+    return `${trimmed.slice(0, maxLength)}\u2026`;
+}
+export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2, square = false, placeholderMaxLength = DEFAULT_PLACEHOLDER_MAX_LENGTH, sx, }) => {
+    const { useUser, useOrganizationByHandle, useTeam, useUserPublicProfileByHandle, useOrganizationPublicProfileByHandle, } = useCache();
+    // When no user is authenticated (anonymous visitor, e.g. public pages), the
+    // authenticated `useUser` / `useOrganization` endpoints return 401, which
+    // triggers a global logout + redirect to sign-in. For anonymous visitors we
+    // resolve the principal through the public-by-handle endpoints instead, which
+    // are anonymous-accessible and therefore never redirect.
+    const { user: authenticatedUser } = useIAMStore();
+    const isAnonymous = !authenticatedUser;
+    const normalizedUid = String(principal.uid || '').trim();
+    const normalizedProvidedHandle = String(principal.handle || '').trim();
+    const normalizedProvidedAccountHandle = String(principal.accountHandle || '').trim();
+    const providedHandleIsUidPlaceholder = !!normalizedProvidedHandle &&
+        !!normalizedUid &&
+        normalizedProvidedHandle === normalizedUid;
+    const providedAccountHandleIsUidPlaceholder = !!normalizedProvidedAccountHandle &&
+        !!normalizedUid &&
+        normalizedProvidedAccountHandle === normalizedUid;
+    const principalHandle = String((!providedHandleIsUidPlaceholder ? principal.handle : '') ||
+        (!providedAccountHandleIsUidPlaceholder ? principal.accountHandle : '') ||
+        '').trim();
+    const teamPathParts = principal.kind === 'team' ? principalHandle.split('/') : [];
+    const teamOrganizationHandleFromPath = String(teamPathParts[0] || '').trim();
+    const teamOrganizationHandleFromAccount = principal.kind === 'team' && !providedAccountHandleIsUidPlaceholder
+        ? String(principal.accountHandle || '').trim()
+        : '';
+    const teamOrganizationHandle = teamOrganizationHandleFromPath || teamOrganizationHandleFromAccount;
+    const hydratedUserQuery = useUser(!isAnonymous && principal.kind === 'personal'
+        ? String(principal.uid || '')
+        : '');
+    // Authenticated organizations are fetched by handle via the accounts
+    // endpoint (`/api/iam/v1/accounts/{handle}`). The by-uid organization
+    // endpoint (`/api/iam/v1/organizations/{uid}`) is not served and 404s, so we
+    // never look an organization up by uid here.
+    const organizationLookupHandle = String(principalHandle || '')
+        .replace(/^@+/, '')
+        .trim();
+    const hydratedOrgQuery = useOrganizationByHandle(!isAnonymous && principal.kind === 'organization'
+        ? organizationLookupHandle
+        : '');
+    const teamOrganizationQuery = useOrganizationByHandle(principal.kind === 'team' ? teamOrganizationHandle : '');
+    const hydratedTeamQuery = useTeam(principal.kind === 'team' ? String(principal.uid || '') : '', principal.kind === 'team'
+        ? String(teamOrganizationQuery.data?.id || '')
+        : '');
+    const hydratedPublicUserQuery = useUserPublicProfileByHandle(isAnonymous && principal.kind === 'personal' ? principalHandle : '');
+    const hydratedPublicOrgQuery = useOrganizationPublicProfileByHandle(isAnonymous && principal.kind === 'organization' ? principalHandle : '');
+    // Normalise the public (snake_case) profile payloads into the same camelCase
+    // shape the authenticated entities expose, so downstream logic is uniform.
+    const normalizedPublicUser = React.useMemo(() => {
+        const profile = hydratedPublicUserQuery.data;
+        if (!profile) {
+            return undefined;
+        }
+        const displayName = String(profile.display_name ||
+            [profile.first_name, profile.last_name].filter(Boolean).join(' ') ||
+            '').trim();
+        return {
+            displayName,
+            firstName: profile.first_name,
+            lastName: profile.last_name,
+            handle: profile.handle,
+            avatarUrl: profile.avatar_url,
+            origin: profile.origin,
+            email: profile.email,
+        };
+    }, [hydratedPublicUserQuery.data]);
+    const normalizedPublicOrg = React.useMemo(() => {
+        const profile = hydratedPublicOrgQuery.data;
+        if (!profile) {
+            return undefined;
+        }
+        return {
+            displayName: String(profile.display_name || profile.name || '').trim(),
+            name: profile.name,
+            description: profile.description || profile.description_t,
+            handle: profile.handle,
+            avatarUrl: profile.avatar_url,
+        };
+    }, [hydratedPublicOrgQuery.data]);
+    const hydratedEntity = principal.kind === 'personal'
+        ? isAnonymous
+            ? normalizedPublicUser
+            : hydratedUserQuery.data
         : principal.kind === 'organization'
-            ? hydratedOrgQuery.data
-            : undefined;
-    const hydratedDisplayName = principal.kind === 'user'
+            ? isAnonymous
+                ? normalizedPublicOrg
+                : hydratedOrgQuery.data
+            : principal.kind === 'team'
+                ? hydratedTeamQuery.data
+                : undefined;
+    const hydratedDisplayName = principal.kind === 'personal'
         ? String(hydratedEntity?.displayName ||
             [
                 hydratedEntity?.firstName,
@@ -27,16 +148,32 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
     const resolvedPrincipal = {
         ...principal,
         displayName: hydratedDisplayName ||
-            principal.displayName ||
-            principal.handle ||
-            principal.uid ||
-            'Unknown',
-        handle: principal.handle ||
+            (() => {
+                const providedDisplayName = String(principal.displayName || '').trim();
+                const providedIsGenericPlaceholder = !providedDisplayName ||
+                    GENERIC_PLACEHOLDER_DISPLAY_NAMES.has(providedDisplayName.toLowerCase()) ||
+                    (!!normalizedUid && providedDisplayName === normalizedUid);
+                // While the real display name is unresolved, prefer the given handle
+                // (or uid) as a placeholder, truncated to a maximum length. Only fall
+                // back to the caller-provided display name when it is meaningful.
+                const placeholder = truncatePlaceholder(principalHandle || normalizedProvidedHandle || normalizedUid || '', placeholderMaxLength);
+                if (providedIsGenericPlaceholder) {
+                    return placeholder || providedDisplayName || 'Unknown';
+                }
+                return providedDisplayName || placeholder || 'Unknown';
+            })(),
+        handle: (!providedHandleIsUidPlaceholder ? principal.handle : undefined) ||
             String(hydratedEntity?.handle || '').trim() ||
             undefined,
-        accountHandle: principal.accountHandle ||
+        accountHandle: (!providedAccountHandleIsUidPlaceholder ? principal.accountHandle : undefined) ||
             String(hydratedEntity?.handle || '').trim() ||
             undefined,
+        name: principal.name ||
+            String(hydratedEntity?.name || '').trim() ||
+            undefined,
+        description: principal.description ||
+            String(hydratedEntity?.description || '').trim() ||
+            undefined,
         avatarUrl: principal.avatarUrl || hydratedEntity?.avatarUrl || undefined,
         firstName: principal.firstName || hydratedEntity?.firstName || undefined,
         lastName: principal.lastName || hydratedEntity?.lastName || undefined,
@@ -49,6 +186,6 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
             gap,
             minWidth: 0,
             ...sx,
-        }, children: [_jsx(PrincipalAvatar, { kind: resolvedPrincipal.kind, avatarUrl: resolvedPrincipal.avatarUrl, alt: resolvedPrincipal.displayName, size: avatarSize, square: square }), _jsx(PrincipalDetailsOverlay, { kind: resolvedPrincipal.kind, uid: resolvedPrincipal.uid, displayName: resolvedPrincipal.displayName, handle: resolvedPrincipal.handle, accountHandle: resolvedPrincipal.accountHandle, firstName: resolvedPrincipal.firstName, lastName: resolvedPrincipal.lastName, email: resolvedPrincipal.email, origin: resolvedPrincipal.origin, avatarUrl: resolvedPrincipal.avatarUrl, isAdmin: isAdmin })] }));
+        }, children: [_jsx(PrincipalAvatar, { kind: resolvedPrincipal.kind, avatarUrl: resolvedPrincipal.avatarUrl, alt: resolvedPrincipal.displayName, size: avatarSize, square: square }), _jsx(PrincipalDetailsOverlay, { kind: resolvedPrincipal.kind, uid: resolvedPrincipal.uid, displayName: resolvedPrincipal.displayName, name: resolvedPrincipal.name, description: resolvedPrincipal.description, handle: resolvedPrincipal.handle, accountHandle: resolvedPrincipal.accountHandle, firstName: resolvedPrincipal.firstName, lastName: resolvedPrincipal.lastName, email: resolvedPrincipal.email, origin: resolvedPrincipal.origin, avatarUrl: resolvedPrincipal.avatarUrl, isAdmin: isAdmin })] }));
 };
 export default Principal;

package/lib/components/principal/PrincipalAvatar.d.ts

@@ -1,4 +1,4 @@
-export type PrincipalAvatarKind = 'user' | 'team' | 'organization';
+export type PrincipalAvatarKind = 'personal' | 'team' | 'organization';
 export type PrincipalAvatarProps = {
     kind: PrincipalAvatarKind;
     avatarUrl?: string;

package/lib/components/principal/PrincipalAvatar.js

@@ -3,42 +3,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { Box, useColorPalette } from '@datalayer/primer-addons';
+import { Box } from '@datalayer/primer-addons';
 import { OrganizationIcon, PeopleIcon } from '@primer/octicons-react';
-import { AlienIcon } from '@datalayer/icons-react';
-import { DLAvatar } from '../avatars/index.js';
-function hasRealAvatar(url) {
-    if (!url) {
-        return false;
-    }
-    if (url.startsWith('https://www.gravatar.com/avatar')) {
-        return false;
-    }
-    return true;
-}
+import { UserAvatar } from '../avatars/index.js';
 function getFallbackIconSize(size) {
     return Math.max(12, Math.round(size * 0.62));
 }
 export function PrincipalAvatar({ kind, avatarUrl, alt, size = 20, square = false, }) {
-    const palette = useColorPalette();
-    if (kind === 'user' && hasRealAvatar(avatarUrl)) {
-        return (_jsx(DLAvatar, { src: avatarUrl, alt: alt || 'User', size: size, square: square }));
+    if (kind === 'personal') {
+        return (_jsx(UserAvatar, { avatarUrl: avatarUrl, size: size, square: square, iconSize: getFallbackIconSize(size) }));
     }
     const iconSize = getFallbackIconSize(size);
     const borderRadius = square ? 2 : '50%';
-    if (kind === 'user') {
-        return (_jsx(Box, { sx: {
-                width: size,
-                height: size,
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                bg: 'accent.subtle',
-                borderRadius,
-                overflow: 'hidden',
-                '--datalayer-icon-fg': palette.primary,
-            }, "aria-label": alt || 'User', children: _jsx(AlienIcon, { size: iconSize }) }));
-    }
     const Icon = kind === 'team' ? PeopleIcon : OrganizationIcon;
     return (_jsx(Box, { sx: {
             width: size,

package/lib/components/principal/PrincipalBadge.js

@@ -71,7 +71,7 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
                 kind: 'team',
                 uid: selectedPrincipalUid,
                 handle: `${orgHandle}/${teamHandle}`,
-                accountHandle: teamHandle,
+                accountHandle: orgHandle,
                 displayName: `@${formatFriendlyHandle(orgHandle)}/${formatFriendlyHandle(teamHandle)}`,
                 origin: 'Datalayer',
             };
@@ -85,7 +85,7 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
             ? `@${formatFriendlyHandle(resolvedHandle)}`
             : '@me';
         return {
-            kind: 'user',
+            kind: 'personal',
             uid: user?.id || selectedPrincipalUid,
             displayName: fullName || fallbackHandle,
             handle: resolvedHandle,
@@ -110,7 +110,7 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
         user?.email,
         user?.avatarUrl,
     ]);
-    const userLookupUid = basePrincipal.kind === 'user' ? String(basePrincipal.uid || '') : '';
+    const userLookupUid = basePrincipal.kind === 'personal' ? String(basePrincipal.uid || '') : '';
     const organizationLookupUid = basePrincipal.kind === 'organization'
         ? String(basePrincipal.uid || '')
         : '';
@@ -168,7 +168,7 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
             fallbackHandle;
         const origin = normalizeUserOrigin(resolvedUser?.origin || basePrincipal.origin);
         return {
-            kind: 'user',
+            kind: 'personal',
             uid: resolvedUser?.uid || basePrincipal.uid,
             displayName: resolvedDisplayName,
             handle: resolvedHandle,

package/lib/components/principal/PrincipalDetailsOverlay.d.ts

@@ -1,8 +1,10 @@
-export type PrincipalKind = 'user' | 'team' | 'organization';
+export type PrincipalKind = 'personal' | 'team' | 'organization';
 export type PrincipalDetailsOverlayProps = {
     kind: PrincipalKind;
     uid?: string;
     displayName: string;
+    name?: string;
+    description?: string;
     handle?: string;
     accountHandle?: string;
     firstName?: string;
@@ -19,5 +21,5 @@ export declare function buildPrincipalProfilePath({ kind, uid, handle, accountHa
     accountHandle?: string;
     isAdmin?: boolean;
 }): string | null;
-export declare function PrincipalDetailsOverlay({ kind, uid, displayName, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, isAdmin, }: PrincipalDetailsOverlayProps): JSX.Element;
+export declare function PrincipalDetailsOverlay({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, isAdmin, }: PrincipalDetailsOverlayProps): JSX.Element;
 export default PrincipalDetailsOverlay;

package/lib/components/principal/PrincipalDetailsOverlay.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { ActionMenu, Box, Button, Text } from '@primer/react';
+import { ActionMenu, Box, Button, Label, Text } from '@primer/react';
 import { useNavigate } from '../../hooks/index.js';
 import { PrincipalAvatar } from './PrincipalAvatar.js';
 function normalize(value) {
@@ -16,7 +16,7 @@ export function buildPrincipalProfilePath({ kind, uid, handle, accountHandle, is
     const safeHandle = normalizedHandle && normalizedHandle !== normalizedUid
         ? normalizedHandle
         : '';
-    if (kind === 'user') {
+    if (kind === 'personal') {
         if (isAdmin && normalizedUid) {
             return `/admin/management/iam/users/${normalizedUid}`;
         }
@@ -45,7 +45,7 @@ export function buildPrincipalProfilePath({ kind, uid, handle, accountHandle, is
     }
     return null;
 }
-export function PrincipalDetailsOverlay({ kind, uid, displayName, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, isAdmin = false, }) {
+export function PrincipalDetailsOverlay({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, isAdmin = false, }) {
     const navigate = useNavigate();
     const normalizedDisplayName = normalize(displayName) ||
         normalize(handle) ||
@@ -53,10 +53,16 @@ export function PrincipalDetailsOverlay({ kind, uid, displayName, handle, accoun
         'Principal';
     const normalizedHandle = normalize(handle);
     const normalizedUid = normalize(uid);
+    const normalizedName = normalize(name);
+    const normalizedDescription = normalize(description);
+    const normalizedOrigin = normalize(origin) || 'Datalayer';
+    const resolvedHandle = normalizedHandle && normalizedHandle !== normalizedUid
+        ? normalizedHandle
+        : '';
     const targetPath = buildPrincipalProfilePath({
         kind,
         uid: normalizedUid,
-        handle: normalizedHandle,
+        handle: resolvedHandle,
         accountHandle,
         isAdmin,
     });
@@ -72,15 +78,29 @@ export function PrincipalDetailsOverlay({ kind, uid, displayName, handle, accoun
                         ':hover': {
                             textDecoration: 'underline',
                         },
-                    }, children: normalizedDisplayName }) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsxs(Box, { sx: { display: 'grid', gap: 3, p: 4, minWidth: 420 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(PrincipalAvatar, { kind: kind, avatarUrl: avatarUrl, alt: normalizedDisplayName, size: 40 }), _jsxs(Box, { sx: { display: 'grid', gap: 0.5 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: normalizedDisplayName }), normalizedHandle ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["@", normalizedHandle] })) : null] })] }), _jsxs(Box, { sx: {
+                    }, children: normalizedDisplayName }) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsxs(Box, { sx: { display: 'grid', gap: 3, p: 4, minWidth: 420 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(PrincipalAvatar, { kind: kind, avatarUrl: avatarUrl, alt: normalizedDisplayName, size: 40 }), _jsxs(Box, { sx: { display: 'grid', gap: 0.5 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: normalizedDisplayName }), resolvedHandle ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["@", resolvedHandle] })) : null] })] }), _jsxs(Box, { sx: {
                                 display: 'grid',
                                 gridTemplateColumns: '110px 1fr',
                                 gap: 1,
                                 alignItems: 'baseline',
-                            }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Type" }), _jsx(Text, { sx: { fontSize: 1 }, children: kind }), normalizedHandle ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsxs(Text, { sx: { fontSize: 1 }, children: ["@", normalizedHandle] })] })) : null, normalizedUid ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedUid })] })) : null, kind === 'user' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontSize: 1 }, children: firstName || 'N/A' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontSize: 1 }, children: lastName || 'N/A' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Text, { sx: { fontSize: 1 }, children: origin || 'Datalayer' }), email ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontSize: 1 }, children: email })] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Text, { sx: { fontSize: 1 }, children: origin || 'Datalayer' })] }))] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { size: "small", onClick: () => {
+                            }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Kind" }), _jsx(Text, { sx: { fontSize: 1 }, children: kind }), resolvedHandle ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsxs(Text, { sx: { fontSize: 1 }, children: ["@", resolvedHandle] })] })) : null, normalizedUid ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedUid })] })) : null, kind === 'personal' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontSize: 1 }, children: firstName || 'N/A' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontSize: 1 }, children: lastName || 'N/A' }), email ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontSize: 1 }, children: email })] })) : null, _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Label, { size: "small", variant: "secondary", title: normalizedOrigin, sx: {
+                                                justifySelf: 'start',
+                                                width: 'fit-content',
+                                                maxWidth: '100%',
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                            }, children: normalizedOrigin })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Name" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedName || normalizedDisplayName }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Description" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedDescription || 'N/A' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Label, { size: "small", variant: "secondary", title: normalizedOrigin, sx: {
+                                                justifySelf: 'start',
+                                                width: 'fit-content',
+                                                maxWidth: '100%',
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                            }, children: normalizedOrigin })] }))] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { size: "small", onClick: () => {
                                     if (targetPath) {
                                         navigate(targetPath);
                                     }
-                                }, disabled: !targetPath, children: "View profile" }) })] }) })] }));
+                                }, disabled: !targetPath, children: "View Profile" }) })] }) })] }));
 }
 export default PrincipalDetailsOverlay;

package/lib/components/principal/PrincipalSwitcherMenu.js

@@ -4,8 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { useEffect, useMemo, useState } from 'react';
-import { ActionList, ActionMenu, Box, Text } from '@primer/react';
-import { OrganizationIcon, PeopleIcon, PersonIcon, } from '@primer/octicons-react';
+import { ActionList, ActionMenu, Box, Button, Label, Text } from '@primer/react';
+import { OrganizationIcon, PeopleIcon, PersonIcon, TriangleDownIcon, } from '@primer/octicons-react';
 import { useCache, useAuthorization } from '../../hooks/index.js';
 import { useCoreStore } from '../../state/index.js';
 import { useIAMStore } from '../../state/substates/index.js';
@@ -13,7 +13,7 @@ import { memberships as fetchMemberships } from '../../api/iam/profile.js';
 import { usePrincipalStore } from '../../hooks/usePrincipalStore.js';
 import { useBillableAccountStore } from '../../hooks/useBillableAccountStore.js';
 import { useSelectedPrincipal } from '../../hooks/useSelectedPrincipal.js';
-import { formatFriendlyHandle } from '../../utils/Handles.js';
+import { DisplayHandle, displayHandleText } from '../display/DisplayHandle.js';
 function truncatePrincipalLabel(label, maxChars) {
     const trimmed = (label || '').trim();
     if (!trimmed) {
@@ -32,7 +32,7 @@ function truncatePrincipalLabel(label, maxChars) {
  *   - selecting a team principal     → billable account = the team's parent org
  */
 export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, showClosedBorder = true, }) {
-    const { user, token, iamRunUrl } = useIAMStore();
+    const { user, token, iamUrl } = useIAMStore();
     const { configuration } = useCoreStore();
     const { checkIsPlatformAdmin } = useAuthorization();
     const { useUserOrganizations } = useCache();
@@ -42,7 +42,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
     const isPlatformAdmin = user ? checkIsPlatformAdmin(user) : false;
     const [teams, setTeams] = useState([]);
     const [teamsLoading, setTeamsLoading] = useState(false);
-    const selectUserPrincipal = usePrincipalStore(state => state.selectUserPrincipal);
+    const selectPersonalPrincipal = usePrincipalStore(state => state.selectPersonalPrincipal);
     const selectOrganizationPrincipal = usePrincipalStore(state => state.selectOrganizationPrincipal);
     const selectTeamPrincipal = usePrincipalStore(state => state.selectTeamPrincipal);
     const setBillableAccount = useBillableAccountStore(state => state.setBillableAccount);
@@ -50,7 +50,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
     const personalUid = user?.uid || user?.id || '';
     const personalHandle = user?.handle || '';
     const selectUser = (uid, handle) => {
-        selectUserPrincipal(uid, handle);
+        selectPersonalPrincipal(uid, handle);
         setBillableAccount({ kind: 'user', uid, handle });
     };
     const selectOrganization = (uid, handle) => {
@@ -85,7 +85,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
             }
             setTeamsLoading(true);
             try {
-                const baseUrl = iamRunUrl || configuration.iamRunUrl;
+                const baseUrl = iamUrl || configuration.iamUrl;
                 const response = await fetchMemberships(token, baseUrl);
                 const rawMemberships = Array.isArray(response?.memberships)
                     ? response.memberships
@@ -120,7 +120,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
         return () => {
             cancelled = true;
         };
-    }, [token, iamRunUrl, configuration.iamRunUrl]);
+    }, [token, iamUrl, configuration.iamUrl]);
     useEffect(() => {
         if (!personalUid || !personalHandle) {
             return;
@@ -129,21 +129,13 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
             selectUser(personalUid, personalHandle);
             return;
         }
-        if (selectedPrincipalKind === 'organization' && isOrganizationsLoading) {
+        // Keep explicit organization/team selections stable across route transitions,
+        // even while memberships/organizations are still loading or temporarily
+        // unavailable for a given view.
+        if (selectedPrincipalKind === 'organization' || selectedPrincipalKind === 'team') {
             return;
         }
-        if (selectedPrincipalKind === 'organization' && !selectedOrganization) {
-            selectUser(personalUid, personalHandle);
-            return;
-        }
-        if (selectedPrincipalKind === 'team' && teamsLoading) {
-            return;
-        }
-        if (selectedPrincipalKind === 'team' && !selectedTeam) {
-            selectUser(personalUid, personalHandle);
-            return;
-        }
-        if (selectedPrincipalKind === 'user' &&
+        if (selectedPrincipalKind === 'personal' &&
             selectedPrincipalUid !== personalUid) {
             selectUser(personalUid, personalHandle);
         }
@@ -195,10 +187,10 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
             ''
         : '';
     const selectedPrincipalLabel = selectedPrincipalKind === 'team'
-        ? `@${formatFriendlyHandle(effectiveOrganizationHandle || personalHandle || 'organization')}/${formatFriendlyHandle(effectiveHandle)}`
-        : `@${formatFriendlyHandle(effectiveHandle)}`;
+        ? `${displayHandleText(effectiveOrganizationHandle || personalHandle || 'organization')}/${displayHandleText(effectiveHandle, { withAt: false })}`
+        : displayHandleText(effectiveHandle);
     const selectedPrincipalLabelClosed = truncatePrincipalLabel(selectedPrincipalLabel, maxLabelChars);
-    const isCurrentUserPrincipal = selectedPrincipalKind === 'user';
+    const isCurrentUserPrincipal = selectedPrincipalKind === 'personal';
     const selectedItemSx = {
         bg: 'accent.subtle',
         borderColor: 'accent.muted',
@@ -206,30 +198,37 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
         fontWeight: 'semibold',
     };
     const adminBadgeSx = {
-        ml: 'auto',
-        px: 1,
-        py: '2px',
-        borderRadius: 999,
         bg: 'attention.subtle',
         color: 'attention.fg',
-        fontSize: 0,
-        fontWeight: 'semibold',
-        lineHeight: 1.2,
         textTransform: 'lowercase',
+        lineHeight: 1.2,
     };
-    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsxs(Box, { as: "button", type: "button", "aria-label": "Switch principal", sx: {
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: showClosedBorder ? (_jsxs(Box, { as: "button", type: "button", "aria-label": "Switch principal", sx: {
                         width: fullWidth ? '100%' : 'auto',
-                        p: 2,
+                        boxSizing: 'border-box',
+                        px: 2,
+                        py: 2,
+                        fontSize: 0,
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'space-between',
                         gap: 2,
-                        bg: showClosedBorder ? 'canvas.subtle' : 'transparent',
-                        border: showClosedBorder ? '1px solid' : 'none',
-                        borderColor: showClosedBorder ? 'border.default' : 'transparent',
+                        bg: 'canvas.subtle',
+                        border: '1px solid',
+                        borderColor: 'border.default',
                         borderRadius: 2,
                         cursor: 'pointer',
                         textAlign: 'left',
+                        transition: 'background-color 120ms ease',
+                        ':hover': {
+                            bg: 'canvas.subtle',
+                        },
+                        ':focus-visible': {
+                            bg: 'canvas.subtle',
+                            outline: '2px solid',
+                            outlineColor: 'accent.emphasis',
+                            outlineOffset: '2px',
+                        },
                     }, children: [_jsx(Box, { sx: {
                                 display: 'inline-flex',
                                 alignItems: 'center',
@@ -239,24 +238,50 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                     display: 'block',
                                     color: 'accent.fg',
                                     fontWeight: 'semibold',
-                                    fontSize: 1,
+                                    fontSize: 'inherit',
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis',
                                     maxWidth: '100%',
                                 }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Box, { sx: {
-                                ml: 'auto',
                                 flexShrink: 0,
                                 display: 'inline-flex',
                                 alignItems: 'center',
-                            }, children: _jsx(Box, { as: "span", sx: adminBadgeSx, children: "admin" }) })) : null] }) }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "User" }), _jsxs(ActionList.Item, { disabled: isCurrentUserPrincipal, selected: isCurrentUserPrincipal, sx: isCurrentUserPrincipal ? selectedItemSx : undefined, onSelect: () => {
+                            }, children: _jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" }) })) : null, _jsx(Box, { sx: {
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                color: 'fg.muted',
+                                flexShrink: 0,
+                                ml: isPlatformAdmin && isCurrentUserPrincipal ? 1 : 0,
+                            }, children: _jsx(TriangleDownIcon, { size: 12 }) })] })) : (_jsx(Button, { variant: "invisible", size: "small", "aria-label": "Switch principal", trailingVisual: TriangleDownIcon, sx: {
+                        maxWidth: fullWidth ? '100%' : ['200px', '260px', '360px'],
+                        width: fullWidth ? '100%' : 'auto',
+                    }, children: _jsxs(Box, { sx: {
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: 1,
+                            minWidth: 0,
+                        }, children: [_jsx(Box, { sx: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    color: 'fg.muted',
+                                    flexShrink: 0,
+                                }, children: selectedPrincipalKind === 'organization' ? (_jsx(OrganizationIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(PeopleIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { sx: {
+                                    minWidth: 0,
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                }, children: _jsx(Text, { sx: {
+                                        color: 'accent.fg',
+                                        fontWeight: 'semibold',
+                                    }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" })) : null] }) })) }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Personal" }), _jsxs(ActionList.Item, { disabled: isCurrentUserPrincipal, selected: isCurrentUserPrincipal, sx: isCurrentUserPrincipal ? selectedItemSx : undefined, onSelect: () => {
                                         if (isCurrentUserPrincipal) {
                                             return;
                                         }
                                         if (personalUid && personalHandle) {
                                             selectUser(personalUid, personalHandle);
                                         }
-                                    }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PersonIcon, {}) }), "@", formatFriendlyHandle(personalHandle || 'me'), isPlatformAdmin ? (_jsx(ActionList.TrailingVisual, { children: _jsx(Box, { as: "span", sx: adminBadgeSx, children: "admin" }) })) : null] })] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Organizations" }), organizations.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No organizations" })) : (organizations.map((organization) => {
+                                    }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PersonIcon, {}) }), _jsx(DisplayHandle, { handle: personalHandle || 'me' }), isPlatformAdmin ? (_jsx(ActionList.TrailingVisual, { children: _jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" }) })) : null] })] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Organizations" }), organizations.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No organizations" })) : (organizations.map((organization) => {
                                     const organizationUid = getOrganizationUid(organization);
                                     const isCurrentOrganizationPrincipal = selectedPrincipalKind === 'organization' &&
                                         selectedPrincipalUid === organizationUid;
@@ -269,7 +294,13 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                             if (organizationUid && organization.handle) {
                                                 selectOrganization(organizationUid, organization.handle);
                                             }
-                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(OrganizationIcon, {}) }), "@", organization.handle] }, organizationUid));
+                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(OrganizationIcon, {}) }), _jsx(Box, { as: "span", title: displayHandleText(organization.handle), sx: {
+                                                    display: 'block',
+                                                    minWidth: 0,
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    whiteSpace: 'nowrap',
+                                                }, children: _jsx(DisplayHandle, { handle: organization.handle }) })] }, organizationUid));
                                 }))] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Teams" }), teams.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No teams" })) : (teams.map(team => {
                                     const isCurrentTeamPrincipal = selectedPrincipalKind === 'team' &&
                                         selectedPrincipalUid === team.uid;
@@ -281,7 +312,13 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                                 return;
                                             }
                                             selectTeam(team, orgHandle);
-                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PeopleIcon, {}) }), "@", formatFriendlyHandle(orgHandle), "/", formatFriendlyHandle(team.handle)] }, team.uid));
+                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PeopleIcon, {}) }), _jsxs(Box, { as: "span", title: `${displayHandleText(orgHandle)}/${displayHandleText(team.handle, { withAt: false })}`, sx: {
+                                                    display: 'block',
+                                                    minWidth: 0,
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    whiteSpace: 'nowrap',
+                                                }, children: [_jsx(DisplayHandle, { handle: orgHandle }), "/", _jsx(DisplayHandle, { handle: team.handle, withAt: false })] })] }, team.uid));
                                 }))] })] }) })] }));
 }
 export default PrincipalSwitcherMenu;