@datalayer/core 1.2.17 → 1.2.19

package/lib/views/mcp/TraceTimeline.js

@@ -93,7 +93,8 @@ export const SERVICE_TONE = {
 };
 /** The bar colour of a span, by the service that emitted it and how it ended. */
 export const toneOf = (span) => {
-    if (span.status_code === 'STATUS_CODE_ERROR' || span.status_code === 'ERROR') {
+    if (span.status_code === 'STATUS_CODE_ERROR' ||
+        span.status_code === 'ERROR') {
         return 'danger.emphasis';
     }
     return SERVICE_TONE[span.service_name] ?? 'neutral.emphasis';
@@ -105,28 +106,12 @@ export const TraceTimeline = ({ tree, traceId, live = false, }) => {
                 ? 'No spans yet. They arrive as the services report them.'
                 : 'This run reported no spans. A run started before tracing reached the service that ran it has none.' }));
     }
-    return (_jsxs(Box, { sx: { display: 'grid', gap: 1, minWidth: 0 }, children: [traceId && (_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0, color: 'fg.muted' }, children: traceId })), rows.map(row => (_jsxs(Box, { sx: {
-                    display: 'grid',
-                    gridTemplateColumns: 'minmax(0, 14rem) 1fr auto',
-                    gap: 2,
-                    alignItems: 'center',
-                    minWidth: 0,
-                }, children: [_jsx(Box, { sx: { pl: row.depth, minWidth: 0 }, children: _jsx(Truncate, { title: `${row.span.span_name} · ${row.span.service_name}`, sx: { fontSize: 0, maxWidth: '100%' }, children: row.span.span_name }) }), _jsx(Box, { sx: {
-                            position: 'relative',
-                            height: '0.75rem',
-                            bg: 'canvas.subtle',
-                            borderRadius: 1,
-                            minWidth: 0,
-                        }, children: _jsx(Box, { sx: {
-                                position: 'absolute',
-                                top: 0,
-                                bottom: 0,
-                                left: `${row.left}%`,
-                                width: `${row.width}%`,
-                                bg: toneOf(row.span),
-                                borderRadius: 1,
-                            }, title: `${row.span.service_name} · ${durationLabel(row.span.duration_ms)}` }) }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontVariantNumeric: 'tabular-nums' }, children: durationLabel(row.span.duration_ms) })] }, row.span.span_id)))] }));
+    return (_jsxs(Box, { display: "grid", gap: 1, minWidth: 0, children: [traceId && (_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0, color: 'fg.muted' }, children: traceId })), rows.map(row => (_jsxs(Box, { display: "grid", gridTemplateColumns: "minmax(0, 14rem) 1fr auto", gap: 2, alignItems: "center", minWidth: 0, children: [_jsx(Box, { pl: row.depth, minWidth: 0, children: _jsx(Truncate, { title: `${row.span.span_name} · ${row.span.service_name}`, sx: { fontSize: 0, maxWidth: '100%' }, children: row.span.span_name }) }), _jsx(Box, { position: "relative", height: "0.75rem", bg: "canvas.subtle", borderRadius: 1, minWidth: 0, children: _jsx(Box, { position: "absolute", top: 0, bottom: 0, left: `${row.left}%`, width: `${row.width}%`, bg: toneOf(row.span), borderRadius: 1, title: `${row.span.service_name} · ${durationLabel(row.span.duration_ms)}` }) }), _jsx(Text, { sx: {
+                            fontSize: 0,
+                            color: 'fg.muted',
+                            fontVariantNumeric: 'tabular-nums',
+                        }, children: durationLabel(row.span.duration_ms) })] }, row.span.span_id)))] }));
 };
 /** The timeline under its own heading, as the Runs detail draws it. */
-export const TraceTimelineSection = (props) => (_jsxs(Box, { children: [_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', mb: 2 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1 }, children: "Where the time went" }), props.live && (_jsx(Label, { size: "small", variant: "success", children: "Live" }))] }), _jsx(TraceTimeline, { ...props })] }));
+export const TraceTimelineSection = (props) => (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", gap: 2, alignItems: "center", mb: 2, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1 }, children: "Where the time went" }), props.live && (_jsx(Label, { size: "small", variant: "success", children: "Live" }))] }), _jsx(TraceTimeline, { ...props })] }));
 export default TraceTimeline;

package/lib/views/otel/DashboardView.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { OtelLive } from '../../otel/index.js';
-export const DashboardView = ({ baseUrl = '', wsBaseUrl, token, autoRefreshMs = 5000, defaultSignal = 'traces', limit = 200, onSignalRef, }) => (_jsx(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(OtelLive, { baseUrl: baseUrl, wsBaseUrl: wsBaseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: defaultSignal, limit: limit, onSignalRef: onSignalRef }) }));
+export const DashboardView = ({ baseUrl = '', wsBaseUrl, token, autoRefreshMs = 5000, defaultSignal = 'traces', limit = 200, onSignalRef, }) => (_jsx(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: _jsx(OtelLive, { baseUrl: baseUrl, wsBaseUrl: wsBaseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: defaultSignal, limit: limit, onSignalRef: onSignalRef }) }));

package/lib/views/otel/LogsView.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { OtelLive } from '../../otel/index.js';
-export const LogsView = ({ baseUrl = '', token, autoRefreshMs = 5000, limit = 200, }) => (_jsx(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(OtelLive, { baseUrl: baseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: "logs", limit: limit }) }));
+export const LogsView = ({ baseUrl = '', token, autoRefreshMs = 5000, limit = 200, }) => (_jsx(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: _jsx(OtelLive, { baseUrl: baseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: "logs", limit: limit }) }));

package/lib/views/otel/MetricsView.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { OtelLive } from '../../otel/index.js';
-export const MetricsView = ({ baseUrl = '', token, autoRefreshMs = 5000, limit = 200, }) => (_jsx(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(OtelLive, { baseUrl: baseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: "metrics", limit: limit }) }));
+export const MetricsView = ({ baseUrl = '', token, autoRefreshMs = 5000, limit = 200, }) => (_jsx(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: _jsx(OtelLive, { baseUrl: baseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: "metrics", limit: limit }) }));

package/lib/views/otel/OtelHeader.js

@@ -11,7 +11,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * pass `onSignOut` to wire up your own logout action.
  */
 import { useState, useCallback, useRef } from 'react';
-import { Box, Text, Button, Dialog } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text, Button, Dialog } from '@primer/react';
 import { TelescopeIcon, SignOutIcon } from '@primer/octicons-react';
 import { UserBadge } from '../profile/index.js';
 export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOut, showGenerateButtons = true, showAccountControls = true, }) => {
@@ -58,48 +59,13 @@ export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOu
             setDialogOpen(true);
         }
     }, [baseUrl, token, onNavigate]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { as: "header", sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 3,
-                    px: 3,
-                    py: 2,
-                    bg: 'canvas.inset',
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    flexShrink: 0,
-                    // Allow overflow visible so the JWT popover can extend below the header.
-                    overflow: 'visible',
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(TelescopeIcon, { size: 20 }), _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Datalayer OTEL" })] }), _jsx(Box, { sx: { flex: 1 } }), showGenerateButtons && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: returnFocusRef, size: "small", variant: "primary", disabled: generating, onClick: () => generate('traces', 3), children: "+ Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('ai-traces', 3), children: "+ AI Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('logs', 10), children: "+ Logs" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('metrics', 5), children: "+ Metrics" })] })), trailing, showAccountControls && token && _jsx(UserBadge, { token: token }), showAccountControls && onSignOut && (_jsx(Button, { size: "small", variant: "invisible", onClick: onSignOut, sx: { color: 'fg.muted' }, leadingVisual: SignOutIcon, children: "Sign out" }))] }), dialogOpen && (_jsxs(Dialog, { title: dialogTitle, onClose: () => setDialogOpen(false), footerButtons: [
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { as: "header", display: "flex", alignItems: "center", gap: 3, px: 3, py: 2, bg: "canvas.inset", borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, 
+                // Allow overflow visible so the JWT popover can extend below the header.
+                overflow: "visible", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(TelescopeIcon, { size: 20 }), _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Datalayer OTEL" })] }), _jsx(Box, { flex: 1 }), showGenerateButtons && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: returnFocusRef, size: "small", variant: "primary", disabled: generating, onClick: () => generate('traces', 3), children: "+ Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('ai-traces', 3), children: "+ AI Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('logs', 10), children: "+ Logs" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('metrics', 5), children: "+ Metrics" })] })), trailing, showAccountControls && token && _jsx(UserBadge, { token: token }), showAccountControls && onSignOut && (_jsx(Button, { size: "small", variant: "invisible", onClick: onSignOut, sx: { color: 'fg.muted' }, leadingVisual: SignOutIcon, children: "Sign out" }))] }), dialogOpen && (_jsxs(Dialog, { title: dialogTitle, onClose: () => setDialogOpen(false), footerButtons: [
                     {
                         content: 'Close',
                         onClick: () => setDialogOpen(false),
                         buttonType: 'default',
                     },
-                ], children: [_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1, color: 'fg.muted' }, children: "Request" }), _jsx(Box, { as: "pre", sx: {
-                                    fontFamily: 'mono',
-                                    fontSize: 1,
-                                    p: 2,
-                                    mt: 1,
-                                    bg: 'canvas.inset',
-                                    borderRadius: 2,
-                                    overflow: 'auto',
-                                    color: 'fg.default',
-                                    whiteSpace: 'pre-wrap',
-                                    wordBreak: 'break-all',
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: dialogRequest })] }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1, color: 'fg.muted' }, children: "Response" }), _jsx(Box, { as: "pre", sx: {
-                                    fontFamily: 'mono',
-                                    fontSize: 1,
-                                    p: 2,
-                                    mt: 1,
-                                    bg: 'canvas.subtle',
-                                    borderRadius: 2,
-                                    overflow: 'auto',
-                                    maxHeight: 300,
-                                    color: dialogVariant === 'error' ? 'danger.fg' : 'fg.default',
-                                    whiteSpace: 'pre-wrap',
-                                    wordBreak: 'break-all',
-                                }, children: dialogBody })] })] }))] }));
+                ], children: [_jsxs(Box, { mb: 2, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1, color: 'fg.muted' }, children: "Request" }), _jsx(Box, { as: "pre", fontFamily: "mono", fontSize: 1, p: 2, mt: 1, bg: "canvas.inset", borderRadius: 2, overflow: "auto", color: "fg.default", whiteSpace: "pre-wrap", wordBreak: "break-all", border: "1px solid", borderColor: "border.default", children: dialogRequest })] }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1, color: 'fg.muted' }, children: "Response" }), _jsx(Box, { as: "pre", fontFamily: "mono", fontSize: 1, p: 2, mt: 1, bg: "canvas.subtle", borderRadius: 2, overflow: "auto", maxHeight: 300, color: dialogVariant === 'error' ? 'danger.fg' : 'fg.default', whiteSpace: "pre-wrap", wordBreak: "break-all", children: dialogBody })] })] }))] }));
 };

package/lib/views/otel/SqlView.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { OtelSqlView } from '../../otel/index.js';
-export const SqlView = ({ baseUrl = '', token }) => (_jsx(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(OtelSqlView, { baseUrl: baseUrl, token: token }) }));
+export const SqlView = ({ baseUrl = '', token }) => (_jsx(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: _jsx(OtelSqlView, { baseUrl: baseUrl, token: token }) }));

package/lib/views/otel/SystemView.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { OtelSystemView } from '../../otel/index.js';
-export const SystemView = ({ baseUrl = '', token, }) => (_jsx(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(OtelSystemView, { baseUrl: baseUrl, token: token }) }));
+export const SystemView = ({ baseUrl = '', token, }) => (_jsx(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: _jsx(OtelSystemView, { baseUrl: baseUrl, token: token }) }));

package/lib/views/otel/TracesView.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { OtelLive } from '../../otel/index.js';
-export const TracesView = ({ baseUrl = '', token, autoRefreshMs = 5000, limit = 200, }) => (_jsx(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(OtelLive, { baseUrl: baseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: "traces", limit: limit }) }));
+export const TracesView = ({ baseUrl = '', token, autoRefreshMs = 5000, limit = 200, }) => (_jsx(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: _jsx(OtelLive, { baseUrl: baseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: "traces", limit: limit }) }));

package/lib/views/profile/UserBadge.js

@@ -15,7 +15,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @module views/profile
  */
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 import { parseJwtPayload, getDatalayerJwtUser, getDatalayerDisplayName, } from '../../utils/Jwt.js';
 import { getRelativeTime } from '../../utils/Date.js';
 // ── Component ─────────────────────────────────────────────────────
@@ -64,7 +65,7 @@ export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, ex
         expiredNotifiedForTokenRef.current = token;
         onTokenExpired();
     }, [expired, onTokenExpired, open, token]);
-    return (_jsxs(Box, { sx: { position: 'relative' }, onMouseEnter: handleEnter, onMouseLeave: handleLeave, children: [_jsx(Text, { sx: {
+    return (_jsxs(Box, { position: "relative", onMouseEnter: handleEnter, onMouseLeave: handleLeave, children: [_jsx(Text, { sx: {
                     fontSize: 1,
                     color: triggerColor,
                     cursor: 'default',
@@ -72,63 +73,7 @@ export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, ex
                     borderColor: 'border.muted',
                     pb: '1px',
                     userSelect: 'none',
-                }, children: displayName }), open && claims && (_jsxs(Box, { sx: {
-                    position: 'absolute',
-                    top: 'calc(100% + 4px)',
-                    right: 0,
-                    zIndex: 100,
-                    width: '400px',
-                    bg: 'canvas.overlay',
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    boxShadow: 'shadow.large',
-                    overflow: 'hidden',
-                }, children: [_jsxs(Box, { sx: {
-                            px: 3,
-                            py: 2,
-                            bg: 'canvas.inset',
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            gap: 2,
-                        }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: popoverDisplayName || 'User' }), variant === 'small' && showExpandToggle && (_jsx(Box, { as: "button", type: "button", onClick: () => setExpanded(v => !v), "aria-label": expanded ? 'Hide full JWT claims' : 'Show full JWT claims', "aria-expanded": expanded, title: expanded ? 'Hide full JWT claims' : 'Show full JWT claims', sx: {
-                                    appearance: 'none',
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 1,
-                                    bg: 'canvas.default',
-                                    color: 'fg.default',
-                                    fontSize: 1,
-                                    lineHeight: 1,
-                                    width: '20px',
-                                    height: '20px',
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    cursor: 'pointer',
-                                    p: 0,
-                                    '&:hover': {
-                                        bg: 'canvas.subtle',
-                                    },
-                                }, children: expanded ? '−' : '+' }))] }), claims.user && (_jsx(Box, { sx: {
-                            px: 3,
-                            py: 2,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.muted',
-                        }, children: _jsxs(Box, { sx: {
-                                display: 'grid',
-                                gridTemplateColumns: '90px 1fr',
-                                gap: 1,
-                                fontSize: 0,
-                            }, children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.firstName }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.lastName }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Display name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: getDatalayerDisplayName(claims.user, claims.user.handle) }), claims.user.email && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.email })] })), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.handle }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontFamily: 'mono', wordBreak: 'break-all' }, children: claims.user.uid }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Issued" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: new Date(claims.iat * 1000).toISOString() }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Expires" }), _jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        gap: 2,
-                                        minWidth: 0,
-                                    }, children: [_jsx(Text, { sx: {
+                }, children: displayName }), open && claims && (_jsxs(Box, { position: "absolute", top: "calc(100% + 4px)", right: 0, zIndex: 100, width: "400px", bg: "canvas.overlay", border: "1px solid", borderColor: "border.default", borderRadius: 2, boxShadow: "shadow.large", overflow: "hidden", children: [_jsxs(Box, { px: 3, py: 2, bg: "canvas.inset", borderBottom: "1px solid", borderColor: "border.default", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: popoverDisplayName || 'User' }), variant === 'small' && showExpandToggle && (_jsx(Box, { as: "button", type: "button", onClick: () => setExpanded(v => !v), "aria-label": expanded ? 'Hide full JWT claims' : 'Show full JWT claims', "aria-expanded": expanded, title: expanded ? 'Hide full JWT claims' : 'Show full JWT claims', appearance: "none", border: "1px solid", borderColor: "border.default", borderRadius: 1, bg: "canvas.default", color: "fg.default", fontSize: 1, lineHeight: 1, width: "20px", height: "20px", display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", p: 0, hover: { bg: 'canvas.subtle' }, children: expanded ? '−' : '+' }))] }), claims.user && (_jsx(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.muted", children: _jsxs(Box, { display: "grid", gridTemplateColumns: "90px 1fr", gap: 1, fontSize: 0, children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.firstName }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.lastName }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Display name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: getDatalayerDisplayName(claims.user, claims.user.handle) }), claims.user.email && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.email })] })), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.handle }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontFamily: 'mono', wordBreak: 'break-all' }, children: claims.user.uid }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Issued" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: new Date(claims.iat * 1000).toISOString() }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Expires" }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, minWidth: 0, children: [_jsx(Text, { sx: {
                                                 fontFamily: 'mono',
                                                 overflow: 'hidden',
                                                 textOverflow: 'ellipsis',
@@ -153,44 +98,7 @@ export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, ex
                                                 : warning
                                                     ? 'attention.muted'
                                                     : 'success.muted';
-                                            return (_jsx(Box, { sx: {
-                                                    flexShrink: 0,
-                                                    fontSize: 0,
-                                                    px: 1,
-                                                    py: '1px',
-                                                    bg,
-                                                    color: fg,
-                                                    borderRadius: 1,
-                                                    border: '1px solid',
-                                                    borderColor: border,
-                                                    whiteSpace: 'nowrap',
-                                                }, children: getRelativeTime(expDate) }));
-                                        })()] })] }) })), (claims.user?.roles ?? claims.roles ?? []).length > 0 && (_jsxs(Box, { sx: {
-                            px: 3,
-                            py: 2,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.muted',
-                        }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 1 }, children: "Roles" }), _jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1 }, children: (claims.user?.roles ?? claims.roles ?? []).map(r => (_jsx(Box, { sx: {
-                                        fontSize: 0,
-                                        fontFamily: 'mono',
-                                        px: 1,
-                                        py: '1px',
-                                        bg: 'accent.subtle',
-                                        color: 'accent.fg',
-                                        borderRadius: 1,
-                                        border: '1px solid',
-                                        borderColor: 'accent.muted',
-                                    }, children: r }, r))) })] })), (variant === 'full' || expanded) && (_jsx(Box, { as: "pre", sx: {
-                            m: 0,
-                            px: 3,
-                            py: 2,
-                            fontFamily: 'mono',
-                            fontSize: 0,
-                            color: 'fg.default',
-                            bg: 'canvas.inset',
-                            overflow: 'auto',
-                            maxHeight: '220px',
-                            whiteSpace: 'pre',
-                        }, children: JSON.stringify(claims, null, 2) }))] }))] }));
+                                            return (_jsx(Box, { flexShrink: 0, fontSize: 0, px: 1, py: "1px", bg: bg, color: fg, borderRadius: 1, border: "1px solid", borderColor: border, whiteSpace: "nowrap", children: getRelativeTime(expDate) }));
+                                        })()] })] }) })), (claims.user?.roles ?? claims.roles ?? []).length > 0 && (_jsxs(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.muted", children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 1 }, children: "Roles" }), _jsx(Box, { display: "flex", flexWrap: "wrap", gap: 1, children: (claims.user?.roles ?? claims.roles ?? []).map(r => (_jsx(Box, { fontSize: 0, fontFamily: "mono", px: 1, py: "1px", bg: "accent.subtle", color: "accent.fg", borderRadius: 1, border: "1px solid", borderColor: "accent.muted", children: r }, r))) })] })), (variant === 'full' || expanded) && (_jsx(Box, { as: "pre", m: 0, px: 3, py: 2, fontFamily: "mono", fontSize: 0, color: "fg.default", bg: "canvas.inset", overflow: "auto", maxHeight: "220px", whiteSpace: "pre", children: JSON.stringify(claims, null, 2) }))] }))] }));
 };
 export default UserBadge;

package/lib/views/secrets/SecretEdit.js

@@ -131,20 +131,11 @@ export const SecretEdit = ({ secretsListRoute = '/settings/secrets', } = {}) =>
     };
     return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(Heading, { sx: { fontSize: 3 }, children: "Secret" }) }), _jsxs(Box, { display: "flex", children: [_jsxs(Box, { children: [_jsx(BoringAvatar, { displayName: secret?.name, size: 100, style: { paddingRight: 10 } }), _jsx(Text, { as: "h2", sx: { paddingTop: 3 }, children: secret?.name }), _jsx(Box, { mt: 3, children: _jsx(Label, { size: "large", children: secret?.variant }) })] }), _jsxs(Box, { ml: 10, children: [_jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: secretNameChanged }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name must have more than 2 characters." }))] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: secretDescriptionChanged, rows: 5 }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Value" }), _jsx(TextInput, { placeholder: "Value", monospace: true, size: "large", contrast: !passwordVisible, disabled: !passwordVisible, onChange: secretValueChanged, type: passwordVisible ? 'text' : 'password', value: formValues.value, trailingAction: _jsx(TextInput.Action, { onClick: () => {
                                                         setPasswordVisible(!passwordVisible);
-                                                    }, icon: passwordVisible ? EyeClosedIcon : EyeIcon, "aria-label": passwordVisible ? 'Hide secret' : 'Reveal secret', sx: { color: 'var(--fgColor-muted)' } }), sx: { overflow: 'visible' } }), validationResult.value === false && (_jsx(FormControl.Validation, { variant: "error", children: "Value must have more than 1 and less than 4096 characters." }))] }), _jsx(Box, { sx: { marginTop: 3 }, children: _jsx(Button, { variant: "primary", disabled: !validationResult.name || !validationResult.description, onClick: submitUpdate, children: "Update secret" }) })] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Heading, { as: "h2", sx: {
+                                                    }, icon: passwordVisible ? EyeClosedIcon : EyeIcon, "aria-label": passwordVisible ? 'Hide secret' : 'Reveal secret', sx: { color: 'var(--fgColor-muted)' } }), sx: { overflow: 'visible' } }), validationResult.value === false && (_jsx(FormControl.Validation, { variant: "error", children: "Value must have more than 1 and less than 4096 characters." }))] }), _jsx(Box, { marginTop: 3, children: _jsx(Button, { variant: "primary", disabled: !validationResult.name || !validationResult.description, onClick: submitUpdate, children: "Update secret" }) })] }), _jsxs(Box, { marginTop: 3, children: [_jsx(Heading, { as: "h2", sx: {
                                             fontSize: 4,
                                             fontWeight: 'normal',
                                             color: 'danger.fg',
                                             mb: 2,
-                                        }, children: "Danger zone" }), _jsxs(Box, { sx: {
-                                            border: '1px solid',
-                                            borderColor: 'danger.emphasis',
-                                            borderRadius: 2,
-                                            p: 3,
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                            gap: 3,
-                                        }, children: [_jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'danger.fg' }, children: "Confirm the secret name to delete" }), _jsx(FormControl, { children: _jsx(TextInput, { block: true, value: formValues.nameConfirm, onChange: secretNameConfirmChanged }) }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "This operation is not reversible." })] }), _jsx(Button, { variant: "danger", disabled: !validationResult.nameConfirm, onClick: submitDelete, children: "Delete secret" })] })] })] })] })] }));
+                                        }, children: "Danger zone" }), _jsxs(Box, { border: "1px solid", borderColor: "danger.emphasis", borderRadius: 2, p: 3, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 3, children: [_jsxs(Box, { display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'danger.fg' }, children: "Confirm the secret name to delete" }), _jsx(FormControl, { children: _jsx(TextInput, { block: true, value: formValues.nameConfirm, onChange: secretNameConfirmChanged }) }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "This operation is not reversible." })] }), _jsx(Button, { variant: "danger", disabled: !validationResult.nameConfirm, onClick: submitDelete, children: "Delete secret" })] })] })] })] })] }));
 };
 export default SecretEdit;

package/lib/views/secrets/SecretNew.js

@@ -93,7 +93,7 @@ export const SecretNew = ({ secretsListRoute = '/settings/secrets', } = {}) => {
             },
         });
     };
-    return (_jsxs(Box, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New Secret" }) }) }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Secret type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: secretVariantChanged, children: [_jsx(Select.Option, { value: "generic", children: "Generic" }), _jsx(Select.Option, { value: "password", children: "Password" }), _jsx(Select.Option, { value: "key", children: "Key" }), _jsx(Select.Option, { value: "token", children: "Token" })] }), _jsx(FormControl.Caption, { children: "Pick the most appropriate secret type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: secretNameChanged, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The secret name is a short name that identifies in a unique way your secret." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: secretDescriptionChanged, rows: 3 }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Value" }), _jsx(Textarea, { block: true, value: formValues.value, onChange: secretValueChanged, rows: 5 }), validationResult.value === false && (_jsx(FormControl.Validation, { variant: "error", children: "Value must have more than 1 and less than 4096 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.value ||
+    return (_jsxs(Box, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New Secret" }) }) }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 3, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Secret type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: secretVariantChanged, children: [_jsx(Select.Option, { value: "generic", children: "Generic" }), _jsx(Select.Option, { value: "password", children: "Password" }), _jsx(Select.Option, { value: "key", children: "Key" }), _jsx(Select.Option, { value: "token", children: "Token" })] }), _jsx(FormControl.Caption, { children: "Pick the most appropriate secret type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: secretNameChanged, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The secret name is a short name that identifies in a unique way your secret." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: secretDescriptionChanged, rows: 3 }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Value" }), _jsx(Textarea, { block: true, value: formValues.value, onChange: secretValueChanged, rows: 5 }), validationResult.value === false && (_jsx(FormControl.Validation, { variant: "error", children: "Value must have more than 1 and less than 4096 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.value ||
                                     !validationResult.name ||
                                     !validationResult.description, sx: { marginTop: 2 }, onClick: e => {
                                     e.preventDefault();

package/package.json

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