causal-inspector 0.1.6 → 0.2.0

package/dist/panes/CorrelationExplorerPane.js

@@ -15,37 +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: "ci-col", children: [_jsx("div", { className: "ci-surface", style: { padding: "10px 12px", borderBottom: "1px solid var(--ci-border)" }, children: _jsx("input", { type: "text", placeholder: "Search by correlation ID or event type...", value: search, onChange: (e) => handleSearchChange(e.target.value), className: "ci-input", style: { width: "100%", padding: "6px 12px", fontSize: 12 } }) }), _jsxs("div", { className: "ci-row ci-header", style: { gap: 8, padding: "8px 12px", borderBottom: "1px solid var(--ci-border)", letterSpacing: "0.08em", fontSize: 9 }, children: [_jsx("span", { style: { width: 112, flexShrink: 0 }, children: "Root Event" }), _jsx("span", { style: { width: 96, flexShrink: 0 }, children: "Correlation" }), _jsx("span", { style: { width: 48, flexShrink: 0, textAlign: "right" }, children: "Events" }), _jsx("span", { style: { width: 80, flexShrink: 0, textAlign: "right" }, children: "Duration" }), _jsx("span", { style: { flex: 1 }, children: "Last Activity" })] }), loading && correlations.length === 0 ? (_jsx("div", { className: "ci-pulse", style: { padding: 12 }, children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "ci-row", style: { gap: 8, padding: "10px 0" }, children: [_jsx("div", { className: "ci-skeleton", style: { height: 12, width: 112 } }), _jsx("div", { className: "ci-skeleton", style: { height: 12, width: 96 } }), _jsx("div", { className: "ci-skeleton", style: { height: 12, width: 48 } })] }, i))) })) : correlations.length === 0 ? (_jsx("div", { className: "ci-empty", style: { height: 128 }, children: "No correlations found" })) : (_jsx("div", { className: "ci-scroll", children: correlations.map((corr) => (_jsxs("button", { onClick: () => handleRowClick(corr.correlationId), className: "ci-list-row ci-row", style: { width: "100%", textAlign: "left", gap: 8, padding: "10px 12px", borderBottom: "1px solid var(--ci-border)", background: "none", border: "none", borderBottomStyle: "solid", cursor: "pointer" }, children: [_jsx("span", { className: "ci-mono ci-truncate", style: {
-                                fontSize: 10,
-                                flexShrink: 0,
-                                width: 112,
-                                padding: "2px 6px",
-                                borderRadius: "var(--ci-radius-sm)",
+    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: "ci-mono ci-truncate", style: { fontSize: 10, color: "var(--ci-purple-dim)", width: 96, flexShrink: 0, cursor: "pointer", transition: "color 150ms" }, title: `Click to copy: ${corr.correlationId}`, onClick: (e) => { e.stopPropagation(); handleCopy(corr.correlationId); }, children: corr.correlationId.slice(0, 8) }), _jsx("span", { className: "ci-mono ci-tabular", style: { fontSize: 11, color: "var(--ci-text)", opacity: 0.7, width: 48, flexShrink: 0, textAlign: "right" }, children: corr.eventCount }), _jsx("span", { className: "ci-mono ci-tabular", style: { fontSize: 10, color: "var(--ci-text-muted)", opacity: 0.5, width: 80, flexShrink: 0, textAlign: "right" }, children: _jsx(RelativeDuration, { firstTs: corr.firstTs, lastTs: corr.lastTs }) }), _jsx("span", { className: "ci-tabular ci-truncate", style: { fontSize: 10, color: "var(--ci-text-dimmer)", flex: 1 }, children: formatTs(corr.lastTs) }), corr.hasErrors && (_jsx("span", { className: "ci-error-dot", 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

@@ -9,8 +9,8 @@ import { Search, ChevronRight, ChevronDown } from "lucide-react";
 // ---------------------------------------------------------------------------
 function LogRow({ log, showReactor }) {
     const [expanded, setExpanded] = useState(false);
-    const levelColor = LOG_LEVEL_COLORS[log.level] ?? "ci-log-debug";
-    return (_jsxs("div", { style: { padding: "6px 8px", borderRadius: "var(--ci-radius-md)", transition: "background 100ms" }, className: "ci-list-row", children: [_jsxs("div", { className: "ci-row", style: { gap: 8, minWidth: 0 }, children: [_jsx("span", { className: levelColor, style: { padding: "2px 6px", borderRadius: "var(--ci-radius-sm)", fontSize: 9, fontWeight: 600, textTransform: "uppercase", flexShrink: 0 }, children: log.level }), _jsx("span", { className: "ci-tabular", style: { fontSize: 10, color: "var(--ci-text-muted)", opacity: 0.5, flexShrink: 0 }, children: formatTs(log.loggedAt) }), showReactor && (_jsx("span", { className: "ci-mono", style: { fontSize: 10, color: "var(--ci-text-dimmer)", flexShrink: 0 }, children: log.reactorId })), _jsx("span", { className: "ci-truncate", style: { fontSize: 11, color: "var(--ci-text)", opacity: 0.8 }, children: log.message }), log.data != null && (_jsx("button", { onClick: () => setExpanded((v) => !v), className: "ci-btn", style: { marginLeft: "auto", flexShrink: 0, fontSize: 10 }, children: expanded ? _jsx(ChevronDown, { size: 10 }) : _jsx(ChevronRight, { size: 10 }) }))] }), expanded && log.data != null && (_jsx("pre", { className: "ci-mono", style: { marginTop: 6, marginLeft: 16, fontSize: 10, color: "var(--ci-text-muted)", opacity: 0.7, background: "rgba(255, 255, 255, 0.02)", borderRadius: "var(--ci-radius-md)", padding: 10, maxHeight: 128, overflow: "auto", whiteSpace: "pre-wrap", border: "1px solid var(--ci-border)" }, children: typeof log.data === "string" ? log.data : JSON.stringify(log.data, null, 2) }))] }));
+    const levelColor = LOG_LEVEL_COLORS[log.level] ?? "bg-zinc-600/20 text-zinc-400";
+    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);
@@ -20,8 +20,8 @@ export function LogsPane({ onInvestigate } = {}) {
     const scrubberEnd = useSelector((s) => s.scrubberEnd);
     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)
@@ -47,7 +47,7 @@ export function LogsPane({ onInvestigate } = {}) {
         return filtered;
     }, [logs, logsFilter, levelFilter, searchText, visibleEventIds]);
     if (!hasFilter) {
-        return (_jsx("div", { className: "ci-empty", children: "Click a reactor node in the causal tree to view logs" }));
+        return (_jsx("div", { className: "flex items-center justify-center h-full text-xs text-muted-foreground/50 tracking-wide", children: "Click a reactor node in the causal tree to view logs" }));
     }
     const toggleLevel = (level) => {
         setLevelFilter((prev) => {
@@ -59,16 +59,7 @@ export function LogsPane({ onInvestigate } = {}) {
             return next;
         });
     };
-    return (_jsxs("div", { className: "ci-col", children: [_jsxs("div", { className: "ci-row ci-surface", style: { padding: "8px 12px", borderBottom: "1px solid var(--ci-border)", gap: 12, flexWrap: "wrap" }, children: [_jsx("div", { className: "ci-row", style: { gap: 4, fontSize: 10 }, children: ["debug", "info", "warn", "error"].map((level) => (_jsx("button", { onClick: () => toggleLevel(level), className: levelFilter.has(level) ? LOG_LEVEL_COLORS[level] : "", style: {
-                                padding: "2px 8px",
-                                borderRadius: "var(--ci-radius-md)",
-                                textTransform: "uppercase",
-                                fontWeight: 600,
-                                border: "none",
-                                cursor: "pointer",
-                                background: levelFilter.has(level) ? undefined : "transparent",
-                                color: levelFilter.has(level) ? undefined : "var(--ci-text-dimmer)",
-                                textDecoration: levelFilter.has(level) ? undefined : "line-through",
-                                transition: "all 150ms",
-                            }, children: level }, level))) }), _jsxs("div", { className: "ci-row", style: { position: "relative", marginLeft: "auto" }, children: [_jsx(Search, { size: 10, style: { position: "absolute", left: 10, color: "var(--ci-text-dimmer)", pointerEvents: "none" } }), _jsx("input", { type: "text", placeholder: "Search logs...", value: searchText, onChange: (e) => setSearchText(e.target.value), className: "ci-input", style: { paddingLeft: 28, paddingRight: 8, fontSize: 11, paddingTop: 4, paddingBottom: 4, width: 176 } })] }), onInvestigate && (_jsx("button", { onClick: () => onInvestigate(logsFilter), className: "ci-btn ci-row", style: { gap: 4, fontSize: 11 }, title: "Investigate logs", children: _jsx(Search, { size: 12 }) }))] }), _jsxs("div", { style: { padding: "6px 12px", fontSize: 10, color: "var(--ci-text-muted)", opacity: 0.5 }, children: [logsFilter.reactorId ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "ci-mono", style: { color: "var(--ci-text)", opacity: 0.6 }, children: logsFilter.reactorId }), isCorrelationScope && _jsx("span", { style: { marginLeft: 4 }, children: "(all reactors in correlation)" })] })) : (_jsx("span", { children: "All reactors in correlation" })), _jsxs("span", { className: "ci-tabular", style: { marginLeft: 8 }, children: [filteredLogs.length, " logs"] })] }), _jsxs("div", { className: "ci-scroll", style: { padding: "0 4px" }, children: [filteredLogs.length === 0 && (_jsx("div", { style: { padding: 12, fontSize: 11, color: "var(--ci-text-dimmer)" }, children: "No logs match filters" })), filteredLogs.map((log, i) => (_jsx(LogRow, { log: log, showReactor: isCorrelationScope }, i)))] })] }));
+    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 }), 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;

package/dist/panes/SubjectChainPane.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { useSelector, useDispatch } from "../machine";
+import { CopyablePayload } from "../components/CopyablePayload";
+import { EffectList } from "../components/EffectList";
+import { eventTextColor, eventBg } from "../theme";
+import { formatTs, compactPayload } from "../utils";
+import { AlertTriangle, ChevronRight, Zap } from "lucide-react";
+// ── SubjectChainEventRow ──────────────────────────────────────────────────
+function SubjectChainEventRow({ event, showSourceBadge, effects, loadingEffects, dispatch, }) {
+    const [payloadOpen, setPayloadOpen] = useState(false);
+    const [effectsOpen, setEffectsOpen] = useState(false);
+    const handleEffectsToggle = (e) => {
+        e.stopPropagation();
+        if (!effectsOpen && effects === undefined && event.id) {
+            dispatch({ type: "ui/event_effects_requested", payload: { eventId: event.id } });
+        }
+        setEffectsOpen((v) => !v);
+    };
+    return (_jsxs("div", { className: "group px-3 py-2 border-b border-border hover:bg-white/[0.02] transition-all duration-150", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("span", { className: "text-[10px] font-mono text-muted-foreground/60 w-10 shrink-0 text-right tabular-nums", children: event.seq }), _jsx("span", { className: "text-[10px] text-muted-foreground/70 shrink-0 w-28 tabular-nums", children: formatTs(event.ts) }), showSourceBadge && (_jsx("span", { className: `px-1.5 py-0.5 rounded text-[8px] font-medium shrink-0 border ${event.sourceMode === "stream"
+                            ? "bg-indigo-500/10 text-indigo-400/80 border-indigo-500/20"
+                            : "bg-zinc-500/10 text-zinc-400/60 border-zinc-500/15"}`, children: event.sourceMode })), _jsx("span", { className: "text-xs font-mono shrink-0 px-1.5 py-0.5 rounded", style: { color: eventTextColor(event.name), background: eventBg(event.name) }, children: event.name }), _jsxs("button", { onClick: (e) => { e.stopPropagation(); setPayloadOpen((v) => !v); }, className: "flex items-center gap-1 text-[10px] font-mono text-muted-foreground/60 hover:text-muted-foreground truncate text-left min-w-0 transition-colors", children: [_jsx(ChevronRight, { size: 10, className: `shrink-0 transition-transform duration-150 ${payloadOpen ? "rotate-90" : ""}` }), _jsx("span", { className: "truncate", children: event.summary ?? compactPayload(event.payload) })] }), event.id && (_jsxs("button", { onClick: handleEffectsToggle, className: `ml-auto opacity-0 group-hover:opacity-100 transition-all duration-150 flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] shrink-0 ${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 }), effects !== undefined && effects.length > 0 && (_jsx("span", { children: effects.length }))] }))] }), payloadOpen && (_jsx(CopyablePayload, { payload: event.payload, className: "mt-2 ml-12 max-h-48" })), effectsOpen && (_jsx("div", { className: "mt-1 ml-12", children: loadingEffects ? (_jsx("div", { className: "text-[9px] text-muted-foreground/40 italic py-1", children: "Loading\u2026" })) : (_jsx(EffectList, { effects: effects ?? [] })) }))] }));
+}
+// ── SubjectChainPane ──────────────────────────────────────────────────────
+export function SubjectChainPane() {
+    const dispatch = useDispatch();
+    const subjectType = useSelector((s) => s.subjectType);
+    const subjectId = useSelector((s) => s.subjectId);
+    const subjectMode = useSelector((s) => s.subjectMode);
+    const subjectChain = useSelector((s) => s.subjectChain);
+    const loading = useSelector((s) => s.subjectChainLoading);
+    const hasMore = useSelector((s) => s.subjectChainHasMore);
+    const depthCapped = useSelector((s) => s.subjectDepthCapped);
+    const expandedEffects = useSelector((s) => s.expandedEffects);
+    const loadingEffectsIds = useSelector((s) => s.loadingEffects);
+    if (!subjectType || !subjectId) {
+        return (_jsx("div", { className: "flex items-center justify-center h-full text-xs text-muted-foreground/50 tracking-wide", children: "Select an entity to view its subject chain" }));
+    }
+    const modes = [
+        { label: "Stream", value: "stream" },
+        { label: "Descendants", value: "descendants" },
+        { label: "Both", value: "both" },
+    ];
+    const shortId = subjectId.length > 8 ? subjectId.slice(0, 8) + "…" : subjectId;
+    return (_jsxs("div", { className: "h-full flex flex-col", children: [_jsxs("div", { className: "px-3 py-2 border-b border-border shrink-0 space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("span", { className: "text-[10px] font-mono text-muted-foreground/60 shrink-0", children: subjectType }), _jsx("span", { className: "text-[10px] font-mono text-foreground/80 truncate", title: subjectId, children: shortId })] }), _jsx("div", { className: "flex items-center gap-1", children: modes.map(({ label, value }) => (_jsx("button", { onClick: () => dispatch({ type: "ui/subject_mode_changed", payload: { mode: value } }), className: `px-2 py-0.5 rounded text-[10px] transition-all ${subjectMode === value
+                                ? "bg-indigo-500/20 text-indigo-300 border border-indigo-500/30"
+                                : "text-muted-foreground/60 hover:text-foreground border border-transparent hover:border-border"}`, children: label }, value))) })] }), depthCapped && (_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-yellow-500/8 border-b border-yellow-500/15 text-[10px] text-yellow-400/80 shrink-0", children: [_jsx(AlertTriangle, { size: 10, className: "shrink-0" }), "Descendants truncated at depth 10. Some events may not be shown."] })), _jsx("div", { className: "flex-1 overflow-y-auto", children: loading && subjectChain.length === 0 ? (_jsx("div", { className: "p-3 space-y-2 animate-pulse", children: [...Array(5)].map((_, i) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-3 w-10 bg-muted rounded" }), _jsx("div", { className: "h-3 w-24 bg-muted rounded" }), _jsx("div", { className: "h-3 w-20 bg-muted rounded" }), _jsx("div", { className: "h-3 w-36 bg-muted rounded" })] }, i))) })) : subjectChain.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32 text-xs text-muted-foreground/50", children: "No events found" })) : (_jsxs(_Fragment, { children: [subjectChain.map((event) => (_jsx(SubjectChainEventRow, { event: event, showSourceBadge: subjectMode === "both", effects: event.id ? expandedEffects[event.id] : undefined, loadingEffects: event.id ? loadingEffectsIds.includes(event.id) : false, dispatch: dispatch }, event.seq))), hasMore && (_jsx("div", { className: "flex items-center justify-center py-3", children: _jsx("button", { onClick: () => dispatch({ type: "ui/subject_chain_load_more" }), disabled: loading, className: "text-[10px] text-muted-foreground/60 hover:text-foreground px-3 py-1.5 rounded border border-border hover:border-foreground/20 transition-all disabled:opacity-40", children: loading ? "Loading…" : "Load more" }) }))] })) })] }));
+}

package/dist/panes/TimelinePane.js

@@ -3,19 +3,25 @@ import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { useSelector, useDispatch } from "../machine";
 import { FilterBar } from "../components/FilterBar";
 import { CopyablePayload } from "../components/CopyablePayload";
+import { EffectList } from "../components/EffectList";
 import { eventTextColor, eventBg } from "../theme";
 import { formatTs, compactPayload, inScrubberRange } from "../utils";
-import { Search, ChevronRight } from "lucide-react";
-function EventRow({ event, isSelected, onClick, onFilterCorrelation, onInvestigate, }) {
+import { Search, ChevronRight, Zap } from "lucide-react";
+function EventRow({ event, isSelected, onClick, onFilterWorkflow, onInvestigate, onSubjectSelected, onEffectsRequested, effects, loadingEffects, }) {
     const [payloadOpen, setPayloadOpen] = useState(false);
-    return (_jsxs("div", { className: `ci-event-row${isSelected ? " ci-selected" : ""}`, children: [_jsx("div", { onClick: onClick, role: "button", tabIndex: 0, style: { width: "100%", textAlign: "left", cursor: "pointer" }, children: _jsxs("div", { className: "ci-row", style: { gap: 10, minWidth: 0 }, children: [_jsx("span", { className: "ci-mono ci-tabular", style: { fontSize: 10, color: "var(--ci-text-dim)", width: 40, flexShrink: 0, textAlign: "right" }, children: event.seq }), _jsx("span", { className: "ci-tabular", style: { fontSize: 10, color: "var(--ci-text-muted)", opacity: 0.7, flexShrink: 0, width: 128 }, children: formatTs(event.ts) }), event.correlationId && (_jsx("button", { onClick: (e) => { e.stopPropagation(); onFilterCorrelation(event.correlationId); }, className: "ci-corr-pill", title: `Filter by correlation ${event.correlationId}`, style: { flexShrink: 0 }, children: event.correlationId.slice(0, 8) })), _jsx("span", { className: "ci-mono", style: {
-                                fontSize: 12,
-                                flexShrink: 0,
-                                padding: "2px 6px",
-                                borderRadius: "var(--ci-radius-sm)",
-                                color: eventTextColor(event.name),
-                                background: eventBg(event.name),
-                            }, children: event.name }), _jsxs("button", { onClick: (e) => { e.stopPropagation(); setPayloadOpen((v) => !v); }, className: "ci-mono ci-truncate", style: { display: "flex", alignItems: "center", gap: 4, fontSize: 10, color: "var(--ci-text-dim)", textAlign: "left", minWidth: 0, background: "none", border: "none", cursor: "pointer", transition: "color 150ms" }, title: "Click to expand payload", children: [_jsx(ChevronRight, { size: 10, style: { flexShrink: 0, transition: "transform 150ms", transform: payloadOpen ? "rotate(90deg)" : undefined } }), _jsx("span", { className: "ci-truncate", children: event.summary ?? compactPayload(event.payload) })] }), onInvestigate && (_jsx("button", { onClick: (e) => { e.stopPropagation(); onInvestigate(); }, className: "ci-copy-btn ci-btn", style: { marginLeft: "auto", flexShrink: 0 }, title: "Investigate", children: _jsx(Search, { size: 12 }) }))] }) }), payloadOpen && (_jsx("div", { style: { marginTop: 8, marginLeft: 48, maxHeight: 256 }, children: _jsx(CopyablePayload, { payload: event.payload }) }))] }));
+    const [effectsOpen, setEffectsOpen] = useState(false);
+    const handleEffectsToggle = (e) => {
+        e.stopPropagation();
+        setEffectsOpen((v) => !v);
+    };
+    return (_jsxs("div", { className: `group w-full text-left px-3 py-2 border-b border-border transition-all duration-150 ${isSelected ? "bg-indigo-500/15" : "hover:bg-white/[0.02]"}`, children: [_jsx("div", { onClick: onClick, role: "button", tabIndex: 0, className: "w-full text-left cursor-pointer", children: _jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [_jsx("span", { className: "text-[10px] font-mono text-muted-foreground/60 w-10 shrink-0 text-right tabular-nums", children: event.seq }), _jsx("span", { className: "text-[10px] text-muted-foreground/70 shrink-0 w-32 tabular-nums", children: formatTs(event.ts) }), event.workflowId && (_jsx("button", { onClick: (e) => { e.stopPropagation(); onFilterWorkflow(event.workflowId); }, className: "px-1.5 py-0.5 rounded-full text-[9px] font-mono bg-purple-500/8 text-purple-400/80 hover:bg-purple-500/15 hover:text-purple-400 shrink-0 transition-all border border-purple-500/10", title: `Filter by workflow ${event.workflowId}`, children: event.workflowId.slice(0, 8) })), event.aggregateType && event.aggregateId && onSubjectSelected && (_jsxs("button", { onClick: (e) => { e.stopPropagation(); onSubjectSelected(event.aggregateType, event.aggregateId); }, 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-xs font-mono shrink-0 px-1.5 py-0.5 rounded", style: { color: eventTextColor(event.name), background: eventBg(event.name) }, children: event.name }), _jsxs("button", { onClick: (e) => { e.stopPropagation(); setPayloadOpen((v) => !v); }, className: "flex items-center gap-1 text-[10px] font-mono text-muted-foreground/60 hover:text-muted-foreground truncate text-left min-w-0 transition-colors", title: "Click to expand payload", children: [_jsx(ChevronRight, { size: 10, className: `shrink-0 transition-transform duration-150 ${payloadOpen ? "rotate-90" : ""}` }), _jsx("span", { className: "truncate", children: event.summary ?? compactPayload(event.payload) })] }), _jsxs("div", { className: "ml-auto flex items-center gap-1 shrink-0", children: [event.id && (_jsxs("button", { onClick: (e) => {
+                                        handleEffectsToggle(e);
+                                        if (!effectsOpen && effects === undefined && event.id) {
+                                            onEffectsRequested?.(event.id);
+                                        }
+                                    }, className: `opacity-0 group-hover: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 }), effects !== undefined && effects.length > 0 && _jsx("span", { children: effects.length })] })), onInvestigate && (_jsx("button", { onClick: (e) => { e.stopPropagation(); onInvestigate(); }, className: "opacity-0 group-hover:opacity-100 transition-opacity duration-150 p-1 rounded-md hover:bg-white/[0.05] shrink-0 text-muted-foreground", title: "Investigate", children: _jsx(Search, { size: 12 }) }))] })] }) }), payloadOpen && (_jsx(CopyablePayload, { payload: event.payload, className: "mt-2 ml-12 max-h-64" })), effectsOpen && (_jsx("div", { className: "mt-1 ml-12", children: loadingEffects ? (_jsx("div", { className: "text-[9px] text-muted-foreground/40 italic py-1", children: "Loading\u2026" })) : (_jsx(EffectList, { effects: effects ?? [] })) }))] }));
 }
 function InfiniteScrollSentinel({ onVisible, loading }) {
     const ref = useRef(null);
@@ -32,19 +38,19 @@ function InfiniteScrollSentinel({ onVisible, loading }) {
         observer.observe(el);
         return () => observer.disconnect();
     }, [loading]);
-    return (_jsx("div", { ref: ref, className: "ci-row", style: { justifyContent: "center", padding: "16px 0" }, children: loading && (_jsxs("div", { className: "ci-row", style: { gap: 8 }, children: [_jsx("div", { className: "ci-pulse", style: { width: 6, height: 6, borderRadius: "50%", background: "rgba(99, 102, 241, 0.5)" } }), _jsx("span", { style: { fontSize: 10, color: "var(--ci-text-dim)" }, children: "Loading" })] })) }));
+    return (_jsx("div", { ref: ref, className: "flex items-center justify-center py-4", children: loading && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-indigo-500/50 animate-pulse" }), _jsx("span", { className: "text-[10px] text-muted-foreground/60", children: "Loading" })] })) }));
 }
 export function TimelinePane({ onInvestigate } = {}) {
     const events = useSelector((s) => {
         let result = s.events;
-        const cid = s.filters.correlationId;
+        const cid = s.filters.workflowId;
         if (cid)
-            result = result.filter((e) => e.correlationId === cid);
+            result = result.filter((e) => e.workflowId === cid);
         const search = s.filters.search?.toLowerCase();
         if (search) {
             result = result.filter((e) => e.name.toLowerCase().includes(search) ||
                 e.payload.toLowerCase().includes(search) ||
-                (e.correlationId ?? "").toLowerCase().includes(search));
+                (e.workflowId ?? "").toLowerCase().includes(search));
         }
         return result;
     });
@@ -53,6 +59,8 @@ export function TimelinePane({ onInvestigate } = {}) {
     const selectedSeq = useSelector((s) => s.selectedSeq);
     const scrubberStart = useSelector((s) => s.scrubberStart);
     const scrubberEnd = useSelector((s) => s.scrubberEnd);
+    const expandedEffects = useSelector((s) => s.expandedEffects);
+    const loadingEffectsIds = useSelector((s) => s.loadingEffects);
     const dispatch = useDispatch();
     const displayedEvents = useMemo(() => {
         if (scrubberStart == null && scrubberEnd == null)
@@ -61,15 +69,21 @@ export function TimelinePane({ onInvestigate } = {}) {
     }, [events, scrubberStart, scrubberEnd]);
     const handleSelect = useCallback((event) => {
         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 } });
         }
     }, [dispatch]);
-    const handleFilterCorrelation = useCallback((correlationId) => {
-        dispatch({ type: "ui/filter_changed", payload: { correlationId } });
+    const handleFilterWorkflow = useCallback((workflowId) => {
+        dispatch({ type: "ui/filter_changed", payload: { workflowId } });
     }, [dispatch]);
     const handleLoadMore = useCallback(() => {
         dispatch({ type: "ui/load_more_requested" });
     }, [dispatch]);
-    return (_jsxs("div", { className: "ci-col", children: [_jsx(FilterBar, {}), loading && events.length === 0 ? (_jsx("div", { className: "ci-pulse", style: { padding: 4 }, children: Array.from({ length: 12 }).map((_, i) => (_jsxs("div", { className: "ci-row", style: { gap: 8, padding: "10px 12px", borderBottom: "1px solid var(--ci-border)" }, children: [_jsx("div", { className: "ci-skeleton", style: { height: 12, width: 40, flexShrink: 0 } }), _jsx("div", { className: "ci-skeleton", style: { height: 12, width: 128, flexShrink: 0 } }), _jsx("div", { className: "ci-skeleton", style: { height: 12, flex: 1, maxWidth: `${150 + (i * 37) % 200}px` } })] }, i))) })) : events.length === 0 ? (_jsx("div", { className: "ci-empty", style: { height: 128, fontSize: 14 }, children: "No events found" })) : (_jsxs("div", { className: "ci-scroll", children: [displayedEvents.map((event) => (_jsx(EventRow, { event: event, isSelected: event.seq === selectedSeq, onClick: () => handleSelect(event), onFilterCorrelation: handleFilterCorrelation, onInvestigate: onInvestigate ? () => onInvestigate(event) : undefined }, event.seq))), hasMore && (_jsx(InfiniteScrollSentinel, { onVisible: handleLoadMore, loading: loading }))] }))] }));
+    const handleSubjectSelected = useCallback((aggregateType, aggregateId) => {
+        dispatch({ type: "ui/subject_selected", payload: { aggregateType, aggregateId, mode: "both" } });
+    }, [dispatch]);
+    const handleEffectsRequested = useCallback((eventId) => {
+        dispatch({ type: "ui/event_effects_requested", payload: { eventId } });
+    }, [dispatch]);
+    return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsx(FilterBar, {}), loading && events.length === 0 ? (_jsx("div", { className: "animate-pulse p-1", children: Array.from({ length: 12 }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5 border-b border-border", children: [_jsx("div", { className: "h-3 w-10 bg-white/[0.03] rounded shrink-0" }), _jsx("div", { className: "h-3 w-32 bg-white/[0.03] rounded shrink-0" }), _jsx("div", { className: "h-3 bg-white/[0.03] rounded flex-1", style: { maxWidth: `${150 + (i * 37) % 200}px` } })] }, i))) })) : events.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32 text-sm text-muted-foreground/60", children: "No events found" })) : (_jsxs("div", { className: "flex-1 overflow-y-auto", children: [displayedEvents.map((event) => (_jsx(EventRow, { event: event, isSelected: event.seq === selectedSeq, onClick: () => handleSelect(event), onFilterWorkflow: handleFilterWorkflow, onInvestigate: onInvestigate ? () => onInvestigate(event) : undefined, onSubjectSelected: handleSubjectSelected, onEffectsRequested: handleEffectsRequested, effects: event.id ? expandedEffects[event.id] : undefined, loadingEffects: event.id ? loadingEffectsIds.includes(event.id) : false }, event.seq))), hasMore && (_jsx(InfiniteScrollSentinel, { onVisible: handleLoadMore, loading: loading }))] }))] }));
 }

package/dist/panes/WaterfallPane.js

@@ -97,9 +97,9 @@ const LABEL_WIDTH = 160;
 const BAR_MIN_WIDTH = 4;
 const PADDING_X = 12;
 export function WaterfallPane() {
-    const correlationId = useSelector((s) => s.flowCorrelationId);
-    const outcomes = useSelector((s) => correlationId ? s.outcomes[correlationId] ?? [] : []);
-    const attempts = useSelector((s) => correlationId ? s.attempts[correlationId] ?? [] : []);
+    const workflowId = useSelector((s) => s.flowWorkflowId);
+    const outcomes = useSelector((s) => workflowId ? s.outcomes[workflowId] ?? [] : []);
+    const attempts = useSelector((s) => workflowId ? s.attempts[workflowId] ?? [] : []);
     const flowData = useSelector((s) => s.flowData);
     const scrubberStart = useSelector((s) => s.scrubberStart);
     const scrubberEnd = useSelector((s) => s.scrubberEnd);
@@ -138,11 +138,11 @@ export function WaterfallPane() {
             return null;
         return new Date(event.ts).getTime();
     }, [scrubberEnd, flowData]);
-    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 reactor waterfall" }));
     }
     if (bars.length === 0) {
-        return (_jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#50506a", fontSize: 12, letterSpacing: "0.03em" }, children: "No reactor execution data for this correlation" }));
+        return (_jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#50506a", fontSize: 12, letterSpacing: "0.03em" }, children: "No reactor execution data for this workflow" }));
     }
     const hasReactorFilter = logsFilter.reactorId != null;
     return (_jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [hasReactorFilter && (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "5px 12px", borderBottom: "1px solid rgba(255,255,255,0.06)", flexShrink: 0, background: "rgba(15, 15, 20, 0.6)", backdropFilter: "blur(8px)" }, children: [_jsx("span", { style: { fontSize: 10, color: "#818cf8", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }, children: logsFilter.reactorId }), _jsx("button", { onClick: () => {

package/dist/panes/WorkflowExplorerPane.d.ts

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

package/dist/panes/WorkflowExplorerPane.js

@@ -0,0 +1,46 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useSelector, useDispatch } from "../machine";
+import { eventTextColor, eventBg } from "../theme";
+import { formatTs } from "../utils";
+function RelativeDuration({ firstTs, lastTs }) {
+    const first = new Date(firstTs).getTime();
+    const last = new Date(lastTs).getTime();
+    const diffMs = last - first;
+    if (diffMs < 1000)
+        return _jsxs("span", { children: [diffMs, "ms"] });
+    if (diffMs < 60_000)
+        return _jsxs("span", { children: [(diffMs / 1000).toFixed(1), "s"] });
+    if (diffMs < 3_600_000)
+        return _jsxs("span", { children: [(diffMs / 60_000).toFixed(1), "m"] });
+    return _jsxs("span", { children: [(diffMs / 3_600_000).toFixed(1), "h"] });
+}
+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 workflows on mount
+    useEffect(() => {
+        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/workflows_requested", payload: { search: value || undefined } });
+        }, 300);
+    }, [dispatch]);
+    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 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.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/queries.d.ts

@@ -1,16 +1,20 @@
 /** GraphQL query and subscription documents for the causal inspector API. */
-export declare const EVENTS_SUBSCRIPTION = "\n  subscription Events($lastSeq: Int) {\n    inspectorEventAdded(lastSeq: $lastSeq) {\n      \n  seq\n  ts\n  type\n  name\n  id\n  parentId\n  correlationId\n  reactorId\n  aggregateType\n  aggregateId\n  streamVersion\n  summary\n  payload\n\n    }\n  }\n";
-export declare const INSPECTOR_EVENTS = "\n  query InspectorEvents(\n    $limit: Int!\n    $cursor: Int\n    $search: String\n    $correlationId: String\n    $aggregateKey: String\n  ) {\n    inspectorEvents(\n      limit: $limit\n      cursor: $cursor\n      search: $search\n      correlationId: $correlationId\n      aggregateKey: $aggregateKey\n    ) {\n      events {\n        \n  seq\n  ts\n  type\n  name\n  id\n  parentId\n  correlationId\n  reactorId\n  aggregateType\n  aggregateId\n  streamVersion\n  summary\n  payload\n\n      }\n      nextCursor\n    }\n  }\n";
-export declare const INSPECTOR_CAUSAL_TREE = "\n  query InspectorCausalTree($seq: Int!) {\n    inspectorCausalTree(seq: $seq) {\n      events {\n        \n  seq\n  ts\n  type\n  name\n  id\n  parentId\n  correlationId\n  reactorId\n  aggregateType\n  aggregateId\n  streamVersion\n  summary\n  payload\n\n      }\n      rootSeq\n    }\n  }\n";
-export declare const INSPECTOR_CAUSAL_FLOW = "\n  query InspectorCausalFlow($correlationId: String!) {\n    inspectorCausalFlow(correlationId: $correlationId) {\n      events {\n        \n  seq\n  ts\n  type\n  name\n  id\n  parentId\n  correlationId\n  reactorId\n  aggregateType\n  aggregateId\n  streamVersion\n  summary\n  payload\n\n      }\n    }\n  }\n";
+export declare const EVENTS_SUBSCRIPTION = "\n  subscription Events($lastSeq: Int) {\n    inspectorEventAdded(lastSeq: $lastSeq) {\n      \n  seq\n  ts\n  type\n  name\n  id\n  causationId\n  workflowId\n  reactorId\n  aggregateType\n  aggregateId\n  streamRevision\n  summary\n  payload\n\n    }\n  }\n";
+export declare const INSPECTOR_EVENTS = "\n  query InspectorEvents(\n    $limit: Int!\n    $cursor: Int\n    $search: String\n    $workflowId: String\n    $aggregateKey: String\n  ) {\n    inspectorEvents(\n      limit: $limit\n      cursor: $cursor\n      search: $search\n      workflowId: $workflowId\n      aggregateKey: $aggregateKey\n    ) {\n      events {\n        \n  seq\n  ts\n  type\n  name\n  id\n  causationId\n  workflowId\n  reactorId\n  aggregateType\n  aggregateId\n  streamRevision\n  summary\n  payload\n\n      }\n      nextCursor\n    }\n  }\n";
+export declare const INSPECTOR_CAUSAL_TREE = "\n  query InspectorCausalTree($seq: Int!) {\n    inspectorCausalTree(seq: $seq) {\n      events {\n        \n  seq\n  ts\n  type\n  name\n  id\n  causationId\n  workflowId\n  reactorId\n  aggregateType\n  aggregateId\n  streamRevision\n  summary\n  payload\n\n      }\n      rootSeq\n    }\n  }\n";
+export declare const INSPECTOR_CAUSAL_FLOW = "\n  query InspectorCausalFlow($workflowId: String!) {\n    inspectorCausalFlow(workflowId: $workflowId) {\n      events {\n        \n  seq\n  ts\n  type\n  name\n  id\n  causationId\n  workflowId\n  reactorId\n  aggregateType\n  aggregateId\n  streamRevision\n  summary\n  payload\n\n      }\n    }\n  }\n";
 export declare const INSPECTOR_REACTOR_LOGS = "\n  query InspectorReactorLogs($eventId: String!, $reactorId: String!) {\n    inspectorReactorLogs(eventId: $eventId, reactorId: $reactorId) {\n      eventId\n      reactorId\n      level\n      message\n      data\n      loggedAt\n    }\n  }\n";
-export declare const INSPECTOR_REACTOR_LOGS_BY_CORRELATION = "\n  query InspectorReactorLogsByCorrelation($correlationId: String!) {\n    inspectorReactorLogsByCorrelation(correlationId: $correlationId) {\n      eventId\n      reactorId\n      level\n      message\n      data\n      loggedAt\n    }\n  }\n";
-export declare const INSPECTOR_REACTOR_DESCRIPTIONS = "\n  query InspectorReactorDescriptions($correlationId: String!) {\n    inspectorReactorDescriptions(correlationId: $correlationId) {\n      reactorId\n      blocks\n    }\n  }\n";
-export declare const INSPECTOR_REACTOR_DESCRIPTION_SNAPSHOTS = "\n  query InspectorReactorDescriptionSnapshots($correlationId: String!) {\n    inspectorReactorDescriptionSnapshots(correlationId: $correlationId) {\n      seq\n      eventId\n      reactorId\n      blocks\n    }\n  }\n";
-export declare const INSPECTOR_AGGREGATE_TIMELINE = "\n  query InspectorAggregateTimeline($correlationId: String!) {\n    inspectorAggregateTimeline(correlationId: $correlationId) {\n      seq\n      eventId\n      eventType\n      aggregates {\n        key\n        state\n      }\n    }\n  }\n";
+export declare const INSPECTOR_REACTOR_LOGS_BY_WORKFLOW = "\n  query InspectorReactorLogsByWorkflow($workflowId: String!) {\n    inspectorReactorLogsByWorkflow(workflowId: $workflowId) {\n      eventId\n      reactorId\n      level\n      message\n      data\n      loggedAt\n    }\n  }\n";
+export declare const INSPECTOR_REACTOR_DESCRIPTIONS = "\n  query InspectorReactorDescriptions($workflowId: String!) {\n    inspectorReactorDescriptions(workflowId: $workflowId) {\n      reactorId\n      blocks\n    }\n  }\n";
+export declare const INSPECTOR_REACTOR_DESCRIPTION_SNAPSHOTS = "\n  query InspectorReactorDescriptionSnapshots($workflowId: String!) {\n    inspectorReactorDescriptionSnapshots(workflowId: $workflowId) {\n      seq\n      eventId\n      reactorId\n      blocks\n    }\n  }\n";
+export declare const INSPECTOR_AGGREGATE_TIMELINE = "\n  query InspectorAggregateTimeline($workflowId: String!) {\n    inspectorAggregateTimeline(workflowId: $workflowId) {\n      seq\n      eventId\n      eventType\n      aggregates {\n        key\n        state\n      }\n    }\n  }\n";
 export declare const INSPECTOR_REACTOR_DEPENDENCIES = "\n  query InspectorReactorDependencies {\n    inspectorReactorDependencies {\n      reactorId\n      inputEventTypes\n      outputEventTypes\n    }\n  }\n";
 export declare const INSPECTOR_AGGREGATE_KEYS = "\n  query InspectorAggregateKeys {\n    inspectorAggregateKeys\n  }\n";
-export declare const INSPECTOR_AGGREGATE_LIFECYCLE = "\n  query InspectorAggregateLifecycle($aggregateKey: String!, $limit: Int) {\n    inspectorAggregateLifecycle(aggregateKey: $aggregateKey, limit: $limit) {\n      seq\n      eventId\n      eventType\n      ts\n      correlationId\n      aggregateKey\n      state\n    }\n  }\n";
-export declare const INSPECTOR_CORRELATIONS = "\n  query InspectorCorrelations($search: String, $limit: Int, $cursor: String) {\n    inspectorCorrelations(search: $search, limit: $limit, cursor: $cursor) {\n      correlations {\n        correlationId\n        eventCount\n        firstTs\n        lastTs\n        rootEventType\n        hasErrors\n      }\n      nextCursor\n    }\n  }\n";
-export declare const INSPECTOR_REACTOR_OUTCOMES = "\n  query InspectorReactorOutcomes($correlationId: String!) {\n    inspectorReactorOutcomes(correlationId: $correlationId) {\n      reactorId\n      status\n      error\n      attempts\n      startedAt\n      completedAt\n      triggeringEventIds\n    }\n  }\n";
-export declare const INSPECTOR_REACTOR_ATTEMPTS = "\n  query InspectorReactorAttempts($correlationId: String!) {\n    inspectorReactorAttempts(correlationId: $correlationId) {\n      eventId\n      reactorId\n      correlationId\n      attempt\n      status\n      error\n      startedAt\n      completedAt\n    }\n  }\n";
+export declare const INSPECTOR_AGGREGATE_LIFECYCLE = "\n  query InspectorAggregateLifecycle($aggregateKey: String!, $limit: Int) {\n    inspectorAggregateLifecycle(aggregateKey: $aggregateKey, limit: $limit) {\n      seq\n      eventId\n      eventType\n      ts\n      workflowId\n      aggregateKey\n      state\n    }\n  }\n";
+export declare const INSPECTOR_WORKFLOWS = "\n  query InspectorWorkflows($search: String, $limit: Int, $cursor: String) {\n    inspectorWorkflows(search: $search, limit: $limit, cursor: $cursor) {\n      workflows {\n        workflowId\n        eventCount\n        firstTs\n        lastTs\n        rootEventType\n        hasErrors\n      }\n      nextCursor\n    }\n  }\n";
+export declare const INSPECTOR_REACTOR_OUTCOMES = "\n  query InspectorReactorOutcomes($workflowId: String!) {\n    inspectorReactorOutcomes(workflowId: $workflowId) {\n      reactorId\n      status\n      error\n      attempts\n      startedAt\n      completedAt\n      triggeringEventIds\n    }\n  }\n";
+export declare const INSPECTOR_REACTOR_ATTEMPTS = "\n  query InspectorReactorAttempts($workflowId: String!) {\n    inspectorReactorAttempts(workflowId: $workflowId) {\n      eventId\n      reactorId\n      workflowId\n      attempt\n      status\n      error\n      startedAt\n      completedAt\n    }\n  }\n";
+export declare const INSPECTOR_SUBJECT_CHAIN = "\n  query InspectorSubjectChain(\n    $aggregateType: String!\n    $aggregateId: String!\n    $mode: SubjectChainMode!\n    $limit: Int\n    $cursor: Int\n  ) {\n    inspectorSubjectChain(\n      aggregateType: $aggregateType\n      aggregateId: $aggregateId\n      mode: $mode\n      limit: $limit\n      cursor: $cursor\n    ) {\n      events {\n        \n  seq\n  ts\n  type\n  name\n  id\n  causationId\n  workflowId\n  reactorId\n  aggregateType\n  aggregateId\n  streamRevision\n  summary\n  payload\n  sourceMode\n\n      }\n      nextCursor\n      depthCapReached\n    }\n  }\n";
+export declare const INSPECTOR_EFFECTS_FOR_EVENT = "\n  query InspectorEffectsForEvent($eventId: String!) {\n    inspectorEffectsForEvent(eventId: $eventId) {\n      consumer\n      label\n      value\n      createdAt\n    }\n  }\n";
+export declare const INSPECTOR_AGGREGATE_TYPES = "\n  query InspectorAggregateTypes($search: String, $limit: Int) {\n    inspectorAggregateTypes(search: $search, limit: $limit)\n  }\n";
+export declare const INSPECTOR_AGGREGATE_KEYS_BY_TYPE = "\n  query InspectorAggregateKeysByType(\n    $aggregateType: String!\n    $search: String\n    $limit: Int\n    $cursor: String\n  ) {\n    inspectorAggregateKeysByType(\n      aggregateType: $aggregateType\n      search: $search\n      limit: $limit\n      cursor: $cursor\n    ) {\n      entries {\n        aggregateId\n        displayLabel\n      }\n      nextCursor\n    }\n  }\n";