@datalayer/core 1.0.1 → 1.0.3

package/lib/otel/OtelSqlView.js

@@ -0,0 +1,239 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OtelSqlView – Ad-hoc DataFusion SQL query panel for the OTEL service.
+ *
+ * Features:
+ *  - Preset query dropdown (spans, logs, metrics)
+ *  - Query history persisted to cookie `otel_sql_history` (max 10 entries)
+ *  - ⌘/Ctrl + Enter to run
+ *
+ * Available tables: `spans`, `metrics`, `logs`.
+ */
+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';
+// ── Cookie helpers ────────────────────────────────────────────────
+const HISTORY_COOKIE = 'otel_sql_history';
+const HISTORY_MAX = 10;
+function readHistory() {
+    try {
+        const m = document.cookie.match(/(?:^|;\s*)otel_sql_history=([^;]+)/);
+        if (m)
+            return JSON.parse(decodeURIComponent(m[1]));
+    }
+    catch {
+        // ignore
+    }
+    return [];
+}
+function writeHistory(entries) {
+    try {
+        document.cookie = `${HISTORY_COOKIE}=${encodeURIComponent(JSON.stringify(entries))};path=/;max-age=31536000`;
+    }
+    catch {
+        // ignore
+    }
+}
+function pushHistory(sql, prev) {
+    const deduped = prev.filter(s => s !== sql);
+    return [sql, ...deduped].slice(0, HISTORY_MAX);
+}
+const PRESETS = [
+    {
+        group: 'Spans',
+        label: 'Recent spans',
+        sql: 'SELECT trace_id, operation_name, service_name, start_time_unix_nano\nFROM spans\nORDER BY start_time_unix_nano DESC\nLIMIT 20',
+    },
+    {
+        group: 'Spans',
+        label: 'Error spans',
+        sql: "SELECT trace_id, operation_name, service_name, status_code, status_message\nFROM spans\nWHERE status_code = 'ERROR'\nLIMIT 20",
+    },
+    {
+        group: 'Spans',
+        label: 'Span count by service',
+        sql: 'SELECT service_name, COUNT(*) AS span_count\nFROM spans\nGROUP BY service_name\nORDER BY span_count DESC',
+    },
+    {
+        group: 'Logs',
+        label: 'Recent logs',
+        sql: 'SELECT timestamp_unix_nano, severity_text, body, service_name\nFROM logs\nORDER BY timestamp_unix_nano DESC\nLIMIT 20',
+    },
+    {
+        group: 'Logs',
+        label: 'Error logs',
+        sql: "SELECT timestamp_unix_nano, severity_text, body, service_name\nFROM logs\nWHERE severity_text IN ('ERROR', 'FATAL')\nLIMIT 20",
+    },
+    {
+        group: 'Metrics',
+        label: 'Recent metrics',
+        sql: 'SELECT metric_name, value_double, metric_unit, service_name, timestamp_unix_nano\nFROM metrics\nORDER BY timestamp_unix_nano DESC\nLIMIT 20',
+    },
+    {
+        group: 'Metrics',
+        label: 'Distinct metric names',
+        sql: 'SELECT DISTINCT metric_name, metric_unit\nFROM metrics\nORDER BY metric_name',
+    },
+];
+const PRESET_GROUPS = Array.from(new Set(PRESETS.map(p => p.group)));
+export const OtelSqlView = ({ token, baseUrl = '', }) => {
+    const [sql, setSql] = useState(PRESETS[0].sql);
+    const [history, setHistory] = useState(() => readHistory());
+    const { rows, loading, error, execute, clear } = useOtelQuery({
+        token,
+        baseUrl,
+    });
+    const handleRun = useCallback(() => {
+        const trimmed = sql.trim();
+        if (!trimmed)
+            return;
+        const next = pushHistory(trimmed, history);
+        setHistory(next);
+        writeHistory(next);
+        execute(trimmed);
+    }, [sql, history, execute]);
+    const handleKeyDown = (e) => {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+            e.preventDefault();
+            handleRun();
+        }
+    };
+    const columns = rows.length > 0 ? Object.keys(rows[0]) : [];
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            minHeight: 0,
+            height: '100%',
+            gap: 3,
+            p: 4,
+            bg: 'canvas.default',
+            color: 'fg.default',
+            overflow: 'auto',
+        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }, children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { size: "small", children: "Preset queries" }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsx(ActionList, { children: PRESET_GROUPS.map(group => (_jsx(ActionList.Group, { title: group, children: PRESETS.filter(p => p.group === group).map(p => (_jsx(ActionList.Item, { onSelect: () => setSql(p.sql), children: p.label }, p.label))) }, group))) }) })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["\u2318 Enter to run \u00B7 Tables:", ' ', _jsx(Box, { as: "code", sx: { fontFamily: 'mono', fontSize: 0 }, children: "spans" }), ', ', _jsx(Box, { as: "code", sx: { fontFamily: 'mono', fontSize: 0 }, children: "metrics" }), ', ', _jsx(Box, { as: "code", sx: { fontFamily: 'mono', fontSize: 0 }, children: "logs" })] })] }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Textarea, { "aria-label": "SQL query", value: sql, onChange: e => setSql(e.target.value), onKeyDown: handleKeyDown, placeholder: "SELECT \u2026 FROM spans LIMIT 20", rows: 5, resize: "vertical", sx: { fontFamily: 'mono', fontSize: 1, width: '100%' } }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Button, { variant: "primary", onClick: handleRun, disabled: loading, size: "small", children: loading ? 'Running…' : 'Run' }), loading && _jsx(Spinner, { size: "small" })] })] }), error && (_jsx(Box, { sx: {
+                    p: 3,
+                    bg: 'danger.subtle',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: 'danger.muted',
+                }, children: _jsx(Text, { sx: { color: 'danger.fg', fontFamily: 'mono', fontSize: 1 }, children: error }) })), !error && rows.length > 0 && (_jsxs(Box, { children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(TableIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'fg.default' }, children: "Results" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 1 }, children: ["(", rows.length, " row", rows.length !== 1 ? 's' : '', ")"] }), _jsxs(Box, { as: "button", onClick: clear, title: "Clear results", sx: {
+                                    ml: 'auto',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 1,
+                                    px: 2,
+                                    py: '2px',
+                                    border: 'none',
+                                    borderRadius: 2,
+                                    bg: 'transparent',
+                                    color: 'fg.muted',
+                                    cursor: 'pointer',
+                                    fontSize: 0,
+                                    '&:hover': { color: 'danger.fg', bg: 'danger.subtle' },
+                                }, children: [_jsx(XCircleIcon, { size: 12 }), _jsx(Text, { sx: { fontSize: 0 }, children: "Clear" })] }), _jsxs(Box, { as: "button", onClick: () => {
+                                    const header = columns.join(',');
+                                    const body = rows
+                                        .map(row => columns
+                                        .map(col => {
+                                        const v = String(row[col] ?? '');
+                                        return v.includes(',') ||
+                                            v.includes('"') ||
+                                            v.includes('\n')
+                                            ? `"${v.replace(/"/g, '""')}"`
+                                            : v;
+                                    })
+                                        .join(','))
+                                        .join('\n');
+                                    const blob = new Blob([header + '\n' + body], {
+                                        type: 'text/csv',
+                                    });
+                                    const url = URL.createObjectURL(blob);
+                                    const a = document.createElement('a');
+                                    a.href = url;
+                                    a.download = 'otel-query-result.csv';
+                                    a.click();
+                                    URL.revokeObjectURL(url);
+                                }, title: "Download as CSV", sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 1,
+                                    px: 2,
+                                    py: '2px',
+                                    border: 'none',
+                                    borderRadius: 2,
+                                    bg: 'transparent',
+                                    color: 'fg.muted',
+                                    cursor: 'pointer',
+                                    fontSize: 0,
+                                    '&:hover': { color: 'accent.fg', bg: 'accent.subtle' },
+                                }, children: [_jsx(DownloadIcon, { size: 12 }), _jsx(Text, { sx: { fontSize: 0 }, children: "CSV" })] })] }), _jsx(Box, { sx: {
+                            flex: 1,
+                            minHeight: 200,
+                            overflow: 'auto',
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            borderRadius: 2,
+                        }, children: _jsxs(Box, { as: "table", sx: { width: '100%', borderCollapse: 'collapse' }, children: [_jsx(Box, { as: "thead", children: _jsx(Box, { as: "tr", sx: { bg: 'canvas.subtle' }, children: columns.map(col => (_jsx(Box, { as: "th", sx: {
+                                                px: 3,
+                                                py: 2,
+                                                textAlign: 'left',
+                                                fontWeight: 'bold',
+                                                fontSize: 0,
+                                                color: 'fg.muted',
+                                                borderBottom: '1px solid',
+                                                borderColor: 'border.default',
+                                                whiteSpace: 'nowrap',
+                                            }, children: col }, col))) }) }), _jsx(Box, { as: "tbody", children: rows.map((row, ri) => (_jsx(Box, { as: "tr", sx: {
+                                            '&:hover': { bg: 'canvas.subtle' },
+                                            '&:not(:last-child) td': {
+                                                borderBottom: '1px solid',
+                                                borderColor: 'border.muted',
+                                            },
+                                        }, children: columns.map(col => (_jsx(Box, { as: "td", sx: {
+                                                px: 3,
+                                                py: 2,
+                                                fontSize: 0,
+                                                fontFamily: 'mono',
+                                                maxWidth: '300px',
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                            }, children: String(row[col] ?? '') }, col))) }, ri))) })] }) })] })), !error && !loading && rows.length === 0 && (_jsx(Box, { sx: {
+                    flex: 1,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    color: 'fg.muted',
+                }, children: _jsx(Text, { sx: { fontSize: 1 }, children: "Run a query to see results." }) })), history.length > 0 && (_jsxs(Box, { children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(HistoryIcon, { size: 12 }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "History" })] }), _jsx(Box, { sx: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            borderRadius: 2,
+                            overflow: 'hidden',
+                        }, children: history.map((entry, i) => (_jsxs(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 2,
+                                px: 3,
+                                py: '6px',
+                                cursor: 'pointer',
+                                bg: i % 2 === 0 ? 'canvas.default' : 'canvas.subtle',
+                                borderTop: i > 0 ? '1px solid' : 'none',
+                                borderColor: 'border.muted',
+                                '&:hover': { bg: 'accent.subtle' },
+                            }, onClick: () => setSql(entry), children: [_jsx(Text, { sx: {
+                                        fontFamily: 'mono',
+                                        fontSize: 0,
+                                        color: 'fg.default',
+                                        flex: 1,
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                    }, children: entry.replace(/\s+/g, ' ') }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle', flexShrink: 0 }, children: "restore \u2191" })] }, i))) })] }))] }));
+};

package/lib/otel/OtelSystemView.d.ts

@@ -0,0 +1,15 @@
+/**
+ * OtelSystemView – System statistics panel for the OTEL service.
+ *
+ * Calls GET /api/otel/v1/system/ (platform_admin only) and renders:
+ *  - Process memory / CPU
+ *  - Disk usage
+ *  - Per-table row counts, distinct users and disk
+ *  - Total distinct users
+ */
+import React from 'react';
+export interface OtelSystemViewProps {
+    baseUrl?: string;
+    token?: string;
+}
+export declare const OtelSystemView: React.FC<OtelSystemViewProps>;

package/lib/otel/OtelSystemView.js

@@ -0,0 +1,75 @@
+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';
+// ── Helpers ───────────────────────────────────────────────────────
+function fmtBytes(bytes) {
+    if (bytes >= 1024 ** 3)
+        return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
+    if (bytes >= 1024 ** 2)
+        return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+    if (bytes >= 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${bytes} B`;
+}
+// ── Sub-components ────────────────────────────────────────────────
+const CARD_SX = {
+    bg: 'canvas.subtle',
+    border: '1px solid',
+    borderColor: 'border.default',
+    borderRadius: 2,
+    p: 3,
+    mb: 3,
+};
+const LABEL_SX = {
+    display: 'block',
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    mb: 1,
+};
+const GRID_SX = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
+    gap: 3,
+};
+const StatCell = ({ label, value }) => (_jsxs(Box, { children: [_jsx(Text, { sx: LABEL_SX, children: label }), _jsx(Text, { sx: { fontSize: 1, fontFamily: 'mono' }, children: value })] }));
+const SystemViewContent = ({ data }) => {
+    const { process: proc, disk, tables, total_distinct_users } = data;
+    return (_jsxs(Box, { children: [_jsxs(Box, { sx: CARD_SX, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', mb: 2, display: 'block' }, children: "Process" }), proc?.error ? (_jsx(Text, { sx: { color: 'attention.fg', fontSize: 0 }, children: proc.error })) : (_jsxs(Box, { sx: GRID_SX, children: [_jsx(StatCell, { label: "RSS Memory", value: fmtBytes(proc?.memory_rss_bytes ?? 0) }), _jsx(StatCell, { label: "VMS Memory", value: fmtBytes(proc?.memory_vms_bytes ?? 0) }), _jsx(StatCell, { label: "CPU", value: `${(proc?.cpu_percent ?? 0).toFixed(1)} %` }), _jsx(StatCell, { label: "Threads", value: String(proc?.num_threads ?? '?') })] }))] }), _jsxs(Box, { sx: CARD_SX, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', mb: 2, display: 'block' }, children: "Disk" }), disk?.error ? (_jsx(Text, { sx: { color: 'attention.fg', fontSize: 0 }, children: disk.error })) : (_jsxs(Box, { sx: GRID_SX, children: [_jsx(StatCell, { label: "Data Dir", value: disk?.data_dir ?? '?' }), _jsx(StatCell, { label: "Total", value: fmtBytes(disk?.total_bytes ?? 0) }), _jsx(StatCell, { label: "Used", value: `${fmtBytes(disk?.used_bytes ?? 0)} (${(disk?.used_percent ?? 0).toFixed(1)}%)` }), _jsx(StatCell, { label: "Free", value: fmtBytes(disk?.free_bytes ?? 0) })] }))] }), tables && Object.keys(tables).length > 0 && (_jsxs(Box, { sx: CARD_SX, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', mb: 2, display: 'block' }, children: "Tables" }), _jsxs(Box, { as: "table", sx: {
+                            width: '100%',
+                            borderCollapse: 'collapse',
+                            fontSize: 0,
+                            fontFamily: 'mono',
+                        }, children: [_jsx(Box, { as: "thead", children: _jsx(Box, { as: "tr", children: ['Table', 'Rows', 'Users', 'Disk'].map(h => (_jsx(Box, { as: "th", sx: {
+                                            textAlign: h === 'Table' ? 'left' : 'right',
+                                            pb: 1,
+                                            color: 'fg.muted',
+                                            fontWeight: 'bold',
+                                            borderBottom: '1px solid',
+                                            borderColor: 'border.default',
+                                        }, children: h }, h))) }) }), _jsx(Box, { as: "tbody", children: Object.entries(tables).map(([tbl, info]) => (_jsxs(Box, { as: "tr", children: [_jsx(Box, { as: "td", sx: { py: 1, pr: 3, color: 'accent.fg' }, children: tbl }), info?.error ? (_jsx(Box, { as: "td", colSpan: 3, sx: { color: 'danger.fg', py: 1 }, children: info.error })) : (_jsxs(_Fragment, { children: [_jsx(Box, { as: "td", sx: { textAlign: 'right', py: 1, pr: 3 }, children: (info.row_count ?? 0).toLocaleString() }), _jsx(Box, { as: "td", sx: { textAlign: 'right', py: 1, pr: 3 }, children: info.distinct_users ?? 0 }), _jsx(Box, { as: "td", sx: { textAlign: 'right', py: 1 }, children: fmtBytes(info.disk_bytes ?? 0) })] }))] }, tbl))) })] })] })), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Total distinct users across all tables:", ' ', _jsx(Text, { sx: { fontWeight: 'bold', color: 'fg.default' }, children: total_distinct_users ?? '?' })] })] }));
+};
+export const OtelSystemView = ({ baseUrl = '', token, }) => {
+    const { data, loading, error, refresh } = useOtelSystem({ baseUrl, token });
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            minHeight: 0,
+            overflow: 'auto',
+            p: 3,
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    mb: 3,
+                    flexShrink: 0,
+                }, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: "System Statistics" }), _jsx(Button, { size: "small", variant: "invisible", onClick: refresh, disabled: loading, leadingVisual: SyncIcon, children: "Refresh" })] }), loading && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading\u2026" })] })), !loading && error && (_jsx(Box, { sx: {
+                    bg: 'danger.subtle',
+                    border: '1px solid',
+                    borderColor: 'danger.muted',
+                    borderRadius: 2,
+                    p: 3,
+                }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: error }) })), !loading && !error && data && _jsx(SystemViewContent, { data: data }), !loading && !error && !data && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No data available." }))] }));
+};

package/lib/otel/OtelTimeline.d.ts

@@ -0,0 +1,11 @@
+/**
+ * OtelTimeline – Horizontal waterfall timeline for trace spans.
+ *
+ * Each span renders as a coloured bar positioned relative to the trace's
+ * overall time window. Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelTimeline
+ */
+import React from 'react';
+import type { OtelTimelineProps } from './types';
+export declare const OtelTimeline: React.FC<OtelTimelineProps>;

package/lib/otel/OtelTimeline.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OtelTimeline – Horizontal waterfall timeline for trace spans.
+ *
+ * Each span renders as a coloured bar positioned relative to the trace's
+ * overall time window. Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelTimeline
+ */
+import { useMemo } from 'react';
+import { Box, Text } from '@primer/react';
+import { toMs, formatDuration, serviceColor } from './utils';
+export const OtelTimeline = ({ spans, barHeight = 24, selectedSpanId, onSelectSpan, }) => {
+    const { minTime, maxTime, sortedSpans } = useMemo(() => {
+        if (spans.length === 0)
+            return { minTime: 0, maxTime: 1, sortedSpans: [] };
+        const sorted = [...spans].sort((a, b) => toMs(a.start_time) - toMs(b.start_time));
+        let min = Infinity;
+        let max = -Infinity;
+        for (const s of sorted) {
+            const start = toMs(s.start_time);
+            const end = toMs(s.end_time);
+            if (start < min)
+                min = start;
+            if (end > max)
+                max = end;
+        }
+        return {
+            minTime: min,
+            maxTime: max || min + 1,
+            sortedSpans: sorted,
+        };
+    }, [spans]);
+    const totalDuration = maxTime - minTime || 1;
+    if (sortedSpans.length === 0) {
+        return (_jsx(Box, { sx: { p: 3, color: 'fg.muted', textAlign: 'center' }, children: _jsx(Text, { children: "No spans to display." }) }));
+    }
+    return (_jsxs(Box, { sx: { width: '100%', overflowX: 'auto', py: 1 }, children: [sortedSpans.map(span => {
+                const startOffset = ((toMs(span.start_time) - minTime) / totalDuration) * 100;
+                const width = Math.max(((span.duration_ms || toMs(span.end_time) - toMs(span.start_time)) /
+                    totalDuration) *
+                    100, 0.4);
+                const color = serviceColor(span.service_name);
+                const isSelected = selectedSpanId === span.span_id;
+                const indent = (span.depth ?? 0) * 16;
+                return (_jsxs(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        height: barHeight,
+                        mb: '2px',
+                        cursor: 'pointer',
+                        bg: isSelected ? 'accent.subtle' : 'canvas.default',
+                        borderRadius: 1,
+                        ':hover': {
+                            bg: isSelected ? 'accent.subtle' : 'canvas.subtle',
+                        },
+                    }, onClick: () => onSelectSpan?.(span), title: `${span.service_name} / ${span.span_name} — ${formatDuration(span.duration_ms)}`, children: [_jsx(Text, { sx: {
+                                width: 200,
+                                minWidth: 200,
+                                pl: `${indent}px`,
+                                pr: 2,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                fontSize: 1,
+                                fontFamily: 'mono',
+                                color: 'fg.muted',
+                            }, children: span.span_name }), _jsx(Box, { sx: { flex: 1, position: 'relative', height: '100%' }, children: _jsx(Box, { sx: {
+                                    position: 'absolute',
+                                    left: `${startOffset}%`,
+                                    width: `${width}%`,
+                                    height: barHeight - 6,
+                                    top: '3px',
+                                    bg: color,
+                                    borderRadius: 1,
+                                    opacity: isSelected ? 1 : 0.8,
+                                    border: isSelected ? '2px solid' : 'none',
+                                    borderColor: 'accent.emphasis',
+                                } }) }), _jsx(Text, { sx: {
+                                minWidth: 64,
+                                textAlign: 'right',
+                                pl: 1,
+                                fontSize: 0,
+                                fontFamily: 'mono',
+                                color: 'fg.muted',
+                            }, children: formatDuration(span.duration_ms) })] }, span.span_id));
+            }), _jsxs(Box, { sx: {
+                    borderTop: '1px solid',
+                    borderColor: 'border.default',
+                    mt: 2,
+                    pt: 2,
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    fontSize: 0,
+                    color: 'fg.muted',
+                }, children: [_jsxs(Text, { children: [sortedSpans.length, " span", sortedSpans.length !== 1 ? 's' : ''] }), _jsxs(Text, { sx: { fontFamily: 'mono' }, children: ["Total: ", formatDuration(totalDuration)] })] })] }));
+};

package/lib/otel/OtelTimelineRangeSlider.d.ts

@@ -0,0 +1,16 @@
+/**
+ * OtelTimelineRangeSlider – A modern dual-handle timeline range slider
+ * for selecting time windows over OTEL signals.
+ *
+ * Built with Primer React `Box` / `Text` + native pointer events for
+ * smooth drag interaction.  Fully theme-aware — inherits all colors
+ * from the active Primer theme via CSS functional tokens.
+ *
+ * Inspired by react-timeline-range-slider (d3-scale + react-compound-slider)
+ * but implemented from scratch with zero external dependencies beyond Primer.
+ *
+ * @module otel/OtelTimelineRangeSlider
+ */
+import React from 'react';
+import type { OtelTimelineRangeSliderProps } from './types';
+export declare const OtelTimelineRangeSlider: React.FC<OtelTimelineRangeSliderProps>;