causal-inspector 0.1.2 → 0.1.5

package/dist/engines/query.js

@@ -119,12 +119,24 @@ export const createQueryEngine = (transport) => {
                 console.error("[causal-inspector] fetch logs failed:", e);
             }
         };
-        const fetchCorrelations = async (search) => {
+        let correlationCursor = null;
+        const fetchCorrelations = async (opts) => {
+            const append = opts?.append ?? false;
+            const cursor = append ? correlationCursor : undefined;
             try {
-                const data = await transport.query(INSPECTOR_CORRELATIONS, { search: search || undefined, limit: 100 });
+                const data = await transport.query(INSPECTOR_CORRELATIONS, {
+                    search: opts?.search || undefined,
+                    limit: 50,
+                    cursor: cursor || undefined,
+                });
+                correlationCursor = data.inspectorCorrelations.nextCursor;
                 dispatch({
                     type: "events/correlations_loaded",
-                    payload: data.inspectorCorrelations,
+                    payload: {
+                        correlations: data.inspectorCorrelations.correlations,
+                        hasMore: data.inspectorCorrelations.nextCursor != null,
+                        append,
+                    },
                 });
             }
             catch (e) {
@@ -214,16 +226,16 @@ export const createQueryEngine = (transport) => {
                         fetchCausalTree(event.payload.seq);
                         break;
                     case "ui/filter_changed":
-                        dispatch({
-                            type: "events/page_loaded",
-                            payload: { events: [], hasMore: true },
-                        });
                         fetchEvents();
                         break;
+                    case "ui/load_more_correlations_requested":
+                        fetchCorrelations({ append: true });
+                        break;
                     case "ui/correlations_requested":
-                        fetchCorrelations(event.payload.search);
+                        correlationCursor = null;
+                        fetchCorrelations({ search: event.payload.search });
                         stopCorrelationPolling();
-                        correlationPollTimer = setInterval(() => fetchCorrelations(event.payload.search), 5000);
+                        correlationPollTimer = setInterval(() => fetchCorrelations({ search: event.payload.search }), 5000);
                         break;
                     case "ui/aggregate_lifecycle_requested":
                         fetchAggregateLifecycle(event.payload.aggregateKey);

package/dist/engines/url.js

@@ -18,7 +18,7 @@ function buildSearch(correlationId, handler) {
     else
         params.delete("handler");
     const search = params.toString();
-    return search ? `?${search}` : window.location.pathname;
+    return search ? `${window.location.pathname}?${search}` : window.location.pathname;
 }
 /**
  * URL engine — keeps the browser URL in sync with navigation state.
@@ -51,6 +51,13 @@ export const createUrlEngine = (dispatch, _getState) => {
                 case "ui/flow_closed":
                     window.history.pushState(null, "", buildSearch(null, null));
                     break;
+                case "ui/filter_changed": {
+                    const payload = event.payload;
+                    if (payload.correlationId !== undefined) {
+                        window.history.pushState(null, "", buildSearch(payload.correlationId, null));
+                    }
+                    break;
+                }
                 case "ui/handler_selected":
                     // Replace rather than push — handler changes within a flow are fine as one history entry
                     window.history.replaceState(null, "", buildSearch(new URLSearchParams(window.location.search).get("correlation"), event.payload.reactorId));

package/dist/events.d.ts

@@ -31,7 +31,11 @@ type OutcomesLoaded = BaseEvent<"events/outcomes_loaded", {
     correlationId: string;
     outcomes: ReactorOutcome[];
 }>;
-type CorrelationsLoaded = BaseEvent<"events/correlations_loaded", CorrelationSummary[]>;
+type CorrelationsLoaded = BaseEvent<"events/correlations_loaded", {
+    correlations: CorrelationSummary[];
+    hasMore: boolean;
+    append: boolean;
+}>;
 type ReactorDependenciesLoaded = BaseEvent<"events/reactor_dependencies_loaded", ReactorDependency[]>;
 type AggregateKeysLoaded = BaseEvent<"events/aggregate_keys_loaded", string[]>;
 type AggregateLifecycleLoaded = BaseEvent<"events/aggregate_lifecycle_loaded", {
@@ -69,9 +73,10 @@ type HandlerSelected = BaseEvent<"ui/handler_selected", {
 type AggregateLifecycleRequested = BaseEvent<"ui/aggregate_lifecycle_requested", {
     aggregateKey: string;
 }>;
+type LoadMoreCorrelationsRequested = BaseEvent<"ui/load_more_correlations_requested">;
 type LocationChanged = BaseEvent<"location/changed", {
     correlationId: string | null;
     handler: string | null;
 }>;
-export type InspectorMachineEvent = EventsReceived | SubscriptionConnected | SubscriptionError | PageLoaded | CausalTreeLoaded | FlowLoaded | LogsLoaded | DescriptionsLoaded | DescriptionSnapshotsLoaded | AggregateTimelineLoaded | OutcomesLoaded | CorrelationsLoaded | EventSelected | EventDeselected | FlowOpened | FlowClosed | FlowNodeSelected | FilterChanged | LoadMoreRequested | LayoutChanged | ScrubberStartChanged | ScrubberEndChanged | ScrubberPlayToggled | ScrubberSpeedChanged | CorrelationsRequested | ReactorDependenciesLoaded | AggregateKeysLoaded | HandlerSelected | LocationChanged | AggregateLifecycleLoaded | AggregateLifecycleRequested;
+export type InspectorMachineEvent = EventsReceived | SubscriptionConnected | SubscriptionError | PageLoaded | CausalTreeLoaded | FlowLoaded | LogsLoaded | DescriptionsLoaded | DescriptionSnapshotsLoaded | AggregateTimelineLoaded | OutcomesLoaded | CorrelationsLoaded | EventSelected | EventDeselected | FlowOpened | FlowClosed | FlowNodeSelected | FilterChanged | LoadMoreRequested | LayoutChanged | ScrubberStartChanged | ScrubberEndChanged | ScrubberPlayToggled | ScrubberSpeedChanged | CorrelationsRequested | ReactorDependenciesLoaded | AggregateKeysLoaded | HandlerSelected | LocationChanged | AggregateLifecycleLoaded | AggregateLifecycleRequested | LoadMoreCorrelationsRequested;
 export {};

package/dist/panes/CausalFlowPane.js

@@ -4,7 +4,7 @@ import { ReactFlow, Background, Controls, useReactFlow, Handle, MarkerType, Posi
 import dagre from "@dagrejs/dagre";
 import { useSelector, useDispatch } from "../machine";
 import { eventBg, eventBorder, eventTextColor } from "../theme";
-import { Filter } from "lucide-react";
+import { Filter, ArrowRight, ArrowDown } from "lucide-react";
 import { inScrubberRange } from "../utils";
 /* eslint-disable-next-line @typescript-eslint/no-redeclare -- shadowing the tree-pane ReactorNode on purpose */
 const NODE_WIDTH = 180;
@@ -60,6 +60,7 @@ const ReactorNode = memo(({ data }) => {
     const d = data;
     const blocks = d.blocks;
     const outcome = d.outcome;
+    const dir = d.direction ?? "LR";
     const hasBlocks = blocks && blocks.length > 0;
     const borderColor = STATUS_BORDER[outcome?.status ?? "pending"] ?? "#2a2a35";
     const isRunning = outcome?.status === "running";
@@ -79,10 +80,11 @@ const ReactorNode = memo(({ data }) => {
             boxShadow: isRunning
                 ? `0 0 12px ${borderColor}40`
                 : "0 2px 8px rgba(0, 0, 0, 0.3)",
-        }, children: [_jsx(Handle, { type: "target", position: Position.Left, style: { visibility: "hidden" } }), _jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }, children: [_jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", direction: "rtl", textAlign: "left" }, children: d.label }), duration && _jsx("span", { style: { fontSize: 9, color: "#60608a", fontStyle: "normal", whiteSpace: "nowrap", flexShrink: 0 }, children: duration })] }), hasBlocks && blocks.map((block, i) => _jsx(BlockRenderer, { block: block }, i)), outcome?.status === "error" && outcome.error && (_jsx("div", { style: { fontSize: 9, color: "#ef4444", marginTop: 4 }, children: outcome.error })), _jsx(Handle, { type: "source", position: Position.Right, style: { visibility: "hidden" } })] }));
+        }, children: [_jsx(Handle, { type: "target", position: dir === "LR" ? Position.Left : Position.Top, style: { visibility: "hidden" } }), _jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }, children: [_jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", direction: "rtl", textAlign: "left" }, children: d.label }), duration && _jsx("span", { style: { fontSize: 9, color: "#60608a", fontStyle: "normal", whiteSpace: "nowrap", flexShrink: 0 }, children: duration })] }), hasBlocks && blocks.map((block, i) => _jsx(BlockRenderer, { block: block }, i)), outcome?.status === "error" && outcome.error && (_jsx("div", { style: { fontSize: 9, color: "#ef4444", marginTop: 4 }, children: outcome.error })), _jsx(Handle, { type: "source", position: dir === "LR" ? Position.Right : Position.Bottom, style: { visibility: "hidden" } })] }));
 });
 const EventNode = memo(({ data }) => {
     const d = data;
+    const dir = d.direction ?? "LR";
     return (_jsxs("div", { style: {
             background: eventBg(d.eventName),
             border: `1px solid ${eventBorder(d.eventName)}`,
@@ -99,10 +101,10 @@ const EventNode = memo(({ data }) => {
             boxShadow: `0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04)`,
             fontWeight: 500,
             letterSpacing: "0.01em",
-        }, children: [_jsx(Handle, { type: "target", position: Position.Left, style: { visibility: "hidden" } }), d.label, _jsx(Handle, { type: "source", position: Position.Right, style: { visibility: "hidden" } })] }));
+        }, children: [_jsx(Handle, { type: "target", position: dir === "LR" ? Position.Left : Position.Top, style: { visibility: "hidden" } }), d.label, _jsx(Handle, { type: "source", position: dir === "LR" ? Position.Right : Position.Bottom, style: { visibility: "hidden" } })] }));
 });
 const nodeTypes = { reactor: ReactorNode, event: EventNode };
-function buildFlowGraph(events, descriptions, outcomes, hiddenReactors) {
+function buildFlowGraph(events, descriptions, outcomes, hiddenReactors, direction = "LR") {
     // Group events by type name only (merge across reactors)
     const eventGroups = new Map();
     const reactorIds = new Set();
@@ -154,9 +156,10 @@ function buildFlowGraph(events, descriptions, outcomes, hiddenReactors) {
                 label: group.count > 1 ? `${group.name} (${group.count})` : group.name,
                 nodeKind: "event-type",
                 eventName: group.name,
+                direction,
             },
-            sourcePosition: Position.Right,
-            targetPosition: Position.Left,
+            sourcePosition: direction === "LR" ? Position.Right : Position.Bottom,
+            targetPosition: direction === "LR" ? Position.Left : Position.Top,
         });
     }
     // Reactor nodes
@@ -169,9 +172,9 @@ function buildFlowGraph(events, descriptions, outcomes, hiddenReactors) {
             id: `hdl:${reactorId}`,
             type: "reactor",
             position: { x: 0, y: 0 },
-            data: { label: reactorId, nodeKind: "reactor", reactorId, blocks, outcome },
-            sourcePosition: Position.Right,
-            targetPosition: Position.Left,
+            data: { label: reactorId, nodeKind: "reactor", reactorId, blocks, outcome, direction },
+            sourcePosition: direction === "LR" ? Position.Right : Position.Bottom,
+            targetPosition: direction === "LR" ? Position.Left : Position.Top,
         });
     }
     const arrowMarker = { type: MarkerType.ArrowClosed, color: "#3a3a4a", width: 14, height: 14 };
@@ -226,9 +229,9 @@ function buildFlowGraph(events, descriptions, outcomes, hiddenReactors) {
                 id: `hdl:${reactorId}`,
                 type: "reactor",
                 position: { x: 0, y: 0 },
-                data: { label: reactorId, nodeKind: "reactor", reactorId, blocks, outcome },
-                sourcePosition: Position.Bottom,
-                targetPosition: Position.Top,
+                data: { label: reactorId, nodeKind: "reactor", reactorId, blocks, outcome, direction },
+                sourcePosition: direction === "LR" ? Position.Right : Position.Bottom,
+                targetPosition: direction === "LR" ? Position.Left : Position.Top,
             });
             const isPending = outcome.status === "pending" || outcome.status === "running";
             for (const eventId of outcome.triggeringEventIds ?? []) {
@@ -250,7 +253,7 @@ function buildFlowGraph(events, descriptions, outcomes, hiddenReactors) {
             }
         }
     }
-    return layoutGraph(nodes, edges);
+    return layoutGraph(nodes, edges, direction);
 }
 function estimateReactorHeight(data) {
     if (data.nodeKind !== "reactor")
@@ -274,10 +277,10 @@ function estimateReactorHeight(data) {
         h += 14;
     return h;
 }
-function layoutGraph(nodes, edges) {
+function layoutGraph(nodes, edges, direction = "LR") {
     const g = new dagre.graphlib.Graph();
     g.setDefaultEdgeLabel(() => ({}));
-    g.setGraph({ rankdir: "LR", nodesep: 40, ranksep: 80 });
+    g.setGraph({ rankdir: direction, nodesep: 40, ranksep: 80 });
     const heights = new Map();
     for (const node of nodes) {
         const isReactor = node.id.startsWith("hdl:");
@@ -460,6 +463,7 @@ export function CausalFlowPane({ defaultHiddenReactors, headerExtra } = {}) {
         return map;
     }, [outcomesMap, flowCorrelationId]);
     const [hiddenReactors, setHiddenReactors] = useState(() => defaultHiddenReactors ?? new Set());
+    const [direction, setDirection] = useState("LR");
     const allReactorIds = useMemo(() => {
         const ids = new Set();
         for (const evt of flowData) {
@@ -475,8 +479,8 @@ export function CausalFlowPane({ defaultHiddenReactors, headerExtra } = {}) {
     const { nodes: fullNodes, edges: fullEdges } = useMemo(() => {
         if (!flowData || flowData.length === 0)
             return { nodes: [], edges: [] };
-        return buildFlowGraph(flowData, descriptions, outcomes, hiddenReactors);
-    }, [flowData, descriptions, outcomes, hiddenReactors]);
+        return buildFlowGraph(flowData, descriptions, outcomes, hiddenReactors, direction);
+    }, [flowData, descriptions, outcomes, hiddenReactors, direction]);
     // Compute visible IDs when scrubber range is active
     const visibleIds = useMemo(() => {
         if (scrubberStart == null && scrubberEnd == null)
@@ -592,5 +596,5 @@ export function CausalFlowPane({ defaultHiddenReactors, headerExtra } = {}) {
     if (flowLoading) {
         return (_jsxs("div", { className: "h-full flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border shrink-0", children: [_jsx("div", { className: "h-3 w-10 bg-muted rounded animate-pulse" }), _jsx("div", { className: "h-3 w-48 bg-muted rounded animate-pulse" })] }), _jsx("div", { className: "flex-1 flex items-center justify-center", children: _jsxs("div", { className: "animate-pulse flex flex-col items-center gap-3", children: [_jsx("div", { className: "h-8 w-40 bg-muted rounded-md" }), _jsx("div", { className: "h-6 w-px bg-muted" }), _jsx("div", { className: "h-6 w-28 bg-muted rounded-full" }), _jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsx("div", { className: "h-6 w-px bg-muted" }), _jsx("div", { className: "h-8 w-36 bg-muted rounded-md" })] }), _jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsx("div", { className: "h-6 w-px bg-muted" }), _jsx("div", { className: "h-8 w-36 bg-muted rounded-md" })] })] })] }) })] }));
     }
-    return (_jsxs("div", { className: "h-full flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2.5 px-3 py-2 border-b border-border shrink-0", style: { background: "rgba(15, 15, 20, 0.6)", backdropFilter: "blur(8px)" }, children: [_jsx("h3", { className: "text-[10px] font-semibold text-muted-foreground/60 uppercase tracking-widest", children: "Flow" }), _jsx("span", { className: "text-[10px] font-mono text-foreground/80 truncate px-1.5 py-0.5 rounded bg-white/[0.03] border border-border", children: flowCorrelationId }), _jsxs("span", { className: "text-[10px] text-muted-foreground/50 tabular-nums", children: [flowData.length, " events \u00B7 ", nodes.length, " nodes"] }), headerExtra, _jsx("div", { className: "ml-auto", children: _jsx(ReactorFilter, { allReactorIds: allReactorIds, hiddenReactors: hiddenReactors, setHiddenReactors: setHiddenReactors }) })] }), _jsx("div", { className: "flex-1 relative", children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, defaultEdgeOptions: { type: "smoothstep" }, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, minZoom: 0.25, proOptions: { hideAttribution: true }, nodesDraggable: false, nodesConnectable: false, elevateNodesOnSelect: false, colorMode: "dark", children: [_jsx(FitOnLoad, {}), _jsx(FocusOnSelection, { nodes: nodes, flowData: flowData }), _jsx(Background, { color: "rgba(255,255,255,0.03)", gap: 24, size: 1 }), _jsx(Controls, { showInteractive: false })] }) })] }));
+    return (_jsxs("div", { className: "h-full flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2.5 px-3 py-2 border-b border-border shrink-0", style: { background: "rgba(15, 15, 20, 0.6)", backdropFilter: "blur(8px)" }, children: [_jsx("h3", { className: "text-[10px] font-semibold text-muted-foreground/60 uppercase tracking-widest", children: "Flow" }), _jsx("span", { className: "text-[10px] font-mono text-foreground/80 truncate px-1.5 py-0.5 rounded bg-white/[0.03] border border-border", children: flowCorrelationId }), _jsxs("span", { className: "text-[10px] text-muted-foreground/50 tabular-nums", children: [flowData.length, " events \u00B7 ", nodes.length, " nodes"] }), headerExtra, _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [_jsx("button", { onClick: () => setDirection(d => d === "LR" ? "TB" : "LR"), className: "text-[10px] text-muted-foreground/60 hover:text-foreground px-2 py-1 rounded-md border border-border hover:border-indigo-500/30 transition-all duration-150", title: direction === "LR" ? "Switch to vertical layout" : "Switch to horizontal layout", children: direction === "LR" ? _jsx(ArrowDown, { size: 11, className: "inline" }) : _jsx(ArrowRight, { size: 11, className: "inline" }) }), _jsx(ReactorFilter, { allReactorIds: allReactorIds, hiddenReactors: hiddenReactors, setHiddenReactors: setHiddenReactors })] })] }), _jsx("div", { className: "flex-1 relative", children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, defaultEdgeOptions: { type: "smoothstep" }, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, minZoom: 0.25, proOptions: { hideAttribution: true }, nodesDraggable: false, nodesConnectable: false, elevateNodesOnSelect: false, colorMode: "dark", children: [_jsx(FitOnLoad, {}), _jsx(FocusOnSelection, { nodes: nodes, flowData: flowData }), _jsx(Background, { color: "rgba(255,255,255,0.03)", gap: 24, size: 1 }), _jsx(Controls, { showInteractive: false })] }) })] }));
 }

package/dist/panes/LogsPane.js

@@ -61,5 +61,5 @@ export function LogsPane({ onInvestigate } = {}) {
     };
     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)))] })] }));
+                                : "text-muted-foreground/30 line-through"}`, children: level }, level))) }), _jsxs("div", { className: "relative flex items-center", 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.js

@@ -4,62 +4,21 @@ 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, }) {
+import { formatTs, compactPayload, inScrubberRange } from "../utils";
+import { Search, ChevronRight } from "lucide-react";
+function EventRow({ event, isSelected, onClick, onFilterCorrelation, onInvestigate, }) {
     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: {
+            : "hover:bg-white/[0.02]"}`, 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) })), _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;
-    // Re-create observer when loading finishes so it re-checks visibility.
-    // Without this, if loaded events collapse into one group row the sentinel
-    // stays visible but the observer never fires again (it only fires on
-    // enter/leave transitions).
     useEffect(() => {
         if (loading)
             return;
@@ -74,31 +33,30 @@ function InfiniteScrollSentinel({ onVisible, loading }) {
     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 events = useSelector((s) => {
+        let result = s.events;
+        const cid = s.filters.correlationId;
+        if (cid)
+            result = result.filter((e) => e.correlationId === cid);
+        const search = s.filters.search?.toLowerCase();
+        if (search) {
+            result = result.filter((e) => e.name.toLowerCase().includes(search) ||
+                e.payload.toLowerCase().includes(search) ||
+                (e.correlationId ?? "").toLowerCase().includes(search));
+        }
+        return result;
+    });
     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) {
@@ -108,20 +66,8 @@ export function TimelinePane({ onInvestigate } = {}) {
     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 }))] }))] }));
+    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: [displayedEvents.map((event) => (_jsx(EventRow, { event: event, isSelected: event.seq === selectedSeq, onClick: () => handleSelect(event), onFilterCorrelation: handleFilterCorrelation, onInvestigate: onInvestigate ? () => onInvestigate(event) : undefined }, event.seq))), hasMore && (_jsx(InfiniteScrollSentinel, { onVisible: handleLoadMore, loading: loading }))] }))] }));
 }

package/dist/queries.d.ts

@@ -11,5 +11,5 @@ export declare const INSPECTOR_AGGREGATE_TIMELINE = "\n  query InspectorAggregat
 export declare const INSPECTOR_REACTOR_DEPENDENCIES = "\n  query InspectorReactorDependencies {\n    inspectorReactorDependencies {\n      reactorId\n      inputEventTypes\n      outputEventTypes\n    }\n  }\n";
 export declare const INSPECTOR_AGGREGATE_KEYS = "\n  query InspectorAggregateKeys {\n    inspectorAggregateKeys\n  }\n";
 export declare const INSPECTOR_AGGREGATE_LIFECYCLE = "\n  query InspectorAggregateLifecycle($aggregateKey: String!, $limit: Int) {\n    inspectorAggregateLifecycle(aggregateKey: $aggregateKey, limit: $limit) {\n      seq\n      eventId\n      eventType\n      ts\n      correlationId\n      aggregateKey\n      state\n    }\n  }\n";
-export declare const INSPECTOR_CORRELATIONS = "\n  query InspectorCorrelations($search: String, $limit: Int) {\n    inspectorCorrelations(search: $search, limit: $limit) {\n      correlationId\n      eventCount\n      firstTs\n      lastTs\n      rootEventType\n      hasErrors\n    }\n  }\n";
+export declare const INSPECTOR_CORRELATIONS = "\n  query InspectorCorrelations($search: String, $limit: Int, $cursor: String) {\n    inspectorCorrelations(search: $search, limit: $limit, cursor: $cursor) {\n      correlations {\n        correlationId\n        eventCount\n        firstTs\n        lastTs\n        rootEventType\n        hasErrors\n      }\n      nextCursor\n    }\n  }\n";
 export declare const INSPECTOR_REACTOR_OUTCOMES = "\n  query InspectorReactorOutcomes($correlationId: String!) {\n    inspectorReactorOutcomes(correlationId: $correlationId) {\n      reactorId\n      status\n      error\n      attempts\n      startedAt\n      completedAt\n      triggeringEventIds\n    }\n  }\n";

package/dist/queries.js

@@ -145,14 +145,17 @@ export const INSPECTOR_AGGREGATE_LIFECYCLE = `
   }
 `;
 export const INSPECTOR_CORRELATIONS = `
-  query InspectorCorrelations($search: String, $limit: Int) {
-    inspectorCorrelations(search: $search, limit: $limit) {
-      correlationId
-      eventCount
-      firstTs
-      lastTs
-      rootEventType
-      hasErrors
+  query InspectorCorrelations($search: String, $limit: Int, $cursor: String) {
+    inspectorCorrelations(search: $search, limit: $limit, cursor: $cursor) {
+      correlations {
+        correlationId
+        eventCount
+        firstTs
+        lastTs
+        rootEventType
+        hasErrors
+      }
+      nextCursor
     }
   }
 `;

package/dist/reducer.js

@@ -47,8 +47,6 @@ export const reducer = (draft, event) => {
         // ── Subscription ──
         case "events/received": {
             const newEvents = event.payload;
-            // Filter subscription events against active filters so they don't
-            // pollute the view when the user has a search or correlation filter.
             const filtered = newEvents.filter((e) => {
                 if (draft.filters.correlationId && e.correlationId !== draft.filters.correlationId) {
                     return false;
@@ -111,10 +109,18 @@ export const reducer = (draft, event) => {
             draft.outcomes[correlationId] = outcomes;
             break;
         }
-        case "events/correlations_loaded":
-            draft.correlations = event.payload;
+        case "events/correlations_loaded": {
+            const { correlations, hasMore, append } = event.payload;
+            if (append) {
+                draft.correlations.push(...correlations);
+            }
+            else {
+                draft.correlations = correlations;
+            }
+            draft.correlationsHasMore = hasMore;
             draft.correlationsLoading = false;
             break;
+        }
         case "events/reactor_dependencies_loaded":
             draft.reactorDependencies = event.payload;
             break;
@@ -137,6 +143,7 @@ export const reducer = (draft, event) => {
             break;
         case "location/changed":
             applyNavigation(draft, event.payload.correlationId, event.payload.handler);
+            draft.filters.correlationId = event.payload.correlationId;
             break;
         // ── UI ──
         case "ui/event_selected":
@@ -181,5 +188,8 @@ export const reducer = (draft, event) => {
         case "ui/correlations_requested":
             draft.correlationsLoading = true;
             break;
+        case "ui/load_more_correlations_requested":
+            draft.correlationsLoading = true;
+            break;
     }
 };

package/dist/state.d.ts

@@ -24,6 +24,7 @@ export type InspectorState = {
     outcomes: Record<string, ReactorOutcome[]>;
     correlations: CorrelationSummary[];
     correlationsLoading: boolean;
+    correlationsHasMore: boolean;
     reactorDependencies: ReactorDependency[];
     aggregateKeys: string[];
     aggregateLifecycle: AggregateLifecycleEntry[];

package/dist/state.js

@@ -28,6 +28,7 @@ export const initialState = {
     outcomes: {},
     correlations: [],
     correlationsLoading: false,
+    correlationsHasMore: true,
     reactorDependencies: [],
     aggregateKeys: [],
     aggregateLifecycle: [],

package/dist/types.d.ts

@@ -113,6 +113,10 @@ export type CorrelationSummary = {
     rootEventType: string;
     hasErrors: boolean;
 };
+export type CorrelationSummaryPage = {
+    correlations: CorrelationSummary[];
+    nextCursor: string | null;
+};
 export type FilterState = {
     search: string;
     correlationId: string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "causal-inspector",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",