@datalayer/core 1.0.3 → 1.0.12

package/lib/otel/{OtelSpanTree.js → views/OtelSpanTree.js}

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useMemo, useCallback } from 'react';
 import { Box, Text } from '@primer/react';
 import { ChevronDownIcon, ChevronRightIcon } from '@primer/octicons-react';
-import { formatDuration, serviceColor, toMs } from './utils';
+import { formatDuration, serviceColor, toMs } from '../utils';
 const INDENT_PX = 20;
 const SpanNode = ({ span, depth, selectedSpanId, onSelectSpan, expandedIds, toggleExpanded, traceMinTime, traceDuration, }) => {
     const hasChildren = (span.children?.length ?? 0) > 0;

package/lib/otel/{OtelSqlView.js → views/OtelSqlView.js}

@@ -16,7 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import { ActionList, ActionMenu, Box, Button, Text, Textarea, Spinner, } from '@primer/react';
 import { HistoryIcon, TableIcon, XCircleIcon, DownloadIcon, } from '@primer/octicons-react';
-import { useOtelQuery } from './hooks';
+import { useOtelQuery } from '../hooks';
 // ── Cookie helpers ────────────────────────────────────────────────
 const HISTORY_COOKIE = 'otel_sql_history';
 const HISTORY_MAX = 10;

package/lib/otel/{OtelSystemView.js → views/OtelSystemView.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Button, Spinner, Text } from '@primer/react';
 import { SyncIcon } from '@primer/octicons-react';
-import { useOtelSystem } from './hooks';
+import { useOtelSystem } from '../hooks';
 // ── Helpers ───────────────────────────────────────────────────────
 function fmtBytes(bytes) {
     if (bytes >= 1024 ** 3)

package/lib/otel/{OtelTimeline.d.ts → views/OtelTimeline.d.ts}

@@ -7,5 +7,5 @@
  * @module otel/OtelTimeline
  */
 import React from 'react';
-import type { OtelTimelineProps } from './types';
+import type { OtelTimelineProps } from '../types';
 export declare const OtelTimeline: React.FC<OtelTimelineProps>;

package/lib/otel/{OtelTimeline.js → views/OtelTimeline.js}

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useMemo } from 'react';
 import { Box, Text } from '@primer/react';
-import { toMs, formatDuration, serviceColor } from './utils';
+import { toMs, formatDuration, serviceColor } from '../utils';
 export const OtelTimeline = ({ spans, barHeight = 24, selectedSpanId, onSelectSpan, }) => {
     const { minTime, maxTime, sortedSpans } = useMemo(() => {
         if (spans.length === 0)

package/lib/otel/{OtelTimelineRangeSlider.d.ts → views/OtelTimelineRangeSlider.d.ts}

@@ -12,5 +12,5 @@
  * @module otel/OtelTimelineRangeSlider
  */
 import React from 'react';
-import type { OtelTimelineRangeSliderProps } from './types';
+import type { OtelTimelineRangeSliderProps } from '../types';
 export declare const OtelTimelineRangeSlider: React.FC<OtelTimelineRangeSliderProps>;

package/lib/otel/{OtelTracesList.d.ts → views/OtelTracesList.d.ts}

@@ -9,5 +9,5 @@
  * @module otel/OtelTracesList
  */
 import React from 'react';
-import type { OtelTracesListProps } from './types';
+import type { OtelTracesListProps } from '../types';
 export declare const OtelTracesList: React.FC<OtelTracesListProps>;

package/lib/otel/{OtelTracesList.js → views/OtelTracesList.js}

@@ -17,7 +17,7 @@ import { useMemo, useCallback, useState } from 'react';
 import { Box, Text, Label, Spinner } from '@primer/react';
 import { Blankslate } from '@primer/react/experimental';
 import { TelescopeIcon, ChevronRightIcon, ChevronDownIcon, } from '@primer/octicons-react';
-import { formatDuration, formatTime, buildSpanTree } from './utils';
+import { formatDuration, formatTime, buildSpanTree } from '../utils';
 const GRID_COLS = '140px 1fr 160px 90px';
 // ── Helpers ─────────────────────────────────────────────────────────
 /** Extract gen_ai token counts from span attributes. */

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

@@ -0,0 +1,20 @@
+/**
+ * OTEL view components.
+ *
+ * @module otel/views
+ */
+export { OtelLive } from './OtelLive';
+export { OtelTracesList } from './OtelTracesList';
+export { OtelLogsList } from './OtelLogsList';
+export { OtelMetricsList } from './OtelMetricsList';
+export { OtelMetricsChart } from './OtelMetricsChart';
+export type { OtelMetricsChartProps } from './OtelMetricsChart';
+export { OtelSearchBar } from './OtelSearchBar';
+export { OtelSpanDetail } from './OtelSpanDetail';
+export { OtelSpanTree } from './OtelSpanTree';
+export { OtelTimeline } from './OtelTimeline';
+export { OtelTimelineRangeSlider } from './OtelTimelineRangeSlider';
+export { OtelSqlView } from './OtelSqlView';
+export type { OtelSqlViewProps } from './OtelSqlView';
+export { OtelSystemView } from './OtelSystemView';
+export type { OtelSystemViewProps } from './OtelSystemView';

package/lib/otel/views/index.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OTEL view components.
+ *
+ * @module otel/views
+ */
+export { OtelLive } from './OtelLive';
+export { OtelTracesList } from './OtelTracesList';
+export { OtelLogsList } from './OtelLogsList';
+export { OtelMetricsList } from './OtelMetricsList';
+export { OtelMetricsChart } from './OtelMetricsChart';
+export { OtelSearchBar } from './OtelSearchBar';
+export { OtelSpanDetail } from './OtelSpanDetail';
+export { OtelSpanTree } from './OtelSpanTree';
+export { OtelTimeline } from './OtelTimeline';
+export { OtelTimelineRangeSlider } from './OtelTimelineRangeSlider';
+export { OtelSqlView } from './OtelSqlView';
+export { OtelSystemView } from './OtelSystemView';

package/lib/state/substates/CoreState.js

@@ -17,7 +17,7 @@ let initialConfiguration = {
     loadConfigurationFromServer: true,
     jupyterServerless: false,
     iamRunUrl: 'https://prod1.datalayer.run',
-    runtimesRunUrl: 'https://prod1.datalayer.run',
+    runtimesRunUrl: 'https://r1.datalayer.run',
     libraryRunUrl: 'https://prod1.datalayer.run',
     spacerRunUrl: 'https://prod1.datalayer.run',
     aiagentsRunUrl: 'https://prod1.datalayer.run',
@@ -40,11 +40,11 @@ let initialConfiguration = {
         logoUrl: 'https://assets.datalayer.tech/datalayer-25.svg',
         logoSquareUrl: 'https://assets.datalayer.tech/datalayer-square.png',
         copyright: '© 2025 Datalayer, Inc',
-        docsUrl: 'https://docs.datalayer.app',
-        supportUrl: 'https://datalayer.app/support',
-        termsUrl: 'https://datalayer.app/terms',
-        pricingUrl: 'https://datalayer.app/pricing',
-        privacyUrl: 'https://datalayer.app/privacy',
+        docsUrl: 'https://docs.datalayer.ai',
+        supportUrl: 'https://datalayer.ai/support',
+        termsUrl: 'https://datalayer.ai/terms',
+        pricingUrl: 'https://datalayer.ai/pricing',
+        privacyUrl: 'https://datalayer.ai/privacy',
     },
 };
 // Try loading initial state from datalayer-config-data element

package/lib/utils/Date.d.ts

@@ -1,2 +1,8 @@
 export declare const getRelativeTime: (d1: Date, d2?: Date) => string;
 export declare const timeSince: (date: Date) => string;
+/**
+ * Format a timestamp into a compact relative string.
+ *
+ * Examples: "just now", "15m ago", "3h ago", "2d ago", "4w ago", "1y ago".
+ */
+export declare const formatRelativeTime: (value?: Date | string | number, now?: Date) => string | undefined;

package/lib/utils/Date.js

@@ -58,3 +58,40 @@ export const timeSince = (date) => {
     const i = Math.floor(interval);
     return i + ` second${p(i)}`;
 };
+/**
+ * Format a timestamp into a compact relative string.
+ *
+ * Examples: "just now", "15m ago", "3h ago", "2d ago", "4w ago", "1y ago".
+ */
+export const formatRelativeTime = (value, now = new Date()) => {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    const date = value instanceof Date
+        ? value
+        : typeof value === 'number'
+            ? new Date(value)
+            : new Date(value);
+    const ts = date.getTime();
+    if (Number.isNaN(ts)) {
+        return typeof value === 'string' ? value : undefined;
+    }
+    const diffMs = Math.max(0, now.getTime() - ts);
+    const seconds = Math.floor(diffMs / 1000);
+    if (seconds < 60)
+        return 'just now';
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 7)
+        return `${days}d ago`;
+    const weeks = Math.floor(days / 7);
+    if (weeks < 52)
+        return `${weeks}w ago`;
+    const years = Math.floor(days / 365);
+    return `${years}y ago`;
+};

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

@@ -14,6 +14,11 @@ export interface SignInSimpleProps {
      * Typically used to store credentials in a Zustand / context store.
      */
     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.
+     */
+    onApiKeySignIn?: (apiKey: string) => void;
     /**
      * Login endpoint.  Defaults to `/api/iam/v1/login`.
      * The endpoint must accept `POST { handle, password }` and return

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 })] })] }))] }));
+};