@datalayer/core 1.0.3 → 1.0.11

package/lib/views/iam/SignInSimple.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
@@ -12,16 +12,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @module views/signin
  */
-import { useState, useCallback } from 'react';
-import { Box, Button, FormControl, Heading, Text, TextInput, } from '@primer/react';
-import { EyeIcon, EyeClosedIcon, TelescopeIcon } from '@primer/octicons-react';
+import { useState, useCallback, useRef } from 'react';
+import { Box, Button, FormControl, Heading, Text, Textarea, TextInput, } from '@primer/react';
+import { Dialog } from '@primer/react/experimental';
+import { EyeIcon, EyeClosedIcon, KeyIcon, TelescopeIcon, } from '@primer/octicons-react';
 // ── Component ────────────────────────────────────────────────────────
-export const SignInSimple = ({ onSignIn, loginUrl = '/api/iam/v1/login', title = 'Datalayer OTEL', description = 'Sign in to access the observability dashboard.', leadingIcon = _jsx(TelescopeIcon, { size: 24 }), }) => {
+export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl = '/api/iam/v1/login', title = 'Datalayer OTEL', description = 'Sign in to access the observability dashboard.', leadingIcon = _jsx(TelescopeIcon, { size: 24 }), }) => {
     const [handle, setHandle] = useState('');
     const [password, setPassword] = useState('');
     const [showPassword, setShowPassword] = useState(false);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
+    // API Key dialog state
+    const [showApiKeyDialog, setShowApiKeyDialog] = useState(false);
+    const [apiKey, setApiKey] = useState('');
+    const apiKeyRef = useRef(null);
     const submit = useCallback(async () => {
         if (!handle || !password || loading)
             return;
@@ -75,6 +80,34 @@ export const SignInSimple = ({ onSignIn, loginUrl = '/api/iam/v1/login', title =
                         gap: 2,
                         mb: 4,
                         justifyContent: 'center',
-                    }, children: [leadingIcon, _jsx(Heading, { sx: { fontSize: 3 }, children: title })] }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', mb: 3, textAlign: 'center' }, children: description }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Username" }), _jsx(TextInput, { autoFocus: true, block: true, placeholder: "Your username", value: handle, onChange: e => setHandle(e.target.value), onKeyDown: handleKeyDown })] }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Password" }), _jsx(TextInput, { block: true, placeholder: "Your password", type: showPassword ? 'text' : 'password', value: password, onChange: e => setPassword(e.target.value), onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => setShowPassword(!showPassword), icon: showPassword ? EyeClosedIcon : EyeIcon, "aria-label": showPassword ? 'Hide password' : 'Show password', sx: { color: 'var(--fgColor-muted)' } }) })] }), error && (_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, mb: 3, display: 'block' }, children: error })), _jsx(Button, { variant: "primary", block: true, disabled: loading || !handle || !password, onClick: submit, children: loading ? 'Signing in…' : 'Sign in' })] }) }));
+                    }, children: [leadingIcon, _jsx(Heading, { sx: { fontSize: 3 }, children: title })] }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', mb: 3, textAlign: 'center' }, children: description }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Username" }), _jsx(TextInput, { autoFocus: true, block: true, placeholder: "Your username", value: handle, onChange: e => setHandle(e.target.value), onKeyDown: handleKeyDown })] }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Password" }), _jsx(TextInput, { block: true, placeholder: "Your password", type: showPassword ? 'text' : 'password', value: password, onChange: e => setPassword(e.target.value), onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => setShowPassword(!showPassword), icon: showPassword ? EyeClosedIcon : EyeIcon, "aria-label": showPassword ? 'Hide password' : 'Show password', sx: { color: 'var(--fgColor-muted)' } }) })] }), error && (_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, mb: 3, display: 'block' }, children: error })), _jsx(Button, { variant: "primary", block: true, disabled: loading || !handle || !password, onClick: submit, children: loading ? 'Signing in…' : 'Sign in' }), onApiKeySignIn && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 2,
+                                my: 3,
+                            }, children: [_jsx(Box, { sx: { flex: 1, height: '1px', bg: 'border.default' } }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "or" }), _jsx(Box, { sx: { flex: 1, height: '1px', bg: 'border.default' } })] }), _jsx(Button, { block: true, leadingVisual: KeyIcon, onClick: () => setShowApiKeyDialog(true), children: "Sign in with API Key" }), showApiKeyDialog && (_jsx(Dialog, { title: "Enter your API Key", onClose: () => {
+                                setShowApiKeyDialog(false);
+                                setApiKey('');
+                            }, initialFocusRef: apiKeyRef, footerButtons: [
+                                {
+                                    buttonType: 'default',
+                                    onClick: () => {
+                                        setShowApiKeyDialog(false);
+                                        setApiKey('');
+                                    },
+                                    content: 'Cancel',
+                                },
+                                {
+                                    buttonType: 'primary',
+                                    onClick: () => {
+                                        if (apiKey.trim()) {
+                                            onApiKeySignIn(apiKey.trim());
+                                            setShowApiKeyDialog(false);
+                                            setApiKey('');
+                                        }
+                                    },
+                                    content: 'Authenticate',
+                                },
+                            ], children: _jsx(Box, { as: "form", children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "API Key" }), _jsx(Textarea, { block: true, required: true, autoFocus: true, placeholder: "Paste your API key here", value: apiKey, onInput: (e) => setApiKey(e.target.value), ref: apiKeyRef })] }) }) }))] }))] }) }));
 };
 export default SignInSimple;

package/lib/views/iam-tokens/IAMTokenEdit.d.ts

@@ -1,2 +1,6 @@
-export declare const IAMTokenEdit: () => import("react/jsx-runtime").JSX.Element;
+export type IAMTokenEditProps = {
+    /** Route to navigate after delete. Defaults to '/settings/iam/tokens'. */
+    tokensListRoute?: string;
+};
+export declare const IAMTokenEdit: ({ tokensListRoute, }?: IAMTokenEditProps) => import("react/jsx-runtime").JSX.Element;
 export default IAMTokenEdit;

package/lib/views/iam-tokens/IAMTokenEdit.js

@@ -10,7 +10,7 @@ import { Box } from '@datalayer/primer-addons';
 import { BoringAvatar } from '../../components/avatars';
 import { useCache, useNavigate, useToast } from '../../hooks';
 import { useRunStore } from '../../state';
-export const IAMTokenEdit = () => {
+export const IAMTokenEdit = ({ tokensListRoute = '/settings/iam/tokens', } = {}) => {
     const { tokenId } = useParams();
     const runStore = useRunStore();
     const navigate = useNavigate();
@@ -100,7 +100,7 @@ export const IAMTokenEdit = () => {
                     enqueueToast('The token is successfully deleted.', {
                         variant: 'success',
                     });
-                    navigate('/settings/iam/tokens');
+                    navigate(tokensListRoute);
                 }
                 else {
                     enqueueToast(resp.message || 'Failed to delete token.', {
@@ -116,7 +116,7 @@ export const IAMTokenEdit = () => {
             },
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(Heading, { sx: { fontSize: 3 }, children: "IAM Token" }) }), _jsxs(Box, { display: "flex", children: [_jsxs(Box, { children: [_jsx(BoringAvatar, { displayName: token?.name, size: 100, style: { paddingRight: 10 } }), _jsx(Text, { as: "h2", sx: { paddingTop: 3 }, children: token?.name }), _jsx(Box, { mt: 3, children: _jsx(Label, { size: "large", children: token?.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: nameNameChange }), 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: nameDescriptionChange, 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: "Expiration date" }), _jsx(TextInput, { block: true, value: token?.expirationDate.toLocaleDateString(), onChange: nameNameChange, disabled: true })] }), _jsx(Button, { variant: "primary", disabled: !validationResult.name || !validationResult.description, sx: { marginTop: 3 }, onClick: nameSubmit, children: "Update token" })] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Heading, { as: "h2", sx: {
+    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(Heading, { sx: { fontSize: 3 }, children: "API Key" }) }), _jsxs(Box, { display: "flex", children: [_jsxs(Box, { children: [_jsx(BoringAvatar, { displayName: token?.name, size: 100, style: { paddingRight: 10 } }), _jsx(Text, { as: "h2", sx: { paddingTop: 3 }, children: token?.name }), _jsx(Box, { mt: 3, children: _jsx(Label, { size: "large", children: token?.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: nameNameChange }), 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: nameDescriptionChange, 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: "Expiration date" }), _jsx(TextInput, { block: true, value: token?.expirationDate.toLocaleDateString(), onChange: nameNameChange, disabled: true })] }), _jsx(Button, { variant: "primary", disabled: !validationResult.name || !validationResult.description, sx: { marginTop: 3 }, onClick: nameSubmit, children: "Update token" })] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Heading, { as: "h2", sx: {
                                             fontSize: 4,
                                             fontWeight: 'normal',
                                             color: 'danger.fg',

package/lib/views/iam-tokens/IAMTokenNew.js

@@ -95,7 +95,7 @@ export const IAMTokenNew = ({ tokensListRoute = '/settings/iam/tokens', } = {})
             },
         });
     };
-    return (_jsx(Box, { children: showToken ? (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "Your Token is created" }) }) }), _jsx(Box, { children: _jsx(Text, { children: "Take note of the Token value, you won't be able to see it after." }) }), _jsx(Box, { children: _jsxs(Text, { children: ["Name: ", token?.name] }) }), _jsx(Box, { children: _jsxs(Text, { children: ["Description: ", token?.description] }) }), _jsx(Box, { children: _jsxs(Text, { children: ["Expiration date: ", token?.expirationDate.toISOString()] }) }), _jsxs(Box, { children: [_jsx(Text, { mb: 2, children: "Value: " }), _jsxs(Box, { display: "flex", sx: { alignItems: 'center', gap: 2 }, children: [_jsx(Text, { as: "code", sx: {
+    return (_jsx(Box, { children: showToken ? (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "Your API Key is created" }) }) }), _jsx(Box, { children: _jsx(Text, { children: "Take note of the API Key value, you will not be able to see it after." }) }), _jsx(Box, { children: _jsxs(Text, { children: ["Name: ", token?.name] }) }), _jsx(Box, { children: _jsxs(Text, { children: ["Description: ", token?.description] }) }), _jsx(Box, { children: _jsxs(Text, { children: ["Expiration date: ", token?.expirationDate.toISOString()] }) }), _jsxs(Box, { children: [_jsx(Text, { mb: 2, children: "Value: " }), _jsxs(Box, { display: "flex", sx: { alignItems: 'center', gap: 2 }, children: [_jsx(Text, { as: "code", sx: {
                                         color: 'fg.onEmphasis',
                                         bg: 'neutral.emphasis',
                                         p: 2,
@@ -108,7 +108,7 @@ export const IAMTokenNew = ({ tokensListRoute = '/settings/iam/tokens', } = {})
                                                 variant: 'success',
                                             });
                                         }
-                                    } })] })] }), _jsx(Box, { mt: 3, children: _jsx(Button, { onClick: e => navigate(tokensListRoute, e), children: "List my Tokens" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New IAM Token" }) }) }), _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: "Token type" }), _jsx(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: _jsx(Select.Option, { value: "user_token", children: "User Token" }) }), _jsx(FormControl.Caption, { children: "Pick the most appropriate token type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: valueNameChange, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The token name is a short name that identifies in a unique way your token." }), 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: "Expiration day" }), _jsx(Calendar, { showGoToToday: true, onSelectDate: expirationDateChange, value: formValues.expirationDate, strings: defaultCalendarStrings }), validationResult.expirationDate !== true ? (_jsx(FormControl.Validation, { variant: "error", children: "Pick an expiration date in the future." })) : (_jsxs(FormControl.Validation, { variant: "success", children: ["Expiration date:", ' ', formValues.expirationDate?.toLocaleDateString(), "."] }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: valueDescriptionChange }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.name ||
+                                    } })] })] }), _jsx(Box, { mt: 3, children: _jsx(Button, { onClick: e => navigate(tokensListRoute, e), children: "List my API Keys" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New API Key" }) }) }), _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: "Token type" }), _jsx(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: _jsx(Select.Option, { value: "user_token", children: "User Token" }) }), _jsx(FormControl.Caption, { children: "Pick the most appropriate token type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: valueNameChange, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The token name is a short name that identifies in a unique way your token." }), 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: "Expiration day" }), _jsx(Calendar, { showGoToToday: true, onSelectDate: expirationDateChange, value: formValues.expirationDate, strings: defaultCalendarStrings }), validationResult.expirationDate !== true ? (_jsx(FormControl.Validation, { variant: "error", children: "Pick an expiration date in the future." })) : (_jsxs(FormControl.Validation, { variant: "success", children: ["Expiration date:", ' ', formValues.expirationDate?.toLocaleDateString(), "."] }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: valueDescriptionChange }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.name ||
                                         !validationResult.description ||
                                         !validationResult.expirationDate, sx: { marginTop: 2 }, onClick: e => {
                                         e.preventDefault();

package/lib/views/iam-tokens/IAMTokens.d.ts

@@ -1,8 +1,10 @@
 export type IAMTokensProps = {
-    /** Route to navigate when clicking "New IAM token" button. Defaults to '/new/token'. */
+    /** Route to navigate when clicking "New API Key" button. Defaults to '/new/token'. */
     newTokenRoute?: string;
     /** Base route for the tokens list (used for edit navigation). Defaults to current relative path. */
     tokensListRoute?: string;
+    /** Whether to display view titles/headings. Defaults to true. */
+    showTitle?: boolean;
 };
-export declare const IAMTokens: ({ newTokenRoute, tokensListRoute, }?: IAMTokensProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IAMTokens: ({ newTokenRoute, tokensListRoute, showTitle, }?: IAMTokensProps) => import("react/jsx-runtime").JSX.Element;
 export default IAMTokens;

package/lib/views/iam-tokens/IAMTokens.js

@@ -10,7 +10,7 @@ import { Box } from '@datalayer/primer-addons';
 import { EditIcon } from '@datalayer/icons-react';
 import { TrashIcon } from '@primer/octicons-react';
 import { useCache, useNavigate, useToast } from '../../hooks';
-const TokensTable = ({ tokensListRoute }) => {
+const TokensTable = ({ tokensListRoute, showTitle = true, }) => {
     const { useTokens, useDeleteToken } = useCache();
     const { enqueueToast } = useToast();
     const getTokensQuery = useTokens();
@@ -46,7 +46,7 @@ const TokensTable = ({ tokensListRoute }) => {
             onSettled: () => setDeletingToken(null),
         });
     };
-    return tokens.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "IAM Tokens" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No IAM Tokens found." }) })] })) : (_jsxs(_Fragment, { children: [_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "tokens", children: "IAM Tokens" }), _jsx(Table.Subtitle, { as: "p", id: "tokens-subtitle", children: "Your tokens." }), _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: tokens, columns: [
+    return tokens.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [showTitle && _jsx(Blankslate.Heading, { children: "API Keys" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No API Keys found." }) })] })) : (_jsxs(_Fragment, { children: [_jsxs(Table.Container, { children: [showTitle && (_jsxs(_Fragment, { children: [_jsx(Table.Title, { as: "h2", id: "tokens", children: "API Keys" }), _jsx(Table.Subtitle, { as: "p", id: "tokens-subtitle", children: "Your tokens." })] })), _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: tokens, columns: [
                             {
                                 header: 'Type',
                                 field: 'variant',
@@ -80,8 +80,8 @@ const TokensTable = ({ tokensListRoute }) => {
                         setDeletingToken(null);
                 }, confirmButtonContent: "Delete", confirmButtonType: "danger", children: ["Are you sure you want to delete the token", ' ', _jsx("strong", { children: deletingToken.name }), "? This action cannot be undone."] }))] }));
 };
-export const IAMTokens = ({ newTokenRoute = '/new/token', tokensListRoute, } = {}) => {
+export const IAMTokens = ({ newTokenRoute = '/new/token', tokensListRoute, showTitle = true, } = {}) => {
     const navigate = useNavigate();
-    return (_jsxs(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "IAM Tokens" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate(newTokenRoute, e), children: "New IAM token" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(TokensTable, { tokensListRoute: tokensListRoute }) }) })] }));
+    return (_jsxs(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [showTitle && (_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "API Keys" }) })), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate(newTokenRoute, e), children: "New API Key" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(TokensTable, { tokensListRoute: tokensListRoute, showTitle: showTitle }) }) })] }));
 };
 export default IAMTokens;

package/lib/views/index.d.ts

@@ -1,2 +1,3 @@
 export * from './iam';
 export * from './profile';
+export * from './otel';

package/lib/views/index.js

@@ -4,3 +4,4 @@
  */
 export * from './iam';
 export * from './profile';
+export * from './otel';

package/lib/views/otel/DashboardView.d.ts

@@ -0,0 +1,16 @@
+/**
+ * DashboardView – Full observability dashboard wrapping OtelLive.
+ */
+import React from 'react';
+export interface DashboardViewProps {
+    baseUrl?: string;
+    /** WebSocket base URL – passed directly to OtelLive to bypass any Vite proxy. */
+    wsBaseUrl?: string;
+    token?: string;
+    autoRefreshMs?: number;
+    defaultSignal?: 'traces' | 'logs' | 'metrics';
+    limit?: number;
+    /** Callback to receive the signal setter from OtelLive. */
+    onSignalRef?: (setter: (s: 'traces' | 'logs' | 'metrics') => void) => void;
+}
+export declare const DashboardView: React.FC<DashboardViewProps>;

package/lib/views/otel/DashboardView.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@primer/react';
+import { OtelLive } from '../../otel';
+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 }) }));

package/lib/views/otel/LogsView.d.ts

@@ -0,0 +1,12 @@
+/**
+ * LogsView – Standalone logs-only view.
+ * Renders OtelLive defaulting to the logs signal.
+ */
+import React from 'react';
+export interface LogsViewProps {
+    baseUrl?: string;
+    token?: string;
+    autoRefreshMs?: number;
+    limit?: number;
+}
+export declare const LogsView: React.FC<LogsViewProps>;

package/lib/views/otel/LogsView.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@primer/react';
+import { OtelLive } from '../../otel';
+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 }) }));

package/lib/views/otel/MetricsView.d.ts

@@ -0,0 +1,12 @@
+/**
+ * MetricsView – Standalone metrics-only view.
+ * Renders OtelLive defaulting to the metrics signal.
+ */
+import React from 'react';
+export interface MetricsViewProps {
+    baseUrl?: string;
+    token?: string;
+    autoRefreshMs?: number;
+    limit?: number;
+}
+export declare const MetricsView: React.FC<MetricsViewProps>;

package/lib/views/otel/MetricsView.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@primer/react';
+import { OtelLive } from '../../otel';
+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 }) }));

package/lib/views/otel/OtelHeader.d.ts

@@ -0,0 +1,33 @@
+/**
+ * OtelHeader – Top-level header bar with branding, signal generator
+ * buttons, and a result dialog for OTEL observability applications.
+ *
+ * This is a generic, reusable header. Authentication state is decoupled:
+ * pass `onSignOut` to wire up your own logout action.
+ */
+import React from 'react';
+export interface OtelHeaderProps {
+    /** Base URL for the generate API (e.g. '/api' or 'https://…'). Defaults to ''. */
+    baseUrl?: string;
+    /** JWT bearer token for authenticated requests. */
+    token?: string;
+    /** Optional extra controls rendered to the right of the generate buttons. */
+    trailing?: React.ReactNode;
+    /**
+     * Called before a generate request fires so a parent can navigate to
+     * the relevant signal view (e.g. 'logs', 'metrics').
+     */
+    onNavigate?: (signal: 'traces' | 'logs' | 'metrics') => void;
+    /**
+     * Optional sign-out handler. When provided a "Sign out" button is shown.
+     * Wire this to your auth store's clearAuth / signOut action.
+     */
+    onSignOut?: () => void;
+    /**
+     * Whether to show the "+ Traces / + Logs / + Metrics" generate buttons.
+     * Defaults to `true`. Pass `false` to hide them (e.g. in agent-runtime views
+     * where data is generated by agents, not manually).
+     */
+    showGenerateButtons?: boolean;
+}
+export declare const OtelHeader: React.FC<OtelHeaderProps>;

package/lib/views/otel/OtelHeader.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OtelHeader – Top-level header bar with branding, signal generator
+ * buttons, and a result dialog for OTEL observability applications.
+ *
+ * This is a generic, reusable header. Authentication state is decoupled:
+ * pass `onSignOut` to wire up your own logout action.
+ */
+import { useState, useCallback, useRef } from 'react';
+import { Box, Text, Button, Dialog } from '@primer/react';
+import { TelescopeIcon, SignOutIcon } from '@primer/octicons-react';
+import { UserBadge } from '../profile';
+export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOut, showGenerateButtons = true, }) => {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [dialogTitle, setDialogTitle] = useState('');
+    const [dialogRequest, setDialogRequest] = useState('');
+    const [dialogBody, setDialogBody] = useState('');
+    const [dialogVariant, setDialogVariant] = useState('success');
+    const [generating, setGenerating] = useState(false);
+    const returnFocusRef = useRef(null);
+    const generate = useCallback(async (kind, count) => {
+        if (onNavigate) {
+            const signalMap = {
+                traces: 'traces',
+                'ai-traces': 'traces',
+                logs: 'logs',
+                metrics: 'metrics',
+            };
+            onNavigate(signalMap[kind]);
+        }
+        setGenerating(true);
+        const url = `${baseUrl}/api/generate/${kind}?count=${count}`;
+        setDialogRequest(`POST ${url}`);
+        try {
+            const headers = {};
+            if (token) {
+                headers['Authorization'] = `Bearer ${token}`;
+            }
+            const resp = await fetch(url, { method: 'POST', headers });
+            if (!resp.ok)
+                throw new Error(`HTTP ${resp.status}`);
+            const data = await resp.json();
+            setDialogTitle(`Generated ${kind}`);
+            setDialogBody(JSON.stringify(data, null, 2));
+            setDialogVariant('success');
+        }
+        catch (err) {
+            setDialogTitle(`Error generating ${kind}`);
+            setDialogBody(err instanceof Error ? err.message : String(err));
+            setDialogVariant('error');
+        }
+        finally {
+            setGenerating(false);
+            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, token && _jsx(UserBadge, { token: token }), 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 })] })] }))] }));
+};

package/lib/views/otel/SqlView.d.ts

@@ -0,0 +1,9 @@
+/**
+ * SqlView – Standalone SQL query view for exploring OTEL data.
+ */
+import React from 'react';
+export interface SqlViewProps {
+    baseUrl?: string;
+    token?: string;
+}
+export declare const SqlView: React.FC<SqlViewProps>;

package/lib/views/otel/SqlView.js

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

package/lib/views/otel/SystemView.d.ts

@@ -0,0 +1,9 @@
+/**
+ * SystemView – OTEL system/infrastructure view.
+ */
+import React from 'react';
+export interface SystemViewProps {
+    baseUrl?: string;
+    token?: string;
+}
+export declare const SystemView: React.FC<SystemViewProps>;

package/lib/views/otel/SystemView.js

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

package/lib/views/otel/TracesView.d.ts

@@ -0,0 +1,12 @@
+/**
+ * TracesView – Standalone traces-only view.
+ * Renders OtelLive defaulting to the traces signal.
+ */
+import React from 'react';
+export interface TracesViewProps {
+    baseUrl?: string;
+    token?: string;
+    autoRefreshMs?: number;
+    limit?: number;
+}
+export declare const TracesView: React.FC<TracesViewProps>;

package/lib/views/otel/TracesView.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@primer/react';
+import { OtelLive } from '../../otel';
+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 }) }));

package/lib/views/otel/index.d.ts

@@ -0,0 +1,16 @@
+export { DashboardView } from './DashboardView';
+export type { DashboardViewProps } from './DashboardView';
+export { TracesView } from './TracesView';
+export type { TracesViewProps } from './TracesView';
+export { LogsView } from './LogsView';
+export type { LogsViewProps } from './LogsView';
+export { MetricsView } from './MetricsView';
+export type { MetricsViewProps } from './MetricsView';
+export { SqlView } from './SqlView';
+export type { SqlViewProps } from './SqlView';
+export { SystemView } from './SystemView';
+export type { SystemViewProps } from './SystemView';
+export { OtelHeader } from './OtelHeader';
+export type { OtelHeaderProps } from './OtelHeader';
+export { useSimpleAuthStore } from './simpleAuthStore';
+export type { SimpleAuthState } from './simpleAuthStore';

package/lib/views/otel/index.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export { DashboardView } from './DashboardView';
+export { TracesView } from './TracesView';
+export { LogsView } from './LogsView';
+export { MetricsView } from './MetricsView';
+export { SqlView } from './SqlView';
+export { SystemView } from './SystemView';
+export { OtelHeader } from './OtelHeader';
+export { useSimpleAuthStore } from './simpleAuthStore';

package/lib/views/otel/simpleAuthStore.d.ts

@@ -0,0 +1,21 @@
+export interface SimpleAuthState {
+    /** JWT bearer token (from IAM login). */
+    token: string | null;
+    /** Authenticated user's handle. */
+    handle: string | null;
+    /** Set credentials after successful login. */
+    setAuth: (token: string, handle: string) => void;
+    /** Clear credentials (logout). */
+    clearAuth: () => void;
+}
+export declare const useSimpleAuthStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<SimpleAuthState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<SimpleAuthState, SimpleAuthState>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: SimpleAuthState) => void) => () => void;
+        onFinishHydration: (fn: (state: SimpleAuthState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<SimpleAuthState, SimpleAuthState>>;
+    };
+}>;

package/lib/views/otel/simpleAuthStore.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Minimal token-based authentication store.
+ *
+ * Persists a JWT bearer token and a user handle to localStorage so the
+ * session survives page refreshes.  Intended for demo / example apps that
+ * need a lightweight auth layer without a full IAM integration.
+ *
+ * Import via the `@datalayer/core/views/otel` subpath:
+ *   import { useSimpleAuthStore } from '@datalayer/core/views/otel';
+ */
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+export const useSimpleAuthStore = create()(persist((set) => ({
+    token: null,
+    handle: null,
+    setAuth: (token, handle) => set({ token, handle }),
+    clearAuth: () => set({ token: null, handle: null }),
+}), { name: 'datalayer-simple-auth' }));

package/lib/views/profile/UserBadge.d.ts

@@ -13,6 +13,8 @@ import React from 'react';
 export interface UserBadgeProps {
     /** Raw JWT bearer token. */
     token: string;
+    /** Display variant for the claims overlay. */
+    variant?: 'full' | 'small';
 }
 export declare const UserBadge: React.FC<UserBadgeProps>;
 export default UserBadge;

package/lib/views/profile/UserBadge.js

@@ -18,7 +18,7 @@ import { useState, useRef, useCallback } from 'react';
 import { Box, Text } from '@primer/react';
 import { parseJwtPayload, getDatalayerJwtUser, getDatalayerDisplayName, } from '../../utils/Jwt';
 // ── Component ─────────────────────────────────────────────────────
-export const UserBadge = ({ token }) => {
+export const UserBadge = ({ token, variant = 'full', }) => {
     const [open, setOpen] = useState(false);
     const closeTimer = useRef(null);
     const handleEnter = useCallback(() => {
@@ -85,7 +85,7 @@ export const UserBadge = ({ token }) => {
                                         borderRadius: 1,
                                         border: '1px solid',
                                         borderColor: 'accent.muted',
-                                    }, children: r }, r))) })] })), _jsx(Box, { as: "pre", sx: {
+                                    }, children: r }, r))) })] })), variant === 'full' && (_jsx(Box, { as: "pre", sx: {
                             m: 0,
                             px: 3,
                             py: 2,
@@ -96,6 +96,6 @@ export const UserBadge = ({ token }) => {
                             overflow: 'auto',
                             maxHeight: '220px',
                             whiteSpace: 'pre',
-                        }, children: JSON.stringify(claims, null, 2) })] }))] }));
+                        }, children: JSON.stringify(claims, null, 2) }))] }))] }));
 };
 export default UserBadge;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "1.0.3",
+  "version": "1.0.11",
   "type": "module",
   "workspaces": [
     ".",
@@ -28,30 +28,6 @@
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./lib/index.d.ts",
-      "default": "./lib/index.js"
-    },
-    "./otel": {
-      "types": "./lib/otel/index.d.ts",
-      "default": "./lib/otel/index.js"
-    },
-    "./views/iam": {
-      "types": "./lib/views/iam/index.d.ts",
-      "default": "./lib/views/iam/index.js"
-    },
-    "./views/profile": {
-      "types": "./lib/views/profile/index.d.ts",
-      "default": "./lib/views/profile/index.js"
-    },
-    "./utils/jwt": {
-      "types": "./lib/utils/Jwt.d.ts",
-      "default": "./lib/utils/Jwt.js"
-    },
-    "./style/*": "./style/*",
-    "./*": "./*"
-  },
   "style": "style/index.css",
   "repository": {
     "type": "git",
@@ -220,7 +196,6 @@
     "@types/node": "^20.11.0",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.6",
-    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.5.2",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",