causal-inspector 0.1.5 → 0.2.0

package/dist/CausalInspector.d.ts

@@ -1,3 +1,4 @@
+import type { SubjectChainMode } from "./types";
 import "./CausalInspector.css";
 export type CausalInspectorProps = {
     /** GraphQL endpoint URL (relative or absolute). Queries POST here, WS connects to {endpoint}/ws */
@@ -9,5 +10,11 @@ export type CausalInspectorProps = {
     };
     /** CSS class for the container */
     className?: string;
+    /** Pre-navigate to a specific entity's subject chain on mount */
+    initialSubject?: {
+        aggregateType: string;
+        aggregateId: string;
+        mode?: SubjectChainMode;
+    };
 };
-export declare function CausalInspector({ endpoint, fetchOptions, className, }: CausalInspectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CausalInspector({ endpoint, fetchOptions, className, initialSubject, }: CausalInspectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/CausalInspector.js

@@ -8,11 +8,12 @@ import { createInspectorEngine } from "./engines";
 import { useSelector, useDispatch } from "./machine";
 import { TimelinePane } from "./panes/TimelinePane";
 import { CausalTreePane } from "./panes/CausalTreePane";
+import { SubjectChainPane } from "./panes/SubjectChainPane";
 import { CausalFlowPane } from "./panes/CausalFlowPane";
 import { LogsPane } from "./panes/LogsPane";
 import { AggregateTimelinePane } from "./panes/AggregateTimelinePane";
 import { WaterfallPane } from "./panes/WaterfallPane";
-import { CorrelationExplorerPane } from "./panes/CorrelationExplorerPane";
+import { WorkflowExplorerPane } from "./panes/WorkflowExplorerPane";
 import { GlobalScrubber } from "./components/GlobalScrubber";
 import "./CausalInspector.css";
 // ── Transport ─────────────────────────────────────────────────
@@ -139,9 +140,14 @@ const PANE_REGISTRY = [
         render: () => _jsx(WaterfallPane, {}),
     },
     {
-        name: "Correlations",
-        component: "correlations",
-        render: () => _jsx(CorrelationExplorerPane, {}),
+        name: "Workflows",
+        component: "workflows",
+        render: () => _jsx(WorkflowExplorerPane, {}),
+    },
+    {
+        name: "Subject Chain",
+        component: "subject-chain",
+        render: () => _jsx(SubjectChainPane, {}),
     },
 ];
 // ── Helpers ───────────────────────────────────────────────────
@@ -158,8 +164,9 @@ function findTab(model, component) {
 // ── InspectorLayout (inner component) ─────────────────────────
 function InspectorLayout() {
     const paneLayout = useSelector((s) => s.paneLayout);
-    const flowCorrelationId = useSelector((s) => s.flowCorrelationId);
+    const flowWorkflowId = useSelector((s) => s.flowWorkflowId);
     const selectedSeq = useSelector((s) => s.selectedSeq);
+    const subjectType = useSelector((s) => s.subjectType);
     const dispatch = useDispatch();
     const modelRef = useRef(null);
     if (!modelRef.current) {
@@ -189,9 +196,13 @@ function InspectorLayout() {
             addTab("causal-tree", "Causal Tree");
     }, [selectedSeq, addTab]);
     useEffect(() => {
-        if (flowCorrelationId)
+        if (flowWorkflowId)
             addTab("causal-flow", "Flow");
-    }, [flowCorrelationId, addTab]);
+    }, [flowWorkflowId, addTab]);
+    useEffect(() => {
+        if (subjectType)
+            addTab("subject-chain", "Subject Chain");
+    }, [subjectType, addTab]);
     const factory = useCallback((node) => {
         const component = node.getComponent();
         const pane = PANE_REGISTRY.find((p) => p.component === component);
@@ -249,10 +260,22 @@ function InspectorLayout() {
 }
 // ── CausalInspector (public API) ──────────────────────────────
 const savedLayout = loadSavedLayout();
-export function CausalInspector({ endpoint, fetchOptions, className, }) {
+export function CausalInspector({ endpoint, fetchOptions, className, initialSubject, }) {
     const transport = useMemo(() => createTransport(endpoint, fetchOptions), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [endpoint]);
     const createEngine = useMemo(() => createInspectorEngine(transport, storage), [transport]);
-    return (_jsx("div", { className: `causal-inspector${className ? ` ${className}` : ""}`, children: _jsx(CausalInspectorProvider, { createEngine: createEngine, initialState: savedLayout ? { paneLayout: savedLayout } : undefined, children: _jsx(InspectorLayout, {}) }) }));
+    const initialState = useMemo(() => {
+        const base = savedLayout ? { paneLayout: savedLayout } : undefined;
+        if (!initialSubject)
+            return base;
+        return {
+            ...base,
+            subjectType: initialSubject.aggregateType,
+            subjectId: initialSubject.aggregateId,
+            subjectMode: initialSubject.mode ?? "both",
+            subjectChainLoading: true,
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return (_jsx("div", { className: `causal-inspector${className ? ` ${className}` : ""}`, children: _jsx(CausalInspectorProvider, { createEngine: createEngine, initialState: initialState, children: _jsx(InspectorLayout, {}) }) }));
 }

package/dist/components/EffectList.d.ts

@@ -0,0 +1,4 @@
+import type { InspectorEffect } from "../types";
+export declare function EffectList({ effects }: {
+    effects: InspectorEffect[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/EffectList.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+function EffectRow({ effect }) {
+    const [expanded, setExpanded] = useState(false);
+    const valueStr = JSON.stringify(effect.value, null, 2);
+    const preview = valueStr.length > 120 ? valueStr.slice(0, 120) + "…" : valueStr;
+    return (_jsxs("div", { className: "py-1", children: [_jsxs("button", { onClick: () => setExpanded((v) => !v), className: "flex items-start gap-1.5 w-full text-left group/effect", children: [_jsx("span", { className: "mt-0.5 text-muted-foreground/40 shrink-0", children: expanded ? _jsx(ChevronDown, { size: 10 }) : _jsx(ChevronRight, { size: 10 }) }), _jsx("span", { className: "text-[9px] font-mono text-indigo-400/70 shrink-0", children: effect.consumer }), _jsx("span", { className: "text-[9px] text-muted-foreground/40 shrink-0", children: "\u00B7" }), _jsx("span", { className: "text-[9px] font-mono text-foreground/70 shrink-0", children: effect.label }), !expanded && (_jsx("span", { className: "text-[9px] font-mono text-muted-foreground/50 truncate min-w-0", children: preview }))] }), expanded && (_jsx("pre", { className: "mt-1 ml-4 text-[9px] font-mono text-foreground/60 whitespace-pre-wrap break-all bg-white/[0.02] rounded p-1.5 border border-border/50", children: valueStr }))] }));
+}
+export function EffectList({ effects }) {
+    if (effects.length === 0) {
+        return (_jsx("div", { className: "py-1 text-[9px] text-muted-foreground/40 italic ml-3", children: "No effects" }));
+    }
+    return (_jsx("div", { className: "ml-3 border-l border-indigo-500/15 pl-2", children: effects.map((e, i) => (_jsx(EffectRow, { effect: e }, `${e.consumer}:${e.label}:${i}`))) }));
+}

package/dist/components/FilterBar.js

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

package/dist/components/GlobalScrubber.js

@@ -58,15 +58,15 @@ function RangeSlider({ seqs, start, end, onStartChange, onEndChange, }) {
 // ---------------------------------------------------------------------------
 // Context label
 // ---------------------------------------------------------------------------
-function getContextLabel(flowCorrelationId, flowSelection) {
-    if (!flowCorrelationId)
+function getContextLabel(flowWorkflowId, flowSelection) {
+    if (!flowWorkflowId)
         return "All events";
     if (flowSelection) {
         if (flowSelection.kind === "event-type")
             return `${flowSelection.name} events`;
         return `Reactor ${flowSelection.reactorId}`;
     }
-    return `Flow ${flowCorrelationId.slice(0, 8)}`;
+    return `Flow ${flowWorkflowId.slice(0, 8)}`;
 }
 // ---------------------------------------------------------------------------
 // GlobalScrubber
@@ -76,12 +76,12 @@ export function GlobalScrubber() {
     const scrubberEnd = useSelector((s) => s.scrubberEnd);
     const playing = useSelector((s) => s.scrubberPlaying);
     const speed = useSelector((s) => s.scrubberSpeed);
-    const flowCorrelationId = useSelector((s) => s.flowCorrelationId);
+    const flowWorkflowId = useSelector((s) => s.flowWorkflowId);
     const flowSelection = useSelector((s) => s.flowSelection);
     const flowData = useSelector((s) => s.flowData);
     const events = useSelector((s) => s.events);
     const dispatch = useDispatch();
-    const seqs = useMemo(() => getScrubberSequence({ flowCorrelationId, flowData, flowSelection, events }), [flowCorrelationId, flowData, flowSelection, events]);
+    const seqs = useMemo(() => getScrubberSequence({ flowWorkflowId, flowData, flowSelection, events }), [flowWorkflowId, flowData, flowSelection, events]);
     const endVal = scrubberEnd ?? (seqs[seqs.length - 1] ?? 0);
     const isAtEnd = scrubberEnd == null || (seqs.length > 0 && scrubberEnd >= seqs[seqs.length - 1]);
     // Count events in range
@@ -139,7 +139,7 @@ export function GlobalScrubber() {
     const disabled = seqs.length < 2;
     const speedLabel = speed <= 50 ? "4x" : speed <= 150 ? "2x" : speed <= 300 ? "1x" : "0.5x";
     const btnClass = `p-1.5 rounded-md transition-all duration-150 ${disabled ? "text-muted-foreground/20 cursor-default" : "text-muted-foreground/60 hover:text-foreground hover:bg-white/[0.05]"}`;
-    const contextLabel = getContextLabel(flowCorrelationId, flowSelection);
+    const contextLabel = getContextLabel(flowWorkflowId, flowSelection);
     return (_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-t border-border shrink-0", style: { background: "rgba(15, 15, 20, 0.6)", backdropFilter: "blur(8px)" }, children: [_jsx("span", { className: "text-[9px] font-medium text-muted-foreground/40 uppercase tracking-wider shrink-0 max-w-[120px] truncate", title: contextLabel, children: contextLabel }), _jsx("button", { onClick: disabled ? undefined : reset, className: btnClass, title: "Reset to start", children: _jsx(RotateCcw, { size: 12 }) }), _jsx("button", { onClick: disabled ? undefined : stepBack, className: btnClass, title: "Step back", children: _jsx(SkipBack, { size: 12 }) }), _jsx("button", { onClick: disabled ? undefined : togglePlay, className: `p-1.5 rounded-md transition-all duration-150 ${disabled
                     ? "text-muted-foreground/20 cursor-default"
                     : playing

package/dist/engines/query.js

@@ -1,4 +1,4 @@
-import { INSPECTOR_EVENTS, INSPECTOR_CAUSAL_TREE, INSPECTOR_CAUSAL_FLOW, INSPECTOR_CORRELATIONS, INSPECTOR_REACTOR_DEPENDENCIES, INSPECTOR_AGGREGATE_KEYS, INSPECTOR_AGGREGATE_LIFECYCLE, INSPECTOR_REACTOR_LOGS_BY_CORRELATION, INSPECTOR_REACTOR_DESCRIPTIONS, INSPECTOR_REACTOR_DESCRIPTION_SNAPSHOTS, INSPECTOR_AGGREGATE_TIMELINE, INSPECTOR_REACTOR_OUTCOMES, } from "../queries";
+import { INSPECTOR_EVENTS, INSPECTOR_CAUSAL_TREE, INSPECTOR_CAUSAL_FLOW, INSPECTOR_WORKFLOWS, INSPECTOR_REACTOR_DEPENDENCIES, INSPECTOR_AGGREGATE_KEYS, INSPECTOR_AGGREGATE_LIFECYCLE, INSPECTOR_REACTOR_LOGS_BY_WORKFLOW, INSPECTOR_REACTOR_DESCRIPTIONS, INSPECTOR_REACTOR_DESCRIPTION_SNAPSHOTS, INSPECTOR_AGGREGATE_TIMELINE, INSPECTOR_REACTOR_OUTCOMES, INSPECTOR_REACTOR_ATTEMPTS, INSPECTOR_SUBJECT_CHAIN, INSPECTOR_EFFECTS_FOR_EVENT, } from "../queries";
 /**
  * Query engine — fetches data in response to state transitions.
  *
@@ -8,10 +8,11 @@ import { INSPECTOR_EVENTS, INSPECTOR_CAUSAL_TREE, INSPECTOR_CAUSAL_FLOW, INSPECT
 export const createQueryEngine = (transport) => {
     return (dispatch, getState) => {
         let flowPollTimer = null;
-        let correlationPollTimer = null;
+        let workflowPollTimer = null;
         // Stale-response guards
         let activeCausalSeq = null;
-        let activeFlowCorrelationId = null;
+        let activeFlowWorkflowId = null;
+        let activeSubjectKey = null;
         const fetchEvents = async () => {
             const state = getState();
             const cursor = state.events.length > 0
@@ -22,7 +23,7 @@ export const createQueryEngine = (transport) => {
                     limit: 50,
                     cursor,
                     search: state.filters.search || undefined,
-                    correlationId: state.filters.correlationId || undefined,
+                    workflowId: state.filters.workflowId || undefined,
                     aggregateKey: state.filters.aggregateKey || undefined,
                 });
                 dispatch({
@@ -52,11 +53,11 @@ export const createQueryEngine = (transport) => {
                 console.error("[causal-inspector] fetch causal tree failed:", e);
             }
         };
-        const fetchFlow = async (correlationId) => {
-            activeFlowCorrelationId = correlationId;
+        const fetchFlow = async (workflowId) => {
+            activeFlowWorkflowId = workflowId;
             try {
-                const data = await transport.query(INSPECTOR_CAUSAL_FLOW, { correlationId });
-                if (activeFlowCorrelationId !== correlationId)
+                const data = await transport.query(INSPECTOR_CAUSAL_FLOW, { workflowId });
+                if (activeFlowWorkflowId !== workflowId)
                     return; // stale
                 dispatch({
                     type: "events/flow_loaded",
@@ -67,80 +68,88 @@ export const createQueryEngine = (transport) => {
                 console.error("[causal-inspector] fetch flow failed:", e);
             }
         };
-        const fetchFlowMetadata = async (correlationId) => {
+        const fetchFlowMetadata = async (workflowId) => {
             try {
-                const [descData, snapshotData, aggTimelineData, outcomeData] = await Promise.all([
-                    transport.query(INSPECTOR_REACTOR_DESCRIPTIONS, { correlationId }),
-                    transport.query(INSPECTOR_REACTOR_DESCRIPTION_SNAPSHOTS, { correlationId }),
-                    transport.query(INSPECTOR_AGGREGATE_TIMELINE, { correlationId }),
-                    transport.query(INSPECTOR_REACTOR_OUTCOMES, { correlationId }),
+                const [descData, snapshotData, aggTimelineData, outcomeData, attemptData] = await Promise.all([
+                    transport.query(INSPECTOR_REACTOR_DESCRIPTIONS, { workflowId }),
+                    transport.query(INSPECTOR_REACTOR_DESCRIPTION_SNAPSHOTS, { workflowId }),
+                    transport.query(INSPECTOR_AGGREGATE_TIMELINE, { workflowId }),
+                    transport.query(INSPECTOR_REACTOR_OUTCOMES, { workflowId }),
+                    transport.query(INSPECTOR_REACTOR_ATTEMPTS, { workflowId }),
                 ]);
-                if (activeFlowCorrelationId !== correlationId)
+                if (activeFlowWorkflowId !== workflowId)
                     return; // stale
                 dispatch({
                     type: "events/descriptions_loaded",
                     payload: {
-                        correlationId,
+                        workflowId,
                         descriptions: descData.inspectorReactorDescriptions,
                     },
                 });
                 dispatch({
                     type: "events/description_snapshots_loaded",
                     payload: {
-                        correlationId,
+                        workflowId,
                         snapshots: snapshotData.inspectorReactorDescriptionSnapshots,
                     },
                 });
                 dispatch({
                     type: "events/aggregate_timeline_loaded",
                     payload: {
-                        correlationId,
+                        workflowId,
                         entries: aggTimelineData.inspectorAggregateTimeline,
                     },
                 });
                 dispatch({
                     type: "events/outcomes_loaded",
                     payload: {
-                        correlationId,
+                        workflowId,
                         outcomes: outcomeData.inspectorReactorOutcomes,
                     },
                 });
+                dispatch({
+                    type: "events/attempts_loaded",
+                    payload: {
+                        workflowId,
+                        attempts: attemptData.inspectorReactorAttempts,
+                    },
+                });
             }
             catch (e) {
                 console.error("[causal-inspector] fetch flow metadata failed:", e);
             }
         };
-        const fetchLogs = async (correlationId) => {
+        const fetchLogs = async (workflowId) => {
             try {
-                const data = await transport.query(INSPECTOR_REACTOR_LOGS_BY_CORRELATION, { correlationId });
-                dispatch({ type: "events/logs_loaded", payload: data.inspectorReactorLogsByCorrelation });
+                const data = await transport.query(INSPECTOR_REACTOR_LOGS_BY_WORKFLOW, { workflowId });
+                dispatch({ type: "events/logs_loaded", payload: data.inspectorReactorLogsByWorkflow });
             }
             catch (e) {
                 console.error("[causal-inspector] fetch logs failed:", e);
             }
         };
-        let correlationCursor = null;
-        const fetchCorrelations = async (opts) => {
+        let workflowCursor = null;
+        const fetchWorkflows = async (opts) => {
             const append = opts?.append ?? false;
-            const cursor = append ? correlationCursor : undefined;
+            const cursor = append ? workflowCursor : undefined;
             try {
-                const data = await transport.query(INSPECTOR_CORRELATIONS, {
+                const data = await transport.query(INSPECTOR_WORKFLOWS, {
                     search: opts?.search || undefined,
                     limit: 50,
                     cursor: cursor || undefined,
                 });
-                correlationCursor = data.inspectorCorrelations.nextCursor;
+                workflowCursor = data.inspectorWorkflows.nextCursor;
                 dispatch({
-                    type: "events/correlations_loaded",
+                    type: "events/workflows_loaded",
                     payload: {
-                        correlations: data.inspectorCorrelations.correlations,
-                        hasMore: data.inspectorCorrelations.nextCursor != null,
+                        workflows: data.inspectorWorkflows.workflows,
+                        hasMore: data.inspectorWorkflows.nextCursor != null,
                         append,
                     },
                 });
             }
             catch (e) {
-                console.error("[causal-inspector] fetch correlations failed:", e);
+                console.error("[causal-inspector] fetch workflows failed:", e);
             }
         };
         const fetchReactorDependencies = async () => {
@@ -179,10 +188,54 @@ export const createQueryEngine = (transport) => {
                 console.error("[causal-inspector] fetch aggregate lifecycle failed:", e);
             }
         };
-        const startFlowPolling = (correlationId) => {
+        const fetchSubjectChain = async (aggregateType, aggregateId, mode, cursor) => {
+            const key = `${aggregateType}:${aggregateId}:${mode}`;
+            activeSubjectKey = key;
+            try {
+                const data = await transport.query(INSPECTOR_SUBJECT_CHAIN, {
+                    aggregateType,
+                    aggregateId,
+                    mode: mode.toUpperCase(),
+                    limit: 50,
+                    cursor: cursor ?? undefined,
+                });
+                if (activeSubjectKey !== key)
+                    return; // navigated away
+                const page = data.inspectorSubjectChain;
+                dispatch({
+                    type: "events/subject_chain_loaded",
+                    payload: {
+                        events: page.events,
+                        hasMore: page.nextCursor != null,
+                        cursor: page.nextCursor,
+                        depthCapped: page.depthCapReached,
+                        append: cursor != null,
+                    },
+                });
+            }
+            catch (e) {
+                console.error("[causal-inspector] fetch subject chain failed:", e);
+            }
+        };
+        const fetchEventEffects = async (eventId) => {
+            const state = getState();
+            if (eventId in state.expandedEffects)
+                return; // already loaded
+            try {
+                const data = await transport.query(INSPECTOR_EFFECTS_FOR_EVENT, { eventId });
+                dispatch({
+                    type: "events/event_effects_loaded",
+                    payload: { eventId, effects: data.inspectorEffectsForEvent },
+                });
+            }
+            catch (e) {
+                console.error("[causal-inspector] fetch event effects failed:", e);
+            }
+        };
+        const startFlowPolling = (workflowId) => {
             stopFlowPolling();
-            fetchFlowMetadata(correlationId);
-            flowPollTimer = setInterval(() => fetchFlowMetadata(correlationId), 5000);
+            fetchFlowMetadata(workflowId);
+            flowPollTimer = setInterval(() => fetchFlowMetadata(workflowId), 5000);
         };
         const stopFlowPolling = () => {
             if (flowPollTimer) {
@@ -190,27 +243,33 @@ export const createQueryEngine = (transport) => {
                 flowPollTimer = null;
             }
         };
-        const stopCorrelationPolling = () => {
-            if (correlationPollTimer) {
-                clearInterval(correlationPollTimer);
-                correlationPollTimer = null;
+        const stopWorkflowPolling = () => {
+            if (workflowPollTimer) {
+                clearInterval(workflowPollTimer);
+                workflowPollTimer = null;
             }
         };
         // Initial load
         fetchEvents();
-        fetchCorrelations();
+        fetchWorkflows();
         fetchReactorDependencies();
         fetchAggregateKeys();
         return {
             handleEvent: (event, curr, prev) => {
                 // ── State-reactive: navigation transitions ──
-                if (curr.flowCorrelationId !== prev.flowCorrelationId) {
-                    if (curr.flowCorrelationId) {
+                // Subject changed → fetch first page
+                if (curr.subjectType !== prev.subjectType || curr.subjectId !== prev.subjectId) {
+                    if (curr.subjectType && curr.subjectId) {
+                        fetchSubjectChain(curr.subjectType, curr.subjectId, curr.subjectMode, null);
+                    }
+                }
+                if (curr.flowWorkflowId !== prev.flowWorkflowId) {
+                    if (curr.flowWorkflowId) {
                         // Flow opened
-                        fetchFlow(curr.flowCorrelationId);
-                        startFlowPolling(curr.flowCorrelationId);
-                        fetchLogs(curr.flowCorrelationId);
-                        stopCorrelationPolling();
+                        fetchFlow(curr.flowWorkflowId);
+                        startFlowPolling(curr.flowWorkflowId);
+                        fetchLogs(curr.flowWorkflowId);
+                        stopWorkflowPolling();
                     }
                     else {
                         // Flow closed
@@ -228,23 +287,45 @@ export const createQueryEngine = (transport) => {
                     case "ui/filter_changed":
                         fetchEvents();
                         break;
-                    case "ui/load_more_correlations_requested":
-                        fetchCorrelations({ append: true });
+                    case "ui/load_more_workflows_requested":
+                        fetchWorkflows({ append: true });
                         break;
-                    case "ui/correlations_requested":
-                        correlationCursor = null;
-                        fetchCorrelations({ search: event.payload.search });
-                        stopCorrelationPolling();
-                        correlationPollTimer = setInterval(() => fetchCorrelations({ search: event.payload.search }), 5000);
+                    case "ui/workflows_requested":
+                        workflowCursor = null;
+                        fetchWorkflows({ search: event.payload.search });
+                        stopWorkflowPolling();
+                        workflowPollTimer = setInterval(() => fetchWorkflows({ search: event.payload.search }), 5000);
                         break;
                     case "ui/aggregate_lifecycle_requested":
                         fetchAggregateLifecycle(event.payload.aggregateKey);
                         break;
+                    case "ui/subject_selected": {
+                        const { aggregateType, aggregateId, mode = "both" } = event.payload;
+                        fetchSubjectChain(aggregateType, aggregateId, mode, null);
+                        break;
+                    }
+                    case "ui/subject_mode_changed": {
+                        const state = getState();
+                        if (state.subjectType && state.subjectId) {
+                            fetchSubjectChain(state.subjectType, state.subjectId, event.payload.mode, null);
+                        }
+                        break;
+                    }
+                    case "ui/subject_chain_load_more": {
+                        const state = getState();
+                        if (state.subjectType && state.subjectId) {
+                            fetchSubjectChain(state.subjectType, state.subjectId, state.subjectMode, state.subjectChainCursor);
+                        }
+                        break;
+                    }
+                    case "ui/event_effects_requested":
+                        fetchEventEffects(event.payload.eventId);
+                        break;
                 }
             },
             dispose: () => {
                 stopFlowPolling();
-                stopCorrelationPolling();
+                stopWorkflowPolling();
             },
         };
     };

package/dist/engines/scrubber.js

@@ -60,7 +60,7 @@ export const createScrubberEngine = (dispatch, getState) => {
                 start();
             }
             // Flow changed → stop playback
-            if (curr.flowCorrelationId !== prev.flowCorrelationId) {
+            if (curr.flowWorkflowId !== prev.flowWorkflowId) {
                 stop();
             }
         },

package/dist/engines/url.d.ts

@@ -4,8 +4,11 @@ import type { InspectorState } from "../state";
 /**
  * URL engine — keeps the browser URL in sync with navigation state.
  *
- * For user-initiated actions (ui/flow_opened, etc.), the reducer updates
- * state directly. This engine just writes the URL as a side effect.
+ * Mutual exclusion: `?subject=` and `?workflow=` never coexist in the URL.
+ * Navigating to a subject clears the workflow param and vice versa.
+ *
+ * For user-initiated actions, the reducer updates state directly.
+ * This engine writes the URL as a side effect.
  *
  * For browser-initiated navigation (back/forward), this engine dispatches
  * location/changed so the reducer can update state from the URL.

package/dist/engines/url.js

@@ -1,44 +1,57 @@
 function parseUrl() {
     const params = new URLSearchParams(window.location.search);
+    const subject = params.get("subject");
+    const subjectModeRaw = params.get("subjectMode");
+    const subjectMode = subjectModeRaw === "stream" || subjectModeRaw === "descendants" || subjectModeRaw === "both"
+        ? subjectModeRaw
+        : null;
+    if (subject) {
+        return { workflowId: null, handler: null, subject, subjectMode };
+    }
     return {
-        correlationId: params.get("correlation"),
+        workflowId: params.get("workflow"),
         handler: params.get("handler"),
+        subject: null,
+        subjectMode: null,
     };
 }
-function buildSearch(correlationId, handler) {
-    const params = new URLSearchParams(window.location.search);
-    if (correlationId)
-        params.set("correlation", correlationId);
-    else {
-        params.delete("correlation");
-        params.delete("handler");
+function buildSearch(workflowId, handler) {
+    const params = new URLSearchParams();
+    if (workflowId) {
+        params.set("workflow", workflowId);
+        if (handler)
+            params.set("handler", handler);
     }
-    if (handler && correlationId)
-        params.set("handler", handler);
-    else
-        params.delete("handler");
     const search = params.toString();
     return search ? `${window.location.pathname}?${search}` : window.location.pathname;
 }
+function buildSubjectSearch(aggregateType, aggregateId, mode) {
+    const params = new URLSearchParams();
+    params.set("subject", `${aggregateType}:${aggregateId}`);
+    if (mode !== "both")
+        params.set("subjectMode", mode);
+    return `${window.location.pathname}?${params.toString()}`;
+}
 /**
  * URL engine — keeps the browser URL in sync with navigation state.
  *
- * For user-initiated actions (ui/flow_opened, etc.), the reducer updates
- * state directly. This engine just writes the URL as a side effect.
+ * Mutual exclusion: `?subject=` and `?workflow=` never coexist in the URL.
+ * Navigating to a subject clears the workflow param and vice versa.
+ *
+ * For user-initiated actions, the reducer updates state directly.
+ * This engine writes the URL as a side effect.
  *
  * For browser-initiated navigation (back/forward), this engine dispatches
  * location/changed so the reducer can update state from the URL.
  */
 export const createUrlEngine = (dispatch, _getState) => {
-    // Popstate — browser back/forward
     const onPopState = () => {
         dispatch({ type: "location/changed", payload: parseUrl() });
     };
     window.addEventListener("popstate", onPopState);
-    // Seed from current URL on init — deferred so the Machine constructor finishes first.
     queueMicrotask(() => {
         const initial = parseUrl();
-        if (initial.correlationId || initial.handler) {
+        if (initial.workflowId || initial.handler || initial.subject) {
             dispatch({ type: "location/changed", payload: initial });
         }
     });
@@ -46,21 +59,36 @@ export const createUrlEngine = (dispatch, _getState) => {
         handleEvent: (event) => {
             switch (event.type) {
                 case "ui/flow_opened":
-                    window.history.pushState(null, "", buildSearch(event.payload.correlationId, null));
+                    window.history.pushState(null, "", buildSearch(event.payload.workflowId, null));
                     break;
                 case "ui/flow_closed":
                     window.history.pushState(null, "", buildSearch(null, null));
                     break;
                 case "ui/filter_changed": {
                     const payload = event.payload;
-                    if (payload.correlationId !== undefined) {
-                        window.history.pushState(null, "", buildSearch(payload.correlationId, null));
+                    if (payload.workflowId !== undefined) {
+                        window.history.pushState(null, "", buildSearch(payload.workflowId, null));
                     }
                     break;
                 }
                 case "ui/handler_selected":
-                    // Replace rather than push — handler changes within a flow are fine as one history entry
-                    window.history.replaceState(null, "", buildSearch(new URLSearchParams(window.location.search).get("correlation"), event.payload.reactorId));
+                    window.history.replaceState(null, "", buildSearch(new URLSearchParams(window.location.search).get("workflow"), event.payload.reactorId));
+                    break;
+                case "ui/subject_selected":
+                    window.history.pushState(null, "", buildSubjectSearch(event.payload.aggregateType, event.payload.aggregateId, event.payload.mode ?? "both"));
+                    break;
+                case "ui/subject_mode_changed":
+                    window.history.replaceState(null, "", (() => {
+                        const params = new URLSearchParams(window.location.search);
+                        const existing = params.get("subject");
+                        if (!existing)
+                            return window.location.href;
+                        if (event.payload.mode === "both")
+                            params.delete("subjectMode");
+                        else
+                            params.set("subjectMode", event.payload.mode);
+                        return `${window.location.pathname}?${params.toString()}`;
+                    })());
                     break;
             }
         },