@datalayer/core 1.1.45 → 1.1.47

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/config/Configuration.d.ts

@@ -73,8 +73,26 @@ export type IDatalayerCoreConfig = {
     mcpServersUrl: string;
     /**
      * OTEL (OpenTelemetry) API URL.
+     *
+     * This is the endpoint runtimes/agents export telemetry to. In the browser
+     * it is also the default endpoint used to *consume* (query) telemetry, unless
+     * {@link otelInUrl} is provided.
      */
     otelUrl: string;
+    /**
+     * OTEL (OpenTelemetry) *consume* (read/query) API URL override.
+     *
+     * When set, the UI reads telemetry (metrics, traces, logs) from this URL
+     * instead of {@link otelUrl}. When empty/undefined, {@link otelUrl} is used.
+     *
+     * Primary use case: local development. When runtimes run in the cloud and
+     * export their telemetry to the production OTEL service, a local UI must fetch
+     * telemetry from production rather than from the local OTEL endpoint. Set this
+     * to e.g. `https://prod1.datalayer.run` while `otelUrl` stays local.
+     *
+     * Fed by the `DATALAYER_OTEL_IN_URL` environment variable at build/deploy time.
+     */
+    otelInUrl?: string;
     /**
      * Growth API URL.
      */

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/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

@@ -16,7 +16,7 @@
  * const { data: spans } = await client.fetchTraces({ limit: 50 });
  * ```
  */
-import { coreStore } from '../../state/substates/CoreState.js';
+import { getOtelConsumeUrl } from '../../state/substates/CoreState.js';
 import { resolveOtelAuth } from '../auth.js';
 // ── Fetch helper ────────────────────────────────────────────────────────────
 async function otelFetch(url, token, userUid, options) {
@@ -125,8 +125,7 @@ export class OtelClient {
     token;
     userUid;
     constructor(options) {
-        this.baseUrl =
-            options.baseUrl ?? coreStore.getState().configuration.otelUrl;
+        this.baseUrl = options.baseUrl ?? getOtelConsumeUrl();
         const auth = resolveOtelAuth(options.token, options.userUid);
         this.token = auth.token;
         this.userUid = auth.userUid;
@@ -169,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)
@@ -178,17 +179,18 @@ 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/otel/hooks/index.js

@@ -8,7 +8,7 @@
  * @module otel/hooks
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { coreStore } from '../../state/substates/CoreState.js';
+import { getOtelConsumeUrl } from '../../state/substates/CoreState.js';
 import { buildOtelWebSocketUrl, resolveOtelAuth } from '../auth.js';
 // ── Global 401 handler ──────────────────────────────────────────────
 let _onUnauthorized = null;
@@ -189,7 +189,7 @@ function normalizeMetric(raw) {
 // ── useOtelTraces ───────────────────────────────────────────────────
 /** Fetch a list of traces / spans from the OTEL service. */
 export function useOtelTraces(options) {
-    const { token, baseUrl = coreStore.getState().configuration.otelUrl, serviceName, limit = 50, autoRefreshMs, } = options;
+    const { token, baseUrl = getOtelConsumeUrl(), serviceName, limit = 50, autoRefreshMs, } = options;
     const [traces, setTraces] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -246,7 +246,7 @@ export function useOtelTrace(options) {
 // ── useOtelLogs ─────────────────────────────────────────────────────
 /** Fetch log records from the OTEL service. */
 export function useOtelLogs(options) {
-    const { token, baseUrl = coreStore.getState().configuration.otelUrl, serviceName, severity, traceId, limit = 100, autoRefreshMs, } = options;
+    const { token, baseUrl = getOtelConsumeUrl(), serviceName, severity, traceId, limit = 100, autoRefreshMs, } = options;
     const [logs, setLogs] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -283,7 +283,7 @@ export function useOtelLogs(options) {
 // ── useOtelMetrics ──────────────────────────────────────────────────
 /** Fetch metrics from the OTEL service. */
 export function useOtelMetrics(options) {
-    const { token, baseUrl = coreStore.getState().configuration.otelUrl, serviceName, metricName, limit = 50, autoRefreshMs, } = options;
+    const { token, baseUrl = getOtelConsumeUrl(), serviceName, metricName, limit = 50, autoRefreshMs, } = options;
     const [metrics, setMetrics] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -318,7 +318,7 @@ export function useOtelMetrics(options) {
 // ── useOtelServices ─────────────────────────────────────────────────
 /** Fetch list of observed service names. */
 export function useOtelServices(options) {
-    const { token, baseUrl = coreStore.getState().configuration.otelUrl } = options;
+    const { token, baseUrl = getOtelConsumeUrl() } = options;
     const [services, setServices] = useState([]);
     const [loading, setLoading] = useState(true);
     useEffect(() => {
@@ -437,7 +437,7 @@ export function useOtelQuery(options) {
  * @returns `{ connected, error, close }` – reactive connection state.
  */
 export function useOtelWebSocket(options) {
-    const { baseUrl = coreStore.getState().configuration.otelUrl, token, userUid, autoReconnect = true, reconnectDelayMs = 3000, callbacks, } = options;
+    const { baseUrl = getOtelConsumeUrl(), token, userUid, autoReconnect = true, reconnectDelayMs = 3000, callbacks, } = options;
     const [connected, setConnected] = useState(false);
     const [error, setError] = useState(null);
     const wsRef = useRef(null);

package/lib/otel/views/OtelLive.js

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useCallback, useMemo, useEffect, useRef, } from 'react';
 import { Box, Text, Button, Label } from '@primer/react';
 import { GitBranchIcon, ClockIcon } from '@primer/octicons-react';
-import { coreStore } from '../../state/substates/CoreState.js';
+import { getOtelConsumeUrl } from '../../state/substates/CoreState.js';
 import { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelWebSocket, } from '../hooks/index.js';
 import { OtelSearchBar } from './OtelSearchBar.js';
 import { OtelTimelineRangeSlider } from './OtelTimelineRangeSlider.js';
@@ -51,7 +51,7 @@ function buildHistogram(timestamps, start, end, buckets) {
     }));
 }
 // ── OtelLive ────────────────────────────────────────────────────────
-export const OtelLive = ({ baseUrl = coreStore.getState().configuration.otelUrl, wsBaseUrl, token, autoRefreshMs = 5000, defaultSignal = 'traces', limit = 200, onSignalRef, }) => {
+export const OtelLive = ({ baseUrl = getOtelConsumeUrl(), wsBaseUrl, token, autoRefreshMs = 5000, defaultSignal = 'traces', limit = 200, onSignalRef, }) => {
     // ── state ──
     const [signal, setSignalState] = useState(() => {
         try {

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/state/substates/CoreState.d.ts

@@ -22,4 +22,15 @@ export type DatalayerCoreState = {
 export declare const coreStore: import("zustand").StoreApi<DatalayerCoreState>;
 export declare function useCoreStore(): DatalayerCoreState;
 export declare function useCoreStore<T>(selector: (state: DatalayerCoreState) => T): T;
+/**
+ * Resolve the OTEL base URL used to *consume* (read/query) telemetry.
+ *
+ * Prefers `otelInUrl` when set, otherwise falls back to `otelUrl`. This allows
+ * local development to fetch telemetry from a remote (e.g. production) OTEL
+ * service even when the local runtime exports telemetry to a different endpoint.
+ *
+ * Mirrors the `DATALAYER_OTEL_IN_URL` (consume) / `DATALAYER_OTEL_URL` (export)
+ * split on the backend/build side.
+ */
+export declare const getOtelConsumeUrl: () => string;
 export default useCoreStore;

package/lib/state/substates/CoreState.js

@@ -24,6 +24,10 @@ let initialConfiguration = {
     aiInferenceUrl: 'https://prod1.datalayer.run',
     mcpServersUrl: 'https://prod1.datalayer.run',
     otelUrl: 'https://prod1.datalayer.run',
+    // Defaults to prod so telemetry is consumed from the production OTEL service
+    // even when runtimes export elsewhere (see `getOtelConsumeUrl` and the
+    // `DATALAYER_OTEL_IN_URL` env var). Override to '' to consume from `otelUrl`.
+    otelInUrl: 'https://prod1.datalayer.run',
     growthUrl: 'https://prod1.datalayer.run',
     inboundsUrl: 'https://prod1.datalayer.run',
     successUrl: 'https://prod1.datalayer.run',
@@ -97,4 +101,18 @@ export const coreStore = createStore((set, get) => ({
 export function useCoreStore(selector) {
     return useStore(coreStore, selector);
 }
+/**
+ * Resolve the OTEL base URL used to *consume* (read/query) telemetry.
+ *
+ * Prefers `otelInUrl` when set, otherwise falls back to `otelUrl`. This allows
+ * local development to fetch telemetry from a remote (e.g. production) OTEL
+ * service even when the local runtime exports telemetry to a different endpoint.
+ *
+ * Mirrors the `DATALAYER_OTEL_IN_URL` (consume) / `DATALAYER_OTEL_URL` (export)
+ * split on the backend/build side.
+ */
+export const getOtelConsumeUrl = () => {
+    const cfg = coreStore.getState().configuration;
+    return cfg.otelInUrl || cfg.otelUrl;
+};
 export default useCoreStore;

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/package.json

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