causal-inspector 0.1.6 → 0.2.1

package/dist/components/CopyablePayload.js

@@ -22,23 +22,23 @@ function PayloadModal({ formatted, onClose, }) {
         document.addEventListener("keydown", handleKey);
         return () => document.removeEventListener("keydown", handleKey);
     }, [onClose]);
-    return createPortal(_jsx("div", { className: "causal-inspector", children: _jsx("div", { className: "ci-modal-overlay", onClick: onClose, children: _jsxs("div", { className: "ci-modal-content", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { style: { position: "absolute", top: 12, right: 12, display: "flex", gap: 4 }, children: [_jsx("button", { onClick: async () => {
-                                    await copyToClipboard(formatted);
-                                    setCopied(true);
-                                    setTimeout(() => setCopied(false), 1500);
-                                }, className: "ci-modal-btn", title: "Copy payload", children: copied ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }) }), _jsx("button", { onClick: onClose, className: "ci-modal-btn", title: "Close", children: _jsx(X, { size: 14 }) })] }), _jsx("pre", { style: { fontSize: 12, whiteSpace: "pre-wrap" }, children: _jsx(JsonSyntax, { json: formatted }) })] }) }) }), document.body);
+    return createPortal(_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center", style: { background: "rgba(0, 0, 0, 0.6)", backdropFilter: "blur(4px)" }, onClick: onClose, children: _jsxs("div", { className: "relative w-[90vw] max-h-[90vh] overflow-auto rounded-xl border border-border p-5", style: { background: "rgba(15, 15, 20, 0.95)", boxShadow: "0 24px 64px rgba(0, 0, 0, 0.5)" }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "absolute top-3 right-3 flex gap-1", children: [_jsx("button", { onClick: async () => {
+                                await copyToClipboard(formatted);
+                                setCopied(true);
+                                setTimeout(() => setCopied(false), 1500);
+                            }, className: "p-1.5 rounded-md hover:bg-white/[0.05] transition-colors text-xs text-muted-foreground/50 hover:text-foreground", title: "Copy payload", children: copied ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }) }), _jsx("button", { onClick: onClose, className: "p-1.5 rounded-md hover:bg-white/[0.05] transition-colors text-xs text-muted-foreground/50 hover:text-foreground", title: "Close", children: _jsx(X, { size: 14 }) })] }), _jsx("pre", { className: "text-xs whitespace-pre-wrap", children: _jsx(JsonSyntax, { json: formatted }) })] }) }), document.body);
 }
 export function CopyablePayload({ payload, className = "", }) {
     const [copied, setCopied] = useState(false);
     const [modalOpen, setModalOpen] = useState(false);
     const formatted = formatPayload(payload);
-    return (_jsxs("div", { style: { position: "relative" }, className: className, children: [_jsx("pre", { className: "ci-payload", style: { minHeight: 96, maxHeight: "80vh" }, children: _jsx(JsonSyntax, { json: formatted }) }), _jsxs("div", { style: { position: "absolute", top: 8, right: 8, zIndex: 10, display: "flex", gap: 4 }, children: [_jsx("button", { onClick: (e) => {
+    return (_jsxs("div", { className: `relative ${className}`, children: [_jsx("pre", { className: "p-2.5 text-[10px] rounded-md border border-border overflow-auto whitespace-pre-wrap resize-y min-h-24 max-h-[80vh]", style: { background: "rgba(255, 255, 255, 0.015)" }, children: _jsx(JsonSyntax, { json: formatted }) }), _jsxs("div", { className: "absolute top-2 right-2 z-10 flex gap-1", children: [_jsx("button", { onClick: (e) => {
                             e.stopPropagation();
                             setModalOpen(true);
-                        }, className: "ci-payload-btn", title: "Expand", children: _jsx(Maximize2, { size: 12 }) }), _jsx("button", { onClick: async (e) => {
+                        }, className: "p-1 rounded-md border border-border hover:bg-white/[0.05] transition-all text-[10px] text-muted-foreground/40 hover:text-muted-foreground", style: { background: "rgba(10, 10, 15, 0.8)", backdropFilter: "blur(4px)" }, title: "Expand", children: _jsx(Maximize2, { size: 12 }) }), _jsx("button", { onClick: async (e) => {
                             e.stopPropagation();
                             await copyToClipboard(formatted);
                             setCopied(true);
                             setTimeout(() => setCopied(false), 1500);
-                        }, className: "ci-payload-btn", title: "Copy", children: copied ? _jsx(Check, { size: 12 }) : _jsx(Copy, { size: 12 }) })] }), modalOpen && (_jsx(PayloadModal, { formatted: formatted, onClose: () => setModalOpen(false) }))] }));
+                        }, className: "p-1 rounded-md border border-border hover:bg-white/[0.05] transition-all text-[10px] text-muted-foreground/40 hover:text-muted-foreground", style: { background: "rgba(10, 10, 15, 0.8)", backdropFilter: "blur(4px)" }, title: "Copy", children: copied ? _jsx(Check, { size: 12 }) : _jsx(Copy, { size: 12 }) })] }), modalOpen && (_jsx(PayloadModal, { formatted: formatted, onClose: () => setModalOpen(false) }))] }));
 }

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

@@ -4,17 +4,14 @@ import { Search, X } from "lucide-react";
 export function FilterBar() {
     const filters = useSelector((s) => s.filters);
     const dispatch = useDispatch();
-    return (_jsxs("div", { className: "ci-row ci-surface", style: { flexWrap: "wrap", gap: 8, padding: "8px 12px", borderBottom: "1px solid var(--ci-border)" }, children: [_jsxs("div", { className: "ci-row", style: { position: "relative" }, children: [_jsx(Search, { size: 12, style: { position: "absolute", left: 10, color: "var(--ci-text-muted)", pointerEvents: "none" } }), _jsx("input", { type: "text", placeholder: "search events...", value: filters.search, onChange: (e) => dispatch({
+    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: "ci-input", style: { paddingLeft: 28, paddingRight: 8, paddingTop: 6, paddingBottom: 6, fontSize: 12, width: 256 } })] }), _jsx("span", { className: "ci-divider-h" }), _jsx("label", { style: { fontSize: 10, color: "var(--ci-text-muted)", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "From" }), _jsx("input", { type: "date", value: filters.from ?? "", onChange: (e) => dispatch({
-                    type: "ui/filter_changed",
-                    payload: { from: e.target.value || null },
-                }), className: "ci-input", style: { padding: "6px 8px", fontSize: 12, width: 128 } }), _jsx("label", { style: { fontSize: 10, color: "var(--ci-text-muted)", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "To" }), _jsx("input", { type: "date", value: filters.to ?? "", onChange: (e) => dispatch({
-                    type: "ui/filter_changed",
-                    payload: { to: e.target.value || null },
-                }), className: "ci-input", style: { padding: "6px 8px", fontSize: 12, width: 128 } }), filters.correlationId && (_jsxs(_Fragment, { children: [_jsx("span", { className: "ci-divider-h" }), _jsxs("span", { className: "ci-badge ci-badge--purple", 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 },
-                                }), style: { color: "inherit", background: "none", border: "none", cursor: "pointer", padding: 0, transition: "color 150ms" }, children: _jsx(X, { size: 10 }) })] })] }))] }));
+                                    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 },
+                                }), className: "hover:text-foreground transition-colors", children: _jsx(X, { size: 10 }) })] })] }))] }));
 }

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/components/JsonSyntax.js

@@ -9,23 +9,23 @@ function tokenizeJson(json) {
             tokens.push({ text: json.slice(lastIndex, match.index), color: "" });
         }
         if (match[1] !== undefined) {
-            tokens.push({ text: match[1], color: "ci-json-key" });
-            tokens.push({ text: ":", color: "ci-json-punct" });
+            tokens.push({ text: match[1], color: "text-blue-400" });
+            tokens.push({ text: ":", color: "text-zinc-500" });
         }
         else if (match[2] !== undefined) {
-            tokens.push({ text: match[2], color: "ci-json-string" });
+            tokens.push({ text: match[2], color: "text-green-400" });
         }
         else if (match[3] !== undefined) {
-            tokens.push({ text: match[3], color: "ci-json-number" });
+            tokens.push({ text: match[3], color: "text-amber-400" });
         }
         else if (match[4] !== undefined) {
-            tokens.push({ text: match[4], color: "ci-json-bool" });
+            tokens.push({ text: match[4], color: "text-purple-400" });
         }
         else if (match[5] !== undefined) {
-            tokens.push({ text: match[5], color: "ci-json-null" });
+            tokens.push({ text: match[5], color: "text-zinc-500" });
         }
         else if (match[6] !== undefined) {
-            tokens.push({ text: match[6], color: "ci-json-punct" });
+            tokens.push({ text: match[6], color: "text-zinc-500" });
         }
         lastIndex = re.lastIndex;
     }
@@ -36,5 +36,5 @@ function tokenizeJson(json) {
 }
 export function JsonSyntax({ json }) {
     const tokens = tokenizeJson(json);
-    return (_jsx(_Fragment, { children: tokens.map((t, i) => (_jsx("span", { className: t.color || undefined, children: t.text }, i))) }));
+    return (_jsx(_Fragment, { children: tokens.map((t, i) => (_jsx("span", { className: t.color, children: t.text }, i))) }));
 }

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, INSPECTOR_REACTOR_ATTEMPTS, } 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,49 +68,49 @@ 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, attemptData] = 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 }),
-                    transport.query(INSPECTOR_REACTOR_ATTEMPTS, { correlationId }),
+                    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: {
-                        correlationId,
+                        workflowId,
                         attempts: attemptData.inspectorReactorAttempts,
                     },
                 });
@@ -118,32 +119,37 @@ export const createQueryEngine = (transport) => {
                 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);
             }
         };
-        const fetchCorrelations = async (opts) => {
+        let workflowCursor = null;
+        const fetchWorkflows = async (opts) => {
+            const append = opts?.append ?? false;
+            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: 100,
+                    limit: 50,
+                    cursor: cursor || undefined,
                 });
+                workflowCursor = data.inspectorWorkflows.nextCursor;
                 dispatch({
-                    type: "events/correlations_loaded",
+                    type: "events/workflows_loaded",
                     payload: {
-                        correlations: data.inspectorCorrelations,
-                        hasMore: false,
-                        append: false,
+                        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 () => {
@@ -182,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) {
@@ -193,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
@@ -231,22 +287,45 @@ export const createQueryEngine = (transport) => {
                     case "ui/filter_changed":
                         fetchEvents();
                         break;
-                    case "ui/load_more_correlations_requested":
-                        fetchCorrelations();
+                    case "ui/load_more_workflows_requested":
+                        fetchWorkflows({ append: true });
                         break;
-                    case "ui/correlations_requested":
-                        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;
             }
         },