tinytsdk 0.2.0

package/dist/react.esm.js

@@ -0,0 +1,1203 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useState, useRef, useCallback, useEffect, useContext, useMemo } from 'react';
+
+/**
+ * TinyTrack binary protocol parser (v1 + v2).
+ *
+ * Wire format (big-endian):
+ *   [magic:1][version:1][type:1][length:2][timestamp:4][checksum:1] + payload
+ *
+ * tt_metrics payload (52 bytes, little-endian packed struct):
+ *   timestamp:8  cpu:2  mem:2  net_rx:4  net_tx:4
+ *   load1:2  load5:2  load15:2  nr_running:4  nr_total:4
+ *   du_usage:2  du_total:8  du_free:8
+ */
+const PROTO_MAGIC = 0xaa;
+const HEADER_SIZE = 10;
+// Packet types
+const PKT_METRICS = 0x01;
+const PKT_CONFIG = 0x02;
+const PKT_CMD = 0x04;
+const PKT_ACK = 0x05;
+const PKT_HISTORY_REQ = 0x10;
+const PKT_HISTORY_RESP = 0x11;
+const PKT_SUBSCRIBE = 0x12;
+const PKT_RING_STATS = 0x13;
+const PKT_SYS_INFO = 0x14;
+// Ring levels
+const RING_L1 = 0x01;
+const RING_L2 = 0x02;
+const RING_L3 = 0x03;
+// Commands
+const CMD_SET_INTERVAL = 0x01;
+const CMD_GET_SNAPSHOT = 0x03;
+const CMD_GET_RING_STATS = 0x10;
+const CMD_GET_SYS_INFO = 0x11;
+const CMD_START = 0x12;
+const CMD_STOP = 0x13;
+/** Parse the 10-byte header. Returns null if buffer is too short or magic is wrong. */
+function parseHeader(buf, offset = 0) {
+    if (buf.byteLength - offset < HEADER_SIZE)
+        return null;
+    const v = new DataView(buf, offset);
+    if (v.getUint8(0) !== PROTO_MAGIC)
+        return null;
+    const version = v.getUint8(1);
+    const type = v.getUint8(2);
+    const length = v.getUint16(3, false); // big-endian
+    const timestamp = v.getUint32(5, false);
+    if (buf.byteLength - offset < HEADER_SIZE + length)
+        return null;
+    return {
+        type,
+        version,
+        timestamp,
+        payload: new DataView(buf, offset + HEADER_SIZE, length),
+    };
+}
+/** Parse PKT_METRICS payload (52 bytes, little-endian). */
+function parseMetrics(p) {
+    // uint64 LE: lo word at offset 0, hi word at offset 4
+    const tsLo = p.getUint32(0, true);
+    const tsHi = p.getUint32(4, true);
+    const timestamp = tsHi * 0x100000000 + tsLo;
+    return {
+        timestamp,
+        cpu: p.getUint16(8, true),
+        mem: p.getUint16(10, true),
+        netRx: p.getUint32(12, true),
+        netTx: p.getUint32(16, true),
+        load1: p.getUint16(20, true),
+        load5: p.getUint16(22, true),
+        load15: p.getUint16(24, true),
+        nrRunning: p.getUint32(26, true),
+        nrTotal: p.getUint32(30, true),
+        duUsage: p.getUint16(34, true),
+        duTotal: readUint64LE(p, 36),
+        duFree: readUint64LE(p, 44),
+    };
+}
+/** Parse PKT_CONFIG payload (5 bytes). */
+function parseConfig(p) {
+    return {
+        intervalMs: p.getUint32(0, false),
+        alertsEnabled: p.getUint8(4) !== 0,
+    };
+}
+/** Parse PKT_ACK payload (2 bytes). */
+function parseAck(p) {
+    return { cmdType: p.getUint8(0), status: p.getUint8(1) };
+}
+/** Parse PKT_STATS payload (75 bytes = 3 × 25). */
+function parseStats(p) {
+    return {
+        l1: parseRingStat(p, 0),
+        l2: parseRingStat(p, 29),
+        l3: parseRingStat(p, 58),
+    };
+}
+/** Parse PKT_HISTORY_RESP payload. */
+function parseHistoryResp(p) {
+    const level = p.getUint8(0);
+    const count = p.getUint16(1, false);
+    const flags = p.getUint8(3);
+    const samples = [];
+    for (let i = 0; i < count; i++) {
+        const off = 4 + i * 52;
+        samples.push(parseMetrics(new DataView(p.buffer, p.byteOffset + off, 52)));
+    }
+    return { level, count, last: (flags & 0x01) !== 0, samples };
+}
+/** Parse PKT_SYS_INFO payload (168 bytes). */
+function parseSysInfo(p) {
+    const dec = new TextDecoder();
+    const hostname = dec.decode(new Uint8Array(p.buffer, p.byteOffset, 64)).replace(/\0.*/, '');
+    const osType = dec.decode(new Uint8Array(p.buffer, p.byteOffset + 64, 64)).replace(/\0.*/, '');
+    return {
+        hostname,
+        osType,
+        uptimeSec: readUint64BE(p, 128), // server: htobe64
+        slotsL1: p.getUint32(136, false), // server: htonl (BE)
+        slotsL2: p.getUint32(140, false),
+        slotsL3: p.getUint32(144, false),
+        intervalMs: p.getUint32(148, false),
+        aggL2Ms: p.getUint32(152, false),
+        aggL3Ms: p.getUint32(156, false),
+    };
+}
+// ---------------------------------------------------------------------------
+// Command builders
+// ---------------------------------------------------------------------------
+function buildCmd(cmdType, arg = 0) {
+    const buf = new ArrayBuffer(HEADER_SIZE + 9);
+    const h = new DataView(buf);
+    const ts = Math.floor(Date.now() / 1000);
+    h.setUint8(0, PROTO_MAGIC);
+    h.setUint8(1, 0x01); // v1
+    h.setUint8(2, PKT_CMD);
+    h.setUint16(3, 9, false);
+    h.setUint32(5, ts, false);
+    h.setUint8(9, calcChecksum(h));
+    // payload
+    h.setUint8(10, cmdType);
+    h.setUint32(11, arg, false);
+    return buf;
+}
+function buildHistoryReq(level, maxCount = 0, fromTs = 0, toTs = 0) {
+    const buf = new ArrayBuffer(HEADER_SIZE + 19);
+    const h = new DataView(buf);
+    const ts = Math.floor(Date.now() / 1000);
+    h.setUint8(0, PROTO_MAGIC);
+    h.setUint8(1, 0x02); // v2
+    h.setUint8(2, PKT_HISTORY_REQ);
+    h.setUint16(3, 19, false);
+    h.setUint32(5, ts, false);
+    h.setUint8(9, calcChecksum(h));
+    // payload: level(1) from_ts(8) to_ts(8) max_count(2)
+    h.setUint8(10, level);
+    writeUint64BE(h, 11, fromTs);
+    writeUint64BE(h, 19, toTs);
+    h.setUint16(27, maxCount, false);
+    return buf;
+}
+function buildSubscribe(level, intervalMs = 0) {
+    const buf = new ArrayBuffer(HEADER_SIZE + 6);
+    const h = new DataView(buf);
+    const ts = Math.floor(Date.now() / 1000);
+    h.setUint8(0, PROTO_MAGIC);
+    h.setUint8(1, 0x02);
+    h.setUint8(2, PKT_SUBSCRIBE);
+    h.setUint16(3, 6, false);
+    h.setUint32(5, ts, false);
+    h.setUint8(9, calcChecksum(h));
+    h.setUint8(10, level);
+    h.setUint32(11, intervalMs, false);
+    h.setUint8(15, 0);
+    return buf;
+}
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function calcChecksum(h) {
+    let cs = 0;
+    for (let i = 0; i < 9; i++)
+        cs ^= h.getUint8(i);
+    return cs;
+}
+function parseRingStat(p, off) {
+    return {
+        level: p.getUint8(off),
+        capacity: p.getUint32(off + 1, false), // htonl (BE)
+        head: p.getUint32(off + 5, false), // htonl (BE)
+        filled: p.getUint32(off + 9, false), // htonl (BE)
+        firstTs: readUint64LE(p, off + 13), // no hton, native LE
+        lastTs: readUint64LE(p, off + 21), // no hton, native LE
+    };
+}
+function readUint64LE(v, off) {
+    const lo = v.getUint32(off, true);
+    const hi = v.getUint32(off + 4, true);
+    return hi * 0x100000000 + lo;
+}
+function readUint64BE(v, off) {
+    const hi = v.getUint32(off, false);
+    const lo = v.getUint32(off + 4, false);
+    return hi * 0x100000000 + lo;
+}
+function writeUint64BE(v, off, val) {
+    const hi = Math.floor(val / 0x100000000);
+    const lo = val >>> 0;
+    v.setUint32(off, hi, false);
+    v.setUint32(off + 4, lo, false);
+}
+
+/**
+ * TinyTrackClient — WebSocket client for the tinytrack gateway.
+ *
+ * Usage:
+ *   const client = new TinyTrackClient('ws://localhost:4026');
+ *   client.on('metrics', m => console.log(m.cpu / 100, '%'));
+ *   client.connect();
+ */
+class TinyTrackClient {
+    constructor(url, opts = {}) {
+        var _a, _b, _c, _d;
+        this.ws = null;
+        this.listeners = new Map();
+        this.retries = 0;
+        this._closed = false;
+        // Normalise: strip trailing path, we'll append opts.path
+        this.url = url.replace(/\/websocket\/?$/, '');
+        this.opts = {
+            reconnect: (_a = opts.reconnect) !== null && _a !== void 0 ? _a : true,
+            reconnectDelay: (_b = opts.reconnectDelay) !== null && _b !== void 0 ? _b : 2000,
+            maxRetries: (_c = opts.maxRetries) !== null && _c !== void 0 ? _c : 0,
+            path: (_d = opts.path) !== null && _d !== void 0 ? _d : '/websocket',
+        };
+    }
+    // ---------------------------------------------------------------------------
+    // Lifecycle
+    // ---------------------------------------------------------------------------
+    connect() {
+        this._closed = false;
+        this._open();
+        return this;
+    }
+    disconnect() {
+        var _a;
+        this._closed = true;
+        (_a = this.ws) === null || _a === void 0 ? void 0 : _a.close();
+        this.ws = null;
+    }
+    get connected() {
+        var _a;
+        return ((_a = this.ws) === null || _a === void 0 ? void 0 : _a.readyState) === WebSocket.OPEN;
+    }
+    // ---------------------------------------------------------------------------
+    // Commands
+    // ---------------------------------------------------------------------------
+    getSnapshot() {
+        this._send(buildCmd(CMD_GET_SNAPSHOT));
+    }
+    getStats() {
+        this._send(buildCmd(CMD_GET_RING_STATS));
+    }
+    getSysInfo() {
+        this._send(buildCmd(CMD_GET_SYS_INFO));
+    }
+    setInterval(ms) {
+        this._send(buildCmd(CMD_SET_INTERVAL, ms));
+    }
+    start() {
+        this._send(buildCmd(CMD_START));
+    }
+    stop() {
+        this._send(buildCmd(CMD_STOP));
+    }
+    getHistory(level, maxCount = 60, fromTs = 0, toTs = 0) {
+        this._send(buildHistoryReq(level, maxCount, fromTs, toTs));
+    }
+    subscribe(level, intervalMs = 0) {
+        this._send(buildSubscribe(level, intervalMs));
+    }
+    // ---------------------------------------------------------------------------
+    // Events
+    // ---------------------------------------------------------------------------
+    on(event, fn) {
+        if (!this.listeners.has(event))
+            this.listeners.set(event, new Set());
+        this.listeners.get(event).add(fn);
+        return this;
+    }
+    off(event, fn) {
+        var _a;
+        (_a = this.listeners.get(event)) === null || _a === void 0 ? void 0 : _a.delete(fn);
+        return this;
+    }
+    // ---------------------------------------------------------------------------
+    // Private
+    // ---------------------------------------------------------------------------
+    _open() {
+        const wsUrl = this.url + this.opts.path;
+        const ws = new WebSocket(wsUrl);
+        ws.binaryType = 'arraybuffer';
+        this.ws = ws;
+        ws.onopen = () => {
+            this.retries = 0;
+            this._emit('open');
+        };
+        ws.onclose = (e) => {
+            this._emit('close', e.code, e.reason);
+            if (!this._closed && this.opts.reconnect) {
+                const max = this.opts.maxRetries;
+                if (max === 0 || this.retries < max) {
+                    this.retries++;
+                    setTimeout(() => this._open(), this.opts.reconnectDelay);
+                }
+            }
+        };
+        ws.onerror = (e) => this._emit('error', e);
+        ws.onmessage = (e) => {
+            const frame = parseHeader(e.data);
+            if (!frame)
+                return;
+            switch (frame.type) {
+                case PKT_METRICS:
+                    this._emit('metrics', parseMetrics(frame.payload));
+                    break;
+                case PKT_CONFIG:
+                    this._emit('config', parseConfig(frame.payload));
+                    break;
+                case PKT_ACK:
+                    this._emit('ack', parseAck(frame.payload));
+                    break;
+                case PKT_RING_STATS:
+                    this._emit('stats', parseStats(frame.payload));
+                    break;
+                case PKT_HISTORY_RESP:
+                    this._emit('history', parseHistoryResp(frame.payload));
+                    break;
+                case PKT_SYS_INFO:
+                    this._emit('sysinfo', parseSysInfo(frame.payload));
+                    break;
+            }
+        };
+    }
+    _send(buf) {
+        var _a;
+        if (((_a = this.ws) === null || _a === void 0 ? void 0 : _a.readyState) === WebSocket.OPEN) {
+            this.ws.send(buf);
+        }
+    }
+    _emit(event, ...args) {
+        var _a;
+        (_a = this.listeners.get(event)) === null || _a === void 0 ? void 0 : _a.forEach((fn) => fn(...args));
+    }
+}
+
+const TinyTrackContext = createContext({
+    client: null,
+    connected: false,
+    sysinfo: null,
+    streaming: true,
+    setStreaming: () => { },
+});
+function TinyTrackProvider({ url, children, reconnect, reconnectDelay }) {
+    // Client is created once and never recreated
+    const [client] = useState(() => new TinyTrackClient(url, { reconnect, reconnectDelay }));
+    const [connected, setConnected] = useState(false);
+    const [sysinfo, setSysinfo] = useState(null);
+    const [streaming, setStreamingState] = useState(true);
+    // Use ref so setStreaming closure always has the latest client
+    const clientRef = useRef(client);
+    const setStreaming = useCallback((v) => {
+        setStreamingState(v);
+        if (v)
+            clientRef.current.start();
+        else
+            clientRef.current.stop();
+    }, []);
+    useEffect(() => {
+        const onOpen = () => {
+            setConnected(true);
+            setStreamingState(true); // new session always starts streaming
+            client.getSysInfo();
+            client.getSnapshot();
+        };
+        const onClose = () => {
+            setConnected(false);
+            setSysinfo(null);
+        };
+        client.on('open', onOpen);
+        client.on('close', onClose);
+        client.on('sysinfo', setSysinfo);
+        client.connect();
+        return () => client.disconnect();
+    }, [client]);
+    return (jsx(TinyTrackContext.Provider, { value: { client, connected, sysinfo, streaming, setStreaming }, children: children }));
+}
+function useTinyTrack() {
+    return useContext(TinyTrackContext);
+}
+function useMetrics() {
+    const { client, connected, sysinfo, streaming, setStreaming } = useTinyTrack();
+    const [metrics, setMetrics] = useState(null);
+    const [config, setConfig] = useState(null);
+    const [stats, setStats] = useState(null);
+    useEffect(() => {
+        if (!client)
+            return;
+        client.on('metrics', setMetrics);
+        client.on('config', setConfig);
+        client.on('stats', setStats);
+        return () => {
+            client.off('metrics', setMetrics);
+            client.off('config', setConfig);
+            client.off('stats', setStats);
+        };
+    }, [client]);
+    return { client, connected, metrics, config, stats, sysinfo, streaming, setStreaming };
+}
+function useHistory(maxSamples = 3600) {
+    const { client, connected } = useTinyTrack();
+    const [samples, setSamples] = useState([]);
+    const buf = useRef([]);
+    useEffect(() => {
+        if (!client)
+            return;
+        const onHistory = (r) => {
+            buf.current = [...buf.current, ...r.samples].slice(-maxSamples);
+            setSamples([...buf.current]);
+        };
+        client.on('history', onHistory);
+        return () => {
+            client.off('history', onHistory);
+        };
+    }, [client, maxSamples]);
+    useEffect(() => {
+        if (connected) {
+            buf.current = [];
+            setSamples([]);
+        }
+    }, [connected]);
+    return samples;
+}
+
+const THEMES = {
+    /** Classic TUI — monospace, green-on-dark */
+    terminal: {
+        bg: '#111827',
+        surface: '#0d1117',
+        border: '#374151',
+        divider: '#1f2937',
+        text: '#f3f4f6',
+        muted: '#9ca3af',
+        faint: '#4b5563',
+        cpu: '#4ade80',
+        mem: '#60a5fa',
+        net: '#f59e0b',
+        disk: '#fb923c',
+        load: '#a78bfa',
+        ok: '#22c55e',
+        warn: '#f59e0b',
+        crit: '#ef4444',
+        btnBg: '#1f2937',
+        btnText: '#9ca3af',
+        font: '"JetBrains Mono", "Fira Code", monospace',
+        radius: 4,
+    },
+    /** Modern dark — VS Code / GitHub Dark style */
+    dark: {
+        bg: '#1e1e2e',
+        surface: '#181825',
+        border: '#313244',
+        divider: '#2a2a3d',
+        text: '#cdd6f4',
+        muted: '#a6adc8',
+        faint: '#585b70',
+        cpu: '#a6e3a1',
+        mem: '#89b4fa',
+        net: '#fab387',
+        disk: '#f9e2af',
+        load: '#cba6f7',
+        ok: '#a6e3a1',
+        warn: '#f9e2af',
+        crit: '#f38ba8',
+        btnBg: '#313244',
+        btnText: '#a6adc8',
+        font: '"Inter", "Segoe UI", system-ui, sans-serif',
+        radius: 6,
+    },
+    /** Light — clean minimal */
+    light: {
+        bg: '#ffffff',
+        surface: '#f8fafc',
+        border: '#e2e8f0',
+        divider: '#f1f5f9',
+        text: '#0f172a',
+        muted: '#64748b',
+        faint: '#cbd5e1',
+        cpu: '#16a34a',
+        mem: '#2563eb',
+        net: '#d97706',
+        disk: '#ea580c',
+        load: '#7c3aed',
+        ok: '#16a34a',
+        warn: '#d97706',
+        crit: '#dc2626',
+        btnBg: '#f1f5f9',
+        btnText: '#475569',
+        font: '"Inter", "Segoe UI", system-ui, sans-serif',
+        radius: 6,
+    },
+    /** Material — Google Material Design 3 tones */
+    material: {
+        bg: '#1c1b1f',
+        surface: '#141218',
+        border: '#49454f',
+        divider: '#2b2930',
+        text: '#e6e1e5',
+        muted: '#cac4d0',
+        faint: '#49454f',
+        cpu: '#79dd72',
+        mem: '#7fcfff',
+        net: '#ffb77c',
+        disk: '#ffb4ab',
+        load: '#d0bcff',
+        ok: '#79dd72',
+        warn: '#ffb77c',
+        crit: '#ffb4ab',
+        btnBg: '#2b2930',
+        btnText: '#cac4d0',
+        font: '"Roboto", "Google Sans", system-ui, sans-serif',
+        radius: 12,
+    },
+    /** Dracula — classic Dracula color scheme */
+    dracula: {
+        bg: '#282a36',
+        surface: '#21222c',
+        border: '#44475a',
+        divider: '#343746',
+        text: '#f8f8f2',
+        muted: '#6272a4',
+        faint: '#44475a',
+        cpu: '#50fa7b',
+        mem: '#8be9fd',
+        net: '#ffb86c',
+        disk: '#ff79c6',
+        load: '#bd93f9',
+        ok: '#50fa7b',
+        warn: '#ffb86c',
+        crit: '#ff5555',
+        btnBg: '#44475a',
+        btnText: '#f8f8f2',
+        font: '"Fira Code", "JetBrains Mono", monospace',
+        radius: 4,
+    },
+    /**
+     * HeroUI — inspired by NextUI/HeroUI design system.
+     * Deep navy background, violet/indigo accents, smooth rounded corners,
+     * glassmorphism-style surfaces with subtle borders.
+     */
+    heroui: {
+        bg: '#0f0f1a',
+        surface: '#16162a',
+        border: '#2d2d52',
+        divider: '#1e1e38',
+        text: '#e2e8f0',
+        muted: '#94a3b8',
+        faint: '#334155',
+        cpu: '#7c3aed',
+        mem: '#06b6d4',
+        net: '#10b981',
+        disk: '#f59e0b',
+        load: '#8b5cf6',
+        ok: '#10b981',
+        warn: '#f59e0b',
+        crit: '#f43f5e',
+        btnBg: '#1e1e38',
+        btnText: '#c4b5fd',
+        font: '"Inter", "SF Pro Display", system-ui, sans-serif',
+        radius: 12,
+        glow: '0 0 12px rgba(124,58,237,0.25)',
+        transition: 'all 0.2s ease',
+    },
+};
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+const ThemeContext = createContext(THEMES.terminal);
+function useTheme() {
+    return useContext(ThemeContext);
+}
+function ThemeProvider({ preset = 'terminal', theme, children }) {
+    const resolved = theme ? Object.assign(Object.assign({}, THEMES[preset]), theme) : THEMES[preset];
+    return jsx(ThemeContext.Provider, { value: resolved, children: children });
+}
+// ---------------------------------------------------------------------------
+// Helper: build common inline style objects from theme tokens
+// ---------------------------------------------------------------------------
+function themeStyles(t) {
+    return {
+        root: {
+            fontFamily: t.font,
+            fontSize: 12,
+            background: t.bg,
+            color: t.text,
+            border: `1px solid ${t.border}`,
+            borderRadius: t.radius,
+            padding: '6px 10px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4,
+            boxSizing: 'border-box',
+            boxShadow: t.glow,
+            transition: t.transition,
+        },
+        divider: { height: 1, background: t.divider, margin: '2px 0' },
+        label: { color: t.muted, whiteSpace: 'nowrap' },
+        value: {
+            color: t.text,
+            whiteSpace: 'nowrap',
+            minWidth: 48,
+            display: 'inline-block',
+        },
+        numval: {
+            color: t.text,
+            whiteSpace: 'nowrap',
+            minWidth: 52,
+            display: 'inline-block',
+            fontVariantNumeric: 'tabular-nums',
+        },
+        btn: {
+            fontSize: 10,
+            padding: '2px 8px',
+            background: t.btnBg,
+            border: `1px solid ${t.border}`,
+            borderRadius: t.radius,
+            color: t.btnText,
+            cursor: 'pointer',
+            transition: t.transition,
+            fontFamily: t.font,
+        },
+        select: {
+            fontSize: 11,
+            background: t.btnBg,
+            border: `1px solid ${t.border}`,
+            borderRadius: t.radius,
+            color: t.text,
+            padding: '2px 6px',
+            cursor: 'pointer',
+            fontFamily: t.font,
+        },
+        badge: (color) => ({ fontSize: 10, color, fontWeight: 600, minWidth: 48 }),
+        alert: (level) => ({
+            fontSize: 10,
+            padding: '1px 6px',
+            borderRadius: t.radius,
+            background: level === 'crit' ? t.crit + '33' : level === 'ok' ? t.ok + '33' : t.warn + '33',
+            color: level === 'crit' ? t.crit : level === 'ok' ? t.ok : t.warn,
+            whiteSpace: 'nowrap',
+        }),
+    };
+}
+
+function fmtPct(val) {
+    return (val / 100).toFixed(1) + '%';
+}
+function fmtBytes(bytes) {
+    if (bytes < 1024)
+        return bytes + 'B';
+    if (bytes < 1024 * 1024)
+        return (bytes / 1024).toFixed(0) + 'KB';
+    if (bytes < 1024 * 1024 * 1024)
+        return (bytes / (1024 * 1024)).toFixed(1) + 'MB';
+    return (bytes / (1024 * 1024 * 1024)).toFixed(1) + 'GB';
+}
+function fmtLoad(val) {
+    return (val / 100).toFixed(2);
+}
+/** Build a simple ASCII bar: ▓▓▓░░░ */
+function bar(pct, width = 8) {
+    const filled = Math.round((pct / 10000) * width);
+    return '▓'.repeat(filled) + '░'.repeat(width - filled);
+}
+function loadTrend(m) {
+    const diff = m.load1 - m.load15;
+    if (diff > 20)
+        return 'rising'; // >0.2 difference
+    if (diff < -20)
+        return 'falling';
+    return 'stable';
+}
+function detectAlerts(m, prev) {
+    const alerts = [];
+    // CPU
+    if (m.cpu > 8000)
+        alerts.push({ id: 'cpu-crit', label: 'CPU >80%', level: 'crit' });
+    else if (m.cpu > 6000)
+        alerts.push({ id: 'cpu-warn', label: 'CPU >60%', level: 'warn' });
+    // Memory
+    if (m.mem > 9000)
+        alerts.push({ id: 'mem-crit', label: 'Mem >90%', level: 'crit' });
+    else if (m.mem > 7500)
+        alerts.push({ id: 'mem-warn', label: 'Mem >75%', level: 'warn' });
+    // Disk
+    if (m.duUsage > 8000)
+        alerts.push({ id: 'disk-crit', label: 'Disk >80%', level: 'crit' });
+    else if (m.duUsage > 6000)
+        alerts.push({ id: 'disk-warn', label: 'Disk >60%', level: 'warn' });
+    // Load trend (1m vs 15m)
+    const trend = loadTrend(m);
+    if (trend === 'rising')
+        alerts.push({ id: 'load-rise', label: '↑ Load rising', level: 'warn' });
+    if (trend === 'falling')
+        alerts.push({ id: 'load-fall', label: '↓ Load falling', level: 'ok' });
+    // Sudden load spike vs previous sample
+    if (prev && m.load1 - prev.load1 > 50) {
+        alerts.push({ id: 'load-spike', label: '⚡ Load spike', level: 'crit' });
+    }
+    return alerts;
+}
+
+function fmtUptimeSec$1(sec) {
+    const d = Math.floor(sec / 86400);
+    const h = Math.floor((sec % 86400) / 3600);
+    const m = Math.floor((sec % 3600) / 60);
+    if (d > 0)
+        return `${d}d ${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+}
+function MetricsPanel({ className, style, theme: themeProp }) {
+    const base = useTheme();
+    const t = themeProp ? Object.assign(Object.assign({}, base), themeProp) : base;
+    const s = themeStyles(t);
+    const { metrics: m, connected, sysinfo } = useMetrics();
+    return (jsxs("div", { className: className, style: Object.assign(Object.assign(Object.assign({}, s.root), { width: 'fit-content', gap: 4 }), style), children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [jsx("span", { style: s.badge(connected ? t.ok : t.crit), children: connected ? '● live' : '○ off' }), sysinfo && jsx("span", { style: { color: t.muted, fontSize: 11 }, children: sysinfo.hostname })] }), sysinfo && (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("span", { style: s.label, children: "Uptime" }), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { color: t.ok }), children: fmtUptimeSec$1(sysinfo.uptimeSec) })] })), jsx("div", { style: s.divider }), jsx(Row, { label: "CPU", value: m ? fmtPct(m.cpu) : '—', bar: m ? bar(m.cpu) : null, color: t.cpu, s: s }), jsx(Row, { label: "Mem", value: m ? fmtPct(m.mem) : '—', bar: m ? bar(m.mem) : null, color: t.mem, s: s }), jsx(Row, { label: "Disk", value: m ? fmtPct(m.duUsage) : '—', bar: m ? bar(m.duUsage) : null, color: t.disk, s: s }), jsx("div", { style: s.divider }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("span", { style: Object.assign(Object.assign({}, s.label), { minWidth: 36 }), children: "Load" }), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { color: t.load }), children: m ? fmtLoad(m.load1) : '—' }), jsx("span", { style: { color: t.faint }, children: "/" }), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { color: t.muted }), children: m ? fmtLoad(m.load5) : '—' }), jsx("span", { style: { color: t.faint }, children: "/" }), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { color: t.muted }), children: m ? fmtLoad(m.load15) : '—' })] }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("span", { style: Object.assign(Object.assign({}, s.label), { minWidth: 36 }), children: "Proc" }), jsx("span", { style: s.numval, children: m ? `${m.nrRunning} / ${m.nrTotal}` : '—' })] }), jsx("div", { style: s.divider }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("span", { style: Object.assign(Object.assign({}, s.label), { minWidth: 36 }), children: "Net \u2191" }), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { color: t.net }), children: m ? fmtBytes(m.netTx) + '/s' : '—' }), jsx("span", { style: { color: t.faint }, children: "\u2193" }), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { color: t.mem }), children: m ? fmtBytes(m.netRx) + '/s' : '—' })] }), m && (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("span", { style: Object.assign(Object.assign({}, s.label), { minWidth: 36 }), children: "Disk" }), jsxs("span", { style: Object.assign(Object.assign({}, s.numval), { minWidth: 120 }), children: [fmtBytes(m.duTotal - m.duFree), " / ", fmtBytes(m.duTotal)] })] }))] }));
+}
+function Row({ label, value, bar: barStr, color, s, }) {
+    return (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("span", { style: Object.assign(Object.assign({}, s.label), { minWidth: 36 }), children: label }), jsx("span", { style: { color, letterSpacing: 1, minWidth: 72, fontFamily: '"JetBrains Mono","Fira Code",monospace' }, children: barStr !== null && barStr !== void 0 ? barStr : '        ' }), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { color }), children: value })] }));
+}
+
+function MetricsBar({ className, style, showDisk = true, showNet = true, theme: themeProp, compact, }) {
+    const base = useTheme();
+    const t = themeProp ? Object.assign(Object.assign({}, base), themeProp) : base;
+    const s = themeStyles(t);
+    const { metrics: m, connected } = useMetrics();
+    const prevRef = useRef(m);
+    const alerts = useMemo(() => {
+        const a = m ? detectAlerts(m, prevRef.current) : [];
+        prevRef.current = m;
+        return a;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [m]);
+    // Auto-detect mobile if compact not forced
+    const isMobile = compact !== null && compact !== void 0 ? compact : (typeof window !== 'undefined' && window.innerWidth < 640);
+    return (jsxs("div", { className: className, style: Object.assign({ display: 'inline-flex', alignItems: 'center', gap: isMobile ? 4 : 6, fontFamily: t.font, fontSize: isMobile ? 10 : 11, background: t.bg, color: t.text, border: `1px solid ${t.border}`, borderRadius: t.radius, padding: isMobile ? '2px 8px' : '2px 10px', whiteSpace: 'nowrap', boxSizing: 'border-box', height: isMobile ? 22 : 24 }, style), children: [jsx("span", { style: { color: connected ? t.ok : t.muted, fontSize: 8 }, title: connected ? 'live' : 'offline', children: "\u25CF" }), jsx(Sep, { t: t }), jsx(Metric, { label: "CPU", value: m ? fmtPct(m.cpu) : '—', color: t.cpu, t: t }), jsx(Metric, { label: "MEM", value: m ? fmtPct(m.mem) : '—', color: t.mem, t: t }), showDisk && !isMobile && jsx(Metric, { label: "DSK", value: m ? fmtPct(m.duUsage) : '—', color: t.disk, t: t }), !isMobile && (jsxs(Fragment, { children: [jsx(Sep, { t: t }), jsx("span", { style: { color: t.muted, fontSize: 10 }, children: "Load" }), jsx("span", { style: { color: t.text, minWidth: 120, fontVariantNumeric: 'tabular-nums' }, children: m ? `${fmtLoad(m.load1)} / ${fmtLoad(m.load5)} / ${fmtLoad(m.load15)}` : '— / — / —' })] })), showNet && !isMobile && (jsxs(Fragment, { children: [jsx(Sep, { t: t }), jsx("span", { style: { color: t.net, minWidth: 20 }, children: "\u2191" }), jsxs("span", { style: { color: t.net, minWidth: 72, fontVariantNumeric: 'tabular-nums' }, children: [m ? fmtBytes(m.netTx) : '—', "/s"] }), jsx("span", { style: { color: t.mem, minWidth: 20 }, children: "\u2193" }), jsxs("span", { style: { color: t.mem, minWidth: 72, fontVariantNumeric: 'tabular-nums' }, children: [m ? fmtBytes(m.netRx) : '—', "/s"] })] })), !isMobile && (jsxs(Fragment, { children: [jsx(Sep, { t: t }), jsx("span", { style: { color: t.muted, fontSize: 10 }, children: "Proc" }), jsx("span", { style: { color: t.text, minWidth: 56, fontVariantNumeric: 'tabular-nums' }, children: m ? `${m.nrRunning}/${m.nrTotal}` : '—' })] })), alerts.length > 0 && (jsxs(Fragment, { children: [jsx(Sep, { t: t }), alerts.map((a) => (jsx("span", { style: s.alert(a.level), children: a.label }, a.id)))] }))] }));
+}
+function Sep({ t }) {
+    return jsx("span", { style: { color: t.faint, userSelect: 'none' }, children: "\u2502" });
+}
+function Metric({ label, value, color, t }) {
+    return (jsxs(Fragment, { children: [jsx("span", { style: { color: t.muted, fontSize: 10 }, children: label }), jsx("span", { style: { color, minWidth: 44, fontVariantNumeric: 'tabular-nums' }, children: value })] }));
+}
+
+function Sparkline({ data, max, width = 120, height = 32, color = '#4ade80', fill = 'rgba(74,222,128,0.15)', }) {
+    if (data.length < 2)
+        return null;
+    const m = max !== null && max !== void 0 ? max : Math.max(...data, 1);
+    const pts = data.map((v, i) => {
+        const x = (i / (data.length - 1)) * width;
+        const y = height - (v / m) * height;
+        return `${x.toFixed(1)},${y.toFixed(1)}`;
+    });
+    const polyline = pts.join(' ');
+    const area = `${pts[0]} ${pts.slice(1).join(' ')} ${width},${height} 0,${height}`;
+    return (jsxs("svg", { width: width, height: height, style: { display: 'block', overflow: 'visible' }, children: [jsx("polygon", { points: area, fill: fill }), jsx("polyline", { points: polyline, fill: "none", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" })] }));
+}
+
+const INTERVALS = [1000, 2000, 5000, 10000, 30000];
+const INTERVAL_LABELS = ['1s', '2s', '5s', '10s', '30s'];
+const MAX_LOG = 120;
+function fmtUptimeSec(sec) {
+    const d = Math.floor(sec / 86400);
+    const h = Math.floor((sec % 86400) / 3600);
+    const m = Math.floor((sec % 3600) / 60);
+    if (d > 0)
+        return `${d}d ${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+}
+function Dashboard({ mode: modeProp, historySize = 60, className, style, theme: themeProp }) {
+    var _a, _b, _c, _d, _e;
+    const base = useTheme();
+    const t = themeProp ? Object.assign(Object.assign({}, base), themeProp) : base;
+    const s = themeStyles(t);
+    const { client, metrics, stats, connected, sysinfo, streaming, setStreaming } = useMetrics();
+    const [mode, setMode] = useState(modeProp !== null && modeProp !== void 0 ? modeProp : 'compact');
+    const [intervalIdx, setIntervalIdx] = useState(0);
+    const [consoleOpen, setConsoleOpen] = useState(false);
+    const [wsLog, setWsLog] = useState([]);
+    const logRef = useRef(null);
+    const history = useRef([]);
+    const prevMetrics = useRef(null);
+    // Push a line to the WS console
+    const pushLog = (dir, msg) => {
+        const ts = new Date().toLocaleTimeString('en', { hour12: false });
+        setWsLog((prev) => {
+            const next = [...prev, `[${ts}] ${dir} ${msg}`];
+            return next.length > MAX_LOG ? next.slice(-MAX_LOG) : next;
+        });
+    };
+    useEffect(() => {
+        if (!metrics)
+            return;
+        history.current = [...history.current.slice(-(historySize - 1)), metrics];
+        prevMetrics.current = metrics;
+    }, [metrics, historySize]);
+    // Request history on connect
+    useEffect(() => {
+        if (connected && client) {
+            client.getHistory(RING_L1, historySize);
+            pushLog('→', `CMD_GET_HISTORY L1 max=${historySize}`);
+        }
+    }, [connected, client, historySize]);
+    // Log all incoming packets
+    useEffect(() => {
+        if (!client)
+            return;
+        const lastTs = { current: 0 };
+        const onMetrics = (m) => {
+            if (m.timestamp === lastTs.current)
+                return;
+            lastTs.current = m.timestamp;
+            pushLog('←', `PKT_METRICS cpu=${fmtPct(m.cpu)} mem=${fmtPct(m.mem)} rx=${fmtBytes(m.netRx)}/s tx=${fmtBytes(m.netTx)}/s`);
+        };
+        const onAck = (a) => {
+            var _a;
+            const cmdNames = {
+                0x01: 'SET_INTERVAL',
+                0x02: 'SET_ALERTS',
+                0x03: 'GET_SNAPSHOT',
+                0x10: 'GET_RING_STATS',
+                0x11: 'GET_SYS_INFO',
+                0x12: 'START',
+                0x13: 'STOP',
+            };
+            const name = (_a = cmdNames[a.cmdType]) !== null && _a !== void 0 ? _a : `0x${a.cmdType.toString(16)}`;
+            pushLog('←', `PKT_ACK cmd=${name} status=${a.status === 0 ? 'OK' : 'ERR'}`);
+        };
+        const onConfig = (c) => {
+            pushLog('←', `PKT_CONFIG interval=${c.intervalMs}ms`);
+        };
+        const onStats = () => pushLog('←', 'PKT_RING_STATS');
+        const onSysInfo = (si) => {
+            pushLog('←', `PKT_SYS_INFO host=${si.hostname} uptime=${fmtUptimeSec(si.uptimeSec)}`);
+        };
+        const onOpen = () => {
+            pushLog('✓', 'connected');
+            pushLog('→', 'CMD_GET_SYS_INFO');
+            pushLog('→', 'CMD_GET_SNAPSHOT');
+        };
+        const onClose = (code) => pushLog('✗', `closed (${code})`);
+        client.on('metrics', onMetrics);
+        client.on('ack', onAck);
+        client.on('config', onConfig);
+        client.on('stats', onStats);
+        client.on('sysinfo', onSysInfo);
+        client.on('open', onOpen);
+        client.on('close', onClose);
+        return () => {
+            client.off('metrics', onMetrics);
+            client.off('ack', onAck);
+            client.off('config', onConfig);
+            client.off('stats', onStats);
+            client.off('sysinfo', onSysInfo);
+            client.off('open', onOpen);
+            client.off('close', onClose);
+        };
+    }, [client]);
+    useEffect(() => {
+        if (consoleOpen && logRef.current)
+            logRef.current.scrollTop = logRef.current.scrollHeight;
+    }, [wsLog, consoleOpen]);
+    const m = metrics;
+    const alerts = useMemo(() => (m ? detectAlerts(m, prevMetrics.current) : []), [m]);
+    const cpuHistory = history.current.map((x) => x.cpu);
+    const memHistory = history.current.map((x) => x.mem);
+    const netHistory = history.current.map((x) => x.netRx + x.netTx);
+    const duUsed = m ? m.duTotal - m.duFree : 0;
+    // Uptime: prefer sysinfo (system uptime), fallback to ring stats
+    const uptimeStr = sysinfo
+        ? fmtUptimeSec(sysinfo.uptimeSec)
+        : stats
+            ? fmtUptimeSec(Math.floor((Date.now() - stats.l1.firstTs) / 1000))
+            : '—';
+    return (jsxs("div", { className: className, style: Object.assign(Object.assign(Object.assign({}, s.root), { width: '100%' }), style), children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }, children: [jsx("span", { style: s.badge(connected ? t.ok : t.crit), children: connected ? '● live' : '○ off' }), sysinfo && jsx("span", { style: { color: t.muted, fontSize: 11, minWidth: 80 }, children: sysinfo.hostname }), jsx("span", { style: { color: t.muted, fontSize: 10 }, children: "up" }), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { fontSize: 11 }), children: uptimeStr }), jsx("span", { style: { flex: 1 } }), connected && (jsx("button", { style: s.btn, onClick: () => {
+                            const next = !streaming;
+                            setStreaming(next);
+                            pushLog('→', next ? 'CMD_START' : 'CMD_STOP');
+                        }, children: streaming ? '⏸ stop' : '▶ start' })), jsx("button", { style: s.btn, onClick: () => setConsoleOpen((o) => !o), children: consoleOpen ? '⊟ log' : '⊞ log' }), jsx("button", { style: s.btn, onClick: () => setMode(mode === 'compact' ? 'expanded' : 'compact'), children: mode === 'compact' ? '⊞' : '⊟' })] }), jsx("div", { style: s.divider }), jsxs("div", { style: { display: 'flex', gap: 16, flexWrap: 'wrap' }, children: [jsx(MetricBar, { label: "CPU", value: (_a = m === null || m === void 0 ? void 0 : m.cpu) !== null && _a !== void 0 ? _a : 0, color: t.cpu, t: t }), jsx(MetricBar, { label: "Mem", value: (_b = m === null || m === void 0 ? void 0 : m.mem) !== null && _b !== void 0 ? _b : 0, color: t.mem, t: t })] }), mode === 'expanded' && (jsxs(Fragment, { children: [jsx("div", { style: s.divider }), jsxs("div", { style: { display: 'flex', gap: 12, padding: '4px 0' }, children: [jsx(SparkBlock, { label: "CPU", data: cpuHistory, max: 10000, color: t.cpu }), jsx(SparkBlock, { label: "Mem", data: memHistory, max: 10000, color: t.mem }), jsx(SparkBlock, { label: "Net", data: netHistory, color: t.net })] })] })), jsx("div", { style: s.divider }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }, children: [jsx("span", { style: s.label, children: "Load" }), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { color: t.load }), children: m ? fmtLoad(m.load1) : '—' }), jsx("span", { style: { color: t.faint }, children: "/" }), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { color: t.muted, fontSize: 11 }), children: m ? fmtLoad(m.load5) : '—' }), jsx("span", { style: { color: t.faint }, children: "/" }), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { color: t.muted, fontSize: 11 }), children: m ? fmtLoad(m.load15) : '—' }), jsx("span", { style: { flex: 1 } }), jsx("span", { style: s.label, children: "Proc" }), jsx("span", { style: Object.assign({}, s.numval), children: m ? `${m.nrRunning}/${m.nrTotal}` : '—' })] }), jsx("div", { style: s.divider }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("span", { style: s.label, children: "Disk" }), mode === 'expanded' ? (jsx("span", { style: {
+                            display: 'inline-block',
+                            width: 80,
+                            height: 6,
+                            background: t.surface,
+                            borderRadius: 99,
+                            overflow: 'hidden',
+                        }, children: jsx("span", { style: {
+                                display: 'block',
+                                height: '100%',
+                                background: t.disk,
+                                borderRadius: 99,
+                                width: `${((_c = m === null || m === void 0 ? void 0 : m.duUsage) !== null && _c !== void 0 ? _c : 0) / 100}%`,
+                                transition: (_d = t.transition) !== null && _d !== void 0 ? _d : 'width 0.4s ease',
+                            } }) })) : (jsx("span", { style: { color: t.disk, letterSpacing: 1, minWidth: 72 }, children: bar((_e = m === null || m === void 0 ? void 0 : m.duUsage) !== null && _e !== void 0 ? _e : 0) })), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { color: t.disk }), children: m ? fmtPct(m.duUsage) : '—' }), jsx("span", { style: { color: t.faint, fontSize: 10, minWidth: 120 }, children: m ? `${fmtBytes(duUsed)} / ${fmtBytes(m.duTotal)}` : '—' })] }), jsx("div", { style: s.divider }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("span", { style: s.label, children: "Net" }), jsx("span", { style: { color: t.net, minWidth: 20 }, children: "\u2191" }), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { color: t.net }), children: m ? fmtBytes(m.netTx) + '/s' : '—' }), jsx("span", { style: { color: t.mem, minWidth: 20 }, children: "\u2193" }), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { color: t.mem }), children: m ? fmtBytes(m.netRx) + '/s' : '—' })] }), alerts.length > 0 && (jsxs(Fragment, { children: [jsx("div", { style: s.divider }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }, children: [jsx("span", { style: s.label, children: "Alerts" }), alerts.map((a) => (jsx("span", { style: s.alert(a.level), children: a.label }, a.id)))] })] })), jsx("div", { style: s.divider }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }, children: [jsx("span", { style: s.label, children: "Refresh" }), jsx("select", { style: s.select, value: intervalIdx, onChange: (e) => {
+                            const idx = Number(e.target.value);
+                            setIntervalIdx(idx);
+                            if (client) {
+                                const ms = INTERVALS[idx];
+                                client.setInterval(ms);
+                                pushLog('→', `CMD_SET_INTERVAL: ${ms}ms`);
+                            }
+                        }, children: INTERVAL_LABELS.map((l, i) => (jsx("option", { value: i, children: l }, i))) }), sysinfo && (jsxs(Fragment, { children: [jsx("span", { style: { color: t.faint, fontSize: 10 }, children: "\u2502" }), jsx("span", { style: { color: t.faint, fontSize: 10 }, children: sysinfo.osType }), jsx("span", { style: { color: t.faint, fontSize: 10 }, children: "\u2502" }), jsxs("span", { style: { color: t.faint, fontSize: 10 }, children: ["L1:", sysinfo.slotsL1, " L2:", sysinfo.slotsL2, " L3:", sysinfo.slotsL3] })] }))] }), consoleOpen && (jsxs(Fragment, { children: [jsx("div", { style: s.divider }), jsx("div", { ref: logRef, style: {
+                            fontFamily: '"JetBrains Mono","Fira Code",monospace',
+                            fontSize: 10,
+                            background: t.surface,
+                            border: `1px solid ${t.divider}`,
+                            borderRadius: t.radius,
+                            padding: '6px 8px',
+                            maxHeight: 180,
+                            overflowY: 'auto',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 1,
+                        }, children: wsLog.length === 0 ? (jsx("span", { style: { color: t.faint }, children: "No packets yet\u2026" })) : (wsLog.map((line, i) => (jsx("div", { style: {
+                                color: line.includes('→')
+                                    ? t.muted
+                                    : line.includes('←')
+                                        ? t.ok
+                                        : line.includes('✗')
+                                            ? t.crit
+                                            : t.muted,
+                            }, children: line }, i)))) }), jsx("div", { style: { display: 'flex', justifyContent: 'flex-end' }, children: jsx("button", { style: s.btn, onClick: () => setWsLog([]), children: "clear" }) })] }))] }));
+}
+function MetricBar({ label, value, color, t }) {
+    const s = themeStyles(t);
+    return (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, minWidth: 180 }, children: [jsx("span", { style: Object.assign(Object.assign({}, s.label), { minWidth: 28 }), children: label }), jsx("span", { style: { color, letterSpacing: 1, minWidth: 72, fontFamily: '"JetBrains Mono","Fira Code",monospace' }, children: bar(value) }), jsx("span", { style: Object.assign(Object.assign({}, s.numval), { color, minWidth: 48 }), children: fmtPct(value) })] }));
+}
+function SparkBlock({ label, data, max, color }) {
+    return (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2, flex: 1 }, children: [jsx("span", { style: { fontSize: 10, color: '#9ca3af' }, children: label }), jsx(Sparkline, { data: data, max: max, color: color, fill: color + '22', width: 100, height: 28 })] }));
+}
+
+const LEVEL_LABELS = {
+    [RING_L1]: 'L1 (1h)',
+    [RING_L2]: 'L2 (24h)',
+    [RING_L3]: 'L3 (7d)',
+};
+function TimeSeriesChart({ metric, level = RING_L1, maxSamples = 60, height = 180, className, style, theme: themeProp, }) {
+    const base = useTheme();
+    const t = themeProp ? Object.assign(Object.assign({}, base), themeProp) : base;
+    const s = themeStyles(t);
+    const { client, connected } = useTinyTrack();
+    const [data, setData] = useState([]);
+    const addSamples = useCallback((samples) => {
+        setData((prev) => [...prev, ...samples].slice(-maxSamples));
+    }, [maxSamples]);
+    useEffect(() => {
+        if (!connected || !client)
+            return;
+        client.subscribe(level, 0);
+        client.getHistory(level, maxSamples);
+        const onHistory = (r) => {
+            if (r.level === level)
+                addSamples(r.samples);
+        };
+        const onMetrics = (m) => {
+            addSamples([m]);
+        };
+        client.on('history', onHistory);
+        client.on('metrics', onMetrics);
+        return () => {
+            client.off('history', onHistory);
+            client.off('metrics', onMetrics);
+        };
+    }, [connected, client, level, maxSamples, addSamples]);
+    const color = metricColor(metric, t);
+    const values = data.map((m) => extractValue$1(m, metric));
+    const maxVal = metric === 'cpu' || metric === 'mem' || metric === 'disk' ? 10000 : Math.max(...values, 1);
+    const latest = data[data.length - 1];
+    const latestVal = latest ? extractValue$1(latest, metric) : null;
+    return (jsxs("div", { className: className, style: Object.assign(Object.assign(Object.assign({}, s.root), { gap: 6 }), style), children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [jsx("span", { style: { fontSize: 13, fontWeight: 600, color: t.text }, children: metricLabel(metric) }), jsx("span", { style: { fontSize: 9, padding: '1px 4px', background: t.surface, borderRadius: t.radius, color: t.muted }, children: LEVEL_LABELS[level] }), jsx("span", { style: { flex: 1 } }), jsx("span", { style: Object.assign(Object.assign({}, s.value), { color, fontWeight: 600 }), children: latestVal !== null ? formatValue$1(latestVal, metric) : '—' })] }), jsxs("svg", { width: "100%", height: height, viewBox: `0 0 400 ${height}`, preserveAspectRatio: "none", style: { display: 'block' }, children: [values.length > 1 && jsx(ChartPath, { values: values, maxVal: maxVal, height: height, color: color }), values.length === 0 && (jsx("text", { x: "200", y: height / 2, textAnchor: "middle", fill: t.faint, fontSize: "12", children: "waiting for data\u2026" }))] }), jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', fontSize: 10 }, children: [jsxs("span", { style: { color: t.muted }, children: [data.length, " samples"] }), latest && jsx("span", { style: { color: t.muted }, children: new Date(latest.timestamp).toLocaleTimeString() })] })] }));
+}
+function ChartPath({ values, maxVal, height, color, }) {
+    const W = 400;
+    const PAD = 4;
+    const n = values.length;
+    const pts = values.map((v, i) => {
+        const x = (i / (n - 1)) * W;
+        const y = PAD + (1 - v / maxVal) * (height - PAD * 2);
+        return [x, y];
+    });
+    const line = pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
+    return (jsxs(Fragment, { children: [jsx("path", { d: `${line} L${W},${height} L0,${height} Z`, fill: color + '20' }), jsx("path", { d: line, fill: "none", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" })] }));
+}
+function extractValue$1(m, metric) {
+    switch (metric) {
+        case 'cpu':
+            return m.cpu;
+        case 'mem':
+            return m.mem;
+        case 'load':
+            return m.load1;
+        case 'net':
+            return m.netRx + m.netTx;
+        case 'disk':
+            return m.duUsage;
+        default:
+            return 0;
+    }
+}
+function formatValue$1(val, metric) {
+    if (metric === 'cpu' || metric === 'mem' || metric === 'disk')
+        return fmtPct(val);
+    if (metric === 'load')
+        return fmtLoad(val);
+    if (metric === 'net')
+        return fmtBytes(val) + '/s';
+    return String(val);
+}
+function metricLabel(m) {
+    return ({ cpu: 'CPU', mem: 'Memory', load: 'Load avg', net: 'Network', disk: 'Disk' }[m] || m);
+}
+function metricColor(m, t) {
+    return { cpu: t.cpu, mem: t.mem, load: t.load, net: t.net, disk: t.disk }[m] || t.muted;
+}
+
+const RINGS = [
+    { level: RING_L1, label: 'L1 · 1s', span: 3600, fmt: (ts) => fmtTime(ts) },
+    { level: RING_L2, label: 'L2 · 1m', span: 86400, fmt: (ts) => fmtHour(ts) },
+    { level: RING_L3, label: 'L3 · 1h', span: 7 * 86400, fmt: (ts) => fmtDay(ts) },
+];
+const METRIC_COLOR = {
+    cpu: '#4ade80',
+    mem: '#60a5fa',
+    load: '#a78bfa',
+    net: '#f59e0b',
+    disk: '#fb923c',
+};
+const METRIC_LABEL = {
+    cpu: 'CPU',
+    mem: 'Mem',
+    load: 'Load',
+    net: 'Net',
+    disk: 'Disk',
+};
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+function Timeline({ metric = 'cpu', rowHeight = 40, className, style, theme: themeProp }) {
+    const base = useTheme();
+    const t = themeProp ? Object.assign(Object.assign({}, base), themeProp) : base;
+    const s = themeStyles(t);
+    const { client, connected } = useTinyTrack();
+    const [samples, setSamples] = useState({
+        [RING_L1]: [],
+        [RING_L2]: [],
+        [RING_L3]: [],
+    });
+    const color = METRIC_COLOR[metric];
+    // Accumulate history per ring level
+    const addSamples = useCallback((level, incoming) => {
+        setSamples((prev) => {
+            const merged = [...prev[level], ...incoming];
+            const map = new Map(merged.map((m) => [m.timestamp, m]));
+            return Object.assign(Object.assign({}, prev), { [level]: [...map.values()].sort((a, b) => a.timestamp - b.timestamp) });
+        });
+    }, []);
+    useEffect(() => {
+        if (!connected || !client)
+            return;
+        client.getHistory(RING_L1, 3600);
+        client.getHistory(RING_L2, 1440);
+        client.getHistory(RING_L3, 168);
+        const onHistory = (r) => addSamples(r.level, r.samples);
+        const onMetrics = (m) => addSamples(RING_L1, [m]);
+        client.on('history', onHistory);
+        client.on('metrics', onMetrics);
+        return () => {
+            client.off('history', onHistory);
+            client.off('metrics', onMetrics);
+        };
+    }, [connected, client, addSamples]);
+    return (jsxs("div", { className: className, style: Object.assign(Object.assign({}, s.root), style), children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [jsxs("span", { style: { fontSize: 13, fontWeight: 600, color: t.text }, children: ["Timeline \u00B7 ", METRIC_LABEL[metric]] }), jsx("span", { style: { fontSize: 9, padding: '1px 5px', background: t.surface, borderRadius: t.radius, color }, children: METRIC_LABEL[metric] }), jsx("span", { style: { flex: 1 } }), jsx("span", { style: { fontSize: 10, color: t.faint }, children: "scroll \u2192" })] }), jsx("div", { style: s.divider }), RINGS.map((ring) => (jsx(TimelineRow, { label: ring.label, data: samples[ring.level], metric: metric, color: color, rowHeight: rowHeight, spanSec: ring.span, fmtTick: ring.fmt, t: t }, ring.level)))] }));
+}
+function TimelineRow({ label, data, metric, color, rowHeight, spanSec, fmtTick, t }) {
+    const scrollRef = useRef(null);
+    const [tooltip, setTooltip] = useState(null);
+    // Auto-scroll to right (latest) when new data arrives
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (el)
+            el.scrollLeft = el.scrollWidth;
+    }, [data.length]);
+    const values = useMemo(() => data.map((m) => extractValue(m, metric)), [data, metric]);
+    const maxVal = metric === 'cpu' || metric === 'mem' || metric === 'disk' ? 10000 : Math.max(...values, 1);
+    // Canvas-like: each sample = 4px wide bar
+    const BAR_W = 4;
+    const totalW = Math.max(data.length * BAR_W, 600);
+    const H = rowHeight;
+    const latest = data[data.length - 1];
+    const latestVal = latest ? extractValue(latest, metric) : null;
+    // Tick marks: every ~80px
+    const tickInterval = Math.max(1, Math.floor(80 / BAR_W));
+    const ticks = [];
+    data.forEach((m, i) => {
+        if (i % tickInterval === 0)
+            ticks.push({ x: i * BAR_W, label: fmtTick(m.timestamp) });
+    });
+    const handleMouseMove = useCallback((e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const idx = Math.floor(x / BAR_W);
+        if (idx >= 0 && idx < data.length) {
+            const m = data[idx];
+            const v = extractValue(m, metric);
+            setTooltip({ x, text: `${fmtTick(m.timestamp)}  ${formatValue(v, metric)}` });
+        }
+    }, [data, metric, fmtTick]);
+    return (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("span", { style: { color: t.muted, fontSize: 10, minWidth: 72 }, children: label }), jsx("span", { style: { color, fontSize: 11, fontWeight: 600 }, children: latestVal !== null ? formatValue(latestVal, metric) : '—' }), jsxs("span", { style: { color: t.faint, fontSize: 9, marginLeft: 'auto' }, children: [data.length, "pts"] })] }), jsx("div", { ref: scrollRef, style: {
+                    overflowX: 'auto',
+                    overflowY: 'hidden',
+                    background: t.surface,
+                    borderRadius: t.radius,
+                    border: `1px solid ${t.divider}`,
+                    height: H + 16,
+                    position: 'relative',
+                }, children: jsxs("div", { style: { position: 'relative', width: totalW, height: H + 16 }, children: [jsxs("svg", { width: totalW, height: H, style: { display: 'block', cursor: 'crosshair' }, onMouseMove: handleMouseMove, onMouseLeave: () => setTooltip(null), children: [values.map((v, i) => {
+                                    const barH = Math.max(1, (v / maxVal) * H);
+                                    return (jsx("rect", { x: i * BAR_W, y: H - barH, width: BAR_W - 1, height: barH, fill: color, opacity: 0.3 + (v / maxVal) * 0.7 }, i));
+                                }), tooltip && (jsx("line", { x1: tooltip.x, y1: 0, x2: tooltip.x, y2: H, stroke: t.text, strokeWidth: 1, opacity: 0.3 }))] }), jsx("div", { style: { position: 'relative', height: 16, overflow: 'hidden' }, children: ticks.map((tk, i) => (jsx("span", { style: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    fontSize: 9,
+                                    color: t.faint,
+                                    whiteSpace: 'nowrap',
+                                    transform: 'translateX(-50%)',
+                                    left: tk.x,
+                                }, children: tk.label }, i))) }), tooltip && (jsx("div", { style: {
+                                position: 'absolute',
+                                top: 2,
+                                left: tooltip.x + 6,
+                                fontSize: 10,
+                                background: t.surface,
+                                border: `1px solid ${t.border}`,
+                                borderRadius: t.radius,
+                                padding: '2px 6px',
+                                color: t.text,
+                                whiteSpace: 'nowrap',
+                                pointerEvents: 'none',
+                                zIndex: 10,
+                            }, children: tooltip.text }))] }) })] }));
+}
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function extractValue(m, metric) {
+    switch (metric) {
+        case 'cpu':
+            return m.cpu;
+        case 'mem':
+            return m.mem;
+        case 'load':
+            return m.load1;
+        case 'net':
+            return m.netRx + m.netTx;
+        case 'disk':
+            return m.duUsage;
+    }
+}
+function formatValue(val, metric) {
+    if (metric === 'cpu' || metric === 'mem' || metric === 'disk')
+        return fmtPct(val);
+    if (metric === 'load')
+        return fmtLoad(val);
+    if (metric === 'net')
+        return fmtBytes(val) + '/s';
+    return String(val);
+}
+function fmtTime(ts) {
+    return new Date(ts).toLocaleTimeString('en', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+    });
+}
+function fmtHour(ts) {
+    return new Date(ts).toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit' });
+}
+function fmtDay(ts) {
+    const d = new Date(ts);
+    return `${d.getMonth() + 1}/${d.getDate()} ${String(d.getHours()).padStart(2, '0')}h`;
+}
+
+export { Dashboard, MetricsBar, MetricsPanel, THEMES, ThemeProvider, TimeSeriesChart, Timeline, TinyTrackContext, TinyTrackProvider, useHistory, useMetrics, useTheme, useTinyTrack };