@datalayer/core 1.0.2 → 1.0.11

package/lib/otel/views/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/views/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/views/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/views/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>;

package/lib/otel/views/OtelTimelineRangeSlider.js

@@ -0,0 +1,338 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * 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 { useCallback, useRef, useState, useMemo } from 'react';
+import { Box, Text } from '@primer/react';
+// ── Helpers ─────────────────────────────────────────────────────────
+function clamp(v, min, max) {
+    return Math.max(min, Math.min(max, v));
+}
+function lerp(a, b, t) {
+    return a + (b - a) * t;
+}
+function defaultFormatTick(d) {
+    const h = d.getHours().toString().padStart(2, '0');
+    const m = d.getMinutes().toString().padStart(2, '0');
+    return `${h}:${m}`;
+}
+function generateTicks(start, end, count) {
+    const ticks = [];
+    const s = start.getTime();
+    const e = end.getTime();
+    for (let i = 0; i <= count; i++) {
+        ticks.push(new Date(lerp(s, e, i / count)));
+    }
+    return ticks;
+}
+// ── Component ───────────────────────────────────────────────────────
+export const OtelTimelineRangeSlider = ({ timelineStart, timelineEnd, selectedStart, selectedEnd, onRangeChange, onRangeCommit, tickCount = 8, formatTick = defaultFormatTick, height = 56, histogram, }) => {
+    const railRef = useRef(null);
+    const dragging = useRef(null);
+    const dragOrigin = useRef({ pct: 0, startPct: 0, endPct: 0 });
+    const [isDragging, setIsDragging] = useState(false);
+    const [hoverPct, setHoverPct] = useState(null);
+    // Compute percentages
+    const tlStart = timelineStart.getTime();
+    const tlEnd = timelineEnd.getTime();
+    const tlRange = tlEnd - tlStart || 1;
+    const startPct = ((selectedStart.getTime() - tlStart) / tlRange) * 100;
+    const endPct = ((selectedEnd.getTime() - tlStart) / tlRange) * 100;
+    const ticks = useMemo(() => generateTicks(timelineStart, timelineEnd, tickCount), [timelineStart, timelineEnd, tickCount]);
+    // Histogram bars
+    const histMax = useMemo(() => {
+        if (!histogram?.length)
+            return 0;
+        return Math.max(...histogram.map(h => h.count));
+    }, [histogram]);
+    // Convert pointer position to percentage
+    const pointerToPct = useCallback((clientX) => {
+        if (!railRef.current)
+            return 0;
+        const rect = railRef.current.getBoundingClientRect();
+        return clamp(((clientX - rect.left) / rect.width) * 100, 0, 100);
+    }, []);
+    const pctToDate = useCallback((pct) => new Date(tlStart + (pct / 100) * tlRange), [tlStart, tlRange]);
+    // ── Pointer handlers ──
+    const handlePointerDown = useCallback((e, target) => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.target.setPointerCapture(e.pointerId);
+        dragging.current = target;
+        const pct = pointerToPct(e.clientX);
+        dragOrigin.current = { pct, startPct, endPct };
+        setIsDragging(true);
+    }, [pointerToPct, startPct, endPct]);
+    const handlePointerMove = useCallback((e) => {
+        if (!dragging.current)
+            return;
+        const pct = pointerToPct(e.clientX);
+        const origin = dragOrigin.current;
+        let newStart = startPct;
+        let newEnd = endPct;
+        if (dragging.current === 'start') {
+            newStart = clamp(pct, 0, endPct - 1);
+        }
+        else if (dragging.current === 'end') {
+            newEnd = clamp(pct, startPct + 1, 100);
+        }
+        else if (dragging.current === 'track') {
+            const delta = pct - origin.pct;
+            const span = origin.endPct - origin.startPct;
+            let s = origin.startPct + delta;
+            let e = origin.endPct + delta;
+            if (s < 0) {
+                s = 0;
+                e = span;
+            }
+            if (e > 100) {
+                e = 100;
+                s = 100 - span;
+            }
+            newStart = s;
+            newEnd = e;
+        }
+        onRangeChange(pctToDate(newStart), pctToDate(newEnd));
+    }, [pointerToPct, startPct, endPct, onRangeChange, pctToDate]);
+    const handlePointerUp = useCallback((e) => {
+        if (!dragging.current)
+            return;
+        e.target.releasePointerCapture(e.pointerId);
+        dragging.current = null;
+        setIsDragging(false);
+        onRangeCommit?.(selectedStart, selectedEnd);
+    }, [selectedStart, selectedEnd, onRangeCommit]);
+    // Hover handlers – show dotted line + tooltip while not dragging
+    const handleMouseMove = useCallback((e) => {
+        if (dragging.current)
+            return;
+        setHoverPct(pointerToPct(e.clientX));
+    }, [pointerToPct]);
+    const handleMouseLeave = useCallback(() => {
+        setHoverPct(null);
+    }, []);
+    // Format date for hover tooltip (date + time with seconds)
+    const formatHoverDate = useCallback((pct) => {
+        const d = pctToDate(pct);
+        const date = d.toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+        const time = d.toLocaleTimeString(undefined, {
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+        });
+        return `${date}  ${time}`;
+    }, [pctToDate]);
+    // Rail click to jump
+    const handleRailClick = useCallback((e) => {
+        if (isDragging)
+            return;
+        const pct = pointerToPct(e.clientX);
+        // Jump the closer handle
+        const distToStart = Math.abs(pct - startPct);
+        const distToEnd = Math.abs(pct - endPct);
+        if (distToStart < distToEnd) {
+            const newStart = clamp(pct, 0, endPct - 1);
+            onRangeChange(pctToDate(newStart), selectedEnd);
+            onRangeCommit?.(pctToDate(newStart), selectedEnd);
+        }
+        else {
+            const newEnd = clamp(pct, startPct + 1, 100);
+            onRangeChange(selectedStart, pctToDate(newEnd));
+            onRangeCommit?.(selectedStart, pctToDate(newEnd));
+        }
+    }, [
+        isDragging,
+        pointerToPct,
+        startPct,
+        endPct,
+        onRangeChange,
+        onRangeCommit,
+        pctToDate,
+        selectedStart,
+        selectedEnd,
+    ]);
+    const RAIL_HEIGHT = height - 24; // Reserve 24px for tick labels
+    const HANDLE_WIDTH = 10;
+    const HANDLE_HEIGHT = RAIL_HEIGHT;
+    return (_jsxs(Box, { sx: {
+            width: '100%',
+            height,
+            px: 3,
+            py: 1,
+            userSelect: 'none',
+            bg: 'canvas.subtle',
+            borderBottom: '1px solid',
+            borderColor: 'border.default',
+        }, children: [_jsxs(Box, { ref: railRef, onClick: handleRailClick, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, sx: {
+                    position: 'relative',
+                    width: '100%',
+                    height: RAIL_HEIGHT,
+                    cursor: 'pointer',
+                }, children: [_jsx(Box, { sx: {
+                            position: 'absolute',
+                            inset: 0,
+                            bg: 'canvas.inset',
+                            borderRadius: 1,
+                            border: '1px solid',
+                            borderColor: 'border.muted',
+                        } }), _jsx(Box, { onPointerDown: e => handlePointerDown(e, 'track'), sx: {
+                            position: 'absolute',
+                            top: 0,
+                            bottom: 0,
+                            left: `${startPct}%`,
+                            width: `${endPct - startPct}%`,
+                            bg: 'accent.muted',
+                            opacity: 0.45,
+                            borderTop: '2px solid',
+                            borderBottom: '2px solid',
+                            borderColor: 'accent.fg',
+                            cursor: 'grab',
+                            zIndex: 2,
+                            transition: isDragging
+                                ? 'none'
+                                : 'left 0.05s ease, width 0.05s ease',
+                            ':active': { cursor: 'grabbing' },
+                        } }), histogram &&
+                        histMax > 0 &&
+                        histogram.map((h, i) => {
+                            const pct = ((h.time.getTime() - tlStart) / tlRange) * 100;
+                            const barWidth = 100 / (histogram.length || 1);
+                            const barH = (h.count / histMax) * 100;
+                            return (_jsx(Box, { sx: {
+                                    position: 'absolute',
+                                    bottom: 0,
+                                    left: `${pct}%`,
+                                    width: `${barWidth}%`,
+                                    height: `${barH}%`,
+                                    bg: 'accent.fg',
+                                    opacity: 0.35,
+                                    borderRadius: '1px 1px 0 0',
+                                    pointerEvents: 'none',
+                                    zIndex: 4,
+                                } }, i));
+                        }), _jsx(Box, { onPointerDown: e => handlePointerDown(e, 'start'), sx: {
+                            position: 'absolute',
+                            top: 0,
+                            left: `${startPct}%`,
+                            width: HANDLE_WIDTH,
+                            height: HANDLE_HEIGHT,
+                            ml: `-${HANDLE_WIDTH / 2}px`,
+                            bg: 'accent.fg',
+                            borderRadius: 1,
+                            cursor: 'ew-resize',
+                            zIndex: 3,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            transition: isDragging ? 'none' : 'left 0.05s ease',
+                            boxShadow: 'shadow.medium',
+                            ':hover': { bg: 'accent.emphasis' },
+                        }, children: _jsx(Box, { sx: {
+                                width: '2px',
+                                height: '40%',
+                                bg: 'fg.onEmphasis',
+                                borderRadius: 1,
+                            } }) }), _jsx(Box, { onPointerDown: e => handlePointerDown(e, 'end'), sx: {
+                            position: 'absolute',
+                            top: 0,
+                            left: `${endPct}%`,
+                            width: HANDLE_WIDTH,
+                            height: HANDLE_HEIGHT,
+                            ml: `-${HANDLE_WIDTH / 2}px`,
+                            bg: 'accent.fg',
+                            borderRadius: 1,
+                            cursor: 'ew-resize',
+                            zIndex: 3,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            transition: isDragging ? 'none' : 'left 0.05s ease',
+                            boxShadow: 'shadow.medium',
+                            ':hover': { bg: 'accent.emphasis' },
+                        }, children: _jsx(Box, { sx: {
+                                width: '2px',
+                                height: '40%',
+                                bg: 'fg.onEmphasis',
+                                borderRadius: 1,
+                            } }) }), hoverPct !== null && !isDragging && (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: `${hoverPct}%`,
+                                    width: '1px',
+                                    height: RAIL_HEIGHT,
+                                    borderLeft: '1px dashed',
+                                    borderColor: 'fg.default',
+                                    opacity: 0.55,
+                                    pointerEvents: 'none',
+                                    zIndex: 5,
+                                } }), _jsx(Box, { sx: {
+                                    position: 'absolute',
+                                    top: -36,
+                                    left: `${hoverPct}%`,
+                                    transform: 'translateX(-50%)',
+                                    bg: 'canvas.overlay',
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                    borderRadius: 2,
+                                    px: 2,
+                                    py: '2px',
+                                    pointerEvents: 'none',
+                                    zIndex: 10,
+                                    boxShadow: 'shadow.medium',
+                                    whiteSpace: 'nowrap',
+                                }, children: _jsx(Text, { sx: {
+                                        fontSize: '11px',
+                                        color: 'fg.default',
+                                        fontFamily: 'mono',
+                                        lineHeight: '18px',
+                                    }, children: formatHoverDate(hoverPct) }) })] })), ticks.map((t, i) => {
+                        const pct = ((t.getTime() - tlStart) / tlRange) * 100;
+                        return (_jsx(Box, { sx: {
+                                position: 'absolute',
+                                top: 0,
+                                left: `${pct}%`,
+                                width: '1px',
+                                height: RAIL_HEIGHT,
+                                bg: 'border.muted',
+                                pointerEvents: 'none',
+                                opacity: 0.5,
+                                zIndex: 1,
+                            } }, i));
+                    })] }), _jsx(Box, { sx: {
+                    position: 'relative',
+                    width: '100%',
+                    height: 20,
+                    mt: '2px',
+                }, children: ticks.map((t, i) => {
+                    const pct = ((t.getTime() - tlStart) / tlRange) * 100;
+                    return (_jsx(Text, { sx: {
+                            position: 'absolute',
+                            left: `${pct}%`,
+                            transform: 'translateX(-50%)',
+                            fontSize: '10px',
+                            color: 'fg.subtle',
+                            whiteSpace: 'nowrap',
+                            fontFamily: 'mono',
+                            lineHeight: '16px',
+                            pointerEvents: 'none',
+                        }, children: formatTick(t) }, i));
+                }) })] }));
+};

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

@@ -0,0 +1,13 @@
+/**
+ * OtelTracesList – Tabular list of spans with Time / Message / Scope / Duration
+ * columns, using Primer React components for consistent theming.
+ *
+ * Spans that share the same trace_id are grouped into collapsible trees:
+ * only root spans are shown initially; clicking a row with children
+ * expands / collapses the nested child rows (shown indented).
+ *
+ * @module otel/OtelTracesList
+ */
+import React from 'react';
+import type { OtelTracesListProps } from '../types';
+export declare const OtelTracesList: React.FC<OtelTracesListProps>;