@datalayer/core 1.0.3 → 1.0.11

package/lib/otel/{hooks.d.ts → hooks/index.d.ts}

@@ -1,4 +1,18 @@
-import type { OtelSpan, OtelLog, OtelMetric, OtelQueryRow } from './types';
+import type { OtelSpan, OtelLog, OtelMetric, OtelQueryRow } from '../types';
+/**
+ * Register a callback invoked whenever an OTEL API call receives a
+ * **401 Unauthorized** response.  Typically used to clear auth state
+ * (i.e. log the user out) when the token has expired.
+ *
+ * Pass `null` to unregister.
+ *
+ * @example
+ * ```ts
+ * import { setOtelOnUnauthorized } from '@datalayer/core/lib/otel';
+ * setOtelOnUnauthorized(() => authStore.getState().clearAuth());
+ * ```
+ */
+export declare function setOtelOnUnauthorized(cb: (() => void) | null): void;
 /** Fetch a list of traces / spans from the OTEL service. */
 export declare function useOtelTraces(options: {
     token?: string;

package/lib/otel/{hooks.js → hooks/index.js}

@@ -8,9 +8,32 @@
  * @module otel/hooks
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { coreStore } from '../../state/substates/CoreState';
+// ── Global 401 handler ──────────────────────────────────────────────
+let _onUnauthorized = null;
+/**
+ * Register a callback invoked whenever an OTEL API call receives a
+ * **401 Unauthorized** response.  Typically used to clear auth state
+ * (i.e. log the user out) when the token has expired.
+ *
+ * Pass `null` to unregister.
+ *
+ * @example
+ * ```ts
+ * import { setOtelOnUnauthorized } from '@datalayer/core/lib/otel';
+ * setOtelOnUnauthorized(() => authStore.getState().clearAuth());
+ * ```
+ */
+export function setOtelOnUnauthorized(cb) {
+    _onUnauthorized = cb;
+}
 /**
  * Lightweight fetch helper for OTEL API calls.
  * Uses plain `fetch` to avoid pulling in `@jupyterlab/coreutils` / axios.
+ *
+ * If the response is **401 Unauthorized** and a global `onUnauthorized`
+ * handler has been registered via {@link setOtelOnUnauthorized}, the
+ * handler is called before the error is thrown.
  */
 async function otelFetch(url, token, options) {
     const headers = {
@@ -33,6 +56,9 @@ async function otelFetch(url, token, options) {
             : undefined,
     });
     if (!res.ok) {
+        if (res.status === 401 && _onUnauthorized) {
+            _onUnauthorized();
+        }
         throw new Error(`HTTP ${res.status} ${res.statusText}`);
     }
     return res.json();
@@ -162,7 +188,7 @@ function normalizeMetric(raw) {
 // ── useOtelTraces ───────────────────────────────────────────────────
 /** Fetch a list of traces / spans from the OTEL service. */
 export function useOtelTraces(options) {
-    const { token, baseUrl = '', serviceName, limit = 50, autoRefreshMs, } = options;
+    const { token, baseUrl = coreStore.getState().configuration.otelRunUrl, serviceName, limit = 50, autoRefreshMs, } = options;
     const [traces, setTraces] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -219,7 +245,7 @@ export function useOtelTrace(options) {
 // ── useOtelLogs ─────────────────────────────────────────────────────
 /** Fetch log records from the OTEL service. */
 export function useOtelLogs(options) {
-    const { token, baseUrl = '', serviceName, severity, traceId, limit = 100, autoRefreshMs, } = options;
+    const { token, baseUrl = coreStore.getState().configuration.otelRunUrl, serviceName, severity, traceId, limit = 100, autoRefreshMs, } = options;
     const [logs, setLogs] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -256,7 +282,7 @@ export function useOtelLogs(options) {
 // ── useOtelMetrics ──────────────────────────────────────────────────
 /** Fetch metrics from the OTEL service. */
 export function useOtelMetrics(options) {
-    const { token, baseUrl = '', serviceName, metricName, limit = 50, autoRefreshMs, } = options;
+    const { token, baseUrl = coreStore.getState().configuration.otelRunUrl, serviceName, metricName, limit = 50, autoRefreshMs, } = options;
     const [metrics, setMetrics] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -291,22 +317,38 @@ export function useOtelMetrics(options) {
 // ── useOtelServices ─────────────────────────────────────────────────
 /** Fetch list of observed service names. */
 export function useOtelServices(options) {
-    const { token, baseUrl = '' } = options;
+    const { token, baseUrl = coreStore.getState().configuration.otelRunUrl } = options;
     const [services, setServices] = useState([]);
     const [loading, setLoading] = useState(true);
     useEffect(() => {
-        otelFetch(`${baseUrl}/api/otel/v1/traces/services/list`, token)
+        otelFetch(`${baseUrl}/api/otel/v1/traces/services/list/`, token)
             .then(data => {
-            // Handle various response shapes:
-            // { services: ["a","b"] } | { data: [{service_name:"a"},...] } | ["a","b"]
-            let raw = data.services ?? data.data ?? data;
-            if (Array.isArray(raw) &&
-                raw.length > 0 &&
-                typeof raw[0] === 'object' &&
-                raw[0] !== null) {
-                raw = raw.map(r => (r.service_name ?? r.name ?? ''));
-            }
-            setServices(Array.isArray(raw) ? raw : []);
+            // Accept multiple backend response shapes and normalize to unique names.
+            // Examples:
+            // { services: ["a","b"] }
+            // { data: [{ service_name: "a" }] }
+            // { data: [{ service: "a" }] }
+            // ["a", "b"]
+            // [{ serviceName: "a" }]
+            const raw = data.services ?? data.data ?? data;
+            const rows = Array.isArray(raw) ? raw : [];
+            const names = rows
+                .map(row => {
+                if (typeof row === 'string') {
+                    return row.trim();
+                }
+                if (row && typeof row === 'object') {
+                    const record = row;
+                    const value = record.service_name ??
+                        record.serviceName ??
+                        record.service ??
+                        record.name;
+                    return value == null ? '' : String(value).trim();
+                }
+                return '';
+            })
+                .filter(Boolean);
+            setServices(Array.from(new Set(names)).sort((a, b) => a.localeCompare(b)));
         })
             .catch(() => { })
             .finally(() => setLoading(false));
@@ -394,7 +436,7 @@ export function useOtelQuery(options) {
  * @returns `{ connected, error, close }` – reactive connection state.
  */
 export function useOtelWebSocket(options) {
-    const { baseUrl = '', token, autoReconnect = true, reconnectDelayMs = 3000, callbacks, } = options;
+    const { baseUrl = coreStore.getState().configuration.otelRunUrl, token, autoReconnect = true, reconnectDelayMs = 3000, callbacks, } = options;
     const [connected, setConnected] = useState(false);
     const [error, setError] = useState(null);
     const wsRef = useRef(null);

package/lib/otel/index.d.ts

@@ -1,25 +1,34 @@
 /**
- * OTEL React components for visualizing OpenTelemetry signals
- * (traces, logs, metrics) in a Logfire-inspired Live view.
+ * OTEL React components, hooks, and client for visualizing OpenTelemetry
+ * signals (traces, logs, metrics) in a Logfire-inspired Live view.
+ *
+ * Structure:
+ *  - `types`  – shared TypeScript types
+ *  - `utils`  – pure helpers (formatDuration, buildSpanTree, …)
+ *  - `hooks/` – React hooks that read from Datalayer config by default
+ *  - `client/`– Typed HTTP client (non-React, reads Datalayer config by default)
+ *  - `views/` – React view components
  *
  * @module otel
  */
 export type { OtelSpan, OtelLog, OtelMetric, OtelSpanEvent, OtelSpanLink, SignalType, OtelLiveProps, OtelTracesListProps, OtelSpanDetailProps, OtelTimelineProps, OtelLogsListProps, OtelMetricsListProps, OtelSpanTreeProps, OtelSearchBarProps, OtelTimelineRangeSliderProps, OtelQueryRow, OtelQueryResult, } from './types';
-export { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelStats, useOtelQuery, useOtelSystem, useOtelWebSocket, } from './hooks';
-export type { OtelWsMessage, OtelWsCallbacks } from './hooks';
-export { OtelTimeline } from './OtelTimeline';
-export { OtelTracesList } from './OtelTracesList';
-export { OtelSpanDetail } from './OtelSpanDetail';
-export { OtelSpanTree } from './OtelSpanTree';
-export { OtelLogsList } from './OtelLogsList';
-export { OtelSearchBar } from './OtelSearchBar';
-export { OtelMetricsList } from './OtelMetricsList';
-export { OtelMetricsChart } from './OtelMetricsChart';
-export type { OtelMetricsChartProps } from './OtelMetricsChart';
-export { OtelLive } from './OtelLive';
-export { OtelTimelineRangeSlider } from './OtelTimelineRangeSlider';
-export { OtelSqlView } from './OtelSqlView';
-export type { OtelSqlViewProps } from './OtelSqlView';
-export { OtelSystemView } from './OtelSystemView';
-export type { OtelSystemViewProps } from './OtelSystemView';
-export type { OtelSystemData, OtelSystemProcess, OtelSystemDisk, OtelSystemTable, } from './hooks';
+export { toMs, formatDuration, formatTime, serviceColor, kindColor, severityColor, severityVariant, buildSpanTree, flattenSpanTree, } from './utils';
+export { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelStats, useOtelQuery, useOtelSystem, useOtelWebSocket, setOtelOnUnauthorized, } from './hooks';
+export type { OtelWsMessage, OtelWsCallbacks, OtelSystemData, OtelSystemProcess, OtelSystemDisk, OtelSystemTable, } from './hooks';
+export { OtelClient, createOtelClient } from './client';
+export type { OtelClientOptions, FetchTracesOptions, FetchLogsOptions, FetchMetricsOptions, FetchMetricTotalOptions, } from './client';
+export { OtelLive } from './views';
+export { OtelTracesList } from './views';
+export { OtelSpanDetail } from './views';
+export { OtelSpanTree } from './views';
+export { OtelLogsList } from './views';
+export { OtelSearchBar } from './views';
+export { OtelMetricsList } from './views';
+export { OtelMetricsChart } from './views';
+export type { OtelMetricsChartProps } from './views';
+export { OtelTimeline } from './views';
+export { OtelTimelineRangeSlider } from './views';
+export { OtelSqlView } from './views';
+export type { OtelSqlViewProps } from './views';
+export { OtelSystemView } from './views';
+export type { OtelSystemViewProps } from './views';

package/lib/otel/index.js

@@ -2,18 +2,22 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-// Hooks
-export { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelStats, useOtelQuery, useOtelSystem, useOtelWebSocket, } from './hooks';
-// Components
-export { OtelTimeline } from './OtelTimeline';
-export { OtelTracesList } from './OtelTracesList';
-export { OtelSpanDetail } from './OtelSpanDetail';
-export { OtelSpanTree } from './OtelSpanTree';
-export { OtelLogsList } from './OtelLogsList';
-export { OtelSearchBar } from './OtelSearchBar';
-export { OtelMetricsList } from './OtelMetricsList';
-export { OtelMetricsChart } from './OtelMetricsChart';
-export { OtelLive } from './OtelLive';
-export { OtelTimelineRangeSlider } from './OtelTimelineRangeSlider';
-export { OtelSqlView } from './OtelSqlView';
-export { OtelSystemView } from './OtelSystemView';
+// ── Utils ─────────────────────────────────────────────────────────────────────
+export { toMs, formatDuration, formatTime, serviceColor, kindColor, severityColor, severityVariant, buildSpanTree, flattenSpanTree, } from './utils';
+// ── Hooks ─────────────────────────────────────────────────────────────────────
+export { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelStats, useOtelQuery, useOtelSystem, useOtelWebSocket, setOtelOnUnauthorized, } from './hooks';
+// ── Client ────────────────────────────────────────────────────────────────────
+export { OtelClient, createOtelClient } from './client';
+// ── Views ─────────────────────────────────────────────────────────────────────
+export { OtelLive } from './views';
+export { OtelTracesList } from './views';
+export { OtelSpanDetail } from './views';
+export { OtelSpanTree } from './views';
+export { OtelLogsList } from './views';
+export { OtelSearchBar } from './views';
+export { OtelMetricsList } from './views';
+export { OtelMetricsChart } from './views';
+export { OtelTimeline } from './views';
+export { OtelTimelineRangeSlider } from './views';
+export { OtelSqlView } from './views';
+export { OtelSystemView } from './views';

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

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

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

@@ -15,8 +15,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useCallback, useMemo, useEffect, useRef, } from 'react';
 import { Box, Text, Button, Label } from '@primer/react';
 import { GitBranchIcon, ClockIcon } from '@primer/octicons-react';
-import { coreStore } from '../state/substates/CoreState';
-import { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelWebSocket, } from './hooks';
+import { coreStore } from '../../state/substates/CoreState';
+import { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelWebSocket, } from '../hooks';
 import { OtelSearchBar } from './OtelSearchBar';
 import { OtelTimelineRangeSlider } from './OtelTimelineRangeSlider';
 import { OtelTracesList } from './OtelTracesList';
@@ -25,7 +25,7 @@ import { OtelMetricsList } from './OtelMetricsList';
 import { OtelSpanDetail } from './OtelSpanDetail';
 import { OtelTimeline } from './OtelTimeline';
 import { OtelSpanTree } from './OtelSpanTree';
-import { buildSpanTree } from './utils';
+import { buildSpanTree } from '../utils';
 // ── Helpers ─────────────────────────────────────────────────────────
 const BOTTOM_PANE_VIEWS = ['timeline', 'tree'];
 const HISTOGRAM_BUCKETS = 60;
@@ -116,6 +116,24 @@ export const OtelLive = ({ baseUrl = coreStore.getState().configuration.otelRunU
         autoRefreshMs,
     });
     const { services } = useOtelServices({ baseUrl, token });
+    const effectiveServices = useMemo(() => {
+        const fromApi = (services ?? []).map(s => s.trim()).filter(Boolean);
+        const fromTraces = (traces ?? [])
+            .map(s => (s.service_name ?? '').trim())
+            .filter(Boolean);
+        const fromLogs = (logs ?? [])
+            .map(l => (l.service_name ?? '').trim())
+            .filter(Boolean);
+        const fromMetrics = (metrics ?? [])
+            .map(m => (m.service_name ?? '').trim())
+            .filter(Boolean);
+        const fromSignal = signal === 'traces'
+            ? fromTraces
+            : signal === 'logs'
+                ? fromLogs
+                : fromMetrics;
+        return Array.from(new Set([...fromApi, ...fromSignal])).sort((a, b) => a.localeCompare(b));
+    }, [services, traces, logs, metrics, signal]);
     // ── WebSocket live updates ──
     // When a WS message arrives for a signal, refetch the corresponding hook
     // so the data stays fresh without polling.
@@ -281,7 +299,7 @@ export const OtelLive = ({ baseUrl = coreStore.getState().configuration.otelRunU
             borderColor: 'border.default',
             borderRadius: 2,
             overflow: 'hidden',
-        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0 }, children: [_jsx(Box, { sx: { flex: 1 }, children: _jsx(OtelSearchBar, { signal: signal, onSignalChange: setSignal, services: services ?? [], selectedService: service, onServiceChange: setService, query: query, onQueryChange: setQuery, onRefresh: handleRefresh, loading: signal === 'traces'
+        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0 }, children: [_jsx(Box, { sx: { flex: 1 }, children: _jsx(OtelSearchBar, { signal: signal, onSignalChange: setSignal, services: effectiveServices, selectedService: service, onServiceChange: setService, query: query, onQueryChange: setQuery, onRefresh: handleRefresh, loading: signal === 'traces'
                                 ? tracesLoading
                                 : signal === 'logs'
                                     ? logsLoading

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

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

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

@@ -15,7 +15,7 @@ import React, { useState } from 'react';
 import { Box, Text, Label, Spinner } from '@primer/react';
 import { Blankslate } from '@primer/react/experimental';
 import { LogIcon } from '@primer/octicons-react';
-import { formatTime, severityVariant } from './utils';
+import { formatTime, severityVariant } from '../utils';
 // ── helpers ─────────────────────────────────────────────────────────
 /** Severity badge using Primer Label, centered in its grid cell. */
 const Severity = ({ text }) => (_jsx(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Label, { size: "small", variant: severityVariant(text), children: text }) }));

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

@@ -12,7 +12,7 @@
  * @module otel/OtelMetricsChart
  */
 import React from 'react';
-import type { OtelMetric } from './types';
+import type { OtelMetric } from '../types';
 export interface OtelMetricsChartProps {
     metrics: OtelMetric[];
     /** Height per chart panel in px. Default 240. */

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

@@ -7,7 +7,7 @@
  * @module otel/OtelMetricsList
  */
 import React from 'react';
-import type { OtelMetric } from './types';
+import type { OtelMetric } from '../types';
 export interface OtelMetricsListProps {
     metrics: OtelMetric[];
     loading?: boolean;

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

@@ -15,7 +15,7 @@ import { useMemo, useState } from 'react';
 import { Box, Text, Label, Spinner, CounterLabel, SegmentedControl, } from '@primer/react';
 import { Blankslate } from '@primer/react/experimental';
 import { MeterIcon, ChevronDownIcon, ChevronRightIcon, GraphIcon, TableIcon, } from '@primer/octicons-react';
-import { formatTime } from './utils';
+import { formatTime } from '../utils';
 import { OtelMetricsChart } from './OtelMetricsChart';
 // ── Helpers ─────────────────────────────────────────────────────────
 /** Group metrics by metric_name. */

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

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

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

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

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

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text, IconButton, UnderlineNav, CounterLabel, Label, } from '@primer/react';
 import { XIcon, ChevronDownIcon, ChevronRightIcon, } from '@primer/octicons-react';
-import { formatDuration, buildSpanTree } from './utils';
+import { formatDuration, buildSpanTree } from '../utils';
 import { OtelSpanTree } from './OtelSpanTree';
 // ── Helpers ─────────────────────────────────────────────────────────
 /** Single key–value metadata row. */

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

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

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