@datalayer/core 1.2.17 → 1.2.19

package/lib/otel/live/tracer.js

@@ -0,0 +1,223 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** Random bytes as lowercase hex. */
+function cryptoHex(bytes) {
+    const values = new Uint8Array(bytes);
+    if (globalThis.crypto?.getRandomValues) {
+        globalThis.crypto.getRandomValues(values);
+    }
+    else {
+        for (let index = 0; index < bytes; index += 1) {
+            values[index] = Math.floor(Math.random() * 256);
+        }
+    }
+    return Array.from(values, value => value.toString(16).padStart(2, '0')).join('');
+}
+/** A W3C `traceparent` header for a span: `00-<trace>-<span>-01`. */
+export function traceparentOf(context) {
+    return `00-${context.trace_id}-${context.span_id}-01`;
+}
+/** Attributes without their `undefined` values. */
+function defined(attributes) {
+    const kept = {};
+    for (const [key, value] of Object.entries(attributes ?? {})) {
+        if (value !== undefined) {
+            kept[key] = value;
+        }
+    }
+    return kept;
+}
+/** Make a tracer for the page. */
+export function createOtelLiveTracer(options = {}) {
+    const serviceName = options.serviceName ?? 'browser';
+    const scopeName = options.scopeName ?? '@datalayer/core/otel/live';
+    const now = options.now ?? Date.now;
+    const limit = options.limit ?? 2000;
+    const randomHex = options.randomHex ?? cryptoHex;
+    const iso = (ms) => new Date(ms).toISOString();
+    let list = [];
+    /** The spans still open, by service, innermost last. */
+    const open = new Map();
+    const listeners = new Set();
+    let scheduled = false;
+    /** Bumped by `clear`: a span started before it is recorded no more. */
+    let generation = 0;
+    const notify = () => {
+        if (scheduled) {
+            return;
+        }
+        scheduled = true;
+        queueMicrotask(() => {
+            scheduled = false;
+            listeners.forEach(listener => listener());
+        });
+    };
+    const trim = () => {
+        let excess = list.length - limit;
+        if (excess <= 0) {
+            return;
+        }
+        list = list.filter(span => {
+            if (excess > 0 && !span.in_progress) {
+                excess -= 1;
+                return false;
+            }
+            return true;
+        });
+    };
+    const closeOpen = (service, spanId) => {
+        const stack = open.get(service);
+        if (!stack) {
+            return;
+        }
+        const kept = stack.filter(id => id !== spanId);
+        if (kept.length) {
+            open.set(service, kept);
+        }
+        else {
+            open.delete(service);
+        }
+    };
+    const tracer = {
+        serviceName,
+        startSpan(name, start = {}) {
+            const service = start.serviceName ?? serviceName;
+            const parent = start.parent === undefined
+                ? tracer.activeSpan(service)
+                : (start.parent ?? undefined);
+            const context = {
+                trace_id: parent?.trace_id ?? randomHex(16),
+                span_id: randomHex(8),
+            };
+            const startedAt = start.startTime ?? now();
+            const born = generation;
+            let current = {
+                trace_id: context.trace_id,
+                span_id: context.span_id,
+                ...(parent ? { parent_span_id: parent.span_id } : {}),
+                span_name: name,
+                service_name: service,
+                kind: start.kind ?? 'INTERNAL',
+                start_time: iso(startedAt),
+                end_time: iso(startedAt),
+                duration_ms: 0,
+                status_code: 'UNSET',
+                otel_scope_name: start.scopeName ?? scopeName,
+                attributes: defined(start.attributes),
+                events: [],
+                ...(start.links?.length ? { links: start.links } : {}),
+                in_progress: true,
+            };
+            list = [...list, current];
+            trim();
+            open.set(service, [...(open.get(service) ?? []), context.span_id]);
+            notify();
+            let ended = false;
+            const change = (next) => {
+                if (born !== generation) {
+                    return;
+                }
+                const updated = { ...current, ...next };
+                list = list.map(span => (span === current ? updated : span));
+                current = updated;
+                notify();
+            };
+            const span = {
+                context,
+                get ended() {
+                    return ended;
+                },
+                setAttribute(key, value) {
+                    span.setAttributes({ [key]: value });
+                },
+                setAttributes(attributes) {
+                    if (ended) {
+                        return;
+                    }
+                    change({
+                        attributes: { ...current.attributes, ...defined(attributes) },
+                    });
+                },
+                addEvent(eventName, attributes, time) {
+                    if (ended) {
+                        return;
+                    }
+                    const event = {
+                        name: eventName,
+                        timestamp: iso(time ?? now()),
+                        attributes: defined(attributes),
+                    };
+                    change({ events: [...(current.events ?? []), event] });
+                },
+                setStatus(code, message) {
+                    if (ended) {
+                        return;
+                    }
+                    change({
+                        status_code: code,
+                        ...(message ? { status_message: message } : {}),
+                    });
+                },
+                recordException(error, time) {
+                    const message = error instanceof Error ? error.message : String(error);
+                    span.addEvent('exception', {
+                        'exception.type': error instanceof Error ? error.name : typeof error,
+                        'exception.message': message,
+                        'exception.stacktrace': error instanceof Error ? error.stack : undefined,
+                    }, time);
+                    span.setStatus('ERROR', message);
+                },
+                updateName(next) {
+                    if (!ended) {
+                        change({ span_name: next });
+                    }
+                },
+                end(time) {
+                    if (ended) {
+                        return;
+                    }
+                    ended = true;
+                    closeOpen(service, context.span_id);
+                    const endedAt = Math.max(time ?? now(), startedAt);
+                    change({
+                        end_time: iso(endedAt),
+                        duration_ms: endedAt - startedAt,
+                        in_progress: false,
+                    });
+                },
+            };
+            return span;
+        },
+        activeSpan(service = serviceName) {
+            const stack = open.get(service);
+            const spanId = stack?.[stack.length - 1];
+            const span = spanId
+                ? list.find(candidate => candidate.span_id === spanId)
+                : undefined;
+            return span
+                ? { trace_id: span.trace_id, span_id: span.span_id }
+                : undefined;
+        },
+        spans() {
+            return list;
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        clear() {
+            generation += 1;
+            list = [];
+            open.clear();
+            notify();
+        },
+        exportSpans() {
+            return { exportedAt: iso(now()), spans: [...list] };
+        },
+    };
+    return tracer;
+}

package/lib/otel/live/useOtelLiveSpans.d.ts

@@ -0,0 +1,6 @@
+import type { OtelSpan } from '../types';
+import { type OtelLiveTracer } from './tracer';
+/** A tracer's spans, kept current; none without a tracer. */
+export declare function useOtelLiveSpans(tracer: OtelLiveTracer | null | undefined): readonly OtelSpan[];
+/** A tracer made once for a component (or the one given). */
+export declare function useOtelLiveTracer(given?: OtelLiveTracer | null, serviceName?: string): OtelLiveTracer;

package/lib/otel/live/useOtelLiveSpans.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * A live tracer's spans, kept current in a component.
+ *
+ * @module otel/live/useOtelLiveSpans
+ */
+import { useState, useSyncExternalStore } from 'react';
+import { createOtelLiveTracer } from './tracer.js';
+const NO_SPANS = [];
+const NO_SUBSCRIPTION = () => () => undefined;
+/** A tracer's spans, kept current; none without a tracer. */
+export function useOtelLiveSpans(tracer) {
+    return useSyncExternalStore(tracer ? tracer.subscribe : NO_SUBSCRIPTION, () => (tracer ? tracer.spans() : NO_SPANS), () => (tracer ? tracer.spans() : NO_SPANS));
+}
+/** A tracer made once for a component (or the one given). */
+export function useOtelLiveTracer(given, serviceName) {
+    const [own] = useState(() => given ?? createOtelLiveTracer({ serviceName }));
+    return given ?? own;
+}

package/lib/otel/types.d.ts

@@ -3,6 +3,7 @@
  *
  * @module otel/types
  */
+import type { ReactNode } from 'react';
 /** A single span in a trace. */
 export interface OtelSpan {
     trace_id: string;
@@ -20,6 +21,12 @@ export interface OtelSpan {
     attributes?: Record<string, unknown>;
     events?: OtelSpanEvent[];
     links?: OtelSpanLink[];
+    /**
+     * The span has started and not ended yet: a live, in-page span
+     * (`createOtelLiveTracer`). Its `end_time` is its `start_time` and its
+     * `duration_ms` 0 until it ends.
+     */
+    in_progress?: boolean;
     /** Nested children (computed client-side from parent_span_id). */
     children?: OtelSpan[];
     /** Depth in a span tree (computed client-side). */
@@ -96,6 +103,16 @@ export interface OtelTracesListProps {
     loading?: boolean;
     selectedSpanId?: string | null;
     onSelectSpan?: (span: OtelSpan) => void;
+    /** What is said while there is no span. */
+    emptyText?: string;
+    /** Narrower columns, for a panel beside other content. */
+    compact?: boolean;
+    /** Every span with children starts unfolded: a live record, read as it grows. */
+    defaultExpanded?: boolean;
+    /** A mark drawn before a span's name (an icon, an emoji). */
+    renderSpanMark?: (span: OtelSpan) => ReactNode;
+    /** A line that says what a span carried, drawn after its name. */
+    describeSpan?: (span: OtelSpan) => string | undefined;
 }
 /** Props for the span detail panel. */
 export interface OtelSpanDetailProps {

package/lib/otel/views/OtelLive.js

@@ -13,7 +13,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @module otel/OtelLive
  */
 import { useState, useCallback, useMemo, useEffect, useRef, } from 'react';
-import { Box, Text, Button, Label } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text, Button, Label } from '@primer/react';
 import { GitBranchIcon, ClockIcon } from '@primer/octicons-react';
 import { getOtelConsumeUrl } from '../../state/substates/CoreState.js';
 import { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelWebSocket, } from '../hooks/index.js';
@@ -287,70 +288,11 @@ export const OtelLive = ({ baseUrl = getOtelConsumeUrl(), wsBaseUrl, token, auto
             return ts >= s && ts <= e;
         });
     }, [metrics, isRangeActive, rangeStart, rangeEnd]);
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            flex: 1,
-            minHeight: 0,
-            height: '100%',
-            color: 'fg.default',
-            bg: 'canvas.default',
-            border: '1px solid',
-            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: effectiveServices, selectedService: service, onServiceChange: setService, query: query, onQueryChange: setQuery, onRefresh: handleRefresh, loading: signal === 'traces'
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", flex: 1, minHeight: 0, height: "100%", color: "fg.default", bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 0, children: [_jsx(Box, { 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
-                                    : metricsLoading }) }), _jsx(Box, { sx: { pr: 2, flexShrink: 0 }, children: _jsx(Label, { variant: wsConnected ? 'success' : 'secondary', size: "small", children: wsConnected ? '● Live' : '○ Polling' }) })] }), timelineBounds && rangeStart && rangeEnd && (_jsx(Box, { sx: {
-                    px: 3,
-                    pt: 2,
-                    pb: 1,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    bg: 'canvas.subtle',
-                    flexShrink: 0,
-                    position: 'relative',
-                    zIndex: 0,
-                }, children: _jsx(OtelTimelineRangeSlider, { timelineStart: timelineBounds.start, timelineEnd: timelineBounds.end, selectedStart: rangeStart, selectedEnd: rangeEnd, onRangeChange: handleRangeChange, histogram: histogram, height: 48, tickCount: 6 }) })), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            flex: hasDetail ? '0 0 55%' : '1 1 100%',
-                            minHeight: 0,
-                            overflow: 'hidden',
-                        }, children: [signal === 'traces' && (_jsx(OtelTracesList, { spans: filteredTraces, loading: tracesLoading, selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect })), signal === 'logs' && (_jsx(OtelLogsList, { logs: filteredLogs, loading: logsLoading, selectedLogIndex: selectedLogIdx, onSelectLog: handleLogSelect })), signal === 'metrics' && (_jsx(OtelMetricsList, { metrics: filteredMetrics, loading: metricsLoading }))] }), hasDetail && (_jsxs(Box, { sx: {
-                            flex: '0 0 45%',
-                            minHeight: 0,
-                            overflow: 'auto',
-                            borderLeft: '1px solid',
-                            borderColor: 'border.default',
-                        }, children: [signal === 'traces' && selectedSpan && (_jsx(OtelSpanDetail, { span: selectedSpan, traceSpans: traceSpans ?? undefined, onClose: handleCloseDetail })), signal === 'logs' && selectedLogIdx !== null && logs && (_jsxs(Box, { sx: { p: 3 }, children: [_jsxs(Box, { sx: {
-                                            display: 'flex',
-                                            justifyContent: 'space-between',
-                                            mb: 3,
-                                        }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Log Detail" }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleCloseDetail, children: "\u2715" })] }), _jsx(Box, { as: "pre", sx: {
-                                            m: 0,
-                                            fontSize: 1,
-                                            fontFamily: 'mono',
-                                            whiteSpace: 'pre-wrap',
-                                            wordBreak: 'break-word',
-                                        }, children: JSON.stringify(logs[selectedLogIdx], null, 2) })] }))] }))] }), signal === 'traces' && selectedSpan && spanTree.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            gap: 1,
-                            px: 3,
-                            py: 1,
-                            bg: 'canvas.subtle',
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                            flexShrink: 0,
-                        }, children: [_jsx(Button, { size: "small", variant: bottomPane === 'timeline' ? 'primary' : 'invisible', leadingVisual: ClockIcon, onClick: () => toggleBottomPane('timeline'), children: "Timeline" }), _jsx(Button, { size: "small", variant: bottomPane === 'tree' ? 'primary' : 'invisible', leadingVisual: GitBranchIcon, onClick: () => toggleBottomPane('tree'), children: "Span Tree" })] }), bottomPane && (_jsxs(Box, { sx: {
-                            height: 260,
-                            overflow: 'auto',
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                            flexShrink: 0,
-                        }, children: [bottomPane === 'timeline' && (_jsx(OtelTimeline, { spans: traceSpans ?? [], selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect })), bottomPane === 'tree' && (_jsx(OtelSpanTree, { spans: spanTree, selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect, defaultExpandDepth: 3 }))] }))] }))] }));
+                                    : metricsLoading }) }), _jsx(Box, { pr: 2, flexShrink: 0, children: _jsx(Label, { variant: wsConnected ? 'success' : 'secondary', size: "small", children: wsConnected ? '● Live' : '○ Polling' }) })] }), timelineBounds && rangeStart && rangeEnd && (_jsx(Box, { px: 3, pt: 2, pb: 1, borderBottom: "1px solid", borderColor: "border.default", bg: "canvas.subtle", flexShrink: 0, position: "relative", zIndex: 0, children: _jsx(OtelTimelineRangeSlider, { timelineStart: timelineBounds.start, timelineEnd: timelineBounds.end, selectedStart: rangeStart, selectedEnd: rangeEnd, onRangeChange: handleRangeChange, histogram: histogram, height: 48, tickCount: 6 }) })), _jsxs(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: [_jsxs(Box, { display: "flex", flexDirection: "column", flex: hasDetail ? '0 0 55%' : '1 1 100%', minHeight: 0, overflow: "hidden", children: [signal === 'traces' && (_jsx(OtelTracesList, { spans: filteredTraces, loading: tracesLoading, selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect })), signal === 'logs' && (_jsx(OtelLogsList, { logs: filteredLogs, loading: logsLoading, selectedLogIndex: selectedLogIdx, onSelectLog: handleLogSelect })), signal === 'metrics' && (_jsx(OtelMetricsList, { metrics: filteredMetrics, loading: metricsLoading }))] }), hasDetail && (_jsxs(Box, { flex: "0 0 45%", minHeight: 0, overflow: "auto", borderLeft: "1px solid", borderColor: "border.default", children: [signal === 'traces' && selectedSpan && (_jsx(OtelSpanDetail, { span: selectedSpan, traceSpans: traceSpans ?? undefined, onClose: handleCloseDetail })), signal === 'logs' && selectedLogIdx !== null && logs && (_jsxs(Box, { p: 3, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", mb: 3, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Log Detail" }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleCloseDetail, children: "\u2715" })] }), _jsx(Box, { as: "pre", m: 0, fontSize: 1, fontFamily: "mono", whiteSpace: "pre-wrap", wordBreak: "break-word", children: JSON.stringify(logs[selectedLogIdx], null, 2) })] }))] }))] }), signal === 'traces' && selectedSpan && spanTree.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", gap: 1, px: 3, py: 1, bg: "canvas.subtle", borderTop: "1px solid", borderColor: "border.default", flexShrink: 0, children: [_jsx(Button, { size: "small", variant: bottomPane === 'timeline' ? 'primary' : 'invisible', leadingVisual: ClockIcon, onClick: () => toggleBottomPane('timeline'), children: "Timeline" }), _jsx(Button, { size: "small", variant: bottomPane === 'tree' ? 'primary' : 'invisible', leadingVisual: GitBranchIcon, onClick: () => toggleBottomPane('tree'), children: "Span Tree" })] }), bottomPane && (_jsxs(Box, { height: 260, overflow: "auto", borderTop: "1px solid", borderColor: "border.default", flexShrink: 0, children: [bottomPane === 'timeline' && (_jsx(OtelTimeline, { spans: traceSpans ?? [], selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect })), bottomPane === 'tree' && (_jsx(OtelSpanTree, { spans: spanTree, selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect, defaultExpandDepth: 3 }))] }))] }))] }));
 };
 // ── Client-side filter helpers ──────────────────────────────────────
 function filterSpans(spans, q) {

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

@@ -0,0 +1,52 @@
+/**
+ * OtelLiveSpans – the spans of a page's own tracer (`createOtelLiveTracer`),
+ * drawn as they happen: the traces list (each trace a tree, unfolded), and
+ * the selected span's detail (its attributes, events, trace tree, raw data).
+ *
+ * One service's own (`service`): what it did, and the calls made toward it
+ * (`peer.service`). Filters by facets (the service, the span kind, or any
+ * value a span carries); *Pause* holds the rows still while the record goes
+ * on, *Clear* empties it, *Export* saves the spans as JSON.
+ *
+ * @module otel/views/OtelLiveSpans
+ */
+import React from 'react';
+import type { OtelSpan } from '../types';
+import type { OtelLiveTracer } from '../live/tracer';
+/** A filter menu: the values a span has for it, each to keep or not. */
+export interface OtelSpanFacet {
+    label: string;
+    /** The span's value for it; `undefined` when it has none. */
+    value: (span: OtelSpan) => string | undefined;
+    /** A value, in words. */
+    name?: (value: string) => string;
+}
+/** The facets unless said: the service and the span kind. */
+export declare const DEFAULT_SPAN_FACETS: readonly OtelSpanFacet[];
+export interface OtelLiveSpansProps {
+    /** The tracer whose spans are drawn, kept current. */
+    tracer?: OtelLiveTracer | null;
+    /** Or the spans, as given. */
+    spans?: readonly OtelSpan[];
+    /** One service's own: done by it, or toward it. */
+    service?: string;
+    facets?: readonly OtelSpanFacet[];
+    /** Narrower columns, the detail under the list. */
+    compact?: boolean;
+    /** How tall the list grows before it scrolls. */
+    maxHeight?: number | string;
+    /** Where the selected span's detail goes. Default `below`. */
+    detailPlacement?: 'below' | 'side';
+    /** What is said while there is no span. */
+    emptyText?: string;
+    /** The file the spans are exported as, without `.json`. */
+    exportName?: string;
+    /** The toolbar's name. */
+    label?: string;
+    renderSpanMark?: (span: OtelSpan) => React.ReactNode;
+    describeSpan?: (span: OtelSpan) => string | undefined;
+}
+/** The spans each facet keeps: an empty selection keeps every value. */
+export declare function filterSpansByFacets(spans: readonly OtelSpan[], facets: readonly OtelSpanFacet[], selected: readonly ReadonlySet<string>[]): OtelSpan[];
+export declare const OtelLiveSpans: React.FC<OtelLiveSpansProps>;
+export default OtelLiveSpans;

package/lib/otel/views/OtelLiveSpans.js

@@ -0,0 +1,114 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OtelLiveSpans – the spans of a page's own tracer (`createOtelLiveTracer`),
+ * drawn as they happen: the traces list (each trace a tree, unfolded), and
+ * the selected span's detail (its attributes, events, trace tree, raw data).
+ *
+ * One service's own (`service`): what it did, and the calls made toward it
+ * (`peer.service`). Filters by facets (the service, the span kind, or any
+ * value a span carries); *Pause* holds the rows still while the record goes
+ * on, *Clear* empties it, *Export* saves the spans as JSON.
+ *
+ * @module otel/views/OtelLiveSpans
+ */
+import { useMemo, useState } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { ActionList, ActionMenu, Button, Text } from '@primer/react';
+import { DownloadIcon, PauseIcon, PlayIcon, TrashIcon, } from '@primer/octicons-react';
+import { toMs } from '../utils.js';
+import { spansOfService } from '../live/filter.js';
+import { useOtelLiveSpans } from '../live/useOtelLiveSpans.js';
+import { OtelTracesList } from './OtelTracesList.js';
+import { OtelSpanDetail } from './OtelSpanDetail.js';
+/** The facets unless said: the service and the span kind. */
+export const DEFAULT_SPAN_FACETS = [
+    { label: 'Service', value: span => span.service_name },
+    { label: 'Kind', value: span => span.kind },
+];
+/** The spans each facet keeps: an empty selection keeps every value. */
+export function filterSpansByFacets(spans, facets, selected) {
+    return spans.filter(span => facets.every((facet, index) => {
+        const values = selected[index];
+        if (!values?.size)
+            return true;
+        const value = facet.value(span);
+        return value !== undefined && values.has(value);
+    }));
+}
+function toggle(set, value) {
+    const next = new Set(set);
+    if (next.has(value)) {
+        next.delete(value);
+    }
+    else {
+        next.add(value);
+    }
+    return next;
+}
+function FacetMenu({ facet, options, selected, onChange, }) {
+    const name = facet.name ?? ((value) => value);
+    return (_jsxs(ActionMenu, { children: [_jsxs(ActionMenu.Button, { size: "small", "data-otel-facet": facet.label.toLowerCase(), children: [facet.label, selected.size ? ` · ${selected.size}` : ''] }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsxs(ActionList, { selectionVariant: "multiple", "aria-label": facet.label, children: [_jsx(ActionList.Item, { selected: !selected.size, onSelect: () => onChange(new Set()), children: "All" }), _jsx(ActionList.Divider, {}), options.map(option => (_jsx(ActionList.Item, { selected: selected.has(option), onSelect: () => onChange(toggle(selected, option)), children: name(option) }, option)))] }) })] }));
+}
+/** Save the spans as a JSON file. */
+function download(name, record) {
+    const blob = new Blob([JSON.stringify(record, null, 2)], {
+        type: 'application/json',
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${name}.json`;
+    link.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+export const OtelLiveSpans = ({ tracer, spans: given, service, facets = DEFAULT_SPAN_FACETS, compact = false, maxHeight = 420, detailPlacement = 'below', emptyText = 'Nothing recorded yet.', exportName = 'otel-spans', label = 'Spans', renderSpanMark, describeSpan, }) => {
+    const live = useOtelLiveSpans(given ? null : tracer);
+    const everything = given ?? live;
+    const [clearedAt, setClearedAt] = useState(0);
+    const [held, setHeld] = useState(null);
+    const [selected, setSelected] = useState(() => facets.map(() => new Set()));
+    const [selectedSpanId, setSelectedSpanId] = useState(null);
+    const recorded = useMemo(() => {
+        const own = spansOfService(everything, service);
+        return clearedAt
+            ? own.filter(span => toMs(span.start_time) >= clearedAt)
+            : own;
+    }, [everything, service, clearedAt]);
+    const shown = held ?? recorded;
+    const waiting = held ? recorded.length - held.length : 0;
+    const options = useMemo(() => facets.map(facet => [
+        ...new Set(recorded
+            .map(span => facet.value(span))
+            .filter((value) => value !== undefined)),
+    ].sort()), [facets, recorded]);
+    const rows = useMemo(() => filterSpansByFacets(shown, facets, selected), [shown, facets, selected]);
+    // The selected span as it is now: a live span changes as it goes.
+    const selectedSpan = useMemo(() => selectedSpanId
+        ? (everything.find(span => span.span_id === selectedSpanId) ?? null)
+        : null, [everything, selectedSpanId]);
+    const traceSpans = useMemo(() => selectedSpan
+        ? everything.filter(span => span.trace_id === selectedSpan.trace_id)
+        : [], [everything, selectedSpan]);
+    const side = detailPlacement === 'side' && !compact;
+    return (_jsxs(Box, { "data-otel-live-spans": "", border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", color: "fg.default", minWidth: 0, children: [_jsxs(Box, { role: "toolbar", "aria-label": label, display: "flex", flexWrap: "wrap", gap: 2, alignItems: "center", p: 2, borderBottom: "1px solid", borderColor: "border.default", children: [facets.map((facet, index) => (_jsx(FacetMenu, { facet: facet, options: options[index] ?? [], selected: selected[index] ?? new Set(), onChange: next => setSelected(prev => facets.map((_, at) => at === index ? next : (prev[at] ?? new Set()))) }, facet.label))), _jsx(Box, { flex: 1 }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, "data-otel-span-count": "", children: [rows.length === shown.length
+                                ? `${rows.length} ${rows.length === 1 ? 'span' : 'spans'}`
+                                : `${rows.length} of ${shown.length}`, waiting > 0 ? ` · ${waiting} new` : ''] }), _jsx(Button, { size: "small", leadingVisual: held ? PlayIcon : PauseIcon, "aria-pressed": held !== null, onClick: () => setHeld(held ? null : recorded), "data-otel-pause": "", children: held ? 'Resume' : 'Pause' }), _jsx(Button, { size: "small", leadingVisual: TrashIcon, onClick: () => {
+                            setHeld(null);
+                            setSelectedSpanId(null);
+                            // One service's view of a shared record clears only itself.
+                            if (tracer && !given && !service) {
+                                tracer.clear();
+                            }
+                            else {
+                                setClearedAt(Date.now());
+                            }
+                        }, "data-otel-clear": "", children: "Clear" }), _jsx(Button, { size: "small", leadingVisual: DownloadIcon, disabled: !recorded.length, onClick: () => download(exportName, {
+                            exportedAt: new Date().toISOString(),
+                            spans: [...recorded],
+                        }), "data-otel-export": "", children: "Export" })] }), _jsxs(Box, { display: side ? 'grid' : 'block', gridTemplateColumns: side ? 'minmax(0, 3fr) minmax(0, 2fr)' : undefined, children: [_jsx(Box, { maxHeight: maxHeight, overflowY: "auto", minWidth: 0, children: _jsx(OtelTracesList, { spans: rows, selectedSpanId: selectedSpanId, onSelectSpan: span => setSelectedSpanId(span.span_id), emptyText: emptyText, compact: compact, defaultExpanded: true, renderSpanMark: renderSpanMark, describeSpan: describeSpan }) }), selectedSpan && (_jsx(Box, { "data-otel-live-detail": "", maxHeight: maxHeight, overflowY: "auto", minWidth: 0, borderTop: side ? 'none' : '1px solid', borderColor: "border.default", children: _jsx(OtelSpanDetail, { span: selectedSpan, traceSpans: traceSpans, onClose: () => setSelectedSpanId(null) }) }))] })] }));
+};
+export default OtelLiveSpans;