causal-inspector 0.1.0

package/dist/CausalInspector.css

@@ -0,0 +1,124 @@
+/* ── CausalInspector scoped styles ───────────────────────────── */
+
+.causal-inspector {
+  height: 100%;
+  width: 100%;
+  background: #0a0a0f;
+  color: #e0e0f0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ── Scrollbar ────────────────────────────────────────────── */
+.causal-inspector ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.causal-inspector ::-webkit-scrollbar-track {
+  background: transparent;
+}
+.causal-inspector ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 3px;
+}
+.causal-inspector ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+/* ── Flexlayout overrides ─────────────────────────────────── */
+.causal-inspector .flexlayout__tabset-selected,
+.causal-inspector .flexlayout__tabset-maximized {
+  background-image: none;
+}
+.causal-inspector .flexlayout__tabset_tabbar_outer {
+  background: rgba(15, 15, 20, 0.8) !important;
+  backdrop-filter: blur(12px) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
+}
+.causal-inspector .flexlayout__tab_button--selected {
+  background: rgba(99, 102, 241, 0.12) !important;
+  color: #c7c7ff !important;
+}
+.causal-inspector .flexlayout__tab_button {
+  color: #70708a !important;
+  font-size: 11px !important;
+  letter-spacing: 0.02em !important;
+  transition: color 150ms, background 150ms !important;
+}
+.causal-inspector .flexlayout__tab_button:hover {
+  color: #b0b0c0 !important;
+  background: rgba(255, 255, 255, 0.04) !important;
+}
+.causal-inspector .flexlayout__splitter {
+  background: rgba(255, 255, 255, 0.03) !important;
+}
+.causal-inspector .flexlayout__splitter:hover {
+  background: rgba(99, 102, 241, 0.2) !important;
+}
+.causal-inspector .flexlayout__splitter_drag {
+  background: rgba(99, 102, 241, 0.3) !important;
+}
+
+/* ── Flow diagram ─────────────────────────────────────────── */
+.causal-inspector .react-flow .react-flow__edges {
+  z-index: 0 !important;
+}
+.causal-inspector .react-flow .react-flow__nodes {
+  position: relative;
+  z-index: 1 !important;
+}
+.causal-inspector .react-flow__controls {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+  border-radius: 8px !important;
+  overflow: hidden !important;
+}
+.causal-inspector .react-flow__controls-button {
+  background: rgba(15, 15, 20, 0.9) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
+  fill: #70708a !important;
+}
+.causal-inspector .react-flow__controls-button:hover {
+  background: rgba(99, 102, 241, 0.15) !important;
+  fill: #c7c7ff !important;
+}
+
+/* ── Selection ring ───────────────────────────────────────── */
+.causal-inspector *:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
+  border-radius: 4px;
+}
+
+/* ── Range input ──────────────────────────────────────────── */
+.causal-inspector input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 2px;
+}
+.causal-inspector input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #6366f1;
+  cursor: pointer;
+  box-shadow: 0 0 6px rgba(99, 102, 241, 0.4);
+  transition: transform 100ms;
+}
+.causal-inspector input[type="range"]::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+
+/* ── Pulse animation for running reactors ─────────────────── */
+@keyframes causal-inspector-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+@keyframes causal-inspector-glow {
+  0%, 100% { box-shadow: 0 0 4px rgba(99, 102, 241, 0.2); }
+  50% { box-shadow: 0 0 12px rgba(99, 102, 241, 0.4); }
+}

package/dist/CausalInspector.d.ts

@@ -0,0 +1,13 @@
+import "./CausalInspector.css";
+export type CausalInspectorProps = {
+    /** GraphQL endpoint URL (relative or absolute). Queries POST here, WS connects to {endpoint}/ws */
+    endpoint: string;
+    /** Extra fetch options. Defaults to { credentials: "include" } */
+    fetchOptions?: {
+        credentials?: RequestCredentials;
+        headers?: Record<string, string>;
+    };
+    /** CSS class for the container */
+    className?: string;
+};
+export declare function CausalInspector({ endpoint, fetchOptions, className, }: CausalInspectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/CausalInspector.js

@@ -0,0 +1,257 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useCallback, useEffect } from "react";
+import { Layout, Model, Actions, DockLocation, } from "flexlayout-react";
+import { createClient } from "graphql-ws";
+import { Plus } from "lucide-react";
+import { CausalInspectorProvider } from "./context";
+import { createInspectorEngine } from "./engines";
+import { useSelector, useDispatch } from "./machine";
+import { TimelinePane } from "./panes/TimelinePane";
+import { CausalTreePane } from "./panes/CausalTreePane";
+import { CausalFlowPane } from "./panes/CausalFlowPane";
+import { LogsPane } from "./panes/LogsPane";
+import { AggregateTimelinePane } from "./panes/AggregateTimelinePane";
+import { WaterfallPane } from "./panes/WaterfallPane";
+import { CorrelationExplorerPane } from "./panes/CorrelationExplorerPane";
+import "./CausalInspector.css";
+// ── Transport ─────────────────────────────────────────────────
+function createTransport(endpoint, fetchOptions) {
+    const url = new URL(endpoint, window.location.origin);
+    const httpUrl = url.toString();
+    const wsUrl = httpUrl.replace(/^http/, "ws") + "/ws";
+    const wsClient = createClient({ url: wsUrl });
+    return {
+        async query(query, variables) {
+            const res = await fetch(httpUrl, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    ...fetchOptions?.headers,
+                },
+                credentials: fetchOptions?.credentials ?? "include",
+                body: JSON.stringify({ query, variables }),
+            });
+            const json = await res.json();
+            if (json.errors) {
+                throw new Error(json.errors
+                    .map((e) => e.message)
+                    .join(", "));
+            }
+            return json.data;
+        },
+        subscribe(query, variables, onData, onError) {
+            let disposed = false;
+            const unsubscribe = wsClient.subscribe({ query, variables }, {
+                next(value) {
+                    if (!disposed && value.data)
+                        onData(value.data);
+                },
+                error(err) {
+                    if (!disposed)
+                        onError?.(err);
+                },
+                complete() { },
+            });
+            return () => {
+                disposed = true;
+                unsubscribe();
+            };
+        },
+    };
+}
+// ── Layout persistence ────────────────────────────────────────
+const STORAGE_KEY = "causal-inspector-layout";
+function loadSavedLayout() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw)
+            return null;
+        const json = JSON.parse(raw);
+        Model.fromJson(json); // validate
+        return json;
+    }
+    catch {
+        localStorage.removeItem(STORAGE_KEY);
+        return null;
+    }
+}
+const storage = {
+    saveLayout: (layout) => {
+        try {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(layout));
+        }
+        catch { }
+    },
+};
+// ── Default layout ────────────────────────────────────────────
+const DEFAULT_LAYOUT = {
+    global: {
+        tabEnableClose: true,
+        tabSetEnableMaximize: true,
+        tabSetEnableTabStrip: true,
+        splitterSize: 6,
+        splitterExtra: 4,
+        enableEdgeDock: false,
+    },
+    layout: {
+        type: "row",
+        children: [
+            {
+                type: "tabset",
+                weight: 55,
+                children: [
+                    { type: "tab", name: "Timeline", component: "timeline" },
+                ],
+            },
+            {
+                type: "tabset",
+                weight: 45,
+                children: [
+                    { type: "tab", name: "Causal Tree", component: "causal-tree" },
+                ],
+            },
+        ],
+    },
+};
+// ── Pane registry ─────────────────────────────────────────────
+const PANE_REGISTRY = [
+    { name: "Timeline", component: "timeline", render: () => _jsx(TimelinePane, {}) },
+    {
+        name: "Causal Tree",
+        component: "causal-tree",
+        render: () => _jsx(CausalTreePane, {}),
+    },
+    {
+        name: "Flow",
+        component: "causal-flow",
+        render: () => _jsx(CausalFlowPane, {}),
+    },
+    { name: "Logs", component: "logs", render: () => _jsx(LogsPane, {}) },
+    {
+        name: "State Timeline",
+        component: "state-timeline",
+        render: () => _jsx(AggregateTimelinePane, {}),
+    },
+    {
+        name: "Waterfall",
+        component: "waterfall",
+        render: () => _jsx(WaterfallPane, {}),
+    },
+    {
+        name: "Correlations",
+        component: "correlations",
+        render: () => _jsx(CorrelationExplorerPane, {}),
+    },
+];
+// ── Helpers ───────────────────────────────────────────────────
+function findTab(model, component) {
+    let found = null;
+    model.visitNodes((node) => {
+        if (node.getType() === "tab" &&
+            node.getComponent() === component) {
+            found = node;
+        }
+    });
+    return found;
+}
+// ── InspectorLayout (inner component) ─────────────────────────
+function InspectorLayout() {
+    const paneLayout = useSelector((s) => s.paneLayout);
+    const flowCorrelationId = useSelector((s) => s.flowCorrelationId);
+    const selectedSeq = useSelector((s) => s.selectedSeq);
+    const dispatch = useDispatch();
+    const modelRef = useRef(null);
+    if (!modelRef.current) {
+        const json = paneLayout ?? DEFAULT_LAYOUT;
+        try {
+            modelRef.current = Model.fromJson(json);
+        }
+        catch {
+            modelRef.current = Model.fromJson(DEFAULT_LAYOUT);
+        }
+    }
+    const layoutRef = useRef(null);
+    const addTab = useCallback((component, name) => {
+        const model = modelRef.current;
+        const existing = findTab(model, component);
+        if (existing) {
+            model.doAction(Actions.selectTab(existing.getId()));
+            return;
+        }
+        const target = model.getActiveTabset()?.getId() ??
+            model.getRoot().getChildren()[0]?.getId() ??
+            "";
+        model.doAction(Actions.addNode({ type: "tab", component, name }, target, DockLocation.CENTER, -1));
+    }, []);
+    useEffect(() => {
+        if (selectedSeq != null)
+            addTab("causal-tree", "Causal Tree");
+    }, [selectedSeq, addTab]);
+    useEffect(() => {
+        if (flowCorrelationId)
+            addTab("causal-flow", "Flow");
+    }, [flowCorrelationId, addTab]);
+    const factory = useCallback((node) => {
+        const component = node.getComponent();
+        const pane = PANE_REGISTRY.find((p) => p.component === component);
+        if (!pane)
+            return (_jsxs("div", { style: { padding: 16, fontSize: 12, color: "#9090a0" }, children: ["Unknown pane: ", component] }));
+        return (_jsx("div", { style: { height: "100%", overflow: "hidden" }, children: pane.render() }));
+    }, []);
+    const onModelChange = useCallback((model, action) => {
+        dispatch({
+            type: "ui/layout_changed",
+            payload: model.toJson(),
+        });
+        if (action.type === Actions.DELETE_TAB) {
+            if (!findTab(model, "causal-flow")) {
+                dispatch({ type: "ui/flow_closed" });
+            }
+        }
+    }, [dispatch]);
+    const onRenderTabSet = useCallback((_node, renderValues) => {
+        renderValues.stickyButtons.push(_jsx("button", { className: "flexlayout__tab_toolbar_button", title: "Add pane", onClick: (e) => {
+                const btn = e.currentTarget;
+                const rect = btn.getBoundingClientRect();
+                const menu = document.createElement("div");
+                menu.style.cssText = `position:fixed;z-index:9999;background:rgba(17,17,22,0.95);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:4px;box-shadow:0 8px 32px rgba(0,0,0,0.5);top:${rect.bottom + 6}px;right:${window.innerWidth - rect.right}px;`;
+                for (const pane of PANE_REGISTRY) {
+                    const item = document.createElement("button");
+                    item.textContent = pane.name;
+                    item.style.cssText =
+                        "display:block;width:100%;text-align:left;padding:7px 14px;font-size:11px;color:rgba(240,240,245,0.7);background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all 100ms;letter-spacing:0.02em;";
+                    item.onmouseenter = () => {
+                        item.style.background = "rgba(255,255,255,0.04)";
+                        item.style.color = "rgba(240,240,245,0.95)";
+                    };
+                    item.onmouseleave = () => {
+                        item.style.background = "transparent";
+                        item.style.color = "rgba(240,240,245,0.7)";
+                    };
+                    item.onclick = () => {
+                        addTab(pane.component, pane.name);
+                        menu.remove();
+                    };
+                    menu.appendChild(item);
+                }
+                document.body.appendChild(menu);
+                const close = (ev) => {
+                    if (!menu.contains(ev.target)) {
+                        menu.remove();
+                        document.removeEventListener("mousedown", close);
+                    }
+                };
+                setTimeout(() => document.addEventListener("mousedown", close), 0);
+            }, children: _jsx(Plus, { size: 14 }) }, "add-pane"));
+    }, [addTab]);
+    return (_jsx("div", { style: { height: "100%", width: "100%" }, children: _jsx(Layout, { ref: layoutRef, model: modelRef.current, factory: factory, onModelChange: onModelChange, onRenderTabSet: onRenderTabSet }) }));
+}
+// ── CausalInspector (public API) ──────────────────────────────
+const savedLayout = loadSavedLayout();
+export function CausalInspector({ endpoint, fetchOptions, className, }) {
+    const transport = useMemo(() => createTransport(endpoint, fetchOptions), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [endpoint]);
+    const createEngine = useMemo(() => createInspectorEngine(transport, storage), [transport]);
+    return (_jsx("div", { className: `causal-inspector${className ? ` ${className}` : ""}`, children: _jsx(CausalInspectorProvider, { createEngine: createEngine, initialState: savedLayout ? { paneLayout: savedLayout } : undefined, children: _jsx(InspectorLayout, {}) }) }));
+}

package/dist/components/CopyablePayload.d.ts

@@ -0,0 +1,4 @@
+export declare function CopyablePayload({ payload, className, }: {
+    payload: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/CopyablePayload.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { JsonSyntax } from "./JsonSyntax";
+import { copyToClipboard } from "../utils";
+import { Copy, Check, Maximize2, X } from "lucide-react";
+function formatPayload(raw) {
+    try {
+        return JSON.stringify(JSON.parse(raw), null, 2);
+    }
+    catch {
+        return raw;
+    }
+}
+function PayloadModal({ formatted, onClose, }) {
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        const handleKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        document.addEventListener("keydown", handleKey);
+        return () => document.removeEventListener("keydown", handleKey);
+    }, [onClose]);
+    return createPortal(_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center", style: { background: "rgba(0, 0, 0, 0.6)", backdropFilter: "blur(4px)" }, onClick: onClose, children: _jsxs("div", { className: "relative w-[90vw] max-h-[90vh] overflow-auto rounded-xl border border-border p-5", style: { background: "rgba(15, 15, 20, 0.95)", boxShadow: "0 24px 64px rgba(0, 0, 0, 0.5)" }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "absolute top-3 right-3 flex gap-1", children: [_jsx("button", { onClick: async () => {
+                                await copyToClipboard(formatted);
+                                setCopied(true);
+                                setTimeout(() => setCopied(false), 1500);
+                            }, className: "p-1.5 rounded-md hover:bg-white/[0.05] transition-colors text-xs text-muted-foreground/50 hover:text-foreground", title: "Copy payload", children: copied ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }) }), _jsx("button", { onClick: onClose, className: "p-1.5 rounded-md hover:bg-white/[0.05] transition-colors text-xs text-muted-foreground/50 hover:text-foreground", title: "Close", children: _jsx(X, { size: 14 }) })] }), _jsx("pre", { className: "text-xs whitespace-pre-wrap", children: _jsx(JsonSyntax, { json: formatted }) })] }) }), document.body);
+}
+export function CopyablePayload({ payload, className = "", }) {
+    const [copied, setCopied] = useState(false);
+    const [modalOpen, setModalOpen] = useState(false);
+    const formatted = formatPayload(payload);
+    return (_jsxs("div", { className: `relative ${className}`, children: [_jsx("pre", { className: "p-2.5 text-[10px] rounded-md border border-border overflow-auto whitespace-pre-wrap resize-y min-h-24 max-h-[80vh]", style: { background: "rgba(255, 255, 255, 0.015)" }, children: _jsx(JsonSyntax, { json: formatted }) }), _jsxs("div", { className: "absolute top-2 right-2 z-10 flex gap-1", children: [_jsx("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            setModalOpen(true);
+                        }, className: "p-1 rounded-md border border-border hover:bg-white/[0.05] transition-all text-[10px] text-muted-foreground/40 hover:text-muted-foreground", style: { background: "rgba(10, 10, 15, 0.8)", backdropFilter: "blur(4px)" }, title: "Expand", children: _jsx(Maximize2, { size: 12 }) }), _jsx("button", { onClick: async (e) => {
+                            e.stopPropagation();
+                            await copyToClipboard(formatted);
+                            setCopied(true);
+                            setTimeout(() => setCopied(false), 1500);
+                        }, className: "p-1 rounded-md border border-border hover:bg-white/[0.05] transition-all text-[10px] text-muted-foreground/40 hover:text-muted-foreground", style: { background: "rgba(10, 10, 15, 0.8)", backdropFilter: "blur(4px)" }, title: "Copy", children: copied ? _jsx(Check, { size: 12 }) : _jsx(Copy, { size: 12 }) })] }), modalOpen && (_jsx(PayloadModal, { formatted: formatted, onClose: () => setModalOpen(false) }))] }));
+}

package/dist/components/FilterBar.d.ts

@@ -0,0 +1 @@
+export declare function FilterBar(): import("react/jsx-runtime").JSX.Element;

package/dist/components/FilterBar.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useSelector, useDispatch } from "../machine";
+import { Search, X } from "lucide-react";
+export function FilterBar() {
+    const filters = useSelector((s) => s.filters);
+    const dispatch = useDispatch();
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2 px-3 py-2 border-b border-border", style: { background: "rgba(15, 15, 20, 0.6)", backdropFilter: "blur(8px)" }, children: [_jsxs("div", { className: "relative flex items-center", children: [_jsx(Search, { size: 12, className: "absolute left-2.5 text-muted-foreground pointer-events-none" }), _jsx("input", { type: "text", placeholder: "search events...", value: filters.search, onChange: (e) => dispatch({
+                            type: "ui/filter_changed",
+                            payload: { search: e.target.value },
+                        }), className: "pl-7 pr-2 py-1.5 text-xs rounded-md bg-background/50 border border-border text-foreground placeholder:text-muted-foreground w-64 focus:outline-none focus:ring-1 focus:ring-indigo-500/40 focus:border-indigo-500/30 transition-all" })] }), _jsx("span", { className: "w-px h-4 bg-border" }), _jsx("label", { className: "text-[10px] text-muted-foreground uppercase tracking-wider", children: "From" }), _jsx("input", { type: "date", value: filters.from ?? "", onChange: (e) => dispatch({
+                    type: "ui/filter_changed",
+                    payload: { from: e.target.value || null },
+                }), className: "px-2 py-1.5 text-xs rounded-md bg-background/50 border border-border text-foreground w-32 focus:outline-none focus:ring-1 focus:ring-indigo-500/40 focus:border-indigo-500/30 transition-all" }), _jsx("label", { className: "text-[10px] text-muted-foreground uppercase tracking-wider", children: "To" }), _jsx("input", { type: "date", value: filters.to ?? "", onChange: (e) => dispatch({
+                    type: "ui/filter_changed",
+                    payload: { to: e.target.value || null },
+                }), className: "px-2 py-1.5 text-xs rounded-md bg-background/50 border border-border text-foreground w-32 focus:outline-none focus:ring-1 focus:ring-indigo-500/40 focus:border-indigo-500/30 transition-all" }), filters.correlationId && (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-px h-4 bg-border" }), _jsxs("span", { className: "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-[10px] font-mono", children: [filters.correlationId.slice(0, 8), _jsx("button", { onClick: () => dispatch({
+                                    type: "ui/filter_changed",
+                                    payload: { correlationId: null },
+                                }), className: "hover:text-foreground transition-colors", children: _jsx(X, { size: 10 }) })] })] })), filters.aggregateKey && (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-px h-4 bg-border" }), _jsxs("span", { className: "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-teal-500/10 border border-teal-500/20 text-teal-400 text-[10px] font-mono", children: [filters.aggregateKey.split(":")[0], ":", filters.aggregateKey.split(":").slice(1).join(":").slice(0, 8), _jsx("button", { onClick: () => dispatch({
+                                    type: "ui/filter_changed",
+                                    payload: { aggregateKey: null },
+                                }), className: "hover:text-foreground transition-colors", children: _jsx(X, { size: 10 }) })] })] }))] }));
+}

package/dist/components/GlobalScrubber.d.ts

@@ -0,0 +1 @@
+export declare function GlobalScrubber(): import("react/jsx-runtime").JSX.Element;

package/dist/components/GlobalScrubber.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef } from "react";
+import { useSelector, useDispatch } from "../machine";
+import { getScrubberSequence } from "../utils";
+import { Play, Pause, SkipBack, SkipForward, ChevronsRight, RotateCcw } from "lucide-react";
+// ---------------------------------------------------------------------------
+// Dual-handle range slider
+// ---------------------------------------------------------------------------
+function RangeSlider({ seqs, start, end, onStartChange, onEndChange, }) {
+    const trackRef = useRef(null);
+    const min = seqs[0] ?? 0;
+    const max = seqs[seqs.length - 1] ?? 0;
+    const range = max - min || 1;
+    const startVal = start ?? min;
+    const endVal = end ?? max;
+    const leftPct = ((startVal - min) / range) * 100;
+    const rightPct = ((endVal - min) / range) * 100;
+    function snapToNearest(value) {
+        return seqs.reduce((best, s) => Math.abs(s - value) < Math.abs(best - value) ? s : best, seqs[0]);
+    }
+    function valueFromPointer(clientX) {
+        const track = trackRef.current;
+        if (!track)
+            return min;
+        const rect = track.getBoundingClientRect();
+        const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        return min + pct * range;
+    }
+    function handlePointerDown(which) {
+        return (e) => {
+            e.preventDefault();
+            const el = e.currentTarget;
+            el.setPointerCapture(e.pointerId);
+            const onMove = (ev) => {
+                const raw = valueFromPointer(ev.clientX);
+                const snapped = snapToNearest(raw);
+                if (which === "start") {
+                    // Clamp: start cannot exceed end
+                    const clampedEnd = end ?? max;
+                    onStartChange(snapped >= clampedEnd ? clampedEnd : snapped <= min ? null : snapped);
+                }
+                else {
+                    // Clamp: end cannot go below start
+                    const clampedStart = start ?? min;
+                    onEndChange(snapped <= clampedStart ? clampedStart : snapped >= max ? null : snapped);
+                }
+            };
+            const onUp = () => {
+                el.removeEventListener("pointermove", onMove);
+                el.removeEventListener("pointerup", onUp);
+            };
+            el.addEventListener("pointermove", onMove);
+            el.addEventListener("pointerup", onUp);
+        };
+    }
+    return (_jsxs("div", { ref: trackRef, className: "relative flex-1 h-5 flex items-center cursor-pointer group/slider", children: [_jsx("div", { className: "absolute inset-x-0 h-1 rounded-full bg-white/[0.06]" }), _jsx("div", { className: "absolute h-1 rounded-full bg-indigo-500/40 transition-none", style: { left: `${leftPct}%`, width: `${rightPct - leftPct}%` } }), _jsx("div", { onPointerDown: handlePointerDown("start"), className: "absolute w-3 h-3 rounded-full bg-white/60 hover:bg-white border border-white/20 hover:border-indigo-400/50 shadow-sm transition-colors duration-100 -translate-x-1/2 cursor-grab active:cursor-grabbing z-10", style: { left: `${leftPct}%` }, title: "Range start" }), _jsx("div", { onPointerDown: handlePointerDown("end"), className: "absolute w-3 h-3 rounded-full bg-indigo-400 hover:bg-indigo-300 border border-indigo-400/50 hover:border-indigo-300 shadow-sm transition-colors duration-100 -translate-x-1/2 cursor-grab active:cursor-grabbing z-10", style: { left: `${rightPct}%` }, title: "Range end" })] }));
+}
+// ---------------------------------------------------------------------------
+// Context label
+// ---------------------------------------------------------------------------
+function getContextLabel(flowCorrelationId, flowSelection) {
+    if (!flowCorrelationId)
+        return "All events";
+    if (flowSelection) {
+        if (flowSelection.kind === "event-type")
+            return `${flowSelection.name} events`;
+        return `Reactor ${flowSelection.reactorId}`;
+    }
+    return `Flow ${flowCorrelationId.slice(0, 8)}`;
+}
+// ---------------------------------------------------------------------------
+// GlobalScrubber
+// ---------------------------------------------------------------------------
+export function GlobalScrubber() {
+    const scrubberStart = useSelector((s) => s.scrubberStart);
+    const scrubberEnd = useSelector((s) => s.scrubberEnd);
+    const playing = useSelector((s) => s.scrubberPlaying);
+    const speed = useSelector((s) => s.scrubberSpeed);
+    const flowCorrelationId = useSelector((s) => s.flowCorrelationId);
+    const flowSelection = useSelector((s) => s.flowSelection);
+    const flowData = useSelector((s) => s.flowData);
+    const events = useSelector((s) => s.events);
+    const dispatch = useDispatch();
+    const seqs = useMemo(() => getScrubberSequence({ flowCorrelationId, flowData, flowSelection, events }), [flowCorrelationId, flowData, flowSelection, events]);
+    const endVal = scrubberEnd ?? (seqs[seqs.length - 1] ?? 0);
+    const isAtEnd = scrubberEnd == null || (seqs.length > 0 && scrubberEnd >= seqs[seqs.length - 1]);
+    // Count events in range
+    const startIndex = scrubberStart != null
+        ? seqs.filter((s) => s < scrubberStart).length + 1
+        : 1;
+    const endIndex = scrubberEnd != null
+        ? seqs.filter((s) => s <= scrubberEnd).length
+        : seqs.length;
+    const hasRange = scrubberStart != null;
+    const stepBack = useCallback(() => {
+        const idx = seqs.findIndex((s) => s >= endVal);
+        const prev = seqs[Math.max(0, idx - 1)];
+        if (prev != null)
+            dispatch({ type: "ui/scrubber_end_changed", payload: { end: prev } });
+    }, [seqs, endVal, dispatch]);
+    const stepForward = useCallback(() => {
+        const next = seqs.find((s) => s > endVal);
+        if (next != null) {
+            dispatch({ type: "ui/scrubber_end_changed", payload: { end: next } });
+        }
+        else {
+            dispatch({ type: "ui/scrubber_end_changed", payload: { end: null } });
+        }
+    }, [seqs, endVal, dispatch]);
+    const reset = useCallback(() => {
+        if (playing)
+            dispatch({ type: "ui/scrubber_play_toggled" });
+        dispatch({ type: "ui/scrubber_start_changed", payload: { start: null } });
+        dispatch({ type: "ui/scrubber_end_changed", payload: { end: seqs[0] ?? null } });
+    }, [seqs, playing, dispatch]);
+    const jumpToEnd = useCallback(() => {
+        if (playing)
+            dispatch({ type: "ui/scrubber_play_toggled" });
+        dispatch({ type: "ui/scrubber_end_changed", payload: { end: null } });
+    }, [playing, dispatch]);
+    const togglePlay = useCallback(() => {
+        if (!playing && isAtEnd && seqs.length > 0) {
+            dispatch({ type: "ui/scrubber_end_changed", payload: { end: seqs[0] } });
+        }
+        dispatch({ type: "ui/scrubber_play_toggled" });
+    }, [playing, isAtEnd, seqs, dispatch]);
+    const cycleSpeed = useCallback(() => {
+        const speeds = [500, 300, 150, 50];
+        const idx = speeds.indexOf(speed);
+        const next = speeds[(idx + 1) % speeds.length];
+        dispatch({ type: "ui/scrubber_speed_changed", payload: { speed: next } });
+    }, [speed, dispatch]);
+    const handleStartChange = useCallback((start) => {
+        dispatch({ type: "ui/scrubber_start_changed", payload: { start } });
+    }, [dispatch]);
+    const handleEndChange = useCallback((end) => {
+        dispatch({ type: "ui/scrubber_end_changed", payload: { end } });
+    }, [dispatch]);
+    const disabled = seqs.length < 2;
+    const speedLabel = speed <= 50 ? "4x" : speed <= 150 ? "2x" : speed <= 300 ? "1x" : "0.5x";
+    const btnClass = `p-1.5 rounded-md transition-all duration-150 ${disabled ? "text-muted-foreground/20 cursor-default" : "text-muted-foreground/60 hover:text-foreground hover:bg-white/[0.05]"}`;
+    const contextLabel = getContextLabel(flowCorrelationId, flowSelection);
+    return (_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-t border-border shrink-0", style: { background: "rgba(15, 15, 20, 0.6)", backdropFilter: "blur(8px)" }, children: [_jsx("span", { className: "text-[9px] font-medium text-muted-foreground/40 uppercase tracking-wider shrink-0 max-w-[120px] truncate", title: contextLabel, children: contextLabel }), _jsx("button", { onClick: disabled ? undefined : reset, className: btnClass, title: "Reset to start", children: _jsx(RotateCcw, { size: 12 }) }), _jsx("button", { onClick: disabled ? undefined : stepBack, className: btnClass, title: "Step back", children: _jsx(SkipBack, { size: 12 }) }), _jsx("button", { onClick: disabled ? undefined : togglePlay, className: `p-1.5 rounded-md transition-all duration-150 ${disabled
+                    ? "text-muted-foreground/20 cursor-default"
+                    : playing
+                        ? "text-indigo-400 bg-indigo-500/10"
+                        : "text-muted-foreground/60 hover:text-foreground hover:bg-white/[0.05]"}`, title: playing ? "Pause" : "Play", children: playing ? _jsx(Pause, { size: 14 }) : _jsx(Play, { size: 14 }) }), _jsx("button", { onClick: disabled ? undefined : stepForward, className: btnClass, title: "Step forward", children: _jsx(SkipForward, { size: 12 }) }), _jsx("button", { onClick: disabled ? undefined : jumpToEnd, className: btnClass, title: "Jump to end", children: _jsx(ChevronsRight, { size: 12 }) }), disabled ? (_jsx("div", { className: "flex-1 h-5 flex items-center", children: _jsx("div", { className: "w-full h-1 rounded-full bg-white/[0.04]" }) })) : (_jsx(RangeSlider, { seqs: seqs, start: scrubberStart, end: scrubberEnd, onStartChange: handleStartChange, onEndChange: handleEndChange })), _jsx("span", { className: `text-[10px] tabular-nums min-w-[4rem] text-right shrink-0 ${disabled ? "text-muted-foreground/20" : "text-muted-foreground/60"}`, children: disabled ? `${seqs.length}` : `${hasRange ? `${startIndex}-${endIndex}` : endIndex}/${seqs.length}` }), _jsx("button", { onClick: disabled ? undefined : cycleSpeed, className: `text-[10px] px-2 py-1 rounded-md border tabular-nums min-w-[2.5rem] text-center transition-all duration-150 shrink-0 ${disabled ? "text-muted-foreground/20 border-border/50 cursor-default" : "text-muted-foreground/60 hover:text-foreground border-border hover:border-indigo-500/30"}`, title: "Playback speed", children: speedLabel })] }));
+}

package/dist/components/JsonSyntax.d.ts

@@ -0,0 +1,3 @@
+export declare function JsonSyntax({ json }: {
+    json: string;
+}): import("react/jsx-runtime").JSX.Element;