causal-inspector 0.1.0

package/dist/panes/WaterfallPane.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback } from "react";
+import { useSelector, useDispatch } from "../machine";
+import { inScrubberRange } from "../utils";
+// ---------------------------------------------------------------------------
+// Timing helpers
+// ---------------------------------------------------------------------------
+function parseTime(ts) {
+    if (!ts)
+        return null;
+    return new Date(ts).getTime();
+}
+function formatDuration(ms) {
+    if (ms < 1)
+        return "<1ms";
+    if (ms < 1000)
+        return `${Math.round(ms)}ms`;
+    if (ms < 60_000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    return `${(ms / 60_000).toFixed(1)}m`;
+}
+// ---------------------------------------------------------------------------
+// Colors
+// ---------------------------------------------------------------------------
+const STATUS_COLORS = {
+    completed: { bar: "#22c55e", barEnd: "#16a34a", text: "#bbf7d0" },
+    running: { bar: "#eab308", barEnd: "#ca8a04", text: "#fef08a" },
+    error: { bar: "#ef4444", barEnd: "#dc2626", text: "#fecaca" },
+};
+function statusColor(status) {
+    return STATUS_COLORS[status] ?? STATUS_COLORS.running;
+}
+function buildBars(outcomes) {
+    const bars = [];
+    let minMs = Infinity;
+    let maxMs = -Infinity;
+    for (const o of outcomes) {
+        const start = parseTime(o.startedAt);
+        if (start == null)
+            continue; // can't render without start
+        const end = parseTime(o.completedAt) ?? Date.now();
+        minMs = Math.min(minMs, start);
+        maxMs = Math.max(maxMs, end);
+        bars.push({
+            reactorId: o.reactorId,
+            status: o.status,
+            error: o.error,
+            attempts: o.attempts,
+            startMs: start,
+            endMs: end,
+            triggeringEventIds: o.triggeringEventIds,
+        });
+    }
+    // Sort by start time
+    bars.sort((a, b) => a.startMs - b.startMs);
+    return { bars, minMs, maxMs };
+}
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const ROW_HEIGHT = 36;
+const LABEL_WIDTH = 160;
+const BAR_MIN_WIDTH = 4;
+const PADDING_X = 12;
+export function WaterfallPane() {
+    const correlationId = useSelector((s) => s.flowCorrelationId);
+    const outcomes = useSelector((s) => correlationId ? s.outcomes[correlationId] ?? [] : []);
+    const flowData = useSelector((s) => s.flowData);
+    const scrubberStart = useSelector((s) => s.scrubberStart);
+    const scrubberEnd = useSelector((s) => s.scrubberEnd);
+    const logsFilter = useSelector((s) => s.logsFilter);
+    const dispatch = useDispatch();
+    const handleBarClick = useCallback((bar) => {
+        dispatch({ type: "ui/handler_selected", payload: { reactorId: bar.reactorId } });
+    }, [dispatch]);
+    const { bars, minMs, maxMs } = useMemo(() => buildBars(outcomes), [outcomes]);
+    const rangeMs = maxMs - minMs || 1;
+    // Map event id → seq for scrubber sync
+    const eventIdToSeq = useMemo(() => {
+        const map = new Map();
+        for (const e of flowData) {
+            if (e.id)
+                map.set(e.id, e.seq);
+        }
+        return map;
+    }, [flowData]);
+    // Map scrubber end seq → timestamp for cursor line
+    const scrubberMs = useMemo(() => {
+        if (scrubberEnd == null)
+            return null;
+        const event = flowData.find((e) => e.seq === scrubberEnd);
+        if (!event)
+            return null;
+        return new Date(event.ts).getTime();
+    }, [scrubberEnd, flowData]);
+    if (!correlationId) {
+        return (_jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#50506a", fontSize: 12, letterSpacing: "0.03em" }, children: "Open a flow to see the reactor waterfall" }));
+    }
+    if (bars.length === 0) {
+        return (_jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#50506a", fontSize: 12, letterSpacing: "0.03em" }, children: "No reactor execution data for this correlation" }));
+    }
+    return (_jsxs("div", { style: { height: "100%", overflow: "auto", padding: `10px ${PADDING_X}px` }, children: [_jsxs("div", { style: { display: "flex", marginBottom: 6, marginLeft: LABEL_WIDTH, position: "relative", height: 16 }, children: [_jsx("span", { style: { fontSize: 9, color: "#40405a", letterSpacing: "0.04em" }, children: "0ms" }), _jsx("span", { style: { fontSize: 9, color: "#40405a", position: "absolute", right: 0, letterSpacing: "0.04em" }, children: formatDuration(rangeMs) }), scrubberMs != null && scrubberMs >= minMs && scrubberMs <= maxMs && (_jsx("div", { style: {
+                            position: "absolute",
+                            left: `${((scrubberMs - minMs) / rangeMs) * 100}%`,
+                            top: 0,
+                            bottom: -4,
+                            width: 1,
+                            background: "#6366f1",
+                            pointerEvents: "none",
+                            boxShadow: "0 0 4px rgba(99, 102, 241, 0.4)",
+                        } }))] }), bars.map((bar) => {
+                const offsetPct = ((bar.startMs - minMs) / rangeMs) * 100;
+                const widthPct = Math.max(((bar.endMs - bar.startMs) / rangeMs) * 100, 0.5);
+                const colors = statusColor(bar.status);
+                const duration = bar.endMs - bar.startMs;
+                // Scrubber sync: dim bars whose triggering events are all outside range
+                const isFuture = (scrubberStart != null || scrubberEnd != null) &&
+                    bar.triggeringEventIds.length > 0 &&
+                    bar.triggeringEventIds.every((eid) => {
+                        const seq = eventIdToSeq.get(eid);
+                        return seq != null && !inScrubberRange(seq, scrubberStart, scrubberEnd);
+                    });
+                // Scrubber cursor position within this bar's track
+                const cursorPct = scrubberMs != null && scrubberMs >= minMs && scrubberMs <= maxMs
+                    ? ((scrubberMs - minMs) / rangeMs) * 100
+                    : null;
+                const isSelected = logsFilter.reactorId === bar.reactorId;
+                return (_jsxs("div", { onClick: () => handleBarClick(bar), style: {
+                        display: "flex",
+                        alignItems: "center",
+                        height: ROW_HEIGHT,
+                        gap: 0,
+                        opacity: isFuture ? 0.25 : 1,
+                        transition: "opacity 200ms, background 150ms",
+                        cursor: "pointer",
+                        borderRadius: 6,
+                        background: isSelected ? "rgba(99, 102, 241, 0.15)" : "transparent",
+                        paddingLeft: 4,
+                        paddingRight: 4,
+                    }, children: [_jsx("div", { style: {
+                                width: LABEL_WIDTH,
+                                flexShrink: 0,
+                                fontSize: 11,
+                                color: "#c0c0d0",
+                                fontWeight: 500,
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                                paddingRight: 10,
+                                letterSpacing: "0.01em",
+                            }, title: bar.reactorId, children: bar.reactorId }), _jsxs("div", { style: {
+                                flex: 1,
+                                position: "relative",
+                                height: 22,
+                                background: "rgba(255, 255, 255, 0.02)",
+                                borderRadius: 5,
+                                overflow: "hidden",
+                            }, children: [_jsx("div", { style: {
+                                        position: "absolute",
+                                        left: `${offsetPct}%`,
+                                        width: `${widthPct}%`,
+                                        minWidth: BAR_MIN_WIDTH,
+                                        height: "100%",
+                                        background: `linear-gradient(90deg, ${colors.bar}, ${colors.barEnd})`,
+                                        borderRadius: 4,
+                                        opacity: 0.8,
+                                        display: "flex",
+                                        alignItems: "center",
+                                        paddingLeft: 5,
+                                        paddingRight: 5,
+                                        boxShadow: `0 1px 4px ${colors.bar}30`,
+                                    }, title: `${bar.reactorId}: ${bar.status} (${formatDuration(duration)})${bar.attempts > 1 ? ` — ${bar.attempts} attempts` : ""}${bar.error ? `\nError: ${bar.error}` : ""}`, children: _jsx("span", { style: {
+                                            fontSize: 9,
+                                            fontWeight: 600,
+                                            color: "#0a0a0f",
+                                            whiteSpace: "nowrap",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                        }, children: formatDuration(duration) }) }), cursorPct != null && (_jsx("div", { style: {
+                                        position: "absolute",
+                                        left: `${cursorPct}%`,
+                                        top: 0,
+                                        bottom: 0,
+                                        width: 1,
+                                        background: "#6366f1",
+                                        pointerEvents: "none",
+                                        boxShadow: "0 0 4px rgba(99, 102, 241, 0.3)",
+                                    } }))] }), _jsxs("div", { style: {
+                                width: 80,
+                                flexShrink: 0,
+                                display: "flex",
+                                alignItems: "center",
+                                gap: 4,
+                                paddingLeft: 10,
+                            }, children: [_jsx("span", { style: {
+                                        fontSize: 10,
+                                        fontWeight: 500,
+                                        color: colors.text,
+                                        opacity: 0.8,
+                                    }, children: bar.status }), bar.attempts > 1 && (_jsxs("span", { style: { fontSize: 9, color: "#50506a" }, children: ["x", bar.attempts] }))] })] }, bar.reactorId));
+            }), _jsxs("div", { style: { marginTop: 10, fontSize: 10, color: "#40405a", marginLeft: LABEL_WIDTH, letterSpacing: "0.03em" }, children: ["Total wall time: ", formatDuration(rangeMs)] })] }));
+}

package/dist/queries.d.ts

@@ -0,0 +1,15 @@
+/** GraphQL query and subscription documents for the causal inspector API. */
+export declare const EVENTS_SUBSCRIPTION = "\n  subscription Events($lastSeq: Int) {\n    inspectorEventAdded(lastSeq: $lastSeq) {\n      \n  seq\n  ts\n  type\n  name\n  id\n  parentId\n  correlationId\n  reactorId\n  aggregateType\n  aggregateId\n  streamVersion\n  summary\n  payload\n\n    }\n  }\n";
+export declare const INSPECTOR_EVENTS = "\n  query InspectorEvents(\n    $limit: Int!\n    $cursor: Int\n    $search: String\n    $from: DateTime\n    $to: DateTime\n    $correlationId: String\n    $aggregateKey: String\n  ) {\n    inspectorEvents(\n      limit: $limit\n      cursor: $cursor\n      search: $search\n      from: $from\n      to: $to\n      correlationId: $correlationId\n      aggregateKey: $aggregateKey\n    ) {\n      events {\n        \n  seq\n  ts\n  type\n  name\n  id\n  parentId\n  correlationId\n  reactorId\n  aggregateType\n  aggregateId\n  streamVersion\n  summary\n  payload\n\n      }\n      nextCursor\n    }\n  }\n";
+export declare const INSPECTOR_CAUSAL_TREE = "\n  query InspectorCausalTree($seq: Int!) {\n    inspectorCausalTree(seq: $seq) {\n      events {\n        \n  seq\n  ts\n  type\n  name\n  id\n  parentId\n  correlationId\n  reactorId\n  aggregateType\n  aggregateId\n  streamVersion\n  summary\n  payload\n\n      }\n      rootSeq\n    }\n  }\n";
+export declare const INSPECTOR_CAUSAL_FLOW = "\n  query InspectorCausalFlow($correlationId: String!) {\n    inspectorCausalFlow(correlationId: $correlationId) {\n      events {\n        \n  seq\n  ts\n  type\n  name\n  id\n  parentId\n  correlationId\n  reactorId\n  aggregateType\n  aggregateId\n  streamVersion\n  summary\n  payload\n\n      }\n    }\n  }\n";
+export declare const INSPECTOR_REACTOR_LOGS = "\n  query InspectorReactorLogs($eventId: String!, $reactorId: String!) {\n    inspectorReactorLogs(eventId: $eventId, reactorId: $reactorId) {\n      eventId\n      reactorId\n      level\n      message\n      data\n      loggedAt\n    }\n  }\n";
+export declare const INSPECTOR_REACTOR_LOGS_BY_CORRELATION = "\n  query InspectorReactorLogsByCorrelation($correlationId: String!) {\n    inspectorReactorLogsByCorrelation(correlationId: $correlationId) {\n      eventId\n      reactorId\n      level\n      message\n      data\n      loggedAt\n    }\n  }\n";
+export declare const INSPECTOR_REACTOR_DESCRIPTIONS = "\n  query InspectorReactorDescriptions($correlationId: String!) {\n    inspectorReactorDescriptions(correlationId: $correlationId) {\n      reactorId\n      blocks\n    }\n  }\n";
+export declare const INSPECTOR_REACTOR_DESCRIPTION_SNAPSHOTS = "\n  query InspectorReactorDescriptionSnapshots($correlationId: String!) {\n    inspectorReactorDescriptionSnapshots(correlationId: $correlationId) {\n      seq\n      eventId\n      reactorId\n      blocks\n    }\n  }\n";
+export declare const INSPECTOR_AGGREGATE_TIMELINE = "\n  query InspectorAggregateTimeline($correlationId: String!) {\n    inspectorAggregateTimeline(correlationId: $correlationId) {\n      seq\n      eventId\n      eventType\n      aggregates {\n        key\n        state\n      }\n    }\n  }\n";
+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_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

@@ -0,0 +1,175 @@
+/** GraphQL query and subscription documents for the causal inspector API. */
+const EVENT_FIELDS = `
+  seq
+  ts
+  type
+  name
+  id
+  parentId
+  correlationId
+  reactorId
+  aggregateType
+  aggregateId
+  streamVersion
+  summary
+  payload
+`;
+export const EVENTS_SUBSCRIPTION = `
+  subscription Events($lastSeq: Int) {
+    inspectorEventAdded(lastSeq: $lastSeq) {
+      ${EVENT_FIELDS}
+    }
+  }
+`;
+export const INSPECTOR_EVENTS = `
+  query InspectorEvents(
+    $limit: Int!
+    $cursor: Int
+    $search: String
+    $from: DateTime
+    $to: DateTime
+    $correlationId: String
+    $aggregateKey: String
+  ) {
+    inspectorEvents(
+      limit: $limit
+      cursor: $cursor
+      search: $search
+      from: $from
+      to: $to
+      correlationId: $correlationId
+      aggregateKey: $aggregateKey
+    ) {
+      events {
+        ${EVENT_FIELDS}
+      }
+      nextCursor
+    }
+  }
+`;
+export const INSPECTOR_CAUSAL_TREE = `
+  query InspectorCausalTree($seq: Int!) {
+    inspectorCausalTree(seq: $seq) {
+      events {
+        ${EVENT_FIELDS}
+      }
+      rootSeq
+    }
+  }
+`;
+export const INSPECTOR_CAUSAL_FLOW = `
+  query InspectorCausalFlow($correlationId: String!) {
+    inspectorCausalFlow(correlationId: $correlationId) {
+      events {
+        ${EVENT_FIELDS}
+      }
+    }
+  }
+`;
+export const INSPECTOR_REACTOR_LOGS = `
+  query InspectorReactorLogs($eventId: String!, $reactorId: String!) {
+    inspectorReactorLogs(eventId: $eventId, reactorId: $reactorId) {
+      eventId
+      reactorId
+      level
+      message
+      data
+      loggedAt
+    }
+  }
+`;
+export const INSPECTOR_REACTOR_LOGS_BY_CORRELATION = `
+  query InspectorReactorLogsByCorrelation($correlationId: String!) {
+    inspectorReactorLogsByCorrelation(correlationId: $correlationId) {
+      eventId
+      reactorId
+      level
+      message
+      data
+      loggedAt
+    }
+  }
+`;
+export const INSPECTOR_REACTOR_DESCRIPTIONS = `
+  query InspectorReactorDescriptions($correlationId: String!) {
+    inspectorReactorDescriptions(correlationId: $correlationId) {
+      reactorId
+      blocks
+    }
+  }
+`;
+export const INSPECTOR_REACTOR_DESCRIPTION_SNAPSHOTS = `
+  query InspectorReactorDescriptionSnapshots($correlationId: String!) {
+    inspectorReactorDescriptionSnapshots(correlationId: $correlationId) {
+      seq
+      eventId
+      reactorId
+      blocks
+    }
+  }
+`;
+export const INSPECTOR_AGGREGATE_TIMELINE = `
+  query InspectorAggregateTimeline($correlationId: String!) {
+    inspectorAggregateTimeline(correlationId: $correlationId) {
+      seq
+      eventId
+      eventType
+      aggregates {
+        key
+        state
+      }
+    }
+  }
+`;
+export const INSPECTOR_REACTOR_DEPENDENCIES = `
+  query InspectorReactorDependencies {
+    inspectorReactorDependencies {
+      reactorId
+      inputEventTypes
+      outputEventTypes
+    }
+  }
+`;
+export const INSPECTOR_AGGREGATE_KEYS = `
+  query InspectorAggregateKeys {
+    inspectorAggregateKeys
+  }
+`;
+export const INSPECTOR_AGGREGATE_LIFECYCLE = `
+  query InspectorAggregateLifecycle($aggregateKey: String!, $limit: Int) {
+    inspectorAggregateLifecycle(aggregateKey: $aggregateKey, limit: $limit) {
+      seq
+      eventId
+      eventType
+      ts
+      correlationId
+      aggregateKey
+      state
+    }
+  }
+`;
+export const INSPECTOR_CORRELATIONS = `
+  query InspectorCorrelations($search: String, $limit: Int) {
+    inspectorCorrelations(search: $search, limit: $limit) {
+      correlationId
+      eventCount
+      firstTs
+      lastTs
+      rootEventType
+      hasErrors
+    }
+  }
+`;
+export const INSPECTOR_REACTOR_OUTCOMES = `
+  query InspectorReactorOutcomes($correlationId: String!) {
+    inspectorReactorOutcomes(correlationId: $correlationId) {
+      reactorId
+      status
+      error
+      attempts
+      startedAt
+      completedAt
+      triggeringEventIds
+    }
+  }
+`;

package/dist/reducer.d.ts

@@ -0,0 +1,4 @@
+import type { Reducer } from "./machine";
+import type { InspectorMachineEvent } from "./events";
+import type { InspectorState } from "./state";
+export declare const reducer: Reducer<InspectorState, InspectorMachineEvent>;

package/dist/reducer.js

@@ -0,0 +1,177 @@
+/**
+ * Shared navigation logic used by both user-initiated facts
+ * (ui/flow_opened, ui/handler_selected) and browser-initiated
+ * navigation (location/changed from popstate).
+ */
+function applyNavigation(draft, correlationId, handler) {
+    // Correlation changed → reset flow state
+    if (correlationId !== draft.flowCorrelationId) {
+        if (correlationId) {
+            draft.flowCorrelationId = correlationId;
+            draft.flowData = [];
+            draft.flowSelection = null;
+            draft.scrubberStart = null;
+            draft.scrubberEnd = null;
+            draft.scrubberPlaying = false;
+            draft.logsFilter = {
+                scope: "correlation",
+                reactorId: null,
+                correlationId,
+            };
+        }
+        else {
+            draft.flowCorrelationId = null;
+            draft.flowData = [];
+            draft.flowSelection = null;
+            draft.scrubberStart = null;
+            draft.scrubberEnd = null;
+            draft.scrubberPlaying = false;
+            draft.logsFilter = {
+                scope: "reactor",
+                reactorId: null,
+                correlationId: null,
+            };
+        }
+    }
+    // Handler changed → update logs filter
+    if (handler && handler !== draft.logsFilter.reactorId) {
+        draft.logsFilter = {
+            scope: "reactor",
+            reactorId: handler,
+            correlationId: draft.flowCorrelationId,
+        };
+    }
+}
+export const reducer = (draft, event) => {
+    switch (event.type) {
+        // ── 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;
+                }
+                if (draft.filters.search) {
+                    const s = draft.filters.search.toLowerCase();
+                    const matches = e.name.toLowerCase().includes(s) ||
+                        e.payload.toLowerCase().includes(s) ||
+                        (e.correlationId ?? "").toLowerCase().includes(s);
+                    if (!matches)
+                        return false;
+                }
+                return true;
+            });
+            if (filtered.length > 0) {
+                draft.events.unshift(...filtered);
+            }
+            break;
+        }
+        case "events/subscription_connected":
+            draft.subscription = "connected";
+            break;
+        case "events/subscription_error":
+            draft.subscription = "error";
+            break;
+        // ── Query results ──
+        case "events/page_loaded": {
+            const { events, hasMore } = event.payload;
+            draft.events.push(...events);
+            draft.hasMore = hasMore;
+            draft.loading = false;
+            break;
+        }
+        case "events/causal_tree_loaded":
+            draft.causalTree = event.payload;
+            break;
+        case "events/flow_loaded":
+            draft.flowData = event.payload;
+            break;
+        case "events/logs_loaded":
+            draft.logs = event.payload;
+            break;
+        case "events/descriptions_loaded": {
+            const { correlationId, descriptions } = event.payload;
+            draft.descriptions[correlationId] = descriptions;
+            break;
+        }
+        case "events/description_snapshots_loaded": {
+            const { correlationId, snapshots } = event.payload;
+            draft.descriptionSnapshots[correlationId] = snapshots;
+            break;
+        }
+        case "events/aggregate_timeline_loaded": {
+            const { correlationId, entries } = event.payload;
+            draft.aggregateTimeline[correlationId] = entries;
+            break;
+        }
+        case "events/outcomes_loaded": {
+            const { correlationId, outcomes } = event.payload;
+            draft.outcomes[correlationId] = outcomes;
+            break;
+        }
+        case "events/correlations_loaded":
+            draft.correlations = event.payload;
+            draft.correlationsLoading = false;
+            break;
+        case "events/reactor_dependencies_loaded":
+            draft.reactorDependencies = event.payload;
+            break;
+        case "events/aggregate_keys_loaded":
+            draft.aggregateKeys = event.payload;
+            break;
+        case "events/aggregate_lifecycle_loaded":
+            draft.aggregateLifecycleKey = event.payload.key;
+            draft.aggregateLifecycle = event.payload.entries;
+            break;
+        // ── Navigation (user facts + browser popstate) ──
+        case "ui/flow_opened":
+            applyNavigation(draft, event.payload.correlationId, null);
+            break;
+        case "ui/flow_closed":
+            applyNavigation(draft, null, null);
+            break;
+        case "ui/handler_selected":
+            applyNavigation(draft, draft.flowCorrelationId, event.payload.reactorId);
+            break;
+        case "location/changed":
+            applyNavigation(draft, event.payload.correlationId, event.payload.handler);
+            break;
+        // ── UI ──
+        case "ui/event_selected":
+            draft.selectedSeq = event.payload.seq;
+            break;
+        case "ui/event_deselected":
+            draft.selectedSeq = null;
+            draft.causalTree = null;
+            break;
+        case "ui/flow_node_selected":
+            draft.flowSelection = event.payload;
+            break;
+        case "ui/filter_changed":
+            Object.assign(draft.filters, event.payload);
+            break;
+        case "ui/load_more_requested":
+            draft.loading = true;
+            break;
+        case "ui/layout_changed":
+            draft.paneLayout = event.payload;
+            break;
+        case "ui/scrubber_start_changed":
+            draft.scrubberStart = event.payload.start;
+            break;
+        case "ui/scrubber_end_changed":
+            draft.scrubberEnd = event.payload.end;
+            break;
+        case "ui/scrubber_play_toggled":
+            draft.scrubberPlaying = !draft.scrubberPlaying;
+            break;
+        case "ui/scrubber_speed_changed":
+            draft.scrubberSpeed = event.payload.speed;
+            break;
+        case "ui/correlations_requested":
+            draft.correlationsLoading = true;
+            break;
+    }
+};

package/dist/state.d.ts

@@ -0,0 +1,34 @@
+import type { InspectorEvent, CorrelationSummary, ReactorDependency, AggregateLifecycleEntry, FilterState, FlowSelection, ReactorDescription, ReactorDescriptionSnapshot, AggregateTimelineEntry, ReactorLog, ReactorOutcome, LogsFilter, PaneLayout } from "./types";
+export type InspectorState = {
+    events: InspectorEvent[];
+    hasMore: boolean;
+    loading: boolean;
+    selectedSeq: number | null;
+    flowCorrelationId: string | null;
+    flowData: InspectorEvent[];
+    flowSelection: FlowSelection;
+    scrubberStart: number | null;
+    scrubberEnd: number | null;
+    scrubberPlaying: boolean;
+    scrubberSpeed: number;
+    causalTree: {
+        events: InspectorEvent[];
+        rootSeq: number;
+    } | null;
+    filters: FilterState;
+    logs: ReactorLog[];
+    logsFilter: LogsFilter;
+    descriptions: Record<string, ReactorDescription[]>;
+    descriptionSnapshots: Record<string, ReactorDescriptionSnapshot[]>;
+    aggregateTimeline: Record<string, AggregateTimelineEntry[]>;
+    outcomes: Record<string, ReactorOutcome[]>;
+    correlations: CorrelationSummary[];
+    correlationsLoading: boolean;
+    reactorDependencies: ReactorDependency[];
+    aggregateKeys: string[];
+    aggregateLifecycle: AggregateLifecycleEntry[];
+    aggregateLifecycleKey: string | null;
+    subscription: "connected" | "disconnected" | "error";
+    paneLayout: PaneLayout | null;
+};
+export declare const initialState: InspectorState;

package/dist/state.js

@@ -0,0 +1,39 @@
+export const initialState = {
+    events: [],
+    hasMore: true,
+    loading: false,
+    selectedSeq: null,
+    flowCorrelationId: null,
+    flowData: [],
+    flowSelection: null,
+    scrubberStart: null,
+    scrubberEnd: null,
+    scrubberPlaying: false,
+    scrubberSpeed: 300,
+    causalTree: null,
+    filters: {
+        search: "",
+        from: null,
+        to: null,
+        correlationId: null,
+        aggregateKey: null,
+    },
+    logs: [],
+    logsFilter: {
+        scope: "reactor",
+        reactorId: null,
+        correlationId: null,
+    },
+    descriptions: {},
+    descriptionSnapshots: {},
+    aggregateTimeline: {},
+    outcomes: {},
+    correlations: [],
+    correlationsLoading: false,
+    reactorDependencies: [],
+    aggregateKeys: [],
+    aggregateLifecycle: [],
+    aggregateLifecycleKey: null,
+    subscription: "disconnected",
+    paneLayout: null,
+};

package/dist/theme.d.ts

@@ -0,0 +1,7 @@
+/** Deterministic hue from event name — consistent colors across renders. */
+export declare function eventHue(name: string): number;
+/** Background color blended onto dark background — more saturated. */
+export declare function eventBg(name: string): string;
+export declare function eventBorder(name: string): string;
+export declare function eventTextColor(name: string): string;
+export declare const LOG_LEVEL_COLORS: Record<string, string>;