@datalayer/core 1.2.17 → 1.2.19

package/lib/otel/views/OtelSqlView.js

@@ -14,7 +14,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Available tables: `spans`, `metrics`, `logs`.
  */
 import { useState, useCallback } from 'react';
-import { ActionList, ActionMenu, Box, Button, Text, Textarea, Spinner, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ActionList, ActionMenu, Button, Text, Textarea, Spinner, } from '@primer/react';
 import { HistoryIcon, TableIcon, XCircleIcon, DownloadIcon, } from '@primer/octicons-react';
 import { useOtelQuery } from '../hooks/index.js';
 // ── Cookie helpers ────────────────────────────────────────────────
@@ -104,38 +105,7 @@ export const OtelSqlView = ({ token, baseUrl = '', }) => {
         }
     };
     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: () => {
+    return (_jsxs(Box, { 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, { 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", fontFamily: "mono", fontSize: 0, children: "spans" }), ', ', _jsx(Box, { as: "code", fontFamily: "mono", fontSize: 0, children: "metrics" }), ', ', _jsx(Box, { as: "code", fontFamily: "mono", fontSize: 0, children: "logs" })] })] }), _jsxs(Box, { 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, { 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, { 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, { 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", 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
@@ -158,76 +128,12 @@ export const OtelSqlView = ({ token, baseUrl = '', }) => {
                                     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' },
+                                }, title: "Download as CSV", 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, { flex: 1, minHeight: 200, overflow: "auto", border: "1px solid", borderColor: "border.default", borderRadius: 2, children: _jsxs(Box, { as: "table", width: "100%", borderCollapse: "collapse", children: [_jsx(Box, { as: "thead", children: _jsx(Box, { as: "tr", bg: "canvas.subtle", children: columns.map(col => (_jsx(Box, { as: "th", 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", hover: { bg: 'canvas.subtle' }, sx: {
                                             '&: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: {
+                                        }, children: columns.map(col => (_jsx(Box, { as: "td", 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, { 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, { 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, { display: "flex", flexDirection: "column", border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", children: history.map((entry, i) => (_jsxs(Box, { 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',

package/lib/otel/views/OtelSystemView.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Button, Spinner, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Button, Spinner, Text } from '@primer/react';
 import { SyncIcon } from '@primer/octicons-react';
 import { useOtelSystem } from '../hooks/index.js';
 // ── Helpers ───────────────────────────────────────────────────────
@@ -36,40 +37,9 @@ const GRID_SX = {
 const StatCell = ({ label, value }) => (_jsxs(Box, { children: [_jsx(Text, { sx: LABEL_SX, children: label }), _jsx(Text, { sx: { fontSize: 1, fontFamily: 'mono' }, children: value })] }));
 const SystemViewContent = ({ data }) => {
     const { process: proc, disk, tables, total_distinct_users } = data;
-    return (_jsxs(Box, { children: [_jsxs(Box, { sx: CARD_SX, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', mb: 2, display: 'block' }, children: "Process" }), proc?.error ? (_jsx(Text, { sx: { color: 'attention.fg', fontSize: 0 }, children: proc.error })) : (_jsxs(Box, { sx: GRID_SX, children: [_jsx(StatCell, { label: "RSS Memory", value: fmtBytes(proc?.memory_rss_bytes ?? 0) }), _jsx(StatCell, { label: "VMS Memory", value: fmtBytes(proc?.memory_vms_bytes ?? 0) }), _jsx(StatCell, { label: "CPU", value: `${(proc?.cpu_percent ?? 0).toFixed(1)} %` }), _jsx(StatCell, { label: "Threads", value: String(proc?.num_threads ?? '?') })] }))] }), _jsxs(Box, { sx: CARD_SX, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', mb: 2, display: 'block' }, children: "Disk" }), disk?.error ? (_jsx(Text, { sx: { color: 'attention.fg', fontSize: 0 }, children: disk.error })) : (_jsxs(Box, { sx: GRID_SX, children: [_jsx(StatCell, { label: "Data Dir", value: disk?.data_dir ?? '?' }), _jsx(StatCell, { label: "Total", value: fmtBytes(disk?.total_bytes ?? 0) }), _jsx(StatCell, { label: "Used", value: `${fmtBytes(disk?.used_bytes ?? 0)} (${(disk?.used_percent ?? 0).toFixed(1)}%)` }), _jsx(StatCell, { label: "Free", value: fmtBytes(disk?.free_bytes ?? 0) })] }))] }), tables && Object.keys(tables).length > 0 && (_jsxs(Box, { sx: CARD_SX, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', mb: 2, display: 'block' }, children: "Tables" }), _jsxs(Box, { as: "table", sx: {
-                            width: '100%',
-                            borderCollapse: 'collapse',
-                            fontSize: 0,
-                            fontFamily: 'mono',
-                        }, children: [_jsx(Box, { as: "thead", children: _jsx(Box, { as: "tr", children: ['Table', 'Rows', 'Users', 'Disk'].map(h => (_jsx(Box, { as: "th", sx: {
-                                            textAlign: h === 'Table' ? 'left' : 'right',
-                                            pb: 1,
-                                            color: 'fg.muted',
-                                            fontWeight: 'bold',
-                                            borderBottom: '1px solid',
-                                            borderColor: 'border.default',
-                                        }, children: h }, h))) }) }), _jsx(Box, { as: "tbody", children: Object.entries(tables).map(([tbl, info]) => (_jsxs(Box, { as: "tr", children: [_jsx(Box, { as: "td", sx: { py: 1, pr: 3, color: 'accent.fg' }, children: tbl }), info?.error ? (_jsx(Box, { as: "td", colSpan: 3, sx: { color: 'danger.fg', py: 1 }, children: info.error })) : (_jsxs(_Fragment, { children: [_jsx(Box, { as: "td", sx: { textAlign: 'right', py: 1, pr: 3 }, children: (info.row_count ?? 0).toLocaleString() }), _jsx(Box, { as: "td", sx: { textAlign: 'right', py: 1, pr: 3 }, children: info.distinct_users ?? 0 }), _jsx(Box, { as: "td", sx: { textAlign: 'right', py: 1 }, children: fmtBytes(info.disk_bytes ?? 0) })] }))] }, tbl))) })] })] })), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Total distinct users across all tables:", ' ', _jsx(Text, { sx: { fontWeight: 'bold', color: 'fg.default' }, children: total_distinct_users ?? '?' })] })] }));
+    return (_jsxs(Box, { children: [_jsxs(Box, { ...CARD_SX, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', mb: 2, display: 'block' }, children: "Process" }), proc?.error ? (_jsx(Text, { sx: { color: 'attention.fg', fontSize: 0 }, children: proc.error })) : (_jsxs(Box, { ...GRID_SX, children: [_jsx(StatCell, { label: "RSS Memory", value: fmtBytes(proc?.memory_rss_bytes ?? 0) }), _jsx(StatCell, { label: "VMS Memory", value: fmtBytes(proc?.memory_vms_bytes ?? 0) }), _jsx(StatCell, { label: "CPU", value: `${(proc?.cpu_percent ?? 0).toFixed(1)} %` }), _jsx(StatCell, { label: "Threads", value: String(proc?.num_threads ?? '?') })] }))] }), _jsxs(Box, { ...CARD_SX, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', mb: 2, display: 'block' }, children: "Disk" }), disk?.error ? (_jsx(Text, { sx: { color: 'attention.fg', fontSize: 0 }, children: disk.error })) : (_jsxs(Box, { ...GRID_SX, children: [_jsx(StatCell, { label: "Data Dir", value: disk?.data_dir ?? '?' }), _jsx(StatCell, { label: "Total", value: fmtBytes(disk?.total_bytes ?? 0) }), _jsx(StatCell, { label: "Used", value: `${fmtBytes(disk?.used_bytes ?? 0)} (${(disk?.used_percent ?? 0).toFixed(1)}%)` }), _jsx(StatCell, { label: "Free", value: fmtBytes(disk?.free_bytes ?? 0) })] }))] }), tables && Object.keys(tables).length > 0 && (_jsxs(Box, { ...CARD_SX, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', mb: 2, display: 'block' }, children: "Tables" }), _jsxs(Box, { as: "table", width: "100%", borderCollapse: "collapse", fontSize: 0, fontFamily: "mono", children: [_jsx(Box, { as: "thead", children: _jsx(Box, { as: "tr", children: ['Table', 'Rows', 'Users', 'Disk'].map(h => (_jsx(Box, { as: "th", textAlign: h === 'Table' ? 'left' : 'right', pb: 1, color: "fg.muted", fontWeight: "bold", borderBottom: "1px solid", borderColor: "border.default", children: h }, h))) }) }), _jsx(Box, { as: "tbody", children: Object.entries(tables).map(([tbl, info]) => (_jsxs(Box, { as: "tr", children: [_jsx(Box, { as: "td", py: 1, pr: 3, color: "accent.fg", children: tbl }), info?.error ? (_jsx(Box, { as: "td", colSpan: 3, color: "danger.fg", py: 1, children: info.error })) : (_jsxs(_Fragment, { children: [_jsx(Box, { as: "td", textAlign: "right", py: 1, pr: 3, children: (info.row_count ?? 0).toLocaleString() }), _jsx(Box, { as: "td", textAlign: "right", py: 1, pr: 3, children: info.distinct_users ?? 0 }), _jsx(Box, { as: "td", textAlign: "right", py: 1, children: fmtBytes(info.disk_bytes ?? 0) })] }))] }, tbl))) })] })] })), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Total distinct users across all tables:", ' ', _jsx(Text, { sx: { fontWeight: 'bold', color: 'fg.default' }, children: total_distinct_users ?? '?' })] })] }));
 };
 export const OtelSystemView = ({ baseUrl = '', token, }) => {
     const { data, loading, error, refresh } = useOtelSystem({ baseUrl, token });
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            flex: 1,
-            minHeight: 0,
-            overflow: 'auto',
-            p: 3,
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    mb: 3,
-                    flexShrink: 0,
-                }, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: "System Statistics" }), _jsx(Button, { size: "small", variant: "invisible", onClick: refresh, disabled: loading, leadingVisual: SyncIcon, children: "Refresh" })] }), loading && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading\u2026" })] })), !loading && error && (_jsx(Box, { sx: {
-                    bg: 'danger.subtle',
-                    border: '1px solid',
-                    borderColor: 'danger.muted',
-                    borderRadius: 2,
-                    p: 3,
-                }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: error }) })), !loading && !error && data && _jsx(SystemViewContent, { data: data }), !loading && !error && !data && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No data available." }))] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", flex: 1, minHeight: 0, overflow: "auto", p: 3, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 3, flexShrink: 0, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: "System Statistics" }), _jsx(Button, { size: "small", variant: "invisible", onClick: refresh, disabled: loading, leadingVisual: SyncIcon, children: "Refresh" })] }), loading && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading\u2026" })] })), !loading && error && (_jsx(Box, { bg: "danger.subtle", border: "1px solid", borderColor: "danger.muted", borderRadius: 2, p: 3, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: error }) })), !loading && !error && data && _jsx(SystemViewContent, { data: data }), !loading && !error && !data && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No data available." }))] }));
 };

package/lib/otel/views/OtelTimeline.js

@@ -12,7 +12,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module otel/OtelTimeline
  */
 import { useMemo } from 'react';
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 import { toMs, formatDuration, serviceColor } from '../utils.js';
 export const OtelTimeline = ({ spans, barHeight = 24, selectedSpanId, onSelectSpan, }) => {
     const { minTime, maxTime, sortedSpans } = useMemo(() => {
@@ -37,9 +38,9 @@ export const OtelTimeline = ({ spans, barHeight = 24, selectedSpanId, onSelectSp
     }, [spans]);
     const totalDuration = maxTime - minTime || 1;
     if (sortedSpans.length === 0) {
-        return (_jsx(Box, { sx: { p: 3, color: 'fg.muted', textAlign: 'center' }, children: _jsx(Text, { children: "No spans to display." }) }));
+        return (_jsx(Box, { p: 3, color: "fg.muted", textAlign: "center", children: _jsx(Text, { children: "No spans to display." }) }));
     }
-    return (_jsxs(Box, { sx: { width: '100%', overflowX: 'auto', py: 1 }, children: [sortedSpans.map(span => {
+    return (_jsxs(Box, { width: "100%", overflowX: "auto", py: 1, children: [sortedSpans.map(span => {
                 const startOffset = ((toMs(span.start_time) - minTime) / totalDuration) * 100;
                 const width = Math.max(((span.duration_ms || toMs(span.end_time) - toMs(span.start_time)) /
                     totalDuration) *
@@ -47,18 +48,7 @@ export const OtelTimeline = ({ spans, barHeight = 24, selectedSpanId, onSelectSp
                 const color = serviceColor(span.service_name);
                 const isSelected = selectedSpanId === span.span_id;
                 const indent = (span.depth ?? 0) * 16;
-                return (_jsxs(Box, { sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        height: barHeight,
-                        mb: '2px',
-                        cursor: 'pointer',
-                        bg: isSelected ? 'accent.subtle' : 'canvas.default',
-                        borderRadius: 1,
-                        ':hover': {
-                            bg: isSelected ? 'accent.subtle' : 'canvas.subtle',
-                        },
-                    }, onClick: () => onSelectSpan?.(span), title: `${span.service_name} / ${span.span_name} — ${formatDuration(span.duration_ms)}`, children: [_jsx(Text, { sx: {
+                return (_jsxs(Box, { display: "flex", alignItems: "center", height: barHeight, mb: "2px", cursor: "pointer", bg: isSelected ? 'accent.subtle' : 'canvas.default', borderRadius: 1, hover: { bg: isSelected ? 'accent.subtle' : 'canvas.subtle' }, onClick: () => onSelectSpan?.(span), title: `${span.service_name} / ${span.span_name} — ${formatDuration(span.duration_ms)}`, children: [_jsx(Text, { sx: {
                                 width: 200,
                                 minWidth: 200,
                                 pl: `${indent}px`,
@@ -69,18 +59,7 @@ export const OtelTimeline = ({ spans, barHeight = 24, selectedSpanId, onSelectSp
                                 fontSize: 1,
                                 fontFamily: 'mono',
                                 color: 'fg.muted',
-                            }, children: span.span_name }), _jsx(Box, { sx: { flex: 1, position: 'relative', height: '100%' }, children: _jsx(Box, { sx: {
-                                    position: 'absolute',
-                                    left: `${startOffset}%`,
-                                    width: `${width}%`,
-                                    height: barHeight - 6,
-                                    top: '3px',
-                                    bg: color,
-                                    borderRadius: 1,
-                                    opacity: isSelected ? 1 : 0.8,
-                                    border: isSelected ? '2px solid' : 'none',
-                                    borderColor: 'accent.emphasis',
-                                } }) }), _jsx(Text, { sx: {
+                            }, children: span.span_name }), _jsx(Box, { flex: 1, position: "relative", height: "100%", children: _jsx(Box, { position: "absolute", left: `${startOffset}%`, width: `${width}%`, height: barHeight - 6, top: "3px", bg: color, borderRadius: 1, opacity: isSelected ? 1 : 0.8, border: isSelected ? '2px solid' : 'none', borderColor: "accent.emphasis" }) }), _jsx(Text, { sx: {
                                 minWidth: 64,
                                 textAlign: 'right',
                                 pl: 1,
@@ -88,14 +67,5 @@ export const OtelTimeline = ({ spans, barHeight = 24, selectedSpanId, onSelectSp
                                 fontFamily: 'mono',
                                 color: 'fg.muted',
                             }, children: formatDuration(span.duration_ms) })] }, span.span_id));
-            }), _jsxs(Box, { sx: {
-                    borderTop: '1px solid',
-                    borderColor: 'border.default',
-                    mt: 2,
-                    pt: 2,
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    fontSize: 0,
-                    color: 'fg.muted',
-                }, children: [_jsxs(Text, { children: [sortedSpans.length, " span", sortedSpans.length !== 1 ? 's' : ''] }), _jsxs(Text, { sx: { fontFamily: 'mono' }, children: ["Total: ", formatDuration(totalDuration)] })] })] }));
+            }), _jsxs(Box, { borderTop: "1px solid", borderColor: "border.default", mt: 2, pt: 2, display: "flex", justifyContent: "space-between", fontSize: 0, color: "fg.muted", children: [_jsxs(Text, { children: [sortedSpans.length, " span", sortedSpans.length !== 1 ? 's' : ''] }), _jsxs(Text, { sx: { fontFamily: 'mono' }, children: ["Total: ", formatDuration(totalDuration)] })] })] }));
 };

package/lib/otel/views/OtelTimelineRangeSlider.js

@@ -17,7 +17,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * @module otel/OtelTimelineRangeSlider
  */
 import { useCallback, useRef, useState, useMemo } from 'react';
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 // ── Helpers ─────────────────────────────────────────────────────────
 function clamp(v, min, max) {
     return Math.max(min, Math.min(max, v));
@@ -172,156 +173,22 @@ export const OtelTimelineRangeSlider = ({ timelineStart, timelineEnd, selectedSt
     const RAIL_HEIGHT = height - 24; // Reserve 24px for tick labels
     const HANDLE_WIDTH = 10;
     const HANDLE_HEIGHT = RAIL_HEIGHT;
-    return (_jsxs(Box, { sx: {
-            width: '100%',
-            height,
-            px: 3,
-            py: 1,
-            userSelect: 'none',
-            bg: 'canvas.subtle',
-            borderBottom: '1px solid',
-            borderColor: 'border.default',
-        }, children: [_jsxs(Box, { ref: railRef, onClick: handleRailClick, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, sx: {
-                    position: 'relative',
-                    width: '100%',
-                    height: RAIL_HEIGHT,
-                    cursor: 'pointer',
-                }, children: [_jsx(Box, { sx: {
-                            position: 'absolute',
-                            inset: 0,
-                            bg: 'canvas.inset',
-                            borderRadius: 1,
-                            border: '1px solid',
-                            borderColor: 'border.muted',
-                        } }), _jsx(Box, { onPointerDown: e => handlePointerDown(e, 'track'), sx: {
-                            position: 'absolute',
-                            top: 0,
-                            bottom: 0,
-                            left: `${startPct}%`,
-                            width: `${endPct - startPct}%`,
-                            bg: 'accent.muted',
-                            opacity: 0.45,
-                            borderTop: '2px solid',
-                            borderBottom: '2px solid',
-                            borderColor: 'accent.fg',
-                            cursor: 'grab',
-                            zIndex: 2,
-                            transition: isDragging
-                                ? 'none'
-                                : 'left 0.05s ease, width 0.05s ease',
-                            ':active': { cursor: 'grabbing' },
-                        } }), histogram &&
+    return (_jsxs(Box, { width: "100%", height: height, px: 3, py: 1, userSelect: "none", bg: "canvas.subtle", borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { ref: railRef, onClick: handleRailClick, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, position: "relative", width: "100%", height: RAIL_HEIGHT, cursor: "pointer", children: [_jsx(Box, { position: "absolute", inset: 0, bg: "canvas.inset", borderRadius: 1, border: "1px solid", borderColor: "border.muted" }), _jsx(Box, { onPointerDown: e => handlePointerDown(e, 'track'), position: "absolute", top: 0, bottom: 0, left: `${startPct}%`, width: `${endPct - startPct}%`, bg: "accent.muted", opacity: 0.45, borderTop: "2px solid", borderBottom: "2px solid", borderColor: "accent.fg", cursor: "grab", zIndex: 2, transition: isDragging ? 'none' : 'left 0.05s ease, width 0.05s ease', active: { cursor: 'grabbing' } }), histogram &&
                         histMax > 0 &&
                         histogram.map((h, i) => {
                             const pct = ((h.time.getTime() - tlStart) / tlRange) * 100;
                             const barWidth = 100 / (histogram.length || 1);
                             const barH = (h.count / histMax) * 100;
-                            return (_jsx(Box, { sx: {
-                                    position: 'absolute',
-                                    bottom: 0,
-                                    left: `${pct}%`,
-                                    width: `${barWidth}%`,
-                                    height: `${barH}%`,
-                                    bg: 'accent.fg',
-                                    opacity: 0.35,
-                                    borderRadius: '1px 1px 0 0',
-                                    pointerEvents: 'none',
-                                    zIndex: 4,
-                                } }, i));
-                        }), _jsx(Box, { onPointerDown: e => handlePointerDown(e, 'start'), sx: {
-                            position: 'absolute',
-                            top: 0,
-                            left: `${startPct}%`,
-                            width: HANDLE_WIDTH,
-                            height: HANDLE_HEIGHT,
-                            ml: `-${HANDLE_WIDTH / 2}px`,
-                            bg: 'accent.fg',
-                            borderRadius: 1,
-                            cursor: 'ew-resize',
-                            zIndex: 3,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            transition: isDragging ? 'none' : 'left 0.05s ease',
-                            boxShadow: 'shadow.medium',
-                            ':hover': { bg: 'accent.emphasis' },
-                        }, children: _jsx(Box, { sx: {
-                                width: '2px',
-                                height: '40%',
-                                bg: 'fg.onEmphasis',
-                                borderRadius: 1,
-                            } }) }), _jsx(Box, { onPointerDown: e => handlePointerDown(e, 'end'), sx: {
-                            position: 'absolute',
-                            top: 0,
-                            left: `${endPct}%`,
-                            width: HANDLE_WIDTH,
-                            height: HANDLE_HEIGHT,
-                            ml: `-${HANDLE_WIDTH / 2}px`,
-                            bg: 'accent.fg',
-                            borderRadius: 1,
-                            cursor: 'ew-resize',
-                            zIndex: 3,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            transition: isDragging ? 'none' : 'left 0.05s ease',
-                            boxShadow: 'shadow.medium',
-                            ':hover': { bg: 'accent.emphasis' },
-                        }, children: _jsx(Box, { sx: {
-                                width: '2px',
-                                height: '40%',
-                                bg: 'fg.onEmphasis',
-                                borderRadius: 1,
-                            } }) }), hoverPct !== null && !isDragging && (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: `${hoverPct}%`,
-                                    width: '1px',
-                                    height: RAIL_HEIGHT,
-                                    borderLeft: '1px dashed',
-                                    borderColor: 'fg.default',
-                                    opacity: 0.55,
-                                    pointerEvents: 'none',
-                                    zIndex: 5,
-                                } }), _jsx(Box, { sx: {
-                                    position: 'absolute',
-                                    top: -36,
-                                    left: `${hoverPct}%`,
-                                    transform: 'translateX(-50%)',
-                                    bg: 'canvas.overlay',
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 2,
-                                    px: 2,
-                                    py: '2px',
-                                    pointerEvents: 'none',
-                                    zIndex: 10,
-                                    boxShadow: 'shadow.medium',
-                                    whiteSpace: 'nowrap',
-                                }, children: _jsx(Text, { sx: {
+                            return (_jsx(Box, { position: "absolute", bottom: 0, left: `${pct}%`, width: `${barWidth}%`, height: `${barH}%`, bg: "accent.fg", opacity: 0.35, borderRadius: "1px 1px 0 0", pointerEvents: "none", zIndex: 4 }, i));
+                        }), _jsx(Box, { onPointerDown: e => handlePointerDown(e, 'start'), position: "absolute", top: 0, left: `${startPct}%`, width: HANDLE_WIDTH, height: HANDLE_HEIGHT, ml: `-${HANDLE_WIDTH / 2}px`, bg: "accent.fg", borderRadius: 1, cursor: "ew-resize", zIndex: 3, display: "flex", alignItems: "center", justifyContent: "center", transition: isDragging ? 'none' : 'left 0.05s ease', boxShadow: "shadow.medium", hover: { bg: 'accent.emphasis' }, children: _jsx(Box, { width: "2px", height: "40%", bg: "fg.onEmphasis", borderRadius: 1 }) }), _jsx(Box, { onPointerDown: e => handlePointerDown(e, 'end'), position: "absolute", top: 0, left: `${endPct}%`, width: HANDLE_WIDTH, height: HANDLE_HEIGHT, ml: `-${HANDLE_WIDTH / 2}px`, bg: "accent.fg", borderRadius: 1, cursor: "ew-resize", zIndex: 3, display: "flex", alignItems: "center", justifyContent: "center", transition: isDragging ? 'none' : 'left 0.05s ease', boxShadow: "shadow.medium", hover: { bg: 'accent.emphasis' }, children: _jsx(Box, { width: "2px", height: "40%", bg: "fg.onEmphasis", borderRadius: 1 }) }), hoverPct !== null && !isDragging && (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", top: 0, left: `${hoverPct}%`, width: "1px", height: RAIL_HEIGHT, borderLeft: "1px dashed", borderColor: "fg.default", opacity: 0.55, pointerEvents: "none", zIndex: 5 }), _jsx(Box, { position: "absolute", top: -36, left: `${hoverPct}%`, transform: "translateX(-50%)", bg: "canvas.overlay", border: "1px solid", borderColor: "border.default", borderRadius: 2, px: 2, py: "2px", pointerEvents: "none", zIndex: 10, boxShadow: "shadow.medium", whiteSpace: "nowrap", children: _jsx(Text, { sx: {
                                         fontSize: '11px',
                                         color: 'fg.default',
                                         fontFamily: 'mono',
                                         lineHeight: '18px',
                                     }, children: formatHoverDate(hoverPct) }) })] })), ticks.map((t, i) => {
                         const pct = ((t.getTime() - tlStart) / tlRange) * 100;
-                        return (_jsx(Box, { sx: {
-                                position: 'absolute',
-                                top: 0,
-                                left: `${pct}%`,
-                                width: '1px',
-                                height: RAIL_HEIGHT,
-                                bg: 'border.muted',
-                                pointerEvents: 'none',
-                                opacity: 0.5,
-                                zIndex: 1,
-                            } }, i));
-                    })] }), _jsx(Box, { sx: {
-                    position: 'relative',
-                    width: '100%',
-                    height: 20,
-                    mt: '2px',
-                }, children: ticks.map((t, i) => {
+                        return (_jsx(Box, { position: "absolute", top: 0, left: `${pct}%`, width: "1px", height: RAIL_HEIGHT, bg: "border.muted", pointerEvents: "none", opacity: 0.5, zIndex: 1 }, i));
+                    })] }), _jsx(Box, { position: "relative", width: "100%", height: 20, mt: "2px", children: ticks.map((t, i) => {
                     const pct = ((t.getTime() - tlStart) / tlRange) * 100;
                     return (_jsx(Text, { sx: {
                             position: 'absolute',