@datalayer/core 1.1.46 → 1.1.48

package/lib/components/principal/Principal.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { useCache } from '../../hooks/index.js';
+import { usePrincipalCacheStore, principalCacheKey, } from '../../hooks/usePrincipalCacheStore.js';
 import { useIAMStore } from '../../state/index.js';
 import { PrincipalAvatar } from './PrincipalAvatar.js';
 import { PrincipalDetailsOverlay } from './PrincipalDetailsOverlay.js';
@@ -53,6 +54,14 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
     const { user: authenticatedUser } = useIAMStore();
     const isAnonymous = !authenticatedUser;
     const normalizedUid = String(principal.uid || '').trim();
+    // In-memory principal cache: seed the display from a previously resolved
+    // snapshot (keyed by uid) for an instant paint, and write freshly resolved
+    // data back so later renders anywhere reuse it. Network hooks below still
+    // refresh on demand per their staleTime.
+    const cachedPrincipal = usePrincipalCacheStore(state => normalizedUid
+        ? state.principals[principalCacheKey(principal.kind, normalizedUid)]
+        : undefined);
+    const upsertCachedPrincipal = usePrincipalCacheStore(state => state.upsertPrincipal);
     const normalizedProvidedHandle = String(principal.handle || '').trim();
     const normalizedProvidedAccountHandle = String(principal.accountHandle || '').trim();
     const providedHandleIsUidPlaceholder = !!normalizedProvidedHandle &&
@@ -145,9 +154,31 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
         : String(hydratedEntity?.displayName ||
             hydratedEntity?.name ||
             '').trim();
+    // Team-specific enrichment: parent organization + membership + visibility,
+    // falling back to the in-memory cache when the network data isn't ready yet.
+    const hydratedTeam = principal.kind === 'team' ? hydratedTeamQuery.data : undefined;
+    const teamMemberCount = hydratedTeam && Array.isArray(hydratedTeam.members)
+        ? hydratedTeam.members.length
+        : cachedPrincipal?.memberCount;
+    const teamOrganizationHandleResolved = principal.kind === 'team'
+        ? String(teamOrganizationQuery.data?.handle ||
+            teamOrganizationHandle ||
+            cachedPrincipal?.organizationHandle ||
+            '').trim() || undefined
+        : undefined;
+    const teamOrganizationNameResolved = principal.kind === 'team'
+        ? String(teamOrganizationQuery.data?.displayName ||
+            teamOrganizationQuery.data?.name ||
+            cachedPrincipal?.organizationName ||
+            '').trim() || undefined
+        : undefined;
+    const resolvedIsPublic = typeof hydratedEntity?.public === 'boolean'
+        ? hydratedEntity.public
+        : cachedPrincipal?.isPublic;
     const resolvedPrincipal = {
         ...principal,
         displayName: hydratedDisplayName ||
+            String(cachedPrincipal?.displayName || '').trim() ||
             (() => {
                 const providedDisplayName = String(principal.displayName || '').trim();
                 const providedIsGenericPlaceholder = !providedDisplayName ||
@@ -164,30 +195,97 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
             })(),
         handle: (!providedHandleIsUidPlaceholder ? principal.handle : undefined) ||
             String(hydratedEntity?.handle || '').trim() ||
+            cachedPrincipal?.handle ||
             undefined,
-        accountHandle: (!providedAccountHandleIsUidPlaceholder
-            ? principal.accountHandle
-            : undefined) ||
-            String(hydratedEntity?.handle || '').trim() ||
-            undefined,
+        accountHandle: principal.kind === 'team'
+            ? (!providedAccountHandleIsUidPlaceholder
+                ? principal.accountHandle
+                : undefined) ||
+                teamOrganizationHandleResolved ||
+                cachedPrincipal?.accountHandle ||
+                undefined
+            : (!providedAccountHandleIsUidPlaceholder
+                ? principal.accountHandle
+                : undefined) ||
+                String(hydratedEntity?.handle || '').trim() ||
+                cachedPrincipal?.accountHandle ||
+                undefined,
         name: principal.name ||
             String(hydratedEntity?.name || '').trim() ||
+            cachedPrincipal?.name ||
             undefined,
         description: principal.description ||
             String(hydratedEntity?.description || '').trim() ||
+            cachedPrincipal?.description ||
+            undefined,
+        avatarUrl: principal.avatarUrl ||
+            hydratedEntity?.avatarUrl ||
+            cachedPrincipal?.avatarUrl ||
+            undefined,
+        firstName: principal.firstName ||
+            hydratedEntity?.firstName ||
+            cachedPrincipal?.firstName ||
+            undefined,
+        lastName: principal.lastName ||
+            hydratedEntity?.lastName ||
+            cachedPrincipal?.lastName ||
+            undefined,
+        email: principal.email ||
+            hydratedEntity?.email ||
+            cachedPrincipal?.email ||
+            undefined,
+        origin: principal.origin ||
+            hydratedEntity?.origin ||
+            cachedPrincipal?.origin ||
             undefined,
-        avatarUrl: principal.avatarUrl || hydratedEntity?.avatarUrl || undefined,
-        firstName: principal.firstName || hydratedEntity?.firstName || undefined,
-        lastName: principal.lastName || hydratedEntity?.lastName || undefined,
-        email: principal.email || hydratedEntity?.email || undefined,
-        origin: principal.origin || hydratedEntity?.origin || undefined,
     };
+    // Persist the freshly resolved snapshot so subsequent renders (here or in
+    // other views) paint instantly from memory. Refreshes still happen on demand
+    // through the underlying query hooks.
+    React.useEffect(() => {
+        if (!normalizedUid) {
+            return;
+        }
+        upsertCachedPrincipal({
+            kind: principal.kind,
+            uid: normalizedUid,
+            // Only cache a real, resolved display name — never a uid/handle
+            // placeholder — so cached names stay authoritative.
+            displayName: hydratedDisplayName ||
+                String(cachedPrincipal?.displayName || '').trim() ||
+                undefined,
+            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,
+            organizationHandle: teamOrganizationHandleResolved,
+            organizationName: teamOrganizationNameResolved,
+            memberCount: teamMemberCount,
+            isPublic: resolvedIsPublic,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        normalizedUid,
+        principal.kind,
+        hydratedEntity,
+        hydratedDisplayName,
+        teamOrganizationHandleResolved,
+        teamOrganizationNameResolved,
+        teamMemberCount,
+        resolvedIsPublic,
+        upsertCachedPrincipal,
+    ]);
     return (_jsxs(Box, { sx: {
             display: 'inline-flex',
             alignItems: 'center',
             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, 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 })] }));
+        }, 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, organizationName: teamOrganizationNameResolved, memberCount: teamMemberCount, isPublic: resolvedIsPublic, isAdmin: isAdmin })] }));
 };
 export default Principal;

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

@@ -12,6 +12,12 @@ export type PrincipalDetailsOverlayProps = {
     email?: string;
     origin?: string;
     avatarUrl?: string;
+    /** Team-specific: parent organization display name. */
+    organizationName?: string;
+    /** Team-specific: number of members. */
+    memberCount?: number;
+    /** Team/organization visibility. */
+    isPublic?: boolean;
     isAdmin?: boolean;
 };
 export declare function buildPrincipalProfilePath({ kind, uid, handle, accountHandle, isAdmin, }: {
@@ -21,5 +27,5 @@ export declare function buildPrincipalProfilePath({ kind, uid, handle, accountHa
     accountHandle?: string;
     isAdmin?: boolean;
 }): string | null;
-export declare function PrincipalDetailsOverlay({ kind, uid, displayName, name, description, 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, organizationName, memberCount, isPublic, isAdmin, }: PrincipalDetailsOverlayProps): JSX.Element;
 export default PrincipalDetailsOverlay;

package/lib/components/principal/PrincipalDetailsOverlay.js

@@ -80,7 +80,7 @@ export function buildPrincipalProfilePath({ kind, uid, handle, accountHandle, is
     }
     return null;
 }
-export function PrincipalDetailsOverlay({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, isAdmin = false, }) {
+export function PrincipalDetailsOverlay({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, organizationName, memberCount, isPublic, isAdmin = false, }) {
     const navigate = useNavigate();
     const normalizedDisplayName = normalize(displayName) ||
         normalize(handle) ||
@@ -91,6 +91,8 @@ export function PrincipalDetailsOverlay({ kind, uid, displayName, name, descript
     const normalizedName = normalize(name);
     const normalizedDescription = normalize(description);
     const normalizedOrigin = normalizeOriginLabel(origin);
+    const normalizedAccountHandle = normalize(accountHandle);
+    const normalizedOrganizationName = normalize(organizationName);
     const resolvedHandle = normalizedHandle && normalizedHandle !== normalizedUid
         ? normalizedHandle
         : '';
@@ -101,6 +103,20 @@ export function PrincipalDetailsOverlay({ kind, uid, displayName, name, descript
         accountHandle,
         isAdmin,
     });
+    // For a team, extract the bare team handle (the last path segment) and the
+    // parent organization handle so we can present them separately.
+    const teamHandleOnly = kind === 'team' && resolvedHandle.includes('/')
+        ? normalize(resolvedHandle.split('/').pop())
+        : resolvedHandle;
+    const teamOrganizationHandle = kind === 'team'
+        ? normalizedAccountHandle ||
+            (resolvedHandle.includes('/')
+                ? normalize(resolvedHandle.split('/')[0])
+                : '')
+        : '';
+    const organizationPath = teamOrganizationHandle
+        ? `/${teamOrganizationHandle.replace(/^@+/, '')}`
+        : '';
     return (_jsx(ThemeProvider, { children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Box, { as: "button", type: "button", sx: {
                             fontWeight: 'semibold',
                             color: 'accent.fg',
@@ -113,7 +129,9 @@ export function PrincipalDetailsOverlay({ kind, uid, displayName, name, descript
                             ':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 }), resolvedHandle && kind !== 'team' ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: displayHandleText(resolvedHandle) })) : 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 }), kind === 'team' ? (teamHandleOnly ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [displayHandleText(teamHandleOnly), teamOrganizationHandle
+                                                        ? ` · @${teamOrganizationHandle.replace(/^@+/, '')}`
+                                                        : ''] })) : null) : resolvedHandle ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: displayHandleText(resolvedHandle) })) : null] })] }), _jsxs(Box, { sx: {
                                     display: 'grid',
                                     gridTemplateColumns: '110px 1fr',
                                     gap: 1,
@@ -125,17 +143,19 @@ export function PrincipalDetailsOverlay({ kind, uid, displayName, name, descript
                                                     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: {
+                                                }, children: normalizedOrigin })] })) : (_jsxs(_Fragment, { children: [kind === 'team' && teamHandleOnly ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontSize: 1 }, children: displayHandleText(teamHandleOnly) })] })) : null, kind === 'team' && teamOrganizationHandle ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Organization" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedOrganizationName
+                                                            ? `${normalizedOrganizationName} (${displayHandleText(teamOrganizationHandle)})`
+                                                            : displayHandleText(teamOrganizationHandle) })] })) : null, _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' }), kind === 'team' && typeof memberCount === 'number' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Members" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [memberCount, " ", memberCount === 1 ? 'member' : 'members'] })] })) : null, typeof isPublic === 'boolean' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Visibility" }), _jsx(Label, { size: "small", variant: isPublic ? 'success' : 'secondary', sx: { justifySelf: 'start', width: 'fit-content' }, children: isPublic ? 'Public' : 'Private' })] })) : 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 })] }))] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { size: "small", onClick: () => {
-                                        if (targetPath) {
-                                            navigate(targetPath);
-                                        }
-                                    }, disabled: !targetPath, children: "View Profile" }) })] }) })] }) }));
+                                                }, children: normalizedOrigin })] }))] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 2 }, children: [kind === 'team' && organizationPath ? (_jsx(Button, { size: "small", variant: "invisible", onClick: () => navigate(organizationPath), children: "View Organization" })) : null, _jsx(Button, { size: "small", onClick: () => {
+                                            if (targetPath) {
+                                                navigate(targetPath);
+                                            }
+                                        }, disabled: !targetPath, children: "View Profile" })] })] }) })] }) }));
 }
 export default PrincipalDetailsOverlay;

package/lib/components/principal/PrincipalSwitcherMenu.js

@@ -277,7 +277,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                     }, 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: "large", 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: () => {
+                                        }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" })) : null] }) })) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsxs(ActionList, { selectionVariant: "single", 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;
                                             }

package/lib/components/progress/SpinnerBar.d.ts

@@ -0,0 +1,2 @@
+export declare const SpinnerBar: () => import("react/jsx-runtime").JSX.Element;
+export default SpinnerBar;

package/lib/components/progress/{ProgressBar.js → SpinnerBar.js}

@@ -5,8 +5,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { useState } from 'react';
 import { useInterval } from 'usehooks-ts';
-import { ProgressBar as PrimerProgressBar } from '@primer/react';
-export const ProgressBar = () => {
+import { ProgressBar } from '@primer/react';
+export const SpinnerBar = () => {
     const [progress, setProgress] = useState(0);
     useInterval(() => {
         if (progress >= 100) {
@@ -16,6 +16,6 @@ export const ProgressBar = () => {
             setProgress(progress + 1);
         }
     }, 100);
-    return _jsx(PrimerProgressBar, { progress: progress, "aria-label": "" });
+    return _jsx(ProgressBar, { progress: progress, "aria-label": "" });
 };
-export default ProgressBar;
+export default SpinnerBar;

package/lib/components/progress/index.d.ts

@@ -1,5 +1,5 @@
 export * from './ConsumptionBar';
-export * from './ProgressBar';
+export * from './SpinnerBar';
 export * from './ProgressRing';
 export * from './Timer';
 export * from './consumption';

package/lib/components/progress/index.js

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './ConsumptionBar.js';
-export * from './ProgressBar.js';
+export * from './SpinnerBar.js';
 export * from './ProgressRing.js';
 export * from './Timer.js';
 export * from './consumption.js';

package/lib/components/subnav/SubNav.d.ts

@@ -68,7 +68,7 @@ export declare const SubNav: React.NamedExoticComponent<{
     readonly type: ({ id, children, className, "data-testid": testId, fullWidth, hasShadow, }: SubNavProps) => import("react/jsx-runtime").JSX.Element;
 } & {
     Heading: ({ href, children, className, "data-testid": testID, ...props }: SubNavHeadingProps) => import("react/jsx-runtime").JSX.Element;
-    Link: React.ForwardRefExoticComponent<Omit<SubNavLinkProps, "ref"> & React.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
+    Link: React.ForwardRefExoticComponent<Omit<SubNavLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLDivElement>>;
     Action: typeof _SubNavAction;
     SubMenu: typeof SubMenu;
     testIds: {

package/lib/config/Configuration.js

@@ -26,7 +26,7 @@ export class DatalayerConfiguration {
  * Default configuration values for Datalayer
  */
 export const DEFAULT_DATALAYER_CONFIG = {
-    datalayerUrl: 'https://oss.datalayer.run',
+    datalayerUrl: 'https://prod1.datalayer.run',
     credits: 100,
     cpuEnvironment: 'ai-agents-env',
     gpuEnvironment: 'ai-env',

package/lib/hooks/index.d.ts

@@ -28,6 +28,7 @@ export * from './useProjectStore';
 export * from './useMobile';
 export * from './useUsageRefreshStore';
 export * from './usePrincipalStore';
+export * from './usePrincipalCacheStore';
 export * from './useBillingEntityStore';
 export * from './useSelectedPrincipal';
 export * from './useSelectedBillingEntity';

package/lib/hooks/index.js

@@ -33,6 +33,7 @@ export * from './useProjectStore.js';
 export * from './useMobile.js';
 export * from './useUsageRefreshStore.js';
 export * from './usePrincipalStore.js';
+export * from './usePrincipalCacheStore.js';
 export * from './useBillingEntityStore.js';
 export * from './useSelectedPrincipal.js';
 export * from './useSelectedBillingEntity.js';

package/lib/hooks/useCache.d.ts

@@ -744,7 +744,7 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
         selectedPrincipalKind?: "personal" | "organization" | "team";
     }) => import("@tanstack/react-query").UseQueryResult<any, Error>;
     useCreatePage: () => import("@tanstack/react-query").UseMutationResult<any, Error, Omit<any, "id">, unknown>;
-    useUpdatePage: () => import("@tanstack/react-query").UseMutationResult<any, Error, Pick<any, "name" | "description" | "id" | "tags">, unknown>;
+    useUpdatePage: () => import("@tanstack/react-query").UseMutationResult<any, Error, Pick<any, "name" | "id" | "tags" | "description">, unknown>;
     useDeletePage: () => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
     useDatasource: (datasourceId: string, options?: {
         principalUid?: string;
@@ -788,7 +788,7 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
     }) => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
     useToken: (tokenId: string) => import("@tanstack/react-query").UseQueryResult<NoInfer<IIAMToken | null | undefined>, Error>;
     useTokens: () => import("@tanstack/react-query").UseQueryResult<NoInfer<(IIAMToken | undefined)[]>, Error>;
-    useCreateToken: () => import("@tanstack/react-query").UseMutationResult<any, Error, Omit<IIAMToken, "id" | "value">, unknown>;
+    useCreateToken: () => import("@tanstack/react-query").UseMutationResult<any, Error, Omit<IIAMToken, "value" | "id">, unknown>;
     useUpdateToken: () => import("@tanstack/react-query").UseMutationResult<any, Error, IIAMToken, unknown>;
     useDeleteToken: () => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
     useInvite: (token: string) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("..").IInvite | undefined>, Error>;

package/lib/hooks/usePrincipalCacheStore.d.ts

@@ -0,0 +1,54 @@
+export type PrincipalCacheKind = 'personal' | 'team' | 'organization';
+/**
+ * A resolved principal snapshot kept in memory so repeated renders (across
+ * views) can paint instantly instead of waiting for a network round trip.
+ *
+ * Only meaningful fields are stored; partial snapshots are merged over time so
+ * the cache accumulates as much information as possible for a given principal.
+ */
+export type CachedPrincipal = {
+    kind: PrincipalCacheKind;
+    uid: string;
+    displayName?: string;
+    name?: string;
+    description?: string;
+    handle?: string;
+    accountHandle?: string;
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+    origin?: string;
+    avatarUrl?: string;
+    /** Team-specific: parent organization handle. */
+    organizationHandle?: string;
+    /** Team-specific: parent organization display name. */
+    organizationName?: string;
+    /** Team-specific: number of members. */
+    memberCount?: number;
+    /** Whether the principal (team/org) is public. */
+    isPublic?: boolean;
+    /** Timestamp (ms) of the last time this entry was updated. */
+    updatedAt?: number;
+};
+/** Build the cache key for a principal. */
+export declare function principalCacheKey(kind: PrincipalCacheKind, uid: string): string;
+type PrincipalCacheState = {
+    /** Cached principals keyed by `${kind}:${uid}`. */
+    principals: Record<string, CachedPrincipal>;
+    /**
+     * Read a cached principal snapshot, if present.
+     */
+    getPrincipal: (kind: PrincipalCacheKind, uid: string) => CachedPrincipal | undefined;
+    /**
+     * Merge a (possibly partial) principal snapshot into the cache. Existing
+     * meaningful values are preserved when the incoming snapshot omits them, so
+     * information accumulates rather than being overwritten with blanks.
+     */
+    upsertPrincipal: (entry: CachedPrincipal) => void;
+    /** Remove a single cached principal (e.g. to force a fresh resolution). */
+    clearPrincipal: (kind: PrincipalCacheKind, uid: string) => void;
+    /** Clear the entire cache. */
+    reset: () => void;
+};
+export declare const usePrincipalCacheStore: import("zustand").UseBoundStore<import("zustand").StoreApi<PrincipalCacheState>>;
+export default usePrincipalCacheStore;

package/lib/hooks/usePrincipalCacheStore.js

@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { create } from 'zustand';
+/** Build the cache key for a principal. */
+export function principalCacheKey(kind, uid) {
+    return `${kind}:${String(uid || '').trim()}`;
+}
+const MERGEABLE_KEYS = [
+    'displayName',
+    'name',
+    'description',
+    'handle',
+    'accountHandle',
+    'firstName',
+    'lastName',
+    'email',
+    'origin',
+    'avatarUrl',
+    'organizationHandle',
+    'organizationName',
+    'memberCount',
+    'isPublic',
+];
+function hasMeaningfulValue(value) {
+    if (value === undefined || value === null) {
+        return false;
+    }
+    if (typeof value === 'string') {
+        return value.trim().length > 0;
+    }
+    return true;
+}
+export const usePrincipalCacheStore = create((set, get) => ({
+    principals: {},
+    getPrincipal: (kind, uid) => {
+        const normalizedUid = String(uid || '').trim();
+        if (!normalizedUid) {
+            return undefined;
+        }
+        return get().principals[principalCacheKey(kind, normalizedUid)];
+    },
+    upsertPrincipal: entry => {
+        const normalizedUid = String(entry.uid || '').trim();
+        if (!normalizedUid) {
+            return;
+        }
+        const key = principalCacheKey(entry.kind, normalizedUid);
+        const existing = get().principals[key];
+        const merged = {
+            ...existing,
+            kind: entry.kind,
+            uid: normalizedUid,
+        };
+        for (const field of MERGEABLE_KEYS) {
+            const incoming = entry[field];
+            if (hasMeaningfulValue(incoming)) {
+                merged[field] = incoming;
+            }
+        }
+        merged.updatedAt = Date.now();
+        // Skip the state update when no meaningful field changed to avoid
+        // needless re-renders of every mounted Principal.
+        if (existing) {
+            let changed = false;
+            for (const field of MERGEABLE_KEYS) {
+                if (merged[field] !== existing[field]) {
+                    changed = true;
+                    break;
+                }
+            }
+            if (!changed) {
+                return;
+            }
+        }
+        set(state => ({
+            principals: { ...state.principals, [key]: merged },
+        }));
+    },
+    clearPrincipal: (kind, uid) => {
+        const key = principalCacheKey(kind, String(uid || '').trim());
+        set(state => {
+            if (!state.principals[key]) {
+                return state;
+            }
+            const next = { ...state.principals };
+            delete next[key];
+            return { principals: next };
+        });
+    },
+    reset: () => set({ principals: {} }),
+}));
+export default usePrincipalCacheStore;

package/lib/otel/client/OtelClient.d.ts

@@ -26,11 +26,15 @@ export interface FetchMetricsOptions {
     serviceName?: string;
     metricName?: string;
     limit?: number;
+    /** Optional billing/account scope for account-scoped OTEL queries. */
+    accountUid?: string;
 }
 export interface FetchMetricTotalOptions {
     serviceName?: string;
     limit?: number;
     fallbackWithoutService?: boolean;
+    /** Optional billing/account scope for account-scoped OTEL queries. */
+    accountUid?: string;
 }
 /**
  * Typed HTTP client for all OTEL service endpoints.

package/lib/otel/client/OtelClient.js

@@ -168,6 +168,8 @@ export class OtelClient {
             params.set('service_name', options.serviceName);
         if (options.metricName)
             params.set('metric_name', options.metricName);
+        if (options.accountUid)
+            params.set('account_uid', options.accountUid);
         const resp = await otelFetch(`${this.baseUrl}/api/otel/v1/metrics/?${params}`, this.token, this.userUid);
         const rows = (Array.isArray(resp) ? resp : resp.data) ?? [];
         const normalized = Array.isArray(rows)
@@ -177,17 +179,22 @@ export class OtelClient {
     }
     /** Sum all values for one metric name, with optional service filter. */
     async fetchMetricTotal(metricName, options = {}) {
-        const { serviceName, limit = 500, fallbackWithoutService = true } = options;
+        const { serviceName, limit = 500, fallbackWithoutService = true, accountUid, } = options;
         const filtered = await this.fetchMetrics({
             metricName,
             serviceName,
             limit,
+            accountUid,
         });
         const filteredTotal = filtered.data.reduce((sum, row) => sum + Number(row.value || 0), 0);
         if (filteredTotal > 0 || !serviceName || !fallbackWithoutService) {
             return filteredTotal;
         }
-        const unfiltered = await this.fetchMetrics({ metricName, limit });
+        const unfiltered = await this.fetchMetrics({
+            metricName,
+            limit,
+            accountUid,
+        });
         return unfiltered.data.reduce((sum, row) => sum + Number(row.value || 0), 0);
     }
     // ── Services ──────────────────────────────────────────────────────────────

package/lib/routes/publicPaths.js

@@ -26,6 +26,7 @@ export const PUBLIC_PATH_PREFIXES = [
     '/docs',
     '/events',
     '/features',
+    '/gallery',
     '/integrations',
     '/join/confirm/user',
     '/library',

package/lib/utils/Date.js

@@ -99,7 +99,10 @@ export const formatRelativeTime = (value, now = new Date()) => {
     if (weeks < 52)
         return withDirection(weeks, 'w');
     const years = Math.floor(days / 365);
-    return withDirection(years, 'y');
+    if (years >= 1)
+        return withDirection(years, 'y');
+    // Around the year boundary (e.g. 364 days), prefer weeks over "0y".
+    return withDirection(weeks, 'w');
 };
 /**
  * Build a detailed datetime string suitable for tooltips.

package/lib/views/datasources/Datasources.d.ts

@@ -7,6 +7,8 @@ export type DatasourcesProps = {
     principalUid?: string;
     /** Optional principal kind used to scope datasource reads. */
     principalKind?: 'personal' | 'organization' | 'team';
+    /** Show local inline spinner in empty state while loading. */
+    showInlineLoadingIndicator?: boolean;
 };
-export declare const Datasources: ({ newDatasourceRoute, datasourcesListRoute, principalUid, principalKind, }?: DatasourcesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Datasources: ({ newDatasourceRoute, datasourcesListRoute, principalUid, principalKind, showInlineLoadingIndicator, }?: DatasourcesProps) => import("react/jsx-runtime").JSX.Element;
 export default Datasources;

package/lib/views/datasources/Datasources.js

@@ -10,26 +10,26 @@ import { DatabaseIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { EditIcon } from '@datalayer/icons-react';
 import { useCache, useNavigate } from '../../hooks/index.js';
-const DatasourcesTable = ({ datasourcesListRoute, principalUid, principalKind, }) => {
+const DatasourcesTable = ({ datasourcesListRoute, principalUid, principalKind, showInlineLoadingIndicator = true, }) => {
     const { useDatasources } = useCache();
     const datasourcesQuery = useDatasources({ principalUid, principalKind });
     const navigate = useNavigate();
     const [datasources, setDatasources] = useState([]);
-    const showInitialSpinner = datasources.length === 0
-        && (datasourcesQuery.isLoading
-            || datasourcesQuery.isFetching
-            || !Array.isArray(datasourcesQuery.data));
+    const showInitialSpinner = datasources.length === 0 &&
+        (datasourcesQuery.isLoading ||
+            datasourcesQuery.isFetching ||
+            !Array.isArray(datasourcesQuery.data));
     useEffect(() => {
         if (datasourcesQuery.data) {
             setDatasources(datasourcesQuery.data || []);
         }
     }, [datasourcesQuery.data]);
-    return datasources.length === 0 ? (_jsx(Blankslate, { border: true, spacious: true, children: showInitialSpinner ? (_jsx(Box, { sx: {
+    return datasources.length === 0 ? (_jsx(Blankslate, { border: true, spacious: true, children: showInitialSpinner && showInlineLoadingIndicator ? (_jsx(Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
                 minHeight: '40px',
-            }, children: _jsx(Spinner, {}) })) : (_jsxs(_Fragment, { children: [_jsx(Blankslate.Heading, { children: "Datasources" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Datasources found." }) })] })) })) : (_jsx(Table.Container, { children: _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: datasources, columns: [
+            }, children: _jsx(Spinner, {}) })) : showInitialSpinner ? (_jsxs(_Fragment, { children: [_jsx(Blankslate.Heading, { children: "Datasources" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "Loading datasources..." }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Blankslate.Heading, { children: "Datasources" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Datasources found." }) })] })) })) : (_jsx(Table.Container, { children: _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: datasources, columns: [
                 // @ts-ignore
                 {
                     header: 'Type',
@@ -54,7 +54,7 @@ const DatasourcesTable = ({ datasourcesListRoute, principalUid, principalKind, }
                 },
             ] }) }));
 };
-export const Datasources = ({ newDatasourceRoute = '/new/datasource', datasourcesListRoute, principalUid, principalKind, } = {}) => {
+export const Datasources = ({ newDatasourceRoute = '/new/datasource', datasourcesListRoute, principalUid, principalKind, showInlineLoadingIndicator = true, } = {}) => {
     const navigate = useNavigate();
     return (_jsx(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: _jsx(PageLayout.Content, { children: _jsxs(Box, { sx: { maxWidth: 960, mx: 'auto', width: '100%' }, children: [_jsxs(Box, { sx: {
                             display: 'flex',
@@ -63,6 +63,6 @@ export const Datasources = ({ newDatasourceRoute = '/new/datasource', datasource
                             gap: 3,
                             flexWrap: 'wrap',
                             mb: 4,
-                        }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Datasources" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Configure external data providers available to your workspaces and agents." })] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: DatabaseIcon, onClick: e => navigate(newDatasourceRoute, e), children: "New datasource" })] }), _jsx(DatasourcesTable, { datasourcesListRoute: datasourcesListRoute, principalUid: principalUid, principalKind: principalKind })] }) }) }));
+                        }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Datasources" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Configure external data providers available to your workspaces and agents." })] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: DatabaseIcon, onClick: e => navigate(newDatasourceRoute, e), children: "New datasource" })] }), _jsx(DatasourcesTable, { datasourcesListRoute: datasourcesListRoute, principalUid: principalUid, principalKind: principalKind, showInlineLoadingIndicator: showInlineLoadingIndicator })] }) }) }));
 };
 export default Datasources;

package/lib/views/iam/SignInSimple.js

@@ -17,6 +17,7 @@ import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 import { Box, Button, FormControl, Heading, Text, Textarea, TextInput, } from '@primer/react';
 import { EyeIcon, EyeClosedIcon, KeyIcon, LinkExternalIcon, TelescopeIcon, } from '@primer/octicons-react';
 import { GithubMarkIcon, LinkedInGreyIcon } from '@datalayer/icons-react';
+import { useToast } from '../../hooks/index.js';
 import { isInsideJupyterLab } from '../../utils/Jupyter.js';
 const GoogleIcon = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid", viewBox: "0 0 256 262", height: "16px", fill: "currentColor", "aria-hidden": "true", children: [_jsx("path", { fill: "currentColor", d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" }), _jsx("path", { fill: "currentColor", d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" }), _jsx("path", { fill: "currentColor", d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" }), _jsx("path", { fill: "currentColor", d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" })] }));
 const OAUTH2_PROVIDERS = {
@@ -52,6 +53,21 @@ const getIAMUrlFromDocumentConfig = () => {
         return '';
     }
 };
+const getErrorMessage = (error, fallback = 'Unable to start social sign-in.') => {
+    if (error instanceof Error && error.message) {
+        return error.message;
+    }
+    if (typeof error === 'string' && error.trim()) {
+        return error;
+    }
+    if (error && typeof error === 'object' && 'message' in error) {
+        const message = error.message;
+        if (typeof message === 'string' && message.trim()) {
+            return message;
+        }
+    }
+    return fallback;
+};
 // ── Component ────────────────────────────────────────────────────────
 export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp, name, title = 'Datalayer OTEL', description = 'Sign in to access the observability dashboard.', icon, leadingIcon = _jsx(TelescopeIcon, { size: 24 }), github = false, google = false, linkedin = false, apiKey = false, signUp = true, socialSignInNavigationTarget, }) => {
     const headingText = name ?? title;
@@ -68,6 +84,7 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
     const [loading, setLoading] = useState(false);
     const [socialLoading, setSocialLoading] = useState(false);
     const [error, setError] = useState(null);
+    const { enqueueToast } = useToast();
     // API Key dialog state
     const [showApiKeyDialog, setShowApiKeyDialog] = useState(false);
     const [apiKeyValue, setApiKeyValue] = useState('');
@@ -86,6 +103,9 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
         return route.startsWith('/') ? route : '/';
     }, []);
     const startOAuthSignIn = useCallback(async (providerSpec) => {
+        if (socialLoading) {
+            return;
+        }
         setError(null);
         setSocialLoading(true);
         try {
@@ -120,12 +140,18 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
             window.location.assign(authorizationURL);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : 'Unable to start social sign-in.');
-        }
-        finally {
+            const message = getErrorMessage(err);
+            setError(message);
+            enqueueToast(message, { variant: 'error' });
             setSocialLoading(false);
         }
-    }, [buildCallbackURI, currentRelativeRoute, socialSignInNavigationTarget]);
+    }, [
+        buildCallbackURI,
+        currentRelativeRoute,
+        enqueueToast,
+        socialLoading,
+        socialSignInNavigationTarget,
+    ]);
     useEffect(() => {
         if (showApiKeyDialog) {
             apiKeyRef.current?.focus();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "1.1.46",
+  "version": "1.1.48",
   "type": "module",
   "workspaces": [
     ".",

package/lib/components/progress/ProgressBar.d.ts

@@ -1,2 +0,0 @@
-export declare const ProgressBar: () => import("react/jsx-runtime").JSX.Element;
-export default ProgressBar;