causal-inspector 0.1.0

package/dist/panes/CausalTreePane.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useRef, useEffect, useCallback } from "react";
+import { useSelector, useDispatch } from "../machine";
+import { CopyablePayload } from "../components/CopyablePayload";
+import { eventTextColor } from "../theme";
+import { formatTs, compactPayload, copyToClipboard, inScrubberRange } from "../utils";
+import { Copy, Check, Search, X, ChevronRight, ChevronDown } from "lucide-react";
+function buildTreeJson(roots, childrenMap) {
+    function toNode(evt) {
+        const children = evt.id ? (childrenMap.get(evt.id) ?? []) : [];
+        const node = {
+            name: evt.name,
+            reactorId: evt.reactorId,
+            summary: evt.summary,
+        };
+        if (children.length > 0) {
+            node.children = children.map(toNode);
+        }
+        return node;
+    }
+    return roots.map(toNode);
+}
+// ---------------------------------------------------------------------------
+// ReactorNode — intermediate node grouping children by reactor_id
+// ---------------------------------------------------------------------------
+function ReactorNode({ reactorId, parentEventId, children, childrenMap, depth, isHighlighted, onClickReactor, }) {
+    const [collapsed, setCollapsed] = useState(false);
+    const nodeRef = useRef(null);
+    useEffect(() => {
+        if (isHighlighted && nodeRef.current) {
+            nodeRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        }
+    }, [isHighlighted]);
+    const handleClick = useCallback(() => {
+        onClickReactor(reactorId, parentEventId);
+    }, [onClickReactor, parentEventId, reactorId]);
+    return (_jsxs("div", { className: depth > 0 ? "pl-6" : "", children: [_jsx("div", { ref: isHighlighted ? nodeRef : undefined, className: `group/tree w-full text-left px-2 py-1.5 rounded-md transition-all duration-150 hover:bg-white/[0.03] ${isHighlighted ? "bg-indigo-500/15 ring-1 ring-indigo-500/25" : ""}`, children: _jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [_jsx("button", { onClick: (e) => { e.stopPropagation(); setCollapsed(v => !v); }, className: "text-[10px] text-muted-foreground hover:text-foreground shrink-0 w-3 text-center", children: collapsed ? _jsx(ChevronRight, { size: 10 }) : _jsx(ChevronDown, { size: 10 }) }), _jsxs("button", { onClick: handleClick, className: "flex items-center gap-1.5 min-w-0", children: [_jsx("span", { className: "px-1.5 py-0.5 rounded text-[9px] font-medium shrink-0 bg-white/[0.04] text-muted-foreground/60 italic border border-border", children: "reactor" }), _jsx("span", { className: "text-[10px] font-mono text-foreground/60 shrink-0", children: reactorId }), collapsed && (_jsxs("span", { className: "text-[10px] text-muted-foreground shrink-0", children: ["(", children.length, ")"] }))] })] }) }), !collapsed && children.map((child) => (_jsx(TreeNode, { event: child, childrenMap: childrenMap, depth: depth + 1, onClickReactor: onClickReactor }, child.seq)))] }));
+}
+// ---------------------------------------------------------------------------
+// TreeNode (recursive)
+// ---------------------------------------------------------------------------
+function TreeNode({ event, childrenMap, depth, onClickReactor, onInvestigate, }) {
+    const selectedSeq = useSelector((s) => s.selectedSeq);
+    const flowSelection = useSelector((s) => s.flowSelection);
+    const dispatch = useDispatch();
+    const [payloadOpen, setPayloadOpen] = useState(false);
+    const [collapsed, setCollapsed] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const isSelected = event.seq === selectedSeq;
+    const children = event.id ? (childrenMap.get(event.id) ?? []) : [];
+    const hasChildren = children.length > 0;
+    const nodeRef = useRef(null);
+    useEffect(() => {
+        if (isSelected && nodeRef.current) {
+            nodeRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        }
+    }, [isSelected]);
+    // Group children by reactor_id
+    const { reactorGroups, directChildren } = useMemo(() => {
+        const groups = new Map();
+        const direct = [];
+        for (const child of children) {
+            if (child.reactorId) {
+                const group = groups.get(child.reactorId) ?? [];
+                group.push(child);
+                groups.set(child.reactorId, group);
+            }
+            else {
+                direct.push(child);
+            }
+        }
+        return { reactorGroups: groups, directChildren: direct };
+    }, [children]);
+    const highlightedReactorId = flowSelection?.kind === "reactor" ? flowSelection.reactorId : null;
+    return (_jsxs("div", { className: depth > 0 ? "pl-6" : "", children: [_jsxs("div", { ref: isSelected ? nodeRef : undefined, onClick: () => {
+                    dispatch({ type: "ui/event_selected", payload: { seq: event.seq } });
+                    if (event.correlationId) {
+                        dispatch({ type: "ui/flow_opened", payload: { correlationId: event.correlationId } });
+                    }
+                }, className: `group/tree w-full text-left px-2 py-1.5 rounded-md transition-all duration-150 cursor-pointer hover:bg-white/[0.03] ${isSelected ? "bg-indigo-500/15 ring-1 ring-indigo-500/25" : ""}`, children: [_jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [hasChildren ? (_jsx("button", { onClick: (e) => { e.stopPropagation(); setCollapsed((v) => !v); }, className: "text-[10px] text-muted-foreground hover:text-foreground shrink-0 w-3 text-center", children: collapsed ? _jsx(ChevronRight, { size: 10 }) : _jsx(ChevronDown, { size: 10 }) })) : (_jsx("span", { className: "w-3 shrink-0" })), _jsx("span", { className: "text-[10px] font-mono shrink-0", style: { color: eventTextColor(event.name) }, children: event.name }), collapsed && hasChildren && (_jsxs("span", { className: "text-[10px] text-muted-foreground shrink-0", children: ["(", children.length, ")"] })), _jsx("span", { className: "text-[10px] text-muted-foreground shrink-0", children: formatTs(event.ts) }), _jsx("button", { onClick: (e) => {
+                                    e.stopPropagation();
+                                    const json = buildTreeJson([event], childrenMap);
+                                    const text = JSON.stringify(json[0], null, 2);
+                                    copyToClipboard(text);
+                                    setCopied(true);
+                                    setTimeout(() => setCopied(false), 1500);
+                                }, className: "opacity-0 group-hover/tree:opacity-100 transition-all duration-150 ml-auto p-1 rounded-md hover:bg-white/[0.05] shrink-0 text-[10px] text-muted-foreground/50", title: "Copy subtree as JSON", children: copied ? _jsx(Check, { size: 12 }) : _jsx(Copy, { size: 12 }) }), onInvestigate && (_jsx("button", { onClick: (e) => { e.stopPropagation(); onInvestigate(event); }, className: "opacity-0 group-hover/tree:opacity-100 transition-all duration-150 p-1 rounded-md hover:bg-white/[0.05] shrink-0 text-muted-foreground/50", title: "Investigate", children: _jsx(Search, { size: 12 }) }))] }), _jsx("button", { onClick: (e) => { e.stopPropagation(); setPayloadOpen((v) => !v); }, className: "mt-0.5 ml-3 text-[10px] font-mono text-muted-foreground hover:text-foreground truncate text-left max-w-full block", title: "Click to expand payload", children: event.summary ?? compactPayload(event.payload) }), payloadOpen && (_jsx(CopyablePayload, { payload: event.payload, className: "mt-1 ml-3 max-h-48" }))] }), !collapsed && (_jsxs(_Fragment, { children: [directChildren.map((child) => (_jsx(TreeNode, { event: child, childrenMap: childrenMap, depth: depth + 1, onClickReactor: onClickReactor, onInvestigate: onInvestigate }, child.seq))), [...reactorGroups.entries()].map(([hid, group]) => (_jsx(ReactorNode, { reactorId: hid, parentEventId: event.id, children: group, childrenMap: childrenMap, depth: depth + 1, isHighlighted: hid === highlightedReactorId, onClickReactor: onClickReactor }, hid)))] }))] }));
+}
+// ---------------------------------------------------------------------------
+// matchesFlowSelection
+// ---------------------------------------------------------------------------
+function matchesFlowSelection(event, sel) {
+    if (!sel)
+        return true;
+    if (sel.kind === "event-type")
+        return event.name === sel.name;
+    return event.reactorId === sel.reactorId;
+}
+export function CausalTreePane({ onInvestigate } = {}) {
+    const causalTree = useSelector((s) => s.causalTree);
+    const selectedSeq = useSelector((s) => s.selectedSeq);
+    const flowSelection = useSelector((s) => s.flowSelection);
+    const flowCorrelationId = useSelector((s) => s.flowCorrelationId);
+    const scrubberStart = useSelector((s) => s.scrubberStart);
+    const scrubberEnd = useSelector((s) => s.scrubberEnd);
+    const dispatch = useDispatch();
+    const treeEvents = useMemo(() => {
+        const all = causalTree?.events ?? null;
+        if (all == null || (scrubberStart == null && scrubberEnd == null))
+            return all;
+        return all.filter((e) => inScrubberRange(e.seq, scrubberStart, scrubberEnd));
+    }, [causalTree?.events, scrubberStart, scrubberEnd]);
+    const treeLoading = selectedSeq != null && causalTree == null;
+    const onClickReactor = useCallback((reactorId, _parentEventId) => {
+        if (flowCorrelationId) {
+            dispatch({ type: "ui/flow_node_selected", payload: { kind: "reactor", reactorId } });
+        }
+        dispatch({ type: "ui/handler_selected", payload: { reactorId } });
+    }, [flowCorrelationId, dispatch]);
+    const { roots, childrenMap, totalCount, filteredCount } = useMemo(() => {
+        if (!treeEvents || treeEvents.length === 0)
+            return { roots: [], childrenMap: new Map(), totalCount: 0, filteredCount: 0 };
+        const total = treeEvents.length;
+        const events = (flowCorrelationId && flowSelection)
+            ? treeEvents.filter(e => matchesFlowSelection(e, flowSelection))
+            : treeEvents;
+        const idSet = new Set(events.map(e => e.id).filter(Boolean));
+        const cMap = new Map();
+        const rootList = [];
+        for (const evt of events) {
+            if (evt.parentId == null || !idSet.has(evt.parentId)) {
+                rootList.push(evt);
+            }
+            else {
+                const siblings = cMap.get(evt.parentId) ?? [];
+                siblings.push(evt);
+                cMap.set(evt.parentId, siblings);
+            }
+        }
+        rootList.sort((a, b) => a.seq - b.seq);
+        const filtered = rootList.length + [...cMap.values()].reduce((s, a) => s + a.length, 0);
+        return { roots: rootList, childrenMap: cMap, totalCount: total, filteredCount: filtered };
+    }, [treeEvents, flowCorrelationId, flowSelection]);
+    if (treeLoading) {
+        return (_jsxs("div", { className: "p-3 space-y-1.5 animate-pulse", children: [_jsx("div", { className: "h-3 w-32 bg-muted rounded mb-3" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-4 w-12 bg-muted rounded" }), _jsx("div", { className: "h-4 w-36 bg-muted rounded" }), _jsx("div", { className: "h-3 w-24 bg-muted rounded" })] }), _jsxs("div", { className: "pl-6 space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-4 w-14 bg-muted rounded" }), _jsx("div", { className: "h-4 w-44 bg-muted rounded" }), _jsx("div", { className: "h-3 w-24 bg-muted rounded" })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-4 w-10 bg-muted rounded" }), _jsx("div", { className: "h-4 w-32 bg-muted rounded" }), _jsx("div", { className: "h-3 w-24 bg-muted rounded" })] })] })] }));
+    }
+    if (!treeEvents) {
+        return (_jsx("div", { className: "flex items-center justify-center h-full text-xs text-muted-foreground/50 tracking-wide", children: "Select an event to view its causal tree" }));
+    }
+    if (roots.length === 0 && flowSelection) {
+        return (_jsxs("div", { className: "h-full overflow-y-auto p-3", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2 px-2.5 py-1.5 rounded-md bg-indigo-500/8 border border-indigo-500/15 text-xs text-indigo-400", children: [_jsx("span", { children: flowSelection.kind === "event-type"
+                                ? flowSelection.name
+                                : `outputs of ${flowSelection.reactorId}` }), _jsx("button", { onClick: () => dispatch({ type: "ui/flow_node_selected", payload: null }), className: "ml-auto hover:text-foreground", children: _jsx(X, { size: 12 }) })] }), _jsx("div", { className: "flex items-center justify-center h-32 text-sm text-muted-foreground", children: "No events match the current filter" })] }));
+    }
+    return (_jsxs("div", { className: "h-full overflow-y-auto p-3", children: [flowSelection && (_jsxs("div", { className: "flex items-center gap-2 mb-2 px-2.5 py-1.5 rounded-md bg-indigo-500/8 border border-indigo-500/15 text-xs text-indigo-400", children: [_jsx("span", { children: flowSelection.kind === "event-type"
+                            ? flowSelection.name
+                            : `outputs of ${flowSelection.reactorId}` }), _jsx("button", { onClick: () => dispatch({ type: "ui/flow_node_selected", payload: null }), className: "ml-auto hover:text-foreground", children: _jsx(X, { size: 12 }) })] })), _jsxs("h3", { className: "text-[10px] font-semibold text-muted-foreground/50 mb-2 uppercase tracking-widest", children: ["Causal Tree (", flowSelection ? `${filteredCount} of ${totalCount}` : totalCount, " events)"] }), roots.map(root => (_jsx(TreeNode, { event: root, childrenMap: childrenMap, depth: 0, onClickReactor: onClickReactor, onInvestigate: onInvestigate }, root.seq)))] }));
+}

package/dist/panes/CorrelationExplorerPane.d.ts

@@ -0,0 +1,2 @@
+export type CorrelationExplorerPaneProps = Record<string, never>;
+export declare function CorrelationExplorerPane(): import("react/jsx-runtime").JSX.Element;

package/dist/panes/CorrelationExplorerPane.js

@@ -0,0 +1,46 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useSelector, useDispatch } from "../machine";
+import { eventTextColor, eventBg } from "../theme";
+import { formatTs } from "../utils";
+function RelativeDuration({ firstTs, lastTs }) {
+    const first = new Date(firstTs).getTime();
+    const last = new Date(lastTs).getTime();
+    const diffMs = last - first;
+    if (diffMs < 1000)
+        return _jsxs("span", { children: [diffMs, "ms"] });
+    if (diffMs < 60_000)
+        return _jsxs("span", { children: [(diffMs / 1000).toFixed(1), "s"] });
+    if (diffMs < 3_600_000)
+        return _jsxs("span", { children: [(diffMs / 60_000).toFixed(1), "m"] });
+    return _jsxs("span", { children: [(diffMs / 3_600_000).toFixed(1), "h"] });
+}
+export function CorrelationExplorerPane() {
+    const correlations = useSelector((s) => s.correlations);
+    const loading = useSelector((s) => s.correlationsLoading);
+    const dispatch = useDispatch();
+    const [search, setSearch] = useState("");
+    const searchTimerRef = useRef(null);
+    // Request correlations on mount
+    useEffect(() => {
+        dispatch({ type: "ui/correlations_requested", payload: {} });
+    }, [dispatch]);
+    const handleSearchChange = useCallback((value) => {
+        setSearch(value);
+        if (searchTimerRef.current)
+            clearTimeout(searchTimerRef.current);
+        searchTimerRef.current = setTimeout(() => {
+            dispatch({ type: "ui/correlations_requested", payload: { search: value || undefined } });
+        }, 300);
+    }, [dispatch]);
+    const handleRowClick = useCallback((correlationId) => {
+        dispatch({ type: "ui/flow_opened", payload: { correlationId } });
+    }, [dispatch]);
+    const handleCopy = useCallback((text) => {
+        navigator.clipboard.writeText(text).catch(() => { });
+    }, []);
+    return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsx("div", { className: "px-3 py-2.5 border-b border-border", style: { background: "rgba(15, 15, 20, 0.6)", backdropFilter: "blur(8px)" }, children: _jsx("input", { type: "text", placeholder: "Search by correlation ID or event type...", value: search, onChange: (e) => handleSearchChange(e.target.value), className: "w-full px-3 py-1.5 text-xs bg-background/50 border border-border rounded-md text-foreground placeholder:text-muted-foreground/40 focus:outline-none focus:ring-1 focus:ring-indigo-500/40 focus:border-indigo-500/30 transition-all" }) }), _jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border text-[9px] font-semibold text-muted-foreground/40 uppercase tracking-widest", children: [_jsx("span", { className: "w-28 shrink-0", children: "Root Event" }), _jsx("span", { className: "w-24 shrink-0", children: "Correlation" }), _jsx("span", { className: "w-12 shrink-0 text-right", children: "Events" }), _jsx("span", { className: "w-20 shrink-0 text-right", children: "Duration" }), _jsx("span", { className: "flex-1", children: "Last Activity" })] }), loading && correlations.length === 0 ? (_jsx("div", { className: "animate-pulse p-3", children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-2 py-2.5", children: [_jsx("div", { className: "h-3 w-28 bg-white/[0.03] rounded" }), _jsx("div", { className: "h-3 w-24 bg-white/[0.03] rounded" }), _jsx("div", { className: "h-3 w-12 bg-white/[0.03] rounded" })] }, i))) })) : correlations.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32 text-xs text-muted-foreground/50 tracking-wide", children: "No correlations found" })) : (_jsx("div", { className: "flex-1 overflow-y-auto", children: correlations.map((corr) => (_jsxs("button", { onClick: () => handleRowClick(corr.correlationId), className: "group w-full text-left flex items-center gap-2 px-3 py-2.5 border-b border-border hover:bg-indigo-500/8 transition-all duration-150", children: [_jsx("span", { className: "text-[10px] font-mono shrink-0 w-28 truncate px-1.5 py-0.5 rounded", style: {
+                                color: eventTextColor(corr.rootEventType),
+                                background: eventBg(corr.rootEventType),
+                            }, title: corr.rootEventType, children: corr.rootEventType }), _jsx("span", { className: "text-[10px] font-mono text-purple-400/70 w-24 shrink-0 truncate cursor-pointer hover:text-purple-400 transition-colors", title: `Click to copy: ${corr.correlationId}`, onClick: (e) => { e.stopPropagation(); handleCopy(corr.correlationId); }, children: corr.correlationId.slice(0, 8) }), _jsx("span", { className: "text-[11px] font-mono text-foreground/70 w-12 shrink-0 text-right tabular-nums", children: corr.eventCount }), _jsx("span", { className: "text-[10px] text-muted-foreground/50 w-20 shrink-0 text-right font-mono tabular-nums", children: _jsx(RelativeDuration, { firstTs: corr.firstTs, lastTs: corr.lastTs }) }), _jsx("span", { className: "text-[10px] text-muted-foreground/40 flex-1 truncate tabular-nums", children: formatTs(corr.lastTs) }), corr.hasErrors && (_jsx("span", { className: "w-2 h-2 rounded-full bg-red-500/80 shrink-0", style: { boxShadow: "0 0 6px rgba(239, 68, 68, 0.3)" }, title: "This correlation has errors" }))] }, corr.correlationId))) }))] }));
+}

package/dist/panes/LogsPane.d.ts

@@ -0,0 +1,6 @@
+import type { LogsFilter } from "../types";
+export type LogsPaneProps = {
+    /** Optional callback when user wants to investigate logs. */
+    onInvestigate?: (filter: LogsFilter) => void;
+};
+export declare function LogsPane({ onInvestigate }?: LogsPaneProps): import("react/jsx-runtime").JSX.Element;

package/dist/panes/LogsPane.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { useSelector } from "../machine";
+import { LOG_LEVEL_COLORS } from "../theme";
+import { formatTs, inScrubberRange } from "../utils";
+import { Search, ChevronRight, ChevronDown } from "lucide-react";
+// ---------------------------------------------------------------------------
+// LogRow
+// ---------------------------------------------------------------------------
+function LogRow({ log, showReactor }) {
+    const [expanded, setExpanded] = useState(false);
+    const levelColor = LOG_LEVEL_COLORS[log.level] ?? "bg-zinc-600/20 text-zinc-400";
+    return (_jsxs("div", { className: "px-2 py-1.5 hover:bg-white/[0.02] rounded-md transition-colors duration-100", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("span", { className: `px-1.5 py-0.5 rounded text-[9px] font-semibold uppercase shrink-0 ${levelColor}`, children: log.level }), _jsx("span", { className: "text-[10px] text-muted-foreground/50 shrink-0 tabular-nums", children: formatTs(log.loggedAt) }), showReactor && (_jsx("span", { className: "text-[10px] font-mono text-muted-foreground/40 shrink-0", children: log.reactorId })), _jsx("span", { className: "text-[11px] text-foreground/80 truncate", children: log.message }), log.data != null && (_jsx("button", { onClick: () => setExpanded((v) => !v), className: "ml-auto text-[10px] p-1 rounded-md hover:bg-white/[0.05] shrink-0 text-muted-foreground/50 hover:text-foreground transition-colors", children: expanded ? _jsx(ChevronDown, { size: 10 }) : _jsx(ChevronRight, { size: 10 }) }))] }), expanded && log.data != null && (_jsx("pre", { className: "mt-1.5 ml-4 text-[10px] font-mono text-muted-foreground/70 bg-white/[0.02] rounded-md p-2.5 max-h-32 overflow-auto whitespace-pre-wrap border border-border", children: typeof log.data === "string" ? log.data : JSON.stringify(log.data, null, 2) }))] }));
+}
+export function LogsPane({ onInvestigate } = {}) {
+    const logs = useSelector((s) => s.logs);
+    const logsFilter = useSelector((s) => s.logsFilter);
+    const flowData = useSelector((s) => s.flowData);
+    const scrubberStart = useSelector((s) => s.scrubberStart);
+    const scrubberEnd = useSelector((s) => s.scrubberEnd);
+    const [levelFilter, setLevelFilter] = useState(new Set(["debug", "info", "warn"]));
+    const [searchText, setSearchText] = useState("");
+    const isCorrelationScope = logsFilter.scope === "correlation" && logsFilter.correlationId != null;
+    const hasFilter = logsFilter.reactorId != null || isCorrelationScope;
+    // Set of event IDs visible within scrubber range
+    const visibleEventIds = useMemo(() => {
+        if (scrubberStart == null && scrubberEnd == null)
+            return null;
+        return new Set(flowData.filter((e) => inScrubberRange(e.seq, scrubberStart, scrubberEnd)).map((e) => e.id).filter(Boolean));
+    }, [flowData, scrubberStart, scrubberEnd]);
+    // Client-side filtering
+    const filteredLogs = useMemo(() => {
+        let filtered = logs.filter((l) => levelFilter.has(l.level));
+        // Filter by reactor when handler is selected
+        if (logsFilter.scope === "reactor" && logsFilter.reactorId) {
+            filtered = filtered.filter((l) => l.reactorId === logsFilter.reactorId);
+        }
+        if (visibleEventIds != null) {
+            filtered = filtered.filter((l) => visibleEventIds.has(l.eventId));
+        }
+        if (searchText) {
+            const lower = searchText.toLowerCase();
+            filtered = filtered.filter((l) => l.message.toLowerCase().includes(lower) ||
+                l.reactorId.toLowerCase().includes(lower) ||
+                (l.data && String(l.data).toLowerCase().includes(lower)));
+        }
+        return filtered;
+    }, [logs, logsFilter, levelFilter, searchText, visibleEventIds]);
+    if (!hasFilter) {
+        return (_jsx("div", { className: "flex items-center justify-center h-full text-xs text-muted-foreground/50 tracking-wide", children: "Click a reactor node in the causal tree to view logs" }));
+    }
+    const toggleLevel = (level) => {
+        setLevelFilter((prev) => {
+            const next = new Set(prev);
+            if (next.has(level))
+                next.delete(level);
+            else
+                next.add(level);
+            return next;
+        });
+    };
+    return (_jsxs("div", { className: "h-full flex flex-col", children: [_jsxs("div", { className: "px-3 py-2 border-b border-border flex items-center gap-3 flex-wrap", style: { background: "rgba(15, 15, 20, 0.6)", backdropFilter: "blur(8px)" }, children: [_jsx("div", { className: "flex items-center gap-1 text-[10px]", children: ["debug", "info", "warn"].map((level) => (_jsx("button", { onClick: () => toggleLevel(level), className: `px-2 py-0.5 rounded-md uppercase font-semibold transition-all duration-150 ${levelFilter.has(level)
+                                ? LOG_LEVEL_COLORS[level]
+                                : "text-muted-foreground/30 line-through"}`, children: level }, level))) }), _jsxs("div", { className: "relative flex items-center ml-auto", children: [_jsx(Search, { size: 10, className: "absolute left-2.5 text-muted-foreground/40 pointer-events-none" }), _jsx("input", { type: "text", placeholder: "Search logs...", value: searchText, onChange: (e) => setSearchText(e.target.value), className: "pl-7 pr-2 text-[11px] bg-background/50 border border-border rounded-md py-1 w-44 focus:outline-none focus:ring-1 focus:ring-indigo-500/40 focus:border-indigo-500/30 text-foreground placeholder:text-muted-foreground/40 transition-all" })] }), onInvestigate && (_jsx("button", { onClick: () => onInvestigate(logsFilter), className: "flex items-center gap-1 px-2 py-1 rounded-md text-[11px] text-muted-foreground/50 hover:text-foreground hover:bg-white/[0.04] transition-all duration-150", title: "Investigate logs", children: _jsx(Search, { size: 12 }) }))] }), _jsxs("div", { className: "px-3 py-1.5 text-[10px] text-muted-foreground/50", children: [logsFilter.reactorId ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-foreground/60", children: logsFilter.reactorId }), isCorrelationScope && _jsx("span", { className: "ml-1", children: "(all reactors in correlation)" })] })) : (_jsx("span", { children: "All reactors in correlation" })), _jsxs("span", { className: "ml-2 tabular-nums", children: [filteredLogs.length, " logs"] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto px-1", children: [filteredLogs.length === 0 && (_jsx("div", { className: "p-3 text-[11px] text-muted-foreground/40", children: "No logs match filters" })), filteredLogs.map((log, i) => (_jsx(LogRow, { log: log, showReactor: isCorrelationScope }, i)))] })] }));
+}

package/dist/panes/TimelinePane.d.ts

@@ -0,0 +1,6 @@
+import type { InspectorEvent } from "../types";
+export type TimelinePaneProps = {
+    /** Optional callback when user wants to investigate an event. */
+    onInvestigate?: (event: InspectorEvent) => void;
+};
+export declare function TimelinePane({ onInvestigate }?: TimelinePaneProps): import("react/jsx-runtime").JSX.Element;

package/dist/panes/TimelinePane.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { useSelector, useDispatch } from "../machine";
+import { FilterBar } from "../components/FilterBar";
+import { CopyablePayload } from "../components/CopyablePayload";
+import { eventTextColor, eventBg } from "../theme";
+import { formatTs, compactPayload, aggregateKey, inScrubberRange } from "../utils";
+import { Search, ChevronRight, ChevronDown } from "lucide-react";
+function EventRow({ event, isSelected, onClick, onFilterCorrelation, onFilterStream, onInvestigate, indent, }) {
+    const [payloadOpen, setPayloadOpen] = useState(false);
+    return (_jsxs("div", { className: `group w-full text-left px-3 py-2 border-b border-border transition-all duration-150 ${isSelected
+            ? "bg-indigo-500/15"
+            : "hover:bg-white/[0.02]"}`, style: indent ? { paddingLeft: 28 } : undefined, children: [_jsx("div", { onClick: onClick, role: "button", tabIndex: 0, className: "w-full text-left cursor-pointer", children: _jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [_jsx("span", { className: "text-[10px] font-mono text-muted-foreground/60 w-10 shrink-0 text-right tabular-nums", children: event.seq }), _jsx("span", { className: "text-[10px] text-muted-foreground/70 shrink-0 w-32 tabular-nums", children: formatTs(event.ts) }), event.correlationId && (_jsx("button", { onClick: (e) => { e.stopPropagation(); onFilterCorrelation(event.correlationId); }, className: "px-1.5 py-0.5 rounded-full text-[9px] font-mono bg-purple-500/8 text-purple-400/80 hover:bg-purple-500/15 hover:text-purple-400 shrink-0 transition-all border border-purple-500/10", title: `Filter by correlation ${event.correlationId}`, children: event.correlationId.slice(0, 8) })), event.aggregateType && event.aggregateId && (_jsxs("button", { onClick: (e) => { e.stopPropagation(); onFilterStream(aggregateKey(event)); }, className: "opacity-0 group-hover:opacity-100 px-1.5 py-0.5 rounded-full text-[9px] font-mono bg-teal-500/8 text-teal-400/80 hover:bg-teal-500/15 hover:text-teal-400 shrink-0 transition-all border border-teal-500/10", title: `Filter by stream ${event.aggregateType}:${event.aggregateId}`, children: [event.aggregateType, ":", event.aggregateId.slice(0, 8)] })), _jsx("span", { className: "text-xs font-mono shrink-0 px-1.5 py-0.5 rounded", style: {
+                                color: eventTextColor(event.name),
+                                background: eventBg(event.name),
+                            }, children: event.name }), _jsxs("button", { onClick: (e) => { e.stopPropagation(); setPayloadOpen((v) => !v); }, className: "flex items-center gap-1 text-[10px] font-mono text-muted-foreground/60 hover:text-muted-foreground truncate text-left min-w-0 transition-colors", title: "Click to expand payload", children: [_jsx(ChevronRight, { size: 10, className: `shrink-0 transition-transform duration-150 ${payloadOpen ? "rotate-90" : ""}` }), _jsx("span", { className: "truncate", children: event.summary ?? compactPayload(event.payload) })] }), onInvestigate && (_jsx("button", { onClick: (e) => { e.stopPropagation(); onInvestigate(); }, className: "opacity-0 group-hover:opacity-100 transition-opacity duration-150 ml-auto p-1 rounded-md hover:bg-white/[0.05] shrink-0 text-muted-foreground", title: "Investigate", children: _jsx(Search, { size: 12 }) }))] }) }), payloadOpen && (_jsx(CopyablePayload, { payload: event.payload, className: "mt-2 ml-12 max-h-64" }))] }));
+}
+function groupEventsByCorrelation(events) {
+    const result = [];
+    let i = 0;
+    while (i < events.length) {
+        const event = events[i];
+        if (!event.correlationId) {
+            result.push(event);
+            i++;
+            continue;
+        }
+        // Collect consecutive events with the same correlationId
+        const cid = event.correlationId;
+        const groupEvents = [event];
+        let j = i + 1;
+        while (j < events.length && events[j].correlationId === cid) {
+            groupEvents.push(events[j]);
+            j++;
+        }
+        if (groupEvents.length === 1) {
+            // Single event — render flat
+            result.push(event);
+        }
+        else {
+            // Find the root event (no reactorId) or fall back to first
+            const rootIdx = groupEvents.findIndex((e) => !e.reactorId);
+            const root = rootIdx >= 0 ? groupEvents[rootIdx] : groupEvents[0];
+            const children = groupEvents.filter((e) => e !== root);
+            result.push({ correlationId: cid, root, children });
+        }
+        i = j;
+    }
+    return result;
+}
+function EventGroupRow({ group, selectedSeq, collapsed, onToggle, onSelect, onFilterCorrelation, onFilterStream, onInvestigate, }) {
+    return (_jsxs("div", { children: [_jsxs("div", { className: "relative", children: [_jsx("button", { onClick: onToggle, className: "absolute left-1 top-2.5 z-10 p-0.5 rounded hover:bg-white/[0.05] text-muted-foreground/60 hover:text-muted-foreground transition-colors", title: collapsed ? "Expand group" : "Collapse group", children: collapsed ? _jsx(ChevronRight, { size: 12 }) : _jsx(ChevronDown, { size: 12 }) }), _jsxs("div", { className: "relative", children: [_jsx(EventRow, { event: group.root, isSelected: group.root.seq === selectedSeq, onClick: () => onSelect(group.root), onFilterCorrelation: onFilterCorrelation, onFilterStream: onFilterStream, onInvestigate: onInvestigate ? () => onInvestigate(group.root) : undefined }), collapsed && (_jsxs("span", { className: "absolute right-3 top-2.5 text-[9px] font-mono px-1.5 py-0.5 rounded-full bg-white/[0.04] text-muted-foreground/60 border border-border", children: ["+", group.children.length] }))] })] }), !collapsed &&
+                group.children.map((child) => (_jsx(EventRow, { event: child, isSelected: child.seq === selectedSeq, onClick: () => onSelect(child), onFilterCorrelation: onFilterCorrelation, onFilterStream: onFilterStream, onInvestigate: onInvestigate ? () => onInvestigate(child) : undefined, indent: true }, child.seq)))] }));
+}
+function InfiniteScrollSentinel({ onVisible, loading }) {
+    const ref = useRef(null);
+    const onVisibleRef = useRef(onVisible);
+    onVisibleRef.current = onVisible;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting)
+            onVisibleRef.current(); }, { rootMargin: "200px" });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    return (_jsx("div", { ref: ref, className: "flex items-center justify-center py-4", children: loading && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-indigo-500/50 animate-pulse" }), _jsx("span", { className: "text-[10px] text-muted-foreground/60", children: "Loading" })] })) }));
+}
+export function TimelinePane({ onInvestigate } = {}) {
+    const events = useSelector((s) => s.events);
+    const loading = useSelector((s) => s.loading);
+    const hasMore = useSelector((s) => s.hasMore);
+    const selectedSeq = useSelector((s) => s.selectedSeq);
+    const scrubberStart = useSelector((s) => s.scrubberStart);
+    const scrubberEnd = useSelector((s) => s.scrubberEnd);
+    const dispatch = useDispatch();
+    // Default collapsed — this set tracks which groups are *expanded*
+    const [expandedGroups, setExpandedGroups] = useState(() => new Set());
+    const displayedEvents = useMemo(() => {
+        if (scrubberStart == null && scrubberEnd == null)
+            return events;
+        return events.filter(e => inScrubberRange(e.seq, scrubberStart, scrubberEnd));
+    }, [events, scrubberStart, scrubberEnd]);
+    const grouped = useMemo(() => groupEventsByCorrelation(displayedEvents), [displayedEvents]);
+    const toggleGroup = useCallback((correlationId) => {
+        setExpandedGroups((prev) => {
+            const next = new Set(prev);
+            if (next.has(correlationId))
+                next.delete(correlationId);
+            else
+                next.add(correlationId);
+            return next;
+        });
+    }, []);
+    const handleSelect = useCallback((event) => {
+        dispatch({ type: "ui/event_selected", payload: { seq: event.seq } });
+        if (event.correlationId) {
+            dispatch({ type: "ui/flow_opened", payload: { correlationId: event.correlationId } });
+        }
+    }, [dispatch]);
+    const handleFilterCorrelation = useCallback((correlationId) => {
+        dispatch({ type: "ui/filter_changed", payload: { correlationId } });
+    }, [dispatch]);
+    const handleFilterStream = useCallback((aggregateKey) => {
+        dispatch({ type: "ui/filter_changed", payload: { aggregateKey } });
+    }, [dispatch]);
+    const handleLoadMore = useCallback(() => {
+        dispatch({ type: "ui/load_more_requested" });
+    }, [dispatch]);
+    return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsx(FilterBar, {}), loading && events.length === 0 ? (_jsx("div", { className: "animate-pulse p-1", children: Array.from({ length: 12 }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5 border-b border-border", children: [_jsx("div", { className: "h-3 w-10 bg-white/[0.03] rounded shrink-0" }), _jsx("div", { className: "h-3 w-32 bg-white/[0.03] rounded shrink-0" }), _jsx("div", { className: "h-3 bg-white/[0.03] rounded flex-1", style: { maxWidth: `${150 + (i * 37) % 200}px` } })] }, i))) })) : events.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32 text-sm text-muted-foreground/60", children: "No events found" })) : (_jsxs("div", { className: "flex-1 overflow-y-auto", children: [grouped.map((item) => {
+                        if ("correlationId" in item && "root" in item) {
+                            // EventGroup
+                            const group = item;
+                            return (_jsx(EventGroupRow, { group: group, selectedSeq: selectedSeq, collapsed: !expandedGroups.has(group.correlationId), onToggle: () => toggleGroup(group.correlationId), onSelect: handleSelect, onFilterCorrelation: handleFilterCorrelation, onFilterStream: handleFilterStream, onInvestigate: onInvestigate }, `group-${group.correlationId}-${group.root.seq}`));
+                        }
+                        // Single event
+                        const event = item;
+                        return (_jsx(EventRow, { event: event, isSelected: event.seq === selectedSeq, onClick: () => handleSelect(event), onFilterCorrelation: handleFilterCorrelation, onFilterStream: handleFilterStream, onInvestigate: onInvestigate ? () => onInvestigate(event) : undefined }, event.seq));
+                    }), hasMore && (_jsx(InfiniteScrollSentinel, { onVisible: handleLoadMore, loading: loading }))] }))] }));
+}

package/dist/panes/WaterfallPane.d.ts

@@ -0,0 +1,2 @@
+export type WaterfallPaneProps = Record<string, never>;
+export declare function WaterfallPane(): import("react/jsx-runtime").JSX.Element;