causal-inspector 0.1.5 → 0.2.0

package/dist/events.d.ts

@@ -1,5 +1,5 @@
 import type { BaseEvent } from "./machine";
-import type { InspectorEvent, CorrelationSummary, ReactorDependency, AggregateLifecycleEntry, FilterState, FlowSelection, ReactorDescription, ReactorDescriptionSnapshot, AggregateTimelineEntry, ReactorLog, ReactorOutcome, PaneLayout } from "./types";
+import type { InspectorEvent, WorkflowSummary, ReactorDependency, AggregateLifecycleEntry, FilterState, FlowSelection, ReactorDescription, ReactorDescriptionSnapshot, AggregateTimelineEntry, ReactorLog, ReactorOutcome, ReactorAttempt, PaneLayout, SubjectChainEvent, SubjectChainMode, InspectorEffect } from "./types";
 type EventsReceived = BaseEvent<"events/received", InspectorEvent[]>;
 type SubscriptionConnected = BaseEvent<"events/subscription_connected">;
 type SubscriptionError = BaseEvent<"events/subscription_error", {
@@ -16,23 +16,27 @@ type CausalTreeLoaded = BaseEvent<"events/causal_tree_loaded", {
 type FlowLoaded = BaseEvent<"events/flow_loaded", InspectorEvent[]>;
 type LogsLoaded = BaseEvent<"events/logs_loaded", ReactorLog[]>;
 type DescriptionsLoaded = BaseEvent<"events/descriptions_loaded", {
-    correlationId: string;
+    workflowId: string;
     descriptions: ReactorDescription[];
 }>;
 type DescriptionSnapshotsLoaded = BaseEvent<"events/description_snapshots_loaded", {
-    correlationId: string;
+    workflowId: string;
     snapshots: ReactorDescriptionSnapshot[];
 }>;
 type AggregateTimelineLoaded = BaseEvent<"events/aggregate_timeline_loaded", {
-    correlationId: string;
+    workflowId: string;
     entries: AggregateTimelineEntry[];
 }>;
 type OutcomesLoaded = BaseEvent<"events/outcomes_loaded", {
-    correlationId: string;
+    workflowId: string;
     outcomes: ReactorOutcome[];
 }>;
-type CorrelationsLoaded = BaseEvent<"events/correlations_loaded", {
-    correlations: CorrelationSummary[];
+type AttemptsLoaded = BaseEvent<"events/attempts_loaded", {
+    workflowId: string;
+    attempts: ReactorAttempt[];
+}>;
+type WorkflowsLoaded = BaseEvent<"events/workflows_loaded", {
+    workflows: WorkflowSummary[];
     hasMore: boolean;
     append: boolean;
 }>;
@@ -47,7 +51,7 @@ type EventSelected = BaseEvent<"ui/event_selected", {
 }>;
 type EventDeselected = BaseEvent<"ui/event_deselected">;
 type FlowOpened = BaseEvent<"ui/flow_opened", {
-    correlationId: string;
+    workflowId: string;
 }>;
 type FlowClosed = BaseEvent<"ui/flow_closed">;
 type FlowNodeSelected = BaseEvent<"ui/flow_node_selected", FlowSelection>;
@@ -64,7 +68,7 @@ type ScrubberPlayToggled = BaseEvent<"ui/scrubber_play_toggled">;
 type ScrubberSpeedChanged = BaseEvent<"ui/scrubber_speed_changed", {
     speed: number;
 }>;
-type CorrelationsRequested = BaseEvent<"ui/correlations_requested", {
+type WorkflowsRequested = BaseEvent<"ui/workflows_requested", {
     search?: string;
 }>;
 type HandlerSelected = BaseEvent<"ui/handler_selected", {
@@ -73,10 +77,35 @@ type HandlerSelected = BaseEvent<"ui/handler_selected", {
 type AggregateLifecycleRequested = BaseEvent<"ui/aggregate_lifecycle_requested", {
     aggregateKey: string;
 }>;
-type LoadMoreCorrelationsRequested = BaseEvent<"ui/load_more_correlations_requested">;
+type LoadMoreWorkflowsRequested = BaseEvent<"ui/load_more_workflows_requested">;
 type LocationChanged = BaseEvent<"location/changed", {
-    correlationId: string | null;
+    workflowId: string | null;
     handler: string | null;
+    subject: string | null;
+    subjectMode: SubjectChainMode | null;
+}>;
+type SubjectSelected = BaseEvent<"ui/subject_selected", {
+    aggregateType: string;
+    aggregateId: string;
+    mode?: SubjectChainMode;
+}>;
+type SubjectModeChanged = BaseEvent<"ui/subject_mode_changed", {
+    mode: SubjectChainMode;
+}>;
+type SubjectChainLoadMore = BaseEvent<"ui/subject_chain_load_more">;
+type EventEffectsRequested = BaseEvent<"ui/event_effects_requested", {
+    eventId: string;
+}>;
+type SubjectChainLoaded = BaseEvent<"events/subject_chain_loaded", {
+    events: SubjectChainEvent[];
+    hasMore: boolean;
+    cursor: number | null;
+    depthCapped: boolean;
+    append: boolean;
+}>;
+type EventEffectsLoaded = BaseEvent<"events/event_effects_loaded", {
+    eventId: string;
+    effects: InspectorEffect[];
 }>;
-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 type InspectorMachineEvent = EventsReceived | SubscriptionConnected | SubscriptionError | PageLoaded | CausalTreeLoaded | FlowLoaded | LogsLoaded | DescriptionsLoaded | DescriptionSnapshotsLoaded | AggregateTimelineLoaded | OutcomesLoaded | AttemptsLoaded | WorkflowsLoaded | EventSelected | EventDeselected | FlowOpened | FlowClosed | FlowNodeSelected | FilterChanged | LoadMoreRequested | LayoutChanged | ScrubberStartChanged | ScrubberEndChanged | ScrubberPlayToggled | ScrubberSpeedChanged | WorkflowsRequested | ReactorDependenciesLoaded | AggregateKeysLoaded | HandlerSelected | LocationChanged | AggregateLifecycleLoaded | AggregateLifecycleRequested | LoadMoreWorkflowsRequested | SubjectSelected | SubjectModeChanged | SubjectChainLoadMore | EventEffectsRequested | SubjectChainLoaded | EventEffectsLoaded;
 export {};

package/dist/index.d.ts

@@ -5,10 +5,10 @@ export { reducer } from "./reducer";
 export { initialState } from "./state";
 export type { InspectorState } from "./state";
 export type { InspectorMachineEvent } from "./events";
-export type { InspectorEvent, InspectorEventsPage, InspectorCausalTree, InspectorCausalFlow, CorrelationSummary, ReactorDependency, AggregateLifecycleEntry, Block, ReactorLog, ReactorDescription, ReactorDescriptionSnapshot, AggregateStateEntry, AggregateTimelineEntry, ReactorOutcome, FilterState, LogsFilter, FlowSelection, PaneLayout, } from "./types";
+export type { InspectorEvent, InspectorEventsPage, InspectorCausalTree, InspectorCausalFlow, WorkflowSummary, ReactorDependency, AggregateLifecycleEntry, Block, ReactorLog, ReactorDescription, ReactorDescriptionSnapshot, AggregateStateEntry, AggregateTimelineEntry, ReactorOutcome, ReactorAttempt, FilterState, LogsFilter, FlowSelection, PaneLayout, SubjectChainSourceMode, SubjectChainMode, SubjectChainEvent, InspectorEffect, AggregateKeyEntry, AggregateKeysPage, } from "./types";
 export { createInspectorEngine, createSubscriptionEngine, createQueryEngine, createStorageEngine, } from "./engines";
 export type { InspectorTransport, SubscriptionTransport, QueryTransport, StorageTransport, } from "./engines";
-export { EVENTS_SUBSCRIPTION, INSPECTOR_EVENTS, INSPECTOR_CAUSAL_TREE, INSPECTOR_CAUSAL_FLOW, INSPECTOR_CORRELATIONS, INSPECTOR_REACTOR_LOGS, INSPECTOR_REACTOR_LOGS_BY_CORRELATION, INSPECTOR_REACTOR_DESCRIPTIONS, INSPECTOR_REACTOR_DESCRIPTION_SNAPSHOTS, INSPECTOR_AGGREGATE_TIMELINE, INSPECTOR_REACTOR_OUTCOMES, INSPECTOR_REACTOR_DEPENDENCIES, INSPECTOR_AGGREGATE_KEYS, INSPECTOR_AGGREGATE_LIFECYCLE, } from "./queries";
+export { EVENTS_SUBSCRIPTION, INSPECTOR_EVENTS, INSPECTOR_CAUSAL_TREE, INSPECTOR_CAUSAL_FLOW, INSPECTOR_WORKFLOWS, INSPECTOR_REACTOR_LOGS, INSPECTOR_REACTOR_LOGS_BY_WORKFLOW, INSPECTOR_REACTOR_DESCRIPTIONS, INSPECTOR_REACTOR_DESCRIPTION_SNAPSHOTS, INSPECTOR_AGGREGATE_TIMELINE, INSPECTOR_REACTOR_OUTCOMES, INSPECTOR_REACTOR_ATTEMPTS, INSPECTOR_REACTOR_DEPENDENCIES, INSPECTOR_AGGREGATE_KEYS, INSPECTOR_AGGREGATE_LIFECYCLE, INSPECTOR_SUBJECT_CHAIN, INSPECTOR_EFFECTS_FOR_EVENT, INSPECTOR_AGGREGATE_TYPES, INSPECTOR_AGGREGATE_KEYS_BY_TYPE, } from "./queries";
 export { eventHue, eventBg, eventBorder, eventTextColor, LOG_LEVEL_COLORS, } from "./theme";
 export { formatTs, compactPayload, copyToClipboard } from "./utils";
 export { CausalInspector } from "./CausalInspector";
@@ -17,6 +17,7 @@ export { FilterBar } from "./components/FilterBar";
 export { CopyablePayload } from "./components/CopyablePayload";
 export { JsonSyntax } from "./components/JsonSyntax";
 export { GlobalScrubber } from "./components/GlobalScrubber";
+export { EffectList } from "./components/EffectList";
 export { TimelinePane } from "./panes/TimelinePane";
 export type { TimelinePaneProps } from "./panes/TimelinePane";
 export { CausalTreePane } from "./panes/CausalTreePane";
@@ -27,4 +28,5 @@ export { CausalFlowPane } from "./panes/CausalFlowPane";
 export type { CausalFlowPaneProps } from "./panes/CausalFlowPane";
 export { AggregateTimelinePane } from "./panes/AggregateTimelinePane";
 export { WaterfallPane } from "./panes/WaterfallPane";
-export { CorrelationExplorerPane } from "./panes/CorrelationExplorerPane";
+export { WorkflowExplorerPane } from "./panes/WorkflowExplorerPane";
+export { SubjectChainPane } from "./panes/SubjectChainPane";

package/dist/index.js

@@ -7,7 +7,7 @@ export { initialState } from "./state";
 // ── Engines ──
 export { createInspectorEngine, createSubscriptionEngine, createQueryEngine, createStorageEngine, } from "./engines";
 // ── Queries ──
-export { EVENTS_SUBSCRIPTION, INSPECTOR_EVENTS, INSPECTOR_CAUSAL_TREE, INSPECTOR_CAUSAL_FLOW, INSPECTOR_CORRELATIONS, INSPECTOR_REACTOR_LOGS, INSPECTOR_REACTOR_LOGS_BY_CORRELATION, INSPECTOR_REACTOR_DESCRIPTIONS, INSPECTOR_REACTOR_DESCRIPTION_SNAPSHOTS, INSPECTOR_AGGREGATE_TIMELINE, INSPECTOR_REACTOR_OUTCOMES, INSPECTOR_REACTOR_DEPENDENCIES, INSPECTOR_AGGREGATE_KEYS, INSPECTOR_AGGREGATE_LIFECYCLE, } from "./queries";
+export { EVENTS_SUBSCRIPTION, INSPECTOR_EVENTS, INSPECTOR_CAUSAL_TREE, INSPECTOR_CAUSAL_FLOW, INSPECTOR_WORKFLOWS, INSPECTOR_REACTOR_LOGS, INSPECTOR_REACTOR_LOGS_BY_WORKFLOW, INSPECTOR_REACTOR_DESCRIPTIONS, INSPECTOR_REACTOR_DESCRIPTION_SNAPSHOTS, INSPECTOR_AGGREGATE_TIMELINE, INSPECTOR_REACTOR_OUTCOMES, INSPECTOR_REACTOR_ATTEMPTS, INSPECTOR_REACTOR_DEPENDENCIES, INSPECTOR_AGGREGATE_KEYS, INSPECTOR_AGGREGATE_LIFECYCLE, INSPECTOR_SUBJECT_CHAIN, INSPECTOR_EFFECTS_FOR_EVENT, INSPECTOR_AGGREGATE_TYPES, INSPECTOR_AGGREGATE_KEYS_BY_TYPE, } from "./queries";
 // ── Theme ──
 export { eventHue, eventBg, eventBorder, eventTextColor, LOG_LEVEL_COLORS, } from "./theme";
 // ── Utilities ──
@@ -19,6 +19,7 @@ export { FilterBar } from "./components/FilterBar";
 export { CopyablePayload } from "./components/CopyablePayload";
 export { JsonSyntax } from "./components/JsonSyntax";
 export { GlobalScrubber } from "./components/GlobalScrubber";
+export { EffectList } from "./components/EffectList";
 // ── Panes ──
 export { TimelinePane } from "./panes/TimelinePane";
 export { CausalTreePane } from "./panes/CausalTreePane";
@@ -26,4 +27,5 @@ export { LogsPane } from "./panes/LogsPane";
 export { CausalFlowPane } from "./panes/CausalFlowPane";
 export { AggregateTimelinePane } from "./panes/AggregateTimelinePane";
 export { WaterfallPane } from "./panes/WaterfallPane";
-export { CorrelationExplorerPane } from "./panes/CorrelationExplorerPane";
+export { WorkflowExplorerPane } from "./panes/WorkflowExplorerPane";
+export { SubjectChainPane } from "./panes/SubjectChainPane";

package/dist/panes/AggregateTimelinePane.js

@@ -144,8 +144,8 @@ function AggregateCard({ aggregateKey, state, prevState, diffMode, }) {
                 }, children: [_jsx("span", { style: { fontSize: 9, color: "#52525b", transform: collapsed ? "rotate(-90deg)" : "rotate(0deg)", transition: "transform 100ms" }, children: "\u25BC" }), _jsx("span", { style: { fontSize: 11, fontWeight: 500, color: "#e4e4e7" }, children: aggType }), aggId && (_jsx("span", { style: { fontSize: 10, color: "#71717a", fontFamily: "monospace" }, children: aggId })), showDiff && diffs.length > 0 && (_jsxs("span", { style: { fontSize: 9, color: "#fbbf24", marginLeft: "auto" }, children: [diffs.length, " change", diffs.length !== 1 ? "s" : ""] })), showDiff && diffs.length === 0 && (_jsx("span", { style: { fontSize: 9, color: "#52525b", marginLeft: "auto" }, children: "unchanged" }))] }), !collapsed && (_jsx("div", { style: { padding: "4px 8px 6px" }, children: showDiff ? _jsx(DiffView, { diffs: diffs }) : _jsx(InlineJson, { value: state }) }))] }));
 }
 export function AggregateTimelinePane() {
-    const correlationId = useSelector((s) => s.flowCorrelationId);
-    const entries = useSelector((s) => correlationId ? s.aggregateTimeline[correlationId] ?? [] : []);
+    const workflowId = useSelector((s) => s.flowWorkflowId);
+    const entries = useSelector((s) => workflowId ? s.aggregateTimeline[workflowId] ?? [] : []);
     const scrubberStart = useSelector((s) => s.scrubberStart);
     const scrubberEnd = useSelector((s) => s.scrubberEnd);
     const logsFilter = useSelector((s) => s.logsFilter);
@@ -185,11 +185,11 @@ export function AggregateTimelinePane() {
     const handleRowClick = useCallback((seq) => {
         dispatch({ type: "ui/scrubber_end_changed", payload: { end: seq } });
     }, [dispatch]);
-    if (!correlationId) {
+    if (!workflowId) {
         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 aggregate state timeline" }));
     }
     if (entries.length === 0) {
-        return (_jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#50506a", fontSize: 12, letterSpacing: "0.03em" }, children: "No aggregate state snapshots for this correlation" }));
+        return (_jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#50506a", fontSize: 12, letterSpacing: "0.03em" }, children: "No aggregate state snapshots for this workflow" }));
     }
     return (_jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, padding: "6px 12px", borderBottom: "1px solid rgba(255,255,255,0.06)", flexShrink: 0, background: "rgba(15, 15, 20, 0.6)", backdropFilter: "blur(8px)" }, children: [_jsx("button", { onClick: () => setDiffMode(false), style: {
                             fontSize: 10,

package/dist/panes/CausalFlowPane.js

@@ -126,10 +126,10 @@ function buildFlowGraph(events, descriptions, outcomes, hiddenReactors, directio
             children.add(groupKey);
             reactorToChildTypes.set(evt.reactorId, children);
         }
-        if (evt.parentId && evt.reactorId) {
-            const reactors = parentToReactor.get(evt.parentId) ?? new Set();
+        if (evt.causationId && evt.reactorId) {
+            const reactors = parentToReactor.get(evt.causationId) ?? new Set();
             reactors.add(evt.reactorId);
-            parentToReactor.set(evt.parentId, reactors);
+            parentToReactor.set(evt.causationId, reactors);
         }
     }
     const eventIdToGroup = new Map();
@@ -334,8 +334,8 @@ function computeVisibleIds(allEvents, start, end) {
             edgeIds.add(`hdl:${evt.reactorId}->evt:${evt.name}`);
         }
         // Parent event -> reactor edge
-        if (evt.parentId && evt.reactorId) {
-            const parentGroup = eventIdToGroup.get(evt.parentId);
+        if (evt.causationId && evt.reactorId) {
+            const parentGroup = eventIdToGroup.get(evt.causationId);
             if (parentGroup) {
                 edgeIds.add(`evt:${parentGroup}->hdl:${evt.reactorId}`);
             }
@@ -343,7 +343,7 @@ function computeVisibleIds(allEvents, start, end) {
         // Root event -> reactor edges
         if (!evt.reactorId && evt.id) {
             for (const child of visible) {
-                if (child.parentId === evt.id && child.reactorId) {
+                if (child.causationId === evt.id && child.reactorId) {
                     const rootGroup = eventIdToGroup.get(evt.id);
                     if (rootGroup) {
                         edgeIds.add(`evt:${rootGroup}->hdl:${child.reactorId}`);
@@ -430,7 +430,7 @@ function ReactorFilter({ allReactorIds, hiddenReactors, setHiddenReactors }) {
     return (_jsxs("div", { ref: containerRef, className: "relative", children: [_jsxs("button", { onClick: () => setOpen(v => !v), 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", children: [_jsx(Filter, { size: 11, className: "inline mr-1 -mt-px" }), hiddenCount > 0 ? `${hiddenCount} hidden` : "Filter"] }), open && (_jsxs("div", { className: "absolute top-full right-0 mt-1 z-50 border border-border rounded-lg min-w-[240px]", style: { background: "rgba(17, 17, 22, 0.95)", backdropFilter: "blur(12px)", boxShadow: "0 8px 32px rgba(0, 0, 0, 0.5)" }, children: [_jsx("div", { className: "px-3 py-2 border-b border-border", children: _jsx("input", { autoFocus: true, type: "text", value: filter, onChange: e => setFilter(e.target.value), placeholder: "Search reactors...", className: "w-full text-xs bg-transparent border-none outline-none text-foreground placeholder:text-muted-foreground/50" }) }), _jsxs("div", { className: "max-h-64 overflow-y-auto py-1", children: [filtered.map(id => (_jsxs("label", { className: "flex items-center gap-2 px-3 py-1.5 hover:bg-white/[0.03] cursor-pointer transition-colors", children: [_jsx("input", { type: "checkbox", checked: !hiddenReactors.has(id), onChange: () => toggle(id), className: "rounded border-border accent-indigo-500" }), _jsx("span", { className: "text-[11px] font-mono text-foreground/80 truncate", children: id })] }, id))), filtered.length === 0 && (_jsx("div", { className: "text-xs text-muted-foreground/50 px-3 py-2", children: "No matches" }))] })] }))] }));
 }
 export function CausalFlowPane({ defaultHiddenReactors, headerExtra } = {}) {
-    const flowCorrelationId = useSelector((s) => s.flowCorrelationId);
+    const flowWorkflowId = useSelector((s) => s.flowWorkflowId);
     const flowData = useSelector((s) => s.flowData);
     const flowSelection = useSelector((s) => s.flowSelection);
     const descriptionsMap = useSelector((s) => s.descriptions);
@@ -438,30 +438,30 @@ export function CausalFlowPane({ defaultHiddenReactors, headerExtra } = {}) {
     const scrubberStart = useSelector((s) => s.scrubberStart);
     const scrubberEnd = useSelector((s) => s.scrubberEnd);
     const dispatch = useDispatch();
-    const flowLoading = flowCorrelationId != null && flowData.length === 0;
+    const flowLoading = flowWorkflowId != null && flowData.length === 0;
     // Build typed maps from state
     const descriptions = useMemo(() => {
-        if (!flowCorrelationId)
+        if (!flowWorkflowId)
             return undefined;
-        const raw = descriptionsMap[flowCorrelationId];
+        const raw = descriptionsMap[flowWorkflowId];
         if (!raw)
             return undefined;
         const map = new Map();
         for (const d of raw)
             map.set(d.reactorId, d.blocks);
         return map;
-    }, [descriptionsMap, flowCorrelationId]);
+    }, [descriptionsMap, flowWorkflowId]);
     const outcomes = useMemo(() => {
-        if (!flowCorrelationId)
+        if (!flowWorkflowId)
             return undefined;
-        const raw = outcomesMap[flowCorrelationId];
+        const raw = outcomesMap[flowWorkflowId];
         if (!raw)
             return undefined;
         const map = new Map();
         for (const o of raw)
             map.set(o.reactorId, o);
         return map;
-    }, [outcomesMap, flowCorrelationId]);
+    }, [outcomesMap, flowWorkflowId]);
     const [hiddenReactors, setHiddenReactors] = useState(() => defaultHiddenReactors ?? new Set());
     const [direction, setDirection] = useState("LR");
     const allReactorIds = useMemo(() => {
@@ -590,11 +590,11 @@ export function CausalFlowPane({ defaultHiddenReactors, headerExtra } = {}) {
         dispatch({ type: "ui/flow_node_selected", payload: null });
     }, [dispatch]);
     const onNodesChange = useCallback((_changes) => { }, []);
-    if (!flowCorrelationId) {
+    if (!flowWorkflowId) {
         return (_jsx("div", { className: "flex items-center justify-center h-full text-xs text-muted-foreground/50 tracking-wide", children: "Select an event to visualize its causal flow" }));
     }
     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, _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 })] }) })] }));
+    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: flowWorkflowId }), _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/CausalTreePane.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useMemo, useRef, useEffect, useCallback } from "react";
 import { useSelector, useDispatch } from "../machine";
 import { CopyablePayload } from "../components/CopyablePayload";
+import { EffectList } from "../components/EffectList";
 import { eventTextColor } from "../theme";
 import { formatTs, compactPayload, copyToClipboard, inScrubberRange } from "../utils";
-import { Copy, Check, Search, X, ChevronRight, ChevronDown } from "lucide-react";
+import { Copy, Check, Search, X, ChevronRight, ChevronDown, AlertTriangle, Zap } from "lucide-react";
 function buildTreeJson(roots, childrenMap) {
     function toNode(evt) {
         const children = evt.id ? (childrenMap.get(evt.id) ?? []) : [];
@@ -23,7 +24,7 @@ function buildTreeJson(roots, childrenMap) {
 // ---------------------------------------------------------------------------
 // ReactorNode — intermediate node grouping children by reactor_id
 // ---------------------------------------------------------------------------
-function ReactorNode({ reactorId, parentEventId, children, childrenMap, depth, isHighlighted, onClickReactor, }) {
+function ReactorNode({ reactorId, parentEventId, children, childrenMap, depth, isHighlighted, onClickReactor, outcome, outcomesByReactor, }) {
     const [collapsed, setCollapsed] = useState(false);
     const nodeRef = useRef(null);
     useEffect(() => {
@@ -34,16 +35,25 @@ function ReactorNode({ reactorId, parentEventId, children, childrenMap, depth, i
     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)))] }));
+    const isError = outcome?.status === "error";
+    const isRunning = outcome?.status === "running";
+    return (_jsxs("div", { className: depth > 0 ? "pl-6" : "", children: [_jsxs("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" : ""} ${isError ? "bg-red-500/8" : ""}`, 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 italic border ${isError
+                                            ? "bg-red-500/10 text-red-400/80 border-red-500/20"
+                                            : isRunning
+                                                ? "bg-yellow-500/10 text-yellow-400/80 border-yellow-500/20"
+                                                : "bg-white/[0.04] text-muted-foreground/60 border-border"}`, children: "reactor" }), _jsx("span", { className: "text-[10px] font-mono text-foreground/60 shrink-0", children: reactorId }), isError && (_jsxs("span", { className: "flex items-center gap-1 text-[9px] text-red-400/80 shrink-0", title: outcome.error ?? "Error", children: [_jsx(AlertTriangle, { size: 10 }), outcome.attempts > 1 && _jsxs("span", { children: ["x", outcome.attempts] })] })), collapsed && (_jsxs("span", { className: "text-[10px] text-muted-foreground shrink-0", children: ["(", children.length, ")"] }))] })] }), isError && outcome.error && (_jsx("div", { className: "mt-1 ml-7 text-[9px] text-red-400/70 truncate", title: outcome.error, children: outcome.error }))] }), !collapsed && children.map((child) => (_jsx(TreeNode, { event: child, childrenMap: childrenMap, depth: depth + 1, onClickReactor: onClickReactor, outcomesByReactor: outcomesByReactor }, child.seq)))] }));
 }
 // ---------------------------------------------------------------------------
 // TreeNode (recursive)
 // ---------------------------------------------------------------------------
-function TreeNode({ event, childrenMap, depth, onClickReactor, onInvestigate, }) {
+function TreeNode({ event, childrenMap, depth, onClickReactor, onInvestigate, outcomesByReactor, }) {
     const selectedSeq = useSelector((s) => s.selectedSeq);
     const flowSelection = useSelector((s) => s.flowSelection);
+    const expandedEffects = useSelector((s) => s.expandedEffects);
+    const loadingEffectsIds = useSelector((s) => s.loadingEffects);
     const dispatch = useDispatch();
     const [payloadOpen, setPayloadOpen] = useState(false);
+    const [effectsOpen, setEffectsOpen] = useState(false);
     const [collapsed, setCollapsed] = useState(false);
     const [copied, setCopied] = useState(false);
     const isSelected = event.seq === selectedSeq;
@@ -74,17 +84,28 @@ function TreeNode({ event, childrenMap, depth, onClickReactor, onInvestigate, })
     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 } });
+                    if (event.workflowId) {
+                        dispatch({ type: "ui/flow_opened", payload: { workflowId: event.workflowId } });
                     }
-                }, 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) => {
+                }, 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, ")"] })), event.aggregateType && event.aggregateId && (_jsxs("button", { onClick: (e) => {
+                                    e.stopPropagation();
+                                    dispatch({ type: "ui/subject_selected", payload: { aggregateType: event.aggregateType, aggregateId: event.aggregateId, mode: "both" } });
+                                }, className: "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: `View subject ${event.aggregateType}:${event.aggregateId}`, children: [event.aggregateType, ":", event.aggregateId.slice(0, 8)] })), _jsx("span", { className: "text-[10px] text-muted-foreground shrink-0", children: formatTs(event.ts) }), event.id && (_jsxs("button", { onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (!effectsOpen && expandedEffects[event.id] === undefined) {
+                                        dispatch({ type: "ui/event_effects_requested", payload: { eventId: event.id } });
+                                    }
+                                    setEffectsOpen((v) => !v);
+                                }, className: `opacity-0 group-hover/tree:opacity-100 transition-all duration-150 flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] ${effectsOpen
+                                    ? "opacity-100 bg-indigo-500/10 text-indigo-400/70 border border-indigo-500/20"
+                                    : "hover:bg-white/[0.05] text-muted-foreground/50 border border-transparent"}`, title: "Show effects", children: [_jsx(Zap, { size: 9 }), expandedEffects[event.id] !== undefined && expandedEffects[event.id].length > 0 && (_jsx("span", { children: expandedEffects[event.id].length }))] })), _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)))] }))] }));
+                                }, 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" })), effectsOpen && (_jsx("div", { className: "mt-1 ml-3", children: loadingEffectsIds.includes(event.id ?? "") ? (_jsx("div", { className: "text-[9px] text-muted-foreground/40 italic py-1", children: "Loading\u2026" })) : (_jsx(EffectList, { effects: event.id ? (expandedEffects[event.id] ?? []) : [] })) }))] }), !collapsed && (_jsxs(_Fragment, { children: [directChildren.map((child) => (_jsx(TreeNode, { event: child, childrenMap: childrenMap, depth: depth + 1, onClickReactor: onClickReactor, onInvestigate: onInvestigate, outcomesByReactor: outcomesByReactor }, 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, outcome: outcomesByReactor?.get(hid), outcomesByReactor: outcomesByReactor }, hid)))] }))] }));
 }
 // ---------------------------------------------------------------------------
 // matchesFlowSelection
@@ -100,10 +121,23 @@ 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 flowWorkflowId = useSelector((s) => s.flowWorkflowId);
     const scrubberStart = useSelector((s) => s.scrubberStart);
     const scrubberEnd = useSelector((s) => s.scrubberEnd);
+    const outcomesMap = useSelector((s) => s.outcomes);
     const dispatch = useDispatch();
+    // Build reactor outcome lookup for current flow
+    const outcomesByReactor = useMemo(() => {
+        if (!flowWorkflowId)
+            return new Map();
+        const raw = outcomesMap[flowWorkflowId];
+        if (!raw)
+            return new Map();
+        const map = new Map();
+        for (const o of raw)
+            map.set(o.reactorId, o);
+        return map;
+    }, [outcomesMap, flowWorkflowId]);
     const treeEvents = useMemo(() => {
         const all = causalTree?.events ?? null;
         if (all == null || (scrubberStart == null && scrubberEnd == null))
@@ -112,35 +146,35 @@ export function CausalTreePane({ onInvestigate } = {}) {
     }, [causalTree?.events, scrubberStart, scrubberEnd]);
     const treeLoading = selectedSeq != null && causalTree == null;
     const onClickReactor = useCallback((reactorId, _parentEventId) => {
-        if (flowCorrelationId) {
+        if (flowWorkflowId) {
             dispatch({ type: "ui/flow_node_selected", payload: { kind: "reactor", reactorId } });
         }
         dispatch({ type: "ui/handler_selected", payload: { reactorId } });
-    }, [flowCorrelationId, dispatch]);
+    }, [flowWorkflowId, 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)
+        const events = (flowWorkflowId && 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)) {
+            if (evt.causationId == null || !idSet.has(evt.causationId)) {
                 rootList.push(evt);
             }
             else {
-                const siblings = cMap.get(evt.parentId) ?? [];
+                const siblings = cMap.get(evt.causationId) ?? [];
                 siblings.push(evt);
-                cMap.set(evt.parentId, siblings);
+                cMap.set(evt.causationId, 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]);
+    }, [treeEvents, flowWorkflowId, 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" })] })] })] }));
     }
@@ -154,5 +188,5 @@ export function CausalTreePane({ onInvestigate } = {}) {
     }
     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)))] }));
+                            : `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, outcomesByReactor: outcomesByReactor }, root.seq)))] }));
 }

package/dist/panes/CorrelationExplorerPane.d.ts

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

package/dist/panes/CorrelationExplorerPane.js

@@ -15,32 +15,32 @@ function RelativeDuration({ firstTs, lastTs }) {
         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);
+export function WorkflowExplorerPane() {
+    const workflows = useSelector((s) => s.workflows);
+    const loading = useSelector((s) => s.workflowsLoading);
     const dispatch = useDispatch();
     const [search, setSearch] = useState("");
     const searchTimerRef = useRef(null);
-    // Request correlations on mount
+    // Request workflows on mount
     useEffect(() => {
-        dispatch({ type: "ui/correlations_requested", payload: {} });
+        dispatch({ type: "ui/workflows_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 } });
+            dispatch({ type: "ui/workflows_requested", payload: { search: value || undefined } });
         }, 300);
     }, [dispatch]);
-    const handleRowClick = useCallback((correlationId) => {
-        dispatch({ type: "ui/flow_opened", payload: { correlationId } });
+    const handleRowClick = useCallback((workflowId) => {
+        dispatch({ type: "ui/flow_opened", payload: { workflowId } });
     }, [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: {
+    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 workflow 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: "Workflow" }), _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 && workflows.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))) })) : workflows.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32 text-xs text-muted-foreground/50 tracking-wide", children: "No workflows found" })) : (_jsx("div", { className: "flex-1 overflow-y-auto", children: workflows.map((corr) => (_jsxs("button", { onClick: () => handleRowClick(corr.workflowId), 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))) }))] }));
+                            }, 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.workflowId}`, onClick: (e) => { e.stopPropagation(); handleCopy(corr.workflowId); }, children: corr.workflowId.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: "flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] font-semibold shrink-0 bg-red-500/10 text-red-400/80 border border-red-500/20", style: { boxShadow: "0 0 6px rgba(239, 68, 68, 0.15)" }, title: "This workflow has errors", children: "error" }))] }, corr.workflowId))) }))] }));
 }

package/dist/panes/LogsPane.js

@@ -10,7 +10,7 @@ import { Search, ChevronRight, ChevronDown } from "lucide-react";
 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) }))] }));
+    return (_jsxs("div", { onClick: () => setExpanded((v) => !v), className: "px-2 py-1.5 hover:bg-white/[0.02] rounded-md transition-colors duration-100 cursor-pointer", children: [_jsxs("div", { className: "flex items-start 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 leading-[1.4]", children: formatTs(log.loggedAt) }), showReactor && (_jsx("span", { className: "text-[10px] font-mono text-muted-foreground/40 shrink-0 leading-[1.4]", children: log.reactorId })), _jsx("span", { className: `text-[11px] text-foreground/80 leading-[1.4] ${expanded ? "break-words whitespace-pre-wrap" : "truncate"}`, children: log.message }), _jsx("span", { className: "ml-auto shrink-0 text-muted-foreground/50", 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);
@@ -18,10 +18,10 @@ export function LogsPane({ onInvestigate } = {}) {
     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 [levelFilter, setLevelFilter] = useState(new Set(["debug", "info", "warn", "error"]));
     const [searchText, setSearchText] = useState("");
-    const isCorrelationScope = logsFilter.scope === "correlation" && logsFilter.correlationId != null;
-    const hasFilter = logsFilter.reactorId != null || isCorrelationScope;
+    const isWorkflowScope = logsFilter.scope === "workflow" && logsFilter.workflowId != null;
+    const hasFilter = logsFilter.reactorId != null || isWorkflowScope;
     // Set of event IDs visible within scrubber range
     const visibleEventIds = useMemo(() => {
         if (scrubberStart == null && scrubberEnd == null)
@@ -59,7 +59,7 @@ export function LogsPane({ onInvestigate } = {}) {
             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)
+    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", "error"].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", 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 }), isWorkflowScope && _jsx("span", { className: "ml-1", children: "(all reactors in workflow)" })] })) : (_jsx("span", { children: "All reactors in workflow" })), _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: isWorkflowScope }, i)))] })] }));
 }

package/dist/panes/SubjectChainPane.d.ts

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