@datalayer/core 1.0.2 → 1.0.11

package/lib/otel/views/OtelSpanDetail.js

@@ -0,0 +1,172 @@
+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.
+ */
+/**
+ * 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 { useState } from 'react';
+import { Box, Text, IconButton, UnderlineNav, CounterLabel, Label, } from '@primer/react';
+import { XIcon, ChevronDownIcon, ChevronRightIcon, } from '@primer/octicons-react';
+import { formatDuration, buildSpanTree } from '../utils';
+import { OtelSpanTree } from './OtelSpanTree';
+// ── Helpers ─────────────────────────────────────────────────────────
+/** Single key–value metadata row. */
+const MetadataRow = ({ label, value, mono = false }) => {
+    if (value === undefined || value === null || value === '')
+        return null;
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            py: 1,
+            borderBottom: '1px solid',
+            borderColor: 'border.muted',
+            gap: 2,
+        }, children: [_jsx(Text, { sx: {
+                    width: 140,
+                    minWidth: 140,
+                    color: 'fg.muted',
+                    fontSize: 1,
+                    fontWeight: 'bold',
+                }, children: label }), _jsx(Text, { sx: {
+                    fontSize: 1,
+                    fontFamily: mono ? 'mono' : 'normal',
+                    wordBreak: 'break-all',
+                }, children: String(value) })] }));
+};
+/** Collapsible section for nested JSON/attribute data with tree rendering. */
+const CollapsibleSection = ({ title, data, defaultOpen = false }) => {
+    const [open, setOpen] = useState(defaultOpen);
+    if (!data || Object.keys(data).length === 0)
+        return null;
+    return (_jsxs(Box, { sx: { mt: 3 }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                    cursor: 'pointer',
+                    py: 1,
+                    userSelect: 'none',
+                }, onClick: () => setOpen(!open), children: [open ? _jsx(ChevronDownIcon, { size: 16 }) : _jsx(ChevronRightIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: title }), _jsx(CounterLabel, { children: Object.keys(data).length })] }), open && (_jsx(Box, { sx: {
+                    bg: 'canvas.subtle',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    p: 2,
+                    mt: 1,
+                    overflowX: 'auto',
+                }, children: Object.entries(data).map(([key, val]) => (_jsx(AttributeRow, { attrKey: key, value: val, depth: 0 }, key))) }))] }));
+};
+/** Recursive attribute row – supports nested objects and arrays. */
+const AttributeRow = ({ attrKey, value, depth }) => {
+    const [open, setOpen] = useState(depth < 1);
+    const isObject = typeof value === 'object' && value !== null && !Array.isArray(value);
+    const isArray = Array.isArray(value);
+    const isNested = isObject || isArray;
+    return (_jsxs(Box, { sx: {
+            borderBottom: depth === 0 ? '1px solid' : 'none',
+            borderColor: 'border.muted',
+            pb: depth === 0 ? 1 : 0,
+            mb: depth === 0 ? 1 : 0,
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    gap: 2,
+                    py: 1,
+                    pl: depth * 16 + 'px',
+                    alignItems: 'flex-start',
+                }, children: [isNested ? (_jsx(Box, { sx: {
+                            cursor: 'pointer',
+                            color: 'fg.muted',
+                            userSelect: 'none',
+                            width: 16,
+                            flexShrink: 0,
+                        }, onClick: () => setOpen(!open), children: open ? (_jsx(ChevronDownIcon, { size: 12 })) : (_jsx(ChevronRightIcon, { size: 12 })) })) : (_jsx(Box, { sx: { width: 16, flexShrink: 0 } })), _jsx(Text, { sx: {
+                            color: 'accent.fg',
+                            fontSize: 1,
+                            fontFamily: 'mono',
+                            minWidth: 180,
+                            wordBreak: 'break-all',
+                            flexShrink: 0,
+                        }, children: attrKey }), !isNested && (_jsx(Text, { sx: {
+                            fontSize: 1,
+                            fontFamily: 'mono',
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                            color: typeof value === 'string' ? 'accent.emphasis' : 'attention.fg',
+                        }, children: typeof value === 'string' ? value : JSON.stringify(value) })), isNested && !open && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontFamily: 'mono' }, children: isArray
+                            ? `[${value.length} items]`
+                            : `{${Object.keys(value).length} keys}` }))] }), isNested && open && (_jsx(Box, { children: isArray
+                    ? value.map((item, idx) => (_jsx(AttributeRow, { attrKey: `[${idx}]`, value: item, depth: depth + 1 }, idx)))
+                    : Object.entries(value).map(([k, v]) => (_jsx(AttributeRow, { attrKey: k, value: v, depth: depth + 1 }, k))) }))] }));
+};
+// ── Main component ──────────────────────────────────────────────────
+export const OtelSpanDetail = ({ span, traceSpans, onClose, }) => {
+    const [activeTab, setActiveTab] = useState('details');
+    if (!span) {
+        return (_jsx(Box, { sx: { p: 5, color: 'fg.muted', textAlign: 'center' }, children: _jsx(Text, { children: "Select a span to view details." }) }));
+    }
+    // Separate gen_ai attributes from other attributes
+    const genAiAttrs = {};
+    const otherAttrs = {};
+    if (span.attributes) {
+        for (const [k, v] of Object.entries(span.attributes)) {
+            if (k.startsWith('gen_ai.') || k.startsWith('model_request')) {
+                genAiAttrs[k] = v;
+            }
+            else {
+                otherAttrs[k] = v;
+            }
+        }
+    }
+    // Build tree from traceSpans for tree tab
+    const tree = traceSpans && traceSpans.length > 0 ? buildSpanTree(traceSpans) : undefined;
+    return (_jsxs(Box, { sx: {
+            height: '100%',
+            overflow: 'auto',
+            borderLeft: '1px solid',
+            borderColor: 'border.default',
+            bg: 'canvas.default',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [_jsxs(Box, { sx: {
+                    px: 3,
+                    py: 2,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    bg: 'canvas.subtle',
+                    flexShrink: 0,
+                }, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: span.span_name }), onClose && (_jsx(IconButton, { icon: XIcon, "aria-label": "Close detail panel", variant: "invisible", size: "small", onClick: onClose }))] }), _jsxs(UnderlineNav, { "aria-label": "Span detail tabs", children: [_jsx(UnderlineNav.Item, { "aria-current": activeTab === 'details' ? 'page' : undefined, onClick: () => setActiveTab('details'), children: "Details" }), tree && (_jsx(UnderlineNav.Item, { "aria-current": activeTab === 'tree' ? 'page' : undefined, onClick: () => setActiveTab('tree'), children: "Trace Tree" })), _jsx(UnderlineNav.Item, { "aria-current": activeTab === 'raw' ? 'page' : undefined, onClick: () => setActiveTab('raw'), children: "Raw Data" })] }), _jsxs(Box, { sx: { flex: 1, overflow: 'auto' }, children: [activeTab === 'details' && (_jsxs(Box, { sx: { p: 3 }, children: [_jsx(MetadataRow, { label: "span_name", value: span.span_name }), _jsx(MetadataRow, { label: "service_name", value: span.service_name }), _jsx(MetadataRow, { label: "otel_scope_name", value: span.otel_scope_name }), _jsx(MetadataRow, { label: "kind", value: span.kind }), _jsx(MetadataRow, { label: "trace_id", value: span.trace_id, mono: true }), _jsx(MetadataRow, { label: "span_id", value: span.span_id, mono: true }), _jsx(MetadataRow, { label: "parent_span_id", value: span.parent_span_id, mono: true }), _jsx(MetadataRow, { label: "duration", value: formatDuration(span.duration_ms) }), _jsx(MetadataRow, { label: "start_time", value: span.start_time, mono: true }), _jsx(MetadataRow, { label: "end_time", value: span.end_time, mono: true }), _jsx(MetadataRow, { label: "status_code", value: span.status_code }), _jsx(MetadataRow, { label: "status_message", value: span.status_message }), _jsx(CollapsibleSection, { title: "Arguments", data: genAiAttrs, defaultOpen: Object.keys(genAiAttrs).length > 0 }), _jsx(CollapsibleSection, { title: "Attributes", data: otherAttrs }), span.events && span.events.length > 0 && (_jsxs(Box, { sx: { mt: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: "Events" }), _jsx(CounterLabel, { children: span.events.length })] }), span.events.map((ev, idx) => (_jsxs(Box, { sx: {
+                                            bg: 'canvas.subtle',
+                                            borderRadius: 2,
+                                            border: '1px solid',
+                                            borderColor: 'border.default',
+                                            p: 2,
+                                            mt: 2,
+                                        }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Label, { children: ev.name }), _jsx(Text, { sx: {
+                                                            fontSize: 0,
+                                                            color: 'fg.muted',
+                                                            fontFamily: 'mono',
+                                                        }, children: ev.timestamp })] }), ev.attributes && Object.keys(ev.attributes).length > 0 && (_jsx(Box, { sx: { mt: 1 }, children: Object.entries(ev.attributes).map(([k, v]) => (_jsx(AttributeRow, { attrKey: k, value: v, depth: 0 }, k))) }))] }, idx)))] })), span.links && span.links.length > 0 && (_jsxs(Box, { sx: { mt: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: "Links" }), _jsx(CounterLabel, { children: span.links.length })] }), span.links.map((link, idx) => (_jsxs(Text, { sx: {
+                                            display: 'block',
+                                            fontSize: 1,
+                                            fontFamily: 'mono',
+                                            py: 1,
+                                            borderBottom: '1px solid',
+                                            borderColor: 'border.muted',
+                                        }, children: ["trace: ", link.trace_id, " \u2192 span: ", link.span_id] }, idx)))] }))] })), activeTab === 'tree' && tree && (_jsx(OtelSpanTree, { spans: tree, selectedSpanId: span.span_id, defaultExpandDepth: 4 })), activeTab === 'raw' && (_jsx(Box, { as: "pre", sx: {
+                            p: 3,
+                            fontSize: 0,
+                            fontFamily: 'mono',
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                            m: 0,
+                            bg: 'canvas.subtle',
+                        }, children: JSON.stringify(span, null, 2) }))] })] }));
+};

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

@@ -0,0 +1,11 @@
+/**
+ * OtelSpanTree – Collapsible tree view of nested spans within a trace.
+ *
+ * Renders spans as an indented, expandable tree with duration bars.
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelSpanTree
+ */
+import React from 'react';
+import type { OtelSpanTreeProps } from '../types';
+export declare const OtelSpanTree: React.FC<OtelSpanTreeProps>;

package/lib/otel/views/OtelSpanTree.js

@@ -0,0 +1,176 @@
+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.
+ */
+/**
+ * OtelSpanTree – Collapsible tree view of nested spans within a trace.
+ *
+ * Renders spans as an indented, expandable tree with duration bars.
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelSpanTree
+ */
+import { useState, useMemo, useCallback } from 'react';
+import { Box, Text } from '@primer/react';
+import { ChevronDownIcon, ChevronRightIcon } from '@primer/octicons-react';
+import { formatDuration, serviceColor, toMs } from '../utils';
+const INDENT_PX = 20;
+const SpanNode = ({ span, depth, selectedSpanId, onSelectSpan, expandedIds, toggleExpanded, traceMinTime, traceDuration, }) => {
+    const hasChildren = (span.children?.length ?? 0) > 0;
+    const isExpanded = expandedIds.has(span.span_id);
+    const isSelected = selectedSpanId === span.span_id;
+    const color = serviceColor(span.service_name);
+    const startPct = ((toMs(span.start_time) - traceMinTime) / traceDuration) * 100;
+    const widthPct = Math.max(((span.duration_ms || 0) / traceDuration) * 100, 0.5);
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    height: 28,
+                    pl: `${depth * INDENT_PX}px`,
+                    pr: 2,
+                    cursor: 'pointer',
+                    bg: isSelected ? 'accent.subtle' : 'canvas.default',
+                    borderBottom: '1px solid',
+                    borderColor: 'border.muted',
+                    ':hover': {
+                        bg: isSelected ? 'accent.subtle' : 'canvas.subtle',
+                    },
+                }, onClick: () => onSelectSpan?.(span), children: [_jsx(Box, { sx: {
+                            width: 20,
+                            textAlign: 'center',
+                            color: 'fg.muted',
+                            userSelect: 'none',
+                            flexShrink: 0,
+                            cursor: hasChildren ? 'pointer' : 'default',
+                        }, onClick: e => {
+                            e.stopPropagation();
+                            if (hasChildren)
+                                toggleExpanded(span.span_id);
+                        }, children: hasChildren ? (isExpanded ? (_jsx(ChevronDownIcon, { size: 12 })) : (_jsx(ChevronRightIcon, { size: 12 }))) : (_jsx(Text, { sx: { color: 'fg.subtle', fontSize: 0 }, children: "\u00B7" })) }), _jsx(Box, { sx: {
+                            width: 8,
+                            height: 8,
+                            borderRadius: '50%',
+                            bg: color,
+                            flexShrink: 0,
+                            mr: 1,
+                        } }), _jsx(Text, { sx: {
+                            flex: '0 0 200px',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            fontSize: 1,
+                            fontWeight: isSelected ? 'bold' : 'normal',
+                        }, title: `${span.service_name} / ${span.span_name}`, children: span.span_name }), _jsx(Box, { sx: {
+                            flex: 1,
+                            position: 'relative',
+                            height: 12,
+                            bg: 'canvas.subtle',
+                            borderRadius: 1,
+                            mx: 2,
+                            overflow: 'hidden',
+                        }, children: _jsx(Box, { sx: {
+                                position: 'absolute',
+                                left: `${startPct}%`,
+                                width: `${widthPct}%`,
+                                height: '100%',
+                                bg: color,
+                                borderRadius: 1,
+                                opacity: isSelected ? 1 : 0.7,
+                            } }) }), _jsx(Text, { sx: {
+                            minWidth: 60,
+                            textAlign: 'right',
+                            fontSize: 0,
+                            fontFamily: 'mono',
+                            color: 'fg.muted',
+                            flexShrink: 0,
+                        }, children: formatDuration(span.duration_ms) })] }), hasChildren &&
+                isExpanded &&
+                span.children.map(child => (_jsx(SpanNode, { span: child, depth: depth + 1, selectedSpanId: selectedSpanId, onSelectSpan: onSelectSpan, expandedIds: expandedIds, toggleExpanded: toggleExpanded, traceMinTime: traceMinTime, traceDuration: traceDuration }, child.span_id)))] }));
+};
+export const OtelSpanTree = ({ spans, selectedSpanId, onSelectSpan, defaultExpandDepth = 2, }) => {
+    // Pre-compute which IDs should be expanded by default
+    const defaultExpanded = useMemo(() => {
+        const ids = new Set();
+        function walk(nodes, depth) {
+            for (const n of nodes) {
+                if (depth < defaultExpandDepth) {
+                    ids.add(n.span_id);
+                }
+                if (n.children)
+                    walk(n.children, depth + 1);
+            }
+        }
+        walk(spans, 0);
+        return ids;
+    }, [spans, defaultExpandDepth]);
+    const [expandedIds, setExpandedIds] = useState(defaultExpanded);
+    const toggleExpanded = useCallback((id) => {
+        setExpandedIds(prev => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
+    // Compute trace time bounds
+    const { traceMinTime, traceDuration } = useMemo(() => {
+        let min = Infinity;
+        let max = -Infinity;
+        function walk(nodes) {
+            for (const s of nodes) {
+                const start = toMs(s.start_time);
+                const end = toMs(s.end_time);
+                if (start < min)
+                    min = start;
+                if (end > max)
+                    max = end;
+                if (s.children)
+                    walk(s.children);
+            }
+        }
+        walk(spans);
+        if (min === Infinity)
+            return { traceMinTime: 0, traceDuration: 1 };
+        return { traceMinTime: min, traceDuration: max - min || 1 };
+    }, [spans]);
+    if (spans.length === 0) {
+        return (_jsx(Box, { sx: { p: 3, color: 'fg.muted', textAlign: 'center' }, children: _jsx(Text, { children: "No span tree to display." }) }));
+    }
+    return (_jsxs(Box, { sx: { width: '100%', overflow: 'auto' }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    height: 28,
+                    px: 2,
+                    borderBottom: '2px solid',
+                    borderColor: 'border.default',
+                    bg: 'canvas.subtle',
+                }, children: [_jsx(Box, { sx: { width: 20 } }), _jsx(Box, { sx: { width: 8, mr: 1 } }), _jsx(Text, { sx: {
+                            flex: '0 0 200px',
+                            fontSize: 0,
+                            fontWeight: 'bold',
+                            color: 'fg.muted',
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.05em',
+                        }, children: "Span" }), _jsx(Text, { sx: {
+                            flex: 1,
+                            mx: 2,
+                            fontSize: 0,
+                            fontWeight: 'bold',
+                            color: 'fg.muted',
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.05em',
+                        }, children: "Timeline" }), _jsx(Text, { sx: {
+                            minWidth: 60,
+                            textAlign: 'right',
+                            fontSize: 0,
+                            fontWeight: 'bold',
+                            color: 'fg.muted',
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.05em',
+                        }, children: "Duration" })] }), spans.map(root => (_jsx(SpanNode, { span: root, depth: 0, selectedSpanId: selectedSpanId, onSelectSpan: onSelectSpan, expandedIds: expandedIds, toggleExpanded: toggleExpanded, traceMinTime: traceMinTime, traceDuration: traceDuration }, root.span_id)))] }));
+};

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

@@ -0,0 +1,16 @@
+/**
+ * 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 React from 'react';
+export interface OtelSqlViewProps {
+    token?: string;
+    baseUrl?: string;
+}
+export declare const OtelSqlView: React.FC<OtelSqlViewProps>;

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