@datalayer/core 1.0.2 → 1.0.11

package/lib/otel/views/OtelMetricsChart.js

@@ -0,0 +1,300 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as echarts from 'echarts';
+import ReactECharts from 'echarts-for-react';
+import { Box, Text, Label } from '@primer/react';
+// ── Gradient palette ────────────────────────────────────────────────
+const SERIES_COLORS = [
+    {
+        line: '#5470C6',
+        gradientStart: 'rgba(84,112,198,0.7)',
+        gradientEnd: 'rgba(84,112,198,0.02)',
+    },
+    {
+        line: '#91CC75',
+        gradientStart: 'rgba(145,204,117,0.7)',
+        gradientEnd: 'rgba(145,204,117,0.02)',
+    },
+    {
+        line: '#EE6666',
+        gradientStart: 'rgba(238,102,102,0.7)',
+        gradientEnd: 'rgba(238,102,102,0.02)',
+    },
+    {
+        line: '#FAC858',
+        gradientStart: 'rgba(250,200,88,0.7)',
+        gradientEnd: 'rgba(250,200,88,0.02)',
+    },
+    {
+        line: '#73C0DE',
+        gradientStart: 'rgba(115,192,222,0.7)',
+        gradientEnd: 'rgba(115,192,222,0.02)',
+    },
+    {
+        line: '#FC8452',
+        gradientStart: 'rgba(252,132,82,0.7)',
+        gradientEnd: 'rgba(252,132,82,0.02)',
+    },
+    {
+        line: '#9A60B4',
+        gradientStart: 'rgba(154,96,180,0.7)',
+        gradientEnd: 'rgba(154,96,180,0.02)',
+    },
+    {
+        line: '#EA7CCC',
+        gradientStart: 'rgba(234,124,204,0.7)',
+        gradientEnd: 'rgba(234,124,204,0.02)',
+    },
+];
+// ── Helpers ─────────────────────────────────────────────────────────
+/** Group metrics by metric_type, then by metric_name within each type. */
+function groupByType(metrics) {
+    const byType = new Map();
+    for (const m of metrics) {
+        const mtype = m.metric_type || 'other';
+        if (!byType.has(mtype))
+            byType.set(mtype, new Map());
+        const nameMap = byType.get(mtype);
+        const key = m.metric_name || '(unnamed)';
+        if (!nameMap.has(key))
+            nameMap.set(key, []);
+        nameMap.get(key).push({
+            ts: new Date(m.timestamp).getTime(),
+            value: m.value,
+        });
+    }
+    // Sort points chronologically within each name group.
+    for (const nameMap of byType.values()) {
+        for (const points of nameMap.values()) {
+            points.sort((a, b) => a.ts - b.ts);
+        }
+    }
+    return byType;
+}
+/** Human-friendly label for a metric type. */
+function typeTitle(mtype) {
+    switch (mtype) {
+        case 'sum':
+            return 'Counters (sum)';
+        case 'histogram':
+            return 'Histograms';
+        case 'gauge':
+            return 'Gauges';
+        case 'exponentialHistogram':
+            return 'Exponential Histograms';
+        default:
+            return mtype.charAt(0).toUpperCase() + mtype.slice(1);
+    }
+}
+/** Label variant for the type badge. */
+function typeVariant(mtype) {
+    switch (mtype) {
+        case 'gauge':
+            return 'accent';
+        case 'sum':
+            return 'attention';
+        case 'histogram':
+            return 'secondary';
+        case 'exponentialHistogram':
+            return 'success';
+        default:
+            return 'primary';
+    }
+}
+/** Preferred display order. Types not listed appear at the end. */
+const TYPE_ORDER = {
+    sum: 0,
+    histogram: 1,
+    gauge: 2,
+    exponentialHistogram: 3,
+};
+// ── Build ECharts option per type ──────────────────────────────────
+function buildOption(mtype, nameMap) {
+    const names = [...nameMap.keys()];
+    const baseLegend = {
+        data: names,
+        top: 6,
+        textStyle: { fontSize: 11 },
+    };
+    const baseGrid = { left: 50, right: 20, top: 40, bottom: 30 };
+    const baseTooltip = {
+        trigger: 'axis',
+        axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } },
+    };
+    const baseXAxis = {
+        type: 'time',
+        boundaryGap: false,
+        axisLine: { lineStyle: { color: '#ccc' } },
+        axisLabel: { fontSize: 10 },
+    };
+    const baseYAxis = {
+        type: 'value',
+        splitLine: { lineStyle: { type: 'dashed', color: '#e8e8e8' } },
+        axisLine: { show: false },
+        axisLabel: { fontSize: 10 },
+    };
+    if (mtype === 'histogram' || mtype === 'exponentialHistogram') {
+        // ── Bar chart ──
+        const series = names.map((name, idx) => {
+            const palette = SERIES_COLORS[idx % SERIES_COLORS.length];
+            const points = nameMap.get(name) ?? [];
+            return {
+                name,
+                type: 'bar',
+                barMaxWidth: 20,
+                itemStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: palette.gradientStart },
+                        { offset: 1, color: palette.line },
+                    ]),
+                    borderRadius: [2, 2, 0, 0],
+                },
+                emphasis: { focus: 'series' },
+                data: points.map(p => [p.ts, p.value]),
+            };
+        });
+        return {
+            tooltip: baseTooltip,
+            legend: baseLegend,
+            grid: baseGrid,
+            xAxis: { ...baseXAxis, boundaryGap: true },
+            yAxis: baseYAxis,
+            series,
+        };
+    }
+    if (mtype === 'gauge') {
+        // ── Simple line chart (no area) ──
+        const series = names.map((name, idx) => {
+            const palette = SERIES_COLORS[idx % SERIES_COLORS.length];
+            const points = nameMap.get(name) ?? [];
+            return {
+                name,
+                type: 'line',
+                smooth: true,
+                symbol: 'circle',
+                symbolSize: 5,
+                showSymbol: true,
+                lineStyle: { width: 2, color: palette.line },
+                itemStyle: { color: palette.line },
+                emphasis: { focus: 'series' },
+                data: points.map(p => [p.ts, p.value]),
+            };
+        });
+        return {
+            tooltip: baseTooltip,
+            legend: baseLegend,
+            grid: baseGrid,
+            xAxis: baseXAxis,
+            yAxis: baseYAxis,
+            series,
+        };
+    }
+    // ── Default (sum / other): area-line with gradient ──
+    const series = names.map((name, idx) => {
+        const palette = SERIES_COLORS[idx % SERIES_COLORS.length];
+        const points = nameMap.get(name) ?? [];
+        return {
+            name,
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: { width: 2, color: palette.line },
+            itemStyle: { color: palette.line },
+            areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: palette.gradientStart },
+                    { offset: 1, color: palette.gradientEnd },
+                ]),
+            },
+            emphasis: { focus: 'series' },
+            data: points.map(p => [p.ts, p.value]),
+        };
+    });
+    return {
+        tooltip: baseTooltip,
+        legend: baseLegend,
+        grid: baseGrid,
+        xAxis: baseXAxis,
+        yAxis: baseYAxis,
+        series,
+    };
+}
+function computeStats(nameMap) {
+    let total = 0;
+    let count = 0;
+    let startTs = null;
+    let endTs = null;
+    for (const points of nameMap.values()) {
+        for (const p of points) {
+            total += p.value;
+            count += 1;
+            if (startTs === null || p.ts < startTs)
+                startTs = p.ts;
+            if (endTs === null || p.ts > endTs)
+                endTs = p.ts;
+        }
+    }
+    return { total, count, startTs, endTs };
+}
+function formatTs(ts) {
+    return new Date(ts).toLocaleTimeString(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+    });
+}
+function formatDuration(ms) {
+    if (ms < 1000)
+        return `${ms}ms`;
+    const s = Math.round(ms / 1000);
+    if (s < 60)
+        return `${s}s`;
+    const m = Math.floor(s / 60);
+    const rem = s % 60;
+    return rem > 0 ? `${m}m ${rem}s` : `${m}m`;
+}
+// ── Component ───────────────────────────────────────────────────────
+export const OtelMetricsChart = ({ metrics, height = 240, }) => {
+    if (!metrics || metrics.length === 0) {
+        return (_jsx(ReactECharts, { echarts: echarts, option: {
+                title: {
+                    text: 'No metrics data',
+                    left: 'center',
+                    top: 'center',
+                    textStyle: { color: '#999', fontSize: 14, fontWeight: 'normal' },
+                },
+            }, style: { width: '100%', height: `${height}px` }, notMerge: true }));
+    }
+    const byType = groupByType(metrics);
+    // Sort types in a stable, user-friendly order.
+    const sortedTypes = [...byType.keys()].sort((a, b) => (TYPE_ORDER[a] ?? 99) - (TYPE_ORDER[b] ?? 99));
+    return (_jsx(Box, { sx: {
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: 2,
+        }, children: sortedTypes.map(mtype => {
+            const nameMap = byType.get(mtype);
+            const option = buildOption(mtype, nameMap);
+            const stats = computeStats(nameMap);
+            const durationMs = stats.startTs !== null && stats.endTs !== null
+                ? stats.endTs - stats.startTs
+                : null;
+            return (_jsxs(Box, { children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            px: 1,
+                            mb: 1,
+                        }, children: [_jsx(Label, { size: "small", variant: typeVariant(mtype), children: mtype }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'fg.muted' }, children: typeTitle(mtype) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: ["(", [...nameMap.keys()].join(', '), ")"] })] }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 3,
+                            px: 1,
+                            mb: 1,
+                        }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Sum:" }), ' ', stats.total.toLocaleString(undefined, {
+                                        maximumFractionDigits: 4,
+                                    })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Points:" }), ' ', stats.count] }), stats.startTs !== null && stats.endTs !== null && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Interval:" }), ' ', formatTs(stats.startTs), " \u2192 ", formatTs(stats.endTs), durationMs !== null && durationMs > 0 && (_jsxs(Text, { as: "span", sx: { color: 'fg.subtle' }, children: [' ', "(", formatDuration(durationMs), ")"] }))] }))] }), _jsx(ReactECharts, { echarts: echarts, option: option, style: { width: '100%', height: `${height}px` }, notMerge: true })] }, mtype));
+        }) }));
+};
+export default OtelMetricsChart;

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

@@ -0,0 +1,15 @@
+/**
+ * OtelMetricsList – Tabular view of metric data points grouped by
+ * metric name, with expandable rows showing individual data points.
+ *
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelMetricsList
+ */
+import React from 'react';
+import type { OtelMetric } from '../types';
+export interface OtelMetricsListProps {
+    metrics: OtelMetric[];
+    loading?: boolean;
+}
+export declare const OtelMetricsList: React.FC<OtelMetricsListProps>;

package/lib/otel/views/OtelMetricsList.js

@@ -0,0 +1,213 @@
+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.
+ */
+/**
+ * OtelMetricsList – Tabular view of metric data points grouped by
+ * metric name, with expandable rows showing individual data points.
+ *
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelMetricsList
+ */
+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 { OtelMetricsChart } from './OtelMetricsChart';
+// ── Helpers ─────────────────────────────────────────────────────────
+/** Group metrics by metric_name. */
+function groupByName(metrics) {
+    const map = new Map();
+    for (const m of metrics) {
+        const key = m.metric_name || '(unnamed)';
+        if (!map.has(key))
+            map.set(key, []);
+        const group = map.get(key);
+        if (group)
+            group.push(m);
+    }
+    return map;
+}
+/** Format a metric value with optional unit. */
+function formatValue(value, unit) {
+    const formatted = Number.isInteger(value) ? String(value) : value.toFixed(3);
+    return unit ? `${formatted} ${unit}` : formatted;
+}
+/** Map metric_type to a Primer Label variant. */
+function typeVariant(type) {
+    switch (type?.toLowerCase()) {
+        case 'gauge':
+            return 'accent';
+        case 'counter':
+        case 'sum':
+            return 'attention';
+        case 'histogram':
+            return 'secondary';
+        case 'exponentialhistogram':
+            return 'success';
+        default:
+            return 'primary';
+    }
+}
+// ── MetricGroup  ────────────────────────────────────────────────────
+const MetricGroup = ({ name, points }) => {
+    const [expanded, setExpanded] = useState(false);
+    const first = points[0];
+    // Compute stats
+    const stats = useMemo(() => {
+        const values = points.map(p => p.value);
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        const avg = values.reduce((a, b) => a + b, 0) / values.length;
+        const latest = values[values.length - 1];
+        const timestamps = points
+            .map(p => new Date(p.timestamp).getTime())
+            .filter(t => !isNaN(t));
+        const startTs = timestamps.length > 0 ? Math.min(...timestamps) : null;
+        const endTs = timestamps.length > 0 ? Math.max(...timestamps) : null;
+        return { min, max, avg, latest, startTs, endTs };
+    }, [points]);
+    return (_jsxs(Box, { sx: {
+            borderBottom: '1px solid',
+            borderColor: 'border.default',
+        }, children: [_jsxs(Box, { onClick: () => setExpanded(!expanded), sx: {
+                    display: 'grid',
+                    gridTemplateColumns: '20px 1fr auto auto auto auto',
+                    gap: 3,
+                    alignItems: 'center',
+                    px: 3,
+                    py: 2,
+                    cursor: 'pointer',
+                    ':hover': { bg: 'canvas.subtle' },
+                }, children: [expanded ? (_jsx(ChevronDownIcon, { size: 16 })) : (_jsx(ChevronRightIcon, { size: 16 })), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 0 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: name }), first?.metric_type && (_jsx(Label, { size: "small", variant: typeVariant(first.metric_type), children: first.metric_type })), first?.unit && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["(", first.unit, ")"] }))] }), stats.startTs !== null && stats.endTs !== null && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle', fontFamily: 'mono' }, children: [formatTime(new Date(stats.startTs).toISOString()), stats.startTs !== stats.endTs && (_jsxs(_Fragment, { children: [" \u2192 ", formatTime(new Date(stats.endTs).toISOString())] }))] }))] }), _jsxs(Box, { sx: { textAlign: 'right' }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "latest" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', fontFamily: 'mono', ml: 1 }, children: formatValue(stats.latest, first?.unit) })] }), _jsxs(Box, { sx: { textAlign: 'right' }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "avg" }), _jsx(Text, { sx: { fontSize: 1, fontFamily: 'mono', ml: 1 }, children: stats.avg.toFixed(2) })] }), _jsxs(Box, { sx: { textAlign: 'right' }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "min/max" }), _jsxs(Text, { sx: { fontSize: 1, fontFamily: 'mono', ml: 1 }, children: [stats.min.toFixed(1), "\u2013", stats.max.toFixed(1)] })] }), _jsx(CounterLabel, { children: points.length })] }), expanded && (_jsxs(Box, { sx: { bg: 'canvas.subtle' }, children: [_jsxs(Box, { sx: {
+                            display: 'grid',
+                            gridTemplateColumns: '20px 180px 1fr 140px 160px',
+                            gap: 3,
+                            px: 3,
+                            py: 1,
+                            borderTop: '1px solid',
+                            borderColor: 'border.muted',
+                        }, children: [_jsx(Box, {}), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "Time" }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "Service" }), _jsx(Text, { sx: {
+                                    fontSize: 0,
+                                    fontWeight: 'bold',
+                                    color: 'fg.muted',
+                                    textAlign: 'right',
+                                }, children: "Value" }), _jsx(Text, { sx: {
+                                    fontSize: 0,
+                                    fontWeight: 'bold',
+                                    color: 'fg.muted',
+                                    textAlign: 'right',
+                                }, children: "Attributes" })] }), points.map((point, idx) => (_jsx(MetricRow, { metric: point }, `${point.timestamp}-${idx}`)))] }))] }));
+};
+// ── MetricRow ───────────────────────────────────────────────────────
+const MetricRow = ({ metric }) => {
+    const [showAttrs, setShowAttrs] = useState(false);
+    const attrCount = metric.attributes
+        ? Object.keys(metric.attributes).length
+        : 0;
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                    display: 'grid',
+                    gridTemplateColumns: '20px 180px 1fr 140px 160px',
+                    gap: 3,
+                    alignItems: 'center',
+                    px: 3,
+                    py: 1,
+                    borderTop: '1px solid',
+                    borderColor: 'border.muted',
+                    ':hover': { bg: 'canvas.inset' },
+                }, children: [_jsx(Box, {}), _jsx(Text, { sx: { fontSize: 0, fontFamily: 'mono', color: 'fg.muted' }, children: formatTime(metric.timestamp) }), _jsx(Text, { sx: { fontSize: 0 }, children: metric.service_name }), _jsx(Text, { sx: {
+                            fontSize: 1,
+                            fontFamily: 'mono',
+                            fontWeight: 'bold',
+                            textAlign: 'right',
+                        }, children: formatValue(metric.value, metric.unit) }), _jsx(Box, { sx: { textAlign: 'right' }, children: attrCount > 0 ? (_jsxs(Label, { size: "small", variant: "secondary", onClick: (e) => {
+                                e.stopPropagation();
+                                setShowAttrs(!showAttrs);
+                            }, sx: { cursor: 'pointer' }, children: [attrCount, " attr", attrCount !== 1 ? 's' : ''] })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "\u2014" })) })] }), showAttrs && metric.attributes && (_jsx(Box, { sx: { px: 5, py: 2, bg: 'canvas.inset' }, children: _jsx(Box, { as: "pre", sx: {
+                        m: 0,
+                        fontSize: 0,
+                        fontFamily: 'mono',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word',
+                    }, children: JSON.stringify(metric.attributes, null, 2) }) }))] }));
+};
+// ── OtelMetricsList ─────────────────────────────────────────────────
+const COOKIE_KEY = 'otel_metrics_view';
+function readViewCookie() {
+    try {
+        const match = document.cookie.match(/(?:^|;\s*)otel_metrics_view=([^;]+)/);
+        if (match && (match[1] === 'chart' || match[1] === 'table'))
+            return match[1];
+    }
+    catch {
+        // ignore
+    }
+    return 'table';
+}
+function writeViewCookie(v) {
+    try {
+        document.cookie = `${COOKIE_KEY}=${v};path=/;max-age=31536000`;
+    }
+    catch {
+        // ignore
+    }
+}
+export const OtelMetricsList = ({ metrics, loading = false, }) => {
+    const [view, setView] = useState(readViewCookie);
+    const handleViewChange = (v) => {
+        writeViewCookie(v);
+        setView(v);
+    };
+    const grouped = useMemo(() => groupByName(metrics), [metrics]);
+    if (loading) {
+        return (_jsx(Box, { sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                p: 5,
+            }, children: _jsx(Spinner, { size: "medium" }) }));
+    }
+    if (metrics.length === 0) {
+        return (_jsxs(Blankslate, { children: [_jsx(Blankslate.Visual, { children: _jsx(MeterIcon, { size: 20 }) }), _jsx(Blankslate.Heading, { children: "No metrics yet" }), _jsx(Blankslate.Description, { children: "Generate some metrics or adjust the filters above." })] }));
+    }
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            minHeight: 0,
+            overflow: 'hidden',
+        }, children: [_jsx(Box, { sx: {
+                    flexShrink: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'flex-end',
+                    px: 3,
+                    py: 2,
+                    bg: 'canvas.subtle',
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                    zIndex: 0,
+                }, children: _jsxs(SegmentedControl, { "aria-label": "Metrics view", size: "small", onChange: (idx) => handleViewChange(idx === 0 ? 'chart' : 'table'), children: [_jsx(SegmentedControl.IconButton, { icon: GraphIcon, "aria-label": "Chart", selected: view === 'chart' }), _jsx(SegmentedControl.IconButton, { icon: TableIcon, "aria-label": "Table", selected: view === 'table' })] }) }), _jsx(Box, { sx: { flex: 1, minHeight: 0, overflow: 'auto' }, children: view === 'chart' ? (_jsx(Box, { sx: { px: 3, py: 2 }, children: _jsx(OtelMetricsChart, { metrics: metrics, height: 280 }) })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                display: 'grid',
+                                gridTemplateColumns: '20px 1fr auto auto auto auto',
+                                gap: 3,
+                                px: 3,
+                                py: 1,
+                                bg: 'canvas.subtle',
+                                borderBottom: '2px solid',
+                                borderColor: 'border.default',
+                                position: 'sticky',
+                                top: 0,
+                                zIndex: 1,
+                            }, children: [_jsx(Box, {}), ['Metric Name', 'Latest', 'Average', 'Min/Max', 'Points'].map((h, i) => (_jsx(Text, { sx: {
+                                        fontSize: 0,
+                                        fontWeight: 'bold',
+                                        color: 'fg.muted',
+                                        textTransform: 'uppercase',
+                                        letterSpacing: '0.05em',
+                                        textAlign: i === 0 ? undefined : 'right',
+                                    }, children: h }, h)))] }), [...grouped.entries()].map(([name, points]) => (_jsx(MetricGroup, { name: name, points: points }, name)))] })) })] }));
+};

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

@@ -0,0 +1,11 @@
+/**
+ * OtelSearchBar – Filter toolbar with signal-type tabs, service selector,
+ * query input, and refresh action.
+ *
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelSearchBar
+ */
+import React from 'react';
+import type { OtelSearchBarProps } from '../types';
+export declare const OtelSearchBar: React.FC<OtelSearchBarProps>;

package/lib/otel/views/OtelSearchBar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, SegmentedControl, ActionMenu, ActionList, TextInput, Button, } from '@primer/react';
+import { SyncIcon, SearchIcon } from '@primer/octicons-react';
+const SIGNALS = [
+    { value: 'traces', label: 'Traces' },
+    { value: 'logs', label: 'Logs' },
+    { value: 'metrics', label: 'Metrics' },
+];
+export const OtelSearchBar = ({ signal, onSignalChange, services, selectedService, onServiceChange, query, onQueryChange, onRefresh, loading, }) => {
+    const safeServices = Array.isArray(services) ? services : [];
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+            px: 3,
+            py: 2,
+            bg: 'canvas.subtle',
+            borderBottom: '1px solid',
+            borderColor: 'border.default',
+            flexWrap: 'wrap',
+        }, children: [_jsx(SegmentedControl, { "aria-label": "Signal type", size: "small", onChange: idx => onSignalChange(SIGNALS[idx].value), children: SIGNALS.map(s => (_jsx(SegmentedControl.Button, { selected: s.value === signal, "aria-label": s.label, children: s.label }, s.value))) }), _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { size: "small", variant: "invisible", children: selectedService || 'All services' }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsxs(ActionList, { selectionVariant: "single", children: [_jsx(ActionList.Item, { selected: selectedService === '', onSelect: () => onServiceChange(''), children: "All services" }), safeServices.length > 0 && _jsx(ActionList.Divider, {}), safeServices.map(svc => (_jsx(ActionList.Item, { selected: selectedService === svc, onSelect: () => onServiceChange(svc), children: svc }, svc)))] }) })] }), _jsx(Box, { sx: { flex: 1, minWidth: 180 }, children: _jsx(TextInput, { leadingVisual: SearchIcon, value: query, onChange: e => onQueryChange(e.target.value), placeholder: "Search spans, logs, metrics\u2026", size: "small", block: true, "aria-label": "Search telemetry" }) }), onRefresh && (_jsx(Button, { size: "small", leadingVisual: SyncIcon, onClick: onRefresh, disabled: loading, "aria-label": "Refresh", children: "Refresh" }))] }));
+};

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

@@ -0,0 +1,11 @@
+/**
+ * OtelSpanDetail – Detail panel for a selected span, with metadata,
+ * collapsible attributes, gen_ai arguments, events, and links.
+ *
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelSpanDetail
+ */
+import React from 'react';
+import type { OtelSpanDetailProps } from '../types';
+export declare const OtelSpanDetail: React.FC<OtelSpanDetailProps>;