@datalayer/core 1.0.19 → 1.0.21

package/lib/views/datasources/Datasources.js

@@ -4,14 +4,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { useState, useEffect } from 'react';
-import { PageLayout, Button, IconButton, Text, Label } from '@primer/react';
-import { Blankslate, PageHeader, Table, DataTable, } from '@primer/react/experimental';
+import { PageLayout, Button, IconButton, Text, Label, Heading, } from '@primer/react';
+import { Blankslate, Table, DataTable } from '@primer/react/experimental';
+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, }) => {
+const DatasourcesTable = ({ datasourcesListRoute, principalUid, principalKind, }) => {
     const { useDatasources } = useCache();
-    const datasourcesQuery = useDatasources();
+    const datasourcesQuery = useDatasources({ principalUid, principalKind });
     const navigate = useNavigate();
     const [datasources, setDatasources] = useState([]);
     useEffect(() => {
@@ -19,33 +20,40 @@ const DatasourcesTable = ({ datasourcesListRoute, }) => {
             setDatasources(datasourcesQuery.data || []);
         }
     }, [datasourcesQuery.data]);
-    return datasources.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "Datasources" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Datasources found." }) })] })) : (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "datasources", children: "Datasources" }), _jsx(Table.Subtitle, { as: "p", id: "datasources-subtitle", children: "Your datasources." }), _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: datasources, columns: [
-                    // @ts-ignore
-                    {
-                        header: 'Type',
-                        field: 'variant',
-                        renderCell: datasource => _jsx(Label, { children: datasource.variant }),
-                    },
-                    {
-                        header: 'Name',
-                        field: 'name',
-                        rowHeader: true,
-                    },
-                    {
-                        header: 'Description',
-                        field: 'description',
-                    },
-                    {
-                        header: '',
-                        field: 'id',
-                        renderCell: datasource => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(datasourcesListRoute
-                                ? `${datasourcesListRoute}/${datasource.id}`
-                                : `${datasource.id}`, e) })),
-                    },
-                ] })] }));
+    return datasources.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, 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',
+                    field: 'variant',
+                    renderCell: datasource => _jsx(Label, { children: datasource.variant }),
+                },
+                {
+                    header: 'Name',
+                    field: 'name',
+                    rowHeader: true,
+                },
+                {
+                    header: 'Description',
+                    field: 'description',
+                },
+                {
+                    header: '',
+                    field: 'id',
+                    renderCell: datasource => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(datasourcesListRoute
+                            ? `${datasourcesListRoute}/${datasource.id}`
+                            : `${datasource.id}`, e) })),
+                },
+            ] }) }));
 };
-export const Datasources = ({ newDatasourceRoute = '/new/datasource', datasourcesListRoute, } = {}) => {
+export const Datasources = ({ newDatasourceRoute = '/new/datasource', datasourcesListRoute, principalUid, principalKind, } = {}) => {
     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: "Datasources" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate(newDatasourceRoute, e), children: "New datasource" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(DatasourcesTable, { datasourcesListRoute: datasourcesListRoute }) }) })] }));
+    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',
+                            alignItems: 'flex-start',
+                            justifyContent: 'space-between',
+                            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 })] }) }) }));
 };
 export default Datasources;

package/lib/views/iam/SignInSimple.d.ts

@@ -16,7 +16,7 @@ export interface SignInSimpleProps {
     onSignIn: (token: string, handle: string) => void;
     /**
      * Called when the user authenticates with an API key.
-     * If not provided the "Sign in with API Key" button is hidden.
+     * If not provided the "Sign In with an API Key" button is hidden.
      */
     onApiKeySignIn?: (apiKey: string) => void;
     /**

package/lib/views/iam/SignInSimple.js

@@ -12,10 +12,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * @module views/signin
  */
-import { useState, useCallback, useRef, useMemo } from 'react';
+import { useState, useCallback, useRef, useMemo, useEffect, } 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';
+import { EyeIcon, EyeClosedIcon, KeyIcon, LinkExternalIcon, TelescopeIcon, } from '@primer/octicons-react';
 import { coreStore } from '../../state/index.js';
 // ── Component ────────────────────────────────────────────────────────
 export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp, title = 'Datalayer OTEL', description = 'Sign in to access the observability dashboard.', leadingIcon = _jsx(TelescopeIcon, { size: 24 }), }) => {
@@ -34,6 +33,24 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
     const [showApiKeyDialog, setShowApiKeyDialog] = useState(false);
     const [apiKey, setApiKey] = useState('');
     const apiKeyRef = useRef(null);
+    useEffect(() => {
+        if (showApiKeyDialog) {
+            apiKeyRef.current?.focus();
+        }
+    }, [showApiKeyDialog]);
+    const closeApiKeyDialog = useCallback(() => {
+        setShowApiKeyDialog(false);
+        setApiKey('');
+    }, []);
+    const handleApiKeyAuthenticate = useCallback(() => {
+        if (!apiKey.trim() || !onApiKeySignIn)
+            return;
+        onApiKeySignIn(apiKey.trim());
+        closeApiKeyDialog();
+    }, [apiKey, onApiKeySignIn, closeApiKeyDialog]);
+    const handleSignUp = useCallback(() => {
+        window.open('https://datalayer.ai/signup', '_blank', 'noopener,noreferrer');
+    }, []);
     const submit = useCallback(async () => {
         if (!handle || !password || loading)
             return;
@@ -87,34 +104,41 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
                         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' }), onApiKeySignIn && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                    }, 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' }), _jsx(Box, { sx: { mt: 2, display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { size: "small", variant: "invisible", leadingVisual: LinkExternalIcon, onClick: handleSignUp, children: "Sign Up" }) }), 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 })] }) }) }))] }))] }) }));
+                            }, 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 an API Key" }), showApiKeyDialog && (_jsx(Box, { role: "dialog", "aria-modal": "true", "aria-labelledby": "signin-api-key-title", onKeyDown: event => {
+                                if (event.key === 'Escape') {
+                                    closeApiKeyDialog();
+                                }
+                            }, onClick: closeApiKeyDialog, sx: {
+                                position: 'fixed',
+                                inset: 0,
+                                zIndex: 200,
+                                p: 3,
+                                bg: 'canvas.backdrop',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: _jsxs(Box, { as: "form", onClick: event => event.stopPropagation(), onSubmit: event => {
+                                    event.preventDefault();
+                                    handleApiKeyAuthenticate();
+                                }, sx: {
+                                    width: 'min(560px, 100%)',
+                                    p: 3,
+                                    borderRadius: 2,
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                    bg: 'canvas.overlay',
+                                    color: 'fg.default',
+                                    boxShadow: 'shadow.large',
+                                }, children: [_jsx(Heading, { id: "signin-api-key-title", sx: { fontSize: 2, mb: 2 }, children: "Enter your API Key" }), _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 })] }), _jsxs(Box, { sx: {
+                                            mt: 3,
+                                            display: 'flex',
+                                            justifyContent: 'flex-end',
+                                            gap: 2,
+                                        }, children: [_jsx(Button, { type: "button", onClick: closeApiKeyDialog, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: !apiKey.trim(), children: "Authenticate" })] })] }) }))] }))] }) }));
 };
 export default SignInSimple;

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

@@ -1,6 +1,8 @@
 export type IAMTokenNewProps = {
     /** Route to navigate when clicking "List my Tokens". Defaults to '/settings/iam/tokens'. */
     tokensListRoute?: string;
+    /** Whether to render the "New API Key" title header in create mode. Defaults to true. */
+    showTitle?: boolean;
 };
-export declare const IAMTokenNew: ({ tokensListRoute, }?: IAMTokenNewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IAMTokenNew: ({ tokensListRoute, showTitle, }?: IAMTokenNewProps) => import("react/jsx-runtime").JSX.Element;
 export default IAMTokenNew;

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

@@ -10,7 +10,7 @@ import { CopyIcon } from '@primer/octicons-react';
 import { Calendar, defaultCalendarStrings } from '@fluentui/react';
 import { useCache, useNavigate, useToast } from '../../hooks/index.js';
 import { useRunStore } from '../../state/index.js';
-export const IAMTokenNew = ({ tokensListRoute = '/settings/iam/tokens', } = {}) => {
+export const IAMTokenNew = ({ tokensListRoute = '/settings/iam/tokens', showTitle = true, } = {}) => {
     const runStore = useRunStore();
     const { useCreateToken } = useCache();
     const createTokenMutation = useCreateToken();
@@ -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 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 ||
+                                    } })] })] }), _jsx(Box, { mt: 3, children: _jsx(Button, { onClick: e => navigate(tokensListRoute, e), children: "List my API Keys" }) })] })) : (_jsxs(_Fragment, { children: [showTitle ? (_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New API Key" }) }) })) : null, _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

@@ -5,6 +5,8 @@ export type IAMTokensProps = {
     tokensListRoute?: string;
     /** Whether to display view titles/headings. Defaults to true. */
     showTitle?: boolean;
+    /** Whether to render the "New API Key" button in this component header. Defaults to true. */
+    showNewButton?: boolean;
 };
-export declare const IAMTokens: ({ newTokenRoute, tokensListRoute, showTitle, }?: IAMTokensProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IAMTokens: ({ newTokenRoute, tokensListRoute, showTitle, showNewButton, }?: IAMTokensProps) => import("react/jsx-runtime").JSX.Element;
 export default IAMTokens;

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

@@ -80,8 +80,8 @@ const TokensTable = ({ tokensListRoute, showTitle = true, }) => {
                         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, showTitle = true, } = {}) => {
+export const IAMTokens = ({ newTokenRoute = '/new/token', tokensListRoute, showTitle = true, showNewButton = 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: [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 }) }) })] }));
+    return (_jsxs(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [showTitle || showNewButton ? (_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [showTitle && (_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "API Keys" }) })), showNewButton && (_jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate(newTokenRoute, e), children: "New API Key" }) }))] }) })) : null, _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(TokensTable, { tokensListRoute: tokensListRoute, showTitle: showTitle }) }) })] }));
 };
 export default IAMTokens;

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

@@ -29,5 +29,10 @@ export interface OtelHeaderProps {
      * where data is generated by agents, not manually).
      */
     showGenerateButtons?: boolean;
+    /**
+     * Whether to show account controls (token badge + sign out).
+     * Defaults to `true`.
+     */
+    showAccountControls?: boolean;
 }
 export declare const OtelHeader: React.FC<OtelHeaderProps>;

package/lib/views/otel/OtelHeader.js

@@ -14,7 +14,7 @@ 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/index.js';
-export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOut, showGenerateButtons = true, }) => {
+export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOut, showGenerateButtons = true, showAccountControls = true, }) => {
     const [dialogOpen, setDialogOpen] = useState(false);
     const [dialogTitle, setDialogTitle] = useState('');
     const [dialogRequest, setDialogRequest] = useState('');
@@ -33,7 +33,7 @@ export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOu
             onNavigate(signalMap[kind]);
         }
         setGenerating(true);
-        const url = `${baseUrl}/api/generate/${kind}?count=${count}`;
+        const url = `${baseUrl}/api/otel/v1/generate/${kind}?count=${count}`;
         setDialogRequest(`POST ${url}`);
         try {
             const headers = {};
@@ -70,7 +70,7 @@ export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOu
                     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: [
+                }, 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: [
                     {
                         content: 'Close',
                         onClick: () => setDialogOpen(false),

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

@@ -15,6 +15,27 @@ export interface UserBadgeProps {
     token: string;
     /** Display variant for the claims overlay. */
     variant?: 'full' | 'small';
+    /**
+     * When the popover is rendered in the ``small`` variant, show a ``+``
+     * affordance in the top-right corner of the header that lets the user
+     * expand the overlay to the ``full`` variant (raw JSON claims).
+     *
+     * Defaults to ``true``.  Ignored when ``variant`` is already ``full``.
+     */
+    showExpandToggle?: boolean;
+    /**
+     * Threshold (in milliseconds) below which the expiration timestamp is
+     * rendered in ``attention.fg`` (yellow) to warn that the token is about
+     * to expire.  Tokens already past ``exp`` render in ``danger.fg`` (red);
+     * tokens further out than this threshold render in ``success.fg`` (green).
+     * Defaults to ``10_800_000`` (3 hours).
+     */
+    expirationWarningMs?: number;
+    /**
+     * Optional callback fired when the claims popover is open and the token is
+     * already expired.
+     */
+    onTokenExpired?: () => void;
 }
 export declare const UserBadge: React.FC<UserBadgeProps>;
 export default UserBadge;

package/lib/views/profile/UserBadge.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, 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.
@@ -14,12 +14,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  * @module views/profile
  */
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import { Box, Text } from '@primer/react';
 import { parseJwtPayload, getDatalayerJwtUser, getDatalayerDisplayName, } from '../../utils/Jwt.js';
+import { getRelativeTime } from '../../utils/Date.js';
 // ── Component ─────────────────────────────────────────────────────
-export const UserBadge = ({ token, variant = 'full', }) => {
+export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, expirationWarningMs = 3 * 60 * 60 * 1000, onTokenExpired, }) => {
     const [open, setOpen] = useState(false);
+    const [expanded, setExpanded] = useState(false);
     const closeTimer = useRef(null);
     const handleEnter = useCallback(() => {
         if (closeTimer.current)
@@ -34,9 +36,34 @@ export const UserBadge = ({ token, variant = 'full', }) => {
     const user = getDatalayerJwtUser(token);
     const displayName = getDatalayerDisplayName(user, user?.handle ?? '');
     const claims = parseJwtPayload(token);
+    // Colour the trigger label based on token expiry:
+    // - red when already expired,
+    // - yellow when expiring within ``expirationWarningMs``,
+    // - muted grey otherwise.
+    const msUntilExpiry = claims?.exp
+        ? claims.exp * 1000 - Date.now()
+        : undefined;
+    const expired = msUntilExpiry !== undefined && msUntilExpiry <= 0;
+    const expiringSoon = msUntilExpiry !== undefined &&
+        msUntilExpiry > 0 &&
+        msUntilExpiry <= expirationWarningMs;
+    const triggerColor = expired
+        ? 'danger.fg'
+        : expiringSoon
+            ? 'attention.fg'
+            : 'fg.muted';
+    const expiredNotifiedForTokenRef = useRef(null);
+    useEffect(() => {
+        if (!onTokenExpired || !open || !expired)
+            return;
+        if (expiredNotifiedForTokenRef.current === token)
+            return;
+        expiredNotifiedForTokenRef.current = token;
+        onTokenExpired();
+    }, [expired, onTokenExpired, open, token]);
     return (_jsxs(Box, { sx: { position: 'relative' }, onMouseEnter: handleEnter, onMouseLeave: handleLeave, children: [_jsx(Text, { sx: {
                     fontSize: 1,
-                    color: 'fg.muted',
+                    color: triggerColor,
                     cursor: 'default',
                     borderBottom: '1px dashed',
                     borderColor: 'border.muted',
@@ -54,13 +81,36 @@ export const UserBadge = ({ token, variant = 'full', }) => {
                     borderRadius: 2,
                     boxShadow: 'shadow.large',
                     overflow: 'hidden',
-                }, children: [_jsx(Box, { sx: {
+                }, children: [_jsxs(Box, { sx: {
                             px: 3,
                             py: 2,
                             bg: 'canvas.subtle',
                             borderBottom: '1px solid',
                             borderColor: 'border.default',
-                        }, children: _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: "JWT Claims" }) }), claims.user && (_jsx(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            gap: 2,
+                        }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: "JWT Claims" }), 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',
@@ -70,7 +120,49 @@ export const UserBadge = ({ token, variant = 'full', }) => {
                                 gridTemplateColumns: '90px 1fr',
                                 gap: 1,
                                 fontSize: 0,
-                            }, children: [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" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: new Date(claims.exp * 1000).toISOString() })] }) })), (claims.user?.roles ?? claims.roles ?? []).length > 0 && (_jsxs(Box, { sx: {
+                            }, children: [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: {
+                                                fontFamily: 'mono',
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                            }, children: new Date(claims.exp * 1000).toISOString() }), (() => {
+                                            const expDate = new Date(claims.exp * 1000);
+                                            const msUntilExpiry = expDate.getTime() - Date.now();
+                                            const expired = msUntilExpiry <= 0;
+                                            const warning = !expired && msUntilExpiry <= expirationWarningMs;
+                                            const bg = expired
+                                                ? 'danger.subtle'
+                                                : warning
+                                                    ? 'attention.subtle'
+                                                    : 'success.subtle';
+                                            const fg = expired
+                                                ? 'danger.fg'
+                                                : warning
+                                                    ? 'attention.fg'
+                                                    : 'success.fg';
+                                            const border = expired
+                                                ? 'danger.muted'
+                                                : 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',
@@ -85,7 +177,7 @@ export const UserBadge = ({ token, variant = 'full', }) => {
                                         borderRadius: 1,
                                         border: '1px solid',
                                         borderColor: 'accent.muted',
-                                    }, children: r }, r))) })] })), variant === 'full' && (_jsx(Box, { as: "pre", sx: {
+                                    }, children: r }, r))) })] })), (variant === 'full' || expanded) && (_jsx(Box, { as: "pre", sx: {
                             m: 0,
                             px: 3,
                             py: 2,

package/lib/views/secrets/Secrets.js

@@ -19,27 +19,27 @@ const SecretsTable = () => {
             setSecrets(secretsQuery.data || []);
         }
     }, [secretsQuery.data]);
-    return secrets.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "Secrets" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Secrets found." }) })] })) : (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "secrets", children: "Secrets" }), _jsx(DataTable, { "aria-labelledby": "secrets", "aria-describedby": "secrets-subtitle", data: secrets, columns: [
-                    {
-                        header: 'Type',
-                        field: 'variant',
-                        renderCell: secret => _jsx(Label, { children: secret.variant }),
-                    },
-                    {
-                        header: 'Name',
-                        field: 'name',
-                        rowHeader: true,
-                    },
-                    {
-                        header: 'Description',
-                        field: 'description',
-                    },
-                    {
-                        header: '',
-                        field: 'id',
-                        renderCell: secret => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(`${secret.id}`, e) })),
-                    },
-                ] })] }));
+    return secrets.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "Secrets" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Secrets found." }) })] })) : (_jsx(Table.Container, { children: _jsx(DataTable, { "aria-labelledby": "secrets", "aria-describedby": "secrets-subtitle", data: secrets, columns: [
+                {
+                    header: 'Type',
+                    field: 'variant',
+                    renderCell: secret => _jsx(Label, { children: secret.variant }),
+                },
+                {
+                    header: 'Name',
+                    field: 'name',
+                    rowHeader: true,
+                },
+                {
+                    header: 'Description',
+                    field: 'description',
+                },
+                {
+                    header: '',
+                    field: 'id',
+                    renderCell: secret => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(`${secret.id}`, e) })),
+                },
+            ] }) }));
 };
 export const Secrets = () => {
     const navigate = useNavigate();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "type": "module",
   "workspaces": [
     ".",
@@ -102,11 +102,11 @@
     "rebuild:fresh": "npm run create:patches && npm install && npm run build && npm run clean:cache"
   },
   "dependencies": {
-    "@datalayer/icons-react": "^1.0.6",
+    "@datalayer/icons-react": "^1.0.7",
     "@datalayer/jupyter-lexical": "^1.0.16",
     "@datalayer/jupyter-react": "^2.0.7",
-    "@datalayer/primer-addons": "^1.0.12",
-    "@datalayer/primer-rjsf": "^1.0.1",
+    "@datalayer/primer-addons": "^1.0.15",
+    "@datalayer/primer-rjsf": "^1.0.3",
     "@fluentui/react": "^8.125.3",
     "@jupyter-widgets/base-manager": "^1.0.12",
     "@jupyter-widgets/schema": "^0.5.6",
@@ -133,8 +133,8 @@
     "@primer/primitives": "^10.5.0",
     "@primer/react": "^37.19.0",
     "@primer/react-brand": "^0.58.0",
-    "@stripe/react-stripe-js": "^2.7.1",
-    "@stripe/stripe-js": "^4.0.0",
+    "@stripe/react-stripe-js": "^6.3.0",
+    "@stripe/stripe-js": "^9.4.0",
     "@styled-system/css": "^5.1.5",
     "@tailwindcss/vite": "^4.1.13",
     "@tanstack/react-query": "^5.90.6",
@@ -169,6 +169,7 @@
     "ulid": "^2.3.0",
     "unique-names-generator": "^4.7.1",
     "usehooks-ts": "^2.9.1",
+    "user": "^0.0.0",
     "uuid": "^13.0.0",
     "validator": "^13.7.0",
     "zod": "^4.1.13",
@@ -257,6 +258,6 @@
     ]
   },
   "optionalDependencies": {
-    "keytar": "^7.9.0"
+    "@github/keytar": "^7.10.6"
   }
 }