causal-inspector 0.1.0

package/dist/panes/AggregateTimelinePane.js

@@ -0,0 +1,224 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useEffect, useRef, useState } from "react";
+import { useSelector, useDispatch } from "../machine";
+import { eventBg, eventTextColor } from "../theme";
+import { inScrubberRange } from "../utils";
+function tokenizeJson(json) {
+    const tokens = [];
+    const re = /("(?:[^"\\]|\\.)*")\s*:|("(?:[^"\\]|\\.)*")|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b)|(\bnull\b)|([{}[\]:,])/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = re.exec(json)) !== null) {
+        if (match.index > lastIndex) {
+            tokens.push({ text: json.slice(lastIndex, match.index), color: "" });
+        }
+        if (match[1] !== undefined) {
+            tokens.push({ text: match[1], color: "#60a5fa" }); // key — blue
+            tokens.push({ text: ":", color: "#71717a" });
+        }
+        else if (match[2] !== undefined) {
+            tokens.push({ text: match[2], color: "#4ade80" }); // string — green
+        }
+        else if (match[3] !== undefined) {
+            tokens.push({ text: match[3], color: "#fbbf24" }); // number — amber
+        }
+        else if (match[4] !== undefined) {
+            tokens.push({ text: match[4], color: "#c084fc" }); // bool — purple
+        }
+        else if (match[5] !== undefined) {
+            tokens.push({ text: match[5], color: "#71717a" }); // null — gray
+        }
+        else if (match[6] !== undefined) {
+            tokens.push({ text: match[6], color: "#71717a" }); // punctuation
+        }
+        lastIndex = re.lastIndex;
+    }
+    if (lastIndex < json.length) {
+        tokens.push({ text: json.slice(lastIndex), color: "" });
+    }
+    return tokens;
+}
+function InlineJson({ value }) {
+    const json = typeof value === "string" ? value : JSON.stringify(value, null, 2);
+    const tokens = useMemo(() => tokenizeJson(json), [json]);
+    return (_jsx("pre", { style: {
+            margin: 0,
+            fontSize: 11,
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+            lineHeight: 1.5,
+        }, children: tokens.map((t, i) => (_jsx("span", { style: { color: t.color || undefined }, children: t.text }, i))) }));
+}
+function jsonDiff(prev, curr) {
+    const diffs = [];
+    if (prev == null && curr == null)
+        return diffs;
+    if (prev == null) {
+        // Everything is added
+        if (typeof curr === "object" && curr !== null && !Array.isArray(curr)) {
+            for (const key of Object.keys(curr)) {
+                diffs.push({ kind: "added", key, value: curr[key] });
+            }
+        }
+        return diffs;
+    }
+    if (curr == null) {
+        if (typeof prev === "object" && prev !== null && !Array.isArray(prev)) {
+            for (const key of Object.keys(prev)) {
+                diffs.push({ kind: "removed", key, value: prev[key] });
+            }
+        }
+        return diffs;
+    }
+    const prevObj = (typeof prev === "object" && !Array.isArray(prev) ? prev : {});
+    const currObj = (typeof curr === "object" && !Array.isArray(curr) ? curr : {});
+    const allKeys = new Set([...Object.keys(prevObj), ...Object.keys(currObj)]);
+    for (const key of allKeys) {
+        const inPrev = key in prevObj;
+        const inCurr = key in currObj;
+        if (inCurr && !inPrev) {
+            diffs.push({ kind: "added", key, value: currObj[key] });
+        }
+        else if (inPrev && !inCurr) {
+            diffs.push({ kind: "removed", key, value: prevObj[key] });
+        }
+        else if (JSON.stringify(prevObj[key]) !== JSON.stringify(currObj[key])) {
+            diffs.push({ kind: "changed", key, oldValue: prevObj[key], newValue: currObj[key] });
+        }
+    }
+    return diffs;
+}
+function DiffView({ diffs }) {
+    if (diffs.length === 0) {
+        return (_jsx("div", { style: { fontSize: 11, color: "#52525b", fontStyle: "italic", padding: "2px 0" }, children: "No changes" }));
+    }
+    const mono = {
+        fontSize: 11,
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+        lineHeight: 1.5,
+        wordBreak: "break-word",
+    };
+    return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: diffs.map((d) => {
+            if (d.kind === "added") {
+                return (_jsxs("div", { style: { ...mono, color: "#4ade80", background: "rgba(74,222,128,0.08)", borderRadius: 3, padding: "1px 4px" }, children: [_jsx("span", { style: { color: "#22c55e", fontWeight: 600 }, children: "+ " }), _jsx("span", { style: { color: "#60a5fa" }, children: d.key }), _jsx("span", { style: { color: "#71717a" }, children: ": " }), _jsx("span", { children: JSON.stringify(d.value) })] }, d.key));
+            }
+            if (d.kind === "removed") {
+                return (_jsxs("div", { style: { ...mono, color: "#f87171", background: "rgba(248,113,113,0.08)", borderRadius: 3, padding: "1px 4px" }, children: [_jsx("span", { style: { color: "#ef4444", fontWeight: 600 }, children: "- " }), _jsx("span", { style: { color: "#60a5fa" }, children: d.key }), _jsx("span", { style: { color: "#71717a" }, children: ": " }), _jsx("span", { children: JSON.stringify(d.value) })] }, d.key));
+            }
+            // changed
+            return (_jsxs("div", { style: { ...mono, background: "rgba(251,191,36,0.08)", borderRadius: 3, padding: "1px 4px" }, children: [_jsx("span", { style: { color: "#fbbf24", fontWeight: 600 }, children: "~ " }), _jsx("span", { style: { color: "#60a5fa" }, children: d.key }), _jsx("span", { style: { color: "#71717a" }, children: ": " }), _jsx("span", { style: { color: "#f87171", textDecoration: "line-through" }, children: JSON.stringify(d.oldValue) }), _jsx("span", { style: { color: "#71717a" }, children: " \u2192 " }), _jsx("span", { style: { color: "#4ade80" }, children: JSON.stringify(d.newValue) })] }, d.key));
+        }) }));
+}
+// ---------------------------------------------------------------------------
+// Collapsible aggregate card
+// ---------------------------------------------------------------------------
+function AggregateCard({ aggregateKey, state, prevState, diffMode, }) {
+    const [collapsed, setCollapsed] = useState(false);
+    // Parse "AggType:id" into type + id for display
+    const colonIdx = aggregateKey.indexOf(":");
+    const aggType = colonIdx > 0 ? aggregateKey.slice(0, colonIdx) : aggregateKey;
+    const aggId = colonIdx > 0 ? aggregateKey.slice(colonIdx + 1) : null;
+    const diffs = useMemo(() => {
+        if (!diffMode || prevState === undefined)
+            return [];
+        return jsonDiff(prevState, state);
+    }, [diffMode, prevState, state]);
+    const showDiff = diffMode && prevState !== undefined;
+    return (_jsxs("div", { style: {
+            background: "rgba(255, 255, 255, 0.02)",
+            border: "1px solid rgba(255, 255, 255, 0.06)",
+            borderRadius: 8,
+            overflow: "hidden",
+            flex: "1 1 280px",
+            maxWidth: 500,
+        }, children: [_jsxs("div", { onClick: () => setCollapsed(!collapsed), style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    padding: "4px 8px",
+                    cursor: "pointer",
+                    userSelect: "none",
+                    borderBottom: collapsed ? "none" : "1px solid rgba(255,255,255,0.06)",
+                }, children: [_jsx("span", { style: { fontSize: 9, color: "#52525b", transform: collapsed ? "rotate(-90deg)" : "rotate(0deg)", transition: "transform 100ms" }, children: "\u25BC" }), _jsx("span", { style: { fontSize: 11, fontWeight: 500, color: "#e4e4e7" }, children: aggType }), aggId && (_jsx("span", { style: { fontSize: 10, color: "#71717a", fontFamily: "monospace" }, children: aggId })), showDiff && diffs.length > 0 && (_jsxs("span", { style: { fontSize: 9, color: "#fbbf24", marginLeft: "auto" }, children: [diffs.length, " change", diffs.length !== 1 ? "s" : ""] })), showDiff && diffs.length === 0 && (_jsx("span", { style: { fontSize: 9, color: "#52525b", marginLeft: "auto" }, children: "unchanged" }))] }), !collapsed && (_jsx("div", { style: { padding: "4px 8px 6px" }, children: showDiff ? _jsx(DiffView, { diffs: diffs }) : _jsx(InlineJson, { value: state }) }))] }));
+}
+export function AggregateTimelinePane() {
+    const correlationId = useSelector((s) => s.flowCorrelationId);
+    const entries = useSelector((s) => correlationId ? s.aggregateTimeline[correlationId] ?? [] : []);
+    const scrubberStart = useSelector((s) => s.scrubberStart);
+    const scrubberEnd = useSelector((s) => s.scrubberEnd);
+    const dispatch = useDispatch();
+    const [diffMode, setDiffMode] = useState(false);
+    // Build a lookup: seq → { aggKey → state } for computing diffs
+    const prevStateMap = useMemo(() => {
+        const map = new Map();
+        for (let i = 1; i < entries.length; i++) {
+            const prev = entries[i - 1];
+            const prevAggs = new Map();
+            for (const agg of prev.aggregates) {
+                prevAggs.set(agg.key, agg.state);
+            }
+            map.set(entries[i].seq, prevAggs);
+        }
+        return map;
+    }, [entries]);
+    // Auto-scroll to current row when scrubber moves
+    const currentRowRef = useRef(null);
+    useEffect(() => {
+        if (scrubberEnd != null && currentRowRef.current) {
+            currentRowRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        }
+    }, [scrubberEnd]);
+    const handleRowClick = useCallback((seq) => {
+        dispatch({ type: "ui/scrubber_end_changed", payload: { end: seq } });
+    }, [dispatch]);
+    if (!correlationId) {
+        return (_jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#50506a", fontSize: 12, letterSpacing: "0.03em" }, children: "Open a flow to see the aggregate state timeline" }));
+    }
+    if (entries.length === 0) {
+        return (_jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#50506a", fontSize: 12, letterSpacing: "0.03em" }, children: "No aggregate state snapshots for this correlation" }));
+    }
+    return (_jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, padding: "6px 12px", borderBottom: "1px solid rgba(255,255,255,0.06)", flexShrink: 0, background: "rgba(15, 15, 20, 0.6)", backdropFilter: "blur(8px)" }, children: [_jsx("button", { onClick: () => setDiffMode(false), style: {
+                            fontSize: 10,
+                            padding: "3px 10px",
+                            borderRadius: 6,
+                            border: "1px solid",
+                            borderColor: !diffMode ? "rgba(99,102,241,0.3)" : "rgba(255,255,255,0.06)",
+                            background: !diffMode ? "rgba(99,102,241,0.12)" : "transparent",
+                            color: !diffMode ? "#818cf8" : "#70708a",
+                            cursor: "pointer",
+                            transition: "all 150ms",
+                            letterSpacing: "0.02em",
+                        }, children: "Full State" }), _jsx("button", { onClick: () => setDiffMode(true), style: {
+                            fontSize: 10,
+                            padding: "3px 10px",
+                            borderRadius: 6,
+                            border: "1px solid",
+                            borderColor: diffMode ? "rgba(99,102,241,0.3)" : "rgba(255,255,255,0.06)",
+                            background: diffMode ? "rgba(99,102,241,0.12)" : "transparent",
+                            color: diffMode ? "#818cf8" : "#70708a",
+                            cursor: "pointer",
+                            transition: "all 150ms",
+                            letterSpacing: "0.02em",
+                        }, children: "Diff" })] }), _jsx("div", { style: { flex: 1, overflow: "auto", padding: "8px 12px" }, children: entries.map((entry, entryIdx) => {
+                    const isOutside = (scrubberStart != null || scrubberEnd != null) && !inScrubberRange(entry.seq, scrubberStart, scrubberEnd);
+                    const isCurrent = scrubberEnd === entry.seq;
+                    const prevAggs = prevStateMap.get(entry.seq);
+                    return (_jsxs("div", { ref: isCurrent ? currentRowRef : undefined, onClick: () => handleRowClick(entry.seq), style: {
+                            opacity: isOutside ? 0.3 : 1,
+                            padding: "6px 8px",
+                            marginBottom: 4,
+                            borderRadius: 6,
+                            background: isCurrent ? "rgba(99,102,241,0.15)" : "transparent",
+                            cursor: "pointer",
+                            transition: "opacity 150ms, background 150ms",
+                        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }, children: [_jsxs("div", { style: { fontSize: 10, fontWeight: 600, color: "#a1a1aa", minWidth: 40 }, children: ["#", entry.seq] }), _jsx("div", { style: {
+                                            fontSize: 11,
+                                            fontWeight: 500,
+                                            color: eventTextColor(entry.eventType),
+                                            background: eventBg(entry.eventType),
+                                            borderRadius: 4,
+                                            padding: "1px 6px",
+                                        }, children: entry.eventType }), diffMode && entryIdx === 0 && (_jsx("span", { style: { fontSize: 9, color: "#52525b", fontStyle: "italic" }, children: "initial state" }))] }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 8, marginLeft: 46 }, children: entry.aggregates.map((agg) => (_jsx(AggregateCard, { aggregateKey: agg.key, state: agg.state, prevState: prevAggs?.get(agg.key), diffMode: diffMode && entryIdx > 0 }, agg.key))) })] }, entry.seq));
+                }) })] }));
+}

package/dist/panes/CausalFlowPane.d.ts

@@ -0,0 +1,7 @@
+export type CausalFlowPaneProps = {
+    /** Optional set of reactor IDs to hide by default. */
+    defaultHiddenReactors?: Set<string>;
+    /** Optional extra header content (e.g., domain-specific run stats). */
+    headerExtra?: React.ReactNode;
+};
+export declare function CausalFlowPane({ defaultHiddenReactors, headerExtra }?: CausalFlowPaneProps): import("react/jsx-runtime").JSX.Element;