causal-inspector 0.1.4 → 0.1.6

package/dist/panes/TimelinePane.js

@@ -4,16 +4,18 @@ import { useSelector, useDispatch } from "../machine";
 import { FilterBar } from "../components/FilterBar";
 import { CopyablePayload } from "../components/CopyablePayload";
 import { eventTextColor, eventBg } from "../theme";
-import { formatTs, compactPayload, aggregateKey, inScrubberRange } from "../utils";
+import { formatTs, compactPayload, inScrubberRange } from "../utils";
 import { Search, ChevronRight } from "lucide-react";
-function EventRow({ event, isSelected, onClick, onFilterCorrelation, onFilterStream, onInvestigate, }) {
+function EventRow({ event, isSelected, onClick, onFilterCorrelation, onInvestigate, }) {
     const [payloadOpen, setPayloadOpen] = useState(false);
-    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.correlationId && (_jsx("button", { onClick: (e) => { e.stopPropagation(); onFilterCorrelation(event.correlationId); }, 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 correlation ${event.correlationId}`, children: event.correlationId.slice(0, 8) })), event.aggregateType && event.aggregateId && (_jsxs("button", { onClick: (e) => { e.stopPropagation(); onFilterStream(aggregateKey(event)); }, className: "opacity-0 group-hover:opacity-100 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: `Filter by stream ${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: {
+    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: "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) })] }), onInvestigate && (_jsx("button", { onClick: (e) => { e.stopPropagation(); onInvestigate(); }, className: "opacity-0 group-hover:opacity-100 transition-opacity duration-150 ml-auto 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" }))] }));
+                            }, 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 }) }))] }));
 }
 function InfiniteScrollSentinel({ onVisible, loading }) {
     const ref = useRef(null);
@@ -30,12 +32,21 @@ function InfiniteScrollSentinel({ onVisible, loading }) {
         observer.observe(el);
         return () => observer.disconnect();
     }, [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" })] })) }));
+    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" })] })) }));
 }
 export function TimelinePane({ onInvestigate } = {}) {
     const events = useSelector((s) => {
+        let result = s.events;
         const cid = s.filters.correlationId;
-        return cid ? s.events.filter((e) => e.correlationId === cid) : s.events;
+        if (cid)
+            result = result.filter((e) => e.correlationId === 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));
+        }
+        return result;
     });
     const loading = useSelector((s) => s.loading);
     const hasMore = useSelector((s) => s.hasMore);
@@ -57,11 +68,8 @@ export function TimelinePane({ onInvestigate } = {}) {
     const handleFilterCorrelation = useCallback((correlationId) => {
         dispatch({ type: "ui/filter_changed", payload: { correlationId } });
     }, [dispatch]);
-    const handleFilterStream = useCallback((aggregateKey) => {
-        dispatch({ type: "ui/filter_changed", payload: { aggregateKey } });
-    }, [dispatch]);
     const handleLoadMore = useCallback(() => {
         dispatch({ type: "ui/load_more_requested" });
     }, [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), onFilterCorrelation: handleFilterCorrelation, onFilterStream: handleFilterStream, onInvestigate: onInvestigate ? () => onInvestigate(event) : undefined }, event.seq))), hasMore && (_jsx(InfiniteScrollSentinel, { onVisible: handleLoadMore, loading: loading }))] }))] }));
+    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 }))] }))] }));
 }

package/dist/panes/WaterfallPane.js

@@ -27,6 +27,7 @@ const STATUS_COLORS = {
     completed: { bar: "#22c55e", barEnd: "#16a34a", text: "#bbf7d0" },
     running: { bar: "#eab308", barEnd: "#ca8a04", text: "#fef08a" },
     error: { bar: "#ef4444", barEnd: "#dc2626", text: "#fecaca" },
+    retry: { bar: "#f97316", barEnd: "#ea580c", text: "#fed7aa" },
 };
 function statusColor(status) {
     return STATUS_COLORS[status] ?? STATUS_COLORS.running;
@@ -57,15 +58,48 @@ function buildBars(outcomes) {
     return { bars, minMs, maxMs };
 }
 // ---------------------------------------------------------------------------
+// Attempt helpers
+// ---------------------------------------------------------------------------
+/** Group attempts by reactorId, sorted by attempt number. */
+function groupAttempts(attempts) {
+    const map = new Map();
+    for (const a of attempts) {
+        let list = map.get(a.reactorId);
+        if (!list) {
+            list = [];
+            map.set(a.reactorId, list);
+        }
+        list.push(a);
+    }
+    for (const list of map.values()) {
+        list.sort((a, b) => a.attempt - b.attempt);
+    }
+    return map;
+}
+/** Factor attempts into the global min/max time range. */
+function expandRange(attempts, minMs, maxMs) {
+    for (const a of attempts) {
+        const s = new Date(a.startedAt).getTime();
+        const e = new Date(a.completedAt).getTime();
+        if (s < minMs)
+            minMs = s;
+        if (e > maxMs)
+            maxMs = e;
+    }
+    return { minMs, maxMs };
+}
+// ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
 const ROW_HEIGHT = 36;
+const ATTEMPT_ROW_HEIGHT = 26;
 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 flowData = useSelector((s) => s.flowData);
     const scrubberStart = useSelector((s) => s.scrubberStart);
     const scrubberEnd = useSelector((s) => s.scrubberEnd);
@@ -74,7 +108,17 @@ export function WaterfallPane() {
     const handleBarClick = useCallback((bar) => {
         dispatch({ type: "ui/handler_selected", payload: { reactorId: bar.reactorId } });
     }, [dispatch]);
-    const { bars, minMs, maxMs } = useMemo(() => buildBars(outcomes), [outcomes]);
+    const attemptsByReactor = useMemo(() => groupAttempts(attempts), [attempts]);
+    const { bars, minMs, maxMs } = useMemo(() => {
+        const result = buildBars(outcomes);
+        // Expand range to include attempt times
+        if (attempts.length > 0) {
+            const expanded = expandRange(attempts, result.minMs, result.maxMs);
+            result.minMs = expanded.minMs;
+            result.maxMs = expanded.maxMs;
+        }
+        return result;
+    }, [outcomes, attempts]);
     const rangeMs = maxMs - minMs || 1;
     // Map event id → seq for scrubber sync
     const eventIdToSeq = useMemo(() => {
@@ -129,78 +173,147 @@ export function WaterfallPane() {
                             ? ((scrubberMs - minMs) / rangeMs) * 100
                             : null;
                         const isSelected = logsFilter.reactorId === bar.reactorId;
-                        return (_jsxs("div", { onClick: () => handleBarClick(bar), style: {
-                                display: "flex",
-                                alignItems: "center",
-                                height: ROW_HEIGHT,
-                                gap: 0,
-                                opacity: isFuture ? 0.25 : (hasReactorFilter && !isSelected) ? 0.35 : 1,
-                                transition: "opacity 200ms, background 150ms",
-                                cursor: "pointer",
-                                borderRadius: 6,
-                                background: isSelected ? "rgba(99, 102, 241, 0.15)" : "transparent",
-                                paddingLeft: 4,
-                                paddingRight: 4,
-                            }, children: [_jsx("div", { style: {
-                                        width: LABEL_WIDTH,
-                                        flexShrink: 0,
-                                        fontSize: 11,
-                                        color: "#c0c0d0",
-                                        fontWeight: 500,
-                                        overflow: "hidden",
-                                        textOverflow: "ellipsis",
-                                        whiteSpace: "nowrap",
-                                        paddingRight: 10,
-                                        letterSpacing: "0.01em",
-                                    }, title: bar.reactorId, children: bar.reactorId }), _jsxs("div", { style: {
-                                        flex: 1,
-                                        position: "relative",
-                                        height: 22,
-                                        background: "rgba(255, 255, 255, 0.02)",
-                                        borderRadius: 5,
-                                        overflow: "hidden",
+                        const reactorAttempts = attemptsByReactor.get(bar.reactorId) ?? [];
+                        const hasMultipleAttempts = reactorAttempts.length > 1;
+                        return (_jsxs("div", { children: [_jsxs("div", { onClick: () => handleBarClick(bar), style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        height: ROW_HEIGHT,
+                                        gap: 0,
+                                        opacity: isFuture ? 0.25 : (hasReactorFilter && !isSelected) ? 0.35 : 1,
+                                        transition: "opacity 200ms, background 150ms",
+                                        cursor: "pointer",
+                                        borderRadius: 6,
+                                        background: isSelected ? "rgba(99, 102, 241, 0.15)" : "transparent",
+                                        paddingLeft: 4,
+                                        paddingRight: 4,
                                     }, children: [_jsx("div", { style: {
-                                                position: "absolute",
-                                                left: `${offsetPct}%`,
-                                                width: `${widthPct}%`,
-                                                minWidth: BAR_MIN_WIDTH,
-                                                height: "100%",
-                                                background: `linear-gradient(90deg, ${colors.bar}, ${colors.barEnd})`,
-                                                borderRadius: 4,
-                                                opacity: 0.8,
+                                                width: LABEL_WIDTH,
+                                                flexShrink: 0,
+                                                fontSize: 11,
+                                                color: "#c0c0d0",
+                                                fontWeight: 500,
+                                                overflow: "hidden",
+                                                textOverflow: "ellipsis",
+                                                whiteSpace: "nowrap",
+                                                paddingRight: 10,
+                                                letterSpacing: "0.01em",
+                                            }, title: bar.reactorId, children: bar.reactorId }), _jsxs("div", { style: {
+                                                flex: 1,
+                                                position: "relative",
+                                                height: 22,
+                                                background: "rgba(255, 255, 255, 0.02)",
+                                                borderRadius: 5,
+                                                overflow: "hidden",
+                                            }, children: [_jsx("div", { style: {
+                                                        position: "absolute",
+                                                        left: `${offsetPct}%`,
+                                                        width: `${widthPct}%`,
+                                                        minWidth: BAR_MIN_WIDTH,
+                                                        height: "100%",
+                                                        background: `linear-gradient(90deg, ${colors.bar}, ${colors.barEnd})`,
+                                                        borderRadius: 4,
+                                                        opacity: 0.8,
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        paddingLeft: 5,
+                                                        paddingRight: 5,
+                                                        boxShadow: `0 1px 4px ${colors.bar}30`,
+                                                    }, title: `${bar.reactorId}: ${bar.status} (${formatDuration(duration)})${bar.attempts > 1 ? ` — ${bar.attempts} attempts` : ""}${bar.error ? `\nError: ${bar.error}` : ""}`, children: _jsx("span", { style: {
+                                                            fontSize: 9,
+                                                            fontWeight: 600,
+                                                            color: "#0a0a0f",
+                                                            whiteSpace: "nowrap",
+                                                            overflow: "hidden",
+                                                            textOverflow: "ellipsis",
+                                                        }, children: formatDuration(duration) }) }), cursorPct != null && (_jsx("div", { style: {
+                                                        position: "absolute",
+                                                        left: `${cursorPct}%`,
+                                                        top: 0,
+                                                        bottom: 0,
+                                                        width: 1,
+                                                        background: "#6366f1",
+                                                        pointerEvents: "none",
+                                                        boxShadow: "0 0 4px rgba(99, 102, 241, 0.3)",
+                                                    } }))] }), _jsxs("div", { style: {
+                                                width: 80,
+                                                flexShrink: 0,
                                                 display: "flex",
                                                 alignItems: "center",
-                                                paddingLeft: 5,
-                                                paddingRight: 5,
-                                                boxShadow: `0 1px 4px ${colors.bar}30`,
-                                            }, title: `${bar.reactorId}: ${bar.status} (${formatDuration(duration)})${bar.attempts > 1 ? ` — ${bar.attempts} attempts` : ""}${bar.error ? `\nError: ${bar.error}` : ""}`, children: _jsx("span", { style: {
+                                                gap: 4,
+                                                paddingLeft: 10,
+                                            }, children: [_jsx("span", { style: {
+                                                        fontSize: 10,
+                                                        fontWeight: 500,
+                                                        color: colors.text,
+                                                        opacity: 0.8,
+                                                    }, children: bar.status }), bar.attempts > 1 && (_jsxs("span", { style: { fontSize: 9, color: "#50506a" }, children: ["x", bar.attempts] }))] })] }), bar.status === "error" && bar.error && (_jsx("div", { style: {
+                                        marginLeft: LABEL_WIDTH + 4,
+                                        marginTop: -2,
+                                        marginBottom: 4,
+                                        fontSize: 10,
+                                        color: "#f87171",
+                                        paddingLeft: 4,
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                        whiteSpace: "nowrap",
+                                    }, title: bar.error, children: bar.error })), hasMultipleAttempts && reactorAttempts.map((att) => {
+                                    const attStartMs = new Date(att.startedAt).getTime();
+                                    const attEndMs = new Date(att.completedAt).getTime();
+                                    const attOffsetPct = ((attStartMs - minMs) / rangeMs) * 100;
+                                    const attWidthPct = Math.max(((attEndMs - attStartMs) / rangeMs) * 100, 0.3);
+                                    const attColors = statusColor(att.status);
+                                    const attDuration = attEndMs - attStartMs;
+                                    return (_jsxs("div", { style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            height: ATTEMPT_ROW_HEIGHT,
+                                            opacity: isFuture ? 0.25 : (hasReactorFilter && !isSelected) ? 0.35 : 0.7,
+                                            paddingLeft: 4,
+                                            paddingRight: 4,
+                                        }, children: [_jsxs("div", { style: {
+                                                    width: LABEL_WIDTH,
+                                                    flexShrink: 0,
                                                     fontSize: 9,
-                                                    fontWeight: 600,
-                                                    color: "#0a0a0f",
-                                                    whiteSpace: "nowrap",
+                                                    color: "#70708a",
+                                                    paddingLeft: 16,
                                                     overflow: "hidden",
                                                     textOverflow: "ellipsis",
-                                                }, children: formatDuration(duration) }) }), cursorPct != null && (_jsx("div", { style: {
-                                                position: "absolute",
-                                                left: `${cursorPct}%`,
-                                                top: 0,
-                                                bottom: 0,
-                                                width: 1,
-                                                background: "#6366f1",
-                                                pointerEvents: "none",
-                                                boxShadow: "0 0 4px rgba(99, 102, 241, 0.3)",
-                                            } }))] }), _jsxs("div", { style: {
-                                        width: 80,
-                                        flexShrink: 0,
-                                        display: "flex",
-                                        alignItems: "center",
-                                        gap: 4,
-                                        paddingLeft: 10,
-                                    }, children: [_jsx("span", { style: {
-                                                fontSize: 10,
-                                                fontWeight: 500,
-                                                color: colors.text,
-                                                opacity: 0.8,
-                                            }, children: bar.status }), bar.attempts > 1 && (_jsxs("span", { style: { fontSize: 9, color: "#50506a" }, children: ["x", bar.attempts] }))] })] }, bar.reactorId));
+                                                    whiteSpace: "nowrap",
+                                                    paddingRight: 10,
+                                                }, children: ["attempt ", att.attempt + 1] }), _jsx("div", { style: {
+                                                    flex: 1,
+                                                    position: "relative",
+                                                    height: 14,
+                                                    borderRadius: 3,
+                                                }, children: _jsx("div", { style: {
+                                                        position: "absolute",
+                                                        left: `${attOffsetPct}%`,
+                                                        width: `${attWidthPct}%`,
+                                                        minWidth: 3,
+                                                        height: "100%",
+                                                        background: `linear-gradient(90deg, ${attColors.bar}, ${attColors.barEnd})`,
+                                                        borderRadius: 3,
+                                                        opacity: 0.6,
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        paddingLeft: 4,
+                                                        paddingRight: 4,
+                                                    }, title: `Attempt ${att.attempt + 1}: ${att.status} (${formatDuration(attDuration)})${att.error ? `\n${att.error}` : ""}`, children: _jsx("span", { style: {
+                                                            fontSize: 8,
+                                                            fontWeight: 600,
+                                                            color: "#0a0a0f",
+                                                            whiteSpace: "nowrap",
+                                                            overflow: "hidden",
+                                                            textOverflow: "ellipsis",
+                                                        }, children: formatDuration(attDuration) }) }) }), _jsxs("div", { style: {
+                                                    width: 80,
+                                                    flexShrink: 0,
+                                                    paddingLeft: 10,
+                                                    fontSize: 9,
+                                                    color: attColors.text,
+                                                    opacity: 0.6,
+                                                }, children: [att.status, att.error && (_jsx("span", { style: { color: "#70708a", marginLeft: 4 }, title: att.error, children: "!" }))] })] }, `${att.reactorId}-attempt-${att.attempt}`));
+                                })] }, bar.reactorId));
                     }), _jsxs("div", { style: { marginTop: 10, fontSize: 10, color: "#40405a", marginLeft: LABEL_WIDTH, letterSpacing: "0.03em" }, children: ["Total wall time: ", formatDuration(rangeMs)] })] })] }));
 }

package/dist/queries.d.ts

@@ -13,3 +13,4 @@ export declare const INSPECTOR_AGGREGATE_KEYS = "\n  query InspectorAggregateKey
 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";

package/dist/queries.js

@@ -172,3 +172,17 @@ export const INSPECTOR_REACTOR_OUTCOMES = `
     }
   }
 `;
+export const INSPECTOR_REACTOR_ATTEMPTS = `
+  query InspectorReactorAttempts($correlationId: String!) {
+    inspectorReactorAttempts(correlationId: $correlationId) {
+      eventId
+      reactorId
+      correlationId
+      attempt
+      status
+      error
+      startedAt
+      completedAt
+    }
+  }
+`;

package/dist/reducer.js

@@ -109,6 +109,11 @@ export const reducer = (draft, event) => {
             draft.outcomes[correlationId] = outcomes;
             break;
         }
+        case "events/attempts_loaded": {
+            const { correlationId, attempts } = event.payload;
+            draft.attempts[correlationId] = attempts;
+            break;
+        }
         case "events/correlations_loaded": {
             const { correlations, hasMore, append } = event.payload;
             if (append) {

package/dist/state.d.ts

@@ -1,4 +1,4 @@
-import type { InspectorEvent, CorrelationSummary, ReactorDependency, AggregateLifecycleEntry, FilterState, FlowSelection, ReactorDescription, ReactorDescriptionSnapshot, AggregateTimelineEntry, ReactorLog, ReactorOutcome, LogsFilter, PaneLayout } from "./types";
+import type { InspectorEvent, CorrelationSummary, ReactorDependency, AggregateLifecycleEntry, FilterState, FlowSelection, ReactorDescription, ReactorDescriptionSnapshot, AggregateTimelineEntry, ReactorLog, ReactorOutcome, ReactorAttempt, LogsFilter, PaneLayout } from "./types";
 export type InspectorState = {
     events: InspectorEvent[];
     hasMore: boolean;
@@ -22,6 +22,7 @@ export type InspectorState = {
     descriptionSnapshots: Record<string, ReactorDescriptionSnapshot[]>;
     aggregateTimeline: Record<string, AggregateTimelineEntry[]>;
     outcomes: Record<string, ReactorOutcome[]>;
+    attempts: Record<string, ReactorAttempt[]>;
     correlations: CorrelationSummary[];
     correlationsLoading: boolean;
     correlationsHasMore: boolean;

package/dist/state.js

@@ -15,6 +15,8 @@ export const initialState = {
         search: "",
         correlationId: null,
         aggregateKey: null,
+        from: null,
+        to: null,
     },
     logs: [],
     logsFilter: {
@@ -26,6 +28,7 @@ export const initialState = {
     descriptionSnapshots: {},
     aggregateTimeline: {},
     outcomes: {},
+    attempts: {},
     correlations: [],
     correlationsLoading: false,
     correlationsHasMore: true,

package/dist/theme.js

@@ -28,7 +28,8 @@ function hslToRgb(h, s, l) {
     return [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
 }
 export const LOG_LEVEL_COLORS = {
-    debug: "bg-zinc-600/20 text-zinc-400",
-    info: "bg-indigo-500/15 text-indigo-400",
-    warn: "bg-amber-500/15 text-amber-400",
+    debug: "ci-log-debug",
+    info: "ci-log-info",
+    warn: "ci-log-warn",
+    error: "ci-log-error",
 };

package/dist/types.d.ts

@@ -75,6 +75,16 @@ export type ReactorOutcome = {
     completedAt: string | null;
     triggeringEventIds: string[];
 };
+export type ReactorAttempt = {
+    eventId: string;
+    reactorId: string;
+    correlationId: string;
+    attempt: number;
+    status: string;
+    error: string | null;
+    startedAt: string;
+    completedAt: string;
+};
 export type ReactorDescriptionSnapshot = {
     seq: number;
     eventId: string;
@@ -113,14 +123,12 @@ export type CorrelationSummary = {
     rootEventType: string;
     hasErrors: boolean;
 };
-export type CorrelationSummaryPage = {
-    correlations: CorrelationSummary[];
-    nextCursor: string | null;
-};
 export type FilterState = {
     search: string;
     correlationId: string | null;
     aggregateKey: string | null;
+    from: string | null;
+    to: string | null;
 };
 export type LogsFilter = {
     scope: "reactor" | "correlation";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "causal-inspector",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",